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:

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