Archive Pages Design$type=blogging

Metro Style Social Icons for Blogger - Komputekid

Di sibukan dengan pikiran harian, eh nemu artikel Metro Style Social Icon. Bagaimana sobat dapat menambahkan Metro Style Icon search bar unt...

Di sibukan dengan pikiran harian, eh nemu artikel Metro Style Social Icon. Bagaimana sobat dapat menambahkan Metro Style Icon search bar untuk Blogger? Hari ini saya akan menunjukkan bagaimana sobat dapat menambahkan ikon Sosial Metro Style ke blog sobat. Ikon ini murni terbuat dari CSS tanpa menggunakan JavaScript apapun. Muncul dengan efek hover yg terlihat elegant dan keren.

Metro Style Social Icons for Blogger

Widget ini diciptakan oleh Vinay Prajapati yang berisi 7 ikon situs jejaring sosial terkenal. Mereka adalah - Facebook, Twitter, Youtube, Google +, LinkedIn, Pinterest dan RSS. Demo widget ini dapat dilihat di bawah ini

Caranya gini

Tambah Widget
Pergi ke Blogger → Tata Letak → Tambah Widget → HTML / JavaScript. Paste kode di bawah ini.

CSS

<style type="text/css">
.metro-social {
max-width: 300px;
}
.metro-social li {
position: relative;
cursor: pointer;
padding: 0;
list-style: none;
}
.metro-social .fb, .tw, .gp, .pi, .in, .yt, .fd {
float: left;
margin: 1px;
position: relative;
display: block;
}
.metro-social .fb {
background: url(//goo.gl/6xmUk) no-repeat center center #1f69b3;
width: 140px;
height: 141px;
}
.metro-social .tw {
background: url(//goo.gl/oyiFK) no-repeat center center #43b3e5;
width: 68px;
height: 70px;
}
.metro-social .gp {
width: 69px;
height: 70px;
background: url(//goo.gl/oT0kF) no-repeat center center #da4a38;
}
.metro-social .pi {
background: url(//goo.gl/7olxx) no-repeat center center #d73532;
width: 68px;
height: 69px;
}
.metro-social .in {
background: url(//goo.gl/PhFhj) no-repeat center center #0097bd;
width: 69px;
height: 69px;
}
.metro-social .yt {
background: url(//goo.gl/zcwjB) no-repeat center center #e64a41;
width: 140px;
height: 69px;
}
.metro-social .fd {
background: url(//goo.gl/lhBP1) no-repeat center center #e9a01c;
width: 140px;
height: 69px;
}
.metro-social li:hover .fb {
background: url(//goo.gl/MH8AP) no-repeat center center #1f69b3;
}
.metro-social li:hover .tw {
background: url(//goo.gl/hHRHv) no-repeat center center #43b3e5;
}
.metro-social li:hover .gp {
background: url(//goo.gl/wva4B) no-repeat center center #da4a38;
}
.metro-social li:hover .pi {
background: url(//goo.gl/IORvy) no-repeat center center #d73532;
}
.metro-social li:hover .in {
background: url(//goo.gl/2zHrm) no-repeat center center #0097bd;
}
.metro-social li:hover .yt {
background: url(//goo.gl/I1c4a) no-repeat center center #e64a41;
}
.metro-social li:hover .fd {
background: url(//goo.gl/CjzDP) no-repeat center center #e9a01c;
}
</style>

MarkUp HTML

<div class='metro-social'>
<li><a class="fb" href="https://www.facebook.com/#" target="blank" rel="nofollow"></a></li>
<li><a class="tw" href="https://twitter.com/#" target="blank" rel="nofollow"></a></li>
<li><a class="gp" href="https://plus.google.com/#" target="blank" rel="nofollow"></a></li>
<li><a class="pi" href="https://pinterest.com/#" target="blank" rel="nofollow"></a></li>
<li><a class="in" href="https://www.linkedin.com/in/#" target="blank" rel="nofollow"></a></li>
<li><a class="yt" href="https://www.youtube.com/#" target="blank" rel="nofollow"></a></li>
<li><a class="fd" href="https://feeds.feedburner.com/#" target="blank" rel="nofollow"></a></li>
</div>
Keterangan Ganti tanda # dengan Username atau ID akun sobat.

Sekian tutorial ini, semoga bermanfaat dan mempercantik tampilan blog sobat.

COMMENTS

Name

Android Blogging Cisco Cloud Computing Download Ebook elektronik Error Code Flashdisk Games hack Hardware Info Info Teknologi Internet Jaringan Jaringan Komputer Jual Komputekid Komputer Linux Microsoft Office MikroTik Panduan Blog Pemograman Perbaikan Perbaikan Komputer Printer Recommended Product SEO TechNews Teknologi Tips Trik Tutorial Useful Software Windows 7 Windows 8 Windows XP
false
ltr
item
CatatanTKJ: Metro Style Social Icons for Blogger - Komputekid
Metro Style Social Icons for Blogger - Komputekid
https://4.bp.blogspot.com/-conqTKLKEMs/UZN11n-N7AI/AAAAAAAABYc/HQDi0eE8WTQ/s1600/Social+Icons+Metro.png
https://4.bp.blogspot.com/-conqTKLKEMs/UZN11n-N7AI/AAAAAAAABYc/HQDi0eE8WTQ/s72-c/Social+Icons+Metro.png
CatatanTKJ
http://phentemnote.blogspot.com/2016/03/metro-style-social-icons-for-blogger.html
http://phentemnote.blogspot.com/
http://phentemnote.blogspot.com/
http://phentemnote.blogspot.com/2016/03/metro-style-social-icons-for-blogger.html
true
2552346874649323927
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago