Tampilkan postingan dengan label WIDGET. Tampilkan semua postingan
Tampilkan postingan dengan label WIDGET. Tampilkan semua postingan

Widget Email Subscription for Blogger

07.38 0
Today we are going to learn “How To Add Subscription Widget / Box for Blogger”. The Widget itself is unique creation, actually it is adapted from Wordpress widgets, but you can install it on blogger now.

Features & Whats New ?
1. The Widget is made up of Pure CSS Scripts
2. Easy to Install without any Internel HTML Coding
3. Doesn’t Slow Down your Blog’s Loading Time.
4. Its really Soft and Beautiful.
5. Added Social Subscription Buttons.

How to Add this Widget to Your Blog ?
It is really easy to install on your blog, just follow the steps :
1. Go to Blogger
2. Click Layout.
3. Click Add Gadget.
4. Select HTML /Java Script.
5. Copy the Following  Code and Paste in it.

<div align="center" id="bloggingpasuruan"> <div id="ig-subscription-optin" filter: progid:dximagetransform.microsoft.gradientundefined startcolorstr='#55AAEE', endcolorstr='#003366',gradienttype=0 ); width: 265px;"> <h4 id="bloggingpasuruan-title-text" style="color: 000; font-size: 20px;"> Subscribe Our Newsletter</h4> <div id="bloggingpasuruan-sub-title-txt" style="color: 000; font-size: 14px;"> Join us for free and get valuable content delivered right through your inbox.</div> <br /> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=BlogRiskySyahfira', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"> <input class="name" id="bloggingpasuruan_Subscriber_name" name="name" onblur="ifundefinedthis.value=='')this.value=this.defaultValue;" onfocus="ifundefinedthis.value==this.defaultValue)this.value='';" type="text" value="Enter Your Name" /><br /> <input class="email" id="bloggingpasuruan_Subscriber_email" name="from" onblur="ifundefinedthis.value=='')this.value=this.defaultValue;" onfocus="ifundefinedthis.value==this.defaultValue)this.value='';" style="width: 130px;" type="text" value="Enter Email Address" /><br /> <div class="separator" style="clear: both; text-align: center;"> </div> <input name="uri" type="hidden" value="BlogRiskySyahfira" /><input name="loc" type="hidden" value="en_US" /> <input id="bloggingpasuruan_Submit_Text" style="height: auto; padding: 5px 0;" type="submit" value="Get Access Today!" /></form> </div> </div> <style> #ig-subscription-optin {margin: 0px;padding: 10px;height: auto!important;padding: 0px 10px 15px 15px !important; text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif !important;margin: 10px;margin: 0px;padding: 10px; margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif;padding: 5px;border: none;}#ig-subscription-optin p {margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif; padding: 5px;border: none;}#ig-subscription-optin input.name { background: white urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvL1Jc6vD3mFr6KQVKYd6GnMgeZ1nB-nXpKL3j50iKJVqvix3zuYwQJt4PRKBd77CUfyL9gBhkDGmeKwm4fnIOOzCUV9laymgkFPm54JCTuNkXagGUQMJfvC9iyD0SJhw0_9SujD4dlZkk/s1600/subscribe-name.png) no-repeat center right;} #ig-subscription-optin input[type="text"] {border: 1px solid #111 !important; font-size: 15px !important;margin-bottom: 10px !important;padding: 8px 28px 8px 10px !important;width: 80% !important;height: auto !important;} #ig-subscription-optin input.email {background: white urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjapJVW_MXxo2J3TVI8FwKB4xWYzwobEuAw6uHdHZl0OM6deUUcNk44cqYyXQQjMkeSv3ODdZEDvx3r1qXv_uFyao9UFS8UJ3uV6kvWfBKE2ihqekuYm5ZX9U0efPcMJAleszuZCgjB9Wa-/s1600/subscribe-email.png) no-repeat center right;}#ig-subscription-optin input { font-family: Georgia, Times, "Times New Roman", serif;border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;box-shadow: 0 2px 2px #111;-moz-box-shadow: 0 2px 2px #111;-webkit-box-shadow: 0 2px 2px #111;margin: 0px;padding: 0px;}#ig-subscription-optin h4 {margin-bottom: 8px !important; font-weight: bold !important;line-height: 26px !important;letter-spacing: normal; text-transform: none;text-decoration: none; text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif; border: none;padding: 0px !important;float: none;}input:hover[type="submit"] { background-color: #0094D2;border: 1px solid #0094D2;color: red;text-decoration: none;}input[type="submit"] {background-color: #00A7ED;border: 1px solid #0094D2; color: white;cursor: pointer;font-family: 'Droid Sans', sans-serif !important;font-size: 13px;font-weight: normal;padding: 5px;text-decoration: none;}input { color: #333;font-family: 'Droid Sans', sans-serif;}#ig-subscription-optin input[type="submit"] {background: #f6640e; border: 1px solid #111 !important;color: white;cursor: pointer !important;font-size: 18px !important;font-weight: bold !important; padding: 6px 0 !important;text-shadow: -1px -1px #3A060A !important;width: 90% !important;height: auto !important;line-height: 24px !important;} #ig-subscription-optin input[type="submit"]:hover {color: #FFFC00;}</style> <div style="text-align: right;"> <span style="font-size: xx-small;"><a href="http://bloggingpasuruan.blogspot.co.id/" target="_blank">get this widget</a></span></div>


