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/AVvXsEjV_uGKtvxxbrretk2PrpDHtnLVLdtZkoeYAAOWAAXtW8jNt0UCnR7vJziLKWd2Z_0B50CWkyZMluYDfL90bXx3BsVh7h-hDmMFJ5SHAEOh9l5f95ZLxaLt8sKgBxmlTIcVGloFteLEx58/s800/menu6.gif); padding: 8px 0 0 20px; } #menu6 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV_uGKtvxxbrretk2PrpDHtnLVLdtZkoeYAAOWAAXtW8jNt0UCnR7vJziLKWd2Z_0B50CWkyZMluYDfL90bXx3BsVh7h-hDmMFJ5SHAEOh9l5f95ZLxaLt8sKgBxmlTIcVGloFteLEx58/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/AVvXsEgPzO_T6d9VXOM4Gm3vphN9NwMz7ixAR8DCidGCoy4SDujiwP8VExBEUse8lXh5EAVlTnU9SQKcneKB9NbBO1yDJoGBDDdEjNT70mzlQ_WidiqMfW5EA7Qs3ti5T9C4LIdrpmfX2X9EEVU/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/AVvXsEgPzO_T6d9VXOM4Gm3vphN9NwMz7ixAR8DCidGCoy4SDujiwP8VExBEUse8lXh5EAVlTnU9SQKcneKB9NbBO1yDJoGBDDdEjNT70mzlQ_WidiqMfW5EA7Qs3ti5T9C4LIdrpmfX2X9EEVU/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/AVvXsEg2xlXlzgAMddYLUUez7genHwZkoZt2ZEYw0RDNjOwjAhw6X010oOvPgahbwpBwUCi_Dz3P18vxUkYOSazJNYwmdYnGTfiqYo1uIypOG30nSwd6HsLJZCp7rsjJZ8OIn65Q0ysCiO13dy8/s800/menu9.gif); padding: 8px 0 0 35px; } #menu9 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2xlXlzgAMddYLUUez7genHwZkoZt2ZEYw0RDNjOwjAhw6X010oOvPgahbwpBwUCi_Dz3P18vxUkYOSazJNYwmdYnGTfiqYo1uIypOG30nSwd6HsLJZCp7rsjJZ8OIn65Q0ysCiO13dy8/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/AVvXsEgpHmC8vpHjx7J2QjUIJpQy6UAu0PGE4ZqbC-_dsZyvsuyyAC46O_BKSscCX7y6m33QQNrD4tOgyB5Y47J9oBMmey56DEBFsS74nrmKoyayaLLWRzmW6odvyiI4Er3d_jZYlOqI-u7Z8qg/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/AVvXsEgpHmC8vpHjx7J2QjUIJpQy6UAu0PGE4ZqbC-_dsZyvsuyyAC46O_BKSscCX7y6m33QQNrD4tOgyB5Y47J9oBMmey56DEBFsS74nrmKoyayaLLWRzmW6odvyiI4Er3d_jZYlOqI-u7Z8qg/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/AVvXsEgWMLtF6DOVOjMq94joJtZM_FZaoZuvcf1XcsKolBg-iWhzj3IEjXetmX3EF-Jhp532vzjv_pxuSg61CBeyCU8negl_siavNleveYczV12KkOSgyvDObeLr3GMqP7jRmH5uo7xD4PR0MgY/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/AVvXsEgWMLtF6DOVOjMq94joJtZM_FZaoZuvcf1XcsKolBg-iWhzj3IEjXetmX3EF-Jhp532vzjv_pxuSg61CBeyCU8negl_siavNleveYczV12KkOSgyvDObeLr3GMqP7jRmH5uo7xD4PR0MgY/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/AVvXsEiRXD6gse2GyUN7fVd1YMClmfbRBlMk2QaS3rWxRvUOK-h3eDBwbgHH2FMZEpHZNtVWOwKNrcHjcxEv5OOTmJltRKbBMltKtioInnMc9Un9n5oAPrmGoG0aiWZUGLHjpJD6begDDMbg8t4/s800/menu7.gif); padding: 8px 0 0 30px; } #menu7 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRXD6gse2GyUN7fVd1YMClmfbRBlMk2QaS3rWxRvUOK-h3eDBwbgHH2FMZEpHZNtVWOwKNrcHjcxEv5OOTmJltRKbBMltKtioInnMc9Un9n5oAPrmGoG0aiWZUGLHjpJD6begDDMbg8t4/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/AVvXsEjeMMzmdkyiAsrpjOjLD93TmLiKTBh7ZbRjGeq4V8j8udnMGVNlz7Y3-uV6bKfZj03v2I8SlC5_ILxUH7AHSxEZ3FY7Aihi9OKKYPucg1-PBhyphenhyphen4HdOtk_nz6RaZ-8Ki4vxyoj-gQCYJmtw/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/AVvXsEjeMMzmdkyiAsrpjOjLD93TmLiKTBh7ZbRjGeq4V8j8udnMGVNlz7Y3-uV6bKfZj03v2I8SlC5_ILxUH7AHSxEZ3FY7Aihi9OKKYPucg1-PBhyphenhyphen4HdOtk_nz6RaZ-8Ki4vxyoj-gQCYJmtw/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/AVvXsEjeMMzmdkyiAsrpjOjLD93TmLiKTBh7ZbRjGeq4V8j8udnMGVNlz7Y3-uV6bKfZj03v2I8SlC5_ILxUH7AHSxEZ3FY7Aihi9OKKYPucg1-PBhyphenhyphen4HdOtk_nz6RaZ-8Ki4vxyoj-gQCYJmtw/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/AVvXsEhqYSkCL3XtlLj8uiSFx4ItVZJT6W_EA7h6brABTYx2jhaPFzqYxJ6aFcniw0BwIw8Q_E1q2UKLWuL0fjmVQuX5mvsqJMAmymFoktNMx-M8ISAAFAliZu0FOSO1GpRqChi8FqIGjzDpAms/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/AVvXsEhqYSkCL3XtlLj8uiSFx4ItVZJT6W_EA7h6brABTYx2jhaPFzqYxJ6aFcniw0BwIw8Q_E1q2UKLWuL0fjmVQuX5mvsqJMAmymFoktNMx-M8ISAAFAliZu0FOSO1GpRqChi8FqIGjzDpAms/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/AVvXsEhqYSkCL3XtlLj8uiSFx4ItVZJT6W_EA7h6brABTYx2jhaPFzqYxJ6aFcniw0BwIw8Q_E1q2UKLWuL0fjmVQuX5mvsqJMAmymFoktNMx-M8ISAAFAliZu0FOSO1GpRqChi8FqIGjzDpAms/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/AVvXsEh43En8ZVQndjSQAVIgIH8XEQ4NRcMIwxonNfVaFiO-pHbu6PnQmwjbxqbVlQDmJ8Vf5HYScpAIFGOY4MWBqsTgQd-ZDhx8BbxK7LxYfjhcZznnG7oOPrT6NYrFl8eewQF8A7TsP2wJs-E/s800/menu12.gif); padding: 10px 0 0 35px; } #menu12 li a:hover { color: #000; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh43En8ZVQndjSQAVIgIH8XEQ4NRcMIwxonNfVaFiO-pHbu6PnQmwjbxqbVlQDmJ8Vf5HYScpAIFGOY4MWBqsTgQd-ZDhx8BbxK7LxYfjhcZznnG7oOPrT6NYrFl8eewQF8A7TsP2wJs-E/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/AVvXsEhK9oZWhyphenhyphenqvO5SXrNHJMhebKbzIHX68VJ1-69JSrxgBcakCrbjdOOQxtQBPr7VNA5aJwGh4Vf2OdR1gl9lYSqlSrTWKEgUeG9dKc0IFUWNuXKplrPD2mEJ7C1baNC1MPqQkL18LYKuhfb4/s800/menu13.gif); padding: 8px 0 0 10px; } #menu13 li a:hover { color: #C7377D; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK9oZWhyphenhyphenqvO5SXrNHJMhebKbzIHX68VJ1-69JSrxgBcakCrbjdOOQxtQBPr7VNA5aJwGh4Vf2OdR1gl9lYSqlSrTWKEgUeG9dKc0IFUWNuXKplrPD2mEJ7C1baNC1MPqQkL18LYKuhfb4/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/AVvXsEgAXLFfVl99n28B5X9Bo28UYDKH-ot2_7gcvPbd0pvdL5GW7t-zCB0u2HlS_wGA-YxAuITnIXpFOp6S02_PlV2sfJO3nUsAd8ACsJJ3Jkd07DW774nfhdYhs7dhz9PUH0lWZyam6RdJE3c/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/AVvXsEgAXLFfVl99n28B5X9Bo28UYDKH-ot2_7gcvPbd0pvdL5GW7t-zCB0u2HlS_wGA-YxAuITnIXpFOp6S02_PlV2sfJO3nUsAd8ACsJJ3Jkd07DW774nfhdYhs7dhz9PUH0lWZyam6RdJE3c/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/AVvXsEgAXLFfVl99n28B5X9Bo28UYDKH-ot2_7gcvPbd0pvdL5GW7t-zCB0u2HlS_wGA-YxAuITnIXpFOp6S02_PlV2sfJO3nUsAd8ACsJJ3Jkd07DW774nfhdYhs7dhz9PUH0lWZyam6RdJE3c/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/AVvXsEjjQNbE3Yv0JOM8c2UwkT7wBhIV5e888juyrlKk7VaOlJFXeIHh6fZdBu3Y1IXuqlULTe7hqMN8jpRW6g0OVdcrjsGR6wFhcKR09x6PVAGOsSXFGxavLO_4bY_arCogwruoTZzcvbejFZY/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/AVvXsEjjQNbE3Yv0JOM8c2UwkT7wBhIV5e888juyrlKk7VaOlJFXeIHh6fZdBu3Y1IXuqlULTe7hqMN8jpRW6g0OVdcrjsGR6wFhcKR09x6PVAGOsSXFGxavLO_4bY_arCogwruoTZzcvbejFZY/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/AVvXsEjjQNbE3Yv0JOM8c2UwkT7wBhIV5e888juyrlKk7VaOlJFXeIHh6fZdBu3Y1IXuqlULTe7hqMN8jpRW6g0OVdcrjsGR6wFhcKR09x6PVAGOsSXFGxavLO_4bY_arCogwruoTZzcvbejFZY/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/AVvXsEh-Qx32uWo7BxM12d3cFZ8Q853w58mUH6tfpXQidkWXz5xi1U3MTtdU3iBlq1wNfR5jeoJPjukUUmx4_hqDOAleHwwxMlTnWYmXvpgVkQY8rsskJ-cfx_RaNMaECDWr8Geydz526kN2kzA/s800/menu8.gif) ; padding: 8px 0 0 20px; } #menu8 li a:hover { color: #474739; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-Qx32uWo7BxM12d3cFZ8Q853w58mUH6tfpXQidkWXz5xi1U3MTtdU3iBlq1wNfR5jeoJPjukUUmx4_hqDOAleHwwxMlTnWYmXvpgVkQY8rsskJ-cfx_RaNMaECDWr8Geydz526kN2kzA/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/AVvXsEgzbENIVpsONvl2EwOpia7aEADNKH8CMV0VrGBkPzajQkZdmSz-q84IkrAySOlPxOhvZD8W_ViGdUplQ130krxpULrJOwdU7-yVfDToNsCUZ1RQiPI5aYqCY48g83oMLj0dDtN4zHWuxWE/s800/menu1.gif); padding: 8px 0 0 10px; } #menu1 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzbENIVpsONvl2EwOpia7aEADNKH8CMV0VrGBkPzajQkZdmSz-q84IkrAySOlPxOhvZD8W_ViGdUplQ130krxpULrJOwdU7-yVfDToNsCUZ1RQiPI5aYqCY48g83oMLj0dDtN4zHWuxWE/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/AVvXsEjpLB50TUiXQo128LEVKGlauWQajuiHav28C3uD9ulMiMwgfJ9KnfOI8s3mO5Ijo53vyIEDzSAULSEEahzLtHGQa8ymX68e1BUnqFtUbotc6BPaeId3ZqjTCcokLJ7XKNhW12ClyCvwmkk/s800/menu3.gif); padding: 8px 0 0 10px; } #menu3 li a:hover { color: #627EB7; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpLB50TUiXQo128LEVKGlauWQajuiHav28C3uD9ulMiMwgfJ9KnfOI8s3mO5Ijo53vyIEDzSAULSEEahzLtHGQa8ymX68e1BUnqFtUbotc6BPaeId3ZqjTCcokLJ7XKNhW12ClyCvwmkk/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/AVvXsEiUUJsW5eglBDNVtaVl-AQDkBKYTJHhbjZ8mjiPMKUdWUB4hgifl-LIiMr73Du6bckAkA8mmLUCKPs21tuQYsbxxOzQYVr5LmYPL2YdI0x0I93ZyV4B8_Yusjk2IKd89MiZG6jO1jdn23g/s400/menu11.gif); padding: 8px 0 0 25px; } #menu11 li a:hover { color: #889944; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUUJsW5eglBDNVtaVl-AQDkBKYTJHhbjZ8mjiPMKUdWUB4hgifl-LIiMr73Du6bckAkA8mmLUCKPs21tuQYsbxxOzQYVr5LmYPL2YdI0x0I93ZyV4B8_Yusjk2IKd89MiZG6jO1jdn23g/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/AVvXsEiMUV0J2GVPR_ZFep7xMdmG9hhixJgc8I0PILv8s8__98Qw-qJWEph1Q5aNFInKPjv18fRc3B5HRPzkOZaCMTZcnTKuqax2WJM0PolRtkggwUZD6pRpAVa2dQhrsPG7hy5EKa-DzKYe_GQ/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/AVvXsEiMUV0J2GVPR_ZFep7xMdmG9hhixJgc8I0PILv8s8__98Qw-qJWEph1Q5aNFInKPjv18fRc3B5HRPzkOZaCMTZcnTKuqax2WJM0PolRtkggwUZD6pRpAVa2dQhrsPG7hy5EKa-DzKYe_GQ/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/AVvXsEiMUV0J2GVPR_ZFep7xMdmG9hhixJgc8I0PILv8s8__98Qw-qJWEph1Q5aNFInKPjv18fRc3B5HRPzkOZaCMTZcnTKuqax2WJM0PolRtkggwUZD6pRpAVa2dQhrsPG7hy5EKa-DzKYe_GQ/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/AVvXsEh2Q-7FpZJimaOGABPsHeDr6P1Jdy4dAsoYGtvs3Ibq9uv_8bzE9GATaYx4icPqXORlgUWxmbZl54xyvY2BwA6nf7UU9KrM8E4fRNzUy7qSVyPjEXt0xLal2MeV-HBBDFpqVcGmOTupjJo/s800/menu2.gif); padding: 8px 0 0 30px; } #menu2 li a:hover { color: #3688BA; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2Q-7FpZJimaOGABPsHeDr6P1Jdy4dAsoYGtvs3Ibq9uv_8bzE9GATaYx4icPqXORlgUWxmbZl54xyvY2BwA6nf7UU9KrM8E4fRNzUy7qSVyPjEXt0xLal2MeV-HBBDFpqVcGmOTupjJo/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/AVvXsEjbK4_B3L2dHXoMtlHGMJA-K6Yiqw9TWMnezSDF_3Q5obg4OYFRKlF0VxVFVKXFSeAb4fKHY_Y15BohyphenhyphengMGv0ccktHr2X9wbGCS03spXUjYXugpCxfCWFsyzrIgPQKmfAoLCh_zauW0pTk/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/AVvXsEjbK4_B3L2dHXoMtlHGMJA-K6Yiqw9TWMnezSDF_3Q5obg4OYFRKlF0VxVFVKXFSeAb4fKHY_Y15BohyphenhyphengMGv0ccktHr2X9wbGCS03spXUjYXugpCxfCWFsyzrIgPQKmfAoLCh_zauW0pTk/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/AVvXsEjbK4_B3L2dHXoMtlHGMJA-K6Yiqw9TWMnezSDF_3Q5obg4OYFRKlF0VxVFVKXFSeAb4fKHY_Y15BohyphenhyphengMGv0ccktHr2X9wbGCS03spXUjYXugpCxfCWFsyzrIgPQKmfAoLCh_zauW0pTk/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/AVvXsEhitC00mwFFOQkMhA3Nt32WkagFatK03tMsJKrYubDzX_LTjkL-_yKxvwxNvZU_pYjd5Soy4vJpFGjwkcZCSTy-OLYBTxfJCuE_xs6N7MGnXh3wRwRWMgfSkfnwBdPHTZZYGADy6bMx47o/s800/menu5.gif); padding: 8px 0 0 10px; } #menu5 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhitC00mwFFOQkMhA3Nt32WkagFatK03tMsJKrYubDzX_LTjkL-_yKxvwxNvZU_pYjd5Soy4vJpFGjwkcZCSTy-OLYBTxfJCuE_xs6N7MGnXh3wRwRWMgfSkfnwBdPHTZZYGADy6bMx47o/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/AVvXsEg57zQ-WiJx6Wt-09tVbZwSeT8zPWj_rfPjqrcVpO-8ERvHscYka_aFnVIsjRXzCCssQI-4aGySAlEu4TRS46QlHe99_xL4AwKMvm354RuPH6kV6zdwD2bd7L5VnUzGARNeMnpdNBSwI68/s800/menu4.gif); padding: 8px 0 0 10px; } #menu4 li a:hover { color: #FFF; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg57zQ-WiJx6Wt-09tVbZwSeT8zPWj_rfPjqrcVpO-8ERvHscYka_aFnVIsjRXzCCssQI-4aGySAlEu4TRS46QlHe99_xL4AwKMvm354RuPH6kV6zdwD2bd7L5VnUzGARNeMnpdNBSwI68/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/AVvXsEjfrplGIh8TK_wJ4aloeafQlm9KsakmIIarRuM90Yz7tCJIJ6dx4tFbCTubE-ILTRURqTnzWgYQzl8JetGNJ-J0B_CUwoHs3bKUAhbIz8XG0g9e_NUlsJUdZ0F0BT0jQWJo5qkb4z0BnXo/s800/menu10.gif); padding: 8px 0 0 10px; } #menu10 li a:hover { color: #FF9834; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfrplGIh8TK_wJ4aloeafQlm9KsakmIIarRuM90Yz7tCJIJ6dx4tFbCTubE-ILTRURqTnzWgYQzl8JetGNJ-J0B_CUwoHs3bKUAhbIz8XG0g9e_NUlsJUdZ0F0BT0jQWJo5qkb4z0BnXo/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 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/AVvXsEiXuTmTeUvTugLhWDwKO6bQa7BCTUMA-dJvf-uwS5zOwCLkTH6-3uw-_jjPjqBQdrumbY8pyusQ1pC0IqX3V-KYAbdWFGmxeNkNUttRZvjzzGzGswLi3FY9Ma3khXGC35lhjKuqasRUBaLT/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 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. :)

