Cukup ekstra kerja keras nampaknya bagi Anda yang baru seperti saya, tapi akan saya coba beritahukan cara-caranya agar lebih mempermudah proses pembelajaran untuk tips tersebut yang telah berhasil saya lakukan.
Langsung saja untuk langkah-langkahnya di bawah ini.
1. Masuk blogger.com
2. Pilih Rancangan ->> Edit HTML, seperti biasa download terlebih dahulu template blog Anda dan centang “Expand Widget Templates”, sebelum melakukan pengeditan.
3. Cari kode tekan (Ctrl+F) untuk mencari kode seperti ini : ]]>
jika sudah di dapat copy faste kode di bawah ini tepat diatas kode ]]>

#menu{margin:0 auto; padding:0; height:30px; width:930px; display:block; background:url(http://i36.tinypic.com/28lgntl.jpg) repeat-x;
opacity: 0.99; filter: alpha(opacity: 98);}
#menu-cari{float:right; display:inline; padding:3px 5px 0 0;}
#menu ul{padding:0; margin:0;}
#menu ul li{padding:0; margin:0; list-style:none; display:block; float:left;}
#menu ul li a{float:left; padding-left:15px; display:block; color:#ffffff; text-decoration:none; font:12px Verdana, Arial, Helvetica, sans-serif; background:url(http://i36.tinypic.com/28lgntl.jpg) 0px -30px no-repeat; line-height:30px; padding-right:15px;}

#menu ul li a:hover{background-position:0px -60px; color:#ffffff;}
#menu ul li a.active, .menu li a.active:hover{background-position:0px -90px; color:#ffffff;}
#menu ul li ul {display:none;}
#menu ul li:hover ul, #menu ul li.hover ul {position: absolute; max-width:175px;
display: block; background:#000000; margin:2px; clear:left; margin-top:30px;}
#menu ul li:hover ul li, #menu ul li.hover ul li {width:175px; float: left; background: display: block;}
#menu ul li:hover ul li a, #menu ul li.hover ul li a{border-top:1px dotted #fff; background:black; width:175px;}
#menu ul li:hover ul li a:hover, #menu ul li.hover ul li a:hover{background:#7C01A4;}
.status-msg-wrap{
display:none;
}

#chat{position:fixed; top:25px; z-index:+1000}
* html #chat{position:relative}
.chat-click{height:100px; width:30px; float:left; cursor:pointer; background:url(http://i42.tinypic.com/vhb3vc.jpg) no-repeat;}
.chatbox{float:left; border:2px solid #1f54bc; background:#f0f8ff; padding:10px}
.chatbox a {text-decoration: none;}
#box-main-container {
clear:both;
}

.box-column {
padding:0px 10px 10px 10px;
border:1px dotted $bordercolor;
}

#footer-column-divide {
clear:both;
}

.footer-column {
padding: 10px;
}

4. Selanjutnya cari kode (Ctrl+F) untuk mecari kode

tambahkan kode di bawah ini tepat di atas kode tersebut.


5. Rubah atau tambahkan link yang berindentitaskan berbagi kreativitas dengan blog Anda sesuai dengan kebutuhan Artikel Blog Anda.
6. Simpan template.

Cacatan: “Untuk link gambar tombol diatas kode no urut 3 yang bercetakkan tebal rubah sesuai gambar tombol yang sesuai dengan keinginan Anda, karena link gambar tombol diatas hanya contoh dan sewaktu-waktu tidak akan berfungsi lagi. Oleh karenanya untuk menghindari hal tersebut gunakan gambar sendiri”

Semoga dapat membantu Anda untuk lebih mempermudah pengunjung ataupun pembaca yang akses blog Anda, salam.

sumber : berbagi-kreatifitas.blogspot.com