Cara Membuat Widget Popular Post Blogger Menjadi Lebih Menarik

Saya jarang menggunakan tool kecuali saya tahu saya dapat merancang sesuai dengan preferensi saya. Tim Blogger memperkenalkan Widget Popular Post resmi mereka yang bisa menampilkan potongan posting Anda yang dapat dilihat bersama dengan gambar thumbnail berdasarkan statistik Analytics blog Anda. Tapi tunggu! widget kali ini merupakan langkah maju dari itu. Kami akan menimpa stylesheet  untuk widget ini sepenuhnya dengan kostum font dan warna. Anda dapat melihat widget Popular Post ini di sidebar blog saya.

Keuntungan terbesar dari widget ini adalah bahwa kita tidak perlu menginstal Javascript apapun yang berat karena kita menggunakan widget yang tersimpan pada server Blogger dan kita hanya akan mengubah tampilan untuk membuatnya menyatu sempurna dengan blog Anda.

Saya harap Anda akan mendapatkan tutorial yang cukup menarik kali ini karena saya akan memberikan trik sederhana tentang cara membuat widget popular post menjadi sangat menarik. Jadi mari kita mainkan!

Menambahkan Widget Popular Post ke Blog

• Login dulu ke Blogger > Layout
• Klik Add a gadget dan pilih gadget "Popular Post" dari daftar yang disediakan blogger
• Setinglah seperti gambar di bawah ini! (Ubahlah Most viewed menjadi 'All time', hilangkan centang pada 'image thumbnail' dan 'snippet')

• Simpan widget Anda
• Sekarang masuklah ke Template
• Backup dulu template Anda jika perlu
• Klik Edit HTML
• Carilah kode ini

]]></b:skin>

• Kemudian letakkan kode berikut ini di atasnya

/*--- Genera Popular Posts --- */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwFiRQrBDItkt1JXdxuL6_e0_xA-HGLKTFQ4bGqrHxqOEJ_1KmooRMl9_MJXULaEu6I4SDM4L0rOool7w4_I3O6PyhpNveISuyTV5ivjTebOouKkoUQAysxuvzsrbZMnRH9bo7XmquNhwW/s400/33.gif") no-repeat scroll 5px 8px rgb(255, 255, 255);
list-style-type: none;
margin: 0px 0px 5px;
padding: 5px 5px 5px 20px !important;
border: 1px solid #dddddd;
border-radius: 10px 10px 10px 10px;
}
.popular-posts ul li:hover {
border:1px solid #666666;
}
.popular-posts ul li a:hover {
text-decoration:none;
}

Keterangan:

Anda dapat melakukan perubahan untuk menyesuaikan tampilan default dari kode di atas:

1. - Untuk mengubah gambar bullet, gantilah link gambar yang bercetak tebal pada kode di atas dengan URL bullet Anda.
2. - Untuk mengubah warna perbatasan dalam mode aktif editlah bagian ini #dddddd
3. - Untuk mengubah warna perbatasan pada saat ditunjuk mouse edit bagian ini #666666
4. - Anda dapat menggunakan Kode Warna CSS milik saya untuk mencari kode warna yang tepat.

• Dan terakhir, simpan Template Anda dan katakanlah bingo!

Kunjungi blog Anda untuk melihat apakah widget popular post sudah terpasang dengan baik pada sidebar blog Anda. Jangan beritahu saya jika Anda membutuhkan bantuan lebih lanjut dalam mengubah jenis font atau warna. Widget akan secara otomatis menggunakan warna standar dari blog Anda, tetapi jika Anda ingin mengubah untuk sesuatu yang berbeda maka jangan ragu untuk membiarkan saya tahu dengan mem-posting komentar Anda di bawah ini. :D

Jika Anda menyukai artikel ini dan ingin berbagi dengan pembaca Anda mengenai tutorial ini maka silahkan cantumkan linkback ke postingan ini. Salam damai kawan.. :)

Cara Merubah Tema Background Pada Kotak Komentar Blog Anda

Saya setuju dengan fakta bahwa kotak komentar standar dari Blogger sangat tidak menarik dan kebanyakan orang ingin mengubah background kotak komentar blogger mereka. Tapi jangan khawatir karena Anda dapat merubahnya menjadi lebih indah dan enak dilihat. Saya akan memberikan Anda tip bagaimana cara merubah kotak komentar blogger menjadi lebih indah dan menarik dengan menggunakan script sederhana di bawah ini. Jadi mari kita coba tema ini untuk memperindah kotak komentar yang diberi nama "Dark Theme".

Rekomendasi artikel untuk Anda:
1000 Tema Background Untuk Memberindah Kotak Komentar Blog

Cara Menerapkan Dark Theme ke Kotak Komentar

• Login ke akun Blogger Anda dan masuk ke Template
• Backup template Anda bila perlu
• Klik Edit HTML
• Centang Expand Widget Template (di pojok kiri atas)
• Cari kode ini

]]></b:skin>

• Letakkan kode di bawah ini di atas kode ]]></b:skin>

#genera-form iframe{
background:#ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY_8Cm-vTRoYndSa5m_Eaw8nUpjxUseg6WhdjnIEWxruHbu35wTQbBgzdXPxDwobcLSy-oFbz4cP9zpO0rDOztRqH3oEqCn-Mk2QsIeQQMDaOD4g-UKDPwqM_m0QBkm0LIDDUe9LHgqi6a/s400/11.png) repeat-x;
border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
box-shadow: 5px 5px 5px #CCCCCC;
padding:5px;
font:normal 12pt "ms sans serif", Arial;
color:#2F97FF;
width:560px; height:213px !important;
}
#genera-form a{
color:#fff;
}

Untuk mengubah warna "Comment as" teks hanya mengedit 2F97FF dan untuk menyesuaikan lebar kotak edit bagian width: 560px.

• Selanjutnya cari kode ini

<div class='comment-form'>

• Ganti kode itu dengan kode di bawah ini

<div id='genera-form'>

• Simpan template Anda dan lihat perubahannya

Hasilnya akan terlihat seperti ini

Variasi menarik lainnya akan saya posting pada lain waktu. Saya sedang mencari beberapa pola yang unik dan saya yakin Anda akan menyukainya nanti. Untuk saat ini cukup satu tema ini dulu. Salam blogger kawan... >.<

Memasang Tombol Share Pinterest, Facebook, Twitter Melayang di Blogger

Ini adalah salah satu dari beberapa widget social sharing yang paling saya sukai karena tampilannya yang rapi dan tidak berantakan. Anda telah melihat tren dari jumlah tombol share melayang di blog-blog populer. Pengembang telah menciptakan versi yang berbeda dari bar ini dan menerapkan efek Jquery dan gaya CSS3 tapi widget ini berbeda karena mengandung kustom Pinterest, Facebook, Twitter, dan tombol Email. Layanan seperti Addthis dan ShareThis keduanya melakukan pekerjaan yang besar, tetapi mereka masih perlu bekerja pada beberapa masalah integrasi plugin mereka. Pinterest pin it button lah yang menyebabkan masalah besar dan kegagalan dalam mengambil gambar thumbnail yang benar. Dalam kebanyakan kasus, bahkan tidak menampilkan gambar sehingga membuat konsep pinning terasa hambar. Namun bar ini didesain ulang dari widget yang disediakan oleh ShareThis untuk membuat yang baru dengan memperbaiki semua kekurangan. Tombol share ini akan melayang di sebelah kiri posting blog Anda dan akan melayang mengikuti scroll pengunjung ke atas atau ke bawah postingan. Widget ini berisi counter dari situs jejaring sosial yang memiliki potensi untuk membawa traffic blog Anda dengan cara mensirkulasi konten Anda ke khalayak yang lebih luas. Kami telah menguji widget ini pada beberapa browser seperti IE8+, Firefox, Google Chrome, dll dan semuanya bekerja dengan baik tanpa masalah kompatibilitas atau konflik desain. Marilah kita bekerja sekarang!

Tombol Sosial Share yang Mana yang Harus Digunakan?

Prioritas pertama yang harus ada adalah Facebook, Google +, Twitter, Linkedin dan Sekarang Pinterest. Semua sosial share ini memainkan peranan dengan baik dalam sirkulasi konten Anda melalui banyak pengunjung. Social Media adalah mesin yang bekerja non-stop, yang jika didorong dengan benar dan hati-hati dapat memberikan berton-ton traffic dan juga dapat menghasilkan dolar juga dari website Anda. Setelah menampilkan banyak tombol share pastinya akan mempengaruhi waktu loading blog Anda, karena itu saya telah menambahkan tombol share AddThis yang menyediakan pengunjung dengan lebih dari 330+ pilihan sosial sharing semua di satu tempat.

Kenapa Tidak Menggunakan JQuery?

