Mohon Tunggu Proses Memuat Konten Halaman

Terbaru

13
Tgl. 12 Agustus 2012

Cara Membuat Headline Artikel Di Beranda Blog Tampilan Versi Seluler

ELTELU - Contoh Headline Artikel Pada Blog Versi Seluler
Secara default, Blogger memberikan model yang sama untuk bidang artikel yang tampilkan pada halaman beranda (versi web maupun versi seluler). Namun apabila kita membuka berbagai situs web atau portal berita, maka kita akan mendapati adanya headline yang digunakan untuk menampilkan berita terbaru atau berita yang menjadi sorotan seperti halnya yang tampak ada gambar di atas atau seperti yang digunakan pada blog ini untuk tampilan versi web maupun versi seluler.

Sedikit cerita tentang hal tersebut, kebetulan beberapa waktu yang lalu ada seorang sahabat yang bertanya mengenai cara membuat headline seperti yang tampak pada gambar di atas atau seperti yang biasa digunakan pada berbagai situs web atau portal berita. Nah, untuk keperluan membuat headline artikel di beranda blog tampilan versi mobile, maka Anda dapat mengerjakan langkah-langkah berikut ini secara berurutan.

Pertama, buka editor template dengan cara mengeklik menu ‘Template>Edit HTML>Lanjutkan>Expand Template Widget’.

Kedua, cari kode <b:include data='post' name='mobile-index-post'/> dan kemudian hapus kode tersebut lalu ganti dengan kode di bawah ini.
<b:if cond='data:post.isFirstPost == &quot;true&quot;'>
<!-- newer post -->
<b:include data='post' name='mobile-index-post'/>
<b:else/>
<!-- older post -->
<b:include data='post' name='older-mobile-index-post'/>
</b:if>


Ketiga, cari kode <b:includable id='mobile-index-post' var='post'> dan kemudian hapus seluruh rangkaian kode untuk bagian tersebut sampai dengan kode </b:includable>, seperti yang tampak pada contoh rangkaian kode di bawah ini.
<b:includable id='mobile-index-post' var='post'>   <!--- hapus dari sini --->
<div class='mobile-date-outer date-outer'>
---- rangkaian kode ----
</div>
</b:includable>   <!--- hapus sampai sini --->

Kemudian pada bagian kode yang dihapus tersebut, sisipkan rangkaian kode di bawah ini.
<b:includable id='mobile-index-post' var='post'>
<div class='mobile-date-outer date-outer'>
<div class='mobile-post-outer'>
<a expr:href='data:post.url'>
<h3 class='mobile-index-title entry-title'>
<b><data:post.title/></b>
</h3>
</a>

<div class='mobile-index-contents'>
<b:if cond='data:post.thumbnailUrl'>
<div class='mobile-index-thumbnail'>
<div class='Image' style='float:left; '>
<div style='float: left; width:80px; height:80px; margin-right:4px; border: 1px solid #666666;'>
<img expr:src='data:post.thumbnailUrl' style='width:80px !important; height:80px !important;'/>
</div>
</div>
</div>
<b:else/>
<div style='float: left; width:80px; height:80px; margin-right:4px; border: 1px solid #666666;'>
<img alt='eltelu' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgtz6J6fAeCikK3PhIRJmOcLm5ntM4gU-5AhLQmpC-aKBrqZptWe58AGLOAVHfRCFRTIq47r41_j8M3h4VRnRjFaB6gGi1ZAk6JE3IyJ1VuT6ZAifbBYhCMbbneIE4bN0G_4JBmjMzZuY/s800/ELTELU.png' style='width: 80px !important; height: 80px !important;'/>
</div>
</b:if>

<div class='post-body'>
<div align='justify'>
<b:if cond='data:post.snippet'><data:post.snippet/></b:if>
</div>
</div>
</div>
<div style='clear: both;'/>

<div class='mobile-index-comment'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:post.allowComments'>
<b:if cond='data:post.numComments == 0'>
<a expr:href='data:post.url'>0 <data:top.commentLabel/></a>
</b:if>
<b:if cond='data:post.numComments != 0'>
<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>
</b:if>
</div>
</div>
</div>
</b:includable>


<b:includable id='older-mobile-index-post' var='post'>
<div class='mobile-date-outer date-outer'>
<div class='mobile-post-outer'>
<a expr:href='data:post.url'>
<h3 class='mobile-index-title entry-title'>
<div class='mobile-bingkai-judul'>
<b><data:post.title/></b>
</div>
</h3>
</a>