6. Now before saving  the widget you have to make some changes.

7. Change BlogRiskySyahfira with your blog’s feed name. [How to Find Your Blog’s Feed Name?]

8.         After changes, Hit Save. Move your widget to any desired postion where you want to place it. [ Want to add this widget just below your post body? At left or right side? Click here for tutorial ]

Thats it, go to your blog and check any post, you will see our widget on your blog.
Important Note : Please don’t remove our attribution link from this widget.

Why You should not remove our attribution link? I think these little attribution links are worthy of my hardwork, and of course  it doesn't affect on your blog as its size it extra small, so kindly help Us by do not removing our attribution links from the widget you are going to install on your blog.
Thanks a lot for helping Us, a little help will make it to 100% happiness, kindly share this post with you friends and Don’t forget to drop your comment here.

Cara Membuat Artikel Terkait dibawah Posting Blog

03.54 0
Salam NEWBIE, buat sahabat newbie yang suka utak - atik template blog. Atikel kali ini tentang Cara Membuat Artikel Terkait dibawah Posting Blog. Memasang artikel terkait di blog mampu meningkatkan jumlah page view pada blog Sobat , karena dengan adanya related post , pengunjung akan tertarik dengan artikel yang berkaitan dengan artikel yang sedang dibaca oleh pengunjung Blog Sobat.

Cara Membuat Artikel Terkait dibawah Posting Blog

Widget artikel terkait ini di lengkapi dengan gambar berukuran 72 pixel dan di lengkapi dengan post snippet . Tertarik untuk memasang di Blog Sobat ?
Ikuti langkah langkahnya berikut ini :

Cara Membuat Artikel Terkait dibawah posting Blog 
1. Silahkan masuk akun Blogger >> Template ke halaman Edit HTML
2. Masukkan kode css berikut , tepat diatas kode  ]]></b:skin>

/* ==== Widget Artikel Terkait Firanewbie ==== */
.related-post{margin:15px 0 0;border-top:1px solid #f0f0f0;padding:15px 0 0}
.related-post h4{font-size:14px;margin:0 0 .5em;text-transform:uppercase}
.related-post-style-2{margin:0 0 0 0!important;padding:0 0 0 0!important;list-style:none}
.related-post-style-2 li{margin:0 0 0 0;padding:0 0 0 0}
.related-post-style-2 li{padding:5px 0!important;border-top:1px solid #eee;overflow:hidden}
.related-post-style-2 li:first-child{border-top:none}
.related-post-style-2 .related-post-item-thumbnail{width:60px;height:60px;max-width:none;max-height:none;background-color:transparent;border:none;padding:0;float:left;margin:2px 8px 0 0}
.related-post-style-2 .related-post-item-title{font:normal normal 16px Fjalla One,Helvetica,Arial,sans-serif}
.related-post-style-2 .related-post-item-summary{display:block;overflow:hidden}
.related-post-style-2 .related-post-item-more{}


3. Cari kode </body> , dan pasang kode dibawah ini diatas kode </body> tersebut

<div class='related-post' id='related-post'></div>
<script type='text/javascript'>
     var labelArray = [
       "Smartphone"
];
     var relatedPostConfig = {
      homePage: "http://Nama-Blog-Sobat.blogspot.com/",
      widgetTitle: "<h4>Related Posts :</h4>",
      numPosts: 5,
      summaryLength: 140,
      titleLength: "auto",
      thumbnailSize: 60,
      noImage: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ_3p-7EF5J-ZUXmP1cW_Luy2XkIB0VJrPhA3ydA9iHZYZKATasW0-iW81rq2S8ej_LlnTaiOaBZ04pX3GAPhD35bKiMW_Utt89MiotFUS7aqutQKDKNUllkNU5I_eGLpzlsYFkCpRG6DE/w60-c-h60/no-image.png",
      containerId: "related-post",
      newTabLink: false,
      moreText: "Read More...",
      widgetStyle: 2,
      callBack: function() {}
     };
     </script><script type='text/javascript'>
//<![CDATA[    
/*! Widget Artikel Terkait untuk Blogger oleh FIRANEWBIE */
var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>Artikel Terkait:</h4>",widgetStyle:1,homePage:"http://www.dte.web.id",numPosts:7,summaryLength:370,titleLength:"auto",thumbnailSize:72,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:false,moreText:"Baca Selengkapnya",callBack:function(){}};for(var f in relatedPostConfig){d[f]=(relatedPostConfig[f]=="undefined")?d[f]:relatedPostConfig[f]}var j=function(a){var b=m.createElement("script");b.type="text/javascript";b.src=a;k.appendChild(b)},o=function(b,a){return Math.floor(Math.random()*(a-b+1))+b},l=function(a){var p=a.length,c,b;if(p===0){return false}while(--p){c=Math.floor(Math.random()*(p+1));b=a[p];a[p]=a[c];a[c]=b}return a},e=(typeof labelArray=="object"&&labelArray.length>0)?"/-/"+l(labelArray)[0]:"",h=function(b){var c=b.feed.openSearch$totalResults.$t-d.numPosts,a=o(1,(c>0?c:1));j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&start-index="+a+"&max-results="+d.numPosts+"&callback=showRelatedPost")},g=function(z){var s=document.getElementById(d.containerId),x=l(z.feed.entry),A=d.widgetStyle,c=d.widgetTitle+'<ul class="related-post-style-'+A+'">',b=d.newTabLink?' target="_blank"':"",y='<span style="display:block;clear:both;"></span>',v,t,w,r,u;if(!s){return}for(var q=0;q<d.numPosts;q++){if(q==x.length){break}t=x[q].title.$t;w=(d.titleLength!=="auto"&&d.titleLength<t.length)?t.substring(0,d.titleLength)+"&hellip;":t;r=("media$thumbnail" in x[q]&&d.thumbnailSize!==false)?x[q].media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/,"/s"+d.thumbnailSize+"-c"):d.noImage;u=("summary" in x[q]&&d.summaryLength>0)?x[q].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.summaryLength)+"&hellip;":"";for(var p=0,a=x[q].link.length;p<a;p++){v=(x[q].link[p].rel=="alternate")?x[q].link[p].href:"#"}if(A==2){c+='<li><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+'</span> <a href="'+v+'" class="related-post-item-more"'+b+">"+d.moreText+"</a></span>"+y+"</li>"}else{if(A==3||A==4){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-title" href="'+v+'"'+b+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"></a><div class="related-post-item-tooltip"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+"</a></div>"+y+"</li>"}else{if(A==5){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-wrapper" href="'+v+'" title="'+t+'"'+b+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-tooltip">'+w+"</span></a>"+y+"</li>"}else{if(A==6){c+='<li><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><div class="related-post-item-tooltip"><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+"</span></span>"+y+"</div></li>"}else{c+='<li><a title="'+t+'" href="'+v+'"'+b+">"+w+"</a></li>"}}}}}s.innerHTML=c+="</ul>"+y;d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]);
//]]>
</script>

4. Klik save dan lihat hasilnya ( Selesai )

Saya akan lebih senang jika sobat blogger newbie berkenan memberikan komentar, saran, dan tambahan informasi juga pertanyaan seputar artikel Cara Membuat Artikel Terkait dibawah Posting Blog. Terima kasih dan semoga bermanfaat…..

Cara MODIFIKASI Widget STATISTIK Bawaan Blogger menjadi lebih KEREN

22.32 0
Cara MODIFIKASI Widget STATISTIK Bawaan Blogger menjadi lebih KEREN

Salam Blogger, kali ini saya berbagi tutorial tentang “Cara MODIFIKASI Widget Statistik Bawaan Blogger menjadi lebih KEREN “menggunakan background warna dengan horizontal style. Atau seperti gambar diatas

Adapun Fitur dari widget statistik blog ini:
Menampilkan Jumlah postingan
Menampilkan Jumlah Komentar
Menampilkan Total Tayang Laman

Silahkan ikuti langkah-langkah berikut menambahkan widget statistis blogger ini ke blog:

1.Pada Dasbor pilih menu Tata Letak
2.Tambah Gadget >> Pilih widget Statistik blog

Cara MODIFIKASI Widget STATISTIK Bawaan Blogger menjadi lebih KEREN
Pada kolom konfigurasikan widget, anda tidak perlu mengganti nama atau memilih tampilan, langsung klik simpan dan klik simpan lagi.

3. Sekarang masuk menu Template >> Pilih edit HTML
4. Klik Ctrl+F dan cari kode ]]></b:skin>
5. Kemudian letakkan kode CSS berikut diatas kode ]]></b:skin>


