Attractive Widget Social Media For Blog

Widget Share Media Sosial Blog. Apa kabar sahabat blogger? Pada kesempatan kali ini saya ingin berbagi tutorial tentang membuat Widget Media Sosial Yang Menarik menurut versi saya dan semoga menurut anda juga sama. Widget media sosial ini bisa anda pasang di bagian sidebar blog anda atau dibagian footer blog. Untuk demonya kurang lebih hasilnya seperti yang anda lihat gambar dibawah ini. 

Langkah menerapkan widget ini kedalam blog

Gak usah panjang lebar, jika sahabat ingin menggunakan atau memasang widget sederhana yang ini. Silahkan ikuti langkah-langkah dibawah ini.

•  Silahkan sahabat copy kode dibawah ini.

 <style type="text/css">
.btrix_socialwidget { width: 280px; } 
.btrix_socialwidget ul { border: 1px solid #CCCCCC; margin: 0; padding: 0; } 
.btrix_socialwidget ul li { list-style:none; padding: 0; text-transform: none; border-bottom: 1px solid #CCCCCC; border-top: 1px solid #FFFFFF; } 
.btrix_socialwidget ul li:first-child { border-top: 0 none; } 
.btrix_socialwidget ul li:last-child { border-bottom: 0 none; } 
.btrix_socialwidget ul li a { background-color: #F2F2F2 !important; color: #404040; display:block; } 
.btrix_socialwidget ul li a:hover { background-color: #949494 !important;color: #0d0354; } 
.btrix_socialwidget ul li .rss { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNWn-TeXX4p7zacpOogI11lZjfpB6iZJizU0gJERQ64qvv6QWSTcPachu2HRh2hnor3MvFY1zrEOwJN8A7Jr5vf9QvcFMC5asm-Zh9raNrYnc_tu0g_wNmBG36NbYR_FMo-tkudtjJU-M/s1600/bt-RSS.png") no-repeat scroll 10px center #F87E12; padding: 17.5px 60px; } 
.btrix_socialwidget ul li .twitter { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgAobBG17dZ4aUBH88wokGS_5IAXnUpZJqo-xMmfhx5SKHKjPcYiLgukesbDdTXLVPTVIGIUkNLZlMQxMBSrVkOK-AZ4BczFI218Js7XIRXPZn997VoXAgSFmkH_nNKndexdOVze7loLc/s1600/bt-Twitter.png") no-repeat scroll 10px center #4CACEE; padding: 17.5px 60px;} 
.btrix_socialwidget ul li .facebook { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQyVsbtKDB_cQ4JEBmvTdLyA98Qdxm7toJx9AmIagCYKSIdZ_5a3GZzlDe79unlm8_8wre2ShkbC3wZop80FOTtRuWeKH6-Mi0nnvS00mPKjZOWLsqdr6fYbCB230-p3WKnukTbD4LCkk/s1600/bt-Facebook.png") no-repeat scroll 10px center #3B5998; padding: 17.5px 60px; } 
.btrix_socialwidget ul li .google { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMF_MRrG4udR571-i9qtPH-1yT5C0G9J2Pd-X3bMkkkTkGXNcrRGJEZRLxqezEXkL81Lfqv0A5Fjic5jdtYd5tGSi9G_HgHnc089VRTbYdbL5bjDLTLkW8zCgJMgPmj3gjXPVtNeGoX4I/s1600/bt-google.png") no-repeat scroll 10px center #D44937; padding: 17.5px 60px; } 
.btrix_socialwidget ul li .linkedin { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUz48bidoqtIparnuGmRFgN1x-VsU0hCbFmEuGxmdMy3csvqKpZbBezatQ6sO0PharIF4HOF02QafoYNwJs0i6Y6HRWluR9bVV1rsjyNHGvRpoht33A9qlNDpbNa6kR6NzPeHwfFnoqTQ/s1600/bt-LinkedIn.png") no-repeat scroll 10px center #3692C3; padding: 17.5px 60px; } 
.btrix_socialwidget ul li .youtube { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidTA111k2eK0sUycwtdaihkYZn3f4yFkwCAMBi87CSB2EdJlvp-VGpLjGwYLwm3poQ5hKnxCGIvvT55nevxg_OUPBzfbzx4UsqqZBQ8VVszZQyzaMhGyvmz4A_Czac1tI4QezGWPzDlRw/s1600/bt-Youtube.png") no-repeat scroll 10px center #C6312B; padding: 17.5px 60px; } 
.social-about { display: none; }
</style>
<div class="btrix_socialwidget">
<ul>
<li><a class="rss" href="http://feeds.feedburner.com/blogspot/zamblog">Subscribe to the RSS Feed</a></li>
<li><a class="twitter" href="https://twitter.com/zamzamjamiel">Follow me on Twitter</a></li>
<li><a class="facebook" href="https://www.facebook.com/wong.kampoeng.1420">Find me on Facebook</a></li>
<li><a class="google" href="https://plus.google.com/+AllegianceZamzam" rel="author">Join me on Google+</a></li>
<li><a class="linkedin" href="https://www.linkedin.com/in/zallegiance">Connect on LinkedIn</a></li>
<li><a class="youtube" href="http://www.youtube.com/AllegianceZamzam">Watch me on YouTube</a></li>
</ul>
</div> 

• Masuk Ke Menu Dashbord Blog
• Kemudian Pilih Menu Layout atau Tata Letak
• Pilih Add a Gadget, kemudian pilih HTML/Java Script
• Pastekan kode tadi yang telah anda copy. Kemudian Simpan

Setelah anda menerapkan kode diatas, jangan lupa ya sahabat ZBC untuk mengganti URL alamat yang tertera dibawah ini dengan alamat URL milik sahabat sendiri :

• http://feeds.feedburner.com/blogspot/zamblog  ganti dengan Url Feedburner anda sendiri
• https://twitter.com/zamzamjamiel ganti dengan Url Twitter anda 
• https://www.facebook.com/wong.kampoeng.1420 ganti dengan Url Facebook anda
• https://plus.google.com/+AllegianceZamzam ganti dengan Url Google Plus anda
• https://www.linkedin.com/in/zallegiance ganti dengan Url Linkedin anda
• http://www.youtube.com/AllegianceZamzam ganti dengan Url Youtube anda

Silahkan anda kembangkan sendiri ya sahabat ZBC.

Semoga artikel "Widget Sosial Media Yang Menarik Untuk Blog" ini anda sukai. Dan jangan lupa mampir lagi dilain kesempatan. Terima kasiih