Cara Membuat Search Box Dari Google Custom Search Engine

Ketika datang untuk menjelajah internet atau website, pasti tidak ada yang bisa mengalahkan teknik pencarian Google. Template Blogger yang ditemukan dalam berbagai desain dan warna sering memiliki kotak pencarian di dalamnya, yang saya yakin Anda mungkin telah mengamati bahwa dia tidak mampu menampilkan hasil yang relevan. Kotak pencarian ini secara default terbatas pada kemampuan mereka mencari setiap kata dari blog Anda. Solusi terbaik adalah dengan menggunakan Google Custom Search Engine (CSE) yang sangat efisien dalam menggali data yang paling penting dari blog Anda dan menampilkannya kepada pengunjung. Hal ini meningkatkan jumlah pageviews dan tayangan halaman blog Anda karena pembaca terus membaca dan membaca. Selanjutnya Anda dapat dengan mudah mengintegrasikan Google AdSense untuk Iklan Anda dengan kotak Google Custom Search, yang lagi-lagi meningkatkan pendapatan blog Anda untuk setiap klik yang dilakukan pada hasil pencarian. Jadi mari kita membuat dan menginstal sebuah kotak Pencarian Google yang indah untuk blog Anda.

Bagaimana Cara Membuat Custom Google Search Engine?