Abaikan penggunaan JavaScript dan Jquery sebanyak mungkin. Browser seperti Internet Explorer masih kekurangan dukungan untuk semua fungsi yang ditawarkan oleh jquery. Apalagi JavaScript bertanggung jawab untuk persentase besar dari waktu beban blog Anda secara keseluruhan. Oleh karena itu tidak ditambahkan efek smooth sliding untuk plugin ini.

Bagaimana Cara Kerjanya?

Saya telah mengintegrasikan Addthis dan layanan ShareThis di dalamnya. Dalam rangka untuk menyesuaikan tombol twitter dan lain-lain saya mengambil kode default ShareThis dan menyesuaikannya untuk mengubah gambar tombol, ukuran gelembung dan count text. Widget yang sejak awalnya kita kembangkan memang terlihat lebih menarik dibanding yang satu ini. Anda dapat melihat versi draft pertama yang dirancang pada gambar di bawah ini:

Jika Anda lihat gambar di atas, tombol-tombol share kurang rapat dan menghabiskan banyak ruang di blog Anda. Berbeda dengan ini yang terlihat lebih rapat dan seksi, juga tidak menghabiskan banyak ruang blog.

Cara Memasang Tombol Share Melayang

Langkah-langkahnya sangat mudah untuk diterapkan. Yang Anda butuhkan hanya mengcopy dan paste potongan panjang kode yang ada di bawah ini ke template Anda. Ikuti langkah-langkah berikut ini:

• Masuk ke Blogger > Template
• Backup dulu template Anda
• Klik Edit HTML
• Klik Expand Widget Templates
• Kemudian cari kode berikut ini:

<b:includable id='post' var='post'>

• Letakkan kode di bawah ini tepat di bawah kode tadi:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style>
.gnr_social_floating{
    position:fixed; bottom:6%; margin-left:-72px; float:left;     width:60px;
    background-color:#f7f7f7;     padding: 5px 0 0px 0px;
     border-top:1px solid #ddd;
border-left:1px solid #ddd;
border-bottom:1px solid #ddd;
z-index:9999px !important;
border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;
}
.gnr_social_floating .gnr_side_social_button{
    margin-bottom:5px;
    float:none;
    height:auto;
    width:60px;
}
.gnr_social_floating .st_twitter_vcount, .gnr_social_floating.st_plusone_vcount, .st_email{
    margin-left:5px;
}
.gnr_social_floating .st_fblike_vcount{
    margin-left:5px;
}
.gnr_social_floating .stButton_gradient{
    background:none !important;
    height:21px !important;
    padding-left:0 !important;
}
.gnr_social_floating .chicklets, .gnr_social_floating .stMainServices {
    background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5HDiR5GyrpWl5gYXeiECgvgz_lVJIl15P2Zy5a-RIoAsnPH1y_VMzZhztwRnTEFcoDF33p6WzTg1adFtkw_QqxtTShSBaFeH7OtNsxdDtBqYvj_FRbG-O0AxZS_XRcAiUwefwZtwuBvI6/s400/gc_social_sprite.gif&#39;) no-repeat !important;
    height:19px !important;
    width:45px !important;
    padding:0 !important;
}
.st_email .chicklets{
    background-position:0 -77px !important;
    background-image:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5HDiR5GyrpWl5gYXeiECgvgz_lVJIl15P2Zy5a-RIoAsnPH1y_VMzZhztwRnTEFcoDF33p6WzTg1adFtkw_QqxtTShSBaFeH7OtNsxdDtBqYvj_FRbG-O0AxZS_XRcAiUwefwZtwuBvI6/s400/gc_social_sprite.gif&#39;) !important;
}
.gnr_social_floating .st_twitter_vcount .st-twitter-counter{
    background-position:0 -58px !important;
}
.gnr_social_floating  .stButton_gradient{
    border:none !important;
}
.gnr_social_floating .stBubble_count{
    width:44px !important;
    font-size: 15px !important;
    font-weight: normal !important;
    padding-top:7px !important;
    height:23px !important;
    background:none !important;
}
.gnr_social_floating .st_twitter_vcount .stBubble_count{
    color:#00a6df;
    background-color:#f8fbfc !important;
}

.st_fblike_vcount{
    margin-bottom: 0px;
    display: block;
}
.st_twitter_vcount{
    margin-bottom: 3px;
    display: block;
}
.st_email{
    margin-bottom: 5px; margin-top: 3px;
    display: block;
}

.gnr_social_floating .stBubble{
    background-position: 21px 31px !important;
    height:35px !important;
}.gnr_social_floating .st_pinterest_vcount{
    margin-left:5px;
}
.gnr_social_floating .st_pinterest_vcount .st-pinterest-counter{
    background-position:0 -19px !important;
}
.gnr_social_floating .st_pinterest_vcount .stBubble_count{
    color:#FF0505;
    background-color:#fbf8f8 !important;
}
.gnr_social_floating .st_pinterest_vcount .stBubble{
    background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv0xVgrf4RPUZxLM_3b4Q8MNQpdsHUy2hYve9QkPA6pev0hZVlumYZnigPcfNqnH6Rdpi_pF0clAZiYmAguTsE2TUjW09TvW4QvQgzQdRqfiVerOie_05B-0T_5r7spWtw_ETZAJcBGL9a/s400/bubble_arrow_pinterest.png') !important;
}

.st_pinterest_vcount{
    margin-bottom: 0px;
    display: block;
}

</style>

<div class='gnr_social_floating'>
    <script type='text/javascript'>var switchTo5x=true;</script>
    <script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
    <script type='text/javascript'>stLight.options({onhover:false});</script>
    <span class='st_fblike_vcount' displaytext=''/>
    <span class='st_twitter_vcount' displaytext='' st_via='DGeneraBlog'/>
<span class='st_pinterest_vcount' displaytext=''/>
<div style='margin:0px 0 0 5px;'>
    <span class='st_plusone_vcount' displaytext=''/>
</div>

<div class='addthis_toolbox addthis_default_style ' style='margin:5px 0px 5px 8px;'>
<a class='addthis_counter'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
<script type='text/javascript'>
var addthis_config = {
     ui_cobrand: &quot;D-GENERA BLOG&quot;,
ui_header_color: &quot;#ffffff&quot;,
     ui_header_background: &quot;#0080FF&quot;
}
</script>
<script type='text/javascript'>var addthis_config = {&quot;data_track_addressbar&quot;:true};</script>
<script src='//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5064705719d41eef' type='text/javascript'/>
<span class='st_email' displaytext=''/>
<p style=' line-height:0px; font-size:10px; font-weight:bold; text-align:center;'><a href='http://d-genera.blogspot.com/2013/01/memasang-tombol-share-pinterest.html' style='color:#CAC8C8;'>Widgets</a></p>
</div>
</b:if></b:if>

Keterangan:
position:fixed; bottom:10% : Untuk mengatur tinggi rendah widget.
margin-left:-60px; float:left; : Untuk mengatur jarak kiri kanan windet.
background-color:#f7f7f7; : Untuk mengganti warna background widget.
DGeneraBlog : Gantilah dengan username Twitter Anda.

• Simpan perubahan yang telah Anda lakukan.

Kesimpulan

Widget share melayang ini akan ditampilkan pada halaman posting saja dan tidak akan ditampilkan pada homepage. Widget ini memiliki latar belakang putih dan melayang di sebelah kiri posting blog. Jika Anda ingin membuat widget ini melayang di sebelah kanan maka yang Anda butuhkan adalah mengedit bagian dari kode yang sudah saya tandai. Jika ada tambahan atau koreksi silahkan tulis di kotak komentar yang tersedia.

Salam damai sobat blogger..!! :D

Cara Membuat Link Read More Dengan Gambar Thumbnail Yang Keren

Seorang blogger yang baik dapat diidentifikasi dengan cara dia mengelola blog dan mengatur posting-nya. Homepage adalah bagian paling penting dari setiap blog. Homepage harus berisi 5 hingga 6 posting dalam rangka untuk merebut daya tarik pembaca sebanyak mungkin. Menjaga pembaca sibuk untuk waktu yang lama adalah apa yang saya sebut blogging yang sukses. Menampilkan 5-6 posting  selain akan mempercepat waktu loading blog, hal ini juga akan membuat pemandangan yang indah di blog Anda dan menunjukkan ringkasan dari setiap posting. Pada homepage saya, Anda akan melihat link Read More beserta gambar thumnail yang sesuai, dengan mengkliknya maka akan membuka seluruh posting. Lihatlah screenshot di bawah ini:

Untuk membuat link Read More dengan gambar thumnail pada blog Anda, langkahnya sangat sederhana dan mudah untuk diterapkan oleh Anda semua. Silahkan ikuti langkah-langkah di bawah ini dengan hati-hati dan teliti:

• Pertama masuk ke Blogger > Template
• Backup dulu Template Anda
• Klik Edit HTML
• Centang kotak Expand Widget Templates di pojok kiri atas
• Cari kode ini (gunakan fitur search Ctrl + F untuk memudahkan pencarian)

<data:post.body/>

• Ganti kode di atas dengan kode di bawah ini

<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>

