Widget Sosial Media untuk blog 2014

SELAMAT DATANG DI AXSION NEW BLOG BERBASIS TEKNOLOGI DAN INFORMASI

Axsion kini akan berbagi cara membuat widget follow untuk web anda widget ini bertemakan windows 8
dan sangatlah cocok untuk web kesayangan anda tanpa basa basi lagi langsunk saja copy code HTML dibawah ini masuk ketata letak Tambahkan Gadget dan di copy pastekan di HTML/Java script
maka tampilanya akan bentuk seperti gambar ini

Jangan lupa di Edit dulu code HTMLnya sebelum disimpa

ganti Alamat = http://axsion2013.blogspot.com/
Dengan alamat social media yang anda punya setelah itu simpan dan selamat mudah mudahan social media yang anda punya followernya semakin banyak

<div class='metro-social'> <li><a class="fb" href=http://axsion2013.blogspot.com/ rel="nofollow"></a></li> <li><a class="tw" href=http://axsion2013.blogspot.com/></a></li> <li><a class="gp" href="http://axsion2013.blogspot.com/"></a></li> <li><a class="pi" href=http://axsion2013.blogspot.com/ rel="nofollow"></a></li> <li><a class="in" href=http://axsion2013.blogspot.com/ rel="nofollow"></a></li> <li><a class="yt" href=http://axsion2013.blogspot.com/></a></li> <li><a class="fd" href=http://axsion2013.blogspot.com/ rel="nofollow"></a></li> </div> <style> .metro-social{width:285px} .metro-social li{position:relative;cursor:pointer;padding:0;list-style:none} .metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd{z-index:7;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>

Kalau anda kurang Cocok sama tampilan yang ada diatas maka ini tampilan yang kedua yang Axsionnew buatkan untuk anda seperti gambar dibawah inilah tampilan yang kedua

dan jangan lupa untuk di Edit terlebih dalu Code HTML'y

jika anda minat dengan tampilan yang kedua silakan Copy paste codenya dibawah ini

