Cara Membuat Author Box (Kotak Admin) Menarik di Akhir Artikel ala Fahrinheit.com

Cara Membuat Author Box (Kotak Admin) Menarik di Akhir Artikel ala Fahrinheit.com

Cara Membuat Author Box Menarik - Fahrinheit, Pada kesempatan kali ini fahrinheit akan berbagi tips editting template blogger yang lainnya, yakni cara membuat kotak admin / author box di blogger. Sebenarnya setiap template blogger sendiri sudah mempunyai tampilan authornya masing-masing, namun author box yang akan fahrinheit bagikan kali ini memiliki tampilan yang lebih minimalis dan menarik karena disertai dengan bio author yang dapat disematkan di samping foto admin blog. Selain itu author box yang fahrinheit bagikan ini juga sangat ringan sehingga tidak akan mempengaruhi kecepatan blog anda jika menggunakannya. Untuk lebih jelasnya bagaimana contohnya dapat anda lihat pada bagian akhir artikel ini yang mana juga blog ini gunakan.

cara-membuat-author-box-menarik
Selain beberapa hal yang sudah admin jelaskan di atas, beberapa keuntungan lainnya menggunakan author box ala fahrinheit ini adalah :
  1. Tampilan yang menarik
  2. Terlihat lebih profesional sama seperti situs-situs besar lainnya
  3. Tampilan sederhana sehingga tidak akan mengganggu visitor
  4. Sangat ringan dan tidak mempengaruhi kecepatan blog
  5. Responsif di semua layar

Baca Juga : Cara Membuat Widget Recent Post (Postingan Terbaru) ala Blog Mastimon

Nah itulah tadi beberapa keuntungan menggunakan author box ala fahrinheit. Untuk membuatnya sangat mudah karena anda hanya perlu menambahkan beberapa script di dalam template anda. Penasaran bagaimana caranya? Berikut ini langkah-langkah membuat kotak admin (author box) menarik di akhir artikel ala fahrinheit :

1. Masuk ke akun Blogger anda, pilih menu 'Theme' dan masuk menu 'Edit HTML'

2. Cari script /b:skin dengan menggunakan fitur pencarian (Ctrl + F). Jika sudah menemukannya, silahkan tempelkan script berikut ini di bawah kode /b:skin tadi :
<style type='text/css'>
.post_byfix p{padding:0 5px;line-height:25px!important;font:14px Roboto;text-align:left;color:#555}.post_byfix p a{text-decoration:none;color:#3498db}.post_byfix{height:100%;background:#fff;margin:-10px 0 20px;padding:12px;overflow:hidden}.post_byimz{display:block;float:left;padding-right:10px!important;margin-top:1px!important;overflow:hidden}.author-name{color:#444;font-family:’Open Sans’,Helvetica,san-serif;font-weight:700;font-size:17px;text-transform:uppercase;margin-top:10px}.spanshare{color:#444;font-family:’Open Sans’,Helvetica,san-serif;float:left;font-size:17px;text-transform:uppercase;margin-top:8px;margin-right:5px;font-weight:700}.post_byimz img{transition:all .5s ease-in-out;width:100%;height:100%;max-width:120px;max-height:120px;border-radius:100%;background:#FFF;float:left;margin:0 10px 0 0;padding:5px;border:3px solid #e3e3e3}.post_by{width:100%;float:right;color:#423119;width:100%;font-family:arial,Helvetica,san-serif;font-weight:400;font-size:12px}.post_by ul{margin:0;padding:0}.author-name i{color:rgb(17, 143, 249)}.post_by li{list-style:none;padding:3px 10px!important}.adspost{display:block;text-align:center;margin:25px auto}

3. Selanjutnya cari kode script data:post.body dengan menggunakan fitur pencarian. Biasanya akan ada 2-3 kode data:post.body, pilihlah data:post.body yang menggambarkan postingan blog (biasanya terletak paling akhir). Lalu letakkan kode script di bawah ini setelah kode data:post.body tadi :
<div class='post_byfix'><div class='post_by'><div class='post_byimz'>
<span class='author'><a href='https://web.facebook.com/muhammad.f.nizami' title='Fahrinheit'><img expr:alt='data:post.author' src='https://akimg1.ask.fm/assets2/114/063/755/008/normal/avatar.jpg' title='Muhammad Fahrin Nizami'/></a></span></div>
<div class='author-name'><data:post.author/> <i class='fa fa-check-circle'/></div>
  <p>&quot;Blogger Paruh Waktu, Pemimpi Pengangguran Sukses.&quot;</p>
</div></div>
Note :
  • Ganti tulisan merah dengan link menuju sosial media anda
  • Ganti tulisan biru dengan link foto author anda
  • Ganti tulisan hijau dengan bio / caption profil anda

4. Jika sudah klik 'Save', disini anda sudah selesai memasang

Nah itulah tadi cara membuat author box sederhana dan menarik di akhir artikel. Sangat mudah sekali bukan caranya? Selain memiliki tampilan minimalis dan sederhana, author box yang fahrinheit bagikan di atas juga sudah support semua layar baik itu android maupun dekstop komputer. Author box di atas juga tidak akan mempengaruhi kecepatan blog karena sangat ringan. Jika ada masalah dalam pemasangan author box ini anda dapat menanyakannya kepada admin melalui contact di atas atau menanyakannya langsung di kolom komentar di bawah. Demikian artikel kali ini, semoga bermanfaat.
Fahrinheit
Fahrinheit

"Blogger Paruh Waktu, Pemimpi Pengangguran Sukses."

Buka Komentar
Blogger
Disqus
Pilih Sistem Komentar

No comments