;

Menambahkan Navigasi dengan Nomor Pada Halaman Template Blog

Senin, Oktober 31, 2011 | Diposting oleh Unknown | | Edit Entri
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__

Related Posts Plugin for WordPress, Blogger...
Label:

5 comments

Reply
SailorMan
1 November 2011 pukul 00.16

sangat bermanfaat sobat..makasihh

Reply
Unknown
2 November 2011 pukul 14.50

@SailorManSilahkan mencoba sob...

Reply
asror
23 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

Reply
Unknown
23 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

Reply
Unknown
27 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

Posting Komentar

English French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified

Popular Posts

Postingan Terbaru

Diberdayakan oleh Blogger.

Blogger Template created with Artisteer.

Social Bookmarking