Cara Membuat 2 Kolom Index Berita Atau Sitemap

Sebelumnya blogmanado sudah membagikan Cara Membuat Index Berita Keren Di Blog. Kali ini blogmanado akan berbagi trik, bagaimana cara membuat 2 kolom Sitemap dengan Navigasi di halaman statis, tutorial ini berasal dari internet, saya hanya memodifikasi sedikit CSS agar tampilan menjadi 2 kolom.

Lihat DEMO

<style scoped="" type="text/css">
#toc-outer {
  color:black;
  font:normal 11px/14px Arial,Sans-Serif;
  height:auto;
  margin:0 auto;
  overflow:hidden;
  padding:0;
  text-align:left;
}

#loadingscript {
  padding:0px 0px;
  height:37px;
  text-indent:-9999px;
  color:transparent;
  background:white url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5kB0_YX_xI6TUV-U65iV3bjqbkOpATnm_LLFUUXi8fKFwKI-0aeJzEdXOHUYZvPR328MAH1kn8OsuH63HwtMICsZavozlrN5m_wNIz3FdSuYOeL83SBov_A2TERh6oHxbIIlRIPNPf1oG/s1600/loding.gif') no-repeat 50% 50%;
}

.itemposts {
    float: left;
    height: auto;
    overflow: hidden;
    width: 47%;
    box-shadow: 1px 1px 5px #C3C3C3;
    background: none repeat scroll 0% 0% #F9F9F9;
    border: 1px solid #FFF;
    margin: 3px 5px 8px;
    padding: 0px 3px;
}

.itemposts h6 {
    border-bottom: 1px solid #CCC;
    color: #333;
    font: bold 12px Arial;
    height: 15px;
    overflow: hidden;
    text-transform: none;
    margin: 0px 0px 5px;
    padding: 2px 6px !important;
}

.itemposts h6 a:hover {
  color:#38f;
  text-decoration:none;
}

.itemposts img {
  background-color:#fff;
  border:1px solid #ccc;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  border-radius:3px;
  float:left;
  height:65px;
  margin:0 7px 5px 0;
  padding:3px;
  width:65px;
  z-indent:99999px;
}

.itemposts .iteminside {}

.itemposts .itemfoot {
    border-top: 1px solid #CCC;
    clear: both;
    overflow: hidden;
    padding: 4px 5px;
}

.itemposts .itemfoot a.itemrmore {
  color:#333;
  float:right;
  font-weight:bold;
  text-decoration:none;
}

.itemposts .itemfoot a.itemrmore:hover {text-decoration:underline}

#itempager {
  clear:both;
  padding:10px 0;
}

#pagination,

#totalposts {
  color:#000;
  display:block;
  font:bold 10px Verdana,Arial,Sans-Serif;
  margin-bottom:10px;
  text-align:center;
  padding:0;
}

#pagination span, #pagination a {
    color: #FFF;
    display: inline;
    margin: 0px 1px;
    padding: 2px 5px;
    text-indent: 0px;
    background-color: #068BC9;
    background-image: linear-gradient(#068BC9 0%, #3161C2 50%, #3059AB 51%);
    border: 1px solid #3161C2;
    text-decoration: none;
    border-radius: 10px;
}
#pagination a:hover {background-color:#333}

#pagination span.actual {background-color:black}

#pagination span.hidden {display:none}
</style>
<script>
var showPostDate   = true,
    showComments   = true,
    idMode         = true,
    sortByLabel    = false,
    labelSorter    = "JQuery",
    loadingText    = "Loading...",
    totalPostLabel = "Number of posts:",
    jumpPageLabel  = "page",
    commentsLabel  = "comment",
    rmoreText      = "Learn more&#9658;",
    prevText       = "previous",
    nextText       = "next",
    siteUrl        = "http://blogsmanado.blogspot.com",
    postPerPage   = 10,
    numChars       = 150,
    imgBlank       = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC";
