Kemarin malam coba edit template ini yaitu Memindahkan Penulis Artikel Ke Bawah Judul Posting. Defaultnya penulis/author blog ditampilkan dengan kata Diposkan oleh…, label dan jumlah komentar suka berada dibawah artikel, kemudian dipindahkan keatas. Maksudnya sih supaya pengunjung yang akan membaca lebih dini mengetahui siapa penulis dan kategori atau label artikel tersebut.. Selebihnya yaa.. coba-coba aja sekedar iseng. hehee…
Beberapa template gratis dari 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.
Kita juga tahu bahwa setiap Template suka beda susunan atau kode HTML nya.. itu sih biasa.. lha wong tergantung selera pembuatnya dan untuk template yang saya obrak-abrik ini , untuk Memindahkan Penulis Blog dan Label ke Bawah Judul Artikel caranya memang agak ribet.
Namun patokan kita bahwa dalam 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 di bawah judul artikel<div class=’post-footer-line post-footer-line-1′>
Yaitu letak penulis artikel dan label berada tepat di bawah artikel.
Ok inilah cara yang saya lakukan untuk Memindahkan Penulis Artikel Ke Bawah Judul Posting :
- Log in ke account sobat di blogger.com
- Klik tanda panah, lalu pilih Template
- Sangat disarankan sebaiknya backup dulu template dengan klik Backup / restore atau Cadangkan / Pulihkan, lalu klik download full template.
- Klik tanda X untuk kembali ke menu template
- Selanjutnya pilih Edit HTML --> klik Procced atau proses
- Centang pada Expand Widget Templates
- Gunakan Ctrl +F untuk cari kode , lalu hapus yang warna pink
<div class='post-footer-line post-footer-line-1'>
Disini terdapat Kode Author, Waktu pembuatan, Jumlah komentar , dll.
</div><div class='post-footer-line post-footer-line-2'>
Hapus code di bawah ini
</div><div class='post-footer-line post-footer-line-3'>
Hapus code dibawah ini
</div> - Lengkapnya seperti dibawah ini, silahkan kode warna pink dihapus
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:post.dateHeader/>
<data:top.authorLabel/>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
<a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</span>
<b:else/>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<span itemprop='name'><data:post.author/></span>
</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'>
<meta expr:content='data:post.url' itemprop='url'/>
<a class='timestamp-link' expr:href='data:post.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 != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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-icons'>
<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/>
</a>
</span>
</b:if><!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span> <div class='post-share-buttons goog-inline-block'>
<b:if cond='data:post.sharePostUrl'>
<b:include data='post' name='shareButtons'/>
</b:if>
</div>
</div><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 != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
</div><div class='post-footer-line post-footer-line-3'>
<span class='post-location'>
<b:if cond='data:top.showLocation'>
<b:if cond='data:post.location'>
<data:postLocationLabel/>
<a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
</b:if>
</b:if>
</span>
</div></div>
</div> - Copy code warna merah di bawah ini dan pastekan di atas code yang berwarna hitam ( <div class='post-header-line-1'/> ).
<div class='post-header-line-1'/>
<div style='margin-bottom:40px;'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</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' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><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'>
<b:if cond='data:blog.pageType != "item"'>
<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>
</span>
<!-- backlinks -->
<span class='post-backlinks post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.showBacklinks'>
<a class='comment-link' expr:href='data:post.url + "#links"'><data:top.backlinkLabel/></a>
</b:if>
</b:if>
</span>
<span class='post-icons'>
<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='http://www.blogger.com/img/icon18_email.gif' width='18'/>
</a>
</span>
</b:if>
<span class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</span>
<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</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 != "true"'>,</b:if>
</b:loop>
</b:if>
</span>
<span class='post-location'>
<b:if cond='data:top.showLocation'>
<b:if cond='data:post.location'>
<data:postLocationLabel/>
<a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
</b:if>
</b:if>
</span></div> - Lakukan Preview dulu, kalau sudah ok baru simpan templete .
Itulah yang saya lakukan dalam Template Blog Tutorial Dan Bisnis ini.
Selanjutnya dalam Template blog yang lain, urutannya sama, hanya kode pada point 8 sedikit beda, lengkapnya begini : (Hapus yang warna pink)
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
<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'>
<b:if cond='data:blog.pageType != "item"'>
<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 cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</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' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span>
<span class='reaction-buttons'>
</b:if>
</b:if>
</span>
<!-- backlinks -->
<span class='post-backlinks post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.showBacklinks'>
<a class='comment-link' expr:href='data:post.url + "#links"'><data:top.backlinkLabel/></a>
</b:if>
</b:if>
</span>
</div><div class='post-footer-line post-footer-line-2'>
Hapus code yang ada di antara ini
</div><div class='post-footer-line post-footer-line-3'>
Hapus code yang ada diantara ini
</div>
Ok sampai dini Cara Memindahkan Penulis Ke bawah Judul Post, yang saya lakukan di blog ini barangkali bisa dijadikan bahan acuan jika sobat mau mencobanya. Siapa tahu tampilan blognya makin keren hingga disukai Mbah Google dan si Cantik Alexa.. hehe. Yups.. Happy Blogging.
Catatan :
Setelah author blog, label dll. dipindahkan ke bawah judul posting… icon quick edit ( tanda pensil dan kunci pas + Obeng ) kok jadi hilang, gak mau tampil. Dicoba utak-atik tapi belum ketemu tuh..pusiing soo bila sobat pembaca ada yang tahu n berkenan share.. tolong ya masukan di komentar.. please..
- Thanks telah mampir, yo kita saling vote dan comment..
- Bila berkenan tolong share/bagikan dengan tombol share dibawah.
- Gratis langganan artikel blog ini, silahkan klik Subscribe Disini, atau masukan email disidebar yg telah disediakan
wah makasih banget atas tutorialnya sob,,sangat membantu,,sangat bermanfaat..
BalasHapusSama-sama bos n makasih dah comment
HapusLangsung di coba di blog atunya deh
BalasHapusMemang tampak lebih ok kalau di sebelah atas
BalasHapusboleh uga nih thnaks gan.,.,
BalasHapusnice post gan
BalasHapuskunjungan sore gan ikut nyimak artikelnya. makasih
BalasHapusmakasih gan atas infonya, udah ane cobain, berhasil...
BalasHapusIt's remarkable in support of me to have a site, which is useful for my know-how. thanks admin
BalasHapusLook at my webpage ... russian roulette casino odds
info yang sangat bagus sekali gan...
BalasHapussaya sangat terbantu dengan info yang anda berikan.. makasih...
BalasHapuskeren banget...
BalasHapuskeren bos...
BalasHapusijin pasang