Jaringan sosial memainkan peran penting dalam meningkatkan lalu lintas di blog Anda. Itulah mengapa banyak blogger menambahkan link jaringan sosial profil mereka di blogs.Today mereka kita akan menambahkan kotak berlangganan bergaya sosial untuk blogger sangat mudah hanya menggunakan CSS dan HTML codes.It berisi Feedburner Link Anda, Twitter Link Profil, Link Facebook Page, Google + dan pencarian bar.I telah menambahkan efek hover untuk itu yang meningkatkan keindahan ini widget.Installation gadget ini sangat mudah Anda hanya perlu copy dan paste codes.Take itu preview dari widget ini.

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

#search {
border: 1px solid
#DDD;
background:
white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM62CbZTnvAnyp1G4wcznMrKhYjW_TquYOjFLTxO-ufnIjzKD0ZV0B6SOfJYZrbbotBG1uyyXVqJVHOsmIJWr1t-iDf_ucUsylIiyu1adJqc-Bcpq-dhdbylyL5r3cHdDc0_OGRMKa9jA/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;
}

5. Save / Simpan Template

Langkah terakhir :

- Login Blogger
- Masuk Rancangan dan pilih " Tambah Gadget " 
- Simpan code JavaScript di bawah ini.

<style>

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

#search {
border: 1px solid
#DDD;
background:
white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM62CbZTnvAnyp1G4wcznMrKhYjW_TquYOjFLTxO-ufnIjzKD0ZV0B6SOfJYZrbbotBG1uyyXVqJVHOsmIJWr1t-iDf_ucUsylIiyu1adJqc-Bcpq-dhdbylyL5r3cHdDc0_OGRMKa9jA/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>



<div class="social-connect-widget" style="margin-top:0px;margin-bottom:10px;">
<img alt="rss feed" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-FGPZW27a-CmCQ_K5Ra9Z8ZNLNZMaC2s7Y90MNikD2qAyf2zYSvHyD780eQjBT-ZxMJIG9erpYUUCys0n4X3oN67kTtNjLqNQy6-Az8XHGE3h8Rn6wlUJmsgsGRY0YUj_6vqHT1DqDTTw/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/AVvXsEht0DMryzST2EKQ7RGV4aGeGPmSuPnRyD_HSzHd2fKJU3GZrHNuUH0oDBnoVWKQuvLo9vLZcYHPVrk_qZhOMUDUtj8oKm7OdRG710KJCo2V06yozMqRkMOQOdp8-P3yAZ9xc7Jyb6PV1HnF/s1600/twitter.png" title="follow us on twitter!" /><a href="http://twitter.com/helperblogger" 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/AVvXsEiBq4SluGHHtKWAdk05i6QrzUgRcjNNHK8zLz3CaeGPS_Sww_K1WAU3lXTbtrOVMS4Lzv0r3q-ueFuYgrmmOydWUCX6YT2I3hXk0u1fh1dXLPe9zH8HfPUD8RWTUEycC-INuBOque4_0WEp/s1600/facebook.png&#39; title=&#39;Be Our Fan" /><a href="http://www.facebook.com/btsnts" 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/AVvXsEgD6BdBGo1BfBkaR5ArUWm0Yphx8cYfaRO-hIb4ZrFZULmN9_W0CcwZgNGKI925aoOJu8uU2POkjzUu9uRUC1qMqa3GUmkZLIuE1NE5tmMs_rtlLwxxy-avUASRWgKc8i6fiJ6zPO8M7XY/s1600/g-plus-logo.png" /><a href="https://plus.google.com/u/0/106527290580119996124" target="_blank">Add Me on Google+!</a>
</div>

Lalu simpan Widget dan lihat hasilnya..
Semoga berhasil dan bermanfaat bagi kalian.

Keterangan : yang di beri warna merah sesuiakan dengan Link Sosial kalian

KOTAK SOSIAL BERGAYA BAR

>