Cara Mudah Membuat Widget Author Box Sidebar dan Bawah Postingan

Menampilkan profil penulis memang dirasa penting jika , terutama jika blog yang dibangun memiliki konten yang bersifat penting para pengunjung atau pembaca akan semakin percaya dengan apa yang ditulis di blog tersebut. Juga dengan adanya author box / profil penulis pengunjung akan lebih dekat dengan kita. 

Sebelum membahas tentang bagaimana cara membuat widget author box saya ingin menulis sedikit tentang UX/UI, saya piker materi tentang UX/UI ada sedikit berhubungan dengan author box. 

Apakah UX dan UI itu? 

Awalnya saya juga tidak mengerti dan bingun malah saya piir yang namanya UX dan UI itu desain web saya, tanpa membedakan keduanya. Tetapi ternyata kedua hal tersebut berbeda, berikut perbedaan tersebut; 

Penjelasan ini sangat singkat, jadi kalo ada salah atau perlu ditambahkan silahkan berkomentar. 

UX (User Experience) 

User Eperience atu User Experience Design adalah sebuah proses untuk meningkatkan kepuasa user (pengguna web / pengunjung web dan aplikasi) dalam hal meningkatkan kegunaan dan kesenangan dalam berinteraksi antara pengguna dan produk. 

Untuk lebih mudahnya agar web atau aplikasi yang kita buat mudah untuk digunakan tidak rumit bahkan untuk orang awm yang tidak paham sekalipun. 

UI(User Interface) 

Jika UX untuk mendesainagar user lebih mudah menggunakan maka UI adalah desain tampilan atau antar muka dari mesin dan perangkat lunak, dengan fokus pada memaksimalkan pengalaman pengguna. Lebih ke bagaimana web tau aplikasi yang kita buat terlihat seperti apa. 

Sedangkan untuk perbedaan UX dan UI, adalah UX berfokus untuk memahami pengguna sedangkan UI lebih ke bagaimana tampilan web atau aplikasi akan berbentuk seperti apa. 

Lumayan bingungkan , lalu apa hubungannya dengan author box? 

Setidaknya dengan dipasang author box orang akan lebih percaya kepada web/blog kita, para pengunjung akan lebih tertarik untuk mengunjungi kita lagi, bisa karena konten blog kita yang berkualitas atau lebih ke tampilan blog kita yang nyaman. Sampai disini saja pendahuluannya. 

Tutorial memasang author box pada postingan ini akan dibagi menjadi dua yaitu; 

1. Memasang widget author box di sidebar 
2. Memasang widget author box di bawah postingan 

Sebelum mencoba memasang widget author box, perlu diingatkan bahwa kode yang akan digunakan bukan koe asli buatan saya , disini hanya ‘Redesain’ saja. 

Untuk memasang dari kode aslinya siahkan kunjungi blog , 

https://www.kurazone.net

https://www.serieswans.com

Memasang widget author box di sidebar 

1.Login ke blog, kemudian pilih menu Tata Letak 

2.Pilih Gadget HTMl / Javascript 

3.Kemudian Pastekan kode di bawah ini 

