Post Terkait dengan Gambar - Related Posts with Thumbnails Image

Post Terkait dengan Gambar - Related Posts with Thumbnails Image

Posted by CB Blogger On September 22, 2016

Cara pasang widget Post Terkait dengan Gambar - Related Posts with Thumbnails Image.

Langsung saja, berikut ini cara menampilkan atau memasang Related Post, Artikel Terkait, atau Posting Terkait di bawah tiap postingan blog.

Demonya sekaligus bukti berhasil ada di bawah posting ini.

CARA PASANG: 

1. Template > Edit HTML

2. Copas di atas kode </head>
<!--Related Posts with thumbnails Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts h4{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:2px solid #f2f2f2;object-fit: cover;width:110px;height:100px;-webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px; }
#related-title {color:#333;text-align:center;text-transform:capitalize;padding: 0px 5px 10px;font-size:12px;width:110px; height: 40px;}
</style>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1qdC3G6uv5IaQ14dAvs5rlfDdT9Dc6rB3BubqqLQmCIGUaNYPQcCmb5CV-maahiOVQDr-GRJ7O9oo0wU_dv4wBWx5W9Ecv4lNa76TgUvBZbE_CTRXISwbWnDgOxTbNIAXI-Qa-NYHaSTG/s1600/no-thumbnail.png'}if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<h4>'+relatedpoststitle+'</h4>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 4px 10px 0;float:left;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="related_img" src="'+thumburl[r]+'"/><br/><div id="related-title">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>
</b:if>
<!--Related Posts with thumbnails End-->

3. Copas di atas kode <div class='post-footer'>
<!-- Related Posts with Thumbnails Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=5&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div>

<div class='clear'/>

</b:if>
<!-- Related Posts with Thumbnails End-->

SAVE!!!

Cara Membuat Spoiler di Posting Blog untuk Menyimpan Kode Panjang

Cara Membuat Spoiler di Posting Blog untuk Menyimpan Kode Panjang

Posted by CB Blogger On September 04, 2016

Cara Membuat Spoiler di Posting Blog untuk Menyimpan Kode Panjang.

Spoiler adalah cara untuk menyembunyikan teks, video, gambar, maupun kode script dengan tujuan untuk menghemat halaman posting.  Spoiler juga dapat mempercepat loading blog.

Lihat DEMO

Cara Membuat Spoiler Pada Postingan Blog 

1. Tulis posting seperti biasa.

2. Jika sudah selesai, klik mode "HTML"

4. Masukan kode di bawah ini:

<div id="spoiler" style="display:none">

ISI SPOILER

</div>
<button title="Klik untuk melihat/menyembunyikan" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Open/Close</button>

CONTOH:

ISI SPOILER GAMBAR

Cara Edit Tampilan Kolom Komentar Blogger Lebih Menarik

Cara Edit Tampilan Kolom Komentar Blogger Lebih Menarik

Posted by CB Blogger On September 04, 2016

Cara Edit Tampilan Kolom Komentar Blogger Lebih Menarik

GANTI kode <b:includable id='threaded_comment_css'> .... </b:includable>

dengan kode ini:

            <b:includable id='threaded_comment_css'>
<style>
.comments {
  clear: both;
  margin-top: 10px;
  margin-bottom: 0px;
  line-height: 1em;
}
.comments .comments-content {
font-size: 12px;
margin-bottom: 16px;
font-weight: normal;
text-align:left;
line-height: 1.4em;
}
.comments .comment .comment-actions a {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #EDEDED;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
padding:2px 8px; margin-right:10px;
}
.comments .comment .comment-actions a:hover {
text-decoration: none; background:#fff; border:1px solid #5AB1E2;
}
.comments .comments-content .comment-thread ol {
  list-style-type: none;
  padding: 0;
  text-align: none;
}
.comments .comments-content .inline-thread {
  padding: 0.5em 1em;
}
.comments .comments-content .comment-thread {
  margin: 8px 0px;
}
.comments .comments-content .comment-thread:empty {
  display: none;
}
.comments .comments-content .comment-replies {
  margin-top: 1em;
  margin-left: 40px;   font-size:12px; background:#EBF5FE;
}
.comments .comments-content .comment {
  margin-bottom:16px;
  padding-bottom:8px;

}
.comments .comments-content .comment:first-child {
  padding-top:16px;
}
.comments .comments-content .comment:last-child {
  border-bottom:0;
  padding-bottom:0;
}
.comments .comments-content .comment-body {
  position:relative;
}
.comments .comments-content .user {
  font-style:normal;
  font-weight:bold;
}
.comments .comments-content .user a {
color:#2D5E7B; font-size:14px; font-weight: bold;text-decoration: none;
}
.comments .comments-content .icon.blog-author {
  width: 18px;
  height: 18px;
  display: inline-block;
  margin: 0 0 -4px 6px;
}
.comments .comments-content .datetime {
color: #999999;
float: right;
font-size: 11px;
text-decoration: none;
}
.comments .comments-content,
.comments .comments-content .comment-content {
  margin:0 0 8px;
}

.comment-header {background-color: #F4F4F4;
    border: thin solid #E6E6E6;
    margin-bottom: 5px;
    padding: 5px;
}
.comments .comments-content .comment-content {
  text-align:none;
}
.comments .comments-content .owner-actions {
  position:absolute;
  right:0;
  top:0;
}
.comments .comments-replybox {
  border: none;
  height: 250px;
  width: 100%;
}
.comments .comment-replybox-single {
  margin-top: 5px;
  margin-left: 48px;
}
.comments .comment-replybox-thread {
  margin-top: 5px;
}
.comments .comments-content .loadmore a {
  display: block;
  padding: 10px 16px;
  text-align: center;
}
.comments .thread-toggle {
  cursor: pointer;
  display: inline-block;
}
.comments .continue {
  cursor: pointer;
}
.comments .continue a {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #EDEDED;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
padding:2px 8px; margin-right:10px;
}
.comments .comments-content .loadmore {
  cursor: pointer;
  max-height: 3em;
  margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
  display: none;
}
.comments .thread-toggle {
  display: inline-block;
}
.comments .thread-toggle .thread-arrow {
  display: inline-block;
  height: 6px;
  width: 7px;
  overflow: visible;
  margin: 0.3em;
  padding-right: 4px;
}
.comments .thread-expanded .thread-arrow {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {background-image: url("http://img846.imageshack.us/img846/7357/unled1oww.jpg");background-position: center center;background-repeat: no-repeat;float: left;width: 36px;max-height: 36px;margin: 0;outline: 1px solid #FFFFFF;padding: 3px;vertical-align: middle;overflow: hidden;
border: 1px solid #DDDDDD;}
.comments .avatar-image-container img {
  width: 36px;
}
.comments .comment-block {
  margin-left: 48px;
  position: relative;
}

/* Responsive styles. */
@media screen and (max-device-width: 480px) {
  .comments .comments-content .comment-replies {
    margin-left: 0;
  }
}
</style>
</b:includable>

Cara Membatasi Panjang Judul Posting Blog Otomatis

Cara Membatasi Panjang Judul Posting Blog Otomatis

Posted by CB Blogger On September 04, 2016

Cara Membatasi Jumlah Karakter, Kata, atau Panjang Judul Posting Blog Secara Otomatis.

MEMBATASI jumlah karakter atau huruf judul tulisan diperlukan untuk mesin pencari (SEO) dan keindahan tampilan desain.

Panjang judul posting penting diperhatikan supaya terindeks Google. Di halaman hasil pencarian (SERP), Google menampilkan maksimal 60 karakter. Jika judul kepanjangan, akan terpotong dan diganti titik-tik.

Namun, tips berikut ini bukan tentang membuat judul menjadi 60 karakter itu, tapi membatasi panjang judul posting agar "pas" dengan desain layout, khsususnya Auto Readmore.

Dalam desain halaman depan dua kolom, biasanya jika ada judul terlalu panjang, maka akan mengubah tampilan. Kode berikut ini untuk membatasi panjang judul secara otomatis, sehingga tampilan halaman depan rapi.

Kode sama fungsinya dengan Plugin Limit Post Title WordPress. Di blog selfhosted WP, kita tinggal menginstall plugin tersebut untuk membatasi panjang judul tulisan di halaman depan.

Untuk di blogspot, di bawah ini caranya.

Cara Membatasi Jumlah Karakter Judul Posting Halaman Depan

1. Template > Edit HTML
2. Copas kode berikut ini di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
$('.post h2, .post h2 a').each(function(){
  var txt=$(this).text().substr(0,50);
  var j=txt.lastIndexOf(' ');
  if(j>42)
     $(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));
});
//]]>
</script>

CATATAN: 
42 adalah jumlah karakter -- bisa diubah menjadi lebih besar atau kecil

Membatasi Ringkasan Widget Popular Post

Kode di atas juga bisa digunakan untuk membatasi jumlah karakter judul Popular Post. Caranya, dengan mengganti kode post h2, .post h2 a menjadi popular-posts ul li, sebagai berikut:

<script type='text/javascript'>
//<![CDATA[
$('.popular-posts ul li .item-snippet').each(function(){
  var txt=$(this).text().substr(0,50);
  var j=txt.lastIndexOf(' ');
  if(j>42)
     $(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));
});
//]]>
</script>
Demikian Cara Membatasi Panjang Judul Posting Blog Otomatis halaman depan Blogger.*

Best way to Remove Widget Bundle CSS file from Blogger

Best way to Remove Widget Bundle CSS file from Blogger

Posted by CB Blogger On September 04, 2016

Best way to Remove Widget Bundle CSS file from Blogger. Cara terbaik menghapus link ke file Widget Bundle CSS bawaan blogger untuk Blog Lebih Cepat Wussss..... Fast Loading!!!

First of all backup your template before doing this and make sure that you should know basic HTML and CSS code to fix messy code.

You can remove widget_css_2_bundle.css with this steps below :

Step 1: 

Go to Blogger Dashboard >> Template >> Edit HTML

Step 2: 

Click anywhere in between code editor and search for <head> tag and replace it with &lt;head&gt;

Step 3: 

Next search for </head> tag and replace it with &lt;/head&gt;&lt;!--<head/>--&gt;

Note : 

This is the best way because is not affect the variables or your template-skin if you use in your template.

Source

Kurang puas dengan langkah simple dan cepat di atas? Silakan cek: Cara Menghapus Widget Bundle CSS untuk Fast Loading Blog.