Cara Membuat Menu Tabview Accordion Di Blog

Cara Membuat Menu Tabview Accordion Di Blogspot
Cara Membuat Menu Tabview Accordion Di Blogspot
Widget ini hampir mirip dengan widget tab view atau tabber, salah satu fungsi dari widget accordion menu selain memperingkas tampilan blog, juga dapat memperindah blog, seperti juga fungsi tab view, jadi blog sobat akan kelihatan lebih ringkas dan rapi dan menarik. Anda bisa letakkan menu accordion ini pada sidebar blog atau dimanapun anda suka. Bagi sobat-sobat blogger yang mau mencoba, berikut ini kode scriptnya dan tutorial singkatnya :
  • Login ke Blogger anda.
  • Masuk ke Layout, Add A Gadget pilih HTML/Javascript.
  • Kemudian tambah widget dan masukkan kode di bawah ini ke kolom yg tersedia.

  • Terakhir simpan dan lihat hasil menu accordion pasti akan lebih menarik dari sebelumnya.
Untuk "Title 1 sampai dengan 5" isi sesuai dengan nama script atau link yang sobat masukkan. Misalnya di title 1 sobat ingin membuat Buku Tamu, maka title 1 di ganti dengan nama Buku Tamu atau c-box, dan di isi konten 1 sobat masukkan kode script dari c-box atau buku tamu tersebut, dan seterusnya untuk title dan isi konten berikutnya terserah sobat mau memasukkan script atau link apa di dalamnya, apakah recent post, coment post atau link iklan semua terserah selera sobat blogger. Untuk warna dan desain background sobat juga bisa mengeditnya sesaui selera sobat.
Menu accordion diatas untuk blog yang mempunyai background warna terang. Bagi sobat yang mempunyai blog warna gelap atau hitam, tinggal diganti kode css-nya. Lebih lengkapnya seperti kode di bawah ini :
          
semoga bermanfaat. Terima kasih http://www.maskolis.com atas kode scriptnya.

Cara Membuat Kotak Komentar Facebook dan Blog Berdampingan


