Bootstrap for Blogger

Desain Template Blogger SEO Friendly, Fast Loading, dan Responsive dengan Bootstrap

September 21, 2016

Cara Menghapus Subscribe to Atom di Blogger

Cara Menghapus Subscribe to Atom di Blogger Cara Menghapus Subscribe to Atom di Blogger 

TEKS link Subscribe to Atom merupakan widget bawaan blogger. Langka digunakan user, maka hapus atau hilangkan saja link Subscribe to Atom tersebut.

Selain langka digunakan, juga mengganggu pemandangan dan sedikit pengaruhi loading blog karena ia berupa link (tautan).

Cara Menghapus Subscribe to Atom di Blogger 
 
Caranya:
1. Template > Edit HTML
2. Cari (Ctrl+F) kode berikut ini dan hapus:

                  <!-- feed links -->
                  <b:include name='feedLinks'/>

Save!

logoblog

Mengenal Bootstrap - Kode Desain Template Blog Responsive

Mengenal Bootstrap - Kode Desain Template Responsive Berbasis HTML & CSS
BOOTSTRAP adalah produk Twitter untuk membangun situs web atau blog berbasis HTML dan CSS.

Bootstrap is a free and open-source front-end web framework for designing websites and web applications. It contains HTML- and CSS-based design templates.

Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.

Menurut Wikipedia, Twitter Bootstrap adalah sebuah alat bantu untuk membuat sebuah tampilan halaman website yang dapat mempercepat pekerjaan seorang pengembang website ataupun pendesain halaman website.

Sesuai namanya, website yang dibuat dengan alat bantu ini memiliki tampilan halaman yang sama / mirip dengan tampilan halaman Twitter atau desainer juga dapat mengubah tampilan halaman website sesuai dengan kebutuhan.

Twitter Bootstrap dibangun dengan teknologi HTML dan CSS yang dapat membuat layout halaman website, tabel, tombol, form, navigasi, dan komponen lainnya dalam sebuah website hanya dengan memanggil fungsi CSS (class) dalam berkas HTML yang telah didefinisikan. Selain itu juga terdapat komponen-komponen lainnya yang dibangun menggunakan JavaScript.
logoblog

September 20, 2016

Recent Posts List Widget for Blogger Blog

Recent Posts List Widget for Blogger Blog. With Thumbnail Image and/or Only Post Title. Pilihan di tangan Anda. Jangan pilih pemimpin yang tidak santun!!! Pilih yang menyejukkan......


Recent Posts List Widget for Blogger Blog

Cara Pasang:
1. Layout > Add a Gadget > HTML / JavaScript
2. Isi widget dengan POSTING TERBARU atau RECENT POSTS
3. COPAS kode berikut ini di kolom kontent:


<link href="http://mybloggerlab.com/Scripts/recent.css" type="text/css" rel="stylesheet" />
<script src="http://mybloggerlab.com/Scripts/json.js"></script>
<script type='text/javascript'>
var numposts = 5; //JUMLAH POSTING
var showpostthumbnails = true; //GAMBAR THUMBNAIL ubah ke false jika tidak ingin ditampilkan
var displaymore = false;
var displayseparator = true;
var showcommentnum = false;
var showpostdate = false; //TANGGAL POSTING ubah ke true jika mau ditampilkan
var showpostsummary = false; //Ringkasan ubah ke true jika mau ada ringkasan
var numchars = 100; //Jumlah karakter ringkasan
</script>
<script type="text/javascript" src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=labelthumbs"></script>
<style>
.label_with_thumbs a {text-transform:none;}
</style>

KODE RECENT POST hanya judul, tanpa gambar:


<div id="hlrpsb">
<script style="text/javascript">
function showrecentposts(json) {

  for (var i = 0; i < numposts; i++) {
    var entry = json.feed.entry[i];
    var posttitle = entry.title.$t;
    var posturl;
    if (i == json.feed.entry.length) break;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        posturl = entry.link[k].href;
        break;
      }
    }
    posttitle = posttitle.link(posturl);
    var readmorelink = "&raquo;&raquo;";
    readmorelink = readmorelink.link(posturl);
    var postdate = entry.published.$t;
    var cdyear = postdate.substring(0,4);
    var cdmonth = postdate.substring(5,7);
    var cdday = postdate.substring(8,10);
    var monthnames = new Array();
    monthnames[1] = "Jan";
    monthnames[2] = "Feb";
    monthnames[3] = "Mar";
    monthnames[4] = "Apr";
    monthnames[5] = "May";
    monthnames[6] = "Jun";
    monthnames[7] = "Jul";
    monthnames[8] = "Aug";
    monthnames[9] = "Sep";
    monthnames[10] = "Oct";
    monthnames[11] = "Nov";
    monthnames[12] = "Dec";
    if ("content" in entry) {
      var postcontent = entry.content.$t;}
    else
    if ("summary" in entry) {
      var postcontent = entry.summary.$t;}
    else var postcontent = "";
    var re = /<\S[^>]*>/g;
    postcontent = postcontent.replace(re, "");
    if (!standardstyling) document.write('');
    document.write('<div class="bbrecpost2">');
    document.write('<span>');
    if (standardstyling) document.write('');

    document.write(posttitle);
    if (standardstyling) document.write('');
    if (showpostdate == true) document.write(' - ' + cdday + ' ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdyear);
    if (!standardstyling) document.write('<div class="bbrecpostsum"">');
    if (standardstyling) document.write('');
    if (showpostsummary == true) {
      if (standardstyling) document.write('');
      if (postcontent.length < numchars) {
         if (standardstyling) document.write('<i>');
         document.write(postcontent);
         if (standardstyling) document.write('</i>');}
      else {
         if (standardstyling) document.write('<i>');
         postcontent = postcontent.substring(0, numchars);
         var quoteEnd = postcontent.lastIndexOf(" ");
         postcontent = postcontent.substring(0,quoteEnd);
         document.write(postcontent + '... ' + readmorelink);
         if (standardstyling) document.write('</i>');}
}
    if (!standardstyling) document.write('</div>');
             document.write('</span>');
            document.write('</div>');
    if (standardstyling) document.write('');
}
if (!standardstyling) document.write('<div class="bbwidgetfooter">');
if (standardstyling) document.write('');
document.write('');
if (!standardstyling) document.write('/div');

}
</script>
<script style="text/javascript">var numposts = 5;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div>
<noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>
<style type=text/css>
#hlrpsb a {color: #0B3861; font-size: 13px;}
#rpdr, #rpdr a {color:#808080;}
.bbrecpost2 {
padding-top:6px;
padding-bottom:6px;
border-bottom: 1px #cccccc dotted; }
</style>

SEKALIAN TEST LIST STYLE AH:

Bullet List:
  • List Kahiji
  • List Kadua
  • List Katilu
  • Istri Keempat 
  • Keadilan Sosial

Numbered List:
  1. List Kahiji
  2. List Kadua
  3. List Katilu
  4. Istri Keempat 
  5. Keadilan Sosial
Miring
Tebal

Quoted: Kutipan lorem ipsom dolor dolor sadayana daramanga? Amet-amet jabang bayee nya sakit mah. Persib Bandung bangkit atuh lah. Eleh wae!!! Teu bisa sare tibra mun Persib eleh teh!

Cag!
logoblog

Automatic Thumbnail and Read More Function for Blogger

 Automatic Thumbnail and Read More Function for Blogger
FUNGSI readmore digunakan untuk meringkas tulisan di halaman depan, menjadi gambar thumbnail, judul, dan kutipan bagian awal tulisan.

Auto Read More disebut juga Jump Break Otomatis karena memotong artikel di halaman depan secara otomatis dengan menggunakan kode.

Demo atau contohny di halaman depan blog ini atau di blog pada umumnya.

Read more function is used to cut our post on homepage, post will appear fully when we click read more link. It's cut automatically and if we insert image, it appears thumbnail.

This is automatic read more function with thumbnail. We just need to set up our HTML code.

Cara Memasang Auto Readmore di Halaman Depan Blogger

Follow steps:
1. Go to "Design" click "Edit HTML"
2. Tick on "Expand Widget Templates"
3. Find this code: <data:post.body/>

4. Replace with this code below

<b:if cond='data:blog.pageType == "static_page"'> <data:post.body/> <b:else/> <b:if cond='data:blog.pageType != "item"'> <div expr:id='"summary" + data:post.id'><data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>"); </script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'>read more</a></span> </b:if> <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if> </b:if>

5. Now, search for </head> and paste the following section of code immediately before it:
 

 <script type='text/javascript'>var thumbnail_mode = "no-float" ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script type='text/javascript'> //<![CDATA[ function removeHtmlTag(strx,chop){ if(strx.indexOf("<")!=-1) { var s = strx.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); } } strx = s.join(""); } chop = (chop < strx.length-1) ? chop : strx.length-2; while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; strx = strx.substring(0,chop-1); return strx+'...'; } function createSummaryAndThumb(pID){ var div = document.getElementById(pID); var imgtag = ""; var img = div.getElementsByTagName("img"); var summ = summary_noimg; if(img.length>=1) { 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>'; summ = summary_img; } var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>'; div.innerHTML = summary; } //]]> </script>


Clarification Code Above:
  • summary_noimg = 430; is post cut height without image
  • summary_img = 340; is post cut height with image
  • img_thumb_height = 100; is thumbnail image height
  • img_thumb_width = 120; is thumbnail image width 

CARA & KODE LAIN
Jika cara dan kode di atas tidak berfungsi, gunakan cara dan kode berikut ini:

1. Simpan di atas kode </head>

<!-- Auto Read More Body Script Start -->
<script type='text/javascript'>
no_thumb_sum = 300;
thumb_sum = 200;
thumb_h = 220;
thumb_w = 300;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(t,e){if(-1!=t.indexOf("<")){for(var n=t.split("<"),i=0;i<n.length;i++)-1!=n[i].indexOf(">")&&(n[i]=n[i].substring(n[i].indexOf(">")+1,n[i].length));t=n.join("")}for(e=e<t.length-1?e:t.length-2;" "!=t.charAt(e-1)&&-1!=t.indexOf(" ",e);)e++;return t=t.substring(0,e-1),t+"..."}function createSummaryAndThumb(t,e,n){var i=document.getElementById(t),m="",r=i.getElementsByTagName("img"),s=no_thumb_sum;r.length>=1&&(m='<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+e+'" title="'+n+'"><img src="'+r[0].src+'" width="'+thumb_w+'px" height="'+thumb_h+'px" /></a></span>',s=thumb_sum);var g=m+"<div>"+removeHtmlTag(i.innerHTML,s)+"</div>";i.innerHTML=g}
//]]>
</script>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.post-footer {display: none;}
.jump-link {float: right; }
.jump-link a {text-decoration: none; }
</style>
</b:if>
</b:if>
<!-- Auto Read More Body Script End -->

2. Ganti kode <data:post.body/> yang kedua dengan kode berikut ini:

<!-- Auto Read More Body Start -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:blog.pageType == &quot;index&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;,&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&quot;);</script>
<span class='jump-link' style='float:right;'><a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
<!-- Auto Read More in Body End -->
3. Save!

Source
Source2 
logoblog