Update Terbaru
Loading...
Home » , » Membuat Icon Author, Post Date, Labels dan Comment Dibawah Judul Posting
Published On : Rabu, 05 Juni 2013
10.37.00 | Admin | No Comments

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


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/AVvXsEh-9mDkphhp_7Iaj6CGvqKSJck01YKXEGHjMZf9q7dYzIarRISh0hreb6Jb6i8YFPERsf6fqhVR7wtuHnQmxL9v1tc6InMl08NuhYEpJA8Nv2DCo0d4t1cJJ9rfjtbXSezf4pSXQl__Bkw3/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/AVvXsEiWmZzrRiW1bjSDDYCxKPr7cbWIFWhhs4e5bMECCAAdgSTVxdue8pObNK99Rc5V3Fl5I5M6fCorQxfNCfBmI1-4K6nb_V6Wza8Rk508LQftJFdG4pXWv2Xb9hVtCsaJ_gjt9oejOm-mMuvb/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/AVvXsEjESZPQJ67AkXHiKPy-NFLEfPp-P1Gc4wSqsILv5XTMAODnCjyv7f9J_z8Rs_LYRhPN-wZqE7pHeArVRpzP5pistGhdmWe4n0_Vt-zL1qAEmYHcKcufleONjmyjEvJ77WRf1LsAPE5IrNDe/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/AVvXsEjpk6KuKMYD4A4HV8AoLijSnjdWzOAlKVJYxzRwSTMtxvgQTB6rb3ZYrBnFN4t0W49Twb0-8501xupGBSUhUGhUqOrHi687Pdgkogj2kkwVKclufbNUbkm173of1cedcCAjS75dLg44Q9_N/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>

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


Related Post

0 komentar:

Posting Komentar

Referensi : DTE | MDF Blog | MKR Site
Copyright © 2013. Gembulz Blog's - All Rights Reserved
Template Created by Creating Website Modify by Gembulz Blog's
Powered by Blogger Top