- Login Blog Anda
- Back Up Templetenya (menu ‘Template’ > ‘Edit HTML’ > ‘Lanjutkan’ > ‘Expand Template Widget’.)
- cari kode </head> ()dan kemudian sisipkan rangkaian kode berikut ini tepat di atasnya :
<script type='text/javascript'>
//<![CDATA[
/************************************************
Kustomisasi Model Bidang Posting Blogger/Blogspot
Membuat Headline Artikel Di Halaman Beranda Blog
Oleh: Semar Bingung
Blog: ELTELU -:[SEMAR BINGUNG'S WEBLOG]:-
URL : http://eltelu.blogspot.com/
*************************************************/
function HapusTagHTML(kalimat,ambil){
if(kalimat.indexOf("<")!=-1)
{
var s = kalimat.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
kalimat = s.join("");
}
ambil = (ambil < kalimat.length-1) ? ambil : kalimat.length-2;
while(kalimat.charAt(ambil-1)!=' ' && kalimat.indexOf(' ',ambil)!=-1) ambil++;
kalimat = kalimat.substring(0,ambil-1);
return kalimat+'...';
}
function BuatRingkasanArtikel(pID){
var div = document.getElementById(pID);
var JumlahKarakter = 300;
var RingkasanArtikel = '<div>' + HapusTagHTML(div.innerHTML,JumlahKarakter) + '</div>';
div.innerHTML = RingkasanArtikel;
}
//]]>
</script>
Keterangan:
Kode tersebut digunakan untuk membuat ringkasan artikel yang ditampilkan pada bidang posting kedua, ketiga, dan seterusnya, seperti yang tampak pada gambar (di atas) dengan tanda angka 2 (dua).
Untuk menentukan jumlah karakter yang dijadikan sebagai ringkasan artikel, dapat dilakukan dengan cara mengubah angka 300 yang terdapat pada kode var JumlahKarakter = 300; sesuai dengan jumlah karakter yang diinginkan.
4. Kemudian Cari kode <b:includable id='main' var='top'> dan kemudian hapus seluruh rangkaian kode untuk bagian tersebut. Sebagai contoh perhatikan rangkaian kode di bawah ini.
<b:includable id='main' var='top'> <!-- hapus dari sini -->----- rangkaian kode -----</b:includable> <!-- hapus sampai sini -->
Salin rangkaian kode berikut ini dan kemudian sisipkan di bagian yang
sebelumnya dihapus
<b:includable id='main' var='top'> <b:if cond='data:mobile == "false"'> <b:loop values='data:posts' var='post'> <b:if cond='data:post.isFirstPost == "true"'> <!--artikel terbaru --> <b:include name='artikelterbaru'/> <b:else/> <!--artikel terlama --> <b:include name='artikelterlama'/> </b:if> </b:loop> <!-- navigation --> <b:include name='nextprev'/> <!-- feed links --> <b:include name='feedLinks'/> <b:if cond='data:top.showStars'> <script src='//www.google.com/jsapi' type='text/javascript'/> <script type='text/javascript'> google.load("annotations", "1", {"locale": "<data:top.languageCode/>"}); function initialize() { google.annotations.setApplicationId(<data:top.blogspotReviews/>); google.annotations.createAll(); google.annotations.fetch(); } google.setOnLoadCallback(initialize); </script> </b:if> <b:else/> <b:include name='mobile-main'/> </b:if> <b:if cond='data:top.showDummy'> <data:top.dummyBootstrap/> </b:if> </b:includable> <b:includable id='artikelterbaru' var='artikelbaru'> <!-- posts --> <div class='blog-posts hfeed'> <b:include data='top' name='status-message'/> <data:defaultAdStart/> <b:if cond='data:post.isDateStart'> <b:if cond='data:post.isFirstPost == "false"'> </div></div> </b:if> </b:if> <b:if cond='data:post.isDateStart'> <div class="date-outer"> </b:if> <b:if cond='data:post.dateHeader'> <h2 class='date-header'><span><data:post.dateHeader/></span></h2> </b:if> <b:if cond='data:post.isDateStart'> <div class="date-posts"> </b:if> <div class='post-outer'> <b:include data='post' name='post'/> <b:if cond='data:blog.pageType == "static_page"'> <b:if cond='data:post.showThreadedComments'> <b:include data='post' name='threaded_comments'/> <b:else/> <b:include data='post' name='comments'/> </b:if> </b:if> <b:if cond='data:blog.pageType == "item"'> <b:if cond='data:post.showThreadedComments'> <b:include data='post' name='threaded_comments'/> <b:else/> <b:include data='post' name='comments'/> </b:if> </b:if> </div> <b:if cond='data:post.includeAd'> <b:if cond='data:post.isFirstPost'> <data:defaultAdEnd/> <b:else/> <data:adEnd/> </b:if> <div class='inline-ad'> <data:adCode/> </div> <data:adStart/> </b:if> <b:if cond='data:numPosts != 0'> </div></div> </b:if> <data:adEnd/> </div> </b:includable> <b:includable id='artikelterlama' var='artikellama'> <!-- posts --> <div class='blog-posts hfeed'> <b:if cond='data:post.isFirstPost == "true"'> <b:else/> <b:if cond='data:blog.pageType == "index"'> <b:if cond='data:post.isDateStart'> <b:if cond='data:post.isFirstPost == "false"'> </div></div> </b:if> </b:if> <b:if cond='data:post.isDateStart'> <div class="date-outer"> </b:if> <b:if cond='data:post.dateHeader'> <h2 class='date-header'><span><data:post.dateHeader/></span></h2> </b:if> <b:if cond='data:post.isDateStart'> <div class="date-posts"> </b:if> <div class='post-outer'> <b:include data='artikellama' name='lama'/> <b:if cond='data:blog.pageType == "static_page"'> <b:if cond='data:post.showThreadedComments'> <b:include data='post' name='threaded_comments'/> <b:else/> <b:include data='post' name='comments'/> </b:if> </b:if> <b:if cond='data:blog.pageType == "item"'> <b:if cond='data:post.showThreadedComments'> <b:include data='post' name='threaded_comments'/> <b:else/> <b:include data='post' name='comments'/> </b:if> </b:if> </div> </b:if> </b:if> </div> </b:includable> <b:includable id='lama' var='artikellama'> <div class='post hentry'> <a expr:name='data:post.id'/> <b:if cond='data:post.title'> <h3 class='post-title entry-title'> <b:if cond='data:post.link'> <div style='text-align: justify;'> <a expr:href='data:post.link'><data:post.title/></a> </div> <b:else/> <b:if cond='data:post.url'> <b:if cond='data:blog.url != data:post.url'> <div style='text-align: justify;'> <a expr:href='data:post.url'><data:post.title/></a> </div> <b:else/> <data:post.title/> </b:if> <b:else/> <data:post.title/> </b:if> </b:if> </h3> </b:if> <div class='post-header'> <div class='post-header-line-1'/> </div> <div class='mobile-index-contents'> <b:if cond='data:post.thumbnailUrl'> <div class='mobile-index-thumbnail'> <div style='border: 1px solid #666666; background: ffffff; float: left; width:180px; height:114px; margin-right:15px;'> <div class='Image' style='float:left; '> <img expr:src='data:post.thumbnailUrl' style='width:180px; height:114px;'/> </div> </div> </div> <b:else/> <div style='border: 1px solid #666666; background: ffffff; float: left; width:180px; height:114px; margin-right:15px;'> <img alt='eltelu' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaQKO4dgLscQYiflUE2SV0kN11SSbWPMdww_Nl_M3Qd_79SLb1tly6KCDimzzmNaxL77youfIwRmXv5nMaIkwMlsMSFjpGjX1845CPYBzSSWf8i-xFvFCbSz_lxT-yTaMx2ROr8AGjPFM/s800/ELTELU.png' style='width: 180px !important; height: 114px !important;'/> </div> </b:if> <div class='post-body' style='text-align: justify;'> <div expr:id='"RingkasanArtikel" + data:post.id'><data:post.body/></div> <script type='text/javascript'>BuatRingkasanArtikel("RingkasanArtikel<data:post.id/>");</script> </div> <b:if cond='data:post.hasJumpLink'> <div style='border-bottom: 1px solid #666666; margin-top: 12px; width: 99,99%;'/> <div style='text-align: right;'> <div class='jump-link'> <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a> </div> </div> <div style='clear: both;'/> </b:if> </div> </div> </b:includable>
Keterangan:
Pemisah artikel yang digunakan dalam rangkaian kode di atas adalah pemisah standar, yaitu <data:post.jumpText/> yang akan menghasilkan tautan teks berupa “Baca selengkapnya »” atau “Read more »”. Sehingga apabila sebelumnya Anda telah melakukan kustomisasi untuk bagian tersebut (sebagai contoh misalnya mengubah bagian tersebut menjadi gambar tombol), maka gantilah pula <data:post.jumpText/> yang terdapat pada kode di atas sesuai dengan rangkaian kode yang Anda gunakan (sebelumnya) untuk membuat tombol “Read more »”.
Silakan buka artikel dengan judul “Membuat Tombol Read More Tanpa Ribet” yang dapat Anda gunakan sebagai referensi untuk membuat tombol “Read more »” atau mengganti tautan teks “Baca selengkapnya »” dengan gambar berbentuk tombol.
Simpan Tempelate Anda
Catatan:
Perlu diketahui bahwa setelah Anda mengimplementasikan teknik tersebut
maka post footer untuk artikel kolom kedua, ketiga, dan seterusnya
secara otomatis tidak lagi ditampilkan ketika halaman yang dibuka adalah
beranda. Namun post footer akan tetap dimunculkan sebagaimana mestinya
ketika masing-masing artikel pada blog yang dimaksud dibuka.
Sementara itu post footer untuk artikel yang terletak
pada bagian kolom paling atas akan tetap ditampilkan di halaman
beranda, sehingga untuk menghilangkan bagian tersebut agar post footer
tidak lagi tampil di halaman beranda seperti halnya pada artikel bagian
kolom kedua, ketiga, dan seterusnya, maka Anda dapat mengerjakan teknik
yang diuraikan dalam artikel dengan judul “Menyembunyikan Elemen Halaman Posting Dari Beranda Blog”.
Semoga berguna dan bermanfaat.
Tidak ada komentar: