Cara Membuat Spoiler di Blog

Sobat blogger, jika kita ingin menghemat space halaman posting supaya tidak terlalu panjang ke bawah, maka spoiler merupakan salah satu jawabannya. Spoiler adalah salah satu cara untuk menyembunyikan seluruh atau sebagian isi dari posting, baik gambar ataupun teks biasa, dengan menggunakan spoiler maka loading blog juga terasa tidak terlalu berat. Tutorial kali ini adalah bagaimana membuat spoiler dan memasangnya di postingan blog atau boleh juga dipasang di sidebar.

Berikut langkah-langkah untuk membuatnya :

1. Jika sobat ingin menyembunyikan widget di sidebar maka setelah masuk ke tab rancangan, sobat tinggal edit gadget tempat widget tersebut di tempatkan, tambahkan kode di bawah, ganti tulisan warna merah dengan kode dari widget sobat. 






Jika sobat ingin menyembunyikan text atau gambar pada postingan maka pada postingan sobat pilih edit html.
Selanjutnya masukkan kode di bawah, dan ganti tulisan warna merah dengan text atau kode gambar sobat.





2. Untuk kode spoilernya, silahkan sobat buka spoiler di bawah ini.


<div id="spoiler">
<div><input type="button" value="Tampilkan" style="margin:0px;padding:0px;" onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Tampilkan'; }">
</div>
<div style="background: #ffffff; margin: 10px auto;
border: 0px solid #000;
padding: 5px;">
<div style="display: none;">
GANTI TULISAN INI DENGAN TEKS ATAU GAMBAR YANG AKAN DISEMBUNYIKAN DI DALAM SPOILER
</div>
</div>
</div>

Demikian cara membuat dan memasang spoiler di postingan atau di sidebar blog, semoga bermanfaat.

Baca Selengkapnya

Cara Membuat Artikel Terkait

Salah satu cara untuk membuat pengunjung blog kita betah berlama-lama berada di blog kita adalah dengan menambahkan artikel-artikel yang masih relevan dengan artikel yang kita suguhkan. Artikel ini dinamakan dengan artikel terkait atau related post. Tutorial kali ini adalah bagaimana cara membuat artikel terkait atau related post di bawah postingan. Untuk contohnya anda bisa lihat di bawah postingan ini.

Dan berikut langkah-langkah cara membuat artikel terkait ini :

1. Login ke dashboard blog sobat
2. Pilih tab Rancangan kemudian pilih Edit HTML dan centang Expand Template Widget
3. Untuk mengantisipasi kesalahan yang kita lakukan, silahkan download dulu, klik Download Template Lengkap
4. Cari kode  <data:post.body/>  untuk mempercepat pencarian klik Ctrl + F pada keyboard
5. Copy dan letakkan kode di bawah ini  tepat di bawah kode  <data:post.body/>  tersebut


<b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='similiar'> <!-- Related Articles by Labels --> <div class='widget-content'> <b>Related Post :</b> <div id='data2007'/><br/><br/> <script type='text/javascript'> var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;; var maxNumberOfPostsPerLabel = 4; var maxNumberOfLabels = 10; maxNumberOfPostsPerLabel = 100; maxNumberOfLabels = 3; function listEntries10(json) { var ul = document.createElement(&#39;ul&#39;); var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ? json.feed.entry.length : maxNumberOfPostsPerLabel; for (var i = 0; i &lt; maxPosts; i++) { var entry = json.feed.entry[i]; var alturl; for (var k = 0; k &lt; entry.link.length; k++) { if (entry.link[k].rel == &#39;alternate&#39;) { alturl = entry.link[k].href; break; } } var li = document.createElement(&#39;li&#39;); var a = document.createElement(&#39;a&#39;); a.href = alturl; if(a.href!=location.href) { var txt = document.createTextNode(entry.title.$t); a.appendChild(txt); li.appendChild(a); ul.appendChild(li); } } for (var l = 0; l &lt; json.feed.link.length; l++) { if (json.feed.link[l].rel == &#39;alternate&#39;) { var raw = json.feed.link[l].href; var label = raw.substr(homeUrl3.length+13); var k; for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;); var txt = document.createTextNode(label); var h = document.createElement(&#39;b&#39;); h.appendChild(txt); var div1 = document.createElement(&#39;div&#39;); div1.appendChild(h); div1.appendChild(ul); document.getElementById(&#39;data2007&#39;).appendChild(div1); } } } function search10(query, label) { var script = document.createElement(&#39;script&#39;); script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39; + label + &#39;?alt=json-in-script&amp;callback=listEntries10&#39;); script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;); document.documentElement.firstChild.appendChild(script); } var labelArray = new Array(); var numLabel = 0; <b:loop values='data:posts' var='post'> <b:loop values='data:post.labels' var='label'> textLabel = &quot;<data:label.name/>&quot;; var test = 0; for (var i = 0; i &lt; labelArray.length; i++) if (labelArray[i] == textLabel) test = 1; if (test == 0) { labelArray.push(textLabel); var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ? labelArray.length : maxNumberOfLabels; if (numLabel &lt; maxLabels) { search10(homeUrl3, textLabel); numLabel++; } } </b:loop> </b:loop> </script> </div> </div> </b:if>


6. Tulisan "Related Post" bisa sobat ganti dengan kata-kata sobat
7. Klik Simpan Template, dan Klik Lihat blog untuk melihat hasilnya.

Demikian tutorial cara membuat artikel terkait di bawah postingan. semoga bermanfaat. Untuk tutorial membuat read more otomatis sobat bisa klik link ini.

Baca Selengkapnya

Cara Membuat Read More Otomatis

Sobat blogger, tutorial kali ini adalah membuat read more otomatis pada blogspot.  tanpa adanya Read More, maka home page atau halaman depan blog sobat akan terlihat kurang efektif, terlalu panjang ke bawah postingannya, loading blog juga akan menjadi berat, dan lainnya. Langsung saja langkah-langkah cara untuk membuat read more otomatis sebagai berikut :

1. Login ke dashboard blog anda
2. Pilih tab Rancangan lalu pilih Edit HTML
3. Centang Expand Template Widget
4. Cari kode ... <data:post.body/> ... untuk mempercepat pencarian tekan Ctrl + F pada keyboard
5. Ganti kode  <data:post.body/>  tersebut dengan kode dibawah ini


<b:if cond='data:blog.pageType != &quot;item&quot;'> <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script> <span class='rmlink' style='float:left'><b>Read More</b> &#8594; <a expr:href='data:post.url'><data:post.title/></a></span> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>



Kata "Read More" bisa sobat ganti dengan kata "Selengkapnya" atau kata lainnya sesuai selera
Selanjutnya cari kode </head>
Copy kode di bawah dan letakkan tepat di atas kode </head> tadi



<script type='text/javascript'> var thumbnail_mode = &quot;float&quot; ; summary_noimg = 250; summary_img = 220; img_thumb_height = 120; img_thumb_width = 220; </script> <script type='text/javascript'> //<![CDATA[ function removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var d=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=" "&&b.indexOf(" ",a)!=-1){a++}b=b.substring(0,a-1);return b+"... "}function createSummaryAndThumb(d){var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");var e=summary_noimg;if(b.length>=1){a='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var c=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c}; //]]> </script>


6. Klik Simpan Template dan klik Lihat Blog untuk melihat hasilnya

Demikian tutorial cara membuat read more otomatis untuk blogger. Semoga bermanfaat.

Baca Selengkapnya

Membuat Tombol Next Page dengan Angka

Tutorial kali ini yaitu bagaimana caranya membuat tombol next page / halaman selanjutnya dengan menggunakan angka di bawah postingan blogger, berikut langkah-langkahnya :

1. login ke blogger
2. pilih tab rancangan
3. klik tambah gadget lalu pilih html/javascript
4. copy kode di bawah ini kemudian paste ke konten dari html/javascript tadi (judul tidak perlu ditulis)


<style> .showpageArea a { text-decoration:underline; } .showpageNum a { text-decoration:none; border: 1px solid #ccc; margin:0 3px; padding:3px; } .showpageNum a:hover { border: 1px solid #ccc; background-color:#ccc; } .showpagePoint { color:#333; text-decoration:none; border: 1px solid #ccc; background: #ccc; margin:0 3px; padding:3px; } .showpageOf { text-decoration:none; padding:3px; margin: 0 3px 0 0; } .showpage a { text-decoration:none; border: 1px solid #ccc; padding:3px; } .showpage a:hover { text-decoration:none; } .showpageNum a:link,.showpage a:link { text-decoration:none; color:#333; } </style> <script type="text/javascript"> function showpageCount(json) { var thisUrl = location.href; var htmlMap = new Array(); var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/"; var isLablePage = thisUrl.indexOf("/search/label/")!=-1; var isPage = thisUrl.indexOf("/search?updated")!=-1; var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : ""; thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable; var thisNum = 1; var postNum=1; var itemCount = 0; var fFlag = 0; var eFlag = 0; var html= ''; var upPageHtml =''; var downPageHtml =''; var pageCount=5; var displayPageNum=6; var firstPageWord = 'First'; var endPageWord = 'last'; var upPageWord ='Back'; var downPageWord ='Next'; var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">'; for(var i=0, post; post = json.feed.entry[i]; i++) { var timestamp = post.published.$t.substr(0,10); var title = post.title.$t; if(isLablePage){ if(title!=''){ if(post.category){ for(var c=0, post_category; post_category = post.category[c]; c++) { if(encodeURIComponent(post_category.term)==thisLable){ if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){ if(thisUrl.indexOf(timestamp)!=-1 ){ thisNum = postNum; } postNum++; htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount; } } } }//end if(post.category){ itemCount++; } }else{ if(title!=''){ if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){ if(thisUrl.indexOf(timestamp)!=-1 ){ thisNum = postNum; } if(title!='') postNum++; htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount; } } itemCount++; } } for(var p =0;p< htmlMap.length;p++){ if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){ if(fFlag ==0 && p == thisNum-2){ if(thisNum==2){ if(isLablePage){ upPageHtml = labelHtml + upPageWord +'</a></span>'; }else{ upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>'; } }else{ upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>'; } fFlag++; } if(p==(thisNum-1)){ html += '&nbsp;<span class="showpagePoint"><u>'+thisNum+'</u></span>'; }else{ if(p==0){ if(isLablePage){ html = labelHtml+'1</a></span>'; }else{ html += '<span class="showpageNum"><a href="/">1</a></span>'; } }else{ html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>'; } } if(eFlag ==0 && p == thisNum){ downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>'; eFlag++; } }//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){ }//end for(var p =0;p< htmlMap.length;p++){ if(thisNum>1){ if(!isLablePage){ html = '<span class="showpage"></span>'+upPageHtml+' '+html +' '; } } html = '<div class="showpageArea"><span style="color:#fff;" class="showpage"> Total '+(postNum-1)+': </span>'+html; if(thisNum<(postNum-1)){ html += downPageHtml; } if(postNum==1) postNum++; html += '</div>'; if(isPage || isFirstPage || isLablePage){ var pageArea = document.getElementsByName("pageArea"); var blogPager = document.getElementById("blog-pager"); if(postNum <= 2){ html =''; } for(var p =0;p< pageArea.length;p++){ pageArea[p].innerHTML = html; } if(pageArea&&pageArea.length>0){ html =''; } if(blogPager){ blogPager.innerHTML = html; } } } </script> <script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>


5. Masih di rancangan (elemen laman), Arahkan/geser gadget html/javascript yang telah di tambahkan ke bawah postingan, kemudian klik simpan 





6. lihat blog untuk mengetahui hasilnya

Demikian cara membuat tombol next page dengan angka, semoga bermanfaat.

Baca Selengkapnya