Profil blogger merupakan deskripsi singkat tentang pemilik blog. Profil blog menurut saya penting untuk di tambahkan dalam blog sobat, kenapa hal tersebut penting ? alasannya sudah jelas agar pembaca ataupun pengunjung blog tahu tentang pemilik blog.
Pada kesempatan kali ini saya akan berbagi tutorial bagaimana cara menambahkan profil/ tentang anda di dalam widget blogger. Ada 2 style yang nantinya akan saya bagikan dan semuanya hanya menggunakan CSS. Penasaran bagaimana cara membuatnya ? Mari kita belajar bersama menambahkan profil/ about/ tentang anda di dalam widget blog.
Cara Menambahkan About/ Tentang Saya di blogger
Untuk menambahkan profil/ about/ tentang anda di dalam widget blog silakan ikuti tutorial berikut ini :
a. Silakan masuk ke Dashboard > Tata Letak > Tambahkan Gatget
b. Pilih HTML/JavaScript
Untuk Style pertama :
Untuk membuat about/ tentang saya seperti pada gambar diatas silakan paste code berikut dalam widgetnya :
<style>
.mbt-share {list-style: none;}
.mbt-share li {float: left; padding-right:13px; }
#profilemohammad{
border:0px solid #888; margin:2px 15px 0px 0px; padding:2px;
border-radius: 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
-o-border-radius: 50px;
}
#profilemohammad:hover {
border:2px solid #ccc;
cursor:pointer;
}
.opacity {
opacity: 0.5;
margin-left: 50px;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
margin-right:5px;
}
.opacity:hover {
opacity: 1;
margin-left: 0px;
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=1, M12=0, M21=0, M22=1, sizingMethod='auto expand');
zoom: 1;
-moz-box-shadow: 1px 1px 4px #000;
-webkit-box-shadow: 1px 1px 4px #000;
box-shadow: 1px 1px 4px #000;
}
</style>
<img width="60px" height="60px" class="opacity" id="profilemohammad" src="//a.disquscdn.com/uploads/users/15536/5431/avatar92.jpg?1430559850" align="left" /> Hai, saya agung, 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.awblog.net/p/about.html">Read More..</a> <br />
<br />
<ul class="mbt-share">
<li>
<a target="_blank" rel="nofollow" href="XXXX"><i class="fa fa-envelope-o"></i></a></li>
<li><a target="_blank" rel="nofollow" href="http://XXXX"><i class="fa fa-rss"></i></a></li>
<li><a target="_blank" rel="nofollow" href="http://www.facebook.com/XXXX"><i class="fa fa-facebook"></i></a></li>
<li><a target="_blank" rel="nofollow" href="http://plus.google.com/XXXX"><i class="fa fa-google-plus"></i></a></li>
<li><a target="_blank" rel="nofollow" href="http://twitter.com/XXXX"><i class="fa fa-twitter"></i></a></li>
</ul>
Untuk Style kedua
Untuk membuat about/ tentang saya seperti pada gambar diatas silakan paste code berikut dalam widgetnya :
<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/portalinspirasi23" target"_blank"=""><img alt="Agung Winarno" 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 agung, 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.awblog.net/p/about.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&rel=author&height=20&annotation=bubble&hl=en&origin=http%3A%2F%2Fwww.farhanpermana.com&url=http%3A%2F%2Fplus.google.com%2F110279056502518160581&gsrc=3p&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&id=I2_1433315211839&parent=http%3A%2F%2Fwww.farhanpermana.com&pfname=&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 @itspermana" style="width: 300px; height: 20px;" class="twitter-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351&align=&button=blue&id=twitter_tweet_button_0&
lang=en&link_color=&screen_name=itsPermana&show_count=&show_screen_name=&text_color=" scrolling="no" frameborder="0"></iframe>
</div>
c. Silakan sesuaikan widget dengan profil tentang sobat.
d. Simpan Widgetnya dan lihat hasilya.
Mungkin cukup sekian share cara menambahkan profil tentang saya di blogger, jika ada pertanyaan silakan bertanya, dan jika ada kesalahan mohon dikoreksi, terimakasih :)