Pernahkah Anda mencermati desain (model) bidang posting (artikel) yang digunakan pada halaman beranda blog ini? Model bidang posting yang digunakan untuk halaman beranda blog ini
bisa jadi lain daripada yang lain karena memang telah dilakukan
kustomisasi, dalam hal ini adalah dengan menjadikan bidang artikel
paling atas sebagai headline dan bidang artikel yang lainnya didesain
sedemikian rupa sehingga ukurannya menjadi lebih ringkas (termasuk
diantaranya adalah dengan menampilkan pratinjau dari gambar yang
terdapat dalam artikel pada bagian sebelah kiri serta ringkasan artikel
di bagian yang berbeda, seperti yang tampak pada gambar di atas).
Uraian dalam artikel ini sendiri sebenarnya merupakan kelanjutan dari uraian dalam artikel sebelumnya yang berjudul “Cara Membuat Headline Artikel Di Beranda Blog Tampilan Versi Seluler”.
Dimana apabila uraian dalam artikel tersebut menjelaskan cara atau
teknik yang digunakan untuk membuat headline artikel pada beranda blog
tampilan versi mobile, maka teknik yang diuraikan dalam artikel ini
adalah digunakan untuk membuat headline artikel untuk tampilan blog
versi web.
Dan kiranya tak perlu panjang lebar,
sekarang kita langsung saja pada pokok pembahasan yaitu mengenai cara
mengubah model bidang posting untuk halaman beranda blog versi web.
Untuk mengimplementasikan teknik ini, maka Anda dapat melakukannya
dengan mengerjakan langkah-langkah berikut secara berurutan.
Pertama, backup template Anda dan kemudian buka editor template dengan cara mengeklik menu ‘Template’ > ‘Edit HTML’ > ‘Lanjutkan’ > ‘Expand Template Widget’.
Kedua, 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.
Ketiga, 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 -->
Keempat, salin rangkaian kode
berikut ini dan kemudian sisipkan di bagian yang sebelumnya telah
dihapus dengan menggunakan langkah ketiga.
<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/AVvXsEiny0XbIvLtLNMVZiNfvtCt17vr3ZLyzFopGPD81lOb6pk_0TJyDftLM-6Ju0OA_AevIzjSoaV4rE0z0NseQnDjyfMahGV9-5Fb58YLZXVu3RN5sAWU1AKE9VCodwT4noWTXhzUhuV1l98/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.
Kelima, simpan template.
Dan selanjutnya 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”.
Tidak ada komentar:
Posting Komentar