Menambahkan Widget Sosial Bookmark + Kotak Pencarian Di Blogger

Menambahkan widget sosial bookmark memang tiada habisnya. Pasti selalu saja ada yang baru dan menarik untuk dicoba. Dan pada kali ini saya akan membagikan lagi salah satu trik untuk menaruh widget sosial bookmark. Bisa kamu letakkan disamping kanan atau kiri, pokoknya suka-suka kamu saja deh. Lihat caranya di bawah ini :

1. Masuk ke Blogger.com dengan Akun kamu.

2. Klik tata Letak --> Tambah Gadget --> HTML/Javascript dan kamu masukkan kode Javascript di bawah ini.

<style>

/*  ---------Helper Blogger Social Media Widget----------- */

/*  ---------shared by hzndi.blogspot.com----------- */

#search {
border: 1px solid
#DDD;
background:
white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_DORIcMk5EXUltJ5fqAc27E1EnMBjQc1tnzUX0q_7k5TxIhjxB5cNgZVVRZb1C7wJutcn5nPr3aqyNbFGcfQxjOJ1xuNRlZeuBB2HWGbXvzYAOpqWXklHYrOfNeAWPY_zNDAzF9Q14e0/s1600/search.png) 99% 50% no-repeat;
text-align: left;
padding: 6px 24px 6px 6px;
height:15px;
mouse:pointer:
}
#search #s {
background: none;
color:
#666;
border: 0;
width: 100%;
padding: 0;
margin: 0;
outline: none;
}
.social-connect-widget{background:#F5F4EF;border:1px solid #E7E6DE;padding:10px; border-radius:5px; -moz-border-radius:5px;}
.social-connect-widget:hover{border:1px solid #CBCBC2;background:#FFF}
.social-connect-widget a{text-decoration:none;font-weight:bold;font-family:Arial,Helvetica,Sans-serif;color:#4B4D4E}
.social-connect-widget a:hover{text-decoration:underline;color:#F77C04}
.social-connect-widget img{vertical-align:middle;margin-right:5px;height:32px;width:32;}
</style>

<div id="search" title="Type and hit enter">
<form action="/search" id="searchform" method="get">
<input id="s" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search&quot;;}" onfocus="if (this.value == &quot;Search&quot;) {this.value = &quot;&quot;;}" type="text" value="Search" />
</form>
</div>
<br/>
<br/><div class="social-connect-widget" style="margin-top:0px;margin-bottom:10px;">
<img alt="rss feed" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCr8VvooLDiE449zJuzdwbdtFCiEE5OAg6bB02JMI_VRrolWdG1_gnf1U8CB5LNhlYswkdKXt5rgd4pQR0qZK0aUaRB8tKIuRpu_1CPqDMLXAZMy9PwKzgXVJo3_7qJP-6gbXDVzUMJ3ul/s1600/rss.png" /><a href="http://feeds.feedburner.com/hblogger" target="_blank">Subscribe to our RSS Feeds!</a>
</div>
                       
<div class="social-connect-widget" style="margin-bottom:10px;">
<img alt="follow us on twitter!" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz64_Ct_xYe92iNbqD3-R0cWdB9OODTLZEZZ6s-SVhuuRZEPYZyBhOtThyHoJGpmrIRY0CoRqC_UsgjTTd92kaDCeNEjAJtCyZ8w-JFq_0Cq_UK8zvXbVBf6npPBzux5IdYb4TxvknSUCI/s1600/twitter.png" title="follow us on twitter!" /><a href="MASUKKAN-URL-TWITTER-KAMU-DISINI" target="_blank">Follow Me on Twitter!</a>
</div>

<div class="social-connect-widget" style="margin-bottom:10px;">
<img alt="be our fan!" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOiHL3rsoKJUNFxK7fCRtyc70kw9QKhBBfsOgikEt2eKkcn5ZyEZ-cgGjDc1j4oFonTDt-14LoBDy9PG_qGXuqvv_RAeR8PNr84i0BeYOTETNCQuiiirHS-3TDFgberS_WvOxoadpTPKo1/s1600/facebook.png&#39; title=&#39;Be Our Fan" /><a href="MASUKKAN-URL-FACEBOOK-KAMU-DISINI" target="_blank">Follow Me on Facebook!</a>
</div>

<div class="social-connect-widget" style="margin-top:0px;margin-bottom:10px;">
<img alt="google plus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS0vPVSsuV_LmgcFaH_OytNSXV59VJxc7ZImA2YDVBTiM2cIM918y5EhsScetic3RsHGuEhuDXeV1GwMV6-oFb5hFhocCoaQjZl2P2RDwEOfmkzqe5FXZGky4mu-5fKkGJNT1DSR3FAB8/s1600/g-plus-logo.png" /><a href="MASUKKAN-URL-GOOGLE-PLUS-KAMU-DISINI" target="_blank">Add Me on Google+!</a>
</div>

3.Simpan template kamu dan hasilnya seperti diatas loh !

Postingan Terkait:

Social Bookmarking

• Cara Membuat Widget Subcription + Social Sharing + Facebook Like Box di Bawah Postingan
• Cara Membuat Widget Social Sharing Berputar di Bawah Postingan
• Cara Menambahkan Floating Social Bookmark
• Cara Membuat Scrolling Sticky Bar Lengkap Untuk Blogger
• Membuat Widget Social Bookmark 3D yang Bisa Berputar
• Cara Membuat Twitter Box Untuk Blogger
• Cara Membuat Widget Sosial Bookmark Berputar
• Cara Membuat 6 Animasi Twitter Melayang Untuk Blogger
• Menambahkan WIdget Sosial Bookmark dari Shareholic
• Cara Menaruh Facebook Like Box Secara Tiba-Tiba
• Cara Memasang Widget Sosial Bookmark Melayang Versi AddThis.com
• Menaruh Kotak Fanpage Facebook di Blogger - V3
• Menaruh Widget Sosial Bookmark di Side Bar
• Menambahkan Fitur "Like" Facebook di Kotak Komentar Blogger
• Cara Menambahkan Widget Sosial Bookmark Berbentuk Segitiga
• Menambahkan Facebook Recommendations Bar kedalam Blogger
• Menambahkan Widget Icon Sprite Media Sosial di Blog
• Menaruh Widget Flipper Sharing Untuk Blogger
• Menambahkan Widget Touch Me di Blogger
• Membuat Widget Sassy Social Bookmark di Blogger
• Membuat Scroll Jquery Sosial Bookmark Untuk Blog
• Menaruh Widget Eksklusif Sosial Bookmarking
• Memasang Widget Twitter dan Facebook di Samping Postingan
• Membuat Widget Burung Twitter Terbang di Blogger

Blogger

• Cara Menghapus Komentar Spam Secara Otomatis
• Cara Membuat Blog Terindeks Google dengan Cepat
• 5 Kesalahan yang Dilakukan Oleh Blogger Pemula
• Mengembalikan Blog yang Sudah Dihapus, Bisakah ?
• Apa Itu Niche Blogging ?
• Daftar 60+ Forum Do-Follow Ber-PageRank Tinggi 2014
• Cara Menghindari Blog Dihapus Oleh Google
• Cara Memilih Nama Blog & Situs yang Ramah SEO
• Cara Mengembalikan Mood Blogging
• Mengapa Subscriber Feedburner Menjadi 0 ?
• 7 Tips SEO untuk Blogger
• 10 Tips Mantap Untuk Meningkatkan Trafik Organik
• 7 Trik Membuat Artikel Lama Menjadi Populer
• 7 Cara Mendapat Pengunjung Dengan Mudah
• Tutorial Blog dan SEO Terkena Malware ?
• Bagaimana Mengefektifkan Backlink Dalam SEO
• 8 Tips Membuat Loading Blog Lebih Cepat
• Cara Membuat Kotak Fanpage Facebook Hitam Putih
• Optimasi Gambar Untuk Dapatkan Pengunjung
• Cara Menghindari SEO yang Berlebihan
• 8 Tips Untuk Seorang Blogger Pemula
• Cara Mendapatkan Google Sitelink Dengan Cepat
• Cara Membuat dan Tips Pengaturan Meta Tag
• Cara Meningkatkan Ranking Alexa Dengan Cepat
• Cara Mengklaim Situs di Alexa

Social Sharing

• 5 Widget yang Wajib Dimiliki Oleh Blogger
• Cara Membuat Blog Terindeks Google dengan Cepat
• Cara Membuat Kotak Fanpage Facebook Hitam Putih
• Cara Membuat Widget Subcription + Social Sharing + Facebook Like Box di Bawah Postingan
• Menambahkan Widget Social Share Melayang Keluar Tiba-Tiba
• Cara Membuat Widget Social Sharing Berputar di Bawah Postingan
• Cara Menambahkan Floating Social Bookmark
• Cara Membuat Scrolling Sticky Bar Lengkap Untuk Blogger
• Cara Membuat Twitter Box Untuk Blogger
• Cara Membuat 6 Animasi Twitter Melayang Untuk Blogger
• Menambahkan WIdget Sosial Bookmark dari Shareholic
• Cara Menaruh Facebook Like Box Secara Tiba-Tiba
• Cara Memasang Widget Sosial Bookmark Melayang Versi AddThis.com
• Menaruh Kotak Fanpage Facebook di Blogger - V3
• Menaruh Widget Sosial Bookmark di Side Bar
• Menambahkan Fitur "Like" Facebook di Kotak Komentar Blogger
• Cara Menambahkan Widget Sosial Bookmark Berbentuk Segitiga
• Menambahkan Facebook Recommendations Bar kedalam Blogger
• Menambahkan Widget Icon Sprite Media Sosial di Blog
• Menaruh Widget Flipper Sharing Untuk Blogger
• Menambahkan Widget Touch Me di Blogger
• Membuat Widget Sassy Social Bookmark di Blogger
• Membuat Scroll Jquery Sosial Bookmark Untuk Blog
• Menaruh Widget Eksklusif Sosial Bookmarking

Posted in: Blogger,Social Bookmarking,Social Sharing,Widget