</script>
<script type='text/javascript'>
//<![CDATA[
var minpage=6;var maxpage=10;var firstpage=0;var pagernum=0;var postsnum=0;var actualpage=1;document.write('<div id="toc-outer"><div id="results"></div><div id="itempager" style="position:relative;"><div id="pagination"></div><div id="totalposts"></div><a title="Taufik Nurrohman" style="display:block!important;visibility:visible!important;opacity:1!important;position:absolute;bottom:10px;right:14px;font:normal bold 8px Arial,Sans-Serif!important;color:#666;text-shadow:0 1px 0 rgba(255,255,255,.1);text-decoration:none;" href="http://www.mybloggertricks.org" target="_blank"></a></div></div>');var _results=document.getElementById('results');var _pagination=document.getElementById('pagination');var _totalposts=document.getElementById('totalposts');function showPagePosts(json){var entry,posttitle,posturl,postimg,postsumm,replies,monthnames,timepub,output="";if(pagernum===0){postsnum=parseInt(json.feed.openSearch$totalResults.$t);pagernum=parseInt(postsnum/postPerPage)+ 1;}
for(var i=0;i<postPerPage;i++){if("entry"in json.feed){if(i==json.feed.entry.length)break;entry=json.feed.entry[i];posttitle=entry.title.$t;for(var k=0,elen=entry.link.length;k<elen;k++){if(entry.link[k].rel=="alternate"){posturl=entry.link[k].href;break;}}
for(var l=0,clen=entry.link.length;l<clen;l++){if(entry.link[l].rel=="replies"&&entry.link[l].type=="text/html"){var commentsnum=entry.link[l].title.split(" ")[0];break;}}
postsumm=("summary"in entry)?entry.summary.$t.replace(/<br ?\/?>/ig," ").replace(/<.*?>/g,"").replace(/[<>]/g,""):"";if(postsumm.length>numChars){postsumm=(numChars>0&&numChars!==false)?postsumm.substring(0,numChars)+'...':"";}
var _postdate=entry.published.$t,_cdyear=_postdate.substring(0,4),_cdmonth=_postdate.substring(5,7),_cdday=_postdate.substring(8,10);monthnames=(idMode)?["Jan","Feb","Mar","Apr","Mei","Jun","Jul","Agt","Sep","Okt","Nov","Des"]:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];timepub=(showPostDate)?_cdday+' '+ monthnames[parseInt(_cdmonth,10)- 1]+' '+ _cdyear+' - ':'';replies=(showComments)?commentsnum+' '+ commentsLabel:'';postimg=("media$thumbnail"in entry)?entry.media$thumbnail.url:imgBlank;output+='<div class="itemposts">';output+='<h6><a href="'+ posturl+'" title="'+ posttitle+'">'+ posttitle+'</a></h6>';output+='<div class="iteminside"><a href="'+ posturl+'"><img src="'+ postimg+'" /></a>';output+='<span class="summary">'+ postsumm+'</span></div>';output+='<div style="clear:both;"></div><div class="itemfoot">'+ timepub+ replies+'<a class="itemrmore" href="'+ posturl+'">'+ rmoreText+'</a></div>';output+='</div>';}}
_results.innerHTML=output;_create_pagination();}
function _create_pagination(){output="";var starter=0;output+=((actualpage>1)?'<a title="'+ prevText+'" class="prevjson" href="javascript:_init_script('+(actualpage- 1)+')">'+ prevText+'</a>':'<span class="prevjson hidden">'+ prevText+'</span>')+'<em style="font:inherit;color:inherit;" class="pagernumber">';if(pagernum<(maxpage+ 1)){for(starter=1;starter<=pagernum;starter++){output+=(starter==actualpage)?'<span class="actual">'+ starter+'</span>':'<a href="javascript:_init_script('+ starter+')">'+ starter+'</a>';}}else if(pagernum>(maxpage- 1)){if(actualpage<minpage){for(starter=1;starter<(maxpage- 2);starter++){output+=(starter==actualpage)?'<span class="actual">'+ starter+'</span>':'<a href="javascript:_init_script('+ starter+')">'+ starter+'</a>';}
output+=' ... ';output+='<a href="javascript:_init_script('+ parseInt(pagernum- 1)+')">'+ parseInt(pagernum- 1)+'</a>';output+='<a href="javascript:_init_script('+ pagernum+')">'+ pagernum+'</a>';}else if(pagernum-(minpage- 1)>actualpage&&actualpage>(minpage- 1)){output+='<a href="javascript:_init_script(1)">1</a>';output+='<a href="javascript:_init_script(2)">2</a>';output+=' ... ';for(starter=actualpage- 2;starter<=actualpage+ 2;starter++){output+=(starter==actualpage)?'<span class="actual">'+ starter+'</span>':'<a href="javascript:_init_script('+ starter+')">'+ starter+'</a>';}
output+=' ... ';output+='<a href="javascript:_init_script('+(pagernum- 1)+')">'+ parseInt(pagernum- 1)+'</a>';output+='<a href="javascript:_init_script('+ pagernum+')">'+ pagernum+'</a>';}else{output+='<a href="javascript:_init_script(1)">1</a>';output+='<a href="javascript:_init_script(2)">2</a>';output+=' ... ';for(starter=pagernum-(minpage+ 1);starter<=pagernum;starter++){output+=(starter==actualpage)?'<span class="actual">'+ starter+'</span>':'<a href="javascript:_init_script('+ starter+')">'+ starter+'</a>';}}}
output+='</em>'+((actualpage<starter- 1)?'<a title="'+ nextText+'" class="nextjson" href="javascript:_init_script('+(actualpage+ 1)+')">'+ nextText+'</a>':'<span class="nextjson hidden">'+ nextText+'</span>');_pagination.innerHTML=output;_totalposts.innerHTML=totalPostLabel+' '+ postsnum+' - '+ jumpPageLabel+' '+((actualpage*postPerPage)-(postPerPage- 1))+((actualpage<starter- 1)?' - '+(actualpage*postPerPage):"");}
function _init_script(n){var parameter=(n*postPerPage)-(postPerPage- 1),old,s,head=document.getElementsByTagName('head')[0],url=(sortByLabel)?siteUrl+'/feeds/posts/summary/-/'+ labelSorter+'?start-index='+ parameter:siteUrl+'/feeds/posts/summary?start-index='+ parameter;if(firstpage==1){document.documentElement.scrollTop=_results.offsetTop- 30;document.body.scrollTop=_results.offsetTop- 30;old=document.getElementById("TEMPORAL");old.parentNode.removeChild(old);}
_results.innerHTML='<div id="loadingscript">'+ loadingText+'</div>';_pagination.innerHTML='';_totalposts.innerHTML='';s=document.createElement('script');s.type='text/javascript';s.src=url+'&max-results='+ postPerPage+'&orderby=published&alt=json-in-script&callback=showPagePosts';s.id='TEMPORAL';head.appendChild(s);firstpage=1;actualpage=n;}
window.onload=function(){_init_script(1);};
</script>

Ganti URL http://blogsmanado.blogspot.com URL warna merah dengan alamat blog anda, setelah itu klik publish dan lihat hasilnya.

Cara Membuat 3 Kolom Index Berita Atau Sitemap

Code Sitemap 3 kolom

<script src="https://googledrive.com/host/0B-P4_Fs3S76ydURacVd6TlJyWW8" type='text/javascript'></script> <script src="http://blogsmanado.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script> <style type="text/css"> .post-archive { width: 100%; padding: 20px 0; text-transform: capitalize; } .post-archive h4 { border-bottom: 2px solid #EEEEEE; color: #333333; font-size: 20px; margin: 0 0 10px 2px; padding: 0 0 10px; } .ct-columns-3 { -moz-column-count: 3; -moz-column-gap: 10px; -moz-column-rule: none; -webkit-column-count: 3; -webkit-column-gap: 10px; -webkit-column-rule: none; column-count: 3; column-gap: 10px; column-rule: none;} .ct-columns-3 p { padding: 5px 0px; -moz-column-break-inside: avoid; -webkit-column-break-inside: avoid; -o-column-break-inside: avoid; -ms-column-break-inside: avoid; column-break-inside: avoid; display: inline-block; width: 100%; } .ct-columns-3 p a { background: #fafafa; color: #333; display: block; border: 1px solid #FFFFFF; font-size: 14px; line-height: normal; outline: 1px solid #EEEEEE; padding: 10px 15px; -webkit-transition:all .25s ease-in-out; -moz-transition:all .25s ease-in-out; -o-transition:all .25s ease-in-out; transition:all .25s ease-in-out; } .ct-columns-3 p a:hover { background: #555; color: #fff; } @media screen and (max-width: 768px){ .ct-columns-3 { -moz-column-count: 1; -moz-column-gap: 0px; -moz-column-rule: none; -webkit-column-count: 1; -webkit-column-gap: 0px; -webkit-column-rule: none; column-count: 1; column-gap: 0px; column-rule: none; } } </style>

Ganti URL http://blogsmanado.blogspot.com URL warna merah dengan alamat blog anda, setelah itu klik publish dan lihat hasilnya. salam Blog Manado....