Friday, October 09, 2009

Blog Archive Blogger

Kali ini saya ingin membuat trik blog mengenai calendar..? Anda pernah liat caledar archive yang hanya ada di blog-blog milik wordpress..? nah seperti itulah postingan kali yang saya akan buat. Mungkin para master blogger sudah paham mengenai trik blog kali ini?? tapi bagi yang belum tahu atau sekedar ingin mempraktekan trik ini dapat mengikuti langkah-langkah berikut ini :
  1. Tentu saja Login ke account blogger anda.
  2. Edit HTML - Expand Widget Templates.
  3. Jangan lupa backup terlebih dahulu template anda untuk jaga-jaga.
  4. cari kode
    <b:section class='sidebar' id='sidebar' preferred='yes'>
  5. Lalu copy/paste kode dibawah ini setelah kode diatas.
    <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>
  6. Save terlebih dahulu template anda.
  7. Nah habis itu cari kode..
    ]]></b:skin> </head>
  8. Copy/Pate kode dibawah ini diantara kode diatas.
    <!-- Start Blogger Archive Calendar --> //ganti kode ini dengan style calendar yang anda inginkan <script src='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/blogger_archive.js' type='text/javascript'/> <script src='/feeds/posts/summary?max-results=0&amp;alt=json-in-script&amp;callback=timezoneSet'/> <!-- End Blogger Archive Calendar -->
  9. Save kembali template anda, seharus trik tersebut bisa berjalan jika anda telah sesuai mengikuti langkah-langkah diatas. Satu hal yang perlu anda atur adalah : Click bagian Layout - Page Element, lalu edit Blog Archive anda.
Alternative lain untuk tampilan Blog Archive anda. Copy/paste kode berikut sebelum tag ]]></b:skin>
  1. Dusty Blue
    <link href='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/dusty_blue.css' rel='stylesheet' type='text/css'/>
  2. Basic styles for Dark Templates
    <link href='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/dark_theme.css' rel='stylesheet' type='text/css'/>
  3. Blue/Black
    <link href='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/blue_black.css' rel='stylesheet' type='text/css'/>
  4. Plain White
    <link href='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/plain_white.css' rel='stylesheet' type='text/css'/>
  5. Jika Anda tidak ingin semua judul posting yang terdapat di bawah kalender, dapat menambahkan kode ini ke bagian CSS Anda. Tinggal tambahkan kode di bawah ini sebelum ]]></ b: skin>. # calendarDisplay (display: none;)
nah semoga bermanfaat ya.. selamat mencoba..

0 komentar:

Post a Comment

saran, komentar dan kritikan anda sangat berharga buat saya, terima kasih.