Go Blog Go

Memindahkan Icon Author, Post Date, Labels dan Comment Dibawah Judul Posting

Posted by Go Blog Go Posted on 5:18 PM with 3 comments
Assalamu'alaikum Wr.Wb.

Pada Share posting kali ini Go Blog Go akan berbagi cara bagaimana menambahkan Icon Author Name, Post Date, Labels dan Comment atau memindahkan Icon tersebut. Seperti yang Mojang dan Bujang tau bahwa Icon Identitas ini berada dibawah disetiap postingan yang ditampilkan.

  • Masuk ke Blogger dengan account Anda.
  • Dari Blogger Dashboard -> Klik Template -> Edit HTML.
  • Jangan lupa kalau mau Back-Up dulu Template-nya.
  • Klik kotak Expand Widget Templates.
  • Cari kode seperti ini <div class='post-header-line-1'> atau <div class='post-header'> gunakan(Ctrl+F) untuk mempercepat pencarian
Tambahkan Kode berikut ini sesudah kode diatas tadi :

<font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1xh7mHDsabzMg8EUAJlnE04y5nzXwk0sofQjhoGESEAJ9f7dSPJFNyfQuDG5BvUpoOQGAhXscUnXYaDA2K4y2KyUsPSZilkkhblsMG0MM5mlkXiABHxamqeWqkcWuOkzCsgTgqZ6Ppn3K/s1600/author.gif) no-repeat scroll top left;padding-left:25px;font-size:11px;'><data:post.author/></font> | <font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5QYHBlqHyadzUbfg_fpxPCZrXUZzw0S54GBwmGPNPUvXOvk9FPu5ZxSURIfHXpT3XrQpohtkwnFbEFxljox8IaPK1TRxcE03mRdEdMvGMtHgyvvYt7XwrSQnXrmRZmct1Pp2C7SBX7sXm/s1600/clock_icon.gif) no-repeat scroll top left;padding-left:25px;font-size:11px;'><data:post.timestamp/></font> | <font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjCliMSb8mwL36rJk0x-DzYHvWrJHbq1BEVlvgQMyhSoDGrqPn1Oc6ycrXxDyLdX6CxWO5pZCc1Wp06V19fJol3xk5VM1ua-k4xaPTGEo92aQwtHrPDUvCVrmArpdAAzY0rMH0tUAwEIC8/s1600/tag+icon.gif) no-repeat scroll top left;padding-left:25px;font-size:11px;'><b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url + &quot;?max-results=8&quot;' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'>|</b:if>
</b:loop>
</b:if>
</font>
<span class='post-comment-link' style='Float:right;'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
        <b:if cond='data:post.allowComments'>
   <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA9uvj5USAplql0YyfNc0NoUW61qW0NGma9n2dpvnBE5f2POVcJeGQM9yCiv8uLDip7hZMo3MaSi74JW8snaBVKpl6JFRDmHuRZjmGn670D0An3yvhLoXAoqPPqqdycv7B2dmpXL_wKVaG/s1600/comment-icon.png) no-repeat;Padding-left:20px;'><b:if cond='data:post.numComments == 0'>Be the first to comment!<b:else/> <b:if cond='data:post.numComments == 1'><data:post.numComments/> Comment so far<b:else/><data:post.numComments/> Comments so far</b:if> </b:if></a>
        </b:if>
    </b:if>
</span>

Save template-nya kemudian preview

Cara diatas adalah untuk menambahkan bagi template-nya yang belum ada Icon Author Name, Post Date, Labels dan Comment tetapi biasanya sudah ada dalam bawaan template-nya, untuk cara lain yaitu memindahkan Icon Author Name, Post Date, Labels dan Comment dari posisi dibawah posting dipindahkan dibawah judul postingan, cara-nya :
Cari kode <div class='post-footer'>, biasa-nya ada 2 kode ini disetiap template, nah kode yang pertama yang dicari.
Kemudian scrolling kebawah temukan kode <div class='post-footer-line post-footer-line-1'>, pas dibawah-nya ada Kode HTML kurang lebih seperti 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>

<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='post-comment-link'>
<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'>
<data:post.commentLabelFull/>:
</a>
</b:if>
</b:if>
</b:if>
</span>

<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>

Mojang dan Bujang hanya tinggal Highlight (disorot) kemudian di Cut (Ctrl+X) pindahkan ke Kode HTML <div class='post-header-line-1'> atau <div class='post-header'> dibawah-nya seperti Cara pertama diatas.
Save template-nya kemudian preview.
Sebagai catatan kecil : untuk icon bisa diganti sesuai dengan Image yang Mojang dan Bujang punya. 


That's..it !!! Mojang dan Bujang semoga bisa bermanfaat share posting ini. Go Blog Go .....!! Amiin


Wassalam,



3 comments:

  1. Gimana mau ngeditnya bro admin...bagusan didelete aja tu judulnya....

    ReplyDelete
    Replies
    1. Maaf baru blz, soal edit-nya cuma saran jangan langsung di edit HTML Blogspot-nya, tapi pakai software editor seperti Notepad++ atau sejenis-nya. Tinggal ikuti cara-nya saja. Makasih atas kunjungan-nya

      Delete
  2. Tanks gan nanti akan saya coba untuk mdif template asli blogger semoga dapat saya lakukan dan jadi....lagi belajar pengin buat tampilan template sendiri kok yah susah gitu....

    ReplyDelete

Catatan :
1.Untuk menyisipkan Kode, gunakan Tag <i rel="code">Kode Anda Di-Sini...</i>
2.Untuk menyisipkan Kode Panjang, gunakan Tag <i rel="pre">Kode Anda Di-Sini...</i>
3.Untuk menyisipkan Kode Gambar, gunakan Tag <i rel="image">URL Gambar Anda Di-Sini...</i>
4.Untuk menyisipkan Catatan, gunakan Tag <b rel="quote">Catatan Anda Di-Sini...</i>

NB: Sebelum menyisipkan Kode, konversi terlebih dulu Kode-nya agar bisa tampil di Kolom Komentar

 
Powered by : Blogger
Copyright © 2011. Go Blog Go - All Rights Reserved
Template Created by Go Blog Go Published by Wong Wayang