logo blog

Page Navigation Menjadi Autoload Ketika Di Scroll

Page Navigation Menjadi Autoload Ketika Di Scroll
auto-load-page navigation-post-blog

Cara Membuat Page Navigation Next Post Menjadi Auto Load Ketika Di Scroll

Tutorial Cara Merubah Page Navigation Menjadi Auto Load Ketika Di Scroll. Pada Postingan Kali ini kita akan merubah Page navigation Next Post Default Blogger Menjadi Autoload Ketika Postingan / Homepage Blog Di Scroll Ke Bawah...

Dengan mengganti Page Navigation Number / Title Menjadi Auto Load Post mungkin bisa memudahkan para pengunjung untuk melihat semua postingan yang ada pada blog kalian tanpa harus me - reload postingan terus menerus, sehingga memakan banyak kuota..

Untuk melihat tampilan dari Auto Load Post Page Navigation ini bisa kunjungi link dibawah ini....
Demo Auto Load Page Navigation Next Post


Untuk tutorial cara membuat New page auto load when scrolling down bisa ikuti langkah demi langkah berikut ini...

Cara Merubah Page Navigation Number Pada Blog Menjadi Auto Load


  • Login Ke blogger.com
  • Pilih Menu Template, Edit HTML, Cari Kode </head>
  • Lalu masukan script auto load post dibawah ini tepat di atasnya
  • 
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <script src='https://rawgit.com/mastamvan/backup/master/navigationautoload.js' type='text/javascript'/>
    <script type='text/javascript'>
    jQuery.ias({
        container : &#39;.blog-posts&#39;,
        item: &#39;.post-outer&#39;,
        pagination: &#39;#blog-pager&#39;,
        next: &#39;#blog-pager-older-link a&#39;,
        loader: &#39;https://web.sure.com/themes/default/images/loading.gif&#39;
    });
      </script>
    </b:if>
    
    Script Di Atas hanya akan bekerja di homepage blog, jika kalian ingin agar scriptnya bisa bekerja di semua halaman, silahkan hapus tag condisional berikut ini...

    
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    
    </b:if>
    
  • Tinggal Save Template dan atur jumblah postingan yang akan di tampilkan pada homepage dan ketika di load..
  • Done n sekian

Cukup sekian dan terima kasih, semoga artikel tentang Cara Membuat / Merubah Page Navigation Menjadi Autoload Ketika Di Scroll Ke Bawah ini bermanfaat..

Jangan lupa share dan tinggalkan jejak di kolom komentar jika artikel ini bermanfaat...

Cara Membuat Loading Page Dengan Animasi Gif Di Blog

Cara Membuat Loading Page Dengan Animasi Gif Di Blog
Cara Membuat Loading Page Dengan Animasi Gif Di Blog

Membuat Effect Loading Blog dengan Animasi Gif

Cara Membuat Effect Loading Page / Halaman Pada Blog Dengan Animasi Gif. Tutorial Kali ini kita akan membuat Progres Loaing pada saat halaman di buka atau di muat..

Sebelumnya saya juga sudah pernah posting loading halaman yang menampilkan Jam Dan Kopi seperti pada blog kang rian dulu.. bagi yang ingin mencobanya, silahkan kunjungi artikel ini.......
Animasi Loading Halaman Jam Digital Di Blog

Mungkin cara itu cukup rumit, makannya d sini saya share yang lebih simple lagi. Karena pada tutor kali ini kita cukup menggunakan Animasi Adri Gambar Gif Untuk di tampilkan pada saat blog pertama kali di muat...

Saya juga akan berikan beberapa situs untuk memeilih animasi gif barang kali kalian ingin memilih animasi yang akan di pakai pada situs / blog kalian...

Berikut ini beberapa situs yang bisa kalian coba untuk memilih animasi loading gifnya...
http://preloaders.net/
http://loading.io/
http://www.chimply.com/Generator#classic-spinner,animatedCirclewww.ajaxload.info
http://www.loadinfo.net/
http://cssload.net/

Kalian juga bisa memilih animasi loading yang sudah saya amankan terlebih dahulu, silahkan pilih gambar dibawah ini untuk dijadikan animasi loading page blog kalian...
Animasi Loading Halaman Animasi Loading Halaman Animasi Loading Halaman Animasi Loading Halaman Animasi Loading Halaman Animasi Loading Halaman
Animasi Loading Halaman Animasi Loading Halaman Animasi Loading Halaman Animasi Loading Halaman Animasi Loading Halaman Animasi Loading Halaman
Animasi Loading Halaman Animasi Loading Halaman Animasi Loading Halaman Animasi Loading Halaman Animasi Loading Halaman Animasi Loading Halaman
Klik Kanan Pada Gambar Terus Pilih Copy Image Location
Untuk tutorial cara pemasangan scriptnya, silahkan ikuti tutorial singkat berikut ini...

Cara Membuat Loading Page Dengan Animasi Gif Di Blog


  • Login Ke blogger.com
  • Pilih Template, Edit HTML, Cari Kode </head<
  • Setelah itu masukan css berikut ini di atasnya
  • 
    <style type='text/css'>
    .loading {
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        z-index: 9999;
        background: url('https://raw.githubusercontent.com/mastamvan/backup/loadinghalaman/efek-loading-blog-sederhana.gif') 50% 50% no-repeat rgb(249,249,249);
    }
    </style>
    <script type="text/javascript">
    $(window).load(function() {
        $(".loading").fadeOut("slow");
    })
    </script>
    

    Silahkan ganti url ini dengan url animasi gif yang kalian mau...
    https://raw.githubusercontent.com/mastamvan/backup/loadinghalaman/efek-loading-blog-sederhana.gif
  • Selanjutnya cari kode </body<. lalu masukan kode berikut di bawahnya...
  • 
    <div class="loading"></div>
    
  • Save template dan selesai deh tutorialnya..

Cukup sekian dan terima kasih, semoga artikel tentang Cara Membuat Loading Page Dengan Animasi Gif Di Blog ini bermanfaat.
jangan lupa tinggalkan jejak kalian di kolom komentar..

Cara Membuat Widget Label Jadi Berwarna Di Blog

Cara Membuat Widget Label Jadi Berwarna Di Blog
Cara Membuat Widget Label Jadi Berwarna Di Blog

Cara Agar Widget Label Blog Menjadi Warna Warni

Tutorial Cara Membuat Label Daftar Di Blog Menjadi Berwarna. Kali ini kita akan merubah daftar label menjadi warna - warni ketika di sentuh sama mouse...

Kita hanya merubah tampilan label yaang d setel ke tampilan Daftar, kalo untuk Cloud tampilannya biasa saja..

Untuk merubah tampilannya jadi berwarna, sangat simple kita hanya menambahkan css dan mengatur tampilan pada labelnya...

Langsung saja ke tutorial cara merubah widget label jadi bwerarna...

