Cara Memberikan Border di tampilan Popular Post




Cara memasang di Blog :
1. Pastikan Sobat Telah Login di Blogger Sobat dan Pastikan telah memasang Widget Popular Post bawaan Blogger.
2. Klik Tap Template di Bawah Tata Telatak
3. Klik Edit HTML
4. Cari Kode ]]></b:skin>
5. Atau Tekan Tombol CTRL + F Tulis Kode Ini :  ]]></b:skin>
6. Setelah Ketemu Copy Letakkan Script di bawah ini di Atas Kode ]]></b:skin>
.popular-posts ul{padding-left:0px}
.popular-posts ul li{background:#FFF url(http://www.seocips.com/) no-repeat scroll 5px 10px; list-style-type:none; margin:0 0 5px 0px; padding:5px 5px 5px 20px !important; border:1px solid #ddd; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px}
.popular-posts ul li:hover{border:1px solid #6BB5FF}
.popular-posts ul li a:hover{text-decoration:none}
7. Simpan Template dan Lihat hasilnya.

Sumur: seocips

Cara Membuat Widget Label Blog Menjadi Warna Warni

Momodifikasi Widget Label Menjadi Warna Warni

Langkah Pertama :  Memasang Widget Label di Blog

  • Masuk ke akun blogger kalian
  • Pilih menu Tata Letak kemudian klik Tambahkan Gadget
    Momodifikasi Widget Label Menjadi Warna Warni
  • Pilih widget Label dengan mengklik tombol plus (+)
  • Selanjutnya, pada pengaturan bagian Tampilkan pilih Cloud dan sisanya silahkan anda ubah sesuai selera.
  • Terakhir, klik Simpan

Langkah Kedua : Memasang Kode CSS di Blog

  • Pilih menu Template lalu klik Edit HTML
  • Cari kode ]]></b:skin> ( gunakan Ctrl+F untuk memudahkan )
  • Copy kode berikut lalu pastekan tepat diatas kode ]]></b:skin> 