<style> /*---ShineMat Windows 8 Style Social Widget---*/ .sm-win-eight-social{ background: transparent; width:300px; } .sm-win-eight-social li{ position:relative; cursor:pointer; padding:0px; list-style:none; } .sm-win-eight-social .smrss,.smfacebook,.smtwitter,.smgoogleplus,.smlinkedin,.smyoutube,.smstumble,.smpinterest { z-index:8; float:left; margin:2px; display:block; position:relative; } .sm-win-eight-social .smrss{ background: #F98509 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqlwZUoJqNXNSVG55X7sg3s8zznGcujKyUKeXxI9F440eyU3S5wJxP7xSk-wN14018gZwpCmiOlEEs2LuVMtUDjo8NqMNZWZzGikI_z_qUefoT2NogHY0ugDFZ_0MbiSfjj3hDVQ6AVuA/s60/shinemat-rss-feed-icon-n.png) no-repeat center; width:140px; height:143px; } .sm-win-eight-social .smfacebook{ background: #2E89F2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFaCCeIcz0Nvtl3j-3WgKHAJEs_IP4iVazaigMsVSQP1hKUz9uSp99w7U4u5IlNvhIjvP5NxElND-3GCobQQInGXvFnhX1JYWsChUihxsgNp0W62qwhZg2fbU50xgBDTsPKLDxVsK_hiA/s37/shinemat-facebook-icon-h.png) no-repeat center; width:68px; height:70px; } .sm-win-eight-social .smtwitter{ background: #6EB921 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh75jqD0_JNxc2p-QduCqwbvVqzRNDvqspGiysGAKUvperM9q1axgwyWbqWaZ5juHDCO1oatn2YLoueevXxC1lDkYECWNYQOJVkw9_LDWuTSdb8zx03YblceUbH7SRDNXA6w_3jdQ3eHD0/s50/shinemat-twitter-icon-n.png) no-repeat center; width:69px; height:70px; } .sm-win-eight-social .smgoogleplus{ background: #5533AE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxj3hLnUl5aNvFE5mGh3B6MyxfUIgVAWHi_N9peyJf374r4RX4K9NbTbMqWSBoeGcY3lXVUPHndyhZDDIOL6oDhlocLuo5JTuinRcNltrc6alDVwY6YhALJxc6j_bSf6MS8yCn5Bvo6dk/s40/shinemat-googleplus-icon-n.png) no-repeat center; width:68px; height:69px; } .sm-win-eight-social .smlinkedin{ background: #0097BD url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXVlhiy9UH7u8ufZyW_5I2UC39c3lGnH3JTioRhKrUhefRGmPcIq7_k3h8KVW7iGdPTN76cj76huyfP55fbeRE81ML2DUsYoUymJpjwDtKOol2GvUUKvS8CkGaft7rIG8jHyxerPTwcm4/s30/shinemat-linkedin-icon-n.png) no-repeat center; width:69px; height:69px; } .sm-win-eight-social .smyoutube{ background: #e64a41 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_yPwJfoysilBy_7UWZOXNycvElK5hyphenhyphenLqrJEC64PcH3MrNKiGNeSjqkx-Wu2Q9V4s5a5uo_oGCGpwYWxGpw-oCruPvEBmv3gh9kjYURoGhGXQG4Xa8tRIdgWgMni6_22n3UFgT-VyvgtU/s80/shinemat-youtube-icon-n.png) no-repeat center; width:285px; height:69px; } .sm-win-eight-social .smstumble{ background: #FA05EC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_DnzMZbUGgUt-rfSpJ4qLTlCsJeTsJCWtaExwlPEO7Kr7fUSnbFU_7HOA5ADZ4sKH9bWiUVumEtYyWmh1UxhVj_ZP1B6ngx6k9jasKk8tK_bS48odVkTs55UcWC7c8FlHli0p9sn05Nw/s50/shinemat-stumbleupon-icon-n.png) no-repeat center; width:141px; height:69px; } .sm-win-eight-social .smpinterest{ background: #0B54A9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLkThPHJmHyGOLQMmGWZ-6eWweEPfYTUmfQLl63xO1eOK3QdvFc5UOkCGWTax8oDlhfqQYmXMOK_urWcKt_dZyZKOUztkIZZ_I-Fyys7aEX3TUv06SU18iRnIeEZZ8uOj_Imcz92pfbhY/s38/shinemat-pinterest-icon-n.png) no-repeat center; width:141px; height:69px; } .sm-win-eight-social li:hover .smrss{ background: #F98509 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5JVAgFNZAUsfIuFrEKtx0QFLNgNpuEnJSAV1iH2t4rlTu8B-l64juUHu9EDaYY4zfq9dH02-W7srCTHyHzvYFurztEHyUApDaVHCRYBhvoU0PXpH5j5ZJsNa0UFus0c1JxERXCQmcfgs/s70/shinemat-rss-feed-icon.png) no-repeat center; } .sm-win-eight-social li:hover .smfacebook{ background: #2E89F2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd7jLSOHDG0HLxYHmsw8C8VzMH9dRNMWXQSlyb32cnG12fLm-0Lko3A57d7V4zWjrXAlpgr1k68xBAfARW36dSWQGjKQlubB7UaNfzg5hZBAwCFvVsMXR84rJIki3rshig0IGilXI-93Y/s56/shinemat-facebook-icon.png) no-repeat center; } .sm-win-eight-social li:hover .smtwitter{ background: #6EB921 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDhGeD5c6T13efdkzBRL7Vjhuoi4fmDLhMsCVdeQNXkgFR_InF0VzCfBobaof79jhgvlDIwQDq3iXERdr02bCZIzrWAziqiDdgkI-K3wcxrZHwieEE9wtTK6Bzdgk-vkcB_foZxuqWflM/s60/shinemat-twitter-icon.png) no-repeat center; } .sm-win-eight-social li:hover .smgoogleplus{ background: #5533AE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVJpYRkzAvXpD15FFASXPUhLxP1sjC70k1kZnS2Xp8VhUG_Yz3IBLxxrzI3MXQuk_4hrQvr7b0ocwSmwkHdb1I4qHyWS7IpFMhSBFE79AyHtz4_IQJVqzeq-y6NsJ4yVQEAkAD4JYXLUg/s50/shinemat-googleplus-icon.png) no-repeat center; } .sm-win-eight-social li:hover .smlinkedin{ background: #0097BD url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiTHN-bIi_jEMyg3zRtA2P7hKlt_6k1KCLbIXarI1-NKCZmC_hUsMv6HhG5lB-rTIP3AUG721B6ClhhbFBl9qg0WG49SEf68ctRJL2SE-v4tDOj3jzReOGvRpH2Cb7cG7w9A0hm7bMiJs/s40/shinemat-linkedin-icon.png) no-repeat center; } .sm-win-eight-social li:hover .smyoutube{ background: #e64a41 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDbcaOlzQRTDtgdD7BwqIuMGaYaQeTZ6N9Pf_sPNhWx7uVDr3gFIyoRXGd1308Koz8e1O1bK6GPYFP8BZLTBluJI3Zn3GhLFVTeinirkwq0lQX02o3P5oaBL4r5XIYewq4z_2mpYJpqu8/s100/shinemat-youtube-icon.png) no-repeat center; } .sm-win-eight-social li:hover .smstumble{ background: #FA05EC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRnscdlEpMlZ3kNGIBtuiUFqEdzXib_5HOymmDv4NAvefxWHh8GwIFC5WHha3E11mZl8igAmP27PUMW1-hEpHGJdJ_T4Xa6fLnw-duDgIU0BSAwybByjIaLkmHuPklVt6SW9ifEzLwLDU/s60/shinemat-stumbleupon-icon.png) no-repeat center; } .sm-win-eight-social li:hover .smpinterest{ background: #0B54A9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVxQcZNTVD7B4Caz9tCwBRrxeg80ZwlNj0OUDTmq_smBubqzD2QaW4GpUH84dpR4nukHpkV-tIDNEkLe_6-GFkmcC5Sul3dyUL_UHZSSGtEZ_fzfAtR2VNGIWflP-wquaTGGc7MRTgVio/s51/shinemat-pinterest-icon.png) no-repeat center; } </style> <br /> <div class="sm-win-eight-social"> <br /> <li><a class="smrss" href="http://feeds.feedburner.com/RSS-USERNAME"></a></li> <li><a class="smfacebook" href="http://www.facebook.com/FACEBOOK-USERNAME"></a></li> <li><a class="smtwitter" href="http://twitter.com/TWITTER-USERNAME"></a></li> <li><a class="smgoogleplus" href="https://plus.google.com/G+PROFILE-ID"></a></li> <li><a class="smlinkedin" href="https://www.linkedin.com/LINKEDIN-USERNAME"></a></li> <li><a class="smyoutube" href="http://www.youtube.com/YOUTUBE-USERNAME"></a></li> <li><a class="smstumble" href="http://www.stumbleupon.com/stumbler/STUMBLEUPON-USERNAME"></a></li> <li><a class="smpinterest" href="http://pinterest.com/PINTEREST-USERNAME"></a></li> </div>

Sekian terimakasih semoga bermanfaat untuk anda selamat melanjutkan aktivitas anda selanjut salam Axsionnew jangan lupa berikan commentar anda di postingan ini jika anda kurang memahami silakan bisa langsunk ditanyakan dan pihak Axsion new dengan senang hati akan menjawabnya sampai jumpa