#Stats1 ul{margin:0px 0;border:0;padding:0}
#Stats1 li{display:inline;width:28%;margin:0;border:0;background-color:#fff;background:#0090D5;color:#fff;float:left;padding:5px 7px;text-decoration:none;text-shadow:none;margin:0 1px 1px 0;font-size:12px;list-style-type:none}
#Stats1 h4{margin:0;font-size:18px;line-height:1.2em;color:#fff;text-shadow:none}
#Stats1 span{font-size:12px;color:#fff;text-shadow:none}
#totalComments{background-position:0 -68px}
#totalCount{background-position:0 -136px}


Anda bisa mengganti background, warna font pada kode CSS widget statistik diatas agar sesuai dengan desain template blog anda.

6. Klik Ctrl+F dan cari kode berikut:

<b:widget id='Stats1' locked='false' title='Total tayangan laman' type='Stats'/>

7. Setelah dapat, ganti kode tersebut dengan kode berikut:

<b:widget id='Stats1' locked='false' title='' type='Stats'>
  <b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
    <div class='widget-content'>
      <ul>
        <li>
          <h4 id='Stats1_totalPosts'>&amp;hellip;</h4>
          <span>Posts</span>
        </li>
        <li id='totalComments'>
          <h4 id='Stats1_totalComments'>&amp;hellip;</h4>
          <span>Comments</span>
        </li>
        <li id='totalCount'>
          <h4 expr:id='data:widget.instanceId + &quot;_totalCount&quot;'>&amp;hellip;</h4>
          <span>Pageviews</span>
        </li>
      </ul>
      <script type='text/javascript'>
//<![CDATA[
function totalPosts(json){document.getElementById('Stats1_totalPosts').innerHTML=json.feed.openSearch$totalResults.$t};function totalComments(json){document.getElementById('Stats1_totalComments').innerHTML=json.feed.openSearch$totalResults.$t};document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalPosts\"><\/script><script type=\"text/javascript\" src=\"/feeds/comments/default?alt=json-in-script&max-results=0&callback=totalComments\"><\/script>');
//]]>
      </script>
    </div>
  </b:includable>
</b:widget>

Anda bisa mengganti tulisan yang memiliki background warna diatas dengan kata/tulisan anda sendiri

8. Simpan template dan lihat hasilnya diblog anda.

Demikian tutorial tentang “Cara MODIFIKASI Widget Statistik Bawaan Blogger menjadi lebih KEREN selamat mencoba semoga bermanfaat..


Cara Modifikasi Widget Arsip Blogger KEREN

23.37 0
Cara Modifikasi Widget Arsip Blogger KEREN

