Cara Menambahkan Social Bookmarking Terkeren di Blog

Sebagai pengguna internet sobat blogger pasti punya Social Networkkan?, Misal Facebook, Twitter, Google Plus, Dan lain sebagainya. Lalu, apa gunanya / keuntungan menambahkan link akun Social Network kita di blog?
    Ada banyak alasan untuk menjawab pertanyaan ini, akan saya paparkan beberapa diantaranya.
Pertama, Sobat akan lebih mudah mendapatkan member tetap blog sobat jikalau para pengunjung mengikuti sobat di jejaring sosial, karena saya yakin mereka lebih sering berada di jejaring sosial ketimbang mengunjungi blog kita.
Kedua, Tentu sobat ingin lebih dikenal oleh publik bukan? Inilah saatnya sobat mendapatkan fans dari artikel unik yang sobat tulis sehingga mereka terpesona dengan tulisan - tulisan karya sobat. :D
Ketiga, Memudahkan pengunjung menkontak admin blog (sobat sendiri), yap, dengan adanya link menuju jejaring sosial sobat, maka para pengunjung lebih mudah untuk bertanya jikalau menemui masalah.
Keempat, Menambah teman, Yang satu ini yang saya paling suka,,, benar bukan? mungkin jika blog sobat banyak pengunjung dan sobat mendapat banyak member setia, serasa seperti teman di dunia nyata.
Kelima, Mencerminkan pemilik yang gak gaptek,,, lhoh? yayaya, mungkin, point yang satu ini banyak yang tidak setuju, tapi ada benarnya juga, kenapa? coba bayangkan saja, jika sobat ditanya oleh teman sobat, "Eh, Elu punya FB" 'Enggak' "Pasti, Maen twitter nih,??" 'Enggak juga' "oohhh,, Google plus.an?" 'halah mbuh lah, gk duwek' "ahh,, gk asik lo,,, Kampungan,,, kudet,,, gaptek,,,". Gimana? gk maukan kayak gitu #hahahhaha
     Maka dari itu kali ini NKS akan share kumpulan widget Social Bookmarking Keren. Berikut informasi Tutorialnya:

• Seperti biasa Login terlebih dahulu ke blogger
• Masuk ke Pengaturan "Tata Letak"
• Kemudian, Tambahkan Gadget Baru (pilih HTML/Javascript)
• Setelah itu, Beri judul  widget terserah sobat
• Kemudian pada bagian isi Copas salah satu kode berikut ini, sesuai selera sobat

Desain 1 (Gaya Vertikal)

Demo:

• Follow me on Twitter
• Follow me on Facebook
• Find me on Google+
• Subscribe via RSS

 <style>
