Cara Membuat Widget Profil Keren pada Sidebar Blog versi Kurazone

Pilihan Editor :

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!



18 komentar :

  1. Mantap deh.. 😝😘

    BalasHapus
  2. Wow keren salah satu blog yang saya sukai karena penampilanya alhamdulillah udah tidak lemot kayak dulu hehehe

    BalasHapus
  3. wah mantam oum. unik dan lucu

    BalasHapus
  4. Keren kerenn. Ini yang aku cari2

    BalasHapus
    Balasan
    1. Makasih mas.. Semoga bermanfaat

      Hapus
  5. Mantep mas...keren dan cantik yah blognya.

    BalasHapus
  6. Wiih ada kotak donasinya, auto praktek langsung hehe siapa tau ada yang mau donasi diblog saya hehe

    BalasHapus
  7. Mantap tutorialnya pak..... 😂👌

    BalasHapus
  8. Lamgsung saya coba praktekkan bang
    Terimakasih informasinya

    BalasHapus
  9. Mau coba deh, biar pengunjung blog saya bisa goyang-goyang juga kayak pengunjung kurazone he.he.

    BalasHapus
  10. Megasyikkan mas, biar pengunjung tidak bosan dengan profil kita yang ngebosenin he.he...

    BalasHapus
  11. Sekalian tutor buat custom tampilan Komen kayak kurazone INI bro.

    BalasHapus

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.