Cara Membuat Widget Label Blog Menjadi


  • Login ke blogger.com
  • Pilih Menu Template, Edit HTML, Cari Kode </head>
  • Lalu masukan CSS Dibawah ini tepat di atasnya
  • 
    <style type='text/css'>
    /* CSS label */
    #sidebar-wrapper .Label li{position:relative;background:#fff;border-bottom: 1px solid #bbb;color:#444;padding:0;margin:0;text-align:left;width:100%;font-size:90%;transition:all .3s ease-out}
    #sidebar-wrapper .Label li:hover {background:#fff;color:#cf4d35;}
    #sidebar-wrapper .Label li:before {content:"";position:absolute;width:0;height:100%;background:#4fafe9;transition:all .2s ease-in-out;}
    #sidebar-wrapper .Label li:hover:before {width:100%;}
    #sidebar-wrapper .Label li a{padding:0 0 0 10px;display:block;position:relative;line-height:42px;color:#787878;text-decoration:none;transition:all .3s ease-out}
    #sidebar-wrapper .Label li a:hover {color:#fff;}
    #sidebar-wrapper .Label li span{float:right;height:42px;line-height:42px;width:42px;text-align:center;display:inline-block;background:#4fafe9;color:#FFF;position:absolute;top:0;right:0;z-index:2}
    #sidebar-wrapper .Label li:nth-child(1) span,#sidebar-wrapper .Label li:nth-child(1):before,#sidebar-wrapper .Label li:nth-child(7) span,#sidebar-wrapper .Label li:nth-child(7):before {background:#ca85ca;}
    #sidebar-wrapper .Label li:nth-child(2) span,#sidebar-wrapper .Label li:nth-child(2):before,#sidebar-wrapper .Label li:nth-child(8) span,#sidebar-wrapper .Label li:nth-child(8):before {background:#e54e7e;}
    #sidebar-wrapper .Label li:nth-child(3) span,#sidebar-wrapper .Label li:nth-child(3):before,#sidebar-wrapper .Label li:nth-child(9) span,#sidebar-wrapper .Label li:nth-child(9):before {background:#61c436;}
    #sidebar-wrapper .Label li:nth-child(4) span,#sidebar-wrapper .Label li:nth-child(4):before,#sidebar-wrapper .Label li:nth-child(10) span,#sidebar-wrapper .Label li:nth-child(10):before {background:#f4b23f;}
    #sidebar-wrapper .Label li:nth-child(5) span,#sidebar-wrapper .Label li:nth-child(5):before,#sidebar-wrapper .Label li:nth-child(11) span,#sidebar-wrapper .Label li:nth-child(11):before {background:#46c49c;}
    #sidebar-wrapper .Label li:nth-child(6) span,#sidebar-wrapper .Label li:nth-child(6):before,#sidebar-wrapper .Label li:nth-child(12) span,#sidebar-wrapper .Label li:nth-child(12):before {background:#607ec7;}
    #sidebar-wrapper .label-size{position:relative;display:block;float:left;margin:0 4px 4px 0;font-size:13px;transition:all 0.3s;}
    #sidebar-wrapper .label-size a{background:#fff;background-image:linear-gradient(to bottom,rgba(255,255,255,1)0,rgba(250,250,250,1)70%,rgba(246,246,246,1)99%,rgba(246,246,246,1)100%);display:inline-block;color:#444;padding:5px 8px;font-weight:400;border:1px solid #e3e3e3;background-repeat:repeat-y;background-size:100% 90px;background-position:0 -30px;transition:all .3s}
    #sidebar-wrapper .label-count{opacity:0;visibility:hidden;font-size:85%;display:inline-block;position:absolute;top:-10px;right:-10px;background:#4fafe9;color:#fff;white-space:nowrap;padding:0;width:22px;height:22px;line-height:22px;border-radius:100%;text-align:center;z-index:1;transition:all .3s}
    #sidebar-wrapper .label-size:hover .label-count{opacity:1;visibility:visible;top:-5px}
    #sidebar-wrapper .label-size a:hover{color:#444;background-image:linear-gradient(to bottom,rgba(255,255,255,1)0,rgba(250,250,250,1)18%,rgba(255,255,255,1)99%,rgba(255,255,255,1)100%);background-position:0 0}
    .Label li {background:transparent;float:left;padding:5px;margin:0;text-align:left;width:45%;transition:all .3s ease-out;}
    .Label li span{float:right;color:#aaa;margin:0;padding:4px 6px;text-align:center;font-size:13px;font-weight:400;border-radius:2px;}
    </style>
    
  • Save template
  • Tinggal kalian atur tampilan pada labelnya seperti berikut..

  • Cara Membuat Widget Label Jadi Berwarna Di Blog
  • Done, semuanya selesai..
Cukup sekian dan terima kasih, semoga artikel tentang Cara Membuat Widget Label Jadi Berwarna Di Blog ini bermanfaat.

Cara Membuat Multi Tab Widget Di Sidebar Blog

Cara Membuat Multi Tab Widget Di Sidebar Blog
Cara Membuat Multi Tab Widget Di Sidebar Blog

Cara Memasang Widget Multi Tab Di Sidebar Blogger

Tutorial Cara Memasang Widget Multi Tab Beserta Icon Di Sidebar Blog . Hallo sobat, pada tutorial blog kali ini mas tamvan akan berbagi sebauh widget multi tab yang fungsinya untuk membagi 3 widget jadi satu kolom..

Keuntungan memasang widget multi tab di sidebar blog mungkin bisa mengurangi jumblah widget yang sudah banyak agar tidak terlalu ke bawah, sehingga tampilannjya jadi ribet...

Tampilan Widget multi tab iin seperti berikut...
Cara Membuat Multi Tab Widget Di Sidebar Blog


Untuk tutorial cara pembuatan widget multi tab di sidebar, silahkan ikuti tutorial sederhana berikut ini....

Cara Membuat Widget Multi Tab di Sidebar Blog


  • Login ke blogger.com
  • Terus Pilih Template, Edit HTML, Cari Kode </head>
  • Kalo Udah Ketemu, masukan css berikut di atasnya
  • 
    <style type='text/css'>
    /* Multi Tab Widget Sidebar */
    .multitab-section{background:#fff;text-transform:uppercase;width:100%}
    .multitab-widget{list-style:none;margin:0 0 10px;padding:0}
    .multitab-tab{border:0;width:33.3%;text-align:center;width: 100%;}
    .multitab-section h2,.multitab-section h3,.multitab-section h4,.multitab-section h5,.multitab-section h6 {display:none;}
    .multitab-widget li a{margin:-2px;font-size:13px;font-weight:400;text-transform:uppercase;line-height:40px;width:32.3%;list-style:none;text-align:center;display:inline-block;padding:5px 0;background:#3cc091;color:#fff;cursor:pointer;position:relative;transition:all .3s;overflow: hidden;}
    .multitab-widget li a.multitab-widget-current{background: #35a47c;}
    .multitab-widget .multitab-tab a:before{font-family:Fontawesome;text-align:center;margin-right:5px;}
    .multitab-widget .multitab-tab a:nth-child(1):before {content:&#39;\f09e&#39; !important;}
    .multitab-widget .multitab-tab a:nth-child(2):before {content:&#39;\f09e&#39; !important;}
    .multitab-widget .multitab-tab a:nth-child(3):before {content:&#39;\f0e6&#39; !important;}
    </style>
    
  • Selanjutnya Kita Memasang Javascript, cari kode </body>, lalu masukan script dibawah ini tepat di atas kode tadi
  • 
    <script type='text/javascript'>
    //<![CDATA[
    // Multi tab widget Sidebar
    jQuery(document).ready(function($){ $(".multitab-widget-content-widget-id").hide(); $("ul.multitab-widget-content-tabs-id li:first a").addClass("multitab-widget-current").show(); $(".multitab-widget-content-widget-id:first").show(); $("ul.multitab-widget-content-tabs-id li a").click(function() { $("ul.multitab-widget-content-tabs-id li a").removeClass("multitab-widget-current a"); $(this).addClass("multitab-widget-current"); $(".multitab-widget-content-widget-id").hide(); var activeTab = $(this).attr("href"); $(activeTab).fadeIn(); return false; }); });
    //]]>
    </script>
    
  • Berikutnya kita akan menaro HTML penampil widget multi tab sidebarnya, silahkan cari kode sidebar blog kalian contohnya seperti ini <div id='sidebar-wrapper'> atau <aside id='sidebar-wrapper'>
  • Copy dan masukan HTML berikut di bawah kode sidebar tadi
  • 
    <div class='multitab-section'>
      <ul class='multitab-widget multitab-widget-content-tabs-id'>
        <li class='multitab-tab'>
          <a href='#multitab-column-id1' title='Popular' class='multitab-widget-current'><span>Popular</span></a>
          <a href='#multitab-column-id2' title='Labels'><span>Tags</span></a>
          <a href='#multitab-column-id3' title='Comment'><span>Comment</span></a>
        </li>
      </ul>
      <div class='multitab-widget-content multitab-widget-content-widget-id' id='multitab-column-id1'>
        <b:section class='sidebar' id='multitab-sidebar1' preferred='yes' />
      </div>
      <div class='multitab-widget-content multitab-widget-content-widget-id' id='multitab-column-id2'>
        <b:section class='sidebar' id='multitab-sidebar2' preferred='yes' />
      </div>
      <div class='multitab-widget-content multitab-widget-content-widget-id' id='multitab-column-id3'>
        <b:section class='sidebar' id='multitab-sidebar3' preferred='yes' />
      </div>
    </div>
    
  • Kira-kira hasilnya nanti seperti berikut....

  • Cara Membuat Multi Tab Widget Di Sidebar Blog
Silahkan sesuaikan tulisan Popular, Tags, Comment. Dengan Widget yang kalian inginkan...
Jika Multi Tabnya tidak bisa di klik, silahkan masukan script berikut di atas </head>

<script type='text/javascript'>
       //<![CDATA[
       if (typeof(jQuery) == 'undefined') {document.write("<scr" + "ipt type=\"text/javascript\" src=\"//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js\"></scr" + "ipt>");}
       //]]>
</script>

.. Dan Kalo iconnya tidak tampil, silahkan masukan script berikut di atas </head> juga

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>
  • Kalo sudah, tinggal save n done
  • Sekarang tinggal mengisi widget tadi dengan widget seperti Populat Post, Label / Komentar. Caranya.
  • Masuk Ke Tataletak, Tambahkan Widget di kolom yang bertulisan multitab-sidebar1, multitab-sidebar2, multitab-sidebar3
  • Tinggal Pilih, widget apa yang mau di pasang...
  • Cukup sampai di sini...
Cukup sekian dan terima kasih, semoga artikel tentang Cara Membuat Multi Tab Widget Di Sidebar Blog ini bermanfaat..

Apabila ada yang mau di tanyakan, silahkan bertanya di kolom komentar...

Cara Membuat Facebook PopUp Like Box Responsive

Cara Membuat Facebook PopUp Like Box Responsive
Cara Membuat Facebook PopUp Like Box Responsive

Cara menambahkan Popup Facebook Fanspage Like Box Responsive di Blog

Tutorial Cara Membuat Pop Up Like Box Facebook Responsive di Blogger. Pada tutorial blog kali ini saya akan berbagi sebuah widget followers/ like fanspage facebook melayang / pop up ketika blog kita di load...

Mungkin sudah banyak yang share widget pop up like box fanspage facebook responsive d blog lain, tapi apa salahnya saya juga share daripada bingung mau share apa :v

Mungkin widget dari blog lain tampilanya keren-keren, terus ada yang berdasarkan timer, tapi tidak untuk widget dari saya ini... di sini saya membuat tampilannya yang simple mini pop up facebook like box lah :v
Baca juga artikel tentang widget pop up card di bloger



Berikut ini tampilan dari widget sosial media facebook pop up like box.

facebook popup like box html code

Untuk tutorial cara pemasangannya cukup mudah, silahkan simak tutorial berikut ini.......

Cara Membuat Popup Like Facebook di Blog


  • Terus ke Template, Edit HTML, Cari Kode </body>
  • Lalu masukan kode berikut diatasnya..
  • 
    <script type='text/javascript'>
    //<![CDATA[
    //grab user's browser info and calculates/saves first visit
    jQuery.cookie = function (key, value, options) { if (arguments.length > 1 && String(value) !== "[object Object]") { options = jQuery.extend({}, options); if (value === null || value === undefined) { options.expires = -1; }
    if (typeof options.expires === 'number') { var days = options.expires,  t = options.expires = new Date();  t.setDate(t.getDate() + days); } value = String(value); return (document.cookie = [encodeURIComponent(key), '=', options.raw ? value : encodeURIComponent(value), options.expires ? '; expires=' + options.expires.toUTCString() : '', options.path ? '; path=' + options.path : '', options.domain ? '; domain=' + options.domain : '', options.secure ? '; secure' : ''].join('')); }
    options = value || {}; var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent; return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null; };
    // the pop up actions
    $(function ($) {
      if ($.cookie('popup_fb') != 'yes') {
        $('#tamvan-back').delay(400).fadeIn("fast"); // options slow or fast
        $('#tamvan-close, #tamvan-exit').click(function () {
          $('#tamvan-back').stop().fadeOut("fast"); // options slow or fast
        });
     }
    //initiate popup function by setting up the cookie expiring time
    $.cookie('popup_fb', 'yes', { path: '/', expires: 5 });
    });
    //]]>
    </script>
    <div class='mas_tamvan'>
    <div id='tamvan-back'>
      <div id='tamvan-exit'> </div>
      <div id='tamvan-box'>
        <div class='tamvan-box-inner'>
          <div id='tamvan-close'>
            <img src='https://upload.wikimedia.org/wikipedia/commons/4/44/Curation_bar_icon_close.png'/>
          </div>
          <iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/facebook/&amp;width=290&amp;height=275&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false' style='border: 0 none; overflow: hidden; width: 290px; height: 270px;text-align:center;margin:0 auto;'/>
        </div>
      </div>
    </div>
    </div>
    
    Silahkan ganti url ini https://www.facebook.com/facebook/ dengan url Fanspage facebook kalian...

    Jika kalian ingin agar widget pop up facebooknya muncul di setiap kali buka blog /post di hari yang sama, silahkan ganti nilai pada kode ini expires: 5 menjadi 0 (Angka Nol) expires: 0

    Jika pop upnya tidak muncul / tidak bisa di klos, tutup. silahkan masukan kode berikut di atas </head>
    
    <script type='text/javascript'>
           //<![CDATA[
           if (typeof(jQuery) == 'undefined') {document.write("<scr" + "ipt type=\"text/javascript\" src=\"//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js\"></scr" + "ipt>");}
           //]]>
    </script>
    
  • Lanjut, masih di edit HTML, sekarang kalian cari kode </head>. Lalu masukan css berikut di atasnya...
  • 
    <style type='text/css'>
    #tamvan-back{display:none;background:rgba(0,0,0,0.8);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999}
    #tamvan-exit{width:100%;height:100%}
    .tamvan-box-inner{width:266px;position:relative;mas_tamvan:block;padding:20px 0 0;margin:0 auto;text-align:center}
    #tamvan-close{cursor:pointer;position:absolute;top:1px;right:-17px;font-size:18px;font-weight:700;color:#000;z-index:99999;mas_tamvan:inline-block;line-height:18px;height:18px;width:18px}
    #tamvan-close:hover{color:#06c}
    #tamvan-box{min-width:310px;min-height:240px;position:absolute;top:50%;left:50%;margin:-220px 0 0 -170px;-webkit-box-shadow:0 0 16px #000;-moz-box-shadow:0 0 16px #000;box-shadow:0 0 16px #000;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;background:#fff;max-height:253px}
    @media (max-width:380px){.mas_tamvan{position:fixed;top:50%;left:50%}#tamvan-box{min-width:310px;min-height:240px;transform:scale(0.67);-webkit-transform:scale(0.67);-o-transform:scale(0.67);-ms-transform:scale(0.67);-moz-transform:scale(0.67)}.tamvan-box-inner{width:266px}#tamvan-close{right:-17px}}
    #tamvan-back iframe{transform:scale(0.920);-webkit-transform:scale(0.920);-o-transform:scale(0.920);-ms-transform:scale(0.920);-moz-transform:scale(0.920);transform-origin:top left;-webkit-transform-origin:top left;-o-transform-origin:top left;-ms-transform-origin:top left;-moz-transform-origin:top left}</style>
    
  • Tinggal Save template.. done
Jika kalian ingin memasangnya di widget blogger, silahkan gunakan kode berikut saya, biar ga rumit dan ga ribet / bingung karena penjelasannya kurang komplit..
  • Silahkan ke tataletak, tambahkan widget, terus pilih html javascript dan masukan kode di bawah ini ke dalamnya
  • 
    <!--Kode CSS-->
    <style type='text/css'>
    #tamvan-back{display:none;background:rgba(0,0,0,0.8);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999}
    #tamvan-exit{width:100%;height:100%}
    .tamvan-box-inner{width:266px;position:relative;mas_tamvan:block;padding:20px 0 0;margin:0 auto;text-align:center}
    #tamvan-close{cursor:pointer;position:absolute;top:1px;right:-17px;font-size:18px;font-weight:700;color:#000;z-index:99999;mas_tamvan:inline-block;line-height:18px;height:18px;width:18px}
    #tamvan-close:hover{color:#06c}
    #tamvan-box{min-width:310px;min-height:240px;position:absolute;top:50%;left:50%;margin:-220px 0 0 -170px;-webkit-box-shadow:0 0 16px #000;-moz-box-shadow:0 0 16px #000;box-shadow:0 0 16px #000;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;background:#fff;max-height:253px}
    @media (max-width:380px){.mas_tamvan{position:fixed;top:50%;left:50%}#tamvan-box{min-width:310px;min-height:240px;transform:scale(0.67);-webkit-transform:scale(0.67);-o-transform:scale(0.67);-ms-transform:scale(0.67);-moz-transform:scale(0.67)}.tamvan-box-inner{width:266px}#tamvan-close{right:-17px}}
    #tamvan-back iframe{transform:scale(0.920);-webkit-transform:scale(0.920);-o-transform:scale(0.920);-ms-transform:scale(0.920);-moz-transform:scale(0.920);transform-origin:top left;-webkit-transform-origin:top left;-o-transform-origin:top left;-ms-transform-origin:top left;-moz-transform-origin:top left}</style>
    <!--Kode Javascript-->
    <script type='text/javascript'>
    //<![CDATA[
    //grab user's browser info and calculates/saves first visit
    jQuery.cookie = function (key, value, options) { if (arguments.length > 1 && String(value) !== "[object Object]") { options = jQuery.extend({}, options); if (value === null || value === undefined) { options.expires = -1; }
    if (typeof options.expires === 'number') { var days = options.expires,  t = options.expires = new Date();  t.setDate(t.getDate() + days); } value = String(value); return (document.cookie = [encodeURIComponent(key), '=', options.raw ? value : encodeURIComponent(value), options.expires ? '; expires=' + options.expires.toUTCString() : '', options.path ? '; path=' + options.path : '', options.domain ? '; domain=' + options.domain : '', options.secure ? '; secure' : ''].join('')); }
    options = value || {}; var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent; return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null; };
    // the pop up actions
    $(function ($) {
      if ($.cookie('popup_fb') != 'yes') {
        $('#tamvan-back').delay(400).fadeIn("fast"); // options slow or fast
        $('#tamvan-close, #tamvan-exit').click(function () {
          $('#tamvan-back').stop().fadeOut("fast"); // options slow or fast
        });
     }
    //initiate popup function by setting up the cookie expiring time
    $.cookie('popup_fb', 'yes', { path: '/', expires: 5 });
    });
    //]]>
    </script>
    <!--Kode HTML-->
    <div class='mas_tamvan'>
    <div id='tamvan-back'>
      <div id='tamvan-exit'> </div>
      <div id='tamvan-box'>
        <div class='tamvan-box-inner'>
          <div id='tamvan-close'>
            <img src='https://upload.wikimedia.org/wikipedia/commons/4/44/Curation_bar_icon_close.png'/>
          </div>
          <iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/facebook/&amp;width=290&amp;height=275&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false' style='border: 0 none; overflow: hidden; width: 290px; height: 270px;text-align:center;margin:0 auto;'/>
        </div>
      </div>
    </div>
    </div>
    
    Untuk pengaturannya sama seperti di atas...
  • Save n done

Cukup sekian dan terima kasih, semoga artikel tentang Tutorial Cara Membuat Pop Up Like Box Facebook Responsive di Blogger ini bermangaat.
Apabila ada yang mau di tanyakan silahkan bertanya di kolom komentar :)

Cara Membuat Vertical Mega Menu Multi Level Di Blog

Cara Membuat Vertical Mega Menu Multi Level Di Blog
Cara Membuat Vertical Mega Menu Multi Level Di Blog

cara membuat jquery vertical accordion menu multi level

Cara Membuat Sidebar Vertical Mega Menu Multi Level Di Blog Dengan jQuery, tutorial kali ini kita akan membuat sebuah menu navigation yang memiliki banyak link untuk di tampilkan dengan label tertentu [ Multi-Level Drop-Down Menu ], biasanya sering di gunakan pada blog / website yang memiliki banyak kategori seperti situs filem, game, tutorial, gado-gado dll....

Pada tutorial cara membuat vertical mega menu ini kita bisa memilih 4 tampilan, ada vertical mega menu left, vertical mega menu right, vertical mega menu dengan effect animasi ketika di buka sub menunya

Sebelumnya saya juga sudah sering membuat postingan tentang Mega Menu Navigation di blogger, ada yang di sertai dengan gambar yang di ambil pada label, ada yang text doang. liat saja di artikel berikut...



Nah pada tutorial kali ini kita membuat mega menu dengan 4 style dan hanya menampilkan link url tanpa disertai dengan gambar...

Jquery Sidebar Mega Menu Navigation Drop Down


Demo Mega Menu Navigation

  • Terus ke Template, Edit HTML, Cari Kode </body>
  • Lalu masukan kode berikut diatasnya..
  • 
    <script type="text/javascript" src="https://googledrive.com/host/0B_1DArceSF8qQkhvMkdmblU1cTg/jquery.plugins.js"></script>
    <script type='text/javascript' src='https://googledrive.com/host/0B_1DArceSF8qQkhvMkdmblU1cTg/jquery.dcverticalmegamenu.1.2.js'></script>
    
  • Masih di edit html, sekarang kita cari kode ini </head>, lalu masukan kode berikut di atasnya...
  • 
    <link rel="stylesheet" type="text/css" href="https://googledrive.com/host/0B_1DArceSF8qQkhvMkdmblU1cTg/megamenu.css"/>
    <script type="text/javascript">
    $(document).ready(function($){
    
      $('#mega-1').dcVerticalMegaMenu({
        rowItems: '3',
        speed: 'fast',
        effect: 'show',
        direction: 'right'
      });
      $('#mega-2').dcVerticalMegaMenu({
        rowItems: '3',
        speed: 'slow',
        effect: 'fade',
        direction: 'left'
      });
      $('#mega-3').dcVerticalMegaMenu({
        rowItems: '4',
        speed: 'slow',
        effect: 'slide',
        direction: 'right'
      });
      $('#mega-4').dcVerticalMegaMenu({
        rowItems: '3',
        speed: 'fast',
        effect: 'slide',
        direction: 'left'
      });
    
    });
    </script>
    
  • Sekarang tinggal memasukan HTMLnya, Bisa di EDIT Html / Di Tataletak Tambahkan Gadget / Widget
  • Kita coba pasang di EDIT Html aja biar sekalian... Cari Kode <body> lalu copy dan masukan kode dibawah ini tepat di atasnya
  • Silahkan Pilih salah satu dari 4 style ini, semuanya juga boleh :v
  • Mega Menu Navigation Left


  • Cara Membuat Vertical Mega Menu Multi Level Di Blog

    Contoh Code Mega Menu Navigation
    Example Code Mega Menu Navigation
    
    <div class="demo-container">
      <div class="test">
        <ul id="mega-1" class="mega-menu right">
          <li class="dc-mega-li"><a class="dc-mega" href="#">Menu Item A<span class="dc-mega-icon"></span></a>
            <div style="height: 346px; margin-top: -56px; z-index: 1000; width: 480px; display: none; left: 209px;" class="sub-container mega">
              <ul class="sub">
                <div style="width: 480px;" class="row first">
                  <li class="mega-unit mega-hdr"><a style="height: 16px;" class="mega-hdr-a" href="#">Sub-Header 1</a>
                    <ul>
                      <li><a href="#">Menu Link</a></li>
                    </ul>
                  </li>
                </div><div style="width: 480px;" class="row last">
                  <li class="mega-unit mega-hdr"><a style="height: 16px;" class="mega-hdr-a" href="#">Sub-Header 2</a>
                    <ul>
                      <li><a href="#">Menu Link</a></li>
                    </ul>
                  </li>
                </div>
              </ul>
            </div>
          </li>
          <li class="dc-mega-li"><a class="dc-mega" href="#">Menu Item B<span class="dc-mega-icon"></span></a>
            <div style="height: 137px; margin-top: -42px; z-index: 1000; width: 480px; display: none;" class="sub-container mega">
              <ul class="sub">
                <div style="width: 480px;" class="row last first">
                  <li class="mega-unit mega-hdr"><a style="height: 16px;" class="mega-hdr-a" href="#">Sub-Header 1</a>
                    <ul>
                      <li><a href="#">Menu Link</a></li>
                    </ul>
                  </li>
                  <li class="mega-unit mega-hdr"><a style="height: 16px;" class="mega-hdr-a" href="#">Sub-Header 2</a>
                    <ul>
                      <li><a href="#">Menu Link</a></li>
                    </ul>
                  </li>
                  <li class="mega-unit mega-hdr last"><a style="height: 16px;" class="mega-hdr-a" href="#">Sub-Header 3</a>
                    <ul>
                      <li><a href="#">Menu Link</a></li>
                    </ul>
                  </li>
                </div>
              </ul>
            </div>
          </li>
          <li class="dc-mega-li"><a class="dc-mega" href="#">Menu Item D<span class="dc-mega-icon"></span></a>
            <div style="height: 425px; margin-top: -147px; z-index: 1000; width: 480px; display: none; left: 209px;" class="sub-container mega">
              <ul class="sub">
                <div style="width: 480px;" class="row first">
                  <li class="mega-unit mega-hdr"><a style="height: 16px;" class="mega-hdr-a" href="#">Sub-Header 1</a>
                    <p></p>
                    <ul>
                      <li><a href="#">Menu Link</a></li>
                    </ul>
                  </li>
                  <li class="mega-unit mega-hdr"><a style="height: 16px;" class="mega-hdr-a" href="#">Sub-Header 2</a>
                    <ul>
                      <li><a href="#">Menu Link</a></li>
                    </ul>
                  </li>
                  <li class="mega-unit mega-hdr last"><a style="height: 16px;" class="mega-hdr-a" href="#">Sub-Header 3</a>
                    <ul>
                      <li><a href="#">Menu Link</a></li>
                    </ul>
                  </li>
                </div>
                <div style="width: 480px;" class="row last">
                  <li class="mega-unit mega-hdr"><a style="height: 16px;" class="mega-hdr-a" href="#">Sub-Header 4</a>
                    <ul>
                      <li><a href="#">Menu Link</a></li>
                    </ul>
                  </li>
                  <li class="mega-unit mega-hdr"><a style="height: 16px;" class="mega-hdr-a" href="#">Sub-Header 5</a>
                    <ul>
                      <li><a href="#">Menu Link</a></li>
                    </ul>
                  </li>
                  <li class="mega-unit mega-hdr last"><a style="height: 16px;" class="mega-hdr-a" href="#">Sub-Header 6</a>
                    <ul>
                      <li><a href="#">Menu Link</a></li>
                    </ul>
                  </li>
                </div>
              </ul>
            </div>
          </li>
        </ul>
      </div>
    </div>
    

    Full Code Mega Menu Navigation



Silahkan ganti tulisan Menu Link dengan Text / judul menu kalian. Ganti juga tanda # pagar dengan url / link kalian...
Jika sub menunya tidak tampil, silahkan masukan kode berikut di atas </head>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

  • Done, tinggal save...

Cukup sekian dan terima kasih, semoga artikel tentang cara membuat mega menu navigation vertical ini bermanfaat.
Jangan lupa apabila ada yang tidak di pahami dalam penulisannya silahkan bertanya di kolom komentar :)

mega menu vertical css

vertical mega menu wordpress

vertical mega menu bootstrap

vertical mega menu jquery

vertical mega menu css3

left side mega menu

Cara Membuat Tabel Responsive Di Blogger

Cara Membuat Tabel Responsive Di Blogger
cara-membuat-tabel-responsive-di-blogger

Tutorial Membuat Tabel Keterangan Responsive Di Dalam Postingan Blog

Tutorial Cara Memasang / membuat agar tabel keterangan responsive di dalam postingan blog, pada postingan kali ini saya kan memberikan table atau kotak keterangan yang responsive untuk di pasang pada postingan blog...

Bagi agan blogger yang suka atau ingin membuat tabel / kotak keterangan untuk memisahkan, mengelompokan bagian tertentu pada sebuah text dengan tampilan yang suport untuk semua device seperti hp, tablet, laptop, notebook dan yang lainnya...

... agar tampilan tabel tersebut tidak melebihi ukuran layar maka kita harus membuatnya menjadi responsive, mobile friendly agar enak di pandang dan di bacanya....

Sebelumnya saya juga sudah pernah posting artikel tentang cara membuat tabel keterangan yang responsive dengan tampilan yang bagus dan berwarna.... Bagi kalian yang ingin mencobanya, silahkan kunjungi artikel berikut ini.....
Membuat Beautiful Table Responsive With CSS

Untuk tutorial cara membuat kotak tabel keterangan responsive ini, kita menambahkan javascript agar nanti dapat mengelompokan kata dengan keterangan.....

Barang kali kalian ingin melihat tampilannya terlebih dahulu, silahkan kunjungi link demo table berikut ini....

Demo Tabel Responsive

Sekarang kita masuk ke tutorial cara pemasangan tabel responsive di blognya...

Cara Membuat Kotak Tabel Responsive Di Postingan Blog


  • Pilih Template, Edit Html, Cari Kode </head>
  • Lalu masukan css berikut di atasnya...
  • 
    <style type='text/css'>
    /*<![CDATA[*/
    *{margin:0;padding:0;}
    table{background:white;border-collapse:collapse;margin:1.25em 0 0;width:100%;}
    table tr,table th,table td{border:none;border-bottom:1px solid #e4ebeb;font-family:'Lato',sans-serif;font-size:.875rem;}
    table th,table td{padding:10px 12px;text-align:left;}
    table th{background:#56a2cf;color:#ffffff;text-transform:uppercase;}
    table tr td{background:#eaf3f5;color:#999999;}
    table tr:nth-of-type(2n+2) td{background:#ffffff;}
    table.bt tfoot th,table.bt tfoot td,table.bt tbody td{font-size:.8125rem;padding:0;}
    table.bt tfoot th:before,table.bt tfoot td:before,table.bt tbody td:before{background:#56a2cf;color:white;margin-right:10px;padding:2px 10px;}
    table.bt tfoot th .bt-content,table.bt tfoot td .bt-content,table.bt tbody td .bt-content{display:inline-block;padding:2px 5px;}
    table.bt tfoot th:first-of-type:before,table.bt tfoot th:first-of-type .bt-content,table.bt tfoot td:first-of-type:before,table.bt tfoot td:first-of-type .bt-content,table.bt tbody td:first-of-type:before,table.bt tbody td:first-of-type .bt-content{padding-top:10px;}
    table.bt tfoot th:last-of-type:before,table.bt tfoot th:last-of-type .bt-content,table.bt tfoot td:last-of-type:before,table.bt tfoot td:last-of-type .bt-content,table.bt tbody td:last-of-type:before,table.bt tbody td:last-of-type .bt-content{padding-bottom:10px;}
    @media only screen and (max-width:568px){#table-no-resize thead{display:none;}#table-no-resize tbody td{border:none!important;display:block;font-size:.8125rem;padding:0;vertical-align:top;/* IE 9 */    float:left\9;width:100%\9;}#table-no-resize tbody td:before{background:#56a2cf;content:attr(data-th) ":";color:white;display:inline-block;font-weight:bold;margin-right:10px;padding:2px 10px;width:6.5em;}#table-no-resize tbody td .bt-content{display:inline-block;padding:2px 5px;}#table-no-resize tbody td:first-of-type:before,#table-no-resize tbody td:first-of-type .bt-content{padding-top:10px;}#table-no-resize tbody td:last-of-type:before,#table-no-resize tbody td:last-of-type .bt-content{padding-bottom:10px;}}
    table.two-axis tr td:first-of-type{background:#cadde1;}
    @media only screen and (max-width:568px){table.two-axis tr td:first-of-type,table.two-axis tr:nth-of-type(2n+2) td:first-of-type,table.two-axis tr td:first-of-type:before{background:#3584b3;color:#ffffff;}table.two-axis tr td:first-of-type{border-bottom:1px solid #e4ebeb;}table.two-axis tr td:first-of-type:before{padding-bottom:10px;}}
    .bt-wrapper.active{margin-top:1.5em;}
    .bt-wrapper.active table{margin:0;}
    table{width:100%;}
    .table{margin:30px 0;border-collapse:collapse;border-spacing:0;empty-cells:show;border:1px solid #e0e0e0;}
    .table caption{color:#333;font-style:italic;font-size:85%;line-height:1;padding:1em 0;text-align:center;}
    .table td,.table th{border-left:1px solid #e0e0e0;border-width:0 0 0 1px;font-size:inherit;margin:0;overflow:visible;padding:0.5em 1em;font-weight:normal;}
    .table td:first-child,.table th:first-child{border-left-width:0;}
    .table thead,.table tfoot{background-color:#f05050;color:#fff;text-align:left;vertical-align:bottom;}
    .table thead td,.table tfoot td,.table thead th,.table tfoot th{border-color:#fff;}
    .table td{background-color:transparent;}
    .table_striped tr:nth-child(2n-1) td{background-color:#ececec;}
    .table_bordered td{border-bottom:1px solid #e0e0e0;}
    .table_bordered tbody > tr:last-child > td,.table_bordered thead > tr:last-child > td{border-bottom-width:0;}
    .table_horizontal td,.table_horizontal th{border-width:0 0 1px 0;border-bottom:1px solid #e0e0e0;}
    .table_horizontal tbody > tr:last-child > td,.table_horizontal thead > tr:last-child > td{border-bottom-width:0;}
    table.bt thead,table.bt tbody th{display:none;}
    table.bt tfoot th,table.bt tfoot td,table.bt tbody td{border:none;display:block;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;vertical-align:top;
      float:left\9;width:100%\9;}
    table.bt tfoot th::before,table.bt tfoot td::before,table.bt tbody td::before{content:attr(data-th) ":";display:inline-block;-webkit-flex-shrink:0;-ms-flex-shrink:0;flex-shrink:0;font-weight:bold;width:6.5em;}
    table.bt tfoot th.bt-hide,table.bt tfoot td.bt-hide,table.bt tbody td.bt-hide{display:none;}
    table.bt tfoot th .bt-content,table.bt tfoot td .bt-content,table.bt tbody td .bt-content{vertical-align:top;}
    .bt-wrapper.active{max-height:310px;overflow:auto;-webkit-overflow-scrolling:touch;}
    /*]]>*/
    </style>
    
  • Masih di Edit Html, sekarang kita cari kode </body>
  • Lalu masukan javascript berikut diatasnya.....
  • 
    <script type='text/javascript'>
    //<![CDATA[
    $(document).ready(function(){$("#table").basictable(),$("#table-two-axis").basictable()});
    !function(t){t.fn.basictable=function(a){var e=function(a,e){var i=[];e.tableWrap&&a.wrap('<div class="bt-wrapper"></div>');var s="";s=a.find("thead tr th").length?"thead th":a.find("tbody tr th").length?"tbody tr th":a.find("th").length?"tr:first th":"tr:first td",t.each(a.find(s),function(){var a=t(this),e=parseInt(a.attr("colspan"),10)||1,n=a.closest("tr").index();i[n]||(i[n]=[]);for(var s=0;e>s;s++)i[n].push(a)}),t.each(a.find("tbody tr"),function(){n(t(this),i,e)}),t.each(a.find("tfoot tr"),function(){n(t(this),i,e)})},n=function(a,e,n){a.children().each(function(){var a=t(this);if(""!==a.html()&&"&nbsp;"!==a.html()||n.showEmptyCells){for(var i=a.index(),s="",r=0;r<e.length;r++){0!=r&&(s+=": ");var o=e[r][i];s+=o.text()}a.attr("data-th",s),n.contentWrap&&!a.children().hasClass("bt-content")&&a.wrapInner('<span class="bt-content" />')}else a.addClass("bt-hide")})},i=function(a){t.each(a.find("td"),function(){var a=t(this),e=a.children(".bt-content").html();a.html(e)})},s=function(a,e){e.forceResponsive?t(window).width()<=e.breakpoint?r(a,e):o(a,e):a.removeClass("bt").outerWidth()>a.parent().width()?r(a,e):o(a,e)},r=function(t,a){t.addClass("bt"),a.tableWrap&&t.parent(".bt-wrapper").addClass("active")},o=function(t,a){t.removeClass("bt"),a.tableWrap&&t.parent(".bt-wrapper").removeClass("active")},c=function(t,a){t.find("td").removeAttr("data-th"),a.tableWrap&&t.unwrap(),a.contentWrap&&i(t),t.removeData("basictable")},b=function(t){t.data("basictable")&&s(t,t.data("basictable"))};this.each(function(){var n=t(this);if(0===n.length||n.data("basictable"))return n.data("basictable")&&("destroy"==a?c(n,n.data("basictable")):"start"===a?r(n,n.data("basictable")):"stop"===a?o(n,n.data("basictable")):s(n,n.data("basictable"))),!1;var i=t.extend({},t.fn.basictable.defaults,a),l={breakpoint:i.breakpoint,contentWrap:i.contentWrap,forceResponsive:i.forceResponsive,noResize:i.noResize,tableWrap:i.tableWrap,showEmptyCells:i.showEmptyCells};n.data("basictable",l),e(n,n.data("basictable")),l.noResize||(s(n,n.data("basictable")),t(window).bind("resize.basictable",function(){b(n)}))})},t.fn.basictable.defaults={breakpoint:568,contentWrap:!0,forceResponsive:!0,noResize:!1,tableWrap:!1,showEmptyCells:!1}}(jQuery);
    //]]>
    </script>
    
  • Sekarang Tinggal Save Template.
    Selanjutnya kita akan memasang html tabelnya di postingan blog...
  • Silahkan masuk ke postingan yang akan di kasih tabel...
  • Lalu masuk ke tab html, jangan compose lihat gambar dibawah ini...

  • Kalo sudah, kalian masukan HTML tabel dibawah ini kedalamnya...
  • 
    <table id="table-two-axis" class="two-axis bt">
        <thead>
          <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Gender</th>
            <th>Height</th>
            <th>Province</th>
            <th>Sport</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td data-th="Name"><span class="bt-content">Teja Sukmana</span></td>
            <td data-th="Age"><span class="bt-content">18</span></td>
            <td data-th="Gender"><span class="bt-content">Male</span></td>
            <td data-th="Height"><span class="bt-content">180</span></td>
            <td data-th="Province"><span class="bt-content">Garut Indonesia</span></td>
            <td data-th="Sport"><span class="bt-content">Coli Enak</span></td>
          </tr>
          <tr>
            <td data-th="Name"><span class="bt-content">John Stone</span></td>
            <td data-th="Age"><span class="bt-content">30</span></td>
            <td data-th="Gender"><span class="bt-content">Male</span></td>
            <td data-th="Height"><span class="bt-content">5'9</span></td>
            <td data-th="Province"><span class="bt-content">Ontario</span></td>
            <td data-th="Sport"><span class="bt-content">Badminton</span></td>
          </tr>
          <tr>
            <td data-th="Name"><span class="bt-content">Jane Strip</span></td>
            <td data-th="Age"><span class="bt-content">29</span></td>
            <td data-th="Gender"><span class="bt-content">Female</span></td>
            <td data-th="Height"><span class="bt-content">5'6</span></td>
            <td data-th="Province"><span class="bt-content">Manitoba</span></td>
            <td data-th="Sport"><span class="bt-content">Hockey</span></td>
          </tr>
          <tr>
            <td data-th="Name"><span class="bt-content">Gary Mountain</span></td>
            <td data-th="Age"><span class="bt-content">21</span></td>
            <td data-th="Gender"><span class="bt-content">Mail</span></td>
            <td data-th="Height"><span class="bt-content">5'8</span></td>
            <td data-th="Province"><span class="bt-content">Alberta</span></td>
            <td data-th="Sport"><span class="bt-content">Curling</span></td>
          </tr>
          <tr>
            <td data-th="Name"><span class="bt-content">James Camera</span></td>
            <td data-th="Age"><span class="bt-content">31</span></td>
            <td data-th="Gender"><span class="bt-content">Male</span></td>
            <td data-th="Height"><span class="bt-content">6'1</span></td>
            <td data-th="Province"><span class="bt-content">British Columbia</span></td>
            <td data-th="Sport"><span class="bt-content">Hiking</span></td>
          </tr>
        </tbody>
      </table>
    
    Yang perlu kalian ganti / sesuaikan adalah tulisan seperti...
    Name, Age, Gender, Height, Province, Sport.
    Dan
    Teja Sukmana, 18, Male, 180, Garut Indonesia, Coli Enak.

    Kalian bisa menambah / mengurangi tabel itu dengan cara...
    Menambahkan kotak Judul pada tabel... Cari Kode Seperti berikut.
    
    <thead>
          <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Gender</th>
            <th>Height</th>
            <th>Province</th>
            <th>Sport</th>
          </tr>
    </thead>
    

    Lalu tambahkan <th>Namanya</th> di bawah <tr> atau di atas </tr>

    Sekarang menambahkan keterangannya.. cari kode tabel seperti berikut..<tbody> atau </tbody>

    Lalu tambahkan kode berikut di bawah <tbody> atau di atas </tbody>. Sesuaikan saja dengan judul tadi...
    
          <tr>
            <td data-th="Name"><span class="bt-content">Teja Sukmana</span></td>
            <td data-th="Age"><span class="bt-content">18</span></td>
            <td data-th="Gender"><span class="bt-content">Male</span></td>
            <td data-th="Height"><span class="bt-content">180</span></td>
            <td data-th="Province"><span class="bt-content">Garut Indonesia</span></td>
            <td data-th="Sport"><span class="bt-content">Coli Enak</span></td>
          </tr>
    
  • Kalo sudah, tinggal di publikasikan dan selesai deh...

Cukup sekian dan terima kasih sudah membaca artikel dari blog mas tamvan tentang cara membuat tabel responsive di postingan blog ini semoga bermanfaat..
Apa bila ada yang tidak di mengerti silahkan bertanya di kolom komentar...

Membuat Menu Bar Drop Down Responsive Tanpa Edit HTML

Membuat Menu Bar Drop Down Responsive Tanpa Edit HTML
Menu_Bar_Drop_Down_Responsive_Tanpa_Edit_HTML

Tutorial Cara Membuat Menu Drop Down Responsive Tanpa edit HTML

Cara Mudah Membuat Responsive Menu Navigasi Drop Down Keren Tanpa Edit HTML, kali ini saya akan berbagi 4 menu navigation bar dropdown responsive / mobile friendly untuk di pasang pada blogger tanpa harus masuk ke Edit HTML....

Sebelumnya saya sudah sering posting tentang menu bar drop down yang lumayan bagus dan juga responsive...



... tapi tutorial itu kita harus menyimpan html, css dan javascript di tempat yang sudah di tentukan, barang kali cara itu cukup ribet dan membingungkan mending kita gabungkan semuanya..

Nah Bagi kalian yang tidak ingin ribet ketika membuat menu bar drop down / menu navigation bar yang simple dan responsive tanpa harus mengatur letak html, css, javascript di edit html....

Disini saya akan berikan solusinya yak ni menggabungkan semua menu tersebut terus dimasukan ke dalam widget blogger di tata letak.

Sekarang kita lanjut saja ke tutorial cara membuat menu bar drop down responsive tanpa harus edit html....

cara membuat menu dropdown di blog tanpa edit html


  • Terus Pilih Tataletak /atau layout, Tambahkan Gadget, HTML/Javascript #lihat gambar
tataletak-layout-add-a-widget
  • Nanti setelah meng pilih HTML/Javascript akan ada kotak kosong.
  • Silahkan kalian pilih salah satu menu dibawah ini terus masukan semuanya ke kotak tadi

4 Menu Navigation Bar Dropdown Responsive Keren Tanpa Edit HTML


  • #1 White Menu bar drop down Simple Responsive [ Demo Menu ]
  • menu-bar-drop-down-responsive

<nav class="nav" itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
  <input id="more" aria-hidden="true" tabindex="-1" class="toggle" type="checkbox">
  <div class="nav__inner">
    <div class="nav__logo"><a href="#" class="mas_tamvan" itemprop='url' title='menu'><span itemprop='name'>Local news</span></a></div>
    <ul class="nav__list">
      <li class="nav_luar"><a href="#" class="mas_tamvan" itemprop='url' title='menu'><span itemprop='name'>News</span></a></li>
      <li class="nav_luar"><a href="#" class="mas_tamvan" itemprop='url' title='menu'><span itemprop='name'>Sport</span></a></li>
      <li class="nav_luar"><a href="#" class="mas_tamvan" itemprop='url' title='menu'><span itemprop='name'>Weather</span></a></li>
      <li class="nav_luar"><a href="#" class="mas_tamvan" itemprop='url' title='menu'><span itemprop='name'>TV</span></a></li>
      <li class="nav_luar"><a href="#" class="mas_tamvan" itemprop='url' title='menu'><span itemprop='name'>Radio</span></a></li>
      <li class="nav_luar"><a href="#" class="mas_tamvan" itemprop='url' title='menu'><span itemprop='name'>Travel</span></a></li>
      <li class="nav_luar"><a href="#" class="mas_tamvan" itemprop='url' title='menu'><span itemprop='name'>Music</span></a></li>
      <li class="nav_luar"><a href="#" class="mas_tamvan" itemprop='url' title='menu'><span itemprop='name'>Food</span></a></li>
      <li class="nav_luar"><a href="#" class="mas_tamvan" itemprop='url' title='menu'><span itemprop='name'>Arts</span></a></li>
      <li class="nav_luar"><a href="#" class="mas_tamvan" itemprop='url' title='menu'><span itemprop='name'>Earth</span></a></li>
      <li class="nav_luar"><a href="#" class="mas_tamvan" itemprop='url' title='menu'><span itemprop='name'>Local</span></a></li>
    </ul>
    <div class="nav__toggle">
      <label for="more" aria-hidden="true" class="mas_tamvan" itemprop='url' title='menu'><span itemprop='name'>More</span></label>
    </div>
  </div>
</nav>
<link rel="stylesheet" type="text/css" href="https://rawgit.com/mastamvan/backup/4menunav/white.css"/>

  • #2 Blue Side Navigation Menu Responsive [ Demo Menu ]
  • manu bar responsive

<ul class="nav-mobile">
  <li>Open, Mobile Menu Sidebar!</li>
  <li class="menu-container">
    <input id="menu-toggle" type="checkbox">
    <label for="menu-toggle" class="menu-button">
      <svg class="icon-open" viewBox="0 0 24 24">
        <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
      </svg>
      <svg class="icon-close" viewBox="0 0 100 100">
        <path d="M83.288 88.13c-2.114 2.112-5.575 2.112-7.69 0L53.66 66.188c-2.113-2.112-5.572-2.112-7.686 0l-21.72 21.72c-2.114 2.113-5.572 2.113-7.687 0l-4.693-4.692c-2.114-2.114-2.114-5.573 0-7.688l21.72-21.72c2.112-2.115 2.112-5.574 0-7.687L11.87 24.4c-2.114-2.113-2.114-5.57 0-7.686l4.842-4.842c2.113-2.114 5.57-2.114 7.686 0l21.72 21.72c2.114 2.113 5.572 2.113 7.688 0l21.72-21.72c2.115-2.114 5.574-2.114 7.688 0l4.695 4.695c2.112 2.113 2.112 5.57-.002 7.686l-21.72 21.72c-2.112 2.114-2.112 5.573 0 7.686L88.13 75.6c2.112 2.11 2.112 5.572 0 7.687l-4.842 4.84z"
        />
      </svg>
    </label>
    <ul class="menu-sidebar">
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li><a href="#">Item</a></li>
      <li>
        <input type="checkbox" id="sub-one" class="submenu-toggle">
        <label class="submenu-label" for="sub-one">Category</label>
        <div class="arrow right">&#8250;</div>
        <ul class="menu-sub">
          <li class="menu-sub-title">
            <label class="submenu-label" for="sub-one">Back</label>
            <div class="arrow left">&#8249;</div>
          </li>
          <li><a href="#">Sub-item</a></li>
          <li><a href="#">Sub-item</a></li>
          <li><a href="#">Sub-item</a></li>
          <li><a href="#">Sub-item</a></li>
        </ul>
      </li>
      <li>
        <input type="checkbox" id="sub-two" class="submenu-toggle">
        <label class="submenu-label" for="sub-two">Category</label>
        <div class="arrow right">&#8250;</div>
        <ul class="menu-sub">
          <li class="menu-sub-title">
            <label class="submenu-label" for="sub-two">Back</label>
            <div class="arrow left">&#8249;</div>
          </li>
          <li><a href="#">Sub-item</a></li>
          <li><a href="#">Sub-item</a></li>
          <li><a href="#">Sub-item</a></li>
          <li><a href="#">Sub-item</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
<link rel="stylesheet" type="text/css" href="https://rawgit.com/mastamvan/backup/4menunav/blue.css"/>

  • #3 Flat Multi Drop Down Responsive [ Demo Menu ]
  • Membuat Menu Bar Drop Down Responsive Tanpa Edit HTML

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js' type="text/javascript"></script>
<div id='cssmenu' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
<ul>
   <li><a href='URL_KALIAN' itemprop='url' title='menu'><span itemprop='name'>Home</span></a></li>
   <li class='active'><a href='URL_KALIAN' itemprop='url' title='menu'><span itemprop='name'>Products</span></a>
      <ul>
         <li><a href='URL_KALIAN' itemprop='url' title='menu'><span itemprop='name'>Product 1</span></a>
            <ul>
               <li><a href='URL_KALIAN' itemprop='url' title='menu'><span itemprop='name'>Sub Product</span></a></li>
               <li><a href='URL_KALIAN' itemprop='url' title='menu'><span itemprop='name'>Sub Product</span></a></li>
            </ul>
         </li>
         <li><a href='URL_KALIAN' itemprop='url' title='menu'><span itemprop='name'>Product 2</span></a>
            <ul>
               <li><a href='URL_KALIAN' itemprop='url' title='menu'><span itemprop='name'>Sub Product</span></a></li>
               <li><a href='URL_KALIAN' itemprop='url' title='menu'><span itemprop='name'>Sub Product</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='URL_KALIAN' itemprop='url' title='menu'><span itemprop='name'>About</span></a></li>
   <li><a href='URL_KALIAN' itemprop='url' title='menu'><span itemprop='name'>Contact</span></a></li>
</ul>
</div>
<script src='https://rawgit.com/mastamvan/backup/4menunav/black.js' type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="https://rawgit.com/mastamvan/backup/4menunav/black.css"/>

Kalo tanda + [Plus]nya tidak tampil, silahkan tambahkan kode berikut ....

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js' type="text/javascript"></script>

  • #4 Black Slide Drop Down Responsive [ Demo Menu ]
  • Membuat Menu Bar Drop Down Responsive Tanpa Edit HTML

<nav class="top-nav" itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
  <ul class="nav group">
    <li><a href="/" class="brand"itemprop='url' title='menu'><span itemprop='name'>Home</span></a></li>
    <li><a class="drop-menu-toggle" href='URL_KALIAN' itemprop='url' title='menu'><span itemprop='name'>Link 1</span><span class="car-arr">&#9662;</span></a>
      <ul class="subnav group">
        <li><a href='URL_KALIAN' itemprop='url' title='menu'><span itemprop='name'>Sub-link 1</span></a></li>
        <li><a href='URL_KALIAN' itemprop='url' title='menu'><span itemprop='name'>Long Sub-link</span></a></li>
        <li><a href='URL_KALIAN' itemprop='url' title='menu'><span itemprop='name'>Sub-link 3</span></a></li>
        <li><a href='URL_KALIAN' itemprop='url' title='menu'><span itemprop='name'>Sub-link 4</span></a></li>
      </ul>
    </li>
    <li><a href='URL_KALIAN' itemprop='url' title='menu'><span itemprop='name'>Link 2</span></a></li>
    <li><a href='URL_KALIAN' itemprop='url' title='menu'><span itemprop='name'>Link 3</span></a></li>
    <li><a href='URL_KALIAN' itemprop='url' title='menu'><span itemprop='name'>Link 4</span></a></li>
    <li><a class="drop-menu-toggle" href='URL_KALIAN' itemprop='url' title='menu'><span itemprop='name'>Link 5</span><span class="car-arr">&#9662;</span></a>
      <ul class="subnav group">
        <li><a href='URL_KALIAN' itemprop='url' title='menu'><span itemprop='name'>Sub-link 1</span></a></li>
        <li><a href='URL_KALIAN' itemprop='url' title='menu'><span itemprop='name'>Long Sub-link</span></a></li>
        <li><a href='URL_KALIAN' itemprop='url' title='menu'><span itemprop='name'>Sub-link 3</span></a></li>
        <li><a href='URL_KALIAN' itemprop='url' title='menu'><span itemprop='name'>Sub-link 4</span></a></li>
      </ul>
    </li>
  </ul>
</nav>
<nav class="top-nav-sticky group" style="-webkit-transform: none !important;">
  <a href="" id="side-menu-button" class="small-menu-button"></a>
  <a href="https://mastamvan.blogspot.com" class="brand">Slide Menu</a>
</nav>
<script src='https://rawgit.com/mastamvan/backup/4menunav/blackslide.js' type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="https://rawgit.com/mastamvan/backup/4menunav/blackslide.css"/>

Kalo menu drop downnya tidak tampil, silahkan tambahkan kode berikut ....

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js' type="text/javascript"></script>

Bagaimana cara mengganti atau merubah link dan nama judul di menu bar drop down

?
  • Untuk menambahkan link silahkan ganti tulisan href="#", href='URL_KALIAN' tanda pagar dan URL_KALIAN dengan url kalian
  • Untuk mengganti Nama Menu silahkan ganti tulisan seperti Sub-link, sub produk, item, news dll dengan judul menu yang kalian mau
  • Mungkin itu saja, tinggal save dan apabila ada yang kurang silahkan bertanya di kolom komentar

Cukup sekian dan terimakasih artikel dari blog mas tamvan tentang Cara membuat menu bar dropdown responsive yang simple dan keren tanpa edit html ini semoga bermanfaat...

cara membuat menu dropdown pada blog

cara membuat menu dropdown di blog tanpa edit html

cara membuat menu dropdown keren di blog

cara membuat menu blog keren

cara membuat menu bar di blog tanpa edit html

cara membuat menu bar di blog untuk pemula

cara membuat sub menu di blog tanpa edit html

,

cara membuat menu bar keren di blog

Membuat Recent Post By Label Di Laman Blogger

Membuat Recent Post By Label Di Laman Blogger
Membuat Recent Post By Label Di Laman Blogger

Membuat Recent Post By Label Pada Blog Untuk Mengganti Halaman Kategori Di Menu

Tutorial Cara menggantikan Halaman Kategori Di Menu Dengan Recent Post By Label Biasanya di menu kita menggunakan url dari label, tapi sekarang kita akan menggantinya menjadi url Laman / halaman statistis blog..

Kata mbah KompiAjaib.com halaman kategori / label yang di tautkan ke menu blog sebaiknya di hindari untuk blog yang akan didaftarkan ke mbah Google Adsense.. Ntah apa penyebabnya, saya juga tidak mengerti sehingga harus di hindari..

Tapi menurut saya Recent Post By Label untuk di tampilkan pada laman ini sangat bagus dan simple, pengunjung tidak usah ribet ribet untuk meload atau klik next page agar dapat melihat semua isi dari label tersebut..

Karena dengan script ini kita cukup meng klik Tampilkan Artikel Selanjutnya dan secara otomatis artikel selanjutnya akan ditampilkan di halamanitu tanpa mereload ulang..

Biasanya url yang di masukan ke menu seperti berikut..
https://www.DOMAIN.blogspot.com/search/label/LABEL

Sekarang kita akan merubhanya jadi seperti berkut...
https://www.DOMAIN.blogspot.com/p/example-blogger.html

Nah bagi kalian yang ingin mencoba memasang Recent Post By Label ini, silahkan ikuti tutorial singkat berikut ini...

Cara Membuat Recent Post By Label Di Laman Blogger


  • Buat laman baru, Jangan Lupa kasih judul terlebih dahulu agar urlnya sesuai dengan isi label kalian..
  • Membuat Recent Post By Label Di Laman Blogger
  • Setelah itu masuk ke mode HTML untuk memasukan codenya
  • Membuat Recent Post By Label Di Laman Blogger
  • Copy dan masukan kode dibawah ini kedalamnya
  • 
    <div id="result-desc">
    </div>
    <ul id="feed-container"></ul>
    <div id="feed-nav">
    </div>
    <script type="text/javaScript">
      var label="Tutorial";
    </script>
    
    Jangan Lupa Ganti Kata Tutorial dengan nama label kalian yang ingin di tmpilkan...
  • Kalo Sudah Tinggal Publikasikan dan Copy URLnya

Selanjutnya kita akan memasang CSS dan Javascript di template blog, agar kode tadi dapat menampilkan isi dari label blog kita
  • Masuk ke Template, Edit HTML, Cari Kode </head>
  • Lalu masukan CSS dibawah ini tepat di atasnya...

 <b:if cond='data:blog.url == &quot;URL HALAMAN LAMAN / STATIS DI SINI&quot;'>
<style type='text/css'>
#table-outer{padding:7px 10px;margin:0 auto}
#table-outer table{width:auto;margin:0 auto}
#table-outer form{font:inherit}
#table-outer label{display:block;text-align:right;margin:0 10px 0 0;padding:4px 0 0}
#table-outer select[disabled]{opacity:.4}
#post-searcher{display:block;margin:0;padding:0}
#table-outer input,#table-outer select{width:100%;border:1px solid #dedede;border-radius:5px;margin:0;padding:5px;font-family: Roboto,sans-serif!important;font-size:16px!important;font-weight:500!important;text-transform:capitalize!important;outline:0;color:#333!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#table-outer select option{min-height:1.4em!important;}
#table-outer input#feed-q{padding:5px 10px!important;}
#feed-container{background:#fff;display:block;clear:both;margin:0;padding:0;list-style:none;overflow:hidden;position:relative;border-top:none}
#feed-container li{list-style:none;margin:0;padding:0;border-top:1px solid #eee;color:#555;width:auto;float:left;display:inline}
#feed-container li .inner{margin:15px 0;height:auto;overflow:hidden;word-wrap:break-word;text-overflow:ellipsis}
#feed-container li a{text-decoration:none;color:#2C2C2C;font-weight:500}
#feed-container li a:hover{text-decoration:none;color:#E94141}
#feed-container li .news-text{margin-top:5px;line-height:1.3em!important}
#feed-container li img{margin:0 15px 5px 0;padding:7px 7px 7px 0;float:left;display:block;}
#result-desc{margin:0;padding:0;}
#result-desc div,#result-desc span{display:block;margin:0;padding:5px 0 7px;color:#D64D52}
#result-desc div{color:inherit}
#feed-nav{margin:10px 0 30px;text-align:center;font-weight:500}
#feed-nav a,#feed-nav span{border:1px solid #dedede;border-radius:5px;padding:0;color:#757575;text-decoration:none;display:block;height:30px;line-height:32px}
#feed-nav a,#feed-nav span:hover{color:#1B1B1B}
#feed-nav a:active,#feed-nav a:hover{color:#555}
#feed-nav span{cursor:wait}
@media (max-width:600px){#table-outer table{margin:0 auto;width:100%}
#feed-container,#table-outer{margin:0 auto}
#feed-container li .inner{margin:5px auto;height:auto}
#feedContainer li{float:none;display:block;width:auto;height:auto}
#feed-container li .news-text, #feedContainer:after,#feed-container li img{display:none!important}
}
.post-body{min-height:300px;background:url(https://lh6.googleusercontent.com/-UKClHRpzskg/VfOm1eLfT7I/AAAAAAAAiQw/1pwwhEsT49I/w220-h19-no/ajax-loader%2B%25281%2529.gif)50% 50% no-repeat!important;}
</style>
</b:if>
Silahkan ganti tulisan berikut dengan url halaman Laman / halaman statistis tadi

<b:if cond='data:blog.url == &quot;URL HALAMAN LAMAN / STATIS DI SINI&quot;'>

Example...

<b:if cond='data:blog.url == &quot;https://mastamvan.blogspot.com/p/tutorial-blogger.html&quot;'>

Kalau blog kalian masih menggunakan domain blogspot silahkan gunakan akhiran .com jangan .co.id.

Jika Kalian memasang lebih dari 1 (satu) halaman untuk label yang berbeda, silahkan ganti conditional tag dibawah ini.

<b:if cond='data:blog.url == &quot;URL HALAMAN LAMAN / STATIS DI SINI&quot;'>

Dengan Conditional tag Berikut....

<b:if cond='data:blog.url in {&quot;URL HALAMAN LAMAN / STATIS DI SINI&quot; , &quot;URL HALAMAN LAMAN / STATIS DI SINI&quot; , &quot;URL HALAMAN LAMAN / STATIS DI SINI&quot;}'>

Example

<b:if cond='data:blog.url in {&quot;https://mastamvan.blogspot.com/p/tutorial-template.html&quot; , &quot;https://mastamvan.blogspot.com/p/tutorial-css.html&quot; , &quot;https://mastamvan.blogspot.com/p/tutorial-javascript.html&quot;}'>

Langkah selanjutnya kita akan memasang kode javascript....
  • Silahkan Masukan Kode Javascript dibawah ini tepat di atas kode </body>

 <b:if cond='data:blog.url == &quot;URL HALAMAN LAMAN / STATIS DI SINI&quot;'>
<script type='text/javascript'>
//<![CDATA[
//Script Recent Pos By Label
document.write;var loadToc,loadCategories,_toc={init:function(){var e={homePage:"https://"+window.location.hostname,maxResults:10,numChars:270,thumbWidth:140,thumbHeight:95,navText:"Tampilkan artikel selanjutnya &#9660;",resetToc:"Kembali ke Awal",noImage:"https://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg",loading:"<span>Memuat...</span>"},t=(window,document),n=function(e){return t.getElementById(e)},a={e:n("result-desc"),f:n("feed-container"),g:n("feed-nav"),h:t.getElementsByTagName("head")[0],i:0,j:null,k:"published",l:0,m:""},l={a:function(){old=n("temporer-script"),old.parentNode.removeChild(old)},b:function(e){var i=t.createElement("script");i.type="text/javascript",i.id="temporer-script",i.src=e,n("temporer-script")&&l.a(),a.h.appendChild(i)},c:function(t,n,i){a.i++,a.e.innerHTML=e.counting,a.g.innerHTML=e[1==t?"searching":"loading"],0===t?l.b(null!==n?e.homePage+"/feeds/posts/summary/-/"+n+"?alt=json-in-script&start-index="+(a.i*e.maxResults+1)+"&max-results="+e.maxResults+"&orderby="+i+"&callback=loadToc":e.homePage+"/feeds/posts/default/-/"+label+"?alt=json-in-script&start-index="+(a.i*e.maxResults+1)+"&max-results="+e.maxResults+"&orderby="+i+"&callback=loadToc"):1==t&&l.b(e.homePage+"/feeds/posts/default/-/"+label+"?alt=json-in-script&start-index="+(a.i*e.maxResults+1)+"&max-results="+e.maxResults+"&q="+n+"&orderby="+i+"&callback=loadToc"),a.j=null!==n?n:null,a.l=t,a.a.disabled=!0,a.b.children[0].disabled=!0},d:function(n){var i;if(a.g.innerHTML="",a.e.innerHTML="<div>Total: "+n.feed.openSearch$totalResults.$t+" Posts</div>","entry"in n.feed){for(var r,s,o,d,c=n.feed.entry,u="0 Komentar",m=0;m<e.maxResults&&m!=c.length;m++){r=c[m].title.$t,o="summary"in c[m]?c[m].summary.$t.replace(/<br ?\/?>/gi," ").replace(/<(.*?)>/g,"").replace(/<iframe/gi,"").substring(0,e.numChars):"",d="media$thumbnail"in c[m]?c[m].media$thumbnail.url.replace(/\/s[0-9]+\-c/,"/s"+e.thumbWidth):e.noImage.replace(/\/s[0-9]+\-c/,"/s"+e.thumbWidth);for(var h=0,b=c[m].link.length;b>h;h++)s="alternate"==c[m].link[h].rel?c[m].link[h].href:"#";for(var p=0,g=c[m].link.length;g>p;p++)if("replies"==c[m].link[p].rel&&"text/html"==c[m].link[p].type){u=c[m].link[p].title;break}i=t.createElement("li"),i.innerHTML='<div class="inner"><img style="width:'+e.thumbWidth+"px;height:"+e.thumbHeight+'px;" src="'+d+'" alt="'+r+'"><a class="toc-title" href="'+s+'" target="_blank" title="'+r+'">'+r+'</a><div class="news-text">'+o+'&hellip;<br style="clear:both;"></div></div>',a.f.appendChild(i)}i=t.createElement("a"),i.href="#load-more",i.innerHTML=e.navText,i.onclick=function(){return l.c(a.l,a.j,a.k),!1}}else i=t.createElement("a"),i.href="#reset-content",i.innerHTML=e.resetToc,i.onclick=function(){return a.i=-1,a.e.innerHTML=e.counting,a.f.innerHTML="",l.c(0,null,"published"),a.a.innerHTML=a.a.innerHTML,a.b.children[0].innerHTML=a.b.children[0].innerHTML,!1};a.g.appendChild(i),a.a.disabled=!1,a.b.children[0].disabled=!1}};loadToc=l.d,loadCategories=l.e,l.b(e.homePage+"/feeds/posts/default/-/"+label+"?alt=json-in-script&start-index="+(a.i+1)+"&max-results="+e.maxResults+"&orderby=published&callback=loadToc"),l.b(e.homePage+"/feeds/posts/default/-/"+label+"?alt=json-in-script&max-results=0&orderby=published&callback=loadCategories"),a.a.onchange=function(){a.i=-1,a.f.innerHTML="",a.g.innerHTML=e.counting,a.b.children[0].innerHTML=a.b.children[0].innerHTML,l.c(0,null,this.value),a.k=this.value},a.c.onsubmit=function(){return a.i=-1,a.f.innerHTML="",a.m=a.d.value,l.c(1,a.d.value,a.k),!1}}};_toc.init();
//]]>
</script>
</b:if>
Bagian conditional tag-nya kalian samakan dengan conditional tag seperti pada bagian css tadi. Tinggal copy dan paste..
  • Selesay n Done semuanya sudah terpasang tinggal di save dan di lihat hasilnya..
  • Apabila ada yang bingung dalam tutorial ini, silahkan bertanya di kolom komentar ya :)
Terimakasih buat Kompi Ajaib Atas template dan Tutorial artikel ini http://www.kompiajaib.com/2016/04/recent-post-by-label-untuk-mengganti.html

Cukup sekian dan terima kasih, semoga artikel dari blog mas tamvan tentang Cara Membuat Recent Post By Label Di Laman Blogger Untuk Menu ini bermanfaat ya :)
Jangan lupa komentarnya apabila ada yang tidak di mengerti..