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

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,