24 Juli 2011

Pin It

Tampilan Halaman Label Hanya Judul Postingan

Membuat Tampilan Halaman Label Hanya Judul Postingan Blog | Khamardos Blog
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 .

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 ::. 
Share To lintasberita.com | Khamardos Blog

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

Artikel Lainnya :

14 comments:

Klik Untuk Lihat Komentar

Apa itu DMOZ? on 24 Juli 2011 16.03 mengatakan...

wah keren nih. Dengan fungsi ini pengunjung tidak perlu lagi menekan tombol older post atau postingan lama. :)

Mufi_ed on 24 Juli 2011 16.11 mengatakan...

@Apa itu DMOZ?
hahahaha... iya benar bnget dah sob... bagi saya itu salah satu solusi kenapa yang blog saya ini bermasalah dengan tombol "older post" yang muncul di halaman blog :D

Rizkyzone on 24 Juli 2011 16.46 mengatakan...

kayaknya blog q blum ak asang ini mas, ok deh nati kalau iet q dah lancar akan aq coba pasang, makasih

Mufi_ed on 24 Juli 2011 16.55 mengatakan...

@Rizkyzone
sip dech buat sobat rizky, mungkin ni cocok buat blog sobat rizky ,,,,

Farixsantips on 24 Juli 2011 18.49 mengatakan...

Iya nih sob, bagus tricknya supaya gak cape cape older post banyak tulisan tulisannya :D

amcied on 24 Juli 2011 20.12 mengatakan...

tutorial'y menari bos, thank's sdh mau berbagi :)

ananda on 25 Juli 2011 10.44 mengatakan...

mantap nih tutornya sob :) two thumbs

Musa Khairul Umam on 25 Juli 2011 15.03 mengatakan...

Mantab, biar pengunjung gak kerepotan older postnya :D

Arif on 12 Agustus 2011 06.40 mengatakan...

Makasih tutornya,, ijin praktek gan :D

khalid on 7 November 2011 16.51 mengatakan...

Nice info mas,, berguna banget nih artikel :D

Ageboy on 4 Desember 2011 02.53 mengatakan...

mantap gan tipsnya.thanks ya.. :)

SiR AdeL on 13 Desember 2011 01.30 mengatakan...

wah, ini yg saya cari-cari,, t`kasih atas infonya,,
salam sukses selalu,, :)

rian fashion stuff on 9 Februari 2012 10.08 mengatakan...

trimah kasih sob,,,mantap,,ku coba dulu ya,,,heheheh

Junaidi Sharez on 12 September 2012 18.56 mengatakan...

oh gini toh, lebih keliatan keren blognya
makasih gan ^-^

:: Komentar Anda ::

Silahkan isi Komentar anda pada Form Komentar dibawah ini !!!
Kritik dan Saran yang membangun sangat saya harapkan dari sobat semua !!!

NO SPAM PLEASE !!!

Senyum :)) tunggu :)] centil ;)) kedip ;;) unjuk gigi :D hai ;) week - Jelek :p menangis :((
smile :) gawat :( Love - cinta :X briken love - patah hati =(( ooo - ounght :-o bingung :-/ kiss - cium :-* nothing :|
Gila - stres 8-} pusing ~x( takut :-t tenju - pukul b-( marah :-L marah kali x( sangat lucu =))

[[ Form Komentar Klasik ]]

Jika Anda Ingin Berlangganan Artikel Dari Situs Ini,
Silahkan Ketik Email Anda Pada Form Di Bawah Ini :

 
Copyright © 2009 Black Nero is Designed by Ipietoon | Tweaking by Mufied