Cara Memasang Widget Profil di Sidebar Blog Ala Kurazone

Cara Memasang Widget Profil di Sidebar Blog Ala Kurazone - Hallo teman-teman Teknolopedia, Widget Profil adalah sebuah Widget yang mungkin dibutuhkan oleh kebanyakan blogger, Widget Profil berguna untuk memamerkan Wajah yang bening, mulus, dan ganteng hehe, selain itu kita juga bisa meletakkan link donasi pada widget profil kita.

Tertarik untuk memasang Widget Profil di blog kalian ? Langsung saja ikutin langkah-langkah dibawah ini :

Cara Memasang Widget Profil di Sidebar Blog

1. Buka Dashboard Blogger

2. Pilih Tata Letak

3. Tambah Widget => HTML/JavaScript

4. Salin dan Paste kode dibawah ini di Widget baru kalian.

<div class="kurauthorbox" style="margin:0 10px 10px 0;border-radius:5px">
<img alt="author" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2nVWW4VsLM3YWFFBHktOWqiIvQsWonVxxWekh4lipK6DLa6-Nt1saIAUwHE8oc3GZT5grPLq-EaWH7vI9KJLo8N-z8qpyW9eOgYPWzFbv6F0JDrsvXEOiT4ud36YkgCG9KNBhyphenhyphenQlP11aH/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.

Jika Icon Sosmednya ngeblank, tambahkan Kode dibawah ini tepat dibawah kode <head>

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

Demikian Artikel Cara Memasang Widget Profil di Sidebar Blog Ala Kurazone, jika ada yang ingin ditanyakan silakan komen di kolom komentar ya teman-teman.

Bagikan Artikel ini