<b:if cond='data:blog.pageType != "item"'>

<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'>read more</a></span>

</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</b:if>

• Sekarang carilah kode </head>, lalu letakkan kode di bawah ini tepat di atas kode </head>

<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}

//]]>
</script>

Keterangan:
summary_noimg = 430; Adalah ukuran tinggi potongan artikel jika tanpa thumbnail/gambar.
summary_img = 340; Adalah ukuran tinggi potongan artikel jika terdapat gambar/thumbnail.
img_thumb_height = 100; Adalah ukuran tinggi gambar/thumbnail.
img_thumb_width = 120; Adalah ukuran lebar gambar/thumbnail.

Begitulah tutorial singkat mengenai cara membuat link Read More dengan gambar thumbnail di blogger, semoga bisa bermanfaat bagi sobat blogger. :)

25 Menu Navigasi "Vertikal" Untuk Blogger - Kode CSS dan HTML

Pada postingan saya kali ini, saya akan menyediakan 25 Tab Menu Navigasi Vertikal yang menggunakan kode CSS dan HTML. Saya sudah memeriksa dan mencoba kode yang diambil dari Christopher dan Highdots dan hasilnya semuanya kompatibel dengan Blogger karena ada sebagian yang saya modifikasi. Saya berharap koleksi ini akan menarik bagi sebagian besar dari Anda karena tab menu navigasi ini bisa dengan mudah dapat Anda diinstal, disesuaikan dan dicopy! Saya berharap ini akan sangat membantu untuk desainer baru seperti saya :)

Bagaimana Cara Menambahkan Menu Navigasi Vertikal di Blogger?

Nah, proses ini sangat sederhana dan cukup mengikuti langkah-langkah berikut ini dengan hati-hati:

• Masuk ke Blogger > Template
• Backup dulu Template Anda
• Klik Edit HTML
• Centang Expand Widget Templates
• Paste kode CSS dari Menu yang Anda pilih tepat di atas kode ]]></b:skin>
• Untuk kode HTML bisa ada 2 posisi yang baik yaitu di sidebar kanan atau kiri. Tergantung berapa banyak kolom yang Anda miliki:
• Jika Anda memiliki sidebar di kanan, paste kode HTML di bawah kode <div id='sidebar-wrapper'>  atau <div id='sidebar-wrapper-right'>
• Jika Anda memiliki sidebar di kiri, paste kode HTML di bawah kode <div id='sidebar-wrapper-left'>
• Anda juga bisa langsung memasukkannya melalui gadget dengan cara masuk ke Layout > Add a Gadget > HTML/JavaScript, pastekan script HTML dari menu yang Anda pilih di dalamnya.
• Terakhir, simpan template Anda dan lihatlah perubahan yang terjadi

Catatan: Karena kebanyakan template menggunakan coding yang berbeda dan apabila Anda tidak dapat menemukan kode di atas maka silahkan tulis pesan di kotak komentar. Mungkin saya bisa membantu Anda.

Cara Mengedit Link Dalam Menu Navigasi

Untuk mengubah Link Tab Menu dan Judul, cukup mengedit bagian yang bercetak tebal dari kode HTML seperti contoh ini:

<li><a href="#1" >Link 1</a></li>
<li><a href="#2" >Link 2</a></li>
<li><a href="#3" >Link 3</a></li>
<li><a href="#4" >Link 4</a></li>
<li><a href="#5" >Link 5</a></li>

Ganti # 1, # 2, # 3 dll dengan URL/Link Anda dan ganti Link1, Link2, Link3 dll dengan Judul Halaman Anda. Jika Anda ingin menambah atau menghapus tab maka cukup menambahkan atau menghapus baris dari kode HTML berikut:

<li><a href="#" >Link</a></li>

25 Menu Navigasi Vertikal

Menu #1

Kode CSS

 #menu6 ul { list-style: none; margin: 0; padding: 0; } #menu6 img { border: none; } #menu6 { width: 200px; margin: 10px; } #menu6 li a { font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu6 li a:link, #menu6 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbnkb0ZJxzgw4WkjoAv2AvnPIgnW2qz4PDzrctXfv1KRv4LEebdshXtwCvzhAd75oWmhcQVpeq5SaDmLvndDkARfwrWRrT-KYsCf_grINGHvMC3gAqGax7IChpSvrjR1IwKEhbjze2sGw/s800/menu6.gif); padding: 8px 0 0 20px; } #menu6 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbnkb0ZJxzgw4WkjoAv2AvnPIgnW2qz4PDzrctXfv1KRv4LEebdshXtwCvzhAd75oWmhcQVpeq5SaDmLvndDkARfwrWRrT-KYsCf_grINGHvMC3gAqGax7IChpSvrjR1IwKEhbjze2sGw/s800/menu6.gif) 0 -32px; padding: 8px 0 0 20px; } 

Kode HTML

 <div id="menu6"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #2

Kode CSS

#menu3 ul { list-style: none; margin: 0; padding: 0; } #menu3 img { border: none; } #menu3 { width: 200px; border: 1px solid #ccc; margin: 10px; } #menu3 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu3 li a:link, #menu3 li a:visited { color: #888; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSBxMnntDaYjFqXHYnin4UlPdYhyphenhyphenQycvB-DALlmV8mJoVdHBdUdFFlp_3sZMQ44_O5Cl9kz-a0AP6i2Z4lOp50Jst8aiLdgBaDQJ_AUrnJYCFlX-IIS0Mdc8u_qzLF7CMSO_CG3Q9EGOo/s800/menu3.gif); padding: 8px 0 0 30px; } #menu3 li a:hover, #menu3 li #current, #menu3 li a:active { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSBxMnntDaYjFqXHYnin4UlPdYhyphenhyphenQycvB-DALlmV8mJoVdHBdUdFFlp_3sZMQ44_O5Cl9kz-a0AP6i2Z4lOp50Jst8aiLdgBaDQJ_AUrnJYCFlX-IIS0Mdc8u_qzLF7CMSO_CG3Q9EGOo/s800/menu3.gif) 0 -32px; padding: 8px 0 0 30px; }

Kode HTML

 <div id="menu3"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #3

Kode CSS

#menu9 ul { list-style: none; margin: 0; padding: 0; } #menu9 img { border: none; } #menu9 { width: 200px; margin: 10px; } #menu9 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu9 li a:link, #menu9 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrYFUTl8mm8eraI_whFIrf03-u-UzI-O52AxSu_BMKRTDuUJg5YRxGyk2DC5jlShHMu8gIZ3bS7cKCJR79utAhmHjmAiYKtKXYSILLUPT30HbKFW0omcEOnXj3ggbbARYiD_Do84wljr0/s800/menu9.gif); padding: 8px 0 0 35px; } #menu9 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrYFUTl8mm8eraI_whFIrf03-u-UzI-O52AxSu_BMKRTDuUJg5YRxGyk2DC5jlShHMu8gIZ3bS7cKCJR79utAhmHjmAiYKtKXYSILLUPT30HbKFW0omcEOnXj3ggbbARYiD_Do84wljr0/s800/menu9.gif) 0 -32px; padding: 8px 0 0 35px; }

Kode HTML

 <div id="menu9"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #4

Kode CSS

 #menu6 ul { list-style: none; margin: 0; padding: 0; } #menu6 img { border: none; } #menu6 { width: 200px; margin: 10px; } #menu6 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu6 li a:link, #menu6 li a:visited { color: #8D9179; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG9lVWIR2pvwf-hAqo4BNiYJax9HrhqJCMufaIYpe2amdVeexSnAwHZQgRwBNbSzeVpeB6fqd3i9VxI9ZlvThW7mUfEjhPVqiQCdlAjoHMsHS3RCzWoBlyTgFBT2FEkKwJCWw2MeiASOU/s800/menu6.gif); padding: 8px 0 0 10px; } #menu6 li a:hover, #menu6 li #current, #menu6 li a:active { color: #6C7250; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG9lVWIR2pvwf-hAqo4BNiYJax9HrhqJCMufaIYpe2amdVeexSnAwHZQgRwBNbSzeVpeB6fqd3i9VxI9ZlvThW7mUfEjhPVqiQCdlAjoHMsHS3RCzWoBlyTgFBT2FEkKwJCWw2MeiASOU/s800/menu6.gif) 0 -32px; padding: 8px 0 0 10px; }

Kode HTML

 <div id="menu6"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #5

Kode CSS

 #menu14 ul { list-style: none; margin: 0; padding: 0; } #menu14 img { border: none; } #menu14 { width: 200px; margin: 10px; } #menu14 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu14 li a:link, #menu14 li a:visited { color: #fff; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzgNAApUqx5hV8WaoqfgOWXw6l2Fgphe29PhdJ2-q3DT4HzYrs8J_xdH1FM9hcqPrVpy8Y9iWepPHa9amOzyPA44c3cEc9gZvNk9Iq5Mb-jeM1ed_XkzGVXIkUqbI5IhEB91uwcuqbzUI/s800/menu14.gif) 0 -32px; padding: 8px 0 0 10px; } #menu14 li a:hover { color: #333; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzgNAApUqx5hV8WaoqfgOWXw6l2Fgphe29PhdJ2-q3DT4HzYrs8J_xdH1FM9hcqPrVpy8Y9iWepPHa9amOzyPA44c3cEc9gZvNk9Iq5Mb-jeM1ed_XkzGVXIkUqbI5IhEB91uwcuqbzUI/s800/menu14.gif); padding: 8px 0 0 10px; }