<style>.sosmed-author,a.kurauthorname,h2.author-title,a.kurauthorname-url{display:block;text-align:center}
.kurauthorbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhokkZBH9VtddyVKMd14IW43Lefkuz3G8qD2vcqTtpUajiLFVHhBwyG0XgIMCQB2VmuJRzhhYMzJ_RsJnkKkXIHUQMfo1pojtcXSmfONoGS5_eVHfzreriGKTu20_LuApNqk1BBTgml1oI/s320/background-2389460_960_720.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}
.kurauthorbox p{display:table;margin:5px auto;padding:1px;line-height:normal;border:1px solid rgba(0,0,0,0.08);color:#fff;font-weight:400;font-size:14px;border-radius:6px;line-height:normal;color:#000000;font-weight:800;font-size:14px;border-radius:3px;letter-spacing:1px;text-decoration: none;text-align:center;}
.kurauthorbox a.kurauthorname:hover{background:#123;color:#fff}
.sosmed-author{margin:auto;padding:10px;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:10%}
.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%;border-radius:1px;box-shadow:0 3px 3px rgba(0,0,0,0.1);transition:all .3s;text-decoration: none;}
.bawahsos a.butt-contact{background:#222;color:#fff;margin:0 0 0 2px}
.bawahsos a.butt-contact:hover{background:#123;color:#fff;box-shadow:0 5px 10px rgba(0,0,0,0.2)}
.bawahsos a.butt-author: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 2px 0}
</style>
<div class="kurauthorbox" style="margin:0 10px 10px 0;border-radius:5px">
<img alt="author" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjPN4SxZLQc94h2t98icnmtaMWhbIc1_VoMKH8jdXkx8r2oJqjxLTOoqTskg-aI-qSQ8L43_8iykF-69AO0iRzPNIH92W5kK2d6LXuVpQL6tIUs-AgUJOin8vUQtsuaTNL5D2afDjePXGq/s220/avatar_4093.gif" width="120" height="120"/>
<p>Author</p>
<p>filosofi blog</p>
<a class="kurauthorname" href="https://www.emod.net" rel="author" target="_blank" title="Get in touch">Tentang Saya</a>
<div class="sosmed-author">
<ul>
<li><a href="#" target="_blank" title="Facebook" rel="nofollow"><i class="fa fa-facebook-square fa-2x" aria-hidden="true"></i></a></li>
<li><a href="#" target="_blank" title="Twitter" rel="nofollow"><i class="fa fa-twitter-square fa-2x" aria-hidden="true"></i></a></li>
<li><a href="#" target="_blank" title="Youtube" rel="nofollow"><i class="fa fa-youtube-square fa-2x" aria-hidden="true"></i></a></li>
<li><a href="#" target="_blank" title="instagram" rel="nofollow"><i class="fa fa-instagram fa-2x"></i></a></li>
<li><a href="#" target="_blank" title="pinterest" rel="nofollow"><i class="fa fa-pinterest-square fa-2x" aria-hidden="true"></i></a></li>
<li><a href="#" target="_blank" title="tumblr" rel="nofollow"><i class="fa fa-tumblr-square fa-2x" aria-hidden="true"></i></a></li>
<li><a href="#" target="_blank" title="Github" 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="#" rel="nofollow" target="_blank" title="Donasi ke Admin"><i aria-hidden="true" class="fa fa-coffee"></i>Donasi</a>
<a class="butt-contact" href="#" rel="nofollow" target="_blank" title="Contact"><i class="fa fa-id-card"></i>kontak</a>
</div>
</div>
</div>

4.Kemudian simpan. 

5.Selesai 

Berikut demo tampilan

Tentang Saya

Follow Donasi kontak

Jika belum memasang library fontawesome(ikon tidak muncul) silahkan pasang terlebih dahulu kode berikut ini diatas kode </head>

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

Note :

Untuk mengganti Gambar profil, silahkan ganti kode  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjPN4SxZLQc94h2t98icnmtaMWhbIc1_VoMKH8jdXkx8r2oJqjxLTOoqTskg-aI-qSQ8L43_8iykF-69AO0iRzPNIH92W5kK2d6LXuVpQL6tIUs-AgUJOin8vUQtsuaTNL5D2afDjePXGq/s220/avatar_4093.gif dengan kode gambar / gif kalian sendiri.

Untuk background silahkan ganti kode berikut ; 
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhokkZBH9VtddyVKMd14IW43Lefkuz3G8qD2vcqTtpUajiLFVHhBwyG0XgIMCQB2VmuJRzhhYMzJ_RsJnkKkXIHUQMfo1pojtcXSmfONoGS5_eVHfzreriGKTu20_LuApNqk1BBTgml1oI/s320/background-2389460_960_720.jpg

Untuk warna dan lainnya silahkan ganti sesuai kebutuhan. 
Ganti href="#", sesuai url akun sosmd masing masing
Ganti ID Blog blogID=8359472699845456853 dengan ID Blog kalian.

Memasang Widget Author Box di Bawah Postingan 

1.Masuk ke blog, kemudian pilih Tema / template 

2.Lalu pilih Edit HTML 

3.Cari kode ]]></b:skin/> atau </style> kemudian copy paste kode berikut di atasnya. 

