Cara Membuat Widget Contact Me Metro Style

Cara Membuat Widget Contact Me Metro Style - Assalamualiakum sobat semuanya,sebelum nya saya minta maaf belum bisa berkunjung balik ke blo...


Widget Share Metro StyleCara Membuat Widget Contact Me Metro Style - Assalamualiakum sobat semuanya,sebelum nya saya minta maaf belum bisa berkunjung balik ke blog sobat,meskipun begitu saya harap hubungan kita sesama blogger tetap terjaga.Oke..hari ini saya akan memberikan tutorial lagi,setelah beberapa waktu postingan saya tentang kontes,seperti Hostingpangeran dan korek api gas,untuk saat ini saya akan mencoba berbagi widget kontak terbaru yaitu Cara Membuat Widget Contact Me Metro Style,widget ini menurut saya hanya untuk jalan pintas menuju jejaring sosial lainnya yang tentunya milik sobat,seperti facebook,twitter,youtube dan lain-lain,sehingga memudahkan pengunjung sobat untuk menuju akun tersebut dengan cepat hanya dengan meng klik salah satu logo dari jejaring tersebut,dengan seketika itu langsung di bawa ke akun yang di tuju.Untuk cara pembuatannya sobat tidak usah bingung,karena sobat cukup menambahkan widget baru dalam bentuk html,untuk lebih jelas adalah sebagai berikut :

  • Pertama login ke akun sobat
  • Selanjutnya klik tata letak>> tambah gadget baru >> html/java script
  • Copy dan paste kan kode di bawah ini
  • Kemudian simpan dan selesai

<div class="metro-social">
<li><a class="fb" href="http://www.facebook.com/USER NAME"></a></li>
<li><a class="tw" href="http://twitter.com/USER NAME"></a></li>
<li><a class="gp" href="https://plus.google.com/ID G+ ANDA"></a></li>
<li><a class="pi" href="http://pinterest.com/USER NAME"></a></li>
<li><a class="in" href="https://www.linkedin.com/in/USER NAME"></a></li>
<li><a class="yt" href="http://www.youtube.com/USER NAME"></a></li>
<li><a class="fd" href="http://feeds.feedburner.com/NAMA BLOG"></a></li>
</div>
<style>
/*Metro UI Social Profile Widget v3.0 by Tech Prevue Labs
saya ambil kodenya disini:http://www.techprevue.com/2013/02/social-profile-widget-metro-style.html 
Distributed under license CC BY-NC-ND 3.0 INT
Please keep license information intact while using this widget*/
.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{background:url(//goo.gl/oT0kF) no-repeat center center #da4a38;width:69px;height:70px}
.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>
Note ;
Jangan lupa untuk merubah tulisan USER NAME yang di beri higlight warna pada URL diatas,seperti: Facebook page/user name, Twitter username, Google+ user-id, Pinterest username, Linkedin profile url, Youtube username atau, RSS/Feedburner feed url.Oke,,mungkin itu saja dari saya tentang Cara Membuat Widget Contact Me Metro Style,semoga postingan ini bisa membantu dan bermanfaat buat sobat,terimakasih dan happy blogging.

Ads 970x90

Nama

allianz,1,andro textile,1,android,6,asmara,1,asuransi,1,award,3,berita,45,bisnis,4,cap kaki tiga,1,commonwealth,2,daftar isi,5,decoder,1,download,15,efek blog,5,elektronik,2,entertainment,3,facebook,18,family,3,flora dan fauna,7,gadet,1,galuh,8,google,17,google adsense,2,google plus,24,hiburan,28,HostingPangeran,1,hotel murah,1,ICAN Education,1,iddetik.com,1,iklan,1,jadwal timnas,1,jasa,1,keindahan alam,2,keluarga,1,kesehatan,1,klasemen,6,komputer,2,kontes,22,kuliner,3,lain-lain,52,Margahayuland 42 tahun membangun,1,maruyungsari,9,olahraga,35,otomotif,9,paket wisata,1,pengalaman,2,persib,2,profil,2,puisi,2,religi,25,review produk,2,sambut brazil,2,seluler,2,software,1,superwash,1,tutorial dan trik blog,74,twitter,4,video,3,widget,1,wisata,5,youtube,11,
ltr
item
BLOG MASHARI: Cara Membuat Widget Contact Me Metro Style
Cara Membuat Widget Contact Me Metro Style
http://3.bp.blogspot.com/-kWZao4Xn00g/UadrfAEDFBI/AAAAAAAACtU/y_r688KItTI/s200/metro-ui-social-profile-gidget.png
http://3.bp.blogspot.com/-kWZao4Xn00g/UadrfAEDFBI/AAAAAAAACtU/y_r688KItTI/s72-c/metro-ui-social-profile-gidget.png
BLOG MASHARI
https://harysukasuka.blogspot.com/2013/05/cara-membuat-widget-contact-me-metro.html
https://harysukasuka.blogspot.com/
https://harysukasuka.blogspot.com/
https://harysukasuka.blogspot.com/2013/05/cara-membuat-widget-contact-me-metro.html
true
1510860441598238899
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS 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 Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy