Cara Membuat Kotak Author Profile Blogger

cara membuat widget Box Kotak author bio profile penulis blogger dibawah postingan keren menarik dan responsive.cara memunculkan menampilkan box author profile blogger di blog.biasanya kotak/ box profile author bio blogger sudah ada, namun jika anda mau menggantinya kali ini admin akan share berbagai macam kotak box profile bio blogger yang keren. sekalian cara ini juga mengganti dan mengatasi author profile blog sempat yang hilang. tentunya box profile ini dilengkapi tombol share media sosial GooglePlus(G+) dan anda juga dapat mengubah nama tampilan yang terdapat didalamnya .

Berbicara tentang author profile blogger banyak sekali manfaat yang terdapat didalamnya, rata rata blogger kelas atas memasangnya untuk keperluan mengetahui siapa penulis artikel atau penulis blog tersebut. Dengan memasang widget Kotak Box author profile blogger , pengunjung akan mudah mengenali siapa sebenarnya pendiri blog itu. selain itu masih banyak lagi fungsi yang terdapat didalam author profile blog.

Untuk cara pembuatannya sendiri sebenarnya mudah ada beberapa template blog yang memang sudah menyediakannya kita tinggal menyetingnya saja, namun jika anda ingin sekali memodifnya menjadi sedikit lebih menarik atau keren maka simak caranya berikut ini.

Jika ada bingung menyeting profile blogger kali ini Kotak box author profile blogger yang akan admin bagikan kali ini anda tinggal meletakan linknya saja jika ada tak mau repot untuk menyeting dari profile blogger anda

Oke sobat untuk cara lengkapnya silahkan ikuti langkahnya berikut ini:

cara memasang kotak author profile blogger dibawah postingan blog

#kotak author profile blogger style 1

berikut secreenshot penampakan kotak box author profile style 1

Cara Membuat Kotak Author Profile Blogger
Cara Membuat Kotak Author Profile Blogger

Oke untuk cara membuatnya silahkan ikuti langkahnya berikut ini :

1. Silahkan anda masuk ke dashboard blogger anda
2. LAngsung saja pergi kemenu edit HTML
3. Copy kode dibawah ini dan letakan tepat diatas kode ]]></b:skin>
/* jagoankode author profile */
.admin-tulisan{display:block;width:auto;background:#f3f3f3;border:2px solid #fff;box-shadow:0 1px 3px #000;-moz-box-shadow:0 1px 3px #000;-webkit-box-shadow:0 1px 3px #000;padding:0;margin:30px 0 10px 0;font:normal 12px Arial, Sans-Serif;color:#222;}
.admin-tulisan .kontainer{padding:5px;}
.admin-tulisan h4{background:#33315d;border:none;border-bottom:1px solid #699019;color:#fff;text-transform:normal;text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);font:bold 12px Arial,Sans-Serif;padding:5px 10px;margin:0 0 0 0;display:block;}
.admin-tulisan h4 a{color:#FEEA83;}
.admin-tulisan img{width:70px;height:70px;margin:0 10px 0 0;float:left;border:1px solid #954B02;padding:2px;background:#C36702;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;margin: 0px;border: 5px solid #eee;-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);-moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);box-shadow: 4px 4px 4px rgba(0,0,0,0.2);-webkit-transition: all 0.5sease-out;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;-webkit-transform: rotate(-7deg);-moz-transform: rotate(-7deg);-o-transform: rotate(-7deg);}
/* jagoankode author profile */
4. Oke setelah itu copy kode dibawah ini lalu letakan tepat dibawah kode <data:post.body/> yang kedua

<!-- jagoan kode blog script -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='admin-tulisan'>
<h4>Ditulis Oleh :<a expr:href='data:blog.homepageUrl'><data:post.author/></a> | Jagoan Kode Blog</h4>
<div class='kontainer'>
<img src='https://scontent-sin6 2.cdninstagram.com/t51.288515/s1080x1080/e15/fr/15338331_197975987328478_7517741477372362752_n.jpg'/> Terima kasih telah berkunjung ke blog ini jika kalian suka silahkan share. Artikel saya yang berjudul<a expr:href='data:post.url'><data:post.title/></a>. artikel ini resmi ditulis oleh <data:post.author/> .Pada hari ini khususnya<data:post.dateHeader/>. Jika anda ingin sebarluaskan artikel ini, atau meletakan artikel ini sebagai tulisan anda mohon sertakan <strong>sumber link asli.</strong> Kritik dan saran dapat anda sampaikan melalui kotak komentar. Trimakasih <center><strong>www.jagoankode.blogspot.com</strong></center>
<div style='clear:both;'/>
</div>
</div>
</b:if>
<!-- Jagoankodeblog script-->

5. SAVE TEMPLATE lalu lihat hasilnya
catatan :
Ganti tulisan merah dengan data data author blog yang anda inginkan
Ganti tulisan biru dengan Kata kata profile author yang anda inginkan
Sedangkan tag <img src warna ungu ganti link photo profile yang anda punya.
Penutup...

Demikianlah Artikel yang saya tulis ini tentang membuat kotak profile blog yang keren dan menarik tentunya, sekian dari admin semoga kalian pada suka yaa, salam .. Baca Juga Updatan Lain Postingan Ini yaa :)

Postingan terkait:

Belum ada tanggapan untuk "Cara Membuat Kotak Author Profile Blogger"

Posting Komentar