Bloggerism.web.id - Widget Sosial adalah sebuahwidget yang biasanya terdapat di akhir halaman postingan atau bisa jadi diatas halaman postingan tergantung dimana si pemilik we atau situs tersebut memasangnya.
Widget sosial ini berfungsi sebagai alat untuk berbagi atau share kemedia sosial seperti Google PLus, Facebook, Twitter, Pinterest dan lain sebagainya, dengan adanya widget ini akan memudahkan visitor membagikan ulang atau like suatu postingan dari situs yang dikunjunginya.
Kali ini saya akan bagikan sebuah widget sosial flat UI yang sebenarnya dibuat atau pernah di posting oleh sis leony diblog miliknya afowles.blogspot.com, melihat dari tampilan widget ini yang cantik dan terlebih lagi sudah responsive maka saya berinisiatif untuk membagikannya kembali di blog bloggerism.web.id ini.
Ingin tahu tampilan dari widget sosial flat UI ini, yuk lihat demonya terlebih dahulu.
Nah sob, jika sudah melihat tampilannya pada link demo diatas, mungkin sobat jadi tertarik untuk memasangnya diblog milik sobat. Dibawah ini saya akan terangkan proses memasangnya diblog kesayangan kita.
Langkah-langkah Memasang Widget Sosial Flat UI di Blogger.
1. Tambahkan css berikut diatas kode
</head><style type='text/css'>
.sosial ul{position:relative;height:45px;margin:0;padding:0;list-style:none}
.sosial li {position:relative;float:left;margin:0;padding:0;width:20%;height:20px}
.sosial li a {display:block;height:40px;line-height:40px;font-weight:bold;color:#fff;text-align:center;border-top:4px inset rgba(0,0,0,.1)}
.sosial li a span{display:block;font-family:FontAwesome;font-size:40px;line-height:50px;width:50px;height:50px;border-radius:100px;border-bottom:3px solid #fff;position:absolute;background:#666;color:#fff;left:35%;top:135%;transition:all 0.3s ease 0s;opacity:0;visibility:hidden}
.sosial li a:hover span{content:"";position:absolute;top:-150%;left:35%;display:block}
.sosial li:hover span{opacity:1;opacity:1;visibility:visible}
.sosial li:nth-child(1) a,.sosial li:nth-child(1) a span{background: #4A5E99}
.sosial li:nth-child(2) a,.sosial li:nth-child(2) a span{background: #00BFFF}
.sosial li:nth-child(3) a,.sosial li:nth-child(3) a span{background: #d34836}
.sosial li:nth-child(4) a,.sosial li:nth-child(4) a span{background: #C92228}
.sosial li:nth-child(5) a,.sosial li:nth-child(5) a span{background: #F99C58}
@media screen and (max-width:414px){
.sosial ul{height:220px}
.sosial li {float:right;width:100%;height:44px;transition: all .5s}
.sosial li a span{left:35%;top:135%}
.sosial li a:hover span{content:"";position:absolute;top:-40%;left:-10%}
.sosial li:hover{width:90%}
}
</style>2. Tambahakan kode HTML dibawah ini dibawah kode
<data:post.body/> silahkan perhatikan baik-baik letak kode <data:post.body/> pada bagian template sobat, jangan sampai salah letak, karena dapat menyebabkan widgetnya tidak nongol di blog milik sobat, biasanya kodenya terletak setelah <div class='post-footer'/><div class='sosial' id='sosial'>
<ul>
<li><a expr:href='"https://www.facebook.com/sharer.php?u=" + data:post.url' rel='nofollow' target='_blank'><span class='fa-facebook'/>Facebook</a></li>
<li><a expr:href='"https://twitter.com/intent/tweet?url=" + data:post.url' rel='nofollow' target='_blank'><span class='fa-twitter'/>Twitter</a></li>
<li><a expr:href='"https://plus.google.com/share?url=" + data:post.url' rel='nofollow' target='_blank'><span class='fa-google-plus'/>Google +</a></li>
<li><a expr:href='"https://pinterest.com/pin/create/button/?url=" + data:post.url' rel='nofollow' target='_blank'><span class='fa-pinterest'/>Pinterest</a></li>
<li><a expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' rel='nofollow' target='_blank'><span class='fa-rss'/>My Feeds</a></li>
</ul>
</div>Jika sudah lalu simpan template sobat.
Sampai disini sudah selesai proses pemasangan widget sosial flat UI diblog milik sobat, namun jika ada kendala silahkan hubungi saya dikolom komentar blog ini, terimakasih sudah membaca dan berkunjung, jika suka dengan postingan ini tolong dibagikan ya sob... salam Blogger.
Disqus Comment