Kode HTML

 <div id="menu14"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #6

Kode CSS

 #menu7 ul { list-style: none; margin: 0; padding: 0; } #menu7 img { border: none; } #menu7 { width: 200px; margin: 10px; } #menu7 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu7 li a:link, #menu7 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtPbmLVS00Qr_k_Rg9-xyThkmcQ07DPT8Pxw0qF5-iFRSvcKIL66A-2bFvI9ePcKu_ogXt_bqBvz_h_dYqHgnhTH_3kAX4wjCZ2PYg4cwshRVqWjUi9jpx4ZrAFbQeOSqEJ09yWO8Gd3I/s800/menu7.gif); padding: 8px 0 0 30px; } #menu7 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtPbmLVS00Qr_k_Rg9-xyThkmcQ07DPT8Pxw0qF5-iFRSvcKIL66A-2bFvI9ePcKu_ogXt_bqBvz_h_dYqHgnhTH_3kAX4wjCZ2PYg4cwshRVqWjUi9jpx4ZrAFbQeOSqEJ09yWO8Gd3I/s800/menu7.gif) 0 -32px; padding: 8px 0 0 30px; }

Kode HTML

 <div id="menu7"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #7

Kode CSS

#menu2 ul { list-style: none; margin: 0; padding: 0; } #menu2 img { border: none; } #menu2 { width: 200px; border-style: solid solid none solid; border-color: #677D92; border-size: 1px; border-width: 1px; margin: 10px; } #menu2 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu2 li a:link, #menu2 li a:visited { color: #fff; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixQmWRrFq8Y2xMKg8GZ6FQbCNuUeM0rmue_zAtR5HpT6lZVvIrXkKhi7nivef4EBOziimSiQ6h1uu8WvY6QT7HObsMKxJ1zT6-X4NKucq2P2CvbWX6LeKCSjvg33vGuHllGJfEeEKnIgc/s800/menu2.gif); padding: 8px 0 0 10px; } #menu2 li a:hover, #menu2 li #current { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixQmWRrFq8Y2xMKg8GZ6FQbCNuUeM0rmue_zAtR5HpT6lZVvIrXkKhi7nivef4EBOziimSiQ6h1uu8WvY6QT7HObsMKxJ1zT6-X4NKucq2P2CvbWX6LeKCSjvg33vGuHllGJfEeEKnIgc/s800/menu2.gif) 0 -32px; padding: 8px 0 0 10px; } #menu2 li a:active { color: #283A50; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixQmWRrFq8Y2xMKg8GZ6FQbCNuUeM0rmue_zAtR5HpT6lZVvIrXkKhi7nivef4EBOziimSiQ6h1uu8WvY6QT7HObsMKxJ1zT6-X4NKucq2P2CvbWX6LeKCSjvg33vGuHllGJfEeEKnIgc/s800/menu2.gif) 0 -64px; padding: 8px 0 0 10px; }

Kode HTML

 <div id="menu2"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #8

Kode CSS

 #menu9 ul { list-style: none; margin: 0; padding: 0; } #menu9 img { border: none; } #menu9 { width: 200px; margin-top: 10px; } #menu9 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu9 li a:link, #menu9 li a:visited { color: #E5E8D4; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuJsv9iUlj-cv35CI6duOIuC7-rjBQGBeEFmjIvAaVldwvTYn17NfSbWnRGeLeZIFB4H0EapGG_kFlc3QmwI2JgS0hBUuFhyphenhyphenJihDRMowvIdfKLmof-aAUhog6k3z5KEaIpooY_ujJEOZ0/s800/menu9.gif); padding: 8px 0 0 10px; } #menu9 li a:hover, #menu9 li #current { color: #725033; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuJsv9iUlj-cv35CI6duOIuC7-rjBQGBeEFmjIvAaVldwvTYn17NfSbWnRGeLeZIFB4H0EapGG_kFlc3QmwI2JgS0hBUuFhyphenhyphenJihDRMowvIdfKLmof-aAUhog6k3z5KEaIpooY_ujJEOZ0/s800/menu9.gif) 0 -32px; padding: 8px 0 0 10px; } #menu9 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuJsv9iUlj-cv35CI6duOIuC7-rjBQGBeEFmjIvAaVldwvTYn17NfSbWnRGeLeZIFB4H0EapGG_kFlc3QmwI2JgS0hBUuFhyphenhyphenJihDRMowvIdfKLmof-aAUhog6k3z5KEaIpooY_ujJEOZ0/s800/menu9.gif) 0 -64px; padding: 8px 0 0 10px; }

Kode HTML

 <div id="menu9"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #9

Kode CSS

#menu12 ul { list-style: none; margin: 0; padding: 0; } #menu12 img { border: none; } #menu12 { width: 200px; margin: 10px; } #menu12 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 22px; text-decoration: none; } #menu12 li a:link, #menu12 li a:visited { color: #666; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4mnKtbX991s7kuM-ACwNHC-UYz-30ZEdJxxOOjT3_yyeAF1jin7ktJFjrTTYjrVb0Al06bMpvRlkgPV5wT2tl6-gUmcoQs0B-KfIJBhzEBHXCOyjWh2sSxMpl6Y69Po16BYi6qS_GP1E/s800/menu12.gif); padding: 10px 0 0 35px; } #menu12 li a:hover { color: #000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4mnKtbX991s7kuM-ACwNHC-UYz-30ZEdJxxOOjT3_yyeAF1jin7ktJFjrTTYjrVb0Al06bMpvRlkgPV5wT2tl6-gUmcoQs0B-KfIJBhzEBHXCOyjWh2sSxMpl6Y69Po16BYi6qS_GP1E/s800/menu12.gif) 0 -32px; padding: 10px 0 0 35px; } 

Kode HTML

 <div id="menu12"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #10

Kode CSS

#menu13 ul { list-style: none; margin: 0; padding: 0; } #menu13 img { border: none; } #menu13 { width: 200px; margin: 10px; } #menu13 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu13 li a:link, #menu13 li a:visited { color: #C7377D; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh63apcvBGl2i87cmDukfYWVt5y8dGY5H98J7e8sOO5MPrbh3yoADPBhPIKGShqv2G3eBAsZgt5Fcu0pUVMCWkidMx1FuhPb55J4wCsmKfnk2wsUIJ6ZyMRBsa_Uuj6iJMVY9BkE3QigZU/s800/menu13.gif); padding: 8px 0 0 10px; } #menu13 li a:hover { color: #C7377D; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh63apcvBGl2i87cmDukfYWVt5y8dGY5H98J7e8sOO5MPrbh3yoADPBhPIKGShqv2G3eBAsZgt5Fcu0pUVMCWkidMx1FuhPb55J4wCsmKfnk2wsUIJ6ZyMRBsa_Uuj6iJMVY9BkE3QigZU/s800/menu13.gif) 0 -32px; padding: 8px 0 0 10px; }

Kode HTML

 <div id="menu13"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #11

Kode CSS

 #menu4 ul { list-style: none; margin: 0; padding: 0; } #menu4 img { border: none; } #menu4 { width: 200px; border-style: solid solid none solid; border-color: #D76100; border-size: 1px; border-width: 1px; margin: 10px; } #menu4 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu4 li a:link, #menu4 li a:visited { color: #9E3C02; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxo6NxRulMLyEu9NrQk2gdaJ-mksADCT1Gm_kR2QntO8P_uWj0HFuvuNNWfBVRjoOBwnBt2kAM4ejrWXBrqmtNNSu0VpsUc5JcHiXVo3IqmXFKUFK8A93mhjG2BIAqGJmwmPGKzbeJvAE/s800/menu4.gif); padding: 8px 0 0 30px; } #menu4 li a:hover, #menu4 li #current { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxo6NxRulMLyEu9NrQk2gdaJ-mksADCT1Gm_kR2QntO8P_uWj0HFuvuNNWfBVRjoOBwnBt2kAM4ejrWXBrqmtNNSu0VpsUc5JcHiXVo3IqmXFKUFK8A93mhjG2BIAqGJmwmPGKzbeJvAE/s800/menu4.gif) 0 -32px; padding: 8px 0 0 30px; } #menu4 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxo6NxRulMLyEu9NrQk2gdaJ-mksADCT1Gm_kR2QntO8P_uWj0HFuvuNNWfBVRjoOBwnBt2kAM4ejrWXBrqmtNNSu0VpsUc5JcHiXVo3IqmXFKUFK8A93mhjG2BIAqGJmwmPGKzbeJvAE/s800/menu4.gif) 0 -64px; padding: 8px 0 0 30px; }

