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.

Cara Membuat Dan Menampilkan Profil Author Blog Responsive

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.

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=’https://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.

LEAVE A REPLY

Please enter your comment!
Please enter your name here