Pages

▼

Menambahkan Navigasi dengan Nomor Pada Halaman Template Blog

Hallo semua .....!!!  Pada kesempatan ini saya akan membagikan sebuah trik sederhana tentang bagaimana menambahkan halaman navigasi bar dengan nomor untuk template blogspot. Saya akan membagikan trik yang paling sederhana disini.

Ikuti langkah-langkah ini:

1. Login ke Dasbor--->Desain--->Edit HTML

2. Centang "Expand Template Widget"

3. Gunakan (Ctrl + F) dan cari kode ]]></b:skin>

4. Copy dan paste kode berikut diatas kode ]]></b:skin>
.showpageArea {
font-family:verdana,arial,helvetica;
color: #000;
font-size:11px;
margin:10px;
}
.showpageArea a {
color: #000;
text-shadow:0 1px 2px #fff;
font-weight: 700;
}
.showpageNum a {
padding: 3px 8px;
margin:0 4px;
text-decoration: none;
border:1px solid #999;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #ddd url(http://i1198.photobucket.com/albums/aa453/Lustysae/wp1.jpg) 0 -50px repeat-x;
}
.showpageNum a:hover {
border:1px solid #888;
background: #ccc url(http://i1198.photobucket.com/albums/aa453/Lustysae/wp1.jpg) 0 -25px repeat-x;
}
.showpageOf{
margin:0 8px 0 0;
}
.showpagePoint {
color:#fff;
text-shadow:0 1px 2px #333;
padding: 3px 8px;
margin: 2px;
font-weight: 700;
-webkit-border-radius:3px;-moz-border-radius:3px;
border:1px solid #999;
background: #666 url(http://i1198.photobucket.com/albums/aa453/Lustysae/wp1.jpg) 0 0 repeat-x;
text-decoration: none;

5. Selanjutnya cari kode seperti ini:
</b:section>
      
        </div>  
</div>
    <div class='cleared'/>
  
        </div>
    </div>
    <div id='footer-wrapper'>
        <b:section class='footer' id='footer'/>
          atau

</b:section>
</div>
</div>
<div class='footer-cap-bottom cap-bottom'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
</div>
</footer>
    
      Copy dan paste kode-kode berikut diantara </b:section> dan </div> :

<script type='text/javascript'>

var home_page_url = location.href;


var pageCount=7;
  var displayPageNum=9;
  var upPageWord =&#39;Previous&#39;;
  var downPageWord =&#39;Next&#39;;


function showpageCount(json) {
  var thisUrl = home_page_url;
  var htmlMap = new Array();
  var thisNum = 1;
  var postNum=1;
  var itemCount = 0;
  var fFlag = 0;
  var eFlag = 0;
  var html= &#39;&#39;;
  var upPageHtml =&#39;&#39;;
  var downPageHtml =&#39;&#39;;





for(var i=0, post; post = json.feed.entry[i]; i++) {

 var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
  timestamp = encodeURIComponent(timestamp1);


  var title = post.title.$t;

 if(title!=&#39;&#39;){
  if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
  if(thisUrl.indexOf(timestamp)!=-1 ){
  thisNum = postNum;
  }

  if(title!=&#39;&#39;) postNum++;
  htmlMap[htmlMap.length] = &#39;/search?updated-max=&#39;+timestamp+&#39;&amp;max-results=&#39;+pageCount;
  }
  }
  itemCount++;

  }

  for(var p =0;p&lt; htmlMap.length;p++){
  if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
  if(fFlag ==0 &amp;&amp; p == thisNum-2){
  if(thisNum==2){
  upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
  }else{
  upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
  }

  fFlag++;
  }

  if(p==(thisNum-1)){
  html += &#39;&lt;span class=&quot;showpagePoint&quot;&gt;&#39;+thisNum+&#39;&lt;/span&gt;&#39;;
  }else{
  if(p==0){
  html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/&quot;&gt;1&lt;/a&gt;&lt;/span&gt;&#39;;

 }else{
  html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ (p+1) +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
  }
  }

  if(eFlag ==0 &amp;&amp; p == thisNum){
  downPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ downPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
  eFlag++;
  }
  }
  }

  if(thisNum&gt;1){
  html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
  }

  html = &#39;&lt;div class=&quot;showpageArea&quot;&gt;&lt;span style=&quot;COLOR: #000;&quot; class=&quot;showpageOf&quot;&gt; Pages (&#39;+(postNum-1)+&#39;)&lt;/span&gt;&#39;+html;

  if(thisNum&lt;(postNum-1)){
  html += downPageHtml;
  }

  if(postNum==1) postNum++;
  html += &#39;&lt;/div&gt;&#39;;


var pageArea = document.getElementsByName(&quot;pageArea&quot;);
  var blogPager = document.getElementById(&quot;blog-pager&quot;);

if(postNum &lt;= 2){
  html =&#39;&#39;;
  }

for(var p =0;p&lt; pageArea.length;p++){
  pageArea[p].innerHTML = html;
  }

if(pageArea&amp;&amp;pageArea.length&gt;0){
  html =&#39;&#39;;
  }

if(blogPager){
  blogPager.innerHTML = html;
  }


}


function showpageCount2(json) {

var thisUrl = home_page_url;
  var htmlMap = new Array();
  var isLablePage = thisUrl.indexOf(&quot;/search/label/&quot;)!=-1;
  var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.length) : &quot;&quot;;
  thisLable = thisLable.indexOf(&quot;?&quot;)!=-1 ? thisLable.substr(0,thisLable.indexOf(&quot;?&quot;)) : thisLable;
  var thisNum = 1;
  var postNum=1;
  var itemCount = 0;
  var fFlag = 0;
  var eFlag = 0;
  var html= &#39;&#39;;
  var upPageHtml =&#39;&#39;;
  var downPageHtml =&#39;&#39;;



var labelHtml = &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/search/label/&#39;+thisLable+&#39;?&amp;max-results=&#39;+pageCount+&#39;&quot;&gt;&#39;;
  var thisUrl = home_page_url;


for(var i=0, post; post = json.feed.entry[i]; i++) {

 var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
  timestamp = encodeURIComponent(timestamp1);



  var title = post.title.$t;

 if(title!=&#39;&#39;){
  if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
  if(thisUrl.indexOf(timestamp)!=-1 ){
  thisNum = postNum;
  }

  if(title!=&#39;&#39;) postNum++;
  htmlMap[htmlMap.length] = &#39;/search/label/&#39;+thisLable+&#39;?updated-max=&#39;+timestamp+&#39;&amp;max-results=&#39;+pageCount;

  }
  }
  itemCount++;
  }

  for(var p =0;p&lt; htmlMap.length;p++){
  if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
  if(fFlag ==0 &amp;&amp; p == thisNum-2){
  if(thisNum==2){
  upPageHtml = labelHtml + upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
  }else{
  upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
  }

  fFlag++;
  }

  if(p==(thisNum-1)){
  html += &#39;&lt;span class=&quot;showpagePoint&quot;&gt;&#39;+thisNum+&#39;&lt;/span&gt;&#39;;
  }else{
  if(p==0){
  html = labelHtml+&#39;1&lt;/a&gt;&lt;/span&gt;&#39;;
  }else{
  html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ (p+1) +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
  }
  }

  if(eFlag ==0 &amp;&amp; p == thisNum){
  downPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ downPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
  eFlag++;
  }
  }
  }

  if(thisNum&gt;1){
  if(!isLablePage){
  html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
  }else{
  html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
  }
  }

  html = &#39;&lt;div class=&quot;showpageArea&quot;&gt;&lt;span style=&quot;COLOR: #000;&quot; class=&quot;showpageOf&quot;&gt; Pages (&#39;+(postNum-1)+&#39;)&lt;/span&gt;&#39;+html;

  if(thisNum&lt;(postNum-1)){
  html += downPageHtml;
  }

  if(postNum==1) postNum++;
  html += &#39;&lt;/div&gt;&#39;;

  var pageArea = document.getElementsByName(&quot;pageArea&quot;);
  var blogPager = document.getElementById(&quot;blog-pager&quot;);

if(postNum &lt;= 2){
  html =&#39;&#39;;
  }

for(var p =0;p&lt; pageArea.length;p++){
  pageArea[p].innerHTML = html;
  }

if(pageArea&amp;&amp;pageArea.length&gt;0){
  html =&#39;&#39;;
  }

if(blogPager){
  blogPager.innerHTML = html;
  }


}


</script>

<script type='text/javascript'>

 var thisUrl = home_page_url;
  if (thisUrl.indexOf(&quot;/search/label/&quot;)!=-1){
  if (thisUrl.indexOf(&quot;?updated-max&quot;)!=-1){
  var lblname1 = thisUrl.substring(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.indexOf(&quot;?updated-max&quot;));
  }else{
  var lblname1 = thisUrl.substring(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.indexOf(&quot;?&amp;max&quot;));
  }
  }

 var home_page = &quot;/&quot;;
  if (thisUrl.indexOf(&quot;?q=&quot;)==-1 &amp;&amp; thisUrl.indexOf(&quot;.html&quot;)==-1){
  if (thisUrl.indexOf(&quot;/search/label/&quot;)==-1){
  document.write(&#39;&lt;script src=&quot;&#39;+home_page+&#39;feeds/posts/summary?alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999&quot; &gt;&lt;\/script&gt;&#39;)
  }else{document.write(&#39;&lt;script src=&quot;&#39;+home_page+&#39;feeds/posts/full/-/&#39;+lblname1+&#39;?alt=json-in-script&amp;callback=showpageCount2&amp;max-results=99999&quot; &gt;&lt;\/script&gt;&#39;)
  }
  }
  </script>

Ubah nilai var pageCount=7; dengan jumlah postingan yang akan tampil pada halaman. Jumlah ini harus sesuai dengan pengaturan awal blog anda.

6. Save template dan lihat perubahan pada blog anda.

Semoga  Bermanfaat__

5 komentar:

  1. SailorMan1 November 2011 pukul 00.16

    sangat bermanfaat sobat..makasihh

    BalasHapus
  2. Unknown2 November 2011 pukul 14.50

    @SailorManSilahkan mencoba sob...

    BalasHapus
  3. asror23 September 2012 pukul 09.21

    gan w kn abis ngedit kotak komentar yah? nah pas dh berhasilkok kotak komentar y malah jadi ada tiga bro.. gimana donk :( help meee

    BalasHapus
  4. Unknown23 September 2012 pukul 17.06

    @Mustaghfiri Asror
    Hallo sobat,
    Coba sobat edit ulang saja. Kalo bisa gunakan trik/tips ini:>Menambahkan Style Unik untuk Kotak Komentar

    Trims

    BalasHapus
  5. Unknown27 Desember 2012 pukul 01.49

    @ayobaidotcom sosmed ayo bangkit indonesia
    makasi atas kunjunganya. maaf telat balas. hehe

    Tentang share sosial media uda saya posting. Lihat saja disini sobat--->>
    Memasang Widget Tombol Share Sosial Media di Blog

    Trims

    BalasHapus