Kode HTML

 <div id="menu4"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #12

Kode CSS

#navlist { color: white; background: #17a; border-bottom: 0.2em solid #17a; border-right: 0.2em solid #17a; padding: 0 1px; margin-left: 0; width: 12em; font: normal 10px Verdana, sans-serif; } #navlist li { list-style: none; margin: 0; font-size: 1em; } #navlist a { display: block; text-decoration: none; margin-bottom: 0.5em; margin-top: 0.5em; color: white; background: #39c; border-width: 1px; border-style: solid; border-color: #5bd #035 #068 #6cf; border-left: 1em solid #fc0; padding: 0.25em 0.5em 0.4em 0.75em; } #navlist a#current { border-color: #5bd #035 #068 #f30; } #navlist a { width: 99%; /* only necessary for Internet Explorer */ } #navlist a { voice-family: "\"}\""; voice-family: inherit; width: 9.6em; /* Tantek-hack should only used if Internet-Explorer 6 is in standards-compliant mode */ } #navcontainer>#navlist a { width: auto; /* only necessary if you use the hacks above for the Internet Explorer */ } #navlist a:hover, #navlist a#current:hover { background: #28b; border-color: #069 #6cf #5bd #fc0; padding: 0.4em 0.35em 0.25em 0.9em; } #navlist a:active, #navlist a#current:active { background: #17a; border-color: #069 #6cf #5bd white; padding: 0.4em 0.35em 0.25em 0.9em; }

Kode HTML

 <div id="navcontainer"> <ul id="navlist"> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #13

Kode CSS

 #menu8 ul { list-style: none; margin: 0; padding: 0; } #menu8 img { border: none; } #menu8 { width: 200px; margin-top: 10px; } #menu8 li a { text-decoration: none; height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; } #menu8 li a:link, #menu8 li a:visited { color: #777; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS72VRPgraH1hOVU0MwbZmc4R1uO5K3XFAfDJvf9J2WkFZcWayQOmctadjP2lY-9SyfGTrV6xwpamWd9Yb9GOcR7eI1CXrTXT6LIPyPAInHcBqpAVn-h2c1j3u0-lzwLZvFIKMn2-Lf8I/s800/menu8.gif); padding: 8px 0 0 20px; } #menu8 li a:hover, #menu8 li #current { color: #257EB7; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS72VRPgraH1hOVU0MwbZmc4R1uO5K3XFAfDJvf9J2WkFZcWayQOmctadjP2lY-9SyfGTrV6xwpamWd9Yb9GOcR7eI1CXrTXT6LIPyPAInHcBqpAVn-h2c1j3u0-lzwLZvFIKMn2-Lf8I/s800/menu8.gif) 0 -32px; padding: 8px 0 0 25px; } #menu8 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS72VRPgraH1hOVU0MwbZmc4R1uO5K3XFAfDJvf9J2WkFZcWayQOmctadjP2lY-9SyfGTrV6xwpamWd9Yb9GOcR7eI1CXrTXT6LIPyPAInHcBqpAVn-h2c1j3u0-lzwLZvFIKMn2-Lf8I/s800/menu8.gif) 0 -64px; padding: 8px 0 0 25px; }

Kode HTML

 <div id="menu8"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #14

Kode CSS

#menu8 ul { list-style: none; margin: 0; padding: 0; } #menu8 img { border: none; } #menu8 { width: 200px; margin: 10px; border-style: solid; border-color: #656556; border-size: 1px; border-width: 1px; } #menu8 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu8 li a:link, #menu8 li a:visited { color: #656556 ; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-birHAWiogIG8sGz3uLlwPRsJ_VfFk5poRtGttBfG3klnzM311WrnnrLCZbHNLrhfY75rU666swZQ0-Zx9Ttlf5EkE7qN17EAMsIBR89guE4-q3BPJXFR6kBhKaW1dsI22EfoWcFfsRU/s800/menu8.gif) ; padding: 8px 0 0 20px; } #menu8 li a:hover { color: #474739; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-birHAWiogIG8sGz3uLlwPRsJ_VfFk5poRtGttBfG3klnzM311WrnnrLCZbHNLrhfY75rU666swZQ0-Zx9Ttlf5EkE7qN17EAMsIBR89guE4-q3BPJXFR6kBhKaW1dsI22EfoWcFfsRU/s800/menu8.gif) 0 -32px; padding: 8px 0 0 20px; }

Kode HTML

 <div id="menu8"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #15

Kode CSS

#menu9 body { font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; } #menu1 ul { list-style: none; margin: 0; padding: 0; } #menu1 img { border: none; } #menu1 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #3D261D; border-size: 1px; border-width: 1px; } #menu1 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu1 li a:link, #menu1 li a:visited { color: #E4D6CD; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqKP1nx82tJL4_d-0AXi3FURrNHAi58-JiVG8W-1FhsV9VbqhM2eXLD20fpnySrty2hBmg6vz07eiEIpYWWObRI3qDqOYaAYDzSXoaHuLQGGlvj2qh_pNToO67VSzh26PikoOfBL1UNBQ/s800/menu1.gif); padding: 8px 0 0 10px; } #menu1 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqKP1nx82tJL4_d-0AXi3FURrNHAi58-JiVG8W-1FhsV9VbqhM2eXLD20fpnySrty2hBmg6vz07eiEIpYWWObRI3qDqOYaAYDzSXoaHuLQGGlvj2qh_pNToO67VSzh26PikoOfBL1UNBQ/s800/menu1.gif) 0 -32px; padding: 8px 0 0 10px; }

Kode HTML

 <div id="menu1"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #16

Kode CSS

#navcontainer { background: #f0e7d7; width: 30%; margin: 0 auto; padding: 1em 0; font-family: georgia, serif; font-size: 13px; text-align: center; text-transform: lowercase; } ul#navlist { text-align: left; list-style: none; padding: 0; margin: 0 auto; width: 70%; } ul#navlist li { display: block; margin: 0; padding: 0; } ul#navlist li a { display: block; width: 100%; padding: 0.5em 0 0.5em 2em; border-width: 1px; border-color: #ffe #aaab9c #ccc #fff; border-style: solid; color: #777; text-decoration: none; background: #f7f2ea; } #navcontainer>ul#navlist li a { width: auto; } ul#navlist li#active a { background: #f0e7d7; color: #800000; } ul#navlist li a:hover, ul#navlist li#active a:hover { color: #800000; background: transparent; border-color: #aaab9c #fff #fff #ccc; }

Kode HTML

 <div id="navcontainer"> <ul id="navlist"> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #17

Kode CSS

 #menu3 ul { list-style: none; margin: 0; padding: 0; } #menu3 img { border: none; } #menu3 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #BCD2E6; border-size: 1px; border-width: 1px; } #menu3 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu3 li a:link, #menu3 li a:visited { color: #8BADCF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUxwpvxIGdKhJDS_033E0d9at7NHDlWGlmdx1vXDXQbKfOWP0y7Dti29SHNbTbRmj-uz7wejT2NMqte1Lrc0ncxgxwOZSBgVOmfoPBtS7ghf0R1LhX2mGE2R063ut8ADDCihNRbp_tXFQ/s800/menu3.gif); padding: 8px 0 0 10px; } #menu3 li a:hover { color: #627EB7; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUxwpvxIGdKhJDS_033E0d9at7NHDlWGlmdx1vXDXQbKfOWP0y7Dti29SHNbTbRmj-uz7wejT2NMqte1Lrc0ncxgxwOZSBgVOmfoPBtS7ghf0R1LhX2mGE2R063ut8ADDCihNRbp_tXFQ/s800/menu3.gif) 0 -32px; padding: 8px 0 0 10px; }

Kode HTML

 <div id="menu3"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #18

Kode CSS

#menu11 ul { list-style: none; margin: 0; padding: 0; } #menu11 img { border: none; } #menu11 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #889944; border-size: 1px; border-width: 1px; } #menu11 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu11 li a:link, #menu11 li a:visited { color: #889944; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2XCbptLMXUZukj_c6eFC_QYcxHTbrJ0aiB6UrLF2ZNOX2AQ9xncb3GhsNi_NOpUeoOjSOQ7y5kQD20zOuc2Jd0nKhi5H8N_1_iyrpLBCUThQStyb_rbhIUcXN-0sK07udvejb3u_VGq4/s400/menu11.gif); padding: 8px 0 0 25px; } #menu11 li a:hover { color: #889944; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2XCbptLMXUZukj_c6eFC_QYcxHTbrJ0aiB6UrLF2ZNOX2AQ9xncb3GhsNi_NOpUeoOjSOQ7y5kQD20zOuc2Jd0nKhi5H8N_1_iyrpLBCUThQStyb_rbhIUcXN-0sK07udvejb3u_VGq4/s400/menu11.gif) 0 -32px; padding: 8px 0 0 27px; }