<div class='mobile-index-comment'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:post.allowComments'>
<b:if cond='data:post.numComments == 0'>
<a expr:href='data:post.url'>0 <data:top.commentLabel/></a>
</b:if>
<b:if cond='data:post.numComments != 0'>
<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>
</b:if>
</div>
</div>
</div>
</b:includable>

Keterangan:
Ganti URL gambar yang terdapat dalam kode <img alt='eltelu' src='https:…. dengan URL gambar yang akan digunakan dan ditampilkan pada headline apabila tidak terdapat gambar dalam artikel yang dimaksud. 

Keempat, simpan template.

Sehingga apabila sebelumnya Anda telah melakukan kustomisasi pada template untuk tampilan versi seluler, maka ketika blog Anda dibuka dengan menggunakan perangkat seluler, tampilannya adalah seperti yang tampak pada gambar di atas. Sedangkan apabila Anda masih menggunakan desain tampilan versi seluler default yang disediakan oleh Blogger, maka ketika blog Anda dibuka dengan menggunakan perangkat seluler, tampilannya adalah seperti yang tampak pada gambar di bawah ini.
ELTELU - Contoh Headline Artikel Pada Tampilan Default Versi Mobile

Lantas, bagaimana caranya untuk membuat headline artikel di beranda blog untuk tampilan versi web? Terkait dengan hal tersebut, akan saya uraikan dalam artikel yang terpisah atau pada artikel yang berikutnya.

Semoga berguna dan bermanfaat.
Salam.


Katagori: ,
Terdapat 13 komentar pada artikel ini ▶
13/08/12, 00.33 O

sudah saya coba Sob dan berhasil....
trims...

13/08/12, 00.45 O

@ndolemOke Sobat... Sama-sama... :)

13/08/12, 14.01 O

wahh yg ditgg2 tlah terbit.. makasih sobat :D

Anonim
13/08/12, 16.11 O

Link Anda Sudah Terpasang Di Blog Saya :)

Nama : Cheat POint Blank™
Link : http://freezher.blogspot.com/

Pasang Link Saya Sob :)
Terima Kasih

Salam Blogger!!!

13/08/12, 21.16 O

Bagus Sobat, Boleh dicoba. Sukses Selalu. Salam

14/08/12, 00.03 O

Waaaah mantap hasilnya sangat memuaskan.... tp syng Tgl Postnya Hilang, tpi gk apalah yg pnting sdh kren.. trims sobatQ

14/08/12, 22.44 O

@All: Terimakasih Sobat. Silakan apabila ingin mengimplementasikan pada blog yang Sobat (sekalian) kelola.

Anonim
31/10/12, 09.48 O

mau nanya nih , kalu buat tampilan seperti blog anda , gimana ya , coz saya juga baru buat blog nihh...ya maksudnya itu tampilan yang ada Beranda-Daftar Isi- trus ada kategori postingannya...makasiih sblumnya

04/12/12, 04.01 O

tks infonya sobat ni blog saya http://www.lovewebster.blogspot.com

05/12/12, 04.29 O

@advenSama-sama dan terimakasih balik Sobat.

12/03/13, 12.42 O

Maap mas saya mau tanya tentang tutoriaal membuat headline news yang sampean tulis dan saya praktekan ternyata hasilnya ga berhasil posting malah gada yang nampak, pertanyaan saya apakah cara membuat headline nenws itu untuk template tertentu karena saya coba pasang di template lama gak bisa terakhir saya pasang di tempale bawaan blog yang namanya sederhana, kalau bisa uraian htmlnya di buat pormat tex agar saya bisa download seperti yang merubah tampilan blog mobile, karena saat saya copy langsung kodenya kepisah2 dan saya ga bisa merubahnya karena kurang paham dengan kode html, atau kalau bisa sekalian share template yang udah pake headline biar ada contoh untuk belajar terimakasih, semoga mas eltelu memberi pencerahan bagi newbie saya tunggu jawabannya mas.

13/03/13, 09.35 O

@tc-indoSobat, karena kebetulan pertanyaan ini sama dengan pertanyaan yang Sobat ajukan dalam artikel tanya jawab, maka silakan klik di sini untuk mengetahui uraian jawaban atas pertanyaan tersebut.