cara membuat widget daftar blog otomatis

Cara membuat widget daftar isi blog otomatis - Semua blogger ingin blognya masuk dalam daftar mesin pencari dibagian atas, karena itu pasti akan membuat traffiknya meningkat. Tapi selain dari mesin pencari, kita juga harus menebar link posting di blog kita. Kalau lama kelamaan, kita malas juga menebar link.

1. Dasbor > Rancangan / Layout > Tambah / Add gadget

2. Pilih HTML / JavaScript

3. Copy kode dibawah ini

<div style="background: transparent url(#) no-repeat scroll 0 0; border:1px solid white; height:250px; overflow:auto; width:280px;text-align:left;float:center">
<div id="cl_option">
Loading... </div>
<div id="cl_content_list">
</div>
<script type="text/javascript">
var jumlah_kata_dalam_ringkasan = 200;
</script>
<script src="http://sites.google.com/site/kibagusnet/x-design/Daftarisi-hdx.js">

</script>
<script src="http://galaumu-galauku.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=onLoadFeed&amp;max-results=500">

</script><div style="text-align:center">Cara membuat <a href="http://galaumu-galauku.blogspot.com/

4. Paste kode diatas pada kotak konten Kode HTML / JavaScript

Simpan !

Ket:
- ganti galaumu-galauku.blogspot.com dengan nama domain blog sobat

Nah tutorial diatas adalah cara membuat daftar isi blog dengan otomatis, dan saya akhiri posting ini dan sekian ^^

Selesai

Cara membuat artikel terkait dengan gambar ( Thumbnail )

Pada postingan sebelumnya saya telah share Cara Membuat Artikel Terkait dengan Scroll Bar dan Cara Membuat Related Post dengan Thumbnail yang kedua-duanya sama kegunaannya untuk membuat artikel terkait dibawah postingan blog hanya berbeda model saja. Dan kali ini saya masih akan membahas Cara Membuat Artikel Terkait dengan Gambar (Thumbnail) tapi lebih mudah dan praktis tidak perlu mengedit html template dalam membuatnya. Kita akan menggunakan bantuan LinkWithin untuk membuat artikel terkait ini.  

LinkWithin akan membaca setiap gambar yang ada didalam setiap postingan artikel dan akan menjadikannya artikel terkait secara otomatis dengan gambar yang relevan dengan judul tepat dibawah postingan artikel. Dan untuk mendapatkannya cukup mudah, untuk langkah-langkahnya silahkan ikuti cara dibawah ini, , , ,

1. Langsung menuju TKP >>> LinkWithin

2. Jika sudah isi form registrasi blog kita untuk mendapatkan Widget ini. Untuk mengisinya seperti gambar dibawah ini :

3. Untuk langkah selanjutnya dalam LinkWithin sudah dijelaskan dengan rinci cara memasangnya diblog, jika sobat ingin mengambil link Klik bacaan Install Widget 

4. utk langkah selanjutnya sobat blogger pasti langsung  paham dengan mengikuti langkah Y telah ada pada langkah Y disediakan LinkWithin.

Dan secara otomatis akan langsung terinstall diblog kita, dan selamat Widget LinkWithin utk Membuat Artikel Terkait dengan Gambar berhasil dipasang diblog

<<<<< Selamat Mencoba >>>>> 

Memasang Widget Facebook di Blog

Siapa yang tidak kenal Facebook ? Jejaring sosial yang

satu ini merupakan salah satu yang paling banyak

diminati orang di seluruh dunia. Bahkan karena disinyalir

'ada' dampak negatifnya selain sisi positifnya, jejaring ini

sempat menjadi sorotan masyarakat terutama di

Indonesia, sehingga menimbulkan pro dan kontra di

kalangan masyarakat kita. Bagi anda yang mengambil

sisi positifnya, ada baiknya untuk memasang widget ini

pada blog milik anda, karena mengingat salah satu

fungsinya yaitu sebagai sarana komunikasi antar pemilik

dan pengunjung blog. Berikut ini cara memasangnya :

1.   Login ke akun Facebook Anda.

2.   Setelah itu, klik 'Profil'.
      Coba anda lihat pada bagian kiri paling bawah.
      Klik tulisan 'Tambah sebuah Lencana
      pada Situs Anda' Lihat gambar di bawah :

3.   Akan muncul seperti gambar di bawah.
      Anda bisa mengklik 'Buat Lencana Baru'
      atau 'Sunting lencana ini'

4.   Pada gambar di bawah adalah tampilan untuk
      anda mengedit model lencananya. Atur dan
      sesuaikan dengan keinginan anda,
      setelah itu, klik 'Simpan'.