Mat malam sobat blogger pada kesempatan kali ini saya akan membagikan Tutorial blog Cara Membuat Kotak Komentar Facebook dan Blog Berdampingan, mungkin sobat sudah pada tau Tutorial Blog yang satu ini, sudah banyak juga yang memposkannya tapi tak ada salahnya kan saya berbagi lagi untuk mempermudah sobat blogger yang mungkin masih baru seperti saya ini untuk menemukannya
Screen Shoot :
Ingin memasang Kotak Komentar Facebook dan Blog Keren ini
Silahkan ikuti  langkah" di bawah ini :
1. Login ke akun Bloger Sobat
2. Masuk ke Bagian Template
3. Klik "Edit HTML"
4. Centang "Expand Template Widget"
5. Cari Kode ]]></b:skin>
6. Letakan kode di bawah ini tepat di Atas kode ]]></b:skin> 
.comments-page { background-color: #f2f2f2;}
    #blogger-comments-page { padding: 0px 5px; display: none;}
    .comments-tab { float: left; padding: 5px; margin-right: 3px;
    cursor: pointer; background-color: #f2f2f2;}
    .comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
    .comments-tab:hover { background-color: #eeeeee;}
    .inactive-select-tab { background-color: #d1d1d1;}

Catatan :  

  • Silahkan Hapus kode yang berwarna Merah jika ingin membuat kotak Komentar Facebook menjadi Transparan.
7. Kemudian cari kode </head>
8. Lalu letakan Kode di bawah ini tepat di Atas kode </head>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
    <script src='http://code.jquery.com/jquery-latest.js'/>
    <meta content='ID FP Anda disini' property='fb:admins'/>
    <script type='text/javascript'>
    function commentToggle(selectTab) {
    $(".comments-tab").addClass("inactive-select-tab");
    $(selectTab).removeClass("inactive-select-tab");
    $(".comments-page").hide();
    $(selectTab + "-page").show();
    }
    </script>
Catatan :  

  • Silahkan Ganti Kode berwarna Merah dengan ID FP(Fans Page) anda..  Contohnya https://www.facebook.com/1000r2blog.com atau http://facebook.com/301619369919206
9. Silahkan cari kode <div class='comments' id='comments'>
10. Umumnya kode <div class='comments' id='comments'> ada 2, jadi masukan kode di bawah ini tepat di Bawah  kedua kode tersebut.
  <div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'>
    <img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
    <fb:comments-count expr:href='data:post.url'/> Comments
    </div>
    <div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'>
    <img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
    </div><div class='clear'/>
    </div>
    <div class='comments-page' id='fb-comments-page'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='fb-root'/>
    <fb:comments expr:href='data:post.url' num_posts='3' width='400'/>
    </b:if>
    </div>
    <div class='comments comments-page' id='blogger-comments-page'>

Catatan :  

  • Silahkan anda Hapus kode berwarna merah tersebut jika kode di bawah sama, jika tidak y tidak usah. Untuk yang nomor 3 adalah Jumlah komentar yang akan muncul. Untuk nomor 400 adalah Lebar kotak Komentar, Silahkan di ganti sendiri..
Semoga dapat bermanfaat....

Cara Membuat Profil Admin Dibawah Postingan Blog

nah kali ini saya akan mencoba berbagi tips tentang Cara Membuat Profil Admin Dibawah Postingan Blog

Apakah sobat pernah melihat kotak kecil berisi keterangan dan pesan penulis disertai judul posting dan tanggal terbit yang biasa ditampilkan di bawah posting, ternyata cara membuatnya cukup mudah lho, untuk contohnya sobat bisa lihat di blog ini seperti terlihat dibawah ini.




Nah, buat sobat yang ingin mencoba menampilkan profil atau biografi singkat tentang diri sobat, maka sobat bisa mengikuti langkah berikut ini.

Pertama-tama, masuklah ke halaman Design, pilih edit HTML template sobat, kemudian centang bagian Expand Template Widget agar seluruh elemen pembangun posting tampil.


Temukan kode ini:
<div class='post-footer'>

TIPS: Tekan CTRL + F lalu ketik class='post-footer' untuk mempermudah pencarian.

Salin kode ini, kemudian letakkan tepat di atas kode <div class='post-footer'> :
<!-- Profil Admin -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='admin-penulis'>
<h4>Ditulis Oleh : <a expr:href='data:blog.homepageUrl'><b><data:post.author/></b></a></h4>
<div class='kontainer'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit7z2ef3Ehvdy1Y069n-reIyw_2TtYiGsG4xlRuLy8CyEVeJm4JsDlymqdAnwBY2hDRWWXuGg8zML-gbFvZ8gKKbdUtGVwp5sQENAO_GCT6WLOEqZsoSQBd4JwMFx6HBG2JTzHhZ_hHm5L/s1600/favicon.png'/>
Artikel <a expr:href='data:post.url'><i><data:post.title/></i></a> ini ditulis oleh <b><data:post.author/></b> pada hari <i><data:post.dateHeader/></i>. Terimakasih atas kunjungan Anda pada blog ini. Kritik dan saran tentang <b><data:post.title/></b> dapat Anda sampaikan melalui kotak komentar dibawah ini.
<p><span style='float:right;font:italic 10px Arial, Sans-Serif;'><a href='http://ysf-crs.blogspot.com/2013/02/cara-membuat-profil-admin-dibawah.html' target='_blank'>:: Get this widget ! ::</a></span></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>
<!-- Profil Admin -->
Silahkan sobat ganti kode yang berwarna merah dengan image profil sobat.

Kemudian cari lagi kode ]]></b:skin> pada template sobat. Kemudian copy kode CSS dibawah ini dan paste tepat diatas kode ]]></b:skin>. Jika gagal sobat bisa juga meletakkan kode CSS ini tepat dibawah kode <data:post.body/>.
.admin-penulis {
   display:block;
   width:auto;
   background:#defdef;
   padding:0;
   margin:30px 0 10px 0;
   font:normal 12px Arial, Sans-Serif;
   color:#222;
   border:2px solid #fff;
   box-shadow:0 1px 3px #000;
   -moz-box-shadow:0 1px 3px #000;
   -webkit-box-shadow:0 1px 3px #000;
   }

.admin-penulis .kontainer {
   padding:5px;
   }

.admin-penulis h4 {
   background:#699019;
   border:none;
   border-bottom:1px solid #699019;
   color:#fff;
   text-transform:normal;
   text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
   font:bold 12px Arial,Sans-Serif;
   padding:5px 10px;
   margin:0 0 0 0;
   display:block;
   }

.admin-penulis h4 a {
   color:#FEEA83;
   }