Kode HTML

<div id="menu11"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #19

Kode CSS

 #button { width: 12em; border-right: 1px solid #000; padding: 0 0 1em 0; margin-bottom: 1em; font-family: Tahoma, Arial, sans-serif; /*'Trebuchet MS', 'Lucida Grande', Verdana, Arial, sans-serif;*/ font-size : 10px; background-color: #90bade; color: #333; } #button ul { list-style: none; margin: 0; padding: 0; border: none; } #button li { border-bottom: 1px solid #90bade; margin: 0; list-style: none; list-style-image: none; } #button li a { display: block; padding: 5px 5px 5px 0.5em; border-left: 10px solid #1958b7; border-right: 10px solid #508fc4; background-color: #2175bc; color: #fff; text-decoration: none; width: 100%; } html>body #button li a { width: auto; } #button li a:hover { border-left: 10px solid #1c64d1; border-right: 10px solid #5ba3e0; background-color: #2586d7; color: #fff; } #button li #active { border-left: 10px solid #1c64d1; border-right: 10px solid #5ba3e0; background-color: #2586d7; color: #fff; }

Kode HTML

 <div id="button"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #20

Kode CSS

#menu ul { list-style: none; margin: 0; padding: 0; } #menu img { border: none; } #menu { width: 200px; border-style: solid solid none solid; border-color: #94AA74; border-size: 1px; border-width: 1px; margin: 10px; } #menu li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu li a:link, #menu li a:visited { color: #5E7830; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnqnaYowZe-Dnm2KOWG5k1Ia_Twh_VLdWQQo4d-df1SjR2qRXKhGdmap-E8ytxQVvVL3RJruUiS9qZN67oHdNRFxbJO6hCVvrmhtQq9Icmc-wEtP32ykS7LcauIaUC90Ec7StD9j3DFtc/s800/menu1.gif); padding: 8px 0 0 10px; } #menu li a:hover, #menu li #current { color: #26370A; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnqnaYowZe-Dnm2KOWG5k1Ia_Twh_VLdWQQo4d-df1SjR2qRXKhGdmap-E8ytxQVvVL3RJruUiS9qZN67oHdNRFxbJO6hCVvrmhtQq9Icmc-wEtP32ykS7LcauIaUC90Ec7StD9j3DFtc/s800/menu1.gif) 0 -32px; padding: 8px 0 0 10px; } #menu li a:active { color: #26370A; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnqnaYowZe-Dnm2KOWG5k1Ia_Twh_VLdWQQo4d-df1SjR2qRXKhGdmap-E8ytxQVvVL3RJruUiS9qZN67oHdNRFxbJO6hCVvrmhtQq9Icmc-wEtP32ykS7LcauIaUC90Ec7StD9j3DFtc/s800/menu1.gif) 0 -64px; padding: 8px 0 0 10px; }

Kode HTML

 <div id="menu"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #21

Kode CSS

#menu2 ul { list-style: none; margin: 0; padding: 0; } #menu2 img { border: none; } #menu2 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #D8D5D1; border-size: 1px; border-width: 1px; } #menu2 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu2 li a:link, #menu2 li a:visited { color: #3688BA; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRt-H5JA4gwTv8qY6W2yHgJnnmSf95RQYmjwr9B8-evnT8AcdXQxY57dBCO5TWsF2hZAgiY4PNDzWns_1gK50g35u-CfU9qc_LZYtzL5_F3Q3ajjEfGPbrN8PZJKCnByh3OzjnllUONO0/s800/menu2.gif); padding: 8px 0 0 30px; } #menu2 li a:hover { color: #3688BA; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRt-H5JA4gwTv8qY6W2yHgJnnmSf95RQYmjwr9B8-evnT8AcdXQxY57dBCO5TWsF2hZAgiY4PNDzWns_1gK50g35u-CfU9qc_LZYtzL5_F3Q3ajjEfGPbrN8PZJKCnByh3OzjnllUONO0/s800/menu2.gif) 0 -32px; padding: 8px 0 0 32px; }

Kode HTML

 <div id="menu2"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #22

Kode CSS

#menu5 ul { list-style: none; margin: 0; padding: 0; } #menu5 img { border: none; } #menu5 { width: 200px; border-style: none solid none solid; border-color: #D0D0D0; border-width: 1px; margin: 10px; } #menu5 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu5 li a:link, #menu5 li a:visited { color: #777; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQHhGnCkxBZ_hfqgphXGyC9Dgv4cnPaJT3HgaYporealtAFoegu9FF2IRgYlKAXAmO3Pvw9cslM_z_vAYiUFViAZHjh-77GK-hSVG3al4W-YYLdD7AHgbkXsHUMXKjSlbLmV2oqhD6i6A/s800/menu5.gif); padding: 8px 25px 0 10px; text-align: right; } #menu5 li a:hover, #menu5 li #current { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQHhGnCkxBZ_hfqgphXGyC9Dgv4cnPaJT3HgaYporealtAFoegu9FF2IRgYlKAXAmO3Pvw9cslM_z_vAYiUFViAZHjh-77GK-hSVG3al4W-YYLdD7AHgbkXsHUMXKjSlbLmV2oqhD6i6A/s800/menu5.gif) 0 -32px; padding: 8px 25px 0 10px; text-align: right; } #menu5 li a:active { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQHhGnCkxBZ_hfqgphXGyC9Dgv4cnPaJT3HgaYporealtAFoegu9FF2IRgYlKAXAmO3Pvw9cslM_z_vAYiUFViAZHjh-77GK-hSVG3al4W-YYLdD7AHgbkXsHUMXKjSlbLmV2oqhD6i6A/s800/menu5.gif) 0 -64px; padding: 8px 25px 0 10px; text-align: right; }

Kode HTML

 <div id="menu5"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #23

Kode CSS

 #menu5 ul { list-style: none; margin: 0; padding: 0; } #menu5 img { border: none; } #menu5 { width: 200px; margin: 10px; } #menu5 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu5 li a:link, #menu5 li a:visited { color: #FFF; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOwrU3PB7_EvdG8-2Xp5eDCTIwu9iee3Q766OSgbzzRSN3XrjxCmizK0795QseUEWVNbPaerPOCOJggocKExtYoUe1ehTf6NYRagezxQgCBhEN_NuAdajiYIIUi1aoPUq9JIuA00ex0ck/s800/menu5.gif); padding: 8px 0 0 10px; } #menu5 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOwrU3PB7_EvdG8-2Xp5eDCTIwu9iee3Q766OSgbzzRSN3XrjxCmizK0795QseUEWVNbPaerPOCOJggocKExtYoUe1ehTf6NYRagezxQgCBhEN_NuAdajiYIIUi1aoPUq9JIuA00ex0ck/s800/menu5.gif) 0 -32px; padding: 8px 0 0 10px; }

Kode HTML

 <div id="menu5"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #24

Kode CSS

#menu4 ul { list-style: none; margin: 0; padding: 0; } #menu4 img { border: none; } #menu4 { width: 200px; margin: 10px; border-style: solid solid none solid; border-color: #000; border-size: 1px; border-width: 1px; } #menu4 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu4 li a:link, #menu4 li a:visited { color: #CCC; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9g4zuKGE466qMhAELKPSANNBg4P1zAjXALOXpeynJMHMwvKaNyvgO2Wl4nDL90dBcxL2bQZoa46EZM0XC8VeCXoobkc_GWbLdb1RC9VEuVwXbnf_zqDomTb4kO-uL2ZkjxD_T5nVm2LQ/s800/menu4.gif); padding: 8px 0 0 10px; } #menu4 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9g4zuKGE466qMhAELKPSANNBg4P1zAjXALOXpeynJMHMwvKaNyvgO2Wl4nDL90dBcxL2bQZoa46EZM0XC8VeCXoobkc_GWbLdb1RC9VEuVwXbnf_zqDomTb4kO-uL2ZkjxD_T5nVm2LQ/s800/menu4.gif) 0 -32px; padding: 8px 0 0 10px; }

Kode HTML

 <div id="menu4"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Menu #25

Kode CSS

 #menu10 ul { list-style: none; margin: 0; padding: 0; } #menu10 img { border: none; } #menu10 { width: 200px; margin: 10px; } #menu10 li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height: 24px; text-decoration: none; } #menu10 li a:link, #menu10 li a:visited { color: #4D4D4D; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN6aO9PjwyJ5fHc60md5-ZFdsBT84XwZYdwrx0eYjScNkxevDusjF5q_RI_WTp8Cyn93kcT88_B3533eHe9ZhS0ykb5D0mVRaAVygtMXUXJld6YG0dOP1Ol7RYoSKqDZkM-F1mhzQCPSA/s800/menu10.gif); padding: 8px 0 0 10px; } #menu10 li a:hover { color: #FF9834; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN6aO9PjwyJ5fHc60md5-ZFdsBT84XwZYdwrx0eYjScNkxevDusjF5q_RI_WTp8Cyn93kcT88_B3533eHe9ZhS0ykb5D0mVRaAVygtMXUXJld6YG0dOP1Ol7RYoSKqDZkM-F1mhzQCPSA/s800/menu10.gif) 0 -32px; padding: 8px 0 0 10px; }

