membuat blog pagger ala site search pada blogspot

Jika mengamati istilah pada judul artikel diatas apa yang terbayangkan oleh anda..? maksudkah dengan kalimat tersebut... yang tau cuman anda, dan jika pengen orang lain juga ikut tau apa yang ada pada pikiran anda tentang judul diats, maka begegaslah bercuap cuap di blog ini.. gimana dunk caranya.. yah cukup kirim post komentar di bawah ini dan cuap cuap ampe monyong.. wekekeke...
oke sekarang giliran saya buat cuap cuap ngejelasin judul kalimat diatas " membuat blog pager ala site search pada blogspot " . Taukah anda site search google.com .. yang mesin pencarian ituloh.. Nah jika anda mencari sesuatu di dunia internet dengan menggunakan google search, maka setiap kata kunci / keyword yang anda tuliskan di kotak pencarian google lalu tekan tombol SEARCH / CARI maka anda akan ditunjukkan berbagai situs yang berkaitan dengan kata kunci yang anda cari / ketikkan tadi, dan yang pasti jumlahnya sangat banyak sekali mencapai ratusan bahkan ribuan.. dengan jumlah sebegitu banyaknya google.com tidak menampilkan semua dalam satu halaman ( ntar jadi panjang kebawah dunk.. hehehe.. ) yaitu membaginya menjadi puluhan bahkan ratusan bahkan lagi ribuan halaman.. wuihh gilaa... hehehe...
Nah jika masih bingung dengan penjelasan diatas silahkan anda lihat contoh blognya yaitu klik disini dan cari barangnya yang berbackground warna kuning dibagian bawah..
Oke dech.. dah ngerti kan.. nah sekarang selanjutnya saya akan ngasih script nya untuk anda dan gratis pluss cara memasangnya kedalam blog anda.. gimana..? mau..? lanjuuuuttt....
ni dia scriptnya ( menggunakan perintah javascript )

<style>
.showpageArea {padding: 1 1px;margin-top:5px;margin-bottom:5px;
}

.showpageArea a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 1px 1px !important;
padding: 1px 1px ;margin:0px 1px;
text-decoration: none;
}

.showpageArea a:hover {
font-size:9px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

.showpageNum a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 1px 1px !important;
padding: 1px 1px ;margin:0px 1px;
text-decoration: none;

}
.showpageNum a:hover {
font-size:9px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

.showpagePoint {font-size:11px;
padding: 1px 2px 1px 2px;
margin: 1px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;
}

.showpage a:hover {font-size:9px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

.showpageNum a:link,.showpage a:link {
font-size:9px;
padding: 1px 2px 1px 2px;
margin: 1px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;}

.showpageNum a:hover {font-size:9px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
</style>

<script type="text/javascript">
function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

var pageCount=5;
var displayPageNum=3;
var firstPageWord = '<=';
var endPageWord = '=>';
var upPageWord ='Prev';
var downPageWord ='Next';

var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){
itemCount++;
}
}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}
for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}
fFlag++;
}
if(p==(thisNum-1)){
html += '&nbsp;<span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}
if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){
if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}
html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}
if(postNum==1) postNum++;
html += '</div>';
if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");
if(postNum <= 2){
html ='';
}
for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}
if(pageArea&&pageArea.length>0){
html ='';
}
if(blogPager){
blogPager.innerHTML = html;
}
}
}
</script>
<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script><a href='http://master-blog-ayiek.blogspot.com' target='_blank'>..</a>

Kemudian masukkan code script diatas dengan cara anda menambahkan gadget baru / add a gadget dan pilih lagi yang HTML/Javascript dan pastekan code scriptnya distu dan tekan tombol SAVE /SIMPAN ..
Oke dech.. sekarang anda punya blog yang berstyle site search... moga aja membantu dan ga bingung yah.. kalo masih bingung mengenai diatas silahkan tingalkan pesan di kotak komentar dibawah ini.. moga aja saya bisa membantu..
selamat mencoba dan sukses..

Posted by ayiek

Tweet