1. Masuk ke link Google CSE terlebih dahulu

2. Pada halaman yang ditampilkan klik kotak Create a custom search engine.

3. Isilah form seperti screenshot di bawah ini

4. Setelah selesai Klik tombol Create untuk masuk ke langkah berikutnya.

5. Klik Edit untuk melakukan pensetingan.

6. Pada kolom Control panel, pilih look and feel (Anda pilih layout dan tema yang Anda suka)

• Jika Anda ingin menambahkan kotak pencarian di bawah postingan, pilih saja Full-width
• Atau jika Anda ingin menampilkan kotak dan dan hasil pencarian di sidebar, pilih saja Compact
• Dan bila Anda ingin meletakkan kotak pencarian di sidebar dan menampilkan hasil pencarian di atas judul postingan, pilih saja Two Column. (Saya gunakan contoh ini)

7. Anda juga dapat melakukan setingan lain dari kolom Control panel.
8. Setelah semua selesai, klik "save & get code", maka Anda akan mendapatkan 2 kode seperti di bawah ini.

Catatan: Jangan gunakan kode ini untuk blog Anda. Gunakanlah kode yang Anda dapatkan sendiri!

<!-- Put the following javascript before the closing </head> tag. -->
<script>
  (function() {
    var cx = '016572922667380911963:ljrfouozos8';
    var gcse = document.createElement('script'); gcse.type = 'text/javascript'; gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//www.google.com/cse/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(gcse, s);
  })();
