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.
Setelah anda menerapkan kode diatas, jangan lupa ya sahabat ZBC untuk mengganti URL alamat yang tertera dibawah ini dengan alamat URL milik sahabat sendiri :
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
- 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
إرسال تعليق
> Tuliskan komentar anda dibawah ini dengan sopan.
> Komentar yang mengandung Link Hidup kami anggap sebagai spamm. Dan jenis komentar ini terpaksa tidak akan kami tampilkan.
> Ayo budayakan blogwalking dengan baik dan bijak.
> Terima kasih sudah berkunjung.