Membuat Tampilan Halaman Label Hanya Judul Postingan Blog
Space Iklan Disini, silahkan Hubungi kami !
Nah, pada tutorial kali ini saya ingin membahas bagaimana
membuat tampilan halaman label pada blog yang tampil hanya judul postingan blog kita saja.
1. Login pada Blogger
2. Masuk ke bagian Rancangan, kemudian ke bagian Edit HTML
Back up Template dengan cara Mengklik : Download Template Lengkap
Setelah itu, beri tanda cek pada Expand Widget Templates.
Lalu untuk tutorial ini terbagi menjadi 2 versi berbeda :
1. Tampilan Label Tanpa Kotak
Coba perhatikan gambar preview dipostingan kali ini, gambar tersebut merupakan tampilan yang menggunakan kotak, lalu apa maksud Tampilan Label Tanpa Kotak ? Tanpa kotak disini maksudnya yang muncul hanya tulisan saja (Judul postingan saja).
Langsung saja kita mulai tutorialnya :
membuat tampilan halaman label pada blog yang tampil hanya judul postingan blog kita saja.
1. Login pada Blogger
2. Masuk ke bagian Rancangan, kemudian ke bagian Edit HTML
Back up Template dengan cara Mengklik : Download Template Lengkap
Setelah itu, beri tanda cek pada Expand Widget Templates.
Lalu untuk tutorial ini terbagi menjadi 2 versi berbeda :
1. Tampilan Label Tanpa Kotak
Coba perhatikan gambar preview dipostingan kali ini, gambar tersebut merupakan tampilan yang menggunakan kotak, lalu apa maksud Tampilan Label Tanpa Kotak ? Tanpa kotak disini maksudnya yang muncul hanya tulisan saja (Judul postingan saja).
Langsung saja kita mulai tutorialnya :
<!-- posts -->
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:adStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:adStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:include data='post' name='post'/>
Note : Cari kode yang berwarna merah, gunakan Ctrl+F
Setelah ketemu, Ganti kode berwarna merah tersebut dengan kode dibawah ini :
Setelah ketemu, Ganti kode berwarna merah tersebut dengan kode dibawah ini :
<b:if cond='data:blog.homepageUrl != data:blog.url'> <b:if cond='data:blog.pageType != "item"'> <a expr:href='data:post.url'> <data:post.title/></a><br/><br/> <b:else/>
<b:include data='post' name='post'/> </b:if> <b:else/> <b:include data='post' name='post'/> </b:if>
Lalu Save Template.
2. Tampilan Label Menggunakan Kotak
Nah, Untuk tutorial ini dimulai setelah tutorial pemasangan "Tampilan Label Tanpa Kotak" di save / selesai.
Ok lanjut ...
2. Tampilan Label Menggunakan Kotak
Nah, Untuk tutorial ini dimulai setelah tutorial pemasangan "Tampilan Label Tanpa Kotak" di save / selesai.
Ok lanjut ...
<b:if cond='data:blog.homepageUrl !=
data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<data:post.title/></a><br/><br/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<data:post.title/></a><br/><br/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
Note : Cari kode yang berwarna merah, gunakan Ctrl+F
(Ingat !! Kode HTML di atas akan terlihat dalam blog kamu setelah kamu melakukan tutorial "Tampilan Label Tanpa Kotak)
Setelah ketemu, Ganti kode berwarna merah tersebut dengan kode di bawah :
(Ingat !! Kode HTML di atas akan terlihat dalam blog kamu setelah kamu melakukan tutorial "Tampilan Label Tanpa Kotak)
Setelah ketemu, Ganti kode berwarna merah tersebut dengan kode di bawah :
<div style='padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;margin-bottom:2px;background:#ffffff;color:#000000;'> <img alt='Tanda Panah | Khamardos Blog' border='0' width='12' height='12' src='http://i655.photobucket.com/albums/uu271/spantibelspku/Panah_2_thumb.png'/> <data:post.title/></div></a>
Note : : Ganti dengan warna yang sesuai pada blog sobat (Gunakan Kode Warna HTML)
: Ganti dengan URL gambar icon panah sobat
Lalu Save Template ...
Sudah berhasil ? Menarik bukan ? Banyak manfaatnya kita menggunakan tutorial ini, biasanya halaman label yang penuh dengan postingan terasa berat maka setelah menggunakan tutorial ini diharapkan tampilan dan akses menuju halaman label sobat akan terasa cepat.
: Ganti dengan URL gambar icon panah sobat
Lalu Save Template ...
Sudah berhasil ? Menarik bukan ? Banyak manfaatnya kita menggunakan tutorial ini, biasanya halaman label yang penuh dengan postingan terasa berat maka setelah menggunakan tutorial ini diharapkan tampilan dan akses menuju halaman label sobat akan terasa cepat.
0 comments:
Post a Comment