Malem Sobat Stand Up Your Blog
kali ini saya akan share Tutorial membuat widget metro styke
ini yang
daftar Anda akan menemukan satu plugin yang saya benar-benar menyukai ,
Metro Style Plugin widget.The Sosial menampilkan blok ikon sosial metro
terkait dengan profiles.So sosial Anda saya pikir kita bisa plugin ini untuk bekerja di Blogger ?Sebuah
pencarian menunjukkan sejumlah orang telah mencoba untuk menciptakan
widget untuk Blogger tetapi sering dengan berantakan bangunan results.So
pada keunggulan mereka saya punya pergi untuk menciptakan versi yang
tepat , bahkan dua version.The alasan untuk membuat dua versi adalah
untuk mengakomodasi jaringan sosial blogger yang berbeda memiliki .Versi pertama memiliki ikon untuk Facebook , Twitter , Google Plus,
Pinterest , dan RSS Feed.For yang kedua saya telah menyertakan LinkedIn
dan YouTube.I telah menyertakan screenshot di bawah ini tetapi juga
melihat demo untuk melihat gadget hidup .
Tambahkan The Metro Sosial Widget Untuk Blog AndaLangkah 1 ) Dalam The New Blogger Dashboard Klik The Drop Down Untuk
Blog Anda > Pilih Tata Letak > klik Add A Gadget > Pilih HTML /
Javascript > Paste In The Kode seperti yang ditunjukkan dalam video
di bawah ini :Versi 1 Code:Catatan - Mengubah URL kuning dengan link ke profil sosial Anda .
<div class='metro-social'>
<li><a class="fb" href="https://www.facebook.com/standupyourblog/" rel="nofollow"></a></li>
<li><a class="tw" href="http://twitter.com/Ymuhamadnurdinhs/"></a></li>
<li><a class="gp" href="https://plus.google.com/104762979757405554297/"></a></li>
<li><a class="pi" href="http://www.pinterest.com/YOURPINTEREST/" rel="nofollow"></a></li>
<li><a class="fd" href="http://feeds.feedburner.com/YOURFEEDBURNER" 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:0.1px;position:relative;display:block}
.metro-social
.fb{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEWLc520BYX0cQNwxLDRGQufoK6aAOIyTUyuIQu0Zy1VQ-m8ZTv4qkxNwjtdQcLJhP_sm-LDWtMSVV0F0xBOMcGhpTK-PV2fNzobxP_Dw24CKtGOltuMyMBtraV0UsoKzKo7m6ZicEz3g/s1600/fb%601.png)
no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social
.tw{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkeK_QKUpnp1_rTjSN_d0ytnwUTg62e56NxjkbCMa89vIKvRzyPZoY2cSNsBKXBUwF_pmVo8mMTKc0GZNG78cvgPHRS67ZP6nqk6OpZxgjmOyau52lZg_eGclULHuoR9820FRFUBOh32U/s1600/tw1.png)
no-repeat center center #43b3e5;width:68px;height:70px}
.metro-social
.gp{width:69px;height:70px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeY-B4IEPBR_p1MYbrmCFwnhQd3JVdqRGR-TFVq0Tz6t8ZHV71ScZIlJxOFlp_7qTUnN7GPwhh392XaTX-3U2ZLQKjSmrj50XL-zRiT-IuRhAQPkzzskBndnkzJs77cs76b4A-xvZEu5k/s1600/g+1.png)
no-repeat center center #da4a38}
.metro-social
.pi{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhadbeISfxSDML1xxfEZYZpR_mTdU7qKd9DwbqeHhANshEX0WikDE_1pJMHztm-ALn4T3iIUNx-WuSzX_86idogKjPZGjLvO-xgsgu5p8h4jFN3ivpjIvLQfuW84Fvt9rGzXTy2_597zfs/s1600/pin1.png)
no-repeat center center #d73532;width:68px;height:70px}
.metro-social
.fd{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPH_xszCBPW5ZRLcPpdAKdKVDSEzEAPNsV9Skl9ZZUFAv8-mcPsgflD69ZBcHXadOdJb7fFcp9SNusyleBv7OLnyprkkkL9_0e6NruNsExTQxOQ6fld8XW6Fc-nEhxWJuziGgGACAnXcg/s1600/feed1.png)
no-repeat center center #e9a01c;width:68px;height:70px}
.metro-social li:hover
.fb{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl_NCm8NGNNfGK_ufGazlX-tZdW2OU7M7V1JCUamjXO7L3zeuzczDE5DScEcguwFtGweEMkrqVNyUAvhDnYx9r5U5hCTQS2BcVI1CMsEqr4bXAOCcn42D2pOk8nvgTGt0kBa4xTk2Om4k/s1600/fb2.png)
no-repeat center center #1f69b3}
.metro-social li:hover
.tw{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmzNteiCvs5cwCUhPCUYTVliiAoOBtunNqTF7nSvnkXMi8Qbst22skty2-MTetDd4aqxpi3CZZjSMHqRNwl1dho6zbGPcc3Y1Bx-njDUp97Q8kL3UVe59EaatlX62FRyRvJ_hIQuZfEnI/s1600/tw2.png)
no-repeat center center #43b3e5}
.metro-social li:hover
.gp{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvIbzJ-qz5RulK5mkXMWQHwItvbOY8z2vzJ8uDoNNS5WRvDTUNxlSktqwfWmItrjsXnvu_LjdxGw2ys0R5rMZdvW9euJSuGNWCSg5u2psiZhIGuFzoa9wQojhoRGdhnquYNAZ7bhQ749w/s1600/g+2.png)
no-repeat center center #da4a38}
.metro-social li:hover
.pi{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibHNnMbSyW3PRuLgm94QR0QVSoEGWxZFsbtjky-02gYRoUnet-pvirG6OpQuASU7uS8cVlV_yx3gGf_2-xisnB7VE-t7ryzTWvKTMun8N3ImC_0cAcgdRIGMuyD9j5Pc6-tGYE_QZnSbA/s1600/pi2.png)
no-repeat center center #d73532}
.metro-social li:hover
.fd{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg57kNDRMxm9-BJCZA0fLcRlPhbvbAfikA3bbQyquEolvVaM8yh3jhBtf3P7YijP3leOwbr4xlBPPA-LUv40jZ0BopEdGAZKChbTqc_aXLzl6JvNt9ueicEmr89d4-QKrvxjA13J7QaWHg/s1600/feed2.png)
no-repeat center center #e9a01c}
</style>
Version 2 Code :
Note - Change the URLs in yellow with the links to your social profiles.
<div class='metro-social'>
<li><a class="fb" href="http://www.facebook.com/YOURFACEBOOK/" rel="nofollow"></a></li>
<li><a class="tw" href="http://twitter.com/YOURTWITTER/"></a></li>
<li><a class="gp" href="https://plus.google.com/YOURGOOGLEPLUS/"></a></li>
<li><a class="pi" href="http://www.pinterest.com/YOURPINTEREST/" rel="nofollow"></a></li>
<li><a class="in" href="http://www.linkedin.com/YOURLINKEDIN/" rel="nofollow"></a></li>
<li><a class="yt" href="http://www.youtube.com/YOURYOUTUBE/"></a></li>
<li><a class="fd" href="http://feeds.feedburner.com/YOURFEEDBURNER/" 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEWLc520BYX0cQNwxLDRGQufoK6aAOIyTUyuIQu0Zy1VQ-m8ZTv4qkxNwjtdQcLJhP_sm-LDWtMSVV0F0xBOMcGhpTK-PV2fNzobxP_Dw24CKtGOltuMyMBtraV0UsoKzKo7m6ZicEz3g/s1600/fb%601.png)
no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social
.tw{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkeK_QKUpnp1_rTjSN_d0ytnwUTg62e56NxjkbCMa89vIKvRzyPZoY2cSNsBKXBUwF_pmVo8mMTKc0GZNG78cvgPHRS67ZP6nqk6OpZxgjmOyau52lZg_eGclULHuoR9820FRFUBOh32U/s1600/tw1.png)
no-repeat center center #43b3e5;width:68px;height:70px}
.metro-social
.gp{width:69px;height:70px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeY-B4IEPBR_p1MYbrmCFwnhQd3JVdqRGR-TFVq0Tz6t8ZHV71ScZIlJxOFlp_7qTUnN7GPwhh392XaTX-3U2ZLQKjSmrj50XL-zRiT-IuRhAQPkzzskBndnkzJs77cs76b4A-xvZEu5k/s1600/g+1.png)
no-repeat center center #da4a38}
.metro-social
.pi{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhadbeISfxSDML1xxfEZYZpR_mTdU7qKd9DwbqeHhANshEX0WikDE_1pJMHztm-ALn4T3iIUNx-WuSzX_86idogKjPZGjLvO-xgsgu5p8h4jFN3ivpjIvLQfuW84Fvt9rGzXTy2_597zfs/s1600/pin1.png)
no-repeat center center #d73532;width:68px;height:69px}
.metro-social
.in{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnc7VUf4vfVrLKRE5SxBkr5AQQcqHdx5MKG5O2ONSvfFy2bJtCp5JUXBck7_dpIt4Ylu5jsxxYl-yB09v-MFnQnnLEtDMjLefEPQxlk5c0MOCejN4TbvPVnUa4OSLVi8hZ9IAV1RSS_J4/s1600/Lin1.png)
no-repeat center center #0097bd;width:69px;height:69px}
.metro-social
.yt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA-bzmed7lnxRoULAfwEdtzQHX0I5Aoa9W0HfNNR0eoznYrGtJT1Vy7QI7dDcV11hiKjTdaZfVk4GV-W66O-e4_4PzKM_aDJ13gon1kD2IGRUyG4HPjC3AX2RzxCVPSieQ0dZbkB94jDg/s1600/YT1.png)
no-repeat center center #e64a41;width:140px;height:69px}
.metro-social
.fd{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPH_xszCBPW5ZRLcPpdAKdKVDSEzEAPNsV9Skl9ZZUFAv8-mcPsgflD69ZBcHXadOdJb7fFcp9SNusyleBv7OLnyprkkkL9_0e6NruNsExTQxOQ6fld8XW6Fc-nEhxWJuziGgGACAnXcg/s1600/feed1.png)
no-repeat center center #e9a01c;width:140px;height:69px}
.metro-social li:hover
.fb{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl_NCm8NGNNfGK_ufGazlX-tZdW2OU7M7V1JCUamjXO7L3zeuzczDE5DScEcguwFtGweEMkrqVNyUAvhDnYx9r5U5hCTQS2BcVI1CMsEqr4bXAOCcn42D2pOk8nvgTGt0kBa4xTk2Om4k/s1600/fb2.png)
no-repeat center center #1f69b3}
.metro-social li:hover
.tw{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmzNteiCvs5cwCUhPCUYTVliiAoOBtunNqTF7nSvnkXMi8Qbst22skty2-MTetDd4aqxpi3CZZjSMHqRNwl1dho6zbGPcc3Y1Bx-njDUp97Q8kL3UVe59EaatlX62FRyRvJ_hIQuZfEnI/s1600/tw2.png)
no-repeat center center #43b3e5}
.metro-social li:hover
.gp{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvIbzJ-qz5RulK5mkXMWQHwItvbOY8z2vzJ8uDoNNS5WRvDTUNxlSktqwfWmItrjsXnvu_LjdxGw2ys0R5rMZdvW9euJSuGNWCSg5u2psiZhIGuFzoa9wQojhoRGdhnquYNAZ7bhQ749w/s1600/g+2.png)
no-repeat center center #da4a38}
.metro-social li:hover
.pi{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibHNnMbSyW3PRuLgm94QR0QVSoEGWxZFsbtjky-02gYRoUnet-pvirG6OpQuASU7uS8cVlV_yx3gGf_2-xisnB7VE-t7ryzTWvKTMun8N3ImC_0cAcgdRIGMuyD9j5Pc6-tGYE_QZnSbA/s1600/pi2.png)
no-repeat center center #d73532}
.metro-social li:hover
.in{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeKRInXjCRqKgKi7r2tCRCTML1VT8nTrjwxH8hAjcxWRbsh1BgcizOvziOOXcaElnLbs855G3xRYMCkLrtJcrbzKv2Ok4v5_rTetqLsW-OpW1bqY0T0n2XRBi6Fl9TnI-7ckc_Uv_kfUc/s1600/Lin2.png)
no-repeat center center #0097bd}
.metro-social li:hover
.yt{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTn2LA7OqCDaSnw5EJlDjiDC4VpbBXX3SqMvi9iKow1cEE2xU9cGCyDyXxX7Fo_9Wej0Ijqz4krXYBwbO5V7akU3AFO5UacTGWsj0HXfkdEczT0hodnpMI90HjdXG5aEuG8gazMTT58iE/s1600/yt2.png)
no-repeat center center #e64a41}
.metro-social li:hover
.fd{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg57kNDRMxm9-BJCZA0fLcRlPhbvbAfikA3bbQyquEolvVaM8yh3jhBtf3P7YijP3leOwbr4xlBPPA-LUv40jZ0BopEdGAZKChbTqc_aXLzl6JvNt9ueicEmr89d4-QKrvxjA13J7QaWHg/s1600/feed2.png)
no-repeat center center #e9a01c}
</style>
ganti tulisan yang berwarna kuning dengan URL Anda / socmed punya sobat
sampai jumpa sobat see you again