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.
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/AVvXsEi5gB-dWOQ7J6Cq7MW_H9FM5-wgxPXpvgIAD7QBdBnU0IPOTwnjbCWrUYJyiz0R227UBdApgBBZcAcdTMMblrkTrgKQDYcXRs6etbxJ7aqxYd69vS4ABUuAhyphenhyphenhqM5br0f0xcXncn_-mNCgy/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/AVvXsEi5gB-dWOQ7J6Cq7MW_H9FM5-wgxPXpvgIAD7QBdBnU0IPOTwnjbCWrUYJyiz0R227UBdApgBBZcAcdTMMblrkTrgKQDYcXRs6etbxJ7aqxYd69vS4ABUuAhyphenhyphenhqM5br0f0xcXncn_-mNCgy/s1600/social_sprites.png) no-repeat 0px -73px;
}
.vn-sos-anime li a.twitter1 {
background: #07beed url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5gB-dWOQ7J6Cq7MW_H9FM5-wgxPXpvgIAD7QBdBnU0IPOTwnjbCWrUYJyiz0R227UBdApgBBZcAcdTMMblrkTrgKQDYcXRs6etbxJ7aqxYd69vS4ABUuAhyphenhyphenhqM5br0f0xcXncn_-mNCgy/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/AVvXsEi5gB-dWOQ7J6Cq7MW_H9FM5-wgxPXpvgIAD7QBdBnU0IPOTwnjbCWrUYJyiz0R227UBdApgBBZcAcdTMMblrkTrgKQDYcXRs6etbxJ7aqxYd69vS4ABUuAhyphenhyphenhqM5br0f0xcXncn_-mNCgy/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/AVvXsEi5gB-dWOQ7J6Cq7MW_H9FM5-wgxPXpvgIAD7QBdBnU0IPOTwnjbCWrUYJyiz0R227UBdApgBBZcAcdTMMblrkTrgKQDYcXRs6etbxJ7aqxYd69vS4ABUuAhyphenhyphenhqM5br0f0xcXncn_-mNCgy/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/AVvXsEi5gB-dWOQ7J6Cq7MW_H9FM5-wgxPXpvgIAD7QBdBnU0IPOTwnjbCWrUYJyiz0R227UBdApgBBZcAcdTMMblrkTrgKQDYcXRs6etbxJ7aqxYd69vS4ABUuAhyphenhyphenhqM5br0f0xcXncn_-mNCgy/s1600/social_sprites.png) no-repeat 0px -330px;
}
.vn-sos-anime li a.rss1 {
background:#ffaa31 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5gB-dWOQ7J6Cq7MW_H9FM5-wgxPXpvgIAD7QBdBnU0IPOTwnjbCWrUYJyiz0R227UBdApgBBZcAcdTMMblrkTrgKQDYcXRs6etbxJ7aqxYd69vS4ABUuAhyphenhyphenhqM5br0f0xcXncn_-mNCgy/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/AVvXsEi5gB-dWOQ7J6Cq7MW_H9FM5-wgxPXpvgIAD7QBdBnU0IPOTwnjbCWrUYJyiz0R227UBdApgBBZcAcdTMMblrkTrgKQDYcXRs6etbxJ7aqxYd69vS4ABUuAhyphenhyphenhqM5br0f0xcXncn_-mNCgy/s1600/social_sprites.png) no-repeat 0px -454px;
}
.vn-sos-anime li a.pinit1 {
background:#cb2027 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5gB-dWOQ7J6Cq7MW_H9FM5-wgxPXpvgIAD7QBdBnU0IPOTwnjbCWrUYJyiz0R227UBdApgBBZcAcdTMMblrkTrgKQDYcXRs6etbxJ7aqxYd69vS4ABUuAhyphenhyphenhqM5br0f0xcXncn_-mNCgy/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/AVvXsEi5gB-dWOQ7J6Cq7MW_H9FM5-wgxPXpvgIAD7QBdBnU0IPOTwnjbCWrUYJyiz0R227UBdApgBBZcAcdTMMblrkTrgKQDYcXRs6etbxJ7aqxYd69vS4ABUuAhyphenhyphenhqM5br0f0xcXncn_-mNCgy/s1600/social_sprites.png) no-repeat 0px -580px;
}
.vn-sos-anime li a.linkdin1 {
background:#1698E3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5gB-dWOQ7J6Cq7MW_H9FM5-wgxPXpvgIAD7QBdBnU0IPOTwnjbCWrUYJyiz0R227UBdApgBBZcAcdTMMblrkTrgKQDYcXRs6etbxJ7aqxYd69vS4ABUuAhyphenhyphenhqM5br0f0xcXncn_-mNCgy/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/AVvXsEi5gB-dWOQ7J6Cq7MW_H9FM5-wgxPXpvgIAD7QBdBnU0IPOTwnjbCWrUYJyiz0R227UBdApgBBZcAcdTMMblrkTrgKQDYcXRs6etbxJ7aqxYd69vS4ABUuAhyphenhyphenhqM5br0f0xcXncn_-mNCgy/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>
.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/AVvXsEi5gB-dWOQ7J6Cq7MW_H9FM5-wgxPXpvgIAD7QBdBnU0IPOTwnjbCWrUYJyiz0R227UBdApgBBZcAcdTMMblrkTrgKQDYcXRs6etbxJ7aqxYd69vS4ABUuAhyphenhyphenhqM5br0f0xcXncn_-mNCgy/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/AVvXsEi5gB-dWOQ7J6Cq7MW_H9FM5-wgxPXpvgIAD7QBdBnU0IPOTwnjbCWrUYJyiz0R227UBdApgBBZcAcdTMMblrkTrgKQDYcXRs6etbxJ7aqxYd69vS4ABUuAhyphenhyphenhqM5br0f0xcXncn_-mNCgy/s1600/social_sprites.png) no-repeat 0px -73px;
}
.vn-sos-anime li a.twitter1 {
background: #07beed url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5gB-dWOQ7J6Cq7MW_H9FM5-wgxPXpvgIAD7QBdBnU0IPOTwnjbCWrUYJyiz0R227UBdApgBBZcAcdTMMblrkTrgKQDYcXRs6etbxJ7aqxYd69vS4ABUuAhyphenhyphenhqM5br0f0xcXncn_-mNCgy/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/AVvXsEi5gB-dWOQ7J6Cq7MW_H9FM5-wgxPXpvgIAD7QBdBnU0IPOTwnjbCWrUYJyiz0R227UBdApgBBZcAcdTMMblrkTrgKQDYcXRs6etbxJ7aqxYd69vS4ABUuAhyphenhyphenhqM5br0f0xcXncn_-mNCgy/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/AVvXsEi5gB-dWOQ7J6Cq7MW_H9FM5-wgxPXpvgIAD7QBdBnU0IPOTwnjbCWrUYJyiz0R227UBdApgBBZcAcdTMMblrkTrgKQDYcXRs6etbxJ7aqxYd69vS4ABUuAhyphenhyphenhqM5br0f0xcXncn_-mNCgy/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/AVvXsEi5gB-dWOQ7J6Cq7MW_H9FM5-wgxPXpvgIAD7QBdBnU0IPOTwnjbCWrUYJyiz0R227UBdApgBBZcAcdTMMblrkTrgKQDYcXRs6etbxJ7aqxYd69vS4ABUuAhyphenhyphenhqM5br0f0xcXncn_-mNCgy/s1600/social_sprites.png) no-repeat 0px -330px;
}
.vn-sos-anime li a.rss1 {
background:#ffaa31 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5gB-dWOQ7J6Cq7MW_H9FM5-wgxPXpvgIAD7QBdBnU0IPOTwnjbCWrUYJyiz0R227UBdApgBBZcAcdTMMblrkTrgKQDYcXRs6etbxJ7aqxYd69vS4ABUuAhyphenhyphenhqM5br0f0xcXncn_-mNCgy/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/AVvXsEi5gB-dWOQ7J6Cq7MW_H9FM5-wgxPXpvgIAD7QBdBnU0IPOTwnjbCWrUYJyiz0R227UBdApgBBZcAcdTMMblrkTrgKQDYcXRs6etbxJ7aqxYd69vS4ABUuAhyphenhyphenhqM5br0f0xcXncn_-mNCgy/s1600/social_sprites.png) no-repeat 0px -454px;
}
.vn-sos-anime li a.pinit1 {
background:#cb2027 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5gB-dWOQ7J6Cq7MW_H9FM5-wgxPXpvgIAD7QBdBnU0IPOTwnjbCWrUYJyiz0R227UBdApgBBZcAcdTMMblrkTrgKQDYcXRs6etbxJ7aqxYd69vS4ABUuAhyphenhyphenhqM5br0f0xcXncn_-mNCgy/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/AVvXsEi5gB-dWOQ7J6Cq7MW_H9FM5-wgxPXpvgIAD7QBdBnU0IPOTwnjbCWrUYJyiz0R227UBdApgBBZcAcdTMMblrkTrgKQDYcXRs6etbxJ7aqxYd69vS4ABUuAhyphenhyphenhqM5br0f0xcXncn_-mNCgy/s1600/social_sprites.png) no-repeat 0px -580px;
}
.vn-sos-anime li a.linkdin1 {
background:#1698E3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5gB-dWOQ7J6Cq7MW_H9FM5-wgxPXpvgIAD7QBdBnU0IPOTwnjbCWrUYJyiz0R227UBdApgBBZcAcdTMMblrkTrgKQDYcXRs6etbxJ7aqxYd69vS4ABUuAhyphenhyphenhqM5br0f0xcXncn_-mNCgy/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/AVvXsEi5gB-dWOQ7J6Cq7MW_H9FM5-wgxPXpvgIAD7QBdBnU0IPOTwnjbCWrUYJyiz0R227UBdApgBBZcAcdTMMblrkTrgKQDYcXRs6etbxJ7aqxYd69vS4ABUuAhyphenhyphenhqM5br0f0xcXncn_-mNCgy/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
