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 
.
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
Popularity: 16% [?]
>>>>Artikel yang mungkin terkait dengan topik diatas:
- Solusi Error Permalink Page/ posting pada WordPress
- Cara Cepat Edit Postingan (wordpress)
- Theme Bisnis/ Iklan baris gratis RedTone.
- Setting Custom Domain (berbayar) untuk hosting Blogspot.
- Tutorial: bagaimana cara mengaktifkan shortcut hibernate pada desktop komputer
- Cara Mendapatkan List File Pada Suatu Folder dengan Export CMD
Lilis Mayasari/ LieZMaya Reply:
July 6th, 2010 at 12:06 am
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
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
[Reply]
goop Reply:
July 6th, 2010 at 8:00 am
waaa, makasih ya, teh
[Reply]