Salam Blogger, Kali ini saya berbagi tutorial Cara Modifikasi Widget Arsip Blogger. Widget arsip default blogspot akan dimodifikasi menjadi bentuk arsip kalender seperti pada wordpress namun dengan gaya berbeda. Script yang mudah dan stylesheet kali ini akan memungkinkan anda membuat arsip bergaya kalender ini untuk blog anda. Plugin telah dibuat kompatibel dan mudah diimplementasikan. Cukup ikuti langkah-langkah berikut:

Menambahkan widget Arsip pada blog

1. Login keakun Blogger anda >> Pada Dasbor klik Tata letak
2. Tambah gadget dan pilih gadget/ widget arsip dasar blogger
3.Pilih dan klik sesuai screen shoot dibawah ini. Pilih daftar Flat List. Pilih arsip frekunsi perbulan.

Cara Modifikasi Widget Arsip Blogger KEREN
4.  Klik simpan

Modifikasi Widget Arsip Bergaya Kalender

5. Sekarang pada pada Dasbor blog > Settings > Template. Jangan lupa Backup template anda sebelumnya kemudian klik edit HTML tunggu sampai proses loading selesai
6. Sekarang cari kode berikut:

    <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>

7.  Ganti kode pada langkah ke 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 </head>   Kemudian copy dan paste kode berikut diatasnya:

<!—widget arsip blogger modifikasi oleh www.bloggingpasuruan.blogspot.com -->
    <script type='text/javascript'>
    //<![CDATA[
    var bcLoadingImage = "http://mybloggertricks.googlecode.com/files/loading-trans.gif.png";
    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>

<!—widget arsip blogger modifikasi oleh www.bloggingpasuruan.blogspot.com -->


Catatan: Anda masih bisa mengedit kode diatas, seperti mengganti nama hari, kalimat view archive, atau URL image loading.

9. Sekarang untuk tampilann seperti berikut:

Cara Modifikasi Widget Arsip Blogger KEREN

tambahkan CSS berikut diatas kode  ]]></b:skin>

/* Start of Post Navigator by bloggingpasuruan (awal)  ------ */
#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 {}
/* End of Post Navigator by bloggingpasuruan (akhir)  ------ */


Sedangkan untuk tampilan seperti berikut ini:

Cara Modifikasi Widget Arsip Blogger KEREN

tambahkan CSS berikut diatas kode ]]></b:skin>

/* Post Navigator by bloggingpasuruan (awal) ------ */
#calendarDisplay {display:none;}
/* div that holds calendar */
#blogger_calendar { margin:5px 0 5px 10px;width:98%;}
/* Table Caption - Holds the Archive Select Menu */
#bcaption {border:1px solid #666666;padding:2px;margin:10px 0 0;background:#333333;font:bold 100% Tahoma, Arial, Sans-serif}
/* The Archive Select Menu */
#bcaption select {background:#333333;border:0 solid #333333;color:#dddddd;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:2px; border:1px outset #666666; font:bold 100% Tahoma, Arial, Sans-serif;background:#333333;color:#dddddd}
/* The calendar Table */
table#bcalendar {border:1px solid #666666;border-top:0; margin:0px 0 0px;width:95%;background:#333333}
/* The Cells in the Calendar */
table#bcalendar tbody tr td {text-align:center;padding:2px;border:1px outset #666666; color:#F5F202;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:underline;}
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 {}
/* Cells that are empty, after the first row */
td.emptyCell {visibility:hidden;}
/* Cells with a Link Entry in them */
td.highlightCell {background:#000000;border:1px solid #666666}
/* Table Footer Navigation */
table#bcNavigation  {width:95%;background:#333333;border:1px solid #666666;border-top:0;color:#F5F202;font:bold 100% Tahoma, Arial, Sans-serif;}
table#bcNavigation a:link {text-decoration:none;color:#F5F202}
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 {}
/* Post Navigator by bloggingpasuruan (akhir) ------ */


Catatan: Anda bisa menyesuaikan tampilan widget arsip sesuai dengan tema dan desain blog anda dengan mengganti kode warna pada kode CSS pada langkah terakhir saja !


Demikian tutorial Cara Modifikasi Widget Arsip Blogger, selamat mencoba dan semoga bermanfaat