Friday, May 05, 2017

Cara Terbaru Memasang Multi Author Box Keren Di Setiap Postingan Blog

author photo
Cara Terbaru Memasang Multi Auhtor Box Keren Di Setiap Postingan Blog
Pekanan.com- Pada kesempatan kali ini saya akan memberikan tutorial bagaimana cara untuk membuat author profil dibawah setiap postingan blog valid HTML5.

Kotak profil ini berguna untuk memberi tahu bahwa yang menulis artikel adalah orang yang muncul di kotak profil disetiap postingan, multi author profil ini sangat cocok digunakan oleh blog dengan beberapa admin, artinya yang mengelola blog bukan hanya satu orang, dengan memasang multi author box dibawah ini maka setiap penulis akan muncul masing-masing profilnya sesuai dengan artikel yang mereka tulis.

Multi author box ini selain untuk memberi tahu kepada visitor bahwa sobat yang menulis juga memberikan kesan propesional dan kredibelitasnya tidak diragukan lagi, bagaimana tidak? visitor bisa langsung melihat siapa penulis artikel dari website yang dia temukan.

Oleh karena itu, multi author box ini sangat direkomendasikan untuk blog yang dikelola oleh kelompok bukan hanya oleh satu orang.

Lalu bagaimana cara membuat multi author box disetiap postingan blog ini? silahkan sobat ikuti tutorialnya dibawah ini:

Cara Terbaru Memasang Multi Auhtor Box

1. Petama silahkan masuk ke blog>theme>edit HTML.
2. Kemudian copy kode dibawah ini diatas kode </style> atau bisa juga diatas kode ]]></b:skin>

/* CSS Multi Author Box */
.authorboxwrap{background:#fff;margin:0 auto 20px;padding:20px;overflow:hidden;border:1px solid #ccc;}
.avatar-container {float:left;margin-right:20px;}
.avatar-container img{width:110px;height:auto;}
.author_description_container h4{font-weight:700;font-size:16px;display:block;margin:0;margin-bottom:2px}
.author_description_container h4 a{color:#ef4824}
.author_description_container h4 a:hover{color:#404040}
.author_description_container p{margin:0;color:#888;font-size:95%;margin-bottom:8px}
.authorsocial a{display:inline-block;text-align:center;margin-right:10px}
.authorsocial a i{font-family:Fontawesome;width:20px;height:20px;line-height:20px;padding:5px;display:block;opacity:1;border-radius:2px;transition:all .3s;}
.authorsocial a:nth-child(1) i {background:#2d609b;color:#fff;}
.authorsocial a:nth-child(2) i {background:#19bfe5;color:#fff;}
.authorsocial a:nth-child(3) i {background:#eb4026;color:#fff;}
.authorsocial a:hover:nth-child(1) i,.authorsocial a:hover:nth-child(2) i,.authorsocial a:hover:nth-child(3) i {opacity:0.90;}
3. kemudian paste kode dibawah ini tepat setelah kode  <data:post.body/>

<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='110' width='110'/>
</a>
</div>
<div class='author_description_container'>
<h4><a href='#' rel='author'><data:post.author/></a></h4>
<p>
<data:post.authorAboutMe/> 
</p>
<div class='authorsocial'>
<a class='img-circle1' href='#' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a>
<a class='img-circle2' href='#' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a>
<a class='img-circle3' href='#' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a>
<div class='clr'/>
</div>
</div>
</div>
</div>
<div style='clear:both'/>
</b:if>

4. Setelah itu silahkan save.

Cara Setting:

1. Agar deskripsi dari setiap author muncul maka mereka harus mengisi masing-masing deskripsi di google plus mereka, sehingga nanti akan muncul tentang pemilik blog di author box ini, untuk settingnya silahkan sobat log in ke google+>About sobat, kemudian isi deskripsi sobat.

Cara Terbaru Memasang Multi Auhtor Box Keren Di Setiap Postingan Blog

2. silahkan seting seperti gambar dibawah ini

Cara Terbaru Memasang Multi Auhtor Box Keren Di Setiap Postingan Blog

3. save.
4. satu langkah lagi, agar mulit author box ini benar-benar muncul di setiap postingan sobat, silahkan pergi ke tataletak

Cara Terbaru Memasang Multi Auhtor Box Keren Di Setiap Postingan Blog

5. Setting seperti gambar dibawah ini

Cara Terbaru Memasang Multi Auhtor Box Keren Di Setiap Postingan Blog

6. kemudian klik ok.
7. selesai.

Bagamina mudah bukan? silahkan ikuti langkah-langkahnya dengan benar, jika ada pertanyaan silahkan tuliskan di kolom komentar.

Demikian Cara Terbaru Memasang Multi Auhtor Box Keren Di Setiap Postingan Blog, semoga bermanfaat.
Advertisement
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Selamat Datang di Blog Pekanan.com

Next article Next Post
Previous article Previous Post