Cara Membuat Widget Profil Keren pada Sidebar Blog versi Kurazone

KURAZONE ~ Halo sahabat Kurazer, pada kesempatan kali ini saya bagikan informasi mengenai Cara Membuat Widget Profil pada Sidebar Blog. Hasil jadinya akan nampak seperti dibawah ini :

Berikut adalah Cara Membuat Widget Profil pada Sidebar Blog

1. Buka akun Blogger
2. Pilih Tata Letak
3. Tambahkan Widget Baru >> Pilih HTML/JavaScript
4. Copy semua kode dibawah ini :
<div class="kurauthorbox" style="margin:0 10px 10px 0;border-radius:5px">
<img alt="author" src="https://1.bp.blogspot.com/-dwHWlf2xV6s/XMiVcJCa1UI/AAAAAAAAQEE/8MlkEeVL0nkc-dBOSGeD9tkkS0UbDUpmACK4BGAYYCw/s220/avatar_4093.gif" width="120" height="120"/>
<a class="kurauthorname" href="https://www.kurazone.net" rel="author" target="_blank" title="Get in touch">www.kurazone.net</a>
<div class="sosmed-author">
<ul>
<li><a href="https://www.kurazone.net/" target="_blank" title="Facebook" rel="nofollow"><i class="fa fa-facebook-square fa-2x" aria-hidden="true"></i></a></li>
<li><a href="https://www.kurazone.net/" target="_blank" title="Twitter" rel="nofollow"><i class="fa fa-twitter-square fa-2x" aria-hidden="true"></i></a></li>
<li><a href="https://www.kurazone.net/" target="_blank" title="Youtube" rel="nofollow"><i class="fa fa-youtube-square fa-2x" aria-hidden="true"></i></a></li>
<li><a href="https://www.kurazone.net/" target="_blank" title="Google+" rel="nofollow"><i class="fa fa-github-square fa-2x" aria-hidden="true"></i></a></li>
</ul>
<div class="clear"></div>
<div class="bawahsos">
<a class="butt-author" href="https://www.blogger.com/follow-blog.g?blogID=8359472699845456853" target="_blank" title="Follow This Blog"><i aria-hidden="true" class="fa fa-rss"></i> Follow</a>
<a class="butt-contact" href="https://www.kurazone.net/" rel="nofollow" target="_blank" title="Donasi ke Admin"><i aria-hidden="true" class="fa fa-coffee"></i> Donasi</a>
</div>
</div>
</div>
<style>.sosmed-author,a.kurauthorname,h2.author-title,a.kurauthorname-url{display:block;text-align:center}
.kurauthorbox{background:url(https://img.freepik.com/free-photo/wall-wallpaper-concrete-colored-painted-textured-concept_53876-31799.jpg?size=626&ext=jpg) top center no-repeat #111;padding:25px 0 0;margin:0 auto;width:300px}
h2.author-title{font-weight:bold;text-decoration:none;margin:0 auto 10px;font-size:22px;color:#fff!important}
.kurauthorbox img{margin:1px auto 0;border-radius:100%;display:block;box-shadow:0 5px 5px rgba(0,0,0,0.1);border:4px solid #fff;transition:all .6s;background:#222}
.kurauthorbox img:hover{border-radius:10%;cursor:pointer;box-shadow:0 5px 10px rgba(0,0,0,0.2)}
.kurauthorbox a.kurauthorname{background:#222;display:table;margin:20px auto;padding:6px 10px;line-height:normal;border:1px solid rgba(0,0,0,0.08);color:#fff;font-weight:400;font-size:14px;border-radius:3px;letter-spacing:1px;text-decoration: none;}
.kurauthorbox a.kurauthorname:hover{background:#123;color:#fff}
.sosmed-author{margin:auto;padding:15px;background:#111;border-radius:4px;border-top:10px solid #222}
.sosmed-author li,.sosmed-author ul{list-style:none}
.sosmed-author ul{margin:0;padding:0 0 10px 0;width:100%;}
.sosmed-author li{display:inline-block;width:22%}
.sosmed-author li a{color:#bdc3c7!important;transition:all .4s ease-out;}
.sosmed-author li a:hover{color:#7f8c8d!important;}
.bawahsos{width:100%;display:block}
.bawahsos a.butt-author,.bawahsos a.butt-contact{background:#222;color:#fff;display:inline-block;width:30%;padding:10px;border-radius:4px;box-shadow:0 3px 5px rgba(0,0,0,0.1);transition:all .3s;text-decoration: none;}
.bawahsos a.butt-contact{background:#222;color:#fff;margin:0 0 0 8px}
.bawahsos a.butt-author:hover{background:#123;color:#fff;box-shadow:0 5px 10px rgba(0,0,0,0.2)}
.bawahsos a.butt-contact:hover{background:#123;color:#fff;box-shadow:0 5px 10px rgba(0,0,0,0.2)}
.bawahsos a.butt-author i,.bawahsos a.butt-contact i{margin:0 5px 0 0}
</style>
5. Simpan Widget

Note :
  1. Silakan kalian sesuaikan sendiri untuk link dan foto author nya.
  2. Apabila ikon sosmed nya tidak keluar maka pasang libary fontawesome dibawah ini kedalam template blog kalian (letakkan dibawah kode <head>)
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

Itulah informasi mengenai "Cara Membuat Widget Profil Keren pada Sidebar Blog versi Kurazone", selamat mencoba dan semoa bermanfaat. Goodluck!








أحدث أقدم