<style>
.authorboxwrap{
    background: #fff;
    margin: 0px 0px -4px;
    padding: 15px;
    overflow: hidden;
 border: 1px solid #f0f0f0;
}
.avatar-container {float:left;margin-right:20px;}
.avatar-container img{width:110px;height:auto;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}
.avatar-container img:hover{border-radius:10%;cursor:pointer;box-shadow:0 5px 10px rgba(0,0,0,0.2)}
.author_description_container h4{font-weight:700;font-size:16px;display:block;margin:0;margin-bottom:2px}
.author_description_container h4 a{color:#00b02a}
.author_description_container h4 a:hover{color:#333}
.author_description_container p{margin:0;color:#888;font-size:95%;margin-bottom:8px}
.authorsocial a{display:inline-block;text-align:center;margin-right:10px}
.authorsocial a i{font-family:Fontawesome;width:20px;height:20px;line-height:20px;padding:5px;display:block;opacity:1;border-radius:2px;transition:all .3s;}
.authorsocial li,.sosmed-author ul{list-style:none}
.authorsocial ul{margin:0;padding:0 0 10px 0;width:100%;background:#111;border-radius:4px;border-top:10px solid #222}
.authorsocial li{display:inline-block;}
.authorsocial li a{color:#bdc3c7!important;transition:all .4s ease-out;}
.authorsocial li a:hover{color:#7f8c8d!important;}
</style>

4. Setelah itu cari kode <data:post.body/>, mungkin akan ada beberapa kode yang sama, pilih yang paling akhir / bawah, lalu copy paste kode berikut dibawahnya. 

<div class='authorboxwrap'>
<div class='authorboxfull'>
<div class='avatar-container'>
<a href=''>
<img class='author_avatar' expr:alt='data:post.author' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9pc0-X8DKh9KCFAwaX0r1CLfmOVP0xPeCIEAkrljdXnbOcljlDQ1fBW-ieUywekX-ywOt5CWSRb2F_z290QIMrD8FwmEIObWHYE4G_fDC_5Tjo4nUAYQ3dFRD5uyQid9TxmVp4kERlUE/s1600/tenor+%25281%2529.gif' height='110' width='110'/>
</a>
</div>
<div class='author_description_container'>
<h4><a href='https://www.emod.ga.com/' rel='author'><data:post.author/></a></h4>
<p>
  No new under the sun
<data:post.authorAboutMe/>      
</p>
<div class='authorsocial'>
<ul>
<li><a href="#" target="_blank" title="Facebook" rel="nofollow"><i class="fa fa-facebook-square fa-2x" aria-hidden="true"></i></a></li>
<li><a href="#" target="_blank" title="Twitter" rel="nofollow"><i class="fa fa-twitter-square fa-2x" aria-hidden="true"></i></a></li>
<li><a href="#" target="_blank" title="Youtube" rel="nofollow"><i class="fa fa-youtube-square fa-2x" aria-hidden="true"></i></a></li>
<li><a href="#" target="_blank" title="instagram" rel="nofollow"><i class="fa fa-instagram fa-2x"></i></a></li>
<li><a href="#" target="_blank" title="pinterest" rel="nofollow"><i class="fa fa-pinterest-square fa-2x" aria-hidden="true"></i></a></li>
<li><a href="#" target="_blank" title="tumblr" rel="nofollow"><i class="fa fa-tumblr-square fa-2x" aria-hidden="true"></i></a></li>
<li><a href="#" target="_blank" title="Github" rel="nofollow"><i class="fa fa-github-square fa-2x" aria-hidden="true"></i></a></li>
</ul>
<div class='clr'/>
</div>

Note: 

Untuk mengganti images profil ganti kode src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9pc0-X8DKh9KCFAwaX0r1CLfmOVP0xPeCIEAkrljdXnbOcljlDQ1fBW-ieUywekX-ywOt5CWSRb2F_z290QIMrD8FwmEIObWHYE4G_fDC_5Tjo4nUAYQ3dFRD5uyQid9TxmVp4kERlUE/s1600/tenor+%25281%2529.gif' dengan kode gambar kalian. Atau jika ingin menampilkan gambar profil blogger ganti kode tersebut degan kode berikut expr:src='data:post.authorPhoto.url'. 

Untuk menambahkan akun sosmed,cari kode;

<li><a href="# target="_blank" title="Facebook" rel="nofollow"><i class="fa fa-facebook-square fa-2x" aria-hidden="true"></i></a></li> 

Ganti # dengan ID atau url akun sosmed kalian.

Berikut demo tampilan

No new under the sun

Tampilan diatas tidak menampilkan nama Author, tetapi jika dipraktikan langsung akan tampil untuk demo silahkan kunjungi link berikut;

DEMO AUTHOR BOX

Mungkin itu saja artikel mengenai widget author box, jika ada pertanyaan atau eror pada kode tersebut silahkan beritahu di kolom komentar.

Share this post