Mwkhi54l4AT71A9SPj2FMDVTdJ7sCX4vtnoXHfCo
Membuat Widget Author Box Sederhana di Sidebar Blog

Iklan 728x90

Membuat Widget Author Box Sederhana di Sidebar Blog

Pada postingan kali ini Membuat Widget Box Author Box Sederhana di Sidebar blog
Kegunaan dari author box ini agar kita tahu siapa penulis artikel di situs web


Jadi langkah pertama adalah

1. Masuk ke blogger
2. Tata letak > tambakan Widget > pilh html javascript
3. Lalu masukan kode berikut ini


<style type="text/css">
/* author box by whiletips.blogspot.com */
.cm-author{font-family:'Open Sans',Arial,sans-serif;position:relative;display:inline-block;min-width:230px;max-width:336px;width:100%;text-align:left;font-size:16px;background:#f5f5f5;border-radius:5px;margin-top:15px}
.cm-author *,.cm-author:before,.cm-author:after{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:all 0.4s ease;transition:all 0.4s ease}
.cm-author img{max-width:35%;margin-top:-15px;margin-left:60%;margin-bottom:15px;backface-visibility:hidden;vertical-align:top;border-radius:5px}
.myprofile{position:absolute;top:0;right:40%;left:0;bottom:0;padding:15px}
.cm-author h3{margin:0;font-size:1.1em;font-weight:bold}
.cm-author h3 a{color:#656565;text-decoration:none}
.cm-author h3 a:visited{color:#656565;text-decoration:none}
.cm-author .icons{font-size:1.6rem}
.fa-facebook{color:#bababa}
.fa-facebook:hover{color:#3b5998}
.fa-twitter{color:#bababa}
.fa-twitter:hover{color:#55acee}
.fa-instagram{color:#bababa}
.fa-instagram:hover{color:#e95950}
.fa-youtube-play{color:#bababa}
.fa-youtube-play:hover{color:#ff0000}
.mysite{font-size:12px;font-style:italic}
</style>
<div class="cm-author">
<img src="https://lh3.googleusercontent.com/qOaUXrOEROvJVYw9aR52a8lmvzpcyJ_TmrU4PYMo4DHSMc8vMvhFxHqffd9PSroe0JuUxfT0FBVeHg" alt="Ficri Pebriyana" title="Ficri Pebriyana"/>
<div class="myprofile">
<h3><a href="https://plus.google.com/+whiletips" title="Ficri Pebriyana">Ficri Pebriyana</a></h3>
<div class="icons">
<a href="https://www.facebook.com/whiletips" title="Facebook"><i class="fa fa-facebook"></i></a>
<a href="https://twitter.com/whiletips" title="Twitter"><i class="fa fa-twitter"></i></a>
<a href="https://www.instagram.com/whiletips" title="Instagram"><i class="fa fa-instagram"></i></a>
<a href="https://www.youtube.com/whiletips" title="Youtube"><i class="fa fa-youtube-play"></i></a>
</div>
<div class="mysite">www.caramanual.com</div>
</div>

Lalu klik simpan Widget
Catatan ganti url sosial media dengan url sobat

Langkah terakhir paste kode dibawah ini tepat di atas kode </body> biasanya berada di paling bawah Hmtl

<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>



Lalu klik simpan tema
Baca Juga
SHARE
Man
seorang mahasiswa semester akhir yang suka mengumbar senyum, kemesraan, dan kebucinan bersama kucing. sangat menyukai nasi goreng, kota Bandung, dan kamu.

Related Posts

Subscribe to get free updates

Posting Komentar

Iklan Tengah Post

Iklan 300x250