.admin-penulis img {
   width:70px;
   height:70px;
   margin:0 10px 0 0;
   float:left;
   border:1px solid #954B02;
   padding:2px;
   background:#ffffff;
   box-shadow:none;
   -moz-box-shadow:none;
   -webkit-box-shadow:none;
   }
Langkah terakhir Simpan template sobat. Untuk selanjutnya saya yakin sobat mempunyai kreasi sendiri untuk lebih mempercantik tampilan blognya, semoga tips singkat tentang Cara Membuat Profil Admin Dibawah Postingan Blog ini bermanfaat bagi para pembaca setia. Jika sobat berkenan, mohon jangan dihapus kredit link yang menuju ke tutorial ini. Terimakasih.

Sumber: Ysf-crs




Cara Pasang Widget Share Dibawah Postingan Keren Di Blog

cara pasang widget share di bawah postingan keren di blog ==> halo sobat kita ketemu lagi di blog yang sederhana ini, oke kali ini aku akan share nich tentang cara pasang widget share di bawah postingan keren di blog, kita tahu bahwa pada saat kita memiliki blog pasti kita menginginkan agar postingan kita dapat di baca dan blog kita dapat di kunjungi oleh semua orang dari seluruh dunia khususnya yang paling banyak sekarang ini dari situs jejaring social seperti facebook, twitter, dan lain-lain otomatis itu akan sangat menguntungkan bagi blog yang kita kelola, jangankan penduduk indonesia penduduk luar negeri pun dapat membaca dan mengunjungi blog kita dengan widget share di bawah postingan keren ini, widget share di bawah postingan blog ini dapat memudahkan para pengunjung untuk menshare postingan blog kita dan kita juga dapat menshare postingan blog kita sendiri dengan widget share di bawah postingan keren ini, selain untuk memperbanyak pengunjung, widget share dibawah postingan blog ini dapat membuat blog kita menjadi sangat terkenal di situs-situs jejaring social dan dengan adanya widget share di bawah postingan blog ini anda dapat mempererat hubungan silaturrahmi anda dengan para penghuni situs jejaring social di dunia dan berkunjung ke blog kesayangan anda, untuk screen shot widget share di bawah postingan di blognya di bawah ini:




bagaimana keren kan.....? oh iya hampir lupa, dengan widget share di bawah postingan keren di blog ini pengunjung juga dapat membookmark postingan ataupun blog anda, tidak hanya itu anda juga dapat mengirim postingan anda melalui email dan lain-lain jika anda menginginkanya ikuti tutorial berikut ini :


2. klik shareaholic for your website


3. klik learn more
3. kemudian disini anda bisa memilih tipe widget share yang anda sukai, atau klik next saja



4. kemudian pilih platform blog atau website anda dan klik "klik here to open blogger"


5. kemudian terakhir klik "add widget", dan selesai.......

semoga bermanfaat.....

Cara Memasang Widget Recent Comment Versi 2


1. Login ke blog kamu.
2. Pilih Rancangan.
3. Pilih Tata Letak > Add Gadget > HTML/JavaScript > Copy kode di bawah ini.

<div class="recent-comments">
<div id="recent-comjudul">Yang Berkomentar</div>
<script style=text/javascript src="http://helplogger.googlecode.com/svn/trunk/recent comments widget.js"></script><script style=text/javascript >var a_rc=5;var m_rc=false;var n_rc=true;var o_rc=0;</script><script src=http://victorkalalozt.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments ></script>
</div>
  • Kode yang berwarna biru itu adalah jumlah kata pada setiap komentar.
  • Kode yang berwarna merah adalah jumlah komentar terbaru yang ingin ditampilkan.
  • Kode yang berwarna orange adalah judul widget. 
  • Ganti kode yang berwarna ungu dengan URL blog Anda. 

