 |
| cara membuat author profile blog tampil round |
Berikut ini cara membuat author profile blog tampil round atau bulat yang sangat mudah,cukup menambah css di template html sobat,kemudian add widget html,masukan div authornya.
Berikut cssnya,silahkan di masukan terlebih dahulu di template blog sobat.
<style>
/*---Author Box---*/
.i-author {overflow: hidden;padding: .7em;background: #ECF7FF;}
.i-author img {float: left;height: 5.5em;padding: 2px;margin: 0px 5px
2.5em 0px;width: 5.5em;border: 1px solid rgb(0, 4, 91)
!important;border-radius: 50%;} .i-author h4 {color:
#000000;font-size: 1.5em;margin: 0px;padding: 0px 0px .5em 0px;}
.i-author p {color: #434343;font-size: 1em;line-height: 1.7em;margin:
0;} .i-social{font-size:1.3em;margin-top: 5px;}
#gallery{position:relative;margin:0 0 20px;height:126px;}
#gallery .belt{position:absolute;top:0;left:0;list-style-type:none}
#gallery .panel{float:left;margin:0px 10px 20px
0;width:84px;height:86px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9OpVwsHLUGlQQ7przjO_fyOfGrkZ92iTPDRkw5SGzv3sMgeEJPBnbPXTk8upT52wFU1gwr2zJs0L8kMcPe0VKuwOvg4IOeIHcitsbFOw5Z4_wcE00FKE8jq993QrZfZHiqVVmtrUcHDXw/s1600/bg-slider.png)
bottom center no-repeat;overflow:hidden}
#gallery .panel img{border:1px solid #DDD;margin:7px 6px
6px;width:72px;height:72px;background:#FFF;padding:0px}
</style>
Berikutnya,silahkan add widget htmlnya,masukan code berikut<!-- author box --> <div class='i-author'> <img class="URgs7" height="36" width="36" src="link gambar sobat" alt="" /></a> <h4></h4> <p>Welcome </p> <div class='i-social'>Follow me on: <a href='http://twitter.com/' rel='nofollow' target='_blank'><font color='#00aced'>Twitter</font></a> | <a href='https://www.facebook.com/' rel='nofollow' target='_blank'><font color='#3b5998'>Facebook</font></a> | <a href='https://plus.google.com/u/' rel='nofollow'><font color='#dd4b39'>Google Plus</font> </a></div> </div> <!-- author box end -->Kemudian save widget html dan lihat hasilnya,sangat mudah bukan??
