Cara Membuat, Menampilkan Profil Author Blog Responsive

Daftar ISI [Lihat]

Saat ini anda sedang membaca tentang tutorial Cara Membuat Profil Author Blog Responsive Dibawah Postingan dengan Css. Berikut ini akan saya share tentang Cara Membuat Author Box di blogger yang Responsive, fungsi dari author box itu sendiri adalah pesan penulis untuk pembaca / pengunjung blog itu sendiri untuk isi nya tergantung penulis ini sendiri biasa terletak pada bawah postingan. Oke, mari kita terapkan ke dalam blog sobat dan ikuti tutorial mudah di bawah ini.

Widget ini berfungsi untuk membuat dan menampilkan foto profile pengarang (Author Box), deskripsi pengarang dan sosial media pengarang. Keunggulan dari widget ini yaitu responsive. Berikut ini tutorial cara membuat author box responsive blogger dibawah postingan blog.

Ketahui juga: Cara Membuat Internal Link Secara Otomatis di Blogger

Cara Membuat Author Box Blogger Responsive


Tahap 1. Masuk ke www.blogger.com
Tahap 2. Dashboard >> Template >> Edit Template lalu anda cari kode ]]></b:skin> atau </style>
dan copy kode di bawah ini Diatas ]]></b:skin> atau </style> .
/* CSS Author Box */
.articleAuthor{overflow:hidden;margin-bottom:10px}
.authorContent{overflow:hidden;background:#fafafa;padding:20px;margin:1px;margin-bottom:0}
.authorLeft{overflow:hidden;float:left;margin-right:20px;}
.authorLeft .authorAvatar{overflow:hidden;}
.authorLeft .authorAvatar img{display:block}
.authorDetails{overflow:hidden;margin-bottom:5px;}
.authorDetails h2{font-size:16px;color:#61BFE0}
.authorDetails span{display:block;padding-top:3px}
.articleAuthor .authorContent p{line-height:20px;margin-bottom:10px;margin:0;}

Saya sertakan contoh gambar ntuk mempermudah bisa anda lihat pada gambar dibawah ini bila gambar kurang jelas bisa di open new tab brother!
Cara Membuat Dan Menampilkan Profil Author Blog Responsive

Tahap 3. Lalu cari kode <data:post.body/>  biasanya ada 4 nama <data:post.body/> yang sama kalau ditemplate saya ada pada nomor 3 brother lalu Copy kode dibawah ini, lalu anda Paste dibawah kode <data:post.body/>
<div class='authorContent'>
<div class='authorLeft'>
<div class='authorAvatar'>
<img alt='' class='avatar avatar-120 photo dontshowit showit' height='120' src='https://1.bp.blogspot.com/-rd0KA7Qft3M/XARTpF2gsuI/AAAAAAAAB3w/zLKVBbZAu1ggFMD_SBVuttangdBjhy7SgCLcBGAs/s200/sumekar31_com2.png' width='120'/>
</div>
</div>
<div class='authorDetails'>
<h2>Penulis <a href='http://www.sumekar31.com' rel='author' title='Posts by Admin'>www.sumekar31.com</a></h2>
</div>
<p>Semoga Artikel blog ini bermanfaat bagi para pengunjung pada umumnya dan pada penulis khususnya, Amien... Jangan lupa subscribe!</p>
</div>

Gantilah warna biru diatas sesuai dengan selera anda ya brother. Dan untuk mempermudah proses pengeditan anda bisa lihat pada gambar dibawah ini, apabila gambar kurang jelas bisa anda open new tab.
Cara Membuat Dan Menampilkan Profil Author Blog Responsive

 

Cara Menampilkan Profil Author Box Blogger Responsive


Tahap 1. Kemudian Masuk Blogger Dashboard >> Layout >> Blog Posts, kemudian klik "Edit"
Cara Membuat Dan Menampilkan Profil Author Blog Responsive

Tahap 2. Pada halaman berikut ini, scroll ke bawah, cari "Tampilkan Penulis Profil di bawah posting" pilihan-kotak dan klik "Simpan" tombol untuk menyimpan pengaturan Anda.
Cara Membuat Dan Menampilkan Profil Author Blog Responsive

Akhir Kata

Terima kasih teman-teman telah mengunjungi Sumekar31 dan telah membaca artikel Cara Membuat dan Menampilkan Profil Author Box pada Blog Resposive ini. Silakan terus kunjungi situs ini untuk lebih banyak artikel dan informasi baru. Sampai nanti selamat tinggal. Semoga harimu indah dan menyenangkan.
Tags :
Berbagi :

Posting Komentar

Kami memiliki kebijakan dalam berkomentar di Blog ini :

— Dilarang promosi suatu barang
— Dilarang jika memasang link aktif di komentar
— Dilarang keras melakukan promosi iklan
— Dilarang menulis komentar yang berisi sara, bully atau cemuhan


NB : Komentar yang melanggar tidak akan ditampilkan

Kebijakan komentar yang bisa Anda temukan selengkapnya disini

Dukungan :

Jika menyukai dengan artikel blog kami, silahkan Ikuti blog ini.
-----------------------------------------