Cara Memindahkan Penulis dan Label Dibawah Judul Artikel

Artikel kali ini berbagi tentang bagaimana cara memindahkan penulis artikel dan juga label untuk artikel di bawah judul artikel, beberapa template gratis yang disediakan oleh pihak ketiga memang menyediakan tampilan dinamis dan juga instan dalam mempercantik blog, tapi tidak semuanya sesuai dengan yang kita inginkan, dan dalam beberapa tampilan template yang bagus seringkali menempatkan penulis artikel dan label dibawah posting.

Kalau ada yang pertanyaan mengapa kita memindahkan penulis dan label tepat dibawah judul artikel, tak lain kalau menurut saya adalah alasan keindahan, akan lebih baik ketika pengunjung yang akan membaca tulisan kita lebih dini mengetahui siapa yang menulis artikel tersebut dan dalam kategori atau label apa artikel tersebut. Pembahasan kali ini sebenarnya dikhususkan apabila anda telah berusaha memindahkan penulis artikel dan label dari menu tata letak =>Posting blog => Edit. Akan tetapi melalui fitur tersebut tetap saja tidak ada perubahan atau penulis dan label tetap berada di bawah artikel.

Sebelum memulainya setidaknya anda harus memahami tentang bagaimana susunan kode HTML yang menyusun sebuah blog di blogspot, karena apa yang akan diulas disini menyangkut banyak sekali kode HTML yang kemungkinan tidak akan sama dengan struktur kode template blog anda.

Memulai

Sebelum Memulai sebaiknya anda menggunakan browser mozilla firefox, dan anda telah login dalam dashboard blog anda dan lakukan Backup Template terlebih dahulu, hal tersebut penting mengingat resiko kegagalan dalam proses pemindahan sangat tinggi, Jika sudah kemudian masuk dalam menu Edit HTML, kemudian centanglah pilihan Expand Template Widget, lalu tekan CTRL+F pada keyboard anda untuk memunculkan menu pencarian, atau dari menu Edit => Find. Oh ya, sediakan juga segelas kopi dan sebatang rokok untuk menemani anda juga ya. 
Didalam struktur template blogspot, penulis artikel dan label untuk artikel dapat berada pada dua tag, yaitu :


<div class=”post-header>
Yaitu letak penulis artikel dan label berada tepat di bawah judul artikel

<div class=’post-footer-line post-footer-line-1′>
Yaitu letak penulis artikel dan label berada tepat di bawah artikel.

Sedangkan Kode HTML untuk penulis artikel seperti berikut ini :

<span class=’post-author vcard’>
<b:if cond=’data:top.showAuthor’>
<data:top.authorLabel/>
<b:if cond=’data:post.authorProfileUrl’>
<span class=’fn’>
<a expr:href=’data:post.authorProfileUrl’ itemprop=’author’ rel=’author’ title=’author profile’>
<data:post.author/></a></span>
<b:else/>
<span class=’fn’><data:post.author/></span>
</b:if></b:if>
</span>

Sedangkan Kode HTML untuk label Artikel seperti berikut ini :

<span class=’post-labels’>
<b:if cond=’data:post.labels’>
<data:postLabelsLabel/>
<b:loop values=’data:post.labels’ var=’label’>
 <a expr:href=’data:label.url’ rel=’tag’><data:label.name/></a><b:if cond=’data:label.isLast != &quot;true&quot;’>,</b:if>
</b:loop>
</b:if>
</span>
</div>

Baiklah kita mulai pemindahannya, Step by step langkah-langkahnya jangan sampe terlewat ya :
1. Cari Kode Berikut ini:

<div class=’post-footer-line post-footer-line-1′> atau <span class=’post-author vcard’>
Dibawah kode yang anda cari, hapus kode berwarna biru.

<div class=’post-footer-line post-footer-line-1′>
<span class=’post-author vcard’>
<b:if cond=’data:top.showAuthor’>
<data:top.authorLabel/>
<b:if cond=’data:post.authorProfileUrl’>
<span class=’fn’>
<a expr:href=’data:post.authorProfileUrl’ itemprop=’author’ rel=’author’ title=’author profile’>
<data:post.author/></a></span>
<b:else/>
<span class=’fn’><data:post.author/></span>
</b:if></b:if>
</span>;

Screen Shootnya

Lalu Klik Pratinjau, Tunggu sejenak, apabila blog anda dapat ditampilkan dengan normal, berarti tidak ada masalah sejauh ini.

2. Cari kode Berikut ini