5.   Copy kode yang didapat dari hasil
      pengeditan anda ke dalam Notepad.
      (lihat gambar di bawah yang diberi
      tanda lingkaran warna merah)

6.   Lalu anda login ke blog anda.
      Tambahkan Gadgetnya pilih HTML/JavaScript.
      Letakkan kode yang anda copy tadi
      ke dalam kontennya.
      Selesai, lihatlah hasilnya.

Cara Jadi Pengikut di Blog

Keuntungan menjadi pengikut pada suatu blog adalah

dapat meng-update tulisan terbaru pada blog yang

kita ikuti. Sebagai pengikut, kita juga dapat menampilkan

photo kita pada daftar pengikut di blog tersebut. Cara

untuk menjadi pengikut tidaklah sulit, ini langkahnya :

1.   Kunjungi blog yang ingin anda ikuti.

2.   Cari widget pengikut yang dipasang pada blog
      tersebut yang biasanya terletak pada sidebar.

3.   Kalau sudah ketemu, klik 'Follow'
      Seperti pada gambar di bawah ini :

4.   Tunggu sesaat dan akan muncul gambar
      seperti preview di bawah ini :

5.   Pilih salah satu akun yang anda miliki,
      setelah itu anda klik ikonnya.
      Contoh gambar di bawah adalah 'YAHOO!'.
      Isikan data-data anda dengan benar.

6.   Selanjutnya muncul seperti gambar di bawah.
      Photo profil akun anda langsung terlihat.
      Klik saja 'Ikuti blog ini'.

 7.   Setelah itu muncul gambar pemberitahuan
       bahwa kita diterima menjadi pengikut pada
       blog tersebut, lalu klik 'Selesai'.

 8.   Tampilan di blognya akan  seperti berikut ini :

Read more: http://galaumu-galauku.blogspot.com

Cara menambahkan background pada judul posting

Menambahkan background pada judul posting merupakan
salah satu kiat untuk mempercantik penampilan blog yang
kita miliki, sebagaimana juga halnya yang diterapkan pada
blog ini. Background yang kita tambahkan bisa berupa
warna biasa saja dan bisa juga menggunakan gambar
animasi atau gambar yang bergerak. Bila anda ingin
mencobanya, ikuti saja langkahnya seperti berikut ini :

1.   Masuk Edit HTML pada blog anda.