4. Simpan. Sekarang kamu pilih menu EDIT HTML > cari kode </head> letakan kode di bawah ini tepat di atas kode </head>
<style type=text/css> .rcw-comments a {text-transform: capitalize;text-decoration:none;} .rcw-comments {border-bottom: 1px dotted; padding-top: 7px!important; padding-bottom: 7px!important;} #rcw-cr {font-family: Arial,Tahoma;font-size:9px;padding-top:7px;display:block;text-decoration:none;}
.recent-comments {width:300px;color:#000;font-size:12px Arial;border:1px solid #ccc;padding:0px;padding:3px;}
.recent-comments a {color:#333;font-weight:bold;text-decoration:none;}
.recent-comments a:hover {color:#ff6600;text-decoration:none;}
#recent-comjudul {color:#333;font-weight:bold;text-decoration:none;font:size:13px;background:#ccc;padding:3px;}
</style> 
5. Simpan dan lihat hasilnya.

Cara Memasang Popular Post Dengan Sembilan Warna Yang Berbeda

Widget - Popular Post sebuah widget yang bertujuan untuk menampilkan posting yang sering dilihat. Dan sekarang kita modifikasi widget popular post dengan sembilan macam warna yang berbeda-beda dari setiap posting.



1. Login ke blog kamu.
2. Pilih Edit HTML > Cari kode ]]></b:skin>
3. Setelah ketemu letakan kode di bawah ini tepat di atas kode nomor 2.
#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none} #PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;} #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px} #PopularPosts1 ul li:first-child:after, #PopularPosts1 ul li:first-child + li:after, #PopularPosts1 ul li:first-child + li + li:after, #PopularPosts1 ul li:first-child + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"} #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"} #PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"} #PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"} #PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%} #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"} #PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%} #PopularPosts1 ul li:first-child + li + li:after{content:"3"} #PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%} #PopularPosts1 ul li:first-child + li:after{content:"2"} #PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%} #PopularPosts1 ul li:first-child:after{content:"1"} #PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none} #PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}
4. Simpan, dan kembali ke menu Tata Letak > Pilih Add Gadget > Pilih Entri Populer/Popular posts.
Cuplikan gambar dan keterangan hilangkan tanda centangnya dan tampilkan minimal 9 post.
5. Simpan dan lihat hasilnya.

Cara Membuat Spinning Social Media Icon Dengan CSS3


Untuk membuat nya silahkan klik ini WIDGET GENERATOR (widget generator lateshack)

Nanti ada tiga macam jenis, kamu pilih salah satu saja.

Setelah itu Anda akan disuruh mengisi seperti di bawah ini

Contoh :

Facebook Username : VICTORKALALO
Twitter Username : victor_kalalo
Feedburner Username : victor_kalalo
Google + Id : 35679896377892892578

Cara Membuat Kotak Widget Subscribe Dengan Efek Hover


Untuk membuatnya sangat mudah Anda cukup menggunakan sebuah situs untuk membuat widget ini. Klik disini untuk membuat widget (Copyright @ MYBLOGGERTOOLS.ORG)
Nanti Anda disuruh masukin

Google+ ID : (Example : https://plus.google.com/11484989637824562510)
Facebook Username : (Example : http://www.facebook.com/VICTORKALALO)
Twitter Username : (Example : https://twitter.com/victor_kalalo)
Feedburner Username : (Example : http://feeds.feedburner.com/victor_kalalo)

Cara Memasang Widget Subscribe,Facebook Like Box,Twitter Follow,G+ Melayang

Widget Subscribe,Facebook Like Box,Twitter Follow,G+ Melayang - Kali ini saya akan membahas cara membuat Widget Subscribe,Facebook Like Box,Twitter Follow,G+ melayang dibagian kiri blog,saat kursor mendekati widget tersebut maka secara otomatis widget tersebut akan terbuka, dengan memasang widget tersebut kamu bisa menghemat tempat, dan juga akan menambah blog anda semakin menarik, baiklah jika mau tau cara membuat nya ikuti langkah-langkah di bawah ini



1. Log in ke Blog kamu.
2. Pilih Rancangan.
3. Pilih EDIT HTML lalu cari kode ]]></b:skin> setelah ketemu latakan kode dibawah ini tepat diatas kode ]]></b:skin> 
img, a { border: 0; } #on {visibility:visible;} #off {visibility:hidden;} #facebook_div {width:196px;height: 353px;overflow: hidden;} #twitter_div {width:246px;height: 353px;overflow: hidden;} #google_plus_div {width:152px;height: 97px;overflow: hidden;} #knfeedburner_div {width:300px;height: 97px;overflow: hidden;} #kakinetwork_div {width:300px;height: 97px;overflow: hidden;} /* right side style */ #facebook_right {z-index: 10005;border:2px solid #3c95d9;background-color: #fff;width:196px;height: 353px;position: fixed;right: -200px;} #facebook_right img {position: absolute;top: -2px;left: -35px;} #facebook_right iframe {border:0px solid #3c95d9;overflow: hidden;position: static;height: 360px;left:-2px;top:-3px;} #twitter_right {z-index: 10004;border:2px solid #6CC5FF;background-color: #6CC5FF;width:246px;height: 242px;position: fixed;right: -250px;} #twitter_right_img {position: absolute;top: -2px;left: -35px;border: 0;} #google_plus_right {z-index: 10003;background-color: #006ec9;border:2px solid #006ec9;border-top:2px solid #0056a0;border-bottom: 2px solid #0056a0;border-right:2px solid #0056a0;border-left: hidden;width:152px;height: 97px;position: fixed;right: -154px;} #google_plus_right_img {position: absolute;top: -2px;left: -33px;border: 0;} #feedburner_right {z-index: 10003;background-color: #fefefe;border:2px solid #5b5b5b;border-top:2px solid #5b5b5b;border-bottom: 2px solid #5b5b5b;border-right:2px solid #5b5b5b;border-left: hidden;width:300px;height: 97px;position: fixed;right: -303px;} #feedburner_right_img {position: absolute;top: -2px;left: -33px;border: 0;} #kakinetwork_right {z-index: 10003;border:2px solid #303030;background-color: #fff;width:300px;height: 97px;position: fixed;} #kakinetwork_right img {position: absolute;top: -2px;left: -101px;} /* left side style */ #facebook_left{z-index: 10005;border:2px solid #3c95d9;background-color: #fff;width:196px;height: 353px;position: fixed;left: -200px;} #facebook_left img {position: absolute;top: -2px;right: -35px;} #facebook_left iframe {border:0px solid #3c95d9;overflow: hidden;position: static;height: 360px;right:-2px;top:-3px;} #twitter_left {z-index: 10004;border:2px solid #6CC5FF;background-color: #6CC5FF;width: 246px;height: 242px; position: fixed;left: -250px;} #twitter_left_img {position: absolute;top: -2px;right: -35px;border: 0;} #google_plus_left {z-index: 10003;background-color: #006ec9;border:2px solid #006ec9;border-top:2px solid #0056a0;border-bottom: 2px solid #0056a0;border-left:2px solid #0056a0;border-right: hidden;width:152px;height: 97px;position: fixed;left: -154px;} #google_plus_left_img {position: absolute;top: -2px;right: -33px;border: 0;} #feedburner_left {z-index: 10003;background-color: #fefefe;border:2px solid #5b5b5b;border-top:2px solid #5b5b5b;border-bottom: 2px solid #5b5b5b;border-left:2px solid #5b5b5b;border-right: hidden;width:300px;height: 97px;position: fixed;left: -303px;} #feedburner_left_img {position: absolute;top: -2px;right: -33px;border: 0;} #kakinetwork_left {z-index: 10003;border:2px solid #303030;background-color: #fff;width:300px;height: 97px;position: fixed;} #kakinetwork_left img {position: absolute;top: -2px;right: -101px;} .box-title1 { border:1px solid #ddd; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; box-shadow: 5px 5px 5px #CCCCCC; padding:10px; margin: 10px 0; } .enteryouremail{ background: #fff !important; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 165px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; margin:0px; } .submitbutton{ background:#F66303; border: 1px solid #F66303; text-shadow: 1px 1px 1px #333; box-shadow: 3px 3px 3px #666; font:bold 12px Arial, sans-serif; color: #fff; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; cursor:pointer;}
4. Selanjutnya cari kode </head>  setelah ketemu letakan kode dibawah ini tepat diatas kode </head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
<script type="text/javascript" src="http://latesthack.googlecode.com/svn/extras/4in 1.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -200}, 500); }); jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#twitter_right").stop(true,false).animate({right: -250}, 500); }); jQuery("#google_plus_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#google_plus_right").stop(true,false).animate({right: -154}, 500); }); jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); }); });
</script>
5. Simpan Template lalu kembali ke menu Rancangan pilih ADD Gadget pilih HTML/Java Script., copy kode dibawah ini.
<div id="on"><div id="facebook_right" style="top: 18%;"><div id="facebook_div"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpCFfqDrDBO3GsEo8-StVIsF-hqdHEPOAjh1S4cRqW0tF7QkpGHpb3gKb-FFkNkgLbgr5Ek_Lm9Cfii2XUP33OPjdrPKl5Vk_p1B3aeDwnO4JieXf9TjRD4WoKlOxptwXPe8HgpzsMEQA/s1600/%25255Bwww.latesthackdemo.blogspot.com%25255Dfacebook_right.png" alt="" /><iframe src="http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FVICTOR_KALALO&amp;locale=en_GB&amp;width=200&amp;connections=9&amp;stream=&amp;header=false&amp;show_faces=0&amp;height=356" scrolling="no"></iframe></div></div></div><div id="on"><div id="twitter_right" style="top: 35%;"><div id="twitter_div"><img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi__d_q98TToKswfDOIRrAyyrIdjkrsJrX-haUH7EJAUGrOFWcomvvIm255_BqdgwU4xBHEWO-rSZt9MBm87wWScx1Qlw9xBqfBpv9CHIk_jIOw14TfI8SveUPsyuPKJaASt1QQ_p42JXI/s1600/%25255Bwww.latesthackdemo.blogspot.com%25255Dtwitter_right.png" /><div id="twitterfanbox"></div><script type="text/javascript">fanbox_init("victor_kalalo");</script></div></div></div><div id="on"><div id="google_plus_right" style="top: 52%;"><div id="google_plus_div"><img id="google_plus_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTxMEBGiGzp_y3QOhW_k6qdcrRhs34GaT81ruqFCl-YFfwfZm_kVIHhztMOwU7tPWro7Ok6CG7ANmAkNfffW_9hS4lLrW80v-IVtkdcajzHlmjjDVtrEcX76RhplHBfvqv6Ggtr0uL4iQ/s1600/%25255Bwww.latesthackdemo.blogspot.com%25255Dgoogle_plus_right.png" /><div style="float:left;margin:10px 10px 10px 0;"><g:plusone size="tall" expr:href="data:post.url"></g:plusone></div></div></div><div id="on"><div id="feedburner_right" style=" top: 69%;"><div id="knfeedburner_div"><center><h4 style="color:#F66303;">You can also receive Free Email Updates:</h4><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=victor_kalalo', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="enteryouremail" name="email" value="Enter your email here..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="victor_kalalo" name="uri" type="hidden" /><input value="Submit" class="submitbutton" type="submit" /></form></center><img id="feedburner_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSzvXWipkZGx4FxPCP2svxje1FUIjmcU_mX54jOl5bY7-6IuMLXC-Uz95pfFqcsUSUre8XVc788FqYGq-mOZexWmZSu0JEhxg04P-_1hSsdphALdspdPVrWyf2ehhXJ2Lh60hXWeBJP7o/s1600/%25255Bwww.latesthackdemo.blogspot.com%25255Dfeedburner_right.png" /></div></div></div></div>
Ganti kode yang berwarna Biru dengan Username Facebook kamu.
Ganti kode yang berwarna Merah dengan Username Twitter Kamu.
Ganti kode yang berwarna Ungu dengan Alamat Feed kamu (contoh:http://feeds.feedburner.com/victo_)

Simpan dan lihat hasilnyar_kalalo

Widget Quick Search Keren

Berikut ini penulis share-kan beberapa script untuk widget atau sidebar atau gadget blogger yang memiliki tampilan cantik dan bisa Anda pasang pada blog Anda. Cara pemasangannya yaitu sebagai berikut:
clean_quick_search_pack
1.) Login ke akun blogger Anda www.blogger.com
2.) Masuk ke menu Layout/Tata Letak”
3.) Klik “Add a Gadget/Tambah Gadget” 4.) Pilih yang fitur "HTML-JAVASCRIPT"
5.) Klik ikon biru “+”
6.) Copy salah satu kode kotak pencarian di bawah ini yang Anda suka
7.) Paste di “Konten” HTLM-JavaScript
8.) Biarkan “Judul/Title” di kosongi saja
9.) Klik tombol “Simpan/Save”