#iconizr li {font-size:18px;font-family:shaun the sheep !important;
color:#cccccc;text-shadow:0px -1px 0px #000;cursor: pointer;height:41px;position: relative;border-top:none;border-bottom:none;list-style:none;}
#iconizr .icon {background: #d91e76 url('http://codecbd.googlecode.com/files/iconizers.png') 3px 0 no-repeat;background-color: rgba(217,30,118, .42);-moz-border-radius:20px;-webkit-border-radius:20px;-o-border-radius:20px;border-radius:20px;display: block;color: #141414;float: none;height: 40px;line-height: 40px;margin: 5px 0 0;position: relative;text-align: left;text-indent: 50px;text-shadow: #333 0 1px 0;white-space: nowrap;width: 250px;z-index: 5;-webkit-transition: width .25s ease-in-out, background-color .25s ease-in-out;-ms-transition: width .25s ease-in-out, background-color .25s ease-in-out;-moz-transition: width .25s ease-in-out, background-color .25s ease-in-out;-o-transition: width .25s ease-in-out, background-color .25s ease-in-out;transition: width .25s ease-in-out, background-color .25s ease-in-out;-webkit-box-shadow: rgba(0,0,0, .28) 0 1px 3px;-moz-box-shadow: rgba(0,0,0, .28) 0 1px 3px;-ms-box-shadow:rgba(0,0,0, .28) 0 1px 3px;-o-box-shadow: rgba(0,0,0, .28) 0 1px 3px;box-shadow: rgba(0,0,0, .28) 0 1px 3px;width:40px}
#iconizr li:after {color: #141414;content: attr(data-alt);display: block;height: 38px;line-height: 38px;position: absolute;left: 55px;top: 0;z-index: 2;}
#iconizr .icon {color: #fafafa;overflow: hidden;text-decoration: none;}
#iconizr .facebook {background-color: rgba(65,131,196, .42);background-position: 3px 0;}
#iconizr .twitter {background-color: rgba(74,191,226, .42);background-position: 3px -40px;}
#iconizr .gplus {background-color: rgba(206,26,29, .42);background-position: 3px -80px;}
#iconizr .rss {background-color: rgba(255,109, 0, .42);background-position: 3px -160px;}
#iconizr li:hover .icon {width:99%;}
#iconizr li:hover .icon {background-color: #d91e76;}
#iconizr li:hover .facebook {background-color: #2d76b9;}
#iconizr li:hover .twitter {background-color: #29b8e5;}
#iconizr li:hover .gplus {background-color:#E0181C;}
#iconizr li:hover .rss {background-color: #ff6d00;}</style>
<ul id="iconizr"><li data-alt="Follow me on Twitter"><a rel="external" href="https://www.twitter.com/namikazestar" class="icon twitter" target="_blank">Follow me on Twitter</a></li>
<li data-alt="Follow me on Facebook"><a rel="external" href="http://www.facebook.com" class="icon facebook" target="_blank">Follow me on Facebook</a></li>
<li data-alt="Find me on Google+"><a rel="publisher" href="http://gplus.to/namikazestar" class="icon gplus" target="_blank">Find me on Google+</a></li>
<li data-alt="Subscribe via RSS"><a rel="external"http://namikazestar.blogspot.com/feeds/posts/default?alt=rss" class="icon rss" target="_blank">Subscribe via RSS</a></li>
</ul> 

Desain 2 (Gaya Horizontal)

Demo:

 <style>
/*--------Touch Me Sharing Widget ------*/
.touchme a {
display:block;
height:50px;
width:50px;
padding:0 4px;
float:left;
background:transparent url(http://1.bp.blogspot.com/-LcpFcjk1OXs/UdBRd-mQ_mI/AAAAAAAABrg/QRU5DBFAqBM/s1600/Sharing+Touch+Me.png) no-repeat;
-webkit-transition: ease-in 0.2s all;   
-moz-transition: ease-in 0.2s all;   
-o-transition: ease-in 0.2s all;   
-ms-transition: ease-in 0.2s all;   
transition: ease-in 0.2s all;
cursor:pointer;
}
.touchme a.googleplus {
background-position: 0px -58px;
}
.touchme a.googleplus:hover {
background-position: 0px 0px;
}
.touchme a.twitter {
background-position: 0px -290px;
}
.touchme a.twitter:hover {
background-position: 0px -232px;
}
.touchme a.facebook {
background-position: 0px -406px;
}
.touchme a.facebook:hover {
background-position: 0px -348px;
}
.touchme a.rss {
background-position: 0px -174px;
}
.touchme a.rss:hover {
background-position: 0px -116px;
}
</style>
<div class='touchme'>
<!--RSS-->
<a class='rss' href="http://namikazestar.blogspot.com/feeds/posts/default?alt=rss" rel='external nofollow' target='_blank'></a>
<!--Google Plus-->
<a class='googleplus' href="http://gplus.to/namikazestar" rel='external nofollow' target='_blank'></a>
<!--Facebook-->
<a class='facebook' href="http://www.facebook.com/namikazefanpage" rel='external nofollow' target='_blank'></a>
<!-- Twitter -->
<a class='twitter' href="https://www.twitter.com/namikazestar" rel='external nofollow' target='_blank' ></a>

<br style="clear:both" />
</div> 

• Setelah itu Copy dan Pastekan kode diatas pada isi widget sobat tadi
• Kemudian klik "Simpan"

Selesai, Dengan begitu Blog sobat tampak lebih cantik, dan keren deh :) . Sekian artikel kali ini semoga bermanfaat bagi kita semua.