2.   Cari kode .post h3 {

3.   Tambahkan kode berikut ini di bawahnya.

Untuk background berwarna biasa :

background-color: #FFFF00;

Susunan kodenya jadi seperti ini :

.post h3 {
background-color: #FFFF00;

Keterangan :

Ganti FFFF00, dengan warna lain
menurut selera anda.

Untuk background ber-animasi :

background: url(URL gambar) no-repeat;

Susunan kodenya jadi seperti ini :

.post h3 {
background: url(URL Gambar) no-repeat;

Keterangan :

Ganti URL Gambar, dengan URL Gambar

yang anda miliki.

Berikut ini beberapa contoh background

yang dapat anda gunakan :

Background 1 = 

Kode URL-nya =

http://i1128.photobucket.com/albums/m486/syamsudin1/posting_1.gif

Background 2 =

Kode URL-nya =

http://i1128.photobucket.com/albums/m486/syamsudin1/posting_2.gif

Background 3 =

Kode URL-nya =

http://i1128.photobucket.com/albums/m486/syamsudin1/posting_3.gif

Background 4 =

Kode URL-nya =

http://i1128.photobucket.com/albums/m486/syamsudin1/posting_4.gif

Selamat mencoba, good luck!

Read more: http://galaumu-galauku.blogspot.com

Membuat Background Pada Postingan

Satu saat nanti mungkin kita merasa bosan dengan

warna background yang ada pada area postingan kita,

yang warnanya atau backgroundnya selalu itu-itu saja.

Nah, tutorial kali ini mungkin bisa menjadi salah satu

solusinya. Saya rasa anda ingin segera membuatnya.

Baiklah kita mulai saja pada tahap cara membuatnya.

UNTUK BERBACKGROUND WARNA :

Sisipkan kode berikut ini
pada awal isi postingan :

<div style="background: #00FFFF">

Dan sisipkan kode : </div>
pada akhir isi postingnya.

Contohnya seperti di bawah ini :

ISI POSTINGANNYA ISI POSTINGANNYA ISI POSTINGANNYA ISI POSTINGANNYA ISI
ISI POSTINGANNYA ISI POSTINGANNYA ISI POSTINGANNYA ISI POSTINGANNYA ISI
ISI POSTINGANNYA ISI POSTINGANNYA ISI POSTINGANNYA ISI POSTINGANNYA ISI
ISI POSTINGANNYA ISI POSTINGANNYA ISI POSTINGANNYA ISI POSTINGANNYA ISI
ISI POSTINGANNYA ISI POSTINGANNYA ISI POSTINGANNYA ISI POSTINGANNYA ISI
ISI POSTINGANNYA ISI POSTINGANNYA ISI POSTINGANNYA ISI POSTINGANNYA ISI
ISI POSTINGANNYA ISI POSTINGANNYA ISI POSTINGANNYA ISI POSTINGANNYA ISI
ISI POSTINGANNYA ISI POSTINGANNYA ISI POSTINGANNYA ISI POSTINGANNYA ISI
ISI POSTINGANNYA ISI POSTINGANNYA ISI POSTINGANNYA ISI POSTINGANNYA ISI
ISI POSTINGANNYA ISI POSTINGANNYA ISI POSTINGANNYA ISI POSTINGANNYA ISI

Keterangan :

Ganti warna backgroundnya sesuai
dengan keinginan anda.

UNTUK BERBACKGROUND GAMBAR :

Sisipkan kode berikut ini
pada awal isi postingan :

<div style="background-attachment: scroll; background

-color: #FFFF00; background-image: url(&quot;

URL GAMBAR ANDA&quot;); background-position:

right bottom; background-repeat: repeat; border: 1px

solid rgb(153, 0, 255); height: 100%; overflow: auto;

padding: 5px; text-align: left; width: 100%;">

Dan sisipkan kode : </div>
pada akhir isi postingnya.

Contohnya seperti di bawah ini :

ISI POSTINGANNYA ISI POSTINGANNYA ISI POSTINGANNYA ISI POSTINGANNYA ISI
ISI POSTINGANNYA ISI POSTINGANNYA ISI POSTINGANNYA ISI POSTINGANNYA ISI
ISI POSTINGANNYA ISI POSTINGANNYA ISI POSTINGANNYA ISI POSTINGANNYA ISI
ISI POSTINGANNYA ISI POSTINGANNYA ISI POSTINGANNYA ISI POSTINGANNYA ISI
ISI POSTINGANNYA ISI POSTINGANNYA ISI POSTINGANNYA ISI POSTINGANNYA ISI
ISI POSTINGANNYA ISI POSTINGANNYA ISI POSTINGANNYA ISI POSTINGANNYA ISI
ISI POSTINGANNYA ISI POSTINGANNYA ISI POSTINGANNYA ISI POSTINGANNYA ISI
ISI POSTINGANNYA ISI POSTINGANNYA ISI POSTINGANNYA ISI POSTINGANNYA ISI
ISI POSTINGANNYA ISI POSTINGANNYA ISI POSTINGANNYA ISI POSTINGANNYA ISI
ISI POSTINGANNYA ISI POSTINGANNYA ISI POSTINGANNYA ISI POSTINGANNYA ISI

Keterangan :

Ganti warna backgroundnya sesuai
dengan keinginan anda.

Ganti url background dengan
gambar yang anda miliki.

CATATAN :

Saat memasukkan kode-kode di atas kedalam
postingan, HARUS dalam format Edit HTML,
bukan Compose.

Read more: http://galaumu-galauku.blogspot.com

Cara menambahkan background pada judul sidebar

Sebagaimana halnya menambahkan background pada judul posting, penambahan background pada judul sidebar inipun dapat membuat penampilan blog yang kita miliki menjadi semakin enak untuk dilihat terutama oleh para pengunjung blog. Bila anda, terutama rekan pemula yang ingin mencoba menambahkan background pada judul sidebarnya, ikuti langkahnya berikut ini :
1.   Masuk Edit HTML pada blog anda.

2.   Cari kode h2 {

3.   Tambahkan kode berikut ini persis di bawahnya.

background:url(URL Gambar)repeat-x;

Susunan kodenya jadi seperti ini :  

h2 { background:url(URL Gambar) no-repeat;

4.  Ganti URL Gambar, dengan URL Gambar    
     yang anda miliki.

Berikut ini beberapa contoh background

yang dapat anda gunakan :

Background 1 =

Kode URL-nya = http://i1128.photobucket.com/albums/m486/syamsudin1/sidebar_1.gif

Background 2 =

Kode URL-nya = http://i1128.photobucket.com/albums/m486/syamsudin1/sidebar_2.gif

Background 3 =

Kode URL-nya = http://i1128.photobucket.com/albums/m486/syamsudin1/sidebar_3.gif

Background 4 =

Kode URL-nya = http://i1128.photobucket.com/albums/m486/syamsudin1/sidebar_4.gif

Background 5 =

Kode URL-nya = http://i1128.photobucket.com/albums/m486/syamsudin1/sidebar_5.gif  

T I P S  :

 Background-background di atas dapat pula anda

terapkan sebagai background body blog anda,

seperti yang anda lihat pada blog ini.

Read more: http://galaumu-galauku.blogspot.com

Membuat Recent Post Otomatis

Seperti yang anda lihat pada

gambar di samping. Seperti
itulah tampilan Recent Post

yang akan kita buat ini.
Langsung saja yah kita ke

cara membuatnya :

*  Login ke blogger anda.

*  Di Dasbor, anda pilih Rancangan

*  Tambah Gadget dan pilih HTML/JavaScript

*  Copy Script di bawah ini dan

    paste ke dalam kontennya.

*  Simpan dan lihat hasilnya.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
</script>
<style media="screen" type="text/css">
<!--
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:260px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#ffffff;
border:1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#A9A9F5;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}
-->
</style>

<script language="javascript">
imgr = new Array();

imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;

boxwidth = 255;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 70;

thumbheight = 70;

fontsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = true;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 10;

home_page = "http: syamsudinnamaku.blogspot.com/";

limitspy=4
intervalspy=4000

</script>
<div id="spylist">
<script src='https://sites.google.com/site/teknikbuatblog/tbb/tbb.js?attredirects=0&d=1' type='text/javascript'></script>

CATATAN :

*  Ganti URL saya (teks yang berkedip)
   dengan URL anda.

Read more: http://galaumu-galauku.blogspot.com

Memasang Pesawat Terbang di Blog

Menyusul rekannya " Helicopter " yang telah terbang
lebih dahulu, kini " Pesawat " pun tidak mau ketinggalan
dalam perannya untuk menghiasi blog kita khususnya
sesama sahabat blogger pemula. Langsung saja deh kitamenuju ke tutorial cara memasangnya :

Kode Scriptnya =

<script src="http://h1.ripway.com/syamsudin/pesawat.js" type="text/javascript"></script>

Cara Memasangnya =

Selamat mencoba,
semoga anda suka, good luck!

Read more: http://galaumu-galauku.blogspot.com

Cara Membuat Iklan Melayang

Apakah Anda tertarik? Hanya 1 (satu) langkah
untuk membuatnya, yaitu :

1.   Rancangan -> Tambah Gadget ->
      HTML/JavaScript.

2.   Masukkan ke dalam kontennya
      kode berikut ini lalu simpan.

view source

print?

01	<style type="text/css">

02

03

#sy{

04	position:fixed;

05	bottom:20px;

06

left:1px;

07	z-index:+1000;

08

}

09

10	* html #sy{position:relative;}

11

.sytab{

12	height:45px;

13	width:30px;

14	float:right;

15	cursor:help;

16	background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMQCLEetgRaM6c4-z3iandAvQLYbR_cNUzTedKUdf9z7n2FQZ24jjQ954dUSnNsP1QF2ttIc_RjFk2s2ysOVeaBdQZ5Y05bNwmx3OnmRFLZGRENhRvxxPbRaL8KT5GeScTtJqppZ7yNea3/') no-repeat;}

17	.sycontent{

18	float:right;

19	border:2px solid #CCC;

20	background:#FFF;

21	padding:5px;}

22

23

</style>

24

25	<script type="text/javascript">

26

27	function showHideSY(){

28	var sy = document.getElementById("sy");

29	var w = sy.offsetWidth;

30	sy.opened ? moveSY(20-w, 0) : moveSY(0, 35-w);

31	sy.opened = !sy.opened;}

32	function moveSY(x0, xf){

33	var sy = document.getElementById("sy");

34	var dx = Math.abs(x0-xf) > 10 ? 5 : 1;

35	var dir = xf>x0 ? 1 : -1;

36	var x = x0 + dx * dir;

37	sy.style.left = x.toString() + "px";

38	if(x0!=xf){setTimeout("moveSY("+x+", "+xf+")", 90);}

39

}

40

41

</script>

42

43	<div id="sy">

44	<div class="sytab" onclick="showHideSY()" title="Show / Close" alt=""> </div>

45	<div class="sycontent">

46

47	<a href="URL iklan Anda di sini" target="_blank"><img src="URL image iklan Anda di sini" alt=".............." style="width:....px; height:....px;" border="0"/></a>

48

49	<script type="text/javascript">

50	var sy = document.getElementById("sy");

51	sy.style.left = (30-sy.onsetWidth).toString() + "px";

52	</script></div></div>

KETERANGAN =

Sesuaikan posisi letaknya pada kode
bottom dan left.

Masukkan URL alamat iklan anda
pada kode URL iklan Anda di sini.

Masukkan juga kode URL image iklan anda
pada kode URL Image Iklan Di sini.

Sesuaikan ukuran lebar dan tinggi image
iklan Anda pada kode width dan height.

Isilah alt="........................."
dengan judul iklan Anda.

TAMBAHAN :

Perhatikan pada kode ini :

<a href="URL iklan Anda di sini" target="_blank"><img src="URL image iklan Anda di sini" alt=".............." style="width:....px; height:....px;" border="0"/></a>

Kode tersebut dapat Anda gantikan dengan kode
ShoutMix atau kode Buku Tamu Anda.

Selamat mencoba dan tetap good luck!

Read more: http://galaumu-galauku.blogspot.com

Cara Memasang Group Chat Di Blog

1 (satu) lagi widget yang bisa dipasang pada blog
Anda, yaitu Group Chat keluaran dari Chatango.

Widget ini berfungsi lebih dari sekedar buku tamu
bahkan boleh dibilang ini adalah tempat bercurhat-
ria layaknya di akun facebook saja.

Anda bisa lihat contohnya seperti di bawah ini :



[ Copy this | Start New | Full Size ]

Mau pasang? Ikuti langkah yang berikut :

1.   Pertama login ke sana.

2.   Klik " Create a public group ".
     (lihatlah gambar di bawah)

3.   Isi dan aturlah widget Anda
     dengan komposisi yang Anda suka.
     Bila sudah, klik " Continue ".
     (lihatlah gambar di bawah)

4.   Isi lagi beberapa pertanyaannya.
      Bila sudah, klik " Sign up ".
     (lihatlah gambar di bawah)

5.    Copy kodenya, seperti yang ditandai dengan
      garis warna merah pada gambar di bawah.

6.   Terakhir, masukkan kode tersebut
      ke dalam konten HTML/JavaScript.

Selamat mencoba dan tetap good luck!

Read more: http://galaumu-galauku.blogspot.com

Cara Memasang Data Pengunjung Blog 6

Data pengunjung yang satu ini mendata dan
menginformasikan kepada pengunjung blog
Anda bahwa pengunjung tersebut adalah
pengunjung yang ke sekian dari jumlah
pengunjung telah mengunjungi situs Anda.

Contohnya seperti di bawah ini :

Anda pengunjung yang ke:

Inilah caranya bila Anda ingin memasang :

1.   Copylah kode berikut ini :

1	<h3>Anda pengunjung yang ke:</h3>

2	<a href="http://syamsudinpunya.blogspot.com/" target="_blank"><img border="0" src="http://cc.amazingcounters.com/counter.php?i=3013268&amp;c=9040117" alt="Traffic Counter" /></a>

KETERANGAN :

Ganti URL nama blog ini

dengan URL nama blog Anda.

2.   Masuk ke Rancangan -> Tambah Gadget ->
      Pilihlah HTML/JavaScript lalu masukkan
      kode tersebut ke dalam kontennya, simpan.

Selamat mencoba, good luck!

Read more: http:/galaumu-galauku.blogspot.com

Cara Memasang Jam Model Sliding

Jam keluaran POQBUM.COM ini sungguh sangat

dinamis tampilannya. Bila anda tidak percaya,

lihat saja tampilan seperti berikut ini :

Bila anda ingin melihat Jam atau Kalender, anda
tinggal mengklik gambar panahnya ataupun pada
tulisannya, maka Jam atau Kalendernya akan terlihat.
Bila anda ingin menutupnya, maka klik saja lagi
gambar panahnya tersebut ..... Cantik bukan ?!

Untuk memasangnya pun cukup mudah. Anda hanya
memasukkan kode yang ada di bawah ini ke dalam
Gadget HTML/JavaScript, kemudian simpan, selesai.

<embed allowscriptaccess="never" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://poq-space.com/Files/clocks/clock41.swf" width="140" height="282" wmode="transparent" type="application/x-shockwave-flash" quality="high"></embed>


Semoga anda suka, good luck!
Read more: http://galaumu-galauku.blogspot.com

Bila anda ingin melihat Jam atau Kalender, anda
tinggal mengklik gambar panahnya ataupun pada
tulisannya, maka Jam atau Kalendernya akan terlihat.
Bila anda ingin menutupnya, maka klik saja lagi
gambar panahnya tersebut ..... Cantik bukan ?!

Untuk memasangnya pun cukup mudah. Anda hanya
memasukkan kode yang ada di bawah ini ke dalam
Gadget HTML/JavaScript, kemudian simpan, selesai.

<embed allowscriptaccess="never" pluginspage="http://www.macromedia.com/go/getflashplayer" src="http://poq-space.com/Files/clocks/clock41.swf" width="140" height="282" wmode="transparent" type="application/x-shockwave-flash" quality="high"></embed>


Semoga anda suka, good luck!

Read more: http://syamsudinnamaku.blogspot.com/2011/07/cara-memasang-jam-model-sliding.html#ixzz1nIWEZSKm

Membuat Hosting Gambar/images

Gambar atau image yang anda buat dengan Photoshop

misalnya, itu tidak dapat begitu saja anda masukkan ke

dalam website/blog anda, kecuali dalam postingan.

Untuk itu kita perlukan menghosting terlebih dahulu

gambar tersebut untuk mendapatkan kode HTML atau

Link-nya. Banyak situs yang menyediakan hosting secara

gratis, misalnya : photobucket.com, mediafire.com,

imageshack.us/, tinypic.com dan masih banyak lagi.

Disini saya ambil 2 (dua) contoh situs hosting yang tanpa

kita harus melakukan registrasi. Sebelumnya siapkan

gambar/image atau photo yang ingin anda upload.

1.  TINYPIC.COM. Login di sini.

    Anda dapat meng-upload gambar, video dan URL.
    Anda pelajari nanti satu per satu.
    Sebagai contoh, kita akan meng-upload gambar,
    maka File Typenya, anda pilih Image.
    Akan tampil gambar seperti :

    •  Lingkaran nomor 1 :
       Masukkan gambar yang ingin anda upload.

    •  Lingkaran nomor 2 :
       Kalau sudah, klik 'UPLOAD NOW'.
       Maka akan muncul gambar seperti :

    •  Masukan deretan kode-nya.
        Lalu klik 'UPLOAD NOW'.
        Akan muncul gambar berikut :

    •  Anda tinggal copy kode-nya.
        Selesai.

2.  IMAGESHACK.US. Login di sini.

     Akan tampil gambar seperti :

    •  Masukkan gambar anda pada kotak 'Telusuri'
       Atur Image resizenya, sesuaikan dengan
       ukuran yang anda mau.
       Setelah itu, klik 'UPLOAD NOW'.
       Akan muncul gambar seperti :

    •  Tinggal anda copy kode-nya.
        Selesai.

Read more: http://galaumu-galauku.blogspot.com

Membuat Blog Anti Copas

Tutorial ini merupakan kelanjutan dari tutorial sebelum-

nya, yakni 'Cara Membuat Anti Klik Kanan'. Untuk

keterangannya silahkan klik saja link tersebut di atas.

Untuk membuatnya, ikuti langkahnya seperti berikut :

1.   Login ke blog anda.

2.   Kemudian klik Rancangan

3.   Klik lagi menu Edit HTML

4.   Cari kode <body>

5.   Setelah ketemu, tambahkan
      onmousedown="return false"
      setelah body.
      Jadinya seperti ini :
    
     <bodyonmousedown="return false">

6.   Simpan template anda,
      Selesai.

Read more: http://galaumu-galauku.blogspot.com

Cara Membuat Cursor Berubah Bentuk Saat Menyentuh Link

Salam jumpa lagi wahai sahabat blogger dimana saja
anda berada. Setelah pada postingan beberapa jam
yang lalu saya menulis tentang 'Nama Mengikuti Kursor'
, sekarang saya mencoba
menulis 'Cara Membuat Cursor Berubah Bentuk
Saat Menyentuh Link'. Cukup panjang judulnya
memang, habisnya saya bingung mau pakai judul apa
agar para sahabat blogger pemula (termasuk saya,
he... he...) dapat memahami apa yang dimaksud
dalam posting ini. Biarpun judulnya agak panjang,
saya berharap anda para pengunjung semua bisa
dapat memahami isi materinya secara langsung tanpa
harus membaca semua tulisan ini. Daripada saya
menulis panjang- panjang tapi para pengunjung
malah tidak memahami maksudnya ?! Dan memang
itulah ciri postingan saya ....................

Baiklah sobat, kita langsung saja ke pokok persoalan,
yaitu bagaimana cara membuatnya :


1.  Pada Dasbor anda pilih Edit HTML.

2.  Cari kode /* global link attributes */
     Kalau tidak ada, cari saja kode a:hover
     Karena untuk kode yang pertama tidak selalu
    ada atau sama pada masing-masing template.

3.  Kalau a:hover sudah ketemu,
     tambahkan kode berikut ini di bawahnya.



cursor: url ('url gambar'), default;



4.   Ganti url gambar dengan url gambar milik
      anda. Bisa juga gambarnya dalam bentuk .gif

5.   Coba anda pratinjau dahulu, setelah
      berhasil baru boleh simpan template anda.


Mudah saja bukan ?!
Akhirnya, saya ucapkan selamat mencoba.
Semoga berhasil ....... Good luck!

Read more: http://galaumu-galauku.blogspot.com

Kode Warna

Aqua (#00FFFF)
Black (#000000)
Blue (#0000FF)
Fuchsia (#FF00FF)
Gray (#808080)
Green (#008000)
Lime (#00FF00)
Maroon (#800000)
Navy (#000080)
Olive (#808000)
Purple (#800080)
Red (#FF0000)
Silver (#C0C0C0)
Teal (#008080)
White (#FFFFFF)
Yellow (#FFFF00)
Aquamarine (#7FFFD4)
Blueviolet (#8A2BE2)
Brown (#A52A2A)
Burlywood (#DEB887)
Cadetblue (#5F9EA0)
Chocolate (#02691E)
Coral (#FF7F50)
Cornflowerblue (#6495ED)
Crimson (#DC143C)
Cyan (#00FFFF)
Darkcyan (#008686)
Darkgoldenrod (#688606)
Darkgray (#A9A9A9)
Darkgreen (#006400)
Darkkhaki (#606766)
Darkmagenta (#860086)
Darkolivegreen (#55662F)
Darkorange (#FF8C00)
Darkorchid (#9932CC)
Darkred (#860000)
Darksalmon (#E9967A)
Darkslateblue (#483086)
Darkslategray (#2F4F4F)
Darkturquoise (#00CED1)
Darkviolet (#940003)
Deeppink (#FF1493)
Deepskyblue (#00BFFF)
Dimgray (#696969)
Dodgerblue (#1E90FF)
Firebrick (#622222)
Floralwhite (#FFFAF0)
Forestgreen (#228622)
Gainsboro (#DCDCDC)
Gold (#FFD700)
Goldenrod (#DAA520)
Greenyellow (#ADFF2F)
Hotpink (#FF69B4)
Indianred (#CD5C5C)
Indigo (#460082)
Khaki (#F0E68C)
Lavender (#E6E6FA)
Lavenderblush (#FFF0F5)
Lawngreen (#7CFC00)
Lightblue (#ADD8E6)
Lightcoral (#F08080)
Lightcyan (#E0FFFF)
Lightgreen (#90EE90)
Lightgrey (#D3D3D3)
Lightpink (#FFB6C1)
Lightsalmon (#FFA07A)
Lightseagreen (#20B2AA)
Lightskyblue (#87CEFA)
Lightslategray (#778899)
Limegreen (#32CD32)
Linen (#FAF0E6)
Magenta (#FF00FF)
Mediumorchid (#BA55D3)
Mediumpurple (#9370DB)
Mediumseagreen (#3CB371)
Mediumslateblue (#7B68EE)
Mediumturquoise (#4801CC)
Mediumvioletred (#071585)
Midnightblue (#191970)
Mintcream (#F5FFFA)
Mistyrose (#FFE4E1)
Moccasin (#FFE4B5)
Navajowhite (#FFDEAD)
Old lace (#FDF5E6)
Olivedrab (#6B8E23)
Orange (#FFA500)
Orangered (#FF4500)
Orchid (#DA70D6)
Palegoldenrod (#EEE8AA)
Palegreen (#98F698)
Paleturquoise (#AFEEEE)
Palevioletred (#DB7093)
Peachpuff (#FFDAB9)
Peru (#CD853F)
Pink (#FFCOC8)
Plum (#DDA0DD)
Powderblue (#B0E0E6)
Rosybrown (#BC8F8F)

Cara Membuat Link Berwarna Pelangi

Hai Sobat. Bertemu lagi nih dengan saya, semoga saja
anda ga merasa bosan. Hari ini saya mau berbagi dengan
sobat-sobit semua, biasa, terutama buat blogger pemula
biar sama-sama dengan saya kita ramaikan suasana per-
bloggeran Indonesia. Mungkin ada diantara anda yang
ingin mencoba menerapkannya di blog, yaitu 'Link

Berwarna Pelangi'. Kalau anda belum tahu cara
membuatnya, ikuti langkah-langkahnya berikut ini :

1. Cara Pertama :

-  Dalam Dasbor, klik Edit HTML.
-  Download dahulu template anda
   sebagai antisipasi kalau-kalau anda
   salah meng-klik, bukan pratinjau yang di klik
   tetapi malah simpan template yang anda klik.
-  Sebelumnya anda copy dahulu kode di bawah ini :

<script language='javascript' src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/LinkPelangi.js'/>.

-  Terus cari kode  <head>
-  Kalau sudah ketemu, paste-kan kode yang anda
   copy tadi persis di bawah kode  <head> ini.
-  Pratinjaulah dahulu, baru simpan template anda.

2. Cara Kedua :

-  Masih di Dasbor, klik Edit HTML.
-  Seperti tadi, jangan lupa download dahulu template
   anda. dan copy kode di berikut ini :

<script language='javascript' src='http://coretanfelix.googlecode.com/files/rainbow.js'></script>

-  Terus cari kode </head>
-  Kalau sudah, letakkan kode yang anda copy tersebut
   di atas kode </head> ini.
- Pratinjau, terus simpanlah template anda.

3. Cara Ketiga :

-   Pada areal Dasbor, klik Tambah gadget, pilih HTML/
    Javascript.
-  copy terlebih dahulu kode di bawah ini :

</style>
<script src='http://enes-sc.googlecode.com/files/tabview.js' type='text/javascript'></script>
<script src='http://roele112.googlepages.com/rainbow.js' type='text/javascript'></script>
<link href='http://i814.photobucket.com/albums/zz65/arzaqnie09/newblueeleganttemplatexxxx.gif' rel='shortcut icon'/>
<script type='text/javascript'>
var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else spans[i].style.display = 'inline';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}

function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else spans[i].style.display = 'none';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}

function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") && (found == 0))
spans[i].style.display = 'none';
}
}

</script>

-   Paste-kan kode tersebut ke dalam kontennya.
-  Terakhir, simpan, selesai.

*  Gimana hasilnya ? Mudah-mudahan anda puas.
   selamat menikmati dan Good luck !

Read more: http://galaumu-galauku.blogspot.com

Cara Mudah Membuat Slide Show

1.   Siapkan beberapa photo/gambar anda.

2.   Kalau sudah, masuk ke sini

3.   Klik ' FILES ', klik lagi ' Browse '
      untuk meng-upload gambar yang anda
      siapkan tadi. Upload gambarnya satu-satu.
      Maksudnya, kalau gambar pertama sudah masuk,
      terus anda klik lagi ' Browse ' dstnya.
      (lihat contoh gambar di bawah)

 

4.   Kalau sudah, Klik 'CUSTOMIZE'.
      ada 5 (lima) pilihan model slide show,
      Pilihlah model yang anda sukai.
      (contoh di atas adalah untuk model 'RINGS')

5.   Atur 'TRANSITION OPTIONS' nya. Pengaturan
      ini untuk mengatur kecepatan dan posisi arah
      berputarnya gambar slide show anda.
      (lihat contoh gambar di bawah)

6.   Klik 'EDIT IMAGES', bila anda ingin meng-edit
      gambar yang telah anda upload di awal tadi.

7.   Kalau tidak, lewatkan saja tahap no. 6 di atas.

8.   Terakhir, klik 'DONE' -> 'Get Code'.

9.   Copy kode tersebut dan masukkan
      pada gadget HTML/JavaScript blog anda.
      (seperti gambar di bawah)

Selamat mencoba.

Mudah-mudahan anda suka, good luck!

Contoh 2 (dua) :

Kalau anda semua, para sahabat blog ini ingin

membuatnya, berikut ini langkahnya :

Read more: http://syamsudinnamaku.blogspot.com/2011/04/cara-mudah-membuat-slide-show-seri-2.html#ixzz1nIPPbp3F

Cara Paling Mudah membuat Text Marquee/Berjalan

Dahulu kalau kita ingin membuat teks berjalan atau yang
biasa suka disebut dengan text marquee, rasanya amat
sulit sekali. Tapi sekarang setelah adanya situs-situs
yang menyediakan bantuan berupa alat semacam
generator, semuanya terasa jauh lebih mudah. Anda
tinggal memasukkan kata atau kalimat yang ingin dibuat
berjalannya dan di sana anda juga bisa memilih model
berjalannya seperti apa dan ke arah mana teks tersebut
berjalannya. Ke kanan, ke kiri, ke atas, ke bawah,
memantul, zig zag dan lain sebagainya. Setelah dirasa
sudah benar, andapun tinggal meng-klik ' Get Code ',
maka dalam seketika kode text marquee anda sudah
selesai. Tinggal anda copy kode tersebut dan mema-
sangnya pada blog anda. Benar-benar sangat mudah.

Satu dari sekian banyak situs yang menyediakan
generator text marquee adalah crazyprofile.com.
Disana ada sekitar 16 (enam belas) model efek
text marquee yang bisa anda pilih. Supaya tidak
penasaran dengan kemudahannya, silahkan saja
langsung anda coba sekarang juga dan anda
bisa login ke sana di sini

Read more: http://galaumu-galauku.blogspot.com