<div class=’post-footer-line post-footer-line-2′>
Dibawah kode yang anda cari, hapus kode berwarna biru

<div class=’post-footer-line post-footer-line-2′>
<span class=’post-labels’>
<b:if cond=’data:post.labels’>
<data:postLabelsLabel/>
<b:loop values=’data:post.labels’ var=’label’>
 <a expr:href=’data:label.url’ rel=’tag’><data:label.name/></a><b:if cond=’data:label.isLast != &quot;true&quot;’>,</b:if>
</b:loop>
</b:if>
</span>
</div>

Lalu Klik Pratinjau kembali, Tunggu sejenak, apabila blog anda dapat ditampilkan dengan normal, berarti tidak ada masalah sejauh ini. pada tahap ini coba perhatikan pada halaman template blog anda, pastinya penulis artikel dan label di bawah artikel sudah tidak ada kan, ya, karena sudah dihapus. step selanjutnya, Klik Simpan Template terlebih dahulu.

3. Selanjutnya cari kode dibawah ini :

<div class=’post-header’> atau    <div class=’post-header-line-1’/>
Kemudian tepat dibawah kode

copy kode berikut:

<div class=’post-header-line-1’/>
  <span class=’post-author vcard’>
        <b:if cond=’data:top.showAuthor’>
          <data:top.authorLabel/>
            <b:if cond=’data:post.authorProfileUrl’>
              <span class=’fn’>
                <a expr:href=’data:post.authorProfileUrl’ itemprop=’author’ rel=’author’ title=’author profile’>
                  <data:post.author/>
                </a>
              </span>
            <b:else/>
              <span class=’fn’><data:post.author/></span>
            </b:if>
        </b:if>
      </span>
    </div>

<span class=’post-timestamp’>
        <b:if cond=’data:top.showTimestamp’>
          <data:top.timestampLabel/>
        <b:if cond=’data:post.url’>
          <a class=’timestamp-link’ expr:href=’data:post.url’ itemprop=’url’ rel=’bookmark’ title=’permanent link’><abbr class=’published’ expr:title=’data:post.timestampISO8601′ itemprop=’datePublished’><data:post.timestamp/></abbr></a>
        </b:if>
        </b:if>
      </span>

      <span class=’reaction-buttons’>
        <b:if cond=’data:top.showReactions’>
          <table border=’0′ cellpadding=’0′ cellspacing=’0′ width=’100%’><tr>
            <td class=’reactions-label-cell’ nowrap=’nowrap’ valign=’top’ width=’1%’>
              <span class=’reactions-label’>
              <data:top.reactionsLabel/></span> </td>
            <td><iframe allowtransparency=’true’ class=’reactions-iframe’ expr:src=’data:post.reactionsUrl’ frameborder=’0′ name=’reactions’ scrolling=’no’/></td>
           </tr></table>
        </b:if>
      </span>

   <span class=’star-ratings’>
        <b:if cond=’data:top.showStars’>
           <div expr:g:background-color=’data:backgroundColor’ expr:g:text-color=’data:textColor’ expr:g:url=’data:post.absoluteUrl’ g:height=’42’ g:type=’RatingPanel’ g:width=’280’/>
        </b:if>
      </span>

   <span class=’post-comment-link’ style=’Float:right;’>
        <b:if cond=’data:blog.pageType != &quot;item&quot;’>
          <b:if cond=’data:blog.pageType != &quot;static_page&quot;’>
            <b:if cond=’data:post.allowComments’>
              <a class=’comment-link’ expr:href=’data:post.addCommentUrl’ expr:onclick=’data:post.addCommentOnclick’><b:if cond=’data:post.numComments == 1′>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
            </b:if>
          </b:if>
        </b:if>
      </span>

 <div class=’post-header-line-2’/>
    <span class=’post-labels’>
        <b:if cond=’data:post.labels’>
          <data:postLabelsLabel/>
          <b:loop values=’data:post.labels’ var=’label’>
            <a expr:href=’data:label.url’ rel=’tag’><data:label.name/></a><b:if cond=’data:label.isLast != &quot;true&quot;’>,</b:if>
          </b:loop>
        </b:if>
      </span>
      </div>

Klik pratinjau Terlebih dahulu, jika halaman dapat ditampilkan dengan baik, tentu akan terlihat perbedaan yaitu munculnya penulis dan label, serta komentar tepat di bawah judul artikel, jangan lupa setelah itu klik simpan template terlebih dahulu..

Semoga bermanfaat..

Iklan

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s