Style 1 – Box Orange
<style type="text/css">
#exe-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQbDl2TlBUafx-zMn803_G3XAzYyJVlzLtqUUl0tCqdxGdRwRbKebbzQ_ltrCYD21xXRWW8T-e16V6kuqUu_b1YR45nkEsWM9whnjsMmu_jJGDKhCIxDonRXG4vb2XxiLVO2j648ymjA/s1600/Yellow-Search-Engine.png) no-repeat scroll center center transparent;width:310px;height:100px;disaply:block;}
form#exe-searchform{display: block;padding-top:51px; padding-left:30px;;margin:0;}
form#exe-searchform #s{padding-top:3px; padding-left:1px; width: 208px; font-size:14px; vertical-align:top; border:none; background:transparent;}
form#exe-searchform #sbutton{padding-top:10px; padding-right:25px; height:15px; width:15x; border:none; background:transparent;}
</style>
<div id="exe-searchbox">
<form id="exe-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search Here..." onfocus='if (this.value == "Search Here...")
{this.value = ""}' onblur='if (this.value == "") {this.value = "Search Here...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>
Style 2 – Box Hitam
<style type="text/css">
#exe-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj052SHcks5iC2JvGtXqLKLYVzswibWJgFIxlWCudXEJlqoOLn8r-cBu_lmxmgBmJewUzrUvOcgH_TIvW5YNNp5aoS6b2xZFDNkthl9jbRq9mIsQ7QxFOkOGAl_b1yz9tnK_NNCPbxdzA/s1600/Black-Search-Engine.png) no-repeat scroll center center transparent;width:310px;height:100px;disaply:block;}
form#exe-searchform{display: block;padding-top:51px; padding-left:30px;;margin:0;}
form#exe-searchform #s{padding-top:3px; padding-left:1px; width: 208px; font-size:14px; vertical-align:top; border:none; background:transparent;}
form#exe-searchform #sbutton{padding-top:10px; padding-right:25px; height:15px; width:15x; border:none; background:transparent;}
</style>
<div id="exe-searchbox">
<form id="exe-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search Here..." onfocus='if (this.value == "Search Here...")
{this.value = ""}' onblur='if (this.value == "") {this.value = "Search Here...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>
Style 3 – Box Biru
<style type="text/css">
#exe-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikez-RjSKTcPh690GR6B4_5U_YCowGoCpVmPbjEadTvysuS1zWh_-pR5FdXcOUbI5RRO0FYn_k9HyiiPsnT_F-l5c_qDnb7DuUNWXhyphenhyphenk3hsHOvx4P8PQMU8qyb5Kth4vxe9fwvvT-R3A/s1600/Blue-Search-Engine.png) no-repeat scroll center center transparent;width:310px;height:100px;disaply:block;}
form#exe-searchform{display: block;padding-top:51px; padding-left:30px;;margin:0;}
form#exe-searchform #s{padding-top:3px; padding-left:1px; width: 208px; font-size:14px; vertical-align:top; border:none; background:transparent;}
form#exe-searchform #sbutton{padding-top:10px; padding-right:25px; height:15px; width:15x; border:none; background:transparent;}
</style>
<div id="exe-searchbox">
<form id="exe-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search Here..." onfocus='if (this.value == "Search Here...")
{this.value = ""}' onblur='if (this.value == "") {this.value = "Search Here...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>
Style 4 – Box Hijau
<style type="text/css">
#exe-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWecyNXzfmxR7vUXF1-AU-iLsCtB2IXkudJvTvvhPYhKnL_pZMuDl8tVJSKLxmUFb3aT3jFtqCPKTUTuNJHQdJTsl2xfvIIiOpSrB40cso5MnCGJGcLMGgPwKcIG7VVppS7AVzovJLng/s1600/Green-Search-Engine.png)
no-repeat scroll center center transparent;width:310px;height:100px;disaply:block;}
form#exe-searchform{display: block;padding-top:51px; padding-left:30px;;margin:0;}
form#exe-searchform #s{padding-top:3px; padding-left:1px; width: 208px; font-size:14px; vertical-align:top; border:none; background:transparent;}
form#exe-searchform #sbutton{padding-top:10px; padding-right:25px; height:15px; width:15x; border:none; background:transparent;}
</style>
<div id="exe-searchbox">
<form id="exe-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search Here..." onfocus='if (this.value == "Search Here...")
{this.value = ""}' onblur='if (this.value == "") {this.value = "Search Here...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>
Style 5 – Box Merah
<style type="text/css">
#exe-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8Dp1HTtVp-xyJ_Yz0nazif_oPEGITIV4GSTXS9qLAg6ATsyPjr0zy-XiW-Uwy9MvptXrvV4dwozB4b72Y9DTsW04q2K9aTRxQh7OlxE_NXfkgkMUpjpzYfpS8zOuDxD1oMOt2fwyzdg/s1600/Red-Search-Engine.png) no-repeat scroll center center transparent;width:310px;height:100px;disaply:block;}
form#exe-searchform{display: block;padding-top:51px; padding-left:30px;;margin:0;}

Source : http://www.mboir.com/2012/12/5-widget-kotak-pencarian-yang-keren.html#ixzz2LadMM0gB