#Label1 .cloud-label-widget-content {text-align:center;font-weight: bold;padding: 5px 0}
#Label1 .cloud-label-widget-content span {display: inline-table; line-height: 1.2;}
#Label1 .cloud-label-widget-content span a {padding:4px 5px;color:#fff}
#Label1 .label-size {margin:4px 0;}
#Label1 .label-size span {background:#007abe;padding:4px 5px;color:#fff}
#Label1 .label-size-1 a {background:#abc123;font-size:15px;}
#Label1 .label-size-2 a {background:#5cc9cd;font-size:15px;}
#Label1 .label-size-3 a {background:#e24f4f;font-size:15px;}
#Label1 .label-size-4 a {background:#f568dc;font-size:15px;}
#Label1 .label-size-5 a {background:#38a3ee;font-size:15px;}
#Label1 .cloud-label-widget-content span a:hover {background:#007abe;} 
    Keterangan :
    - Kode yang berwarna biru bisa akan muncul sebagai warna pada setiap label, bisa kalian ubah sesuai selera masing-masing
    - Kode yang berwarna jingga orange akan muncul sebagai warna saat cursor diarahkan pada label, bisa kalian ubah sesuai selera masing-masing
     - Untuk kode warna, kalian bisa melihat di Generator Kode Warna HTML 

    •  Terakhir,  klik Simpan Template

    Cara Membuat Efek Resize Untuk Posting Blog

    Efek Resize berguna untuk memudahkan pengunjung dalam merubah ukuran tulisan dalam artikel, terkadang banyak sekali pengunjung yang sulit membaca tulisan karena ukuran yang sangat kecil, ataupun ukuran yang sangat besar membuat pengunjung menjadi pusing membacanya. 

    Efek Resize Untuk Artikel Blog


    Langkah Pertama Anda Letakkan kode dibawah ini tepat di atas kode ]]></b:skin> .

     
    button {
        padding: 3px 15px;
        float: right;
        cursor:pointer;
        margin:0 5px;
        }
    .text-resizer { }

    Langkah Kedua Letakkan kode di bawah ini tepat di atas kode </head>.

     <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
     <script type="text/javascript">
      $('').ready(function() {
      $('#incfont').click(function(){   
            curSize= parseInt($('.post-body').css('font-size')) + 2;
      if(curSize=22)
            $('.post-body').css('font-size', curSize);
            }); 
      $('#decfont').click(function(){   
            curSize= parseInt($('.post-body').css('font-size')) - 2;
      if(curSize>=14)
            $('.post-body').css('font-size', curSize);
            });
     });
    </script>

    Harap di perhatikan: Jika kode berwarna merah di atas sudah ada dalam blog anda, maka anda tidak perlu mengambil kode tersebut, untuk kode berwarna biru, anda bisa merubah ukuran font sesuai keinginan anda. dan untuk kode yang berwarna hijau, anda bisa sesuaikan di bagian mana yang anda inginkan untuk me-resize ukuran font, sebagai contoh: jika anda hanya ingin me-resize ukuran pada bagian sidebar, maka ganti tulisan .post-body menjadi main atau.sidebar atau bisa juga #post-body tergantung anda ingin memperbesar ukuran font yang mana.

    Langkah Ketiga Letakkan kode di bawah ini dimana saja yang anda inginkan tombol resize muncul, kalau pada blog saya, saya menempatkannya tepat di samping label di bawah judul artikel.

     <button class="text-resizer" id="incfont"><b>A+</b></button>
      <button class="text-resizer" id="decfont"><b>A-</b></button>

    Atau anda bisa menempatkannya di dalam widget html/javascript. kemudian save. dan lihat hasilnya, semoga bermanfaat.


    Sumur: masterr-seo

    Cara Membuat Artikel Random di Blog

    1. Login Ke Blogger.
    2. Klik Template, Backup template untuk jaga2 bila diperlukan, atau langkah berikut bisa di uji coba menggunakan Blog percobaan yang lain.
    3. Klik Edit HTML, klik kiri 1x pada kotak HTML, klik Ctrl+F untuk memudahkan pencarian kode.
    4. Masukan kode CSS berikut sebelum / diatas ]]></b:skin> atau </style> di bagian head.

    CSS Random Posts


    123456789101112131415161718192021222324252627282930313233343536.random-posts-tag {
        background: #7793FF; 
        width: 100%; 
        height: auto; 
        padding: 5px 0 5px 5px; 
        font: 17px Arial; 
        font-weight: bold; 
        color: #fff; 
        text-transform: uppercase; 
        }
    .random-posts {
        border: none; 
        margin-left: 0px; 
        margin-bottom: 10px; 
        width: auto; 
        }
    .random-posts ul {
        list-style: square; 
        margin: 0 0 10px 0; 
        padding: 10px 0px 10px 15px; 
        }
    .random-posts li { 
        margin: 0; 
        border-bottom: 1px dotted #DBDBDB; 
        padding: 7px 0 7px 0; 
        line-height: 1.4em; 
        }
    .random-posts a { 
        text-decoration: none; 
        font: 14px "arial narrow",arial; 
        text-align: left; 
        color: #1111AF; 
        }
    .random-posts a:hover { 
        color: #00A3FF; 
        }

    Warna Biru adalah posisi link artikel dari kiri, bisa disetting supaya sesuai dengan keinginan supaya terlihat lebih rapih.
    Merah adalah jenis huruf.
    Hijau adalah warna link ketika dihover.
    Gaya CSS lainnya bisa disesuaikan.

    5. Masukan kode javascript berikut sebelum / diatas </head> dibagian head.

    JavaScript Random Post


    1234567891011<script type="text/javascript">//<![CDATA[
    var randarray = new Array();var l=0;var flag;
    var numofpost=7;function randomposts(json){
    var total = parseInt(json.feed.openSearch$totalResults.$t,10);
    for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
    if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
    for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
    for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
    document.write(item);}}
    }document.write('</ul>');}
    //]]></script>

    Pink adalah jumlah dari artikel yang ingin ditampilkan.

    6. Masukan kode berikut disuatu tempat di HTML di bagian sidebar, biasanya setelah <div class='sidebar-wrapper'> atau <div id='sidebar'> atau <div class='sidebar'> atau sejenis, karena setiap Blog, mempunyai nama yang berbeda-beda.

    ATAU Jika bingung dan template masih original, masukan saja kode berikut di Add Gadget (Blogger: Dashboard - Layout - Add Gadget - Select HTML/JavaScript - masukan di content box (Catatan: Title Box dikosongkan saja) - Save).

    HTML Random Post


    1234<div class='random-posts-tag' >Random Posts</div>
    <div class='random-posts' >
    <script src="/feeds/posts/default?alt=json-in-script&amp;start-index=1&amp;max-results=9999&amp;callback=randomposts" type="text/javascript"></script>
    </div>

    Warna Biru bisa dirubah sesuai keinginan. Save Template dan lihat hasilnya, semoga bermanfaat.

    Sumur: http://www.aura-ilmu...com/2013/09/Cara-Membuat-Artikel-Random-di-Blog.html

    CARA MEMBUAT WIDGET POPULAR POST WARNA WARNI


    Cara Membuat Widget Popular Post Warna-Warni


    Cara Membuat Widget Popular Post Warna-Warni :
    1. Buka blog anda
    2. Pilih Template => Edit HTML
    3. Cari kode ]]></b:skin> dan letakkan kode CSS berikut ini diatasnya

    .PopularPosts ul,
    .PopularPosts li,
    .PopularPosts li img,
    .PopularPosts li a,
    .PopularPosts li a img {
      margin:0 0;
      padding:0 0;
      list-style:none;
      border:none;
      background:none;
      outline:none;
    }

    .PopularPosts ul {
      margin:.5em 0;
      list-style:none;
      font:normal normal 13px/1.4 "Arial Narrow",Arial,Sans-Serif;
      color:black;
      counter-reset:num;
    }

    .PopularPosts ul li img {
      display:block;
      margin:0 .5em 0 0;
      width:50px;
      height:50px;
      float:left;
    }

    .PopularPosts ul li {
      background-color:#eee;
      margin:0 10% .4em 0;
      padding:.5em 1.5em .5em .5em;
      counter-increment:num;
      position:relative;
    }

    .PopularPosts ul li:before,
    .PopularPosts ul li .item-title a {
      font-weight:bold;
      font-size:120%;
      color:inherit;
      text-decoration:none;
    }

    .PopularPosts ul li:before {
      content:counter(num);
      display:block;
      position:absolute;
      background-color:black;
      color:white;
      width:30px;
      height:30px;
      line-height:30px;
      text-align:center;
      top:50%;
      right:-10px;
      margin-top:-15px;
      -webkit-border-radius:30px;
      -moz-border-radius:30px;
      border-radius:30px;
    }

    .PopularPosts ul li:nth-child(1) {background-color:#129700;margin-right:1%}
    .PopularPosts ul li:nth-child(2) {background-color:#0000FF;margin-right:2%}
    .PopularPosts ul li:nth-child(3) {background-color:#FFA200;margin-right:3%}
    .PopularPosts ul li:nth-child(4) {background-color:#B300FF;margin-right:4%}
    .PopularPosts ul li:nth-child(5) {background-color:#FF00F2;margin-right:5%}
    .PopularPosts ul li:nth-child(6) {background-color:#B70000;margin-right:6%}
    .PopularPosts ul li:nth-child(7) {background-color:#00B795;margin-right:7%}

    4. Selesai, simpan

    Keterangan :
    Silahkan anda rubah warna pink sesuai keinginan anda

    Sumur: bloggerbondowoso24

    Cara Merubah Widget Arsip Blogger menjadi Kalender

    Merubah Arsip Blogger menjadi Kalender
    Bosan dengan tampilan Arsip dari blogger yang hanya berbentuk list. Kali ini saya akan membagikan Kode JS untuk merubah tampilan Arsip blogger menjadi kalender serta cara penggunaannya. Kode JS ini dibuat oleh phydeaux3 beberapa tahun lalu.
    Dari kode ini saya buat beberapa tema yang mungkin anda sukai. Untuk pemasangannya tidaklah terlalu sulit. Nah langsung saja.

    Cara Pemasangan di Blogspot

    1. Ke Blogger lalu pilih Tata Letak/Layout
    2. Pilih Blog Archive/Arsip Blog. Bagi yang sudah ada widget ini silahkan ke tahap selanjutnya.

      Menambahkan Widget Blog Archive/Arsip Blog
    3. Ikuti opsi yang ada pada gambar berikut. Pada bagian style pilih Flat List. Jangan Cek "Show Oldest Posts First", Pilih "Archive Frequency" berdasarkan bulan "Monthly" pada Date Format settingnya terserah anda.

      Opsi pengaturan pada widget Blog Archive/Arsip Blog
    4. klik Save / Simpan
    5. Selanjutnya ke Blogger > Settings > TemplateBackup terlebih dahulu Template Anda lalun klik Edit HTML > Proceed
    6. Cari kode berikut.(Perhatikan idnya biasanya berbeda "BlogArchive1", bisa saja "BlogArchive2","BlogArchive3" dan lain-lain)
      <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
    7. Ganti kode yang diatas pada (tahap 6) dengan kode berikut:
      <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'> 
      <b:includable id='main'> 
        <b:if cond='data:title'> 
          <h2><data:title/></h2> 
        </b:if> 
        <div class='widget-content'> 
        <div id='ArchiveList'> 
        <div expr:id='data:widget.instanceId + "_ArchiveList"'> 
          <b:if cond='data:style == "HIERARCHY"'> 
           <b:include data='data' name='interval'/> 
          </b:if> 
          <b:if cond='data:style == "FLAT"'> 
            <b:include data='data' name='flat'/> 
          </b:if> 
          <b:if cond='data:style == "MENU"'> 
            <b:include data='data' name='menu'/> 
          </b:if> 
        </div> 
        </div> 
        <b:include name='quickedit'/> 
        </div> 
      </b:includable> 
      <b:includable id='toggle' var='interval'> 
        <!-- Toggle not needed for Calendar --> 
      </b:includable> 
      <b:includable id='flat' var='data'> 
      <div id='bloggerCalendarList'> 
        <ul> 
          <b:loop values='data:data' var='i'> 
            <li class='archivedate'> 
              <a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>) 
            </li> 
          </b:loop> 
        </ul> 
      </div> 
      <div id='blogger_calendar' style='display:none'> 
      <table id='bcalendar'><caption id='bcaption'> 
      </caption> 
      <!-- Table Header --> 
      <thead id='bcHead'></thead> 
      <!-- Table Footer --> 
      <!-- Table Body --> 
      <tbody><tr><td id='cell1'> </td><td id='cell2'> </td><td id='cell3'> </td><td id='cell4'> </td><td id='cell5'> </td><td id='cell6'> </td><td id='cell7'> </td></tr> 
      <tr><td id='cell8'> </td><td id='cell9'> </td><td id='cell10'> </td><td id='cell11'> </td><td id='cell12'> </td><td id='cell13'> </td><td id='cell14'> </td></tr> 
      <tr><td id='cell15'> </td><td id='cell16'> </td><td id='cell17'> </td><td id='cell18'> </td><td id='cell19'> </td><td id='cell20'> </td><td id='cell21'> </td></tr> 
      <tr><td id='cell22'> </td><td id='cell23'> </td><td id='cell24'> </td><td id='cell25'> </td><td id='cell26'> </td><td id='cell27'> </td><td id='cell28'> </td></tr> 
      <tr><td id='cell29'> </td><td id='cell30'> </td><td id='cell31'> </td><td id='cell32'> </td><td id='cell33'> </td><td id='cell34'> </td><td id='cell35'> </td></tr> 
      <tr id='lastRow'><td id='cell36'> </td><td id='cell37'> </td></tr> 
      </tbody> 
      </table> 
      <table id='bcNavigation'><tr> 
      <td id='bcFootPrev'></td> 
      <td id='bcFootAll'></td> 
      <td id='bcFootNext'></td> 
      </tr></table>   
      <div id='calLoadingStatus' style='display:none; text-align:center;'> 
      <script type='text/javascript'>bcLoadStatus();</script> 
      </div> 
      <div id='calendarDisplay'/> 
      </div> 
      <script  type='text/javascript'> initCal();</script> 
      </b:includable> 
      <b:includable id='posts' var='posts'> 
      <!-- posts not needed for Calendar --> 
      </b:includable> 
      <b:includable id='menu' var='data'> 
        Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format 
      </b:includable> 
      <b:includable id='interval' var='intervalData'> 
        Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format 
      </b:includable> 
      </b:widget>
    8. Sekarang cari kode berikut </head> lalu letakkan kode berikut sebelumnya
      <script type='text/javascript'> 
      //<![CDATA[ 
      var bcLoadingImage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha9nIJPOZZJ5Cn0fxvcd76eMbTp8LcSeRG9FeL14dqA3uEmCk92rIUxoNp8jwY6OQP4GsyyliwiS5w6lhHOSUzeqrmWVoOzx-o9YvqalFBtsBqOWbxpVCpKB7l6nmkwt-dTC4UtseSbQQ/s1600/horizontal-loading.gif"; 
      var bcLoadingMessage = " Loading...."; 
      var bcArchiveNavText = "View Archive"; 
      var bcArchiveNavPrev = '◄'; 
      var bcArchiveNavNext = '►'; 
      var headDays = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
      var headInitial = ["Su","Mo","Tu","We","Th","Fr","Sa"]; 
      // Nothing to configure past this point ---------------------------------- 
      var timeOffset; 
      var bcBlogID; 
      var calMonth; 
      var calDay = 1; 
      var calYear; 
      var startIndex; 
      var callmth; 
      var bcNav = new Array (); 
      var bcList = new Array (); 
      //Initialize Fill Array 
      var fill = ["","31","28","31","30","31","30","31","31","30","31","30","31"]; 
      function openStatus(){ 
         document.getElementById('calLoadingStatus').style.display = 'block'; 
         document.getElementById('calendarDisplay').innerHTML = ''; 
        } 
      function closeStatus(){ 
         document.getElementById('calLoadingStatus').style.display = 'none'; 
        } 
      function bcLoadStatus(){ 
         cls = document.getElementById('calLoadingStatus'); 
         img = document.createElement('img'); 
         img.src = bcLoadingImage; 
         img.style.verticalAlign = 'middle'; 
         cls.appendChild(img); 
         txt = document.createTextNode(bcLoadingMessage); 
         cls.appendChild(txt); 
        } 
      function callArchive(mth,yr,nav){ 
      // Check for Leap Years 
        if (((yr % 4 == 0) && (yr % 100 != 0)) || (yr % 400 == 0)) { 
            fill[2] = '29'; 
         } 
        else { 
            fill[2] = '28'; 
         } 
         calMonth = mth; 
         calYear = yr; 
         if(mth.charAt(0) == 0){ 
            calMonth = mth.substring(1); 
            } 
         callmth = mth; 
         bcNavAll = document.getElementById('bcFootAll'); 
         bcNavPrev = document.getElementById('bcFootPrev'); 
         bcNavNext = document.getElementById('bcFootNext'); 
         bcSelect = document.getElementById('bcSelection'); 
         a = document.createElement('a'); 
         at = document.createTextNode(bcArchiveNavText); 
         a.href = bcNav[nav]; 
         a.appendChild(at); 
         bcNavAll.innerHTML = ''; 
         bcNavAll.appendChild(a); 
         bcNavPrev.innerHTML = ''; 
         bcNavNext.innerHTML = ''; 
         if(nav <  bcNav.length -1){ 
            a = document.createElement('a'); 
            a.innerHTML = bcArchiveNavPrev; 
            bcp = parseInt(nav,10) + 1; 
            a.href = bcNav[bcp]; 
            a.title = 'Previous Archive'; 
            prevSplit = bcList[bcp].split(','); 
            a.onclick = function(){bcSelect.options[bcp].selected = true;openStatus();callArchive(prevSplit[0],prevSplit[1],prevSplit[2]);return false;}; 
            bcNavPrev.appendChild(a); 
            } 
         if(nav > 0){ 
            a = document.createElement('a'); 
            a.innerHTML = bcArchiveNavNext; 
            bcn = parseInt(nav,10) - 1; 
            a.href = bcNav[bcn]; 
            a.title = 'Next Archive'; 
            nextSplit = bcList[bcn].split(','); 
            a.onclick = function(){bcSelect.options[bcn].selected = true;openStatus();callArchive(nextSplit[0],nextSplit[1],nextSplit[2]);return false;}; 
            bcNavNext.appendChild(a); 
           } 
         script = document.createElement('script'); 
         script.src = 'http://www.blogger.com/feeds/'+bcBlogId+'/posts/summary?published-max='+calYear+'-'+callmth+'-'+fill[calMonth]+'T23%3A59%3A59'+timeOffset+'&published-min='+calYear+'-'+callmth+'-01T00%3A00%3A00'+timeOffset+'&max-results=100&orderby=published&alt=json-in-script&callback=cReadArchive'; 
         document.getElementsByTagName('head')[0].appendChild(script); 
      } 
      function cReadArchive(root){ 
      // Check for Leap Years 
        if (((calYear % 4 == 0) && (calYear % 100 != 0)) || (calYear % 400 == 0)) { 
            fill[2] = '29'; 
         } 
        else { 
            fill[2] = '28'; 
         } 
          closeStatus(); 
          document.getElementById('lastRow').style.display = 'none'; 
          calDis = document.getElementById('calendarDisplay'); 
          var feed = root.feed; 
          var total = feed.openSearch$totalResults.$t; 
          var entries = feed.entry || []; 
          var fillDate = new Array(); 
          var fillTitles = new Array(); 
          fillTitles.length = 32; 
          var ul = document.createElement('ul'); 
          ul.id = 'calendarUl'; 
          for (var i = 0; i < feed.entry.length; ++i) { 
            var entry = feed.entry[i]; 
            for (var j = 0; j < entry.link.length; ++j) { 
             if (entry.link[j].rel == "alternate") { 
             var link = entry.link[j].href; 
             } 
            } 
            var title = entry.title.$t; 
            var author = entry.author[0].name.$t; 
            var date = entry.published.$t; 
            var summary = entry.summary.$t; 
            isPublished = date.split('T')[0].split('-')[2]; 
            if(isPublished.charAt(0) == '0'){ 
               isPublished = isPublished.substring(1); 
               } 
            fillDate.push(isPublished); 
            if (fillTitles[isPublished]){ 
                fillTitles[isPublished] = fillTitles[isPublished] + ' | ' + title; 
                } 
            else { 
                fillTitles[isPublished] = title; 
                } 
            li = document.createElement('li'); 
            li.style.listType = 'none'; 
            li.innerHTML = '<a href="'+link+'">'+title+'</a>'; 
            ul.appendChild(li); 
            } 
         calDis.appendChild(ul); 
         var val1 = parseInt(calDay, 10) 
         var valxx = parseInt(calMonth, 10); 
         var val2 = valxx - 1; 
         var val3 = parseInt(calYear, 10); 
         var firstCalDay = new Date(val3,val2,1); 
         var val0 = firstCalDay.getDay(); 
         startIndex = val0 + 1; 
        var dayCount = 1; 
        for (x =1; x < 38; x++){ 
            var cell = document.getElementById('cell'+x); 
            if( x < startIndex){ 
                cell.innerHTML = ' '; 
                cell.className = 'firstCell'; 
               } 
            if( x >= startIndex){ 
                cell.innerHTML = dayCount; 
                cell.className = 'filledCell'; 
                for(p = 0; p < fillDate.length; p++){ 
                    if(dayCount == fillDate[p]){ 
                        if(fillDate[p].length == 1){ 
                           fillURL = '0'+fillDate[p]; 
                           } 
                        else { 
                           fillURL = fillDate[p]; 
                           } 
                        cell.className = 'highlightCell'; 
                        cell.innerHTML = '<a href="/search?updated-max='+calYear+'-'+callmth+'-'+fillURL+'T23%3A59%3A59'+timeOffset+'&updated-min='+calYear+'-'+callmth+'-'+fillURL+'T00%3A00%3A00'+timeOffset+'" title="'+fillTitles[fillDate[p]].replace(/"/g,'\'')+'">'+dayCount+'</a>'; 
                       } 
                    } 
                if( dayCount > fill[valxx]){ 
                   cell.innerHTML = ' '; 
                   cell.className = 'emptyCell'; 
                   } 
                dayCount++; 
               } 
            } 
          visTotal = parseInt(startIndex) + parseInt(fill[valxx]) -1; 
          if(visTotal >35){ 
              document.getElementById('lastRow').style.display = ''; 
             } 
        } 
      function initCal(){ 
         document.getElementById('blogger_calendar').style.display = 'block'; 
         var bcInit = document.getElementById('bloggerCalendarList').getElementsByTagName('a');
         var bcCount = document.getElementById('bloggerCalendarList').getElementsByTagName('li');
         document.getElementById('bloggerCalendarList').style.display = 'none'; 
         calHead = document.getElementById('bcHead'); 
         tr = document.createElement('tr'); 
         for(t = 0; t < 7; t++){ 
             th = document.createElement('th'); 
             th.abbr = headDays[t]; 
             scope = 'col'; 
             th.title = headDays[t]; 
             th.innerHTML = headInitial[t]; 
             tr.appendChild(th); 
            } 
         calHead.appendChild(tr); 
        for (x = 0; x <bcInit.length;x++){ 
           var stripYear= bcInit[x].href.split('_')[0].split('/')[3]; 
           var stripMonth = bcInit[x].href.split('_')[1]; 
           bcList.push(stripMonth + ','+ stripYear + ',' + x); 
           bcNav.push(bcInit[x].href); 
           } 
        var sel = document.createElement('select'); 
        sel.id = 'bcSelection'; 
        sel.onchange = function(){var cSend = this.options[this.selectedIndex].value.split(',');openStatus();callArchive(cSend[0],cSend[1],cSend[2]);};
        q = 0; 
        for (r = 0; r <bcList.length; r++){ 
             var selText = bcInit[r].innerHTML; 
             var selCount = bcCount[r].innerHTML.split('> (')[1]; 
             var selValue = bcList[r]; 
             sel.options[q] = new Option(selText + ' ('+selCount,selValue); 
             q++ 
             }                   
         document.getElementById('bcaption').appendChild(sel); 
         var m = bcList[0].split(',')[0]; 
         var y = bcList[0].split(',')[1]; 
         callArchive(m,y,'0'); 
      } 
      function timezoneSet(root){ 
         var feed = root.feed; 
         var updated = feed.updated.$t; 
         var id = feed.id.$t; 
         bcBlogId = id.split('blog-')[1]; 
         upLength = updated.length; 
         if(updated.charAt(upLength-1) == "Z"){timeOffset = "+00:00";} 
         else {timeOffset = updated.substring(upLength-6,upLength);} 
         timeOffset = encodeURIComponent(timeOffset); 
      } 
      //]]> 
      </script> 
      <script src='/feeds/posts/summary?max-results=0&amp;alt=json-in-script&amp;callback=timezoneSet'></script>
    9. klik Save/Simpan. Pemasangan sudah hampir selesai.

    Penambahan CSS (Temanya)

    1. Masih di bagian Template cari kode berikut ]]></b:skin> dan letakkan salah satu tema berikut di atasnya/sebelum ]]></b:skin>
    1. LIGHT Theme by MBT

      LIGHT Theme by MBT


      /* Start of Post Navigator by MBT (LIGHT Theme) ------ */ 
      #calendarDisplay {display:none;} 
      /* div that holds calendar */ 
      #blogger_calendar { margin:0px auto 0px 0px;width:100%;} 
      /* Table Caption - Holds the Archive Select Menu */ 
      #bcaption {border:1px solid #C7C7C7;padding:2px;margin:10px 0 0;background:#fff;font:bold 100% Tahoma, Arial, Sans-serif} 
      /* The Archive Select Menu */ 
      #bcaption select {background:#ffff;border:0 solid #C7C7C7;color:#0080ff;font-weight:bold;text-align:center;} 
      /* The Heading Section */ 
      table#bcalendar thead {} 
      /* Head Entries */ 
      table#bcalendar thead tr th {width:20px;text-align:center;padding:3px; border:1px solid #C7C7C7; font:bold 100% Tahoma, Arial, Sans-serif;background:#fff;color:#0080ff;} 
      /* The calendar Table */ 
      table#bcalendar {border:1px solid #C7C7C7;border-top:0; margin:0px 0 0px;width:100%;background:#fff} 
      /* The Cells in the Calendar */ 
      table#bcalendar tbody tr td {cursor:pointer; text-align:center; border-radius:4px; padding:3px;border:1px solid #C7C7C7; color:#666;font:bold 100% Tahoma, Arial, Sans-serif;} 
      /* Links in Calendar */ 
      table#bcalendar tbody tr td a:link, table#bcalendar tbody tr td a:visited, table#bcalendar tbody tr td a:active {font-weight:bold;color:#ffffff; text-decoration:none;} 
      table#bcalendar tbody tr td a:hover {color:#ffffff; text-decoration:none;} 
      /* First Row Empty Cells */ 
      td.firstCell {visibility:visible;} 
      /* Cells that have a day in them */ 
      td.filledCell {  background:#fff;} 
      td.filledCell:hover {  background:#dddddd;} 
      /* Cells that are empty, after the first row */ 
      td.emptyCell {visibility:hidden;} 
      /* Cells with a Link Entry in them */ 
      td.highlightCell {background:#53A9FF;border:1px solid #C7C7C7} 
      td.highlightCell:hover {background:#72B9FF;border:1px solid #C7C7C7} 
      /* Table Footer Navigation */ 
      table#bcNavigation  {width:100%;background:#fff;border:1px solid #C7C7C7;border-top:0;color:#0080ff;font:bold 100% Tahoma, Arial, Sans-serif;} 
      table#bcNavigation a:link {text-decoration:none;color:#0080ff} 
      table#bcNavigation a:hover{text-decoration:underline;} 
      td#bcFootPrev {width:10px;} 
      td#bcFootAll{text-align:center;} 
      td#bcFootNext {width:10px;} 
      ul#calendarUl {margin:5px auto 0!important;} 
      ul#calendarUl li a:link {} 
      #calLoadingStatus img {display: block;width: 80px;margin: 10px auto;}
      /* End of Post Navigator by MBT (LIGHT Theme) ------ */ 
      • Untuk merubah warna teks (teks yang warna biru) ganti 0080ff menggunakan Hex Color Generator
      • Untuk merubah warna background cell yang aktif cari kode ini 53A9FF
      • Untuk merubah warna background cell pada saat di sorot cari kode 72B9FF
    2. Klik Simpan/Save lalu lihat hasilnya
    Sumur: mkr-site
    Scroll to top