</script>
<!-- Place this tag where you want the search box to render -->
<gcse:searchbox></gcse:searchbox>

<!-- Place this tag where you want the search results to render -->
<gcse:searchresults></gcse:searchresults>

Cara Memasang Kode di Atas!

• Masuk ke Blogger > Template
• Backup template Anda bila perlu
• Klik Edit HTML
• Letakkan kode yang berwarna "Merah" di atas kode </head> (Gunakan Ctrl + F untuk memudahkan pencarian kode)
• Simpan template Anda
• Lalu masuk pada Layout
• Klik Add a Gadget > Pilih HTML/JavaScript > Masukkan kode berwarna Hijau di situ.
• Klik Save.
• Klik lagi Add a Gadget > Pilih HTML/JavaScript > Masukkan kode berwarna Biru di situ.
• Klik Save.
• Kemudian Drag & Drop gadget yang diciptakan dari kode berwarna biru di atas postingan Anda.
• Lihat gambar di bawah ini agar lebih jelas.

Bagi Anda yang menggunakan iklan AdSense, mengubah kotak pencarian default Anda ke Kotak Pencarian Google Custom Search Engine merupakan langkah penting yang harus Anda ambil sedini mungkin. Anda akan melihat perbedaan dalam analisis Anda minggu depan.

Semoga Anda menyukai postingan ini.. :)