Cara Membuat, Menampilkan Profil Author Blog Responsive
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
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> .
Saya sertakan contoh gambar ntuk mempermudah bisa anda lihat pada gambar dibawah ini bila gambar kurang jelas bisa di open new tab brother!
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/>
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.
Tahap 1. Kemudian Masuk Blogger Dashboard >> Layout >> Blog Posts, kemudian klik "Edit"
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.
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.
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;}
.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!
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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNrHULoSyWHsPZR7OZoG5zqOCYPe-jbkZ4mhaqMAxxmqef-1XTVKh2IpQznrY0T6svP9eA03O4fzUzSwV13xY0ZRBMI2XynP81NL1MZwv1xqMPa2bTOBMeGpMa3Q-QGc01DzpyW0q5v-Y/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>
<div class='authorLeft'>
<div class='authorAvatar'>
<img alt='' class='avatar avatar-120 photo dontshowit showit' height='120' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNrHULoSyWHsPZR7OZoG5zqOCYPe-jbkZ4mhaqMAxxmqef-1XTVKh2IpQznrY0T6svP9eA03O4fzUzSwV13xY0ZRBMI2XynP81NL1MZwv1xqMPa2bTOBMeGpMa3Q-QGc01DzpyW0q5v-Y/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 Menampilkan Profil Author Box Blogger Responsive
Tahap 1. Kemudian Masuk Blogger Dashboard >> Layout >> Blog Posts, kemudian klik "Edit"
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.
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.
