Widget Unik Social Media Efek Animasi

Widget Unik Social Media Efek Animasi - Kembali lagi menghadirkan sesuatu yang baru dan fresh seputar widget unik sosial media untuk blog. Dan tampilan untuk kali ini sangat cocok sekali buat anda para blogger yang menggunakan template blog bergaya metro style, sebagai contoh templatenya bisa anda download disini. Dengan menambahkan sedikit efek animasi model scroll membuat widget ini akan terasa unik dan cantik untuk sebuah blog. Sebagai gambaranya silakan klik link demo dibawah ini :

• DEMO

Untuk cara pemasangannya masih seperti biasa dengan masuk ke Layout >> Add Gadget >> HTML/Javascript >> Dan masukkan kode dibawah ini :

<style type="text/css" scoped="scoped">
.vn-sos-anime {
margin:0 auto;
padding:0px;
text-decoration: none;
}
.vn-sos-anime ul li {
list-style-type: none;
border-bottom:none;
margin:0 auto;
background: none;
padding:0px;
line-height: 0!important;
}
.vn-sos-anime li a {
margin:5px 3px 0px 0px !important;
padding:0px;
width:50px;
height:50px;
text-indent:-99999px;
float:left;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
.vn-sos-anime li a.facebook1 {
background: #314d91 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6w7R1zJ5YbxlIYK1OgiGSPOFgbN8HMB9t3VYNyvr4tEDBBZk-H6S2sKYH_q-K-WCf2_cfUW1NB5PfVfjuY2nWWZ19H_OeWW_m4X6V_WIVjxlv8bsLNkqRxSYytMLBWBglK8faTXrHRqCo/s1600/social_sprites.png) no-repeat 0px 0px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.vn-sos-anime li a.facebook1:hover {
background: #314d91 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6w7R1zJ5YbxlIYK1OgiGSPOFgbN8HMB9t3VYNyvr4tEDBBZk-H6S2sKYH_q-K-WCf2_cfUW1NB5PfVfjuY2nWWZ19H_OeWW_m4X6V_WIVjxlv8bsLNkqRxSYytMLBWBglK8faTXrHRqCo/s1600/social_sprites.png) no-repeat 0px -73px;
}
.vn-sos-anime li a.twitter1 {
background: #07beed url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6w7R1zJ5YbxlIYK1OgiGSPOFgbN8HMB9t3VYNyvr4tEDBBZk-H6S2sKYH_q-K-WCf2_cfUW1NB5PfVfjuY2nWWZ19H_OeWW_m4X6V_WIVjxlv8bsLNkqRxSYytMLBWBglK8faTXrHRqCo/s1600/social_sprites.png) no-repeat 0px -127px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.vn-sos-anime li a.twitter1:hover {
background: #07beed url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6w7R1zJ5YbxlIYK1OgiGSPOFgbN8HMB9t3VYNyvr4tEDBBZk-H6S2sKYH_q-K-WCf2_cfUW1NB5PfVfjuY2nWWZ19H_OeWW_m4X6V_WIVjxlv8bsLNkqRxSYytMLBWBglK8faTXrHRqCo/s1600/social_sprites.png) no-repeat 0px -204px;
}
.vn-sos-anime li a.google-p1 {
background:#a7291b url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6w7R1zJ5YbxlIYK1OgiGSPOFgbN8HMB9t3VYNyvr4tEDBBZk-H6S2sKYH_q-K-WCf2_cfUW1NB5PfVfjuY2nWWZ19H_OeWW_m4X6V_WIVjxlv8bsLNkqRxSYytMLBWBglK8faTXrHRqCo/s1600/social_sprites.png) no-repeat 0px -254px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.vn-sos-anime li a.google-p1:hover {
background: #a7291b url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6w7R1zJ5YbxlIYK1OgiGSPOFgbN8HMB9t3VYNyvr4tEDBBZk-H6S2sKYH_q-K-WCf2_cfUW1NB5PfVfjuY2nWWZ19H_OeWW_m4X6V_WIVjxlv8bsLNkqRxSYytMLBWBglK8faTXrHRqCo/s1600/social_sprites.png) no-repeat 0px -330px;
}
.vn-sos-anime li a.rss1 {
background:#ffaa31 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6w7R1zJ5YbxlIYK1OgiGSPOFgbN8HMB9t3VYNyvr4tEDBBZk-H6S2sKYH_q-K-WCf2_cfUW1NB5PfVfjuY2nWWZ19H_OeWW_m4X6V_WIVjxlv8bsLNkqRxSYytMLBWBglK8faTXrHRqCo/s1600/social_sprites.png) no-repeat 0px -381px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.vn-sos-anime li a.rss1:hover {
background: #ffaa31 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6w7R1zJ5YbxlIYK1OgiGSPOFgbN8HMB9t3VYNyvr4tEDBBZk-H6S2sKYH_q-K-WCf2_cfUW1NB5PfVfjuY2nWWZ19H_OeWW_m4X6V_WIVjxlv8bsLNkqRxSYytMLBWBglK8faTXrHRqCo/s1600/social_sprites.png) no-repeat 0px -454px;
}
.vn-sos-anime li a.pinit1 {
background:#cb2027 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6w7R1zJ5YbxlIYK1OgiGSPOFgbN8HMB9t3VYNyvr4tEDBBZk-H6S2sKYH_q-K-WCf2_cfUW1NB5PfVfjuY2nWWZ19H_OeWW_m4X6V_WIVjxlv8bsLNkqRxSYytMLBWBglK8faTXrHRqCo/s1600/social_sprites.png) no-repeat 0px -508px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.vn-sos-anime li a.pinit1:hover {
background: #cb2027 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6w7R1zJ5YbxlIYK1OgiGSPOFgbN8HMB9t3VYNyvr4tEDBBZk-H6S2sKYH_q-K-WCf2_cfUW1NB5PfVfjuY2nWWZ19H_OeWW_m4X6V_WIVjxlv8bsLNkqRxSYytMLBWBglK8faTXrHRqCo/s1600/social_sprites.png) no-repeat 0px -580px;
}
.vn-sos-anime li a.linkdin1 {
background:#1698E3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6w7R1zJ5YbxlIYK1OgiGSPOFgbN8HMB9t3VYNyvr4tEDBBZk-H6S2sKYH_q-K-WCf2_cfUW1NB5PfVfjuY2nWWZ19H_OeWW_m4X6V_WIVjxlv8bsLNkqRxSYytMLBWBglK8faTXrHRqCo/s1600/social_sprites.png) no-repeat 0px -635px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.vn-sos-anime li a.linkdin1:hover {
background: #1698e3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6w7R1zJ5YbxlIYK1OgiGSPOFgbN8HMB9t3VYNyvr4tEDBBZk-H6S2sKYH_q-K-WCf2_cfUW1NB5PfVfjuY2nWWZ19H_OeWW_m4X6V_WIVjxlv8bsLNkqRxSYytMLBWBglK8faTXrHRqCo/s1600/social_sprites.png) no-repeat 0px -711px;
}
</style>

<div class="vn-sos-anime">
<ul>
<li><a class="facebook1" href="#" rel="nofollow" target="_blank" title="Facebook"></a></li>
<li><a class="twitter1" href="#" rel="nofollow" target="_blank" title="Twitter"></a></li>
<li><a class="google-p1" href="#" rel="nofollow" target="_blank" title="Google Plus"></a></li>
<li><a class="rss1" href="#" rel="nofollow" target="_blaank" title="RSS Feed"></a></li>
<li><a class="pinit1" href="#" rel="nofollow" target="_blank" title="Pinterest"></a></li>
<li><a class="linkdin1" href="#" rel="nofollow" target="_blank" title="Linkedin"></a></li>
</ul>
</div>

Ganti tanda # dengan URL sesuai data blog anda

Semoga dengan tampilan yang cantik dan menarik seperti ini akan memacu semangat kita untuk terus berinspirasi dan menulis artikel yang bermanfaat buat para pemaca di dunia maya. Akhirnya demikianlah tips widget unik untuk blog kali ini dan Salam Blogger

Like THIS :

Share this article to: Facebook Twitter Google+ Linkedin Technorati Digg

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di BDariku