Kode HTML

 <div id="menu10"> <ul> <li><a href="#1">Link 1</a></li> <li><a href="#2">Link 2</a></li> <li><a href="#3">Link 3</a></li> <li><a href="#4">Link 4</a></li> <li><a href="#5">Link5</a></li> </ul> </div>

Nah itulah 25 kode menu navigasi yang bisa saya persembahkan untuk Anda. Nantikan informasi menarik lainnya dari D-Genera Blog.. ^^ 2XFUZ2E47HKU

Cara Membuat Fan Page Facebook Untuk Blogger - 2013

Situs jejaring sosial sangat membantu dalam menaikkan lalu lintas untuk situs apapun dan juga menyediakan akses mudah ke pengguna untuk melihat apa yang terjadi di situs tanpa benar-benar pergi ke situs. Apalagi Facebook memiliki layanan untuk membuat Facebook Fan Page untuk Anda. Cara membuat Fan Page juga sangat sederhana sekali. Conntohnya dapat dilihat pada sidebar blog saya. Anda hanya perlu melakukan langkah-langkah sederhana di bawah ini untuk membuatnya. Baiklah langsung saja kita mainkan!

Cara Membuat Facebook Fan Page
1. Login dulu ke akun Facebook Anda.
2. Kemudian masuk ke halaman Create a Page
3. Pilih salah satu dari kategori yang muncul, misalkan saya memilih 'Cause or Community'

4. Masukkan nama blog Anda di kotak yang muncul dan centang 'I agree to Facebook Page Terms' lalu klik Get Started. Lihat gambar ini untuk lebih jelas.

5. Pada halaman selanjutnya yang muncul, upload logo Blog Anda lalu klik Next.

6. Halaman selanjutnya akan meminta Anda untuk memasukkan deskripsi dan alamat blog Anda, isikan seperti pada gambar di bawah kemudian klik Save Info.

7. Klik Skip pada halaman ini karenan layanan ini berbayar.

8. Fan Page Anda sudah jadi dan Anda bisa mengundang teman-teman Anda untuk me-like Fan Page Anda. Kemudian Anda bisa memposting link artikel blog Anda di Fan Page yang telah Anda buat.

Saya berharap Anda menyukai postingan saya ini dan mudah-mudahan bermanfaat terutama bagi blogger pemula. Artikel lain yang mungkin harus Anda baca juga adalah:

• Cara Memasang Facebook Like Box di Blogger

Sekian dulu tutorial dari saya, nantikan lagi artikel menarik lainnya hanya di D-Genera. Salam sejahtera buat Anda semua

Cara Memasang + Kostumisasi Widget Multi Tab Pada Sidebar Di Blogger

Memiliki tampilan blog yang simpel, indah, dan elegan adalah harapan dari semua blogger tapi juga tidak mengesampingkan kecepatan loading blog. Tampilan blog yang bagus tidak akan ada artinya jika waktu loading blog sangat lamban. Pada postingan saya yang ini akan memberikan tutorial mudah bagaimana cara memasang multi tab pada blog Anda. Jadi daripada sidebar blog Anda dikotori dengan widget-widget yang berjajar ke bawah karena terlalu banyak. Mungkin multi tab ini bisa menjadi solusinya dan membuat sidebar blog Anda menjadi simpel. Contohnya Anda dapat melihatnya pada sidebar blog saya. Baiklah mari kita kerjakan!

Untuk menambahkan widget multi tab yang indah ini ke Blog Anda, ikuti langkah-langkah berikut:

1. Masuk ke Blogger > Template

2. Backup dulu template Anda agar bisa dikembalikan jika terjadi kesalahan

3. Klik Edit HTML

4. Cari kode </head> dan paste kode di bawah ini tepat di bawah </head>:

<script type='text/javascript'>
//<![CDATA[
document.write('<style type="text/css">.tabber{display:none;}<\/style>');
function tabberObj(argsObj)
{
  var arg;
  this.div = null;
  this.classMain = "tabber";
  this.classMainLive = "tabberlive";
  this.classTab = "tabbertab";
  this.classTabDefault = "tabbertabdefault";
  this.classNav = "tabbernav";
  this.classTabHide = "tabbertabhide";
  this.classNavActive = "tabberactive";
  this.titleElements = ['h2','h3','h4','h5','h6'];
  this.titleElementsStripHTML = true;
  this.removeTitle = true;
  this.addLinkId = false;
  this.linkIdFormat = '<tabberid>nav<tabnumberone>';
  for (arg in argsObj) { this[arg] = argsObj[arg]; }
  this.REclassMain = new RegExp('\\b' + this.classMain + '\\b', 'gi');
  this.REclassMainLive = new RegExp('\\b' + this.classMainLive + '\\b', 'gi');
  this.REclassTab = new RegExp('\\b' + this.classTab + '\\b', 'gi');
  this.REclassTabDefault = new RegExp('\\b' + this.classTabDefault + '\\b', 'gi');
  this.REclassTabHide = new RegExp('\\b' + this.classTabHide + '\\b', 'gi');
  this.tabs = new Array();
  if (this.div) {
    this.init(this.div);
    this.div = null;
  }
}
tabberObj.prototype.init = function(e)
{
  var
  childNodes,
  i, i2,
  t,
  defaultTab=0,
  DOM_ul,
  DOM_li,
  DOM_a,
  aId,
  headingElement;
  if (!document.getElementsByTagName) { return false; }
  if (e.id) {
    this.id = e.id;
  }
  this.tabs.length = 0;
  childNodes = e.childNodes;
  for(i=0; i < childNodes.length; i++) {
    if(childNodes[i].className &&
       childNodes[i].className.match(this.REclassTab)) {
      t = new Object();
      t.div = childNodes[i];
      this.tabs[this.tabs.length] = t;
      if (childNodes[i].className.match(this.REclassTabDefault)) {
    defaultTab = this.tabs.length-1;
      }
    }
  }
  DOM_ul = document.createElement("ul");
  DOM_ul.className = this.classNav;
  for (i=0; i < this.tabs.length; i++) {
    t = this.tabs[i];
    t.headingText = t.div.title;
    if (this.removeTitle) { t.div.title = ''; }
    if (!t.headingText) {
      for (i2=0; i2<this.titleElements.length; i2++) {
    headingElement = t.div.getElementsByTagName(this.titleElements[i2])[0];
    if (headingElement) {
      t.headingText = headingElement.innerHTML;
      if (this.titleElementsStripHTML) {
        t.headingText.replace(/<br>/gi," ");
        t.headingText = t.headingText.replace(/<[^>]+>/g,"");
      }
      break;
    }
      }
    }
    if (!t.headingText) {
      t.headingText = i + 1;
    }
    DOM_li = document.createElement("li");
    t.li = DOM_li;
    DOM_a = document.createElement("a");
    DOM_a.appendChild(document.createTextNode(t.headingText));
    DOM_a.href = "javascript:void(null);";
    DOM_a.title = t.headingText;
    DOM_a.onclick = this.navClick;
    DOM_a.tabber = this;
    DOM_a.tabberIndex = i;
    if (this.addLinkId && this.linkIdFormat) {
      aId = this.linkIdFormat;
      aId = aId.replace(/<tabberid>/gi, this.id);
      aId = aId.replace(/<tabnumberzero>/gi, i);
      aId = aId.replace(/<tabnumberone>/gi, i+1);
      aId = aId.replace(/<tabtitle>/gi, t.headingText.replace(/[^a-zA-Z0-9\-]/gi, ''));
      DOM_a.id = aId;
    }
    DOM_li.appendChild(DOM_a);
    DOM_ul.appendChild(DOM_li);
  }
  e.insertBefore(DOM_ul, e.firstChild);
  e.className = e.className.replace(this.REclassMain, this.classMainLive);
  this.tabShow(defaultTab);
  if (typeof this.onLoad == 'function') {
    this.onLoad({tabber:this});
  }
  return this;
};
tabberObj.prototype.navClick = function(event)
{
  var
  rVal,
  a,
  self,
  tabberIndex,
  onClickArgs;
  a = this;
  if (!a.tabber) { return false; }
  self = a.tabber;
  tabberIndex = a.tabberIndex;
  a.blur();
  if (typeof self.onClick == 'function') {
    onClickArgs = {'tabber':self, 'index':tabberIndex, 'event':event};
    /* IE uses a different way to access the event object */
    if (!event) { onClickArgs.event = window.event; }
    rVal = self.onClick(onClickArgs);
    if (rVal === false) { return false; }
  }
  self.tabShow(tabberIndex);
  return false;
};
tabberObj.prototype.tabHideAll = function()
{
  var i;
  for (i = 0; i < this.tabs.length; i++) {
    this.tabHide(i);
  }
};
tabberObj.prototype.tabHide = function(tabberIndex)
{
  var div;
  if (!this.tabs[tabberIndex]) { return false; }
  div = this.tabs[tabberIndex].div;
  if (!div.className.match(this.REclassTabHide)) {
    div.className += ' ' + this.classTabHide;
  }
  this.navClearActive(tabberIndex);
  return this;
};
tabberObj.prototype.tabShow = function(tabberIndex)
{
  var div;
  if (!this.tabs[tabberIndex]) { return false; }
  this.tabHideAll();
  div = this.tabs[tabberIndex].div;
  div.className = div.className.replace(this.REclassTabHide, '');
  this.navSetActive(tabberIndex);
  if (typeof this.onTabDisplay == 'function') {
    this.onTabDisplay({'tabber':this, 'index':tabberIndex});
  }
  return this;
};
tabberObj.prototype.navSetActive = function(tabberIndex)
{
  this.tabs[tabberIndex].li.className = this.classNavActive;
  return this;
};
tabberObj.prototype.navClearActive = function(tabberIndex)
{
  this.tabs[tabberIndex].li.className = '';
  return this;
};
function tabberAutomatic(tabberArgs)
{
  var
    tempObj,
    divs,
    i;
  if (!tabberArgs) { tabberArgs = {}; }
  tempObj = new tabberObj(tabberArgs);
  divs = document.getElementsByTagName("div");
  for (i=0; i < divs.length; i++) {
    if (divs[i].className &&
    divs[i].className.match(tempObj.REclassMain)) {
      tabberArgs.div = divs[i];
      divs[i].tabber = new tabberObj(tabberArgs);
    }
  }
  return this;
}
function tabberAutomaticOnLoad(tabberArgs)
{
  var oldOnLoad;
  if (!tabberArgs) { tabberArgs = {}; }
  oldOnLoad = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = function() {
      tabberAutomatic(tabberArgs);
    };
  } else {
    window.onload = function() {
      oldOnLoad();
      tabberAutomatic(tabberArgs);
    };
  }
}
/* Run tabberAutomaticOnload() unless the "manualStartup" option was specified */
if (typeof tabberOptions == 'undefined') {
    tabberAutomaticOnLoad();
} else {
  if (!tabberOptions['manualStartup']) {
    tabberAutomaticOnLoad(tabberOptions);
  }
}
//]]>
</script>

