cara Automatisasi Read more thumbnail Postingan pada index blogspot
Suatu hari ada seorang kawan Blogger lama yang bertanya kepada saya…”Teteh Blognya banyak banget sih, aku cari2 , itung2 ternyata ada enam…hmm jangan2 masih ada lagi ya?”
Huehehe jujur saja, selain Potter.Web.ID, ngariung.com, dan LieZMaya.Web.ID sebenarnya saya masih mempunyai buanyaaaak sekali Blog dan website lainnya dengan topik yang berbeda – beda. Nah mungkin pertanyaan yang terlintas dibenak anda sebagian besar adalah “Buat apa sih banyak2?” gitu ya mungkin…yaaa suka ajah mengoleksi nama domain unik hehe, apalagi salah satu hobi saya adalah mendesign2 ngotak ngatik cat Blog (sttt stttt saya orangnya gampang bosan soalnya hihi) sambil belajar CMS lainnya yang lebih menantang :P.
Okeh segitu saja intronya, nah kali ini saya ingin berbagi tips mengenai design Blogspot. Salah satu favorit saya selain wordpress, saya juga suka yang gratisan dari si mister Blogspot.com, soalnya Blogspot itu memperbolehkan kita berkreasi dengan design yang kita inginkan dibandingkan dengan WordPress.com dan dapat menambah konten yang lebih menarik, seperti Java script, iklan, dll, dan lebih kerennya lagi kita dapat menggunakan custom domain sesuai yang kita inginkan (contohnya seperti Blog sunda saya www.liezmaya.web.id (liat screenshot gambar dibawah ini nih) lebih detailnya silahkan baca halaman http://potter.web.id/setting-custom-domain-berbayar-untuk-hosting-blogspot/
Tips kali ini adalah Bagaimana caranya kita dapat menerapkan Automatisasi Read more postingan dengan thumbnail pada halaman index…tujuannya supaya judul postingan kita pada halaman index bisa lebih banyak tertampil namun tentunya dengan source yang lebih pendek dan lebih nyaman diliihat.
Caranya adalah:
- Silahkan Login ke halaman admin account blogger.com anda
- Terus ke Dashboard -> Design -> Edit HTML
- Jangan lupa Back up dulu template anda, untuk mengantisipasi terjadinya kegagalan nantinya.
- Checklist opsi Expand Widget Templates
- Lalu carilah kode </head>
- Tambahkan kode dibawah ini, tepat setelahnya:
1: <!-- Auto read more script Start -->
2: <script type='text/javascript'>
3: var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail
4: summary_noimg = 430; //summary length when no image
5: summary_img = 340; //summary length when with image
6: img_thumb_height = 200;
7: img_thumb_width = 200;
8: </script>
9: <script type='text/javascript'>
10: //<![CDATA[
11: function removeHtmlTag(strx,chop){
12: if(strx.indexOf("<")!=-1)
13: {
14: var s = strx.split("<");
15: for(var i=0;i<s.length;i++){
16: if(s[i].indexOf(">")!=-1){
17: s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
18: }
19: }
20: strx = s.join("");
21: }
22: chop = (chop < strx.length-1) ? chop : strx.length-2;
23: while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
24: strx = strx.substring(0,chop-1);
25: return strx+'...';
26: }
27:
28: function createSummaryAndThumb(pID){
29: var div = document.getElementById(pID);
30: var imgtag = "";
31: var img = div.getElementsByTagName("img");
32: var summ = summary_noimg;
33: if(thumbnail_mode == "yes") {
34: if(img.length>=1) {
35: imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
36: summ = summary_img;
37: }
38: }
39: var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
40: div.innerHTML = summary;
41: }
42: //]]>
43: </script>
44: <!-- Auto read more script End –>
- Setelah itu cari kode <data:post.body/>
- Lalu replace (ganti) dengan kode dibawah ini:
1: <!-- Auto read more Start -->
2: <!-- http://www.BloggerSentral.com -->
3: <b:if cond='data:blog.pageType == "item"'>
4: <data:post.body/>
5: <b:else/>
6: <b:if cond='data:blog.pageType == "static_page"'>
7: <data:post.body/>
8: <b:else/>
9: <div expr:id='"summary" + data:post.id'><data:post.body/></div>
10: <script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>");
11: </script>
12: <a class='more' expr:href='data:post.url'>Read more...</a>
13: </b:if>
14: </b:if>
15: <!-- Auto read more End –>
—————–
Demikian, semoga dapat membantu dan memberikan pencerahan buat yang lagi pusing ya ^_^…
Penulis: Lilis Mayasari/ LieZMaya.Web.ID
Nama saya Neng Lilis Mayasari, Saya adalah Seorang Anak Perempuan yang lahir dari 4 bersaudara di kota kembang Bandung pada bulan Agustus 1988. Sedang bekerja di kota Bekasi sejak tahun 2006 dalam bidang IT, penyuka etnik musik dari berbagai budaya (terutama sundanese), menulis, nonton Film, ngotak ngatik website, dan terakhir bengong gak jelas.
Related posts:
- Cara Cepat Edit Postingan (wordpress)
- Setting Custom Domain (berbayar) untuk hosting Blogspot.
- Theme Bisnis/ Iklan baris gratis RedTone.
Biasanya akan da muncul keterangan yang lebih spesifik lagi pada saat pesan error muncul (tulisan merah),..apa ya?
itu mungkin karena anda tidak mengcopas secara lengkap, mungkin ada yang terhapus, pastikan semuanya tercopas ya.
Aku dah nyoba teh tapi gagal terus gimana nih ? Pesannya gagal di "parse" gitu ada tag salah atau belom ditutup. Blogku pake template Simple SEO, tulungin dong teh..!!
Ni pertanyaannya umum…coba yang lebih spesifik lagi.
Mungkin masalah password harus lebih kuat ya, dan jangan gunakan email yang sama untuk account2 heppy sama kerja (misalnya FB, twitter, dll).
wowowowow,…
ane mo tanya… ane paling ga bisa habis pikir klo web base masalah di security,..
selain pengolahan session apalagi yg harus di perhatikan
Sami sami :)
teh, punya theme keren ngga?
saya keknya pengen ganti theme apa ya enaknya
oya, saya pun buta css dan html :cry:
Lah itu dah keren themenya hehe
kalo theme ya itumah tergantung selera masing2, kadang ad ayang suka minimalis ada juga yang suka ria2 kayak dufan :P
hmmm sejauh ini yang menurut saya paling nyaman dilihat design2nya di http://www.web2themes.com/resources/ kalo buat personal ^_^
atau silahkan ngekplor saja langsung untuk menemukan yang lebih srek dihati anda huhu
waaa, makasih ya, teh :D