Tampilan Halaman Label Hanya Judul Postingan

Hello sobat blogger, Apa kabar ? Tidak terasa puasa sudah mendekat ni sob, sekali lagi ni sob saya ingin mengucapkan mohon maaf lahir dan bathin sob bila terdapat kesalahan saya dalam melakukan aktifitas blogging selama ini.

Ok, Karena merasa kangen dengan memposting tutorial blog akhirnya saya memutuskan tutorial tentang Membuat Tampilan Halaman Label Hanya Judul Postingan Blog.

Beberapa template blog ada yang saat di klik halaman label yang tampil adalah keseluruhan isi blog, atau beberapa konten isi blognya (Karena memakai readmore - baca : Cara Membuat Readmore Pada Blogspot) di halaman tersebut. Nah, pada tutorial kali ini saya ingin membahas bagaimana membuat tampilan halaman label pada blog yang tampil hanya judul postingan blog kita saja (Seperti gambar diatas).

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>

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

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

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

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 :

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

Jika artikel ini bermanfaat bagi sobat, dan jika tidak keberatan jangan lupa memberikan +1 nya ya sob...

.:: HAPPY BLOGGING SOBAT ::. 

Bagikan Jika Artikel ini menarik, Diharapkan agar memberikannya kepada teman2 anda di Facebook

Artikel Lainnya :

Tutorial Blog

• Menampilkan / Menyembunyikan Sidebar Blog
• Membuat Sebuah Link Mengarah Ke Lebih 2 URL
• Show Hide Chatbox Efek Jquery di Sidebar Blog
• Memasang Simple Menu Navigasi Horizontal
• Memasang Floating Share Button
• Tag H1 Untuk Judul Postingan dan Judul Blog
• Memasang Hidden Chatbox With Jquery Di Sidebar
• Memasang Hidden Chatbox Pada Sidebar Blog
• Memasang Sticky Tooltips Di Blogspot
• Tutorial Membuat S3slider Images Show
• Memasang Tombol Google +1 di Blogspot
• Membuat Recent Post With Thumbnails
• Membuat Intro Page Pada Blogspot
• Membuat Tab View Pada Blogspot
• Kode Warna HTML
• Combine Show Hide Sidebar with Tooltips
• Navigasi Breadcrumb Pada Postingan Blog
• Membuat Tooltips Pada Sebuah Objek
• Membuat Menu Navigasi Dengan Tooltips
• Membuat Page Peel Effect Pada Blogger
• Related Post With Scrool Function
• Pesan Kamu Di Atas "Poskan Komentar's Box"
• Membuat Form Komentar Admin
• Membuat Rate Widget Pada Blog

Tip n Trik

• Menampilkan Akun Google Plus Di SERP Google
• Tips Mempersingkat Alamat URL Akun Google Plus
• Hubungkan Google Plus dengan Facebook | Twitter
• Menghubungkan Google Plus ke FB dan Twitter
• Twitteran Di Dashboard Akun Google Plus
• Cara Download Semua Album Foto di Facebook
• Tips Cara Mendapatkan Sitelink Google
• Membuat Sebuah Link Mengarah Ke Lebih 2 URL
• Show Hide Chatbox Efek Jquery di Sidebar Blog
• Maksud Pesan Error Saat Mengakses Internet
• Merubah Kotak Chat Facebook ke Versi Lama
• Memasang Simple Menu Navigasi Horizontal
• Memasang Floating Share Button
• Googlebot Access Blog Bermasalah
• Tag H1 Untuk Judul Postingan dan Judul Blog
• Mempercepat IDM Menggunakan IDM Optimizer
• Memasang Hidden Chatbox With Jquery Di Sidebar
• Memasang Hidden Chatbox Pada Sidebar Blog
• Memasang Sticky Tooltips Di Blogspot
• Tingkatkan Traffic Blog Lewat VLog | VIVANews
• Cara Transfer Foto Dari Facebook Ke Google+
• Tips SEO Terbaru di Tahun 2011
• Tutorial Membuat S3slider Images Show
• Akhirnya, Bisa Juga Join Ke Google+