- See more at: http://blog-rangga.blogspot.com/2013/01/cara-membuat-slide-show-foto-gambar.html#sthash.M7leJ480.dpuf

Anime 7

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

Naruto

Rangga photo on the bridge leighton III

Naruto

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

Kawaii

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

Anime

Rangga posing overpass Kelok sembilan west sumatera

Anime

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

This is Anime

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan

Membuat Tombol Home Melayang

Membuat Tombol Home Melayang

Sebelumnya saya pernah posting tentang Membuat Tombol Back To Top, pada postingan kali ini saya akan berbagi cara Membuat Tombol Home page dan Reload page Melayang.
Langsung saja Sob, berikut caranya :
  • Login ke Blogger, Klik Design/Rancangan > Edit HTML.
    Membuat Tombol Home Melayang
  • Beri tanda centang pada Expand Template Widget.
    Membuat Tombol Home Melayang
    Tips : Biasakan mendownload template untuk membackup template sebelum di edit.
  • Copy kode berikut dan pastekan di atas ]]></b:skin>
    #floating-home {
    position:fixed;_position:absolute;top:280px; left:0px; clip:inherit;
    _bottom:expression(document.documentElement.scrollTop+
    document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
    #floating-home a
    {
    filter:alpha(opacity=65);
    -moz-opacity:0.65;
    opacity:0.65;
    border:0;
    }
    #floating-home img
    {
    border:0;
    }
    #floating-home a:hover
    {
    filter:alpha(opacity=100);
    -moz-opacity:1;
    opacity:1;
    }
  • Kemudian cari kode <body>, dan paste kode berikut dibawah <body> :
    <div id='floating-home'>
    <div><a expr:href='data:blog.homepageUrl' title='Home'><img alt='Home' src='http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/home-i.png'/></a></div>
    <div><a href='#' onClick='window.location.reload()' title='Reload page'><img alt='Reload page' src='http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/refresh.png'/></a></div>
    </div>
  • Terakhir klik Save / Simpan Template.
    Membuat Tombol Home Melayang
Silakan dicoba Sob,,, dan semoga berhasil Membuat Tombol Home Melayang.

Membuat Menu Melayang

Membuat Menu Melayang

Menu melayang disini maksudnya menu yang tetap pada posisinya walaupun blog di geser keatas dan kebawah.
Berikut cara Membuat Menu Melayang :
  • Login ke Blogger, Klik Design/Rancangan > Edit HTML.
    Membuat Menu Melayang
  • Beri tanda centang pada Expand Template Widget.
    Membuat Menu Melayang
    Tips : Biasakan mendownload template untuk membackup template sebelum di edit.
  • Selanjutnya cari kode </head>,dan letakan kode berikut diatasnya :
    <style>
    div.floating-menu {
    position: fixed;
    background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#666));
    background: -moz-linear-gradient(top, #000, #666);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#000000&#39;, endColorstr=&#39;#999999&#39;);
     border: 1px solid #000;
     width: 150px;
     z-index: 500;
    -webkit-border-top-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomleft: 10px;
    border:none;
    padding:10px 10px 10px 10px;
     }
    div.floating-menu a, div.floating-menu h4 {
    display: block;
    margin: 0 0.5em;
    color:#FFF; }
    div.floating-menu a:hover {
    color:#0000FF;
    background: -webkit-gradient(linear, left top, left bottom, from(#0088ff), to(#bbddff));
    background: -moz-linear-gradient(top, #0088ff, #bbddff);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#0088ff&#39;, endColorstr=&#39;#bbddff&#39;);
    color:#FFF;
    cursor: pointer;
    text-decoration: none;
    padding: 5px 5px 5px 5px;
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);  
    }
      </style>
  • Setelah itu sobat cari kode  <body> dan masukan kode di bawah ini di bawah <body>.
    <div class="floating-menu">
    <h4>Menu</h4>
    <a href="http://alamat-url/">Anchor Text</a>
    <a href="http://alamat-url/">Anchor Text</a>
    <a href="http://alamat-url/">Anchor Text</a>
    <a href="http://alamat-url/">Anchor Text</a>
    </div> 
    Ganti http://alamat-url/ dan Anchor Text,
  • Terakhir klik Save / Simpan Template.
    Membuat Menu Melayang
Selamat mencoba dan semoga berhasil Membuat Menu Melayang.

Membuat Widget Melayang di Blogger

Membuat Widget Melayang di Blogger

Sebelumnya saya pernah posting tentang Membuat Widget Melayang di Wordpress.com, untuk kali ini Membuat Widget Melayang di Blogger / Blogspot.
Ok Sob , berikut caranya :
  1. Login ke blogger, klik Design > Edit HTML.
    Membuat Widget Melayang di Blogger
  2. Beri tanda centang pada kotak Expand Template Widget.
    Membuat Widget Melayang di Blogger
  3. Cari kode ]]></b:skin> dan kalau sudah ketemu, letakkan kode berikut tepat di atasnya.
    #floating-widget { position:fixed;_position:absolute;bottom:0px; left:0px; clip:inherit; _top:expression(document.documentElement.scrollTop+ document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
  4. Selanjutnya, carilah kode </body> dan letakkan kode berikut tepat di atasnya
    <div id='floating-widget'>
    Letakkan kode widget disini
    </div>
  5. Jika sudah selesai klik SAVE / SIMPAN TEMPLATE, dan lihat hasilnya.
    Membuat Widget Melayang di Blogger
Silakan dicoba dan Semoga berhasil...

Cara Merubah Cursor Blog

Bagi Sobat yang ingin mengganti tampilan cursor di blog, itu sangat mudah, bagi yang sudah tau, bagi yang belum tau pasti tidak mudah. hehe...
Sebelumnya saya pernah posting tentang Membuat Efek Bintang Pada Kursor, kali ini saya akan berbagi tentang cara untuk merubah tampilan cursor blog, berikut caranya :
  1. Login ke Blogger. Masuk ke menu Rancangan >Edit HTML
    Cara Merubah Cursor Blog
  2. Cari kode </head>
  3. Letakkan kode berikut tepat diatas kode </head>
    <style type='text/css'>HTML,BODY{cursor:url(&quot;http://cursors4.totallyfreecursors.com/thumbnails/bluemultiglit.gif&quot;), auto;}</style>
    Keterangan: Teks yang berwarna merah adalah alamat url kursor. Silahkan ganti dengan alamat url cursor yang ingin Sobat gunakan.
  4. Setelah Itu Save Template Anda dan selesai...
    Cara Merubah Cursor Blog
Jika sobat tidak memiliki icon kursor, silakan kunjungi http://www.totallyfreecursors.com situs tersebut menyediakan ribuan icon cursor,pilih icon yang sobat mau..
Dan Sobat juga dapat langsung memasangnya melalui widget HTML/Javascript, berikut caranya :
  1. Kunjungi http://www.totallyfreecursors.com
  2. Lalu pilih salah satu cursor yang ingin Sobat gunakan.
    Cara Merubah Cursor Blog
  3. Copy kode yang diberikan.
    Cara Merubah Cursor Blog
  4. Lalu pasang pada widget HTML/Javascript blog sobat. jika belum bisa memasang widget silakan baca Memasang Widget / Gadget di Blogspot
Semoga tutorial ini bisa membantu sobat yang ingin Merubah Cursor Blog.

Membuat Link Berkedip Saat Disentuh Cursor

Membuat Link Berkedip Saat Disentuh Cursor

Buat Sobat yang ingin merubah tampilan Link saat disentuh cursor, mungkin cara yang satu ini dapat Anda gunakan. Biasanya sebuah link jika disentuh cursor maka akan terlihat link tersebut diberi garis bawah / underline, pada tutorial kali ini kita akan merubahnya menjadi berkedip.
Selain cara ini sobat juga bisa Membuat Link Berbintang-Bintang saat di sentuh cursor.
Berikut Cara Membuat Link Berkedip Saat Disentuh Cursor :
  1. Login ke Blogger, Klik Design/Rancangan > Edit HTML.
    Membuat Link Berkedip Saat Disentuh Cursor
  2. Beri tanda centang pada Expand Template Widget.
    Membuat Link Berkedip Saat Disentuh Cursor
    Tips : Biasakan mendownload template untuk membackup template sebelum di edit.
  3. Cari kode :
    a:hover {
    color:#5588AA;
    text-decoration:underline;
    }
    Ganti underline dengan blink
  4. Terakhir klik SIMPAN / SAVE TEMPLATE.
    Membuat Link Berkedip Saat Disentuh Cursor
Sekarang lihat blog Sobat dan coba sentuh link yang ada di blog sobat.
Semoga tutorial ini bisa membantu sobat yang ingin Membuat Link Berkedip Saat Disentuh Cursor.

Membuat Link Berbintang-Bintang

Kali ini saya akan berbagi tentang salah satu cara untuk mempercantik blog, yaitu Membuat Link Berbintang-Bintang saat di sentuh cursor. Cara lainnya sobat dapat Membuat Efek Bintang Pada Kursor, Membuat Tombol Share Post Melayang, memasang Widget Google Followers Show Hide, dll.
Berikut Cara Membuat Link Berbintang-Bintang :
  1. Login ke Blogger, Klik Design/Rancangan > Edit HTML.
    Membuat Link Berbintang-Bintang
  2. Beri tanda centang pada Expand Template Widget.
    Membuat Link Berbintang-Bintang
    Tips : Biasakan mendownload template untuk membackup template sebelum di edit.
  3. Cari kode :
    a:hover {
    color:#0000ff;
    text-decoration:underline; 
    }
    Akan lebih mudah jika Anda mencari a:hover saja.
  4. Jika sudah ketemu ganti kode yang berwarna merah dengan kode di bawah ini.
    { background-image: url(http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/dip.gif);}
  5. Terakhir klik SIMPAN / SAVE TEMPLATE.
    Membuat Link Berbintang-Bintang
Sekian Tutorial tentang Membuat Link Berbintang-Bintang.

Membuat Efek Bintang Pada Kursor

Untuk mempercantik blog, mungkin Anda bisa menggunakan effect bintang berjatuhan pada cursor, trik yang satu ini akan membuat bintang berjatuhan dari cursor saat cursor digerakkan, walaupun menurut saya itu hanya tanda [+] yang berjatuhan. hehe...
Untuk membuat efek bintang berjatuhan pada blog sobat dapat memasangnya pada widget HTML/JavaScript blog sobat, atau melalui menu Edit HTML.
  • Melalui widget HTML/JavaScript
  1. Login Ke Blogger. Pilih Design/Rancangan > Page Element.
  2. Klik Add a Gadget / Tambah Gadget. Pilih HTML/JavaScript.
  3. Masukkan kode berikut ke dalam area konten.
    <script src='http://wadah-tutorial.googlecode.com/files/red_star.js' type='text/javascript'/></script>
    Warna bintang diatas berwarna merah. Anda dapat menggantinya dengan warna lain.
    Berikut beberapa kode yang lain :
    <script src='http://wadah-tutorial.googlecode.com/files/yellow_star.js' type='text/javascript'/></script>   *Warna Kuning
    <script src='http://wadah-tutorial.googlecode.com/files/green_star.js' type='text/javascript'/></script>   *Warna Hijau
    <script src='http://wadah-tutorial.googlecode.com/files/blue_star.js' type='text/javascript'/></script>   *Wana Biru
  4. Terakhir klik Simpan / Save.
  • Melalui menu Edit HTML
  1. Login Ke Blogger. Pilih Design/Rancangan > Edit HTML.
  2. Beri centang pada Expand Widget Templates.
  3. Cari kode ]]></b:skin>
  4. Kemudian copy kode diatas dan taruh dibawah kode ]]></b:skin>
    penting : hapus tanda </script> pada kode tersebut.
  5. Terakhir Save / Simpan Template.
Silakan dicoba dan semoga berhasil Membuat Efek Bintang Pada Kursor.

Memasang Jam di Blog

Untuk mempercantik tampilan blog, baik itu Wordpress maupun Blogspot, mungkin Anda ingin memasang aksesoris berupa widget jam pada sidebar blog Sobat, Bagi Sobat yang ingin memasang widget jam di Wordpress.com, Silakan baca Memasang Jam di Wordpress. Buat Blogspot dapat Anda ikuti tutorial berikut ini :
  • Kunjungi www.clocklink.com
  • Lalu klik pada menu Gallery (kita bisa memilih kategori-kategori yang ingin kita pilih), sebagai contoh kategori Digital yang di pilih.
    Memasang Jam
  • Kemudian klik View HTML Tag.
    Memasang Jam
  • Akan timbul halaman baru. disitu ada ketentuan-ketentuan yang memakai bahasa inggris, pilih Accept.
    Memasang Jam
  • Selanjutnya kita diminta memilih warna (color), time zone, serta ukuran jam agar sesuai dengan sidebar blog.
    Memasang Jam
  • Kemudian Copy kode HTML yang diberikan.
    Memasang Jam
  • Langkah selanjutnya pasang pada widget HTML/Javascript blog Sobat, jika belum bisa memasang widget silakan baca Memasang Widget / Gadget di Blogspot
Silakan dicoba Sob, semoga berhasil...

Menghapus Blog dari Google Friend Connect

Berikut Cara Menghapus Blog dari Google Friend Connect :
  • Login ke akun Google
  • Masuk ke http://www.google.com/friendconnect
  • Pilih blog yang mau dihapus kemudian klik Settings / Setelan.
    Tutorial Blog
  • Setelah itu klik tab Advanced / Tingkat Lanjut.
    Tutorial Blog
  • Geser ke bawah sampai pada pilihan untuk menghapus blog dan Klik di sini / Click here.
    Tutorial Blog
  • Setelah itu muncul halaman konfirmasi penghapusan blog, ketik Yes pada kolom yang disediakan dan terakhir klik Submit / Kirim.
    Tutorial Blog
  • Selesai,,, sobat sudah berhasil menghapus blog dari akun google friend connect.
Semoga bermanfaat...

Membuat Text Berjalan (Marquee Text)

Membuat Text Berjalan | Tutorial Blog

Text Berjalan (Marquee Text) merupakan salah satu trik untuk membuat blog lebih atraktif, trik ini sering di gunakan pada sidebar, footer dan postingan, dengan tujuan untuk memperindah Blog, dan agar pengunjung tidak bosen liat blog kita.
Kali ini saya akan berbagi cara membuat text berjalan.
contoh :
"Selamat Datang Di Blog Saya"

Untuk membuat text diatas sobat cukup Copy kode berikut ini dan Paste pada blog Sobat,
<marquee align="center" direction="left" scrollamount="3" width="60%" height="50">

"Selamat Datang Di Blog Saya"

</marquee>
Kata "Selamat Datang Di Blog Saya" dapat Anda ganti dengan tulisan yang Sobat inginkan, selain tulisan Sobat juga bisa menggunakannya untuk Link ataupun image.

Keterangan :
  • Direction "Left" : text akan bergerak ke kiri, klo Sobat pengen gerak ke kanan, ganti dengan "right", "up" = ke Atas atau "Down" Gerak ke bawah.
  • Scrollamount="3" : Kecepatan geraknya, silakan diganti.
  • Width : Lebar area marquee.
  • Height : Tinggi area marquee.
Silakan dicoba Sob, Semoga bermanfaat...

Membuat Tulisan Berkedip


Selain Text Berjalan (Marquee Text) untuk memperindah Blog, Sobat juga bisa menggunakan trik yang satu ini untuk untuk membuat blog lebih atraktif.

* Selamat Datang *
  • Untuk membuat text seperti diatas caranya gampang Sob, cukup copy kode dibawah ini.
    <a style="color: #ff0000; font-size: 22px; text-decoration: blink;">
    Tulisan Anda…
    </a>
    Lalu paste ke mode html tulisan anda.
    Ket :
    color: #ff0000 = kode warna tulisan, ganti dengan kode warna yang Anda inginkan.
    font-size: 22px = ukuran tulisan, atur sesuai keinginan Anda.
  • Untuk merubah posisi text, Sobat dapat menambahkan kode berikut :
    <p style="text-align: center;">
    kode
    </p>
    Ket :
    text-align: center = Posisi text di tengah, untuk memindahnya ke kanan sobat dapat mengganti dengan "right" atau "left" (kiri).
    Sebagai contoh saya menggunakan kode berikut :
    <p style="text-align: center;">
    <a style="color: ff0000; font-size: 22px; text-decoration: blink;">* Selamat Datang *</a>
    </p>
    Maka hasilnya akan seperti ini :
Selamat Mencoba Sob, Semoga Bermanfaat...

Widget untuk Mengetahui Pengunjung Blog


Feedjit (Widget untuk Mengetahui Pengunjung Blog) | Untuk mengetahui siapa dan dari mana saja pengunjung blog kita, kita dapat menggunakan Widget yang satu ini. widget ini juga membantu kita untuk mengetahui waktu kunjungan di blog.
Langkah pemasangan Widget ini pada Wordpress dan Blogspot tidak sama, karena Wordpress.com tidak mengizinkan kode Javascript, oleh sebab itu pada tutorial ini akan saya bahas cara memasang Feedjit di Wordpress.com dan Blogspot.com
Berikut langkah memasang Widget untuk Mengetahui Pengunjung Blog :
  • Memasang di WP.com :
  1. Masuk ke http://feedjit.com/joinimg/, akan muncul halaman awal dari website penyedia.
    Tutorial Blog, Feedjit
  2. Tentukan lebar dan berapa entri yang ingin Sobat tampilkan, lalu klik Apply.
    Tutorial Blog, Feedjit
  3. Selanjutnya, copy kode dalam kotak
    Tutorial Blog, Feedjit
  4. Lalu paste ke dalam widget Sobat. dan klik Save.
    Tutorial Blog, Feedjit
    selesai
  • Memasang di Blogspot :
  1. Masuk ke http://feedjit.com/plansPricing/
  2. Klik Sign Up pada Feedjit Completely Free
    Tutorial Blog, Feedjit
  3. Pada halaman selanjutnya atur tampilan widget seperti keinginan Anda.
    Tutorial Blog, Feedjit
  4. Pada bagian untuk menginstall di blog pilih Other Blog or website. lalu klik GO!
    Tutorial Blog, Feedjit
  5. Lalu Copy kode yang diberikan
    Tutorial Blog, Feedjit
  6. Selanjutnya login ke blogger, klik Rancangan > Elemen Laman
    Tutorial Blog, Feedjit
  7. Pilih Tambah Gadget > HTML / JavaScript
    Tutorial Blog, Feedjit
  8. Paste Kode dari Feedjit, dan klik Simpan
    Tutorial Blog, Feedjit
    Selesai...
Kiranya sampai disini tutorial tentang memasang Widget untuk Mengetahui Pengunjung Blog

Membuat Daftar Isi Blog


Postingan saya kali ini akan berbagi tips tentang bagaimana cara membuat daftar isi pada Blogger atau Blogspot, Untuk WordPress dapat Anda baca di postingan membuat daftar isi di WordPress.
    Langsung saja Sob :
  • Login ke blogger Anda, kemudian buat sebuah halaman dengan judul Daftar Isi, Jika belum bisa membuat halaman baca Cara Membuat Page di Blogspot.
  • Kemudian klik pada tab Edit HTML
    Tutorial Blog, Membuat Daftar Isi Blog
    Copy kode berikut
    <div style="overflow:auto;width:480px;height:450px;padding:10px;border:1px solid #eee">
    <script src="http://post-xml.googlecode.com/files/feeds-labels.js">
    </script><script src="http://wadahtutorial.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
    </script>
    </div>
    Ganti Alamat wadahtutorial.blogspot.com dengan url atau alamat blog Sobat.
    Lalu paste pada area artikel :
    Tutorial Blog, Membuat Daftar Isi Blog
  • untuk dapat digunakan sebagai Gadget, Sobat dapat mengatur height dan width yang ditulis dengan warna biru. Untuk tidak menggunakan text area atau scroll hapus tulisan yang saya beri latar hijau.
  • Klik tombol Preview / Pratinjau untuk melihat hasilnya, jika sudah benar klik Publish Page / Tayangkan Laman. Lalu buka Blog Sobat dan lihat hasilnya…
    Tutorial Blog, Membuat Daftar Isi Blog
Semoga Bermanfaat...

Cara Membuat Page di Blogspot

Buat Anda yang masih baru di dunia BLOG, mungkin masih belum tau cara membuat Page, disini saya akan berbagi tentang cara membuat page di Blogspot. Untuk Wordpress.com Silakan baca Membuat Page di Wordpress.
    Berikut Langkah Membuat Page di Blogspot :
  1. Login ke account Blogger Anda.
  2. Pada dasbor Blogger klik Entri Baru.
    Cara Membuat Page di Blogspot
  3. Klik Edit Laman.
    Cara Membuat Page di Blogspot
  4. Klik Laman Baru.
    Cara Membuat Page di Blogspot
  5. Pada kolom Judul Laman isi dengan Nama Page yang Anda inginkan.
    Cara Membuat Page di Blogspot
  6. Pada Kolom artikel isi dengan apa yang ingin Anda tulis.
    Cara Membuat Page di Blogspot
  7. Di bagian Post Option sama seperti Cara Memposting Artikel di Blogspot.
  8. Jika sudah selesai klik Tayangkan Laman.
    Cara Membuat Page di Blogspot
    Sekarang lihat pada blog Anda Page yang sudah Anda buat.
Semoga Bermanfaat...

Menu Dropdown dengan Background

Dulu saya pernah posting cara Membuat Menu Dropdown, pada postingan ini kita akan membuat menu dropdown dengan background image.
Buat Sobat yang ingin mencoba silakan ikuti tutorial berikut :
  • Login ke blogger Anda, klik menu Design > Edit HTML.
  • Lalu beri centang expand widget templates, sebaiknya backup dulu template Anda.
  • Cari kode <b:skin><![CDATA[, lalu letakkan kode berikut diatasnya.
    <script>
    var last_expanded = &#39;&#39;;
    function showHide(id)
    {
    var obj = document.getElementById(id);
    var status = obj.className;
    if (status == &#39;hide&#39;) {
    if (last_expanded != &#39;&#39;) {
    var last_obj = document.getElementById(last_expanded);
    last_obj.className = &#39;hide&#39;;
    }
    obj.className = &#39;show&#39;;
    last_expanded = id;
    } else {
    obj.className = &#39;hide&#39;;
    }
    }
    </script>
  • Kemudian cari kode ]]></b:skin>, letakkan kode berikut ini diatasnya.
    .dropdown-b {
    background-image:url('http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/tombol_menu1.gif');
    text-align:center;
    width:165px;
    font-family: georgia, Helvetica, sans-serif;
    padding-left:20px;
    padding-right:20px;
    padding-top:10px;
    padding-bottom: 10px;
    margin-top: 4px;
    display:block;
    text-decoration: none;
    color: #000000;
    height: 8px;
    }
    .dropdown-bg {
    background-image: url('http://i1193.photobucket.com/albums/aa345/bakulatz/Arsiv/tombol_menu2.gif');
    text-align:center;
    width:165px;
    font-family: georgia, Helvetica, sans-serif;
    padding-left:20px;
    padding-right:20px;
    padding-top:13px;
    padding-bottom: 10px;
    display:block;
    text-decoration: none;
    color: #000000;
    height: 8px;
    }
    .hide{
    display: none;
    }
    .show{
    display: block;
    }
    a{cursor: hand}
  • Lalu klik Save Template.
  • Kemudian klik menu Design > Page Element > Add a Gadget.
  • Pilih HTML/Javascript, lalu masukkan kode berikut ini :
    <a class="dropdown-b" onclick="showHide('dropdown-b-1')">Menu 1</a>
    <div id="dropdown-b-1" class="hide">
    <a href="URL" class="dropdown-bg">Link 1</a>
    <a href="URL" class="dropdown-bg">Link 2</a>
    <a href="URL" class="dropdown-bg">Link 3</a>
    <a href="URL" class="dropdown-bg">Link 4</a>
    </div>
    <a class="dropdown-b" onclick="showHide('dropdown-b-2')">Menu 2</a>
    <div id="dropdown-b-2" class="hide">
    <a href="URL" class="dropdown-bg">Link 1</a>
    <a href="URL" class="dropdown-bg">Link 2</a>
    <a href="URL" class="dropdown-bg">Link 3</a>
    <a href="URL" class="dropdown-bg">Link 4</a>
    </div><a class="dropdown-b" onclick="showHide('dropdown-b-3')">Menu 3</a>
    <div id="dropdown-b-3" class="hide">
    <a href="URL" class="dropdown-bg">Link 1</a>
    <a href="URL" class="dropdown-bg">Link 2</a>
    <a href="URL" class="dropdown-bg">Link 3</a>
    <a href="URL" class="dropdown-bg">Link 4</a>
    </div><a class="dropdown-b" onclick="showHide('dropdown-b-4')">Menu 4</a>
    <div id="dropdown-b-4" class="hide">
    <a href="URL" class="dropdown-bg">Link 1</a>
     <a href="URL" class="dropdown-bg">Link 2</a>
    <a href="URL" class="dropdown-bg">Link 3</a>
    <a href="URL" class="dropdown-bg">Link 4</a>
    </div>
  • Terakhir klik tombol Save. Selesai...
Silakan dicoba Sob, semoga berhasil membuat Menu Dropdown dengan Background.

Memberi Efek Hujan Salju di Blog

Rasanya udah lama saya ga post, baru sekarang bisa update blog, jadi pada kesempatan ini saya akan berbagi salah satu cara untuk mempercantik blog, tutorial singkat kali ini tentang Memberi Efek Hujan Salju di Blog. Efek ini akan sangat bagus jika ditampilkan  pada background(latar belakang) blog berwarna gelap. jika background blog sobat berwarna terang atau mungkin putih, maka efek hujan saljunya akan tidak jelas malah mungkin tidak terlihat.

Langsung aja sob, berikut tutorialnya :
  1. Login ke dashboard blogger sobat.
  2. Pilih Layout > Add gadget > HTML/JavaScript.
    Spoiler :
    Memberi Efek Hujan Salju di Blog
  3. Letakkan script dibawah ini pada gadget.
    <script src='http://wadah-tutorial.googlecode.com/files/snow.js.txt' type="text/javascript"></script>
  4. Save dan lihat hasilnya.
    Spoiler :
    Memberi Efek Hujan Salju di Blog
Ok sob, sekian dulu tutorial tentang Memberi Efek Hujan Salju di Blog.