5. Sekarang carilah kode ]]></b:skin> dan letakkan kode di bawah ini tepat di atas ]]></b:skin>

/*---------- Tabber Start-------- */

.tabberlive{
margin:0;
padding:5px;
clear:both;
background:$tbbxbgcolor;
border:1px solid $tbbxbrcolor;
}
.tabbernav {
margin:0;
padding: 3px 0;
border-bottom: 1px solid $tbbxbrcolor;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
}
.tabbernav li {
list-style:none;
margin:0;
display:inline;
}
.tabbernav li a {
padding:3px 0.5em;
margin-right:1px;
border:1px solid $tbbxbrcolor;
border-bottom:none;
background:$tbbxcolor2;
text-decoration:none;
color:$tbbxcolor1;
}
.tabbernav li a:hover {
color:$tbbxcolor2;
background:$tbbxcolor1;
border-color:$tbbxbrcolor;
text-decoration:none;
}
.tabbernav li.tabberactive a,
.tabbernav li.tabberactive a:hover {
background:$tbbxcolor1;
color:$tbbxcolor2;
border-bottom: 1px solid $tbbxcolor1;
}
.tabberlive .tabbertab {
padding:5px;
border:1px solid $tbbxbrcolor;
border-top:0;
background:$tbbxcolor1;
}
.tabberlive .tabbertab h2,
.tabberlive .tabbertabhide {
display:none;
}
.tabbertab .widget-content ul{
list-style:none;
margin:0 0 10px 0;
padding:0;
}
.tabbertab .widget-content li {
border-bottom:1px solid $tbbxbrcolor;
margin:0 5px;
padding:2px 0 5px 0;
}

/*------- Tabber End--------*/

6. Jangan simpan dulu template Anda. Sekarang carilah Variable definitions dan pastekan semua kode di bawah ini bersama kode Variable definitions di bawah ini:

<Variable name="tbbxbgcolor" description="Tab box Background Color" type="color" default="#f8f8f8" value="#f8f8f8">
<Variable name="tbbxbrcolor" description="Tab box Border Color" type="color" default="#dcdcdc" value="#dcdcdc">
<Variable name="tbbxcolor1" description="Tab box Color 1" type="color" default="#ffffff" value="#ffffff">
<Variable name="tbbxcolor2" description="Tab box Color 2" type="color" default="#5588aa" value="#5588aa">

Jika Anda tidak dapat menemukan Variable definitions, carilah kode #navbar-iframe dan paste kode berikut ini di bawah kode #navbar-iframe {Ada beberapa teks di sini}

/* Variable definitions
   ====================
<Variable name="tbbxbgcolor" description="Tab box Background Color" type="color" default="#f8f8f8" value="#f8f8f8">
<Variable name="tbbxbrcolor" description="Tab box Border Color" type="color" default="#dcdcdc" value="#dcdcdc">
<Variable name="tbbxcolor1" description="Tab box Color 1" type="color" default="#ffffff" value="#ffffff">
<Variable name="tbbxcolor2" description="Tab box Color 2" type="color" default="#5588aa" value="#5588aa">
*/

7. Langkah terakhir, carilah kode <div id='sidebar-wrapper'> dan paste kode di bawah ini tepat di bawah kode <div id='sidebar-wrapper'>.

<div style='clear:both;'/>
<div class='tabber'>
<b:section class='tabbertab' id='tab1' maxwidgets='1'/>
<b:section class='tabbertab' id='tab2' maxwidgets='1'/>
<b:section class='tabbertab' id='tab3' maxwidgets='1'/>
<b:section class='tabbertab' id='tab4' maxwidgets='1'/>
</div>

8. Untuk melihat hasilnya, silahkan buka Layout. Hasilnya akan seperti gambar di bawah ini.

Widget terdiri dari mulai dari Tab-1 dan berakhir pada Tab-4. Untuk menambahkan gadget / widget ke setiap tab cukup klik link Add a Gadget dan mulai menambahkan apa pun yang Anda inginkan.

Panduan Kostumisasi Widget Multi Tab

Di sini kita akan mendiskusikan bagaimana cara merubah tampilan dan posisi dari widget multi tab.

Merubah Posisi

Jika Anda ingin menggeser widget ini ke bagian bawah sidebar Anda, maka lakukan langkah ini.

• Paste kode pada langkah 7 tepat di atas kode </div> dan bukan di bawah kode <div id='sidebar-wrapper'>. Lihat gambar ini untuk lebih jelasnya.

• Simpan template Anda dan masuk ke Layout untuk melihat perubahan.

Merubah Tampilan

• Warna background dari widget dapat diganti dengan mengedit kode pada langkah 6. Saya tulis kembali kodenya beserta deskripsinya.

<Variable name="tbbxbgcolor" description="Tab box Background Color" type="color" default="#f8f8f8" value="#f8f8f8">

<Variable name="tbbxbrcolor" description="Tab box Border Color" type="color" default="#dcdcdc" value="#dcdcdc">

<Variable name="tbbxcolor1" description="Tab box Color 1" type="color" default="#ffffff" value="#ffffff">

<Variable name="tbbxcolor2" description="Tab box Color 2" type="color" default="#289728" value="#289728">

Kode ini memiliki empat bagian utama diantaranya bagian tbbxcolor1: dan tbbxcolor2: adalah yang paling penting. Saya akan menjelaskan masing-masing secara rinci.

Bagian Penting

tbbxcolor1: Ini adalah bagian penting. Ini mendefinisikan warna latar belakang dari widget multi tab ini dan juga warna pada saat ditunjuk oleh mouse. Warna standar adalah putih #ffffff

tbbxcolor2: Ini mengacu pada warna latar belakang tab dan teks di dalam tab. warna standar hijau. Anda dapat mengubah nilai #289728 ke nilai warna yang berbeda dengan menggunakan kode warna generator milik kami agar lebih mudah.

Gantilah bagian ini jika Anda menginginkannya

tbbxbgcolor: Bagian ini mengacu pada warna latar belakang kotak tab. Secara default warnanya abu-abu. Jika Anda ingin mengubahnya ke warna yang berbeda hanya mengubah nilai warna heksadesimal #f8f8f8 dengan warna yang berbeda dengan menggunakan Bagan Warna kami.

tbbxbrcolor: ini mengacu pada warna garis perbatasan di seluruh tab dan kotak.

Yaps, selesai!

Saya harap widget ini akan banyak memberikan sentuhan yang bersih dan rapi untuk blog Anda. Setiap pertanyaan kami usahakan untuk menjawabnya. :)