Tag Conditional Untuk Multi Author Di Blogger

Multi Author Di Blogger
Beberapa hari yang lalu saya sudah sharing sebuah template yang menggunakan author box yang bisa digunakan dengan multi author atau penulis postingan blog lebih dari satu orang. Photo profil yang berada di samping postmeta atau yang berada di bawah judul postingan dan photo profil yang ada di author box-nya akan otomatis menyesuaikan dengan photo profil author postingannya yang diambil dari photo profil Google Plusnya.


Namun ada yang kurang dari auhtor box tersebut, yaitu deskripsi author dan link follow sosmed-nya tidak ikut berubah ketika digunakan multi author. Untuk itu jika blog yang menggunakan template tersebut mempunyai beberapa orang author, maka Anda perlu menggunakan tag conditional untuk mengatur deskripsi dan link follow sosmed-nya yang sesuai dengan auhtornya. 


Untuk live demonya silahkan lihat author boxnya pada link demo di atas yang author box-nya berada di bawah postingan, kemudian silahkan lihat lagi postingan lainnya dengan authornya yang berbeda. Selain photo author yang otomatis menyesuaikan dengan authornya, untuk link author dan deskripsinya juga akan otomatis berubah sesuai deskripsi dari masing-masing authornya. 

Tag conditional untuk multi author tersebut seperti di bawah ini.


<b:if cond='data:post.author == &quot;NAMA AUTHOR&quot;'>

Cara penerapannya seperti di bawah ini, untuk template Kompi Doang dengan multi author silahkan cari kode HTML untuk author box-nya seperti di bawah ini.


<div id='author-box'>
<b:if cond='data:post.authorPhoto.url'>
<img alt='author-photo' expr:src='data:post.authorPhoto.url' height='104' title='author photo' width='104'/>
</b:if>
<span class='author-name'><data:post.author/></span>
<p>Saya hanyalah orang biasa yang menyukai blogging dan mencoba berbagi pengalaman dengan yang lain tentang blogging dan SEO. Semoga bisa bermanfaat.</p>
  <div class='author-follow'>Follow me on: <a href='#' rel='nofollow' style='font-weight:700' target='_blank' title='Facebook'>Facebook</a> | <a href='#' rel='nofollow' style='font-weight:700' target='_blank' title='Twitter'>Twitter</a> | <a expr:href='data:post.authorProfileUrl' style='font-weight:700' target='_blank' title='Google+'>Google+</a></div>
<div class='author-close' onclick='document.getElementById(&apos;author-box&apos;).style.display=&apos;none&apos;;authoricon.style.left=&apos;0&apos;;' title='close'>&#215;</div>
</div>

Kemudian tambahkan kode author box itu dengan tag conditional di atas seperti di bawah ini.


<b:if cond='data:post.author == &quot;NAMA AUTHOR&quot;'>
<div id='author-box'>
<b:if cond='data:post.authorPhoto.url'>
<img alt='author-photo' expr:src='data:post.authorPhoto.url' height='104' title='author photo' width='104'/>
</b:if>
<span class='author-name'><data:post.author/></span>
<p>Saya hanyalah orang biasa yang menyukai blogging dan mencoba berbagi pengalaman dengan yang lain tentang blogging dan SEO. Semoga bisa bermanfaat.</p>
  <div class='author-follow'>Follow me on: <a href='#' rel='nofollow' style='font-weight:700' target='_blank' title='Facebook'>Facebook</a> | <a href='#' rel='nofollow' style='font-weight:700' target='_blank' title='Twitter'>Twitter</a> | <a expr:href='data:post.authorProfileUrl' style='font-weight:700' target='_blank' title='Google+'>Google+</a></div>
<div class='author-close' onclick='document.getElementById(&apos;author-box&apos;).style.display=&apos;none&apos;;authoricon.style.left=&apos;0&apos;;' title='close'>&#215;</div>
</div>
</b:if>

Buat kode di atas sebanyak authornya, jika terdapat tiga orang author maka buatlah tiga buah kode di atas secara berturut-turut kemudian silahkan ganti NAMA AUTHOR sesuai dengan nama author-nya masing-masing. Kemudian sesuaikan deskripsi author dan link-link sosmednya sesuai dengan authornya.

Selamat mencoba....

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments