-->

Cara Memasang Point Bintang Artikel di Pencarian Google

Rating Bintang Rich Snippet bisa di artikan membuat bintang lima beserta dengan foto profil Google Plus. Fungsinya dari Rating Bintang Rich Snippet tak lain untuk menampilkan Bintang lima pada setiap artikel - artikel blog kita pada saat di cari/search di mesin pencari Google. Untuk salah satu contohnya seperti screenshot di bawah ini. Cara yang saya pakai ini adalah cara yang singkat dan termudah, karena masih banyak tips dan trik lainnya untuk menampilkan rating bintang di search google ini. yang hasilnya nanti seperti ini :

Cara Memasang Point Bintang Artikel di Pencarian Google

Berhubung ada beberapa permintaan dari para pengguna template yang saya desain yang ingin menambahkan footer kolom (footer column), kali ini saya akan share cara membuat atau menambahkan 4 kolom pada template blogger tersebut.
Membuat Footer Kolom Pada Template Blogger

Cara Membuat atau menambah Footer kolom pada Template

  • Lahkah pertama login ke blog anda > Design > Edit HTML dan jangan lupa back up terlebih dahulu template yang anda gunakan
  • Setelah itu cari kode ]]></b:skin> dan paste kode Css berikut tepat di atas kode ]]></b:skin>

/*----- Colom Footer Bamz-----*/
#footer { margin:auto; padding: 10px 0px 0px 0px; width: 100%; border-top:1px dotted;}
#footer-wrapper { margin:auto;width: 860px; border:0; }
#footer-wrapper { float: left; margin: 0px 5px auto; padding-bottom: 5px; width: 23%;color:#333; font: 12px verdana,arial,Sans-erif;line-height: 1.6em; word-wrap: break-word; overflow: hidden; }
.footer {margin: 0; padding: 0;}
.footer .widget {margin: 0; padding: 10px 0px 0px 0px;}
.footer h2 { margin: 0px 0px 10px 0px;color:#333; text-transform:uppercase; font: bold 12px Arial, Tahoma, Verdana;
}
.footer ul { color:#333; margin: 0 auto; padding: 0; list-style-type: none; }
.footer li { display:block; color:#333; line-height: 1.6em; margin-left: 0 !important; padding: 4px;list-style-type: none; }
.footer li a { text-decoration:none; color: #333; }
.footer li a:hover { text-decoration:none; color:#000;}
.footer li:hover { display:block;}
/*----- End Colom Footer Bamz-----*/
  • Masih pada halaman Edit HTML, cari kode <div id='credits'>. Kalau sudah ketemu silahkan anda paste kode berikut tepat di atas kode <div id='credits'>
<!-- Kolom Footer -->

<div id='footer'>
<div id='footer-wrapper'>
<div id='footer-wrapper'>
<b:section class='footer' id='footer1' preferred='yes'>
</b:section>
</div>
<div id='footer-wrapper'>
<b:section class='footer' id='footer2' preferred='yes'>
</b:section>
</div>
<div id='footer-wrapper'>
<b:section class='footer' id='footer3' preferred='yes'>
</b:section>
</div>
<div id='footer-wrapper'>
<b:section class='footer' id='footer4' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/>
</div> </div>
<!-- end Kolom footer Bawah -->
Nah sekarang simpan dan lihat hasilnya, atau anda preview dulu sebelum di simpan :D.

Bisakah cara membuat kolom ini digunakan untuk template lain?

Cara membuat footer kolom ini sebenarnya bisa di gunakan untuk semua template, cuma mungkin cara penempatannya yang berbeda karena setiap template memiliki elemen yang berbeda. Kalau anda ingin mencobanya, silahkan saja. Dan cara paling gampangnya adalah paste kode HTML (kode ke-2) di atas kode </body>.

Hasil yang anda buat ini nantinya akan sama seperti kolom footer pada blog ini. Kalau anda ingin menjadikannya 3 atau mungkin 2 kolom tentu saja bisa. Bagaimana cara membuat footer tersebut menjadi 3 kolom?

Cara merubah footer menjadi 3 kolom

Untuk menjadikannya 3 kolom anda hanya tinggal mengubah lebar kolomnya menjadi 32%. Lihat kodenya di bawah ini
# footer-wrapper { background:#333333; float: left; margin: 0px 5px auto; padding-bottom: 5px; width: 23%;color:#ddd; font: 12px verdana,arial,Sans-erif;line-height: 1.6em; word-wrap: break-word; overflow: hidden; }
Selanjutnya hapus kode

<div id='footer-wrapper'>
<b:section class='footer' id='footer4' preferred='yes'>
</b:section>
</div>
Simpan template dan jadilah 3 kolom Footer.

Cara Memasang Realated Post Keren dengan Gambar

Kali ini saya akan posting artikel tentang cara membuat related post dengan thumbnail gambar di blog. Ingin tahu caranya bukan? Dengan memberikan gambar pada artikel terkait pada blog kita maka blog akan terlihat lebih menarik,,, naah dengan itu mazinu akan memberikan tutorial blogger ini kepada kalian yang sebelumnya tutorial ini sudah saya pakai dan hasilnya lumayan bagus,, tapi mazinu lebih suka yang simpel2 saja seperti yang mazinu gunakan saat ini! yaitu dengan memasang Artikel Terkait dengan icon sendiri. Tapi semua itu selera sendiri-sendiri. benar kan?

yang hasil Realated Past-nya nanti seperti ini : (gambar disertai judul artikel)

Cara Membuat Widget Search Box Super Keren Dan Responsive - Search Box adalah salah satu unsur alami dari sebuah situs web yang cukup penting, memiliki fungsi yanghampir sama seperti mesin pencari, yaitu untuk mencari kata kunci atau konten tertentu di website maupun blogSetelah Saya Memberikan Tutorial Cara Membuat Widget Featured Post Berdasarkan Label Keren Dan Responsive Kali Saya akan Memberikan Tutorial Cara Membuat Widget Search Box Super Keren Dan Responsiv.
Pada Kali ini Search Box nya akan saya bagi menjadi 4 type Search Box. Dan Cara Memasang nya Adalah Sebagai Berikut :


Klik Menu Layout ( Tata Letak ) 

   

 Pilih Add a Gadget


Cara Membuat Widget Search Box Super Keren Dan Responsive



Pilih HTML/JavaScript

Cara Membuat Widget Search Box Super Keren Dan Responsive

Dan Copy Script nya

Cara Membuat Widget Search Box Super Keren Dan Responsive



Oke dan dibawah ini adalah script dari keempat seacrh box yang telah saya buat  :

1. Simple search

<style>
@import url(http://weloveiconfonts.com/api/?family=fontawesome);
/* fontawesome */
[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}
body{
  text-align:center;

  background-color:#ebebeb;
}
.cf:before, .cf:after{
    content:"";
    display:table;
}

.cf:after{
    clear:both;
}

.cf{
    zoom:1;
}   
 /* Form wrapper styling */
.search-wrapper {
width: 240px;
margin: 45px auto 50px auto;
  border: 1px solid #ccc;
border-radius: 5px;
  
}

/* Form text input */

.search-wrapper input {
width: 160px;
height: 20px;
padding: 10px 15px;
float: left;
font: normal 16px 'Arial', 'Tahoma';
border:0;
background: #fff;
border-radius: 5px 0 0 5px;
}
.search-wrapper input:hover + .search-wrapper button {
    background: #ccc
}

.search-wrapper input:focus {
    outline: 0;
    background: #FFF;
}

.search-wrapper input::-webkit-input-placeholder {
   color: #c6c7c6;
   font-weight: normal;
}

.search-wrapper input:-moz-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}

.search-wrapper input:-ms-input-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}   

/* Form submit button */
.search-wrapper button {
overflow: visible;
position: relative;
float: right;
border:0;
padding: 0;
cursor: pointer;
height: 40px;
width: 50px;
font: bold 18px 'Arial', 'Tahoma';
color: white;
background: #3498db;
border-radius: 0 5px 5px 0;
transition: all 2.0s linear;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
}
  
.search-wrapper button:hover{   
    background: #2980b9;
    transition: all 2.0s linear;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;

  
.search-wrapper button:active,
.search-wrapper button:focus{ 
    background: #329400;
    outline: 0; 
    transition: all 0s linear;
    -webkit-transition: all 0s linear;
    -moz-transition: all 0s linear;
    -ms-transition: all 0s linear;
    -o-transition: all 0s linear;

}


.search-wrapper button:hover:before{
    border-right-color: #e54040;

}

.search-wrapper button:focus:before,
.search-wrapper button:active:before{
        border-right-color: #c42f2f;
}     

.search-wrapper button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */
    border: 0;
    padding: 0;
}   
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off"  class="search-wrapper cf">
        <input name="q" type="text" placeholder="Search" required="" />
        <button type="submit" id="button-submit"> <span class="fontawesome-search"></span>
        </button>
    </form>

 

2. Corner shape style

<style>
.cf:before, .cf:after{
    content:"";
    display:table;
}

.cf:after{
    clear:both;
}

.cf{
    zoom:1;
}   
 /* Form wrapper styling */
.search-wrapper {
width: 252px;
margin: 15px auto;
box-shadow: 0 1px 1px rgba(0, 0, 0, .4) inset, 0 1px 0 rgba(255, 255, 255, .2);
}

/* Form text input */

.search-wrapper input {
width: 150px;
height: 20px;
padding: 10px 15px;
float: left;
font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
border: 0;
background: #EEE;
border-radius: 3px 0 0 3px;
}

.search-wrapper input:focus {
    outline: 0;
    background: #fff;
    box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}

.search-wrapper input::-webkit-input-placeholder {
   color: #999;
   font-weight: normal;
   font-style: italic;
}

.search-wrapper input:-moz-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}

.search-wrapper input:-ms-input-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}   

/* Form submit button */
.search-wrapper button {
overflow: visible;
position: relative;
float: right;
border: 0;
padding: 0;
cursor: pointer;
height: 40px;
width: 72px;
font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';
color: white;
text-transform: uppercase;
background: #D83C3C;
border-radius: 0 3px 3px 0;
text-shadow: 0 -1px 0 rgba(0, 0, 0, .3);
}
  
.search-wrapper button:hover{   
    background: #e54040;

  
.search-wrapper button:active,
.search-wrapper button:focus{ 
    background: #c42f2f;
    outline: 0; 
}

.search-wrapper button:before { /* left arrow */
    content: '';
    position: absolute;
    border-width: 8px 8px 8px 0;
    border-style: solid solid solid none;
    border-color: transparent #d83c3c transparent;
    top: 12px;
    left: -6px;
}

.search-wrapper button:hover:before{
    border-right-color: #e54040;
}

.search-wrapper button:focus:before,
.search-wrapper button:active:before{
        border-right-color: #c42f2f;
}     

.search-wrapper button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */
    border: 0;
    padding: 0;
}   
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off" class="search-wrapper cf">
        <input type="text" name="q" placeholder="Search here..." required="" />
        <button type="submit" id="button-submit" >Search</button>
    </form>

 

3. Style With Icon

<style>
@import url(http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
.search {
  width: 100%;
  position: relative;
}
.search:before {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-family: 'FontAwesome';
  content: '\f002';
  background: #34495e;
  text-align: center;
  color: #fff;
  border-radius: 5px;
  -webkit-font-smoothing: subpixel-antialiased;
  font-smooth: always;
}
.searchTerm {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  border: 5px solid #34495e;
  padding: 5px;
  height: 40px;
  border-radius: 5px;
  outline: none;
}
.searchButton {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  opacity: 0;
  cursor: pointer;
}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off" class="search">
  <input class="searchTerm" type="search"  name="q"   placeholder="Enter your search term ..." /><input class="searchButton" id="button-submit" type="submit" />
</form>

 

4. Basic Style

<style>
.is-vishidden {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
}
.pattern {
  padding: 1em;
  line-height: 1;
}
.f {
   position: relative;
}
input {
  display: block;
  border: 1px solid #000;
}
input[type=search] {
    width: 100%;
    padding: 1em;
    padding-right: 7em;
    position: relative;
   top: 0;
}
#button-submit {
  position: absolute;
  right: 0.75em;
  top: 0.5em;
  bottom: 0.5em;
  z-index: 1;
  width: 6em;
  padding: 0;
  cursor: pointer;
}
</style>
<div id="pattern" class="pattern">
  <form id="searchbox" method="get" action="/search" autocomplete="off" class="f">
      <label class="is-vishidden">Search the site</label>   
    <input type="search"  name="q" placeholder="Enter your keywords..."/>
      <input id="button-submit" type="submit" class="btn search-submit" value="Search" />
</form>
</div>

Kali ini masih membahas tentang Tips Blogger yaitu Cara membuat label/kategori blog warna-warni yang keren. Cara ini masih menerapkan CSS agar label/kategori Blogger menjadi warna-warni dan tampak cantik. Hal ini tentu akan membuat penggunjung blog sobat betah dengan tampilan blog yang indah. Setiap label akan memiliki warna background berbeda dan dapat sobat rubah dengan mengedit code CSS-nya.
Jika sobat berhasil membuatnya nantinya akan tampil seperti screenshot berikut.
Widget Label Blog Warna-Warni Keren
Bagaimana keren bukan? untuk dapat membuatnya silahkan ikuti langkah-langkah berikut.
1. Pertama masuk dulu ke Dasboard Blogger Sobat
2. Pilih Template => edit HTML
3. Silahkan copy-paste CSS berikut dan letakkan tepat diatas </b:skin> atau </style> kalau saya coba yang diatas </style> (gunakan Ctrl + F untuk memudahka pencarian):
.sidebar .label-size {
position:relative;
text-transform: uppercase;
text-decoration:none;
font-size:11px;
font-family:Oswald, Arial, Sans-Serif;
color:#fff!important;
}
.sidebar .label-size a {
color:#fff!important;
font-weight:300;
padding:8px 10px;
margin:0 6px 6px 0;
float:left;
display:block;
-moz-transition: all 0.4s ;
-o-transition: all 0.4s;
-webkit-transition: all 0.4s ;
-ms-transition: all 0.4s ;
transition: all 0.4s ;
}
.sidebar .label-size-1 a {background:#006633;border-bottom:3px solid #003366;}
.sidebar .label-size-1 a:hover {background:#006666;}
.sidebar .label-size-2 a {background:#336600;border-bottom:3px solid #663300;}
.sidebar .label-size-2 a:hover {background:#666600;}
.sidebar .label-size-3 a {background:#660066;border-bottom:3px solid #330066;}
.sidebar .label-size-3 a:hover {background:#660033}
.sidebar .label-size-4 a {background:#009980;border-bottom:3px solid #006699;}
.sidebar .label-size-4 a:hover {background:#009933}
.sidebar .label-size-5 a {background:#14B1FF;border-bottom:3px solid #006699;}
.sidebar .label-size-5 a:hover {background:#008FD6}
CSS di atas hanya digunakan untuk blog yang memiliki sedikit label , jika label blog sobat memiliki banyak label maka gunakan CSS berikut ini:
.cloud-label-widget-content {text-align: left;}
.label-size {background: #83B4D8;display: block;float: left;margin: 0 3px 3px 0;color: #fff;font-family: Oswald, Arial, Sans-Serif;font-size: 11px;text-transform: uppercase;}
.label-size:nth-child(1) {background: #F86D9E;}
.label-size:nth-child(2) {background: #37C371;}
.label-size:nth-child(3) {background: #10BBEA;}
.label-size:nth-child(4) {background: #25CBFE;}
.label-size:nth-child(5) {background: #963690;}
.label-size:nth-child(6) {background: #A3195C;}
.label-size:nth-child(7) {background: #545454;}
.label-size:nth-child(8) {background: #F2A15F;}
.label-size:nth-child(9) {background: #00FF80;}
.label-size:nth-child(10) {background: #B7860B;}
.label-size:nth-child(11) {background: #99CC33;}
.label-size:nth-child(12) {background: #FFFF3D;}
.label-size:nth-child(13) {background: #3FDECF;}
.label-size:nth-child(14) {background: #FF2F0A;}
.label-size:nth-child(15) {background: #E9DB58;}
.label-size:nth-child(16) {background: #42FFBD;}
.label-size:nth-child(17) {background: #6899ED;}
.label-size:nth-child(18) {background: #FF52AE;}
.label-size:nth-child(19) {background: #8DBC2F;}
.label-size:nth-child(20) {background: #80FF00;}
.label-size a, .label-size span {
display: inline-block;
color: #fff !important;
padding: 4px 10px;
font-weight: bold;
}
.label-size:hover {
background: #222;
}
.label-count {
white-space: nowrap;
padding-right: 3px;
margin-left: -3px;
background: #333;
color: #fff ;
}
.label-size:hover .label-count, .label-size:focus+.label-count {
background-color: #FF6BFF;
}
5. Simpan perubahan template Sobat.
6. Kembali lagi ke Dashboard Blogger.
7. Klik Layout/Teta Letak > Add a Gadget > pilih Labels
8. Langkah terakhir edit widget Label sehingga sama dengan berikut ini.
9. Simpal Label dan coba lihat tampilan label pada blog sobat sudah berubah seperti screenshot diatas belum. jika belum cek apakah benar CSS yang saya berikan berada tepat diatas </b:skin> atau </style>.
Mengedit Label Blog

*note: kita harus mempunyai widget Labels dan menambahkan CSS di atas agar label-nya warna-warni.

sumber: jelasinblog.blogspot.com

Memasang Script Untuk Mencegah Orang Lain Mencopas dan Meresource Blog Anda - Sebelumya saya akan sedikit menjelaskan fungsi dan manfaat Mematikan/mendisable CTRL+U dan CTRL+S ,, yaitu agar blog kita aman dari orang-orang yang mungkin akan meng-copas artikel yang kita buat. Emm memang terkadang sebagian besar orang tidak suka jika artikelnya di copas / copi-paste mentah-mentah tanpa perubahan bahasa penulisannya, tapi ada juga yang mempersilahkan mengcopas blognya. Tapi saya sarankan kepada kalian jika ingin membuat artikel buatlah dengan tata bahasa kalian sendiri agar terkesan lebih menarik dan membanggakan dengan apa yang telah kita buat, Sehingga yang membaca artikel kita terasa bersahabat kepada kita. Naah untuk kalian yang ingin mempraktekan totorial ini silahkan disimak sedikit uraian buat kalian tentang bagaimana cara mematikan/mendisable CTRL+U dan CTRL+S agar Blog menjadi Aman. Silahkan disimak tutorialnya dibawah ini :


Cara Membuat Widget Featured Post Sidebar Berdasarkan Label Keren  - Widget Memang Sekarang ada banyak ragamnya. Akan tetapi banyak pula yang hanyamemiliki Simple design ataupun tidak responsive. Tapi kali ini saya akan memberikan tutorial yang menyangkup keduanyaYaitu Keren Dan Responsive.
 
Oke Guys. Setelah Saya Memberikan Tutorial Cara Membuat Subscribe Form Responsive Dan Keren Kali Saya akan Memberikan Tutorial Cara Membuat Widget Featured Post Berdasarkan Label Keren Dan Responsive .Cara Memasang nya sangat gampang, bisa dilakukan dengan cara :

Kopy Script Dibawah Ini > Pilih Tata Letak ( LayOut ) > Add a gadget > HTML/Javascript
  Langsung aja Nih Script nya :v
Note : Tulisan warna merah diganti dengan blog kalian dan label kalian :) 
<style> 
.tabs-md {
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.16);
    z-index: 2;
}
.tabs-md .tab {
clear:inherit !important;
}
.collection .collection-item.avatar {
    height: inherit !important;
    min-height: 64px;
    max-height: 83px; 
}
.collection-md {
   border:0;
   border-bottom: 1px solid #E0E0E0;
}
</style>
<script>
function showrecentpostswiththumbs(json) {
    document.write('<ul class="collection collection-md">');
    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 == 'replies' && entry.link[k].type == 'text/html') {
                var commenttext = entry.link[k].title;
                var commenturl = entry.link[k].href;
            }
            if (entry.link[k].rel == 'alternate') {
                posturl = entry.link[k].href;
                break;
            }
        }
        var thumburl;
        try {
            thumburl = entry.media$thumbnail.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 = d;
            } else thumburl = 'http://lh4.ggpht.com/_IjrRiI_bVb0/TOCYn1fMjII/AAAAAAAAF24/5Fvv-HJqh74/loading-2.gif';

        }


        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";
        document.write('<li class="collection-item avatar">');


        if (showpostthumbnails == true)
            document.write('<img class="circle" src="' + thumburl + '"/>');
        document.write('<b><a href="' + posturl + '" target ="_top">' + posttitle + '</a></b><br/>'); 

        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 (showpostsummary == true) {

            if (postcontent.length < numchars) {
                document.write('<i>');
                document.write(postcontent);
                document.write('</i>');
            } else {
                document.write('<i>');
                postcontent = postcontent.substring(0, numchars);
                var quoteEnd = postcontent.lastIndexOf(" ");
                postcontent = postcontent.substring(0, quoteEnd);
                document.write(postcontent + '...');
                document.write('</i>');
            }
        }

        var towrite = '';
        var flag = 0;
        document.write('<div>');

        if (showpostdate == true) {
            towrite = towrite + monthnames[parseInt(cdmonth, 10)] + '-' + cdday + ' - ' + cdyear;
            flag = 1;
        }

        if (showcommentnum == true) {
            if (flag == 1) {
                towrite = towrite + ' | ';
            }
            if (commenttext == '1 Comments') commenttext = '1 Comment';
            if (commenttext == '0 Comments') commenttext = 'No Comments';
            commenttext = '<a href="' + commenturl + '" target ="_top">' + commenttext + '</a>';
            towrite = towrite + commenttext;
            flag = 1;;
        }

        if (displaymore == true) {
            if (flag == 1) towrite = towrite + ' | ';
            towrite = towrite + '<a href="' + posturl + '" class="url" target ="_top"><small>READ MORE</small></a>';
            flag = 1;;
        }




        document.write(towrite);

        document.write('</div></li>');
        if (displayseparator == true)
            if (i != (numposts - 1));
    }
    document.write('</ul>');

}
var numposts = 5;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = false;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = false;
var numchars = 150;
</script> 
<div class="row">
    <div class="col s12">

      <ul class="tabs tabs-md">
        <li class="tab col s3"><a class="active" href="#test1">LABEL 1</a></li>
        <li class="tab col s3"><a href="#test2">LABEL 2</a></li> 
        <li class="tab col s3"><a href="#test3">LABEL 3</a></li> 
      </ul> 
    </div>
    <div id="test1" class="col s12">
      <script src="http://clickunduh.blogspot.com/feeds/posts/default/-/YOUR LABEL 1?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>
    </div>
    <div id="test2" class="col s12">
      <script src="http://clickunduh.blogspot.com/feeds/posts/default/-/YOUR LABEL 2?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>
    </div>
    <div id="test3" class="col s12">
      <script src="http://clickunduh.blogspot.com/feeds/posts/default/-/YOUR LABEL 3?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>
    </div> 
</div>