Senin, 08 Juni 2015

Cara Membuat Witget Profil Blog Dengan Css Keren

Cara Membuat Witget Profil Blog Dengan Css Keren - bagi sobat yang tidak puas dengan tampilan profil bawaan blogger yang tampilannya hanya putih saja, sobat dapat memperindah tampilan blog sobat dengan memberi witget profil dengan tampilan css seperti gambar di bawah :

Baca Juga Cara Membuat Atribute Alt Secara Otomatis Pada Blog

Cara Membuat Witget Profil Blog Dengan Css Keren

Cara Pembuatan nya yaitu :
1. Login Blogger 
2. Tata Letak - Tambahkan Html
3. Tambahkan Script Dibawah Ini :
<style>
.vanzADMIN {width:auto; height:83px;padding:5px}
.vanzADMIN-gambar {float:left;width:75px;height:75px;margin:4px 1px 0px 0px;border-radius:90em;opacity:0.8;border-top:1px solid #cf2031;border-right:1px solid #0f7dc8;border-bottom:1px solid #2eb31a;border-left:1px solid #eab823;}
.vanzdeskripsi{width:auto; padding:1%;font-family:arial,sans-serif; margin:-85px 0 0 110px; font-size:11px; color:#fff;}
.vanzfb, .vanzgp, .vanztw {color:#fff!important; display:block;font-weight: bold; line-height: 14px; height: 14px; width: 14px; border: 3px solid #444;text-align: center;padding:3px;border-radius:15px;font-size: 13px;text-decoration:none!important;margin: 1px;position:relative;margin-right:0px}
.vanzfb {background: #3B5998;margin-left:73px}
.vanzfb:hover {border-color: #4F77CC; box-shadow: 0 0 3px #4F77CC;}
.vanzgp {background: #D34836;font-size:11px;margin-left:85px}
.vanzgp:hover {border-color: #EB503C; box-shadow: 0 0 3px #EB503C;}
.vanztw {background: #4099FF;margin-left:73px}
.vanztw:hover {border-color: #36D0FF; box-shadow: 0 0 3px #36D0FF;
}
</style>
<div class="widget-content">
<div class="vanzADMIN">
<a href="https://www.facebook.com/14juni1997" target"_blank"=""><img alt="M.Diki Alhafiz" class="vanzADMIN-gambar" src="//a.disquscdn.com/uploads/users/15536/5431/avatar92.jpg" title="Portal inspirasi" /></a>
<a class="vanzfb" href="http://facebook.com/XXXX" rel="nofollow" target="_blank">f</a>
<a class="vanzgp" href="http://plus.google.com/XXXX" rel="nofollow" target="_blank">g+</a>
<a class="vanztw" href="http://twitter.com/XXXX" rel="nofollow" target="_blank">t</a>
<div class="vanzdeskripsi">
Hai, saya hafiz, saya admin blog ini. Saya bukan orang yang ahli dalam bidang ini, namun saya mencoba untuk belajar dan berbagi. <a style="color:#888;" href="http://www.web-informasi.com/p/blog-page_46.html">Read More..</a>
<br />
<div style="float:left;margin:0px;">
<div id="___follow_0" style="text-indent: 0px; margin: 0px; padding: 0px; background: transparent none repeat scroll 0% 0%; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; display: inline-block; width: 111px; height: 20px;"><iframe data-gapiattached="true" src="https://apis.google.com/u/0/_/widget/render/follow?usegapi=1&amp;rel=author&amp;height=20&amp;annotation=bubble&amp;amp;hl=en&amp;origin=http%3A%2F%2Fwww.farhanpermana.com&amp;url=http%3A%2F%2Fplus.google.com%2F110279056502518160581&amp;gsrc=3p&amp;jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.id.GLkJCs3hZ4M.O%2Fm%3D__features__%2Fam%3DEQ%2Frt%3Dj%2Fd%3D1%2Ft%3Dzcms%2Frs%3DAGLTcCPkDBQQea2xknu_u23OJ2rp704iFg#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh%2Conload&amp;id=I2_1433315211839&amp;parent=http%3A%2F%2Fwww.farhanpermana.com&amp;pfname=&amp;rpctoken=19389622" name="I2_1433315211839" id="I2_1433315211839" vspace="0" tabindex="0" style="position: static; top: 0px; width: 111px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 20px;" scrolling="no" marginwidth="0" marginheight="0" hspace="0" frameborder="0" width="100%"></iframe></div></div></div></div>
<br />
<iframe title="Follow @dikialhafiz2" style="width: 300px; height: 20px;" class="twitter-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351&amp;align=&amp;button=blue&amp;id=twitter_tweet_button_0&amp;
lang=en&amp;link_color=&amp;screen_name=dikialhafiz2&amp;show_count=&amp;show_screen_name=&amp;text_color=" scrolling="no" frameborder="0"></iframe>
</div>

Silahkan Edit Sesuai Keinginan Sobat :)
Simpan Dan Buka Blog Sobat
 Sekian Cara Membuat Witget Profil Blog Dengan Css Keren Semoga Bermanfaat ;)

Cara Membuat Witget Profil Blog Dengan Css Keren Rating: 5 Diposkan Oleh: Nando Tamvan

0 komentar:

Posting Komentar