Cara Membuat Kotak Author / Admin Responsive di Blogger

Yang lagi demen Otak - atik template Blog, nih saya bikin artikel tentang Cara Membuat Kotak Author / Admin Responsive di Blogger. dan pastinya responsive bagi template blog kalian. gampang banget sih, yu di simak.

Beberapa fitur kotak penulis profesional ini diantaranya adalah:

1. Dukungan untuk banyak penulis, setiap Author Box akan berbeda namanya (siapa si penulisnya)
2. Otomatis dari Google Plus
3. Terlihat elegan dan simple sehingga tampak lebih ganteng
4. Desain yang responsive, menyesuaikan dengan layar smartphone (Mobile)
5. Kode yang pendek dan singkat sehingga tidak mempengaruhi kecepatan loading blog
6. Desain CSS yang sederhana
7. Mudah untuk dilakukan: Install dan Customization
8. Author box widget di bawah posting blog (di bawah artikel, diatas Related Post)
9. Setelan yang dibuat khusus untuk template blogger kita, - Apa pun templatnya, work 100% sob!

Cara Membuat Kotak Author / Admin Responsive di Blogger 

1. Template > Edit Template

2. Cari kode ini: ]]> </ b: skin> di dalam template

3. Copy kode dibawah ini:

/* Author Box CSS CIRCLECORN.BLOGSPOT.CO.ID Start*/
.authorboxwrap{background:#fff;margin:20px auto 20px;padding:20px;overflow:hidden;border:1px solid #bdc3c7;}
.avatar-container{float:left;margin:0 20px 0 0;border-radius:100%}
.avatar-container img{width:90px;height:auto;max-width:100%!important;border-radius:100%;transition:all .3s;}
.avatar-container img:hover{transform:rotate(-15deg)}
.author_description_container h4{font-size:18px;font-weight:600;display:block;margin:0;margin-bottom:2px}
.author_description_container h4 a{color:#333}
.author_description_container p{margin:0;color:#333;font-size:14px;font-family:'Poppins',sans-serif;margin-bottom:8px;line-height:25px;font-weight:400}
.social-links li{list-style:none!important;float:left}
.social-links a{border-bottom:none}
.social-links a:after,.social-links a:before{content:none!important}
.social-links li a{background:rgba(0,0,0,0.5);color:#fff;font-size:13px;text-align:center;display:inline-block;padding:0;margin:0 10px 0 0;width:30px;height:30px;line-height:30px;border-radius:100%}
.social-links li:nth-child(1) a{background:#516ca4;}
.social-links li:nth-child(2) a{background:#00c3f3;}
.social-links li:nth-child(3) a{background:#f20000;}
.social-links li a:hover{opacity:.9;color:#fff}
/* Author Box CSS CIRCLECORN.BLOGSPOT.CO.ID Start*/

4. Paste kode tersebut, diatas kode ]]></b:skin> 

Baca juga : Cara Menghapus Atribusi di Blogger

5. Masih di template, cari kode ini: <div class = 'post-footer'>

6. Copy kode dibawah ini, letakkan (paste) diatas kode <div class = 'post-footer'> atau jika tidak muncul box nya setelah di save template. kamu bisa simpan kode tersebut, di bawah kode <data:post.body/>

<!-- Author Box CSS CIRCLECORN.BLOGSPOT.CO.ID Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='authorboxwrap'>
<div class='authorboxfull'>
<div class='avatar-container'>
<a href=''>
<img class='author_avatar' expr:alt='data:post.author' expr:src='data:post.authorPhoto.url' height='90' width='90'/>
</a>
</div>
<div class='author_description_container'>
<h4><a href='alamat website tentang author km sob' rel='author'><data:post.author/></a>
<i class='fa fa-check-circle' style='color:rgb(17,143,249);font-size:14px;' title='Verified Author'/></h4>
<p>blogger yang menyikapi dingin dengan segala perubahan dunia. bergerak hanya karena ada sesuatu yang dia minati <b/>
</p>
<div class='social-links'>
<li><a class='external external-link' href='alamat fb km km sob' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a></li>
<li><a class='external external-link' href='alamat twitter km km sob' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a></li>
<li><a class='external external-link' href='alamat gplush km km sob' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a></li>
<div class='clr'/>
</div>
</div>
</div>
</div>
<div style='clear:both'/>
</b:if>

7. Save template nya sob!.

NB: silahkan ubah atau ganti semua link URL yang saya warna- kuning diatas dengan link URL kepunyaan Anda sendiri. 
Kode seperti <div class = 'post-footer'>  dan <data:post.body/> terkadang berbeda-beda dan lebih dari satu. coba aja satu persatu ya.

Mengisi Deskripsi Author Box di Google plus
Buka Profil Google: https://aboutme.google.com/
Edit Cerita > Edit Perkenalan (bukan semboyan)
Isi deskripsi dengan kalimat menarik namun singkat, padat dan jelas
Simpan perubahan, Ok!

Mengaktifkan Fitur Author Box di Layout Blogger
Masuk ke Tata Letak (Layout) Blogger
Tap "edit" pada Blog Post
Centang Ok pada "Show Author Profile below Post"

Save, Ok!

jreng, jreng. selamat sobat udah punya author box samaan sama yang ada di blog ini. 

tulis di kolom komentar jika kode script ini tidak berjalan di blog kamu sob!

Tweet

Baca Juga:

Unknown

blogger yang menyikapi dingin dengan segala perubahan dunia. bergerak hanya karena ada sesuatu yang dia minati

Hot topik lainnya

— Add Comment — Blogging