Cara Memasang Kalender Di Bloger Biar Cantik

Posted : admin On 12.09.2019

Blog Ocha - Cara Membuat Blog Gratis Di Blogger Blogspot Lengkap Dengan Video Tutorialnya!!! - Hallo sahabat blog Ocha dimanapun kalian b. Adsense Blogger Cara Memasang Ads.txt Chitika Diblogger Blogspot. DP BBM 23 - Cara Memasang Ads.txt Chitika Diblogger Blogspot - Hallo guys, selamat pagi dan selamat memba ca kembali di.

  1. Cara Memasang Kalender Di Blogger Biar Cantik Pc
  2. Cara Memasang Kalender Di Blogger Biar Cantik Laptop

Merubah tampilan default Arsip Widget Blogger menjadi Arsip Widget Kalender

Kalianmembutuhkan tampilan blog yang unik? Di sini proBlogiz selalu siap membagi tip dan trik unikdan menarik bagi Anda. Tutorial Blogger kali ini merubah tampilan Widget Arsip blog (Archive Blog Widget ) menjadi tampilan Arsip Widget Kalender yang diadop dari Type Arsip Wordpressdengangayakustom . Tampilan default Widget Arsip Blogger (Archive Blog Widget) mungkin membuat bosan Anda, dengan merubahnya dengan gaya atau style seperti Kalender (Archive Calendar Widget), tentu bukan ide yang buruk. Inilah trik Desain Blog membuat Arsip Widget Kalender untuk Blogger

Dengan menggunakan kode scriptdanstylesheet yang mudah ini akanmemungkinkan Andasemua untukmembuatgadget arsip kalenderuntuk blog menjadi menyenangkan dan membuat tampilan blog berbeda dengangaya unik. Anda juga bisa memilih 2 tema Arsip Widget Kalender (Archive Calendar Widget) dibawah denganbackground gelapdanterang (Dark and Light backgrounds). Script code dibuat /dikodekanolehphydeaux3dandidesain ulangolehproBlogizdengan kustomwarnadan instalasi atau cara pasang yanglebih mudah. Plugintelah dibuatkompatibeldan mudah diimplementasikan. Anda cukup ikutilangkah-langkah dasarberikut.

Instal / Pasang Arsip Widget Kalender di Blog

2.PilihwidgetBlogArchiveyangtersediadalam direktoriwidgetBloggerdefault. Beralih kehalaman berikutnyadalam direktoriuntukmenemukannya.
3. Pilihopsiseperti berikut - lihat dalam gambar dibawah. Pilih style as Flat list. Uncheck 'Show Oldest Posts First', pilih archive Frequency as Monthly dan sesuaikan Date Format.

4. Klik Save / Simpan

Pasang Kode Widget Pada Template

1. Blogger > Settings > Template. Backup template kemudian click Edit HTML > Proceed

3. Gantikan semua kode diatas dengan kode dibawah ini :
<b:widget locked='false' type='BlogArchive'><b:includable> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div> <div> <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 var='interval'> <!-- Toggle not needed for Calendar --></b:includable><b:includable var='data'><div> <ul> <b:loop values='data:data' var='i'> <li> <a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>) </li> </b:loop> </ul></div><div><table><caption></caption><!-- Table Header --><thead></thead><!-- Table Footer --><!-- Table Body --><tbody><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td></tr></tbody></table><table><tr><td></td><td></td><td></td></tr></table> <div><script type='text/javascript'>bcLoadStatus();</script></div><div/></div><script type='text/javascript'> initCal();</script></b:includable><b:includable var='posts'><!-- posts not needed for Calendar --></b:includable><b:includable var='data'> Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format</b:includable><b:includable var='intervalData'> Configure your calendar archive widget - Edit archive widget - Flat List - Newest first - Choose any Month/Year Format</b:includable></b:widget>

4. Cari tag </head> dan pastekan / letakkan kode dibawah berikut tepat diatasnya :

<!-- Blogger Archive Calendar by http://problogiz.blogspot.com --><script type='text/javascript'>//<![CDATA[var bcLoadingImage = 'https://sites.google.com/site/problogiz/my-picture/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 Arrayvar 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+'/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><!-- End Blogger Archive Calendar by http://problogiz.blogspot.com -->
Opsional: kode yang berwarna hijauadalah di mana Andadapatmengubah teks'Arsip View', gambar Loading, karakterASCII untuk arrow navigasi danmengubahsingkatannamahari.

5. Save Template

Disini Anda sebenarnya telah selesai merubah tampilan Widget Arsip blog, namun widgetmasihterlihat sederhana karena belum Anda berikan sentuhan gaya dan menambahkanwarna.

Ayo kita beri Style atau Theme pada Arsip Widget Kalender baru Anda :




Cari tag ]]></b:skin> dan letakkan kode CSS berikut tepat diatasnya :
/* Start of Post Navigator by problogiz (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 {} /* End of Post Navigator by problogiz (LIGHT Theme) ------ */
Cara Memasang Kalender Di Bloger Biar Cantik
Kostum untuk Light Theme :

Cara Memasang Kalender Di Blogger Biar Cantik Pc

ganti warna text pada code yang berwarna biru : #0080ff sesuai selera
ganti warna background dan cell aktiv mode pada code berwana kuning : #53A9FF sesuai selera
dan ganti code yang berwarna hijau : #72B9FF untuk warna cell pada mode hover
Gunakan Kode Generator / Kode Warna >>>> WARNA HTML



Cara Memasang Kalender Di Blogger Biar Cantik Laptop


Letakkan kode CSS berikut tepat diatas ]]></b:skin> :
/* Start of Post Navigator by problogiz(DARK Theme) ------ */#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 {}/* End of Post Navigator by problogiz (DARK Theme) ------ */
Kostum :
untuk ganti warna text edit pada kode yang berwarna: #F5F202

Gunakan Kode Generator / Kode Warna >>>> WARNA HTML

Nah, sekarang Anda benar-benar telah membuat widget Arsip baru yang unik, Arsip Widget Kalender

Coba lihat hasilnya dan lakukan beberapa test untuk membuka artikel-artikel yang tersimpan di Arsip Blog, widget ini lebih simple dan informatif-dengan mudah Anda dapat mejangkau semua file di blog.
Arsip Widget Kalender untuk Blogger enjoy it guys.....

Tampilan jam atau kalender di blog anda biasa-bisa saja ? Atau kurang menarik ? Dan tentunya bikin anda bosan..! anda harus memodifikasinya now, whay?? ya biar anda seneng dan semakin cinta dengan blog anda dan tentunya user juga suka mengunjungi blog anda. ya..Mungkin ini bisa menjawab pertanyaan itu, dengan memasang widgate jam atau kalender seperti di blog saya ini..^o^, caranya gampang bro…!

ok lets simak artikel ini dan ikuti langkah-langkahnya

  1. silahkan buka situs widgia.com
  2. disitu banyak sekali jam atau kalender atau widget yang lain dan andapun bisa memilihnya
  3. setelah itu klik get this widgate
  4. maka akan muncul tampilan
  5. selanjutnya anda pilih logo wordpress atau logo blog maka isi sesuai dengan account anda di wordpress atu blog setelah itu klik post maka souce codenya akan dikirim ke postingan anda.
  6. setelah itu kalau blognya pake wordpress silahkan pilih widgets di dashboard di appearance dan pilih widget TEXT dan drag ke sidebar di sebelah kanan , anda copykan source codenya ke widget Text tersebut dan save .
  7. selesai bung !

untuk ukurannya anda tinggal merubahnya sendiri lewat source codenya

>>>> googluck selamat mencoba<<<