KTC PARTY BLOGGER

Wednesday, April 16, 2014

Menampilkan Navigasi Halaman Pada Pencarian Label

Sebelumnya Saya berbagi artikel tentang Memasang Navigasi Halaman Pada Blog. Namun setelah dicoba pada pencarian label navigasi halaman ini tidak muncul atau tidak berfungsi. Cara mengatasi masalah ini Saya dapat saat membaca artikel +Leony Li pada artikel berjudul Mengfungsikan Page Navigator Saat Label Diklik. Untuk mengatasi masalah tersebut silakan baca artikel ini. Selidik punya selidik penyebab masalah tersebut muncul pada kode dibawah ini.

?updated-max=2013-07-19T15:51:00%2B07:00&max-results=9

Cara Mengatasinya

Misalkan pada link berikut ini.

http://kang-mousir.blogspot.com/search/label/Tutorial%20Blogger?max-results=5

Anda tinggal menambahkan kode &. Karena menambahkan kode tersebut ada masalah pada Validasi HTML5, maka tambahkan amp; dibelakangnya atau baca juga artikel Saya berjudul Cara Mengatasi Error Ampersand Pada Validasi HTML5. Sehingga menjadi kode dibawah ini.

http://kang-mousir.blogspot.com/search/label/Tutorial%20Blogger?&amp;amp;max-results=5

Cara ini bisa digunakan pada link untuk menu atau yang lainnya.

Memasang Navigasi Halaman Pada Blog

Navigasi halaman adalah suatu daftar halaman pada blog dengan nomor - nomor halaman. Dengan memasang navigasi halaman tentunya akan memudahkan pengunjung dalam menjelajahi blog Anda.

Langkah Pertama

Simpan kode CSS dibawah ini diatas kode </head>..

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style type="text/css">
.showpageNum a,.showpage a,.showpagePoint{margin-top:10px;margin-bottom:20px;background:#f35d5c;border:none;margin-left:5px;color:#FFF;font-size:15px;font-family:'Arial';font-weight:700;transition:all 0.3s ease-in-out;padding:10px 15px;box-shadow:0 1px 2px 0 rgba(0,0,0,0.1);}
.showpagePoint{background:#555;color:#fff;}
.showpageNum a:hover,.showpage a:hover{background:#555;color:#fff;}
</style>
</b:if>
</b:if>

Silakan Anda atur CSS nya untuk menyesuaikan dengan kebutuhan blog.

Langkah Kedua

Simpan kode dibawah ini diatas kode </body>.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=8;
var upPageWord =&#39;Prev &#39;;
var downPageWord =&#39; Next&#39;;
</script>
<script src='https://googledrive.com/host/0B8WEGGjyXlaMMWdabjB6Q3RhRjg/PageNavigation.js' type='text/javascript'></script>
</b:if>
</b:if>

Pengaturan

Opsi	Keterangan
`pageCount`	Jumlah per halaman
`displayPageNum`	Jumlah halaman yang ingin ditampilkan
`upPageWord`	Tombol sebelumnya
`downPageWord`	Tombol selanjutnya

Friday, April 11, 2014

Mas Sugeng 2014 Blogger Template

Demo

Download

Template yang sangat fenomenal buatan +Sugeng Riyadi ini mampu menghipnotis para blogger. Dengan kelebihan template ini yaitu SEO Friendly, banyak para blogger yang sudah membuktikan keampuhan template blogger yang satu ini.

Fitur Template

Custom Mobile
Auto Readmore
Breadcrumbs
SEO Ready
Dropdown Menu
Related Articles
Cool Threaded Comment
Social Share
and more.

BroSense Blogger Template

Demo

Download

Template minimalis buatan +Sugeng Riyadi ini sangat cocok bagi Anda yang memasang Google Adsense, karena template ini dikhususkan untuk itu. Walaupun template ini tidak responsive, tetapi template ini memiliki fitur mobile.

Fitur Template

Custom Mobile
Auto Readmore
Breadcrumbs
SEO Ready
Ads Ready
Related Articles
Cool Threaded Comment
Social Share
and more.

Pengaturan Template

1. Menu Navigasi
Untuk mengatur menu pada template ini, silakan cari kode dibawah ini dan edit oleh Anda.
Versi Mobile

<div id='mobile-nav'>
  <span><a expr:href='data:blog.homepageUrl'>Beranda</a></span> &#183; 
  <span><a href='#'>Teknologi</a></span> &#183; 
  <span><a href='#'>Olahraga</a></span> &#183; 
  <span><a href='#'>Entertainment</a></span> &#183; 
  <span><a href='#'>Gaya Hidup</a></span>
 </div>

Versi Desktop

 <nav id='nav'>
    <ul id='menu'>
      <li><a href="/">Home</a></li>
      <li><a href="#">Menu 1</a>
  <ul>
            <li><a href="#">Sub Menu 1</a></li>
            <li><a href="#">Sub Menu 2</a></li>
            <li><a href="#">Sub Menu 3</a></li>
        </ul>
      </li>
      <li><a href="#">Menu 2</a>
  <ul>
            <li><a href="#">Sub Menu 1</a>
    <ul>
     <li><a href="#">Sub Menu 1</a></li>
     <li><a href="#">Sub Menu 2</a></li>
     <li><a href="#">Sub Menu 3</a></li>
     <li><a href="#">Sub Menu 4</a></li>
     <li><a href="#">Sub Menu 5</a></li>
     <li><a href="#">Sub Menu 6</a></li>
    </ul>  
   </li>
            <li><a href="#">Sub Menu 2</a></li>
            <li><a href="#">Sub Menu 3</a></li>
        </ul>
      </li>
   <li><a href="#">Menu 4</a></li>
   <li><a href="#">Menu 5</a></li>
   <li><a href="/www.evotemplates.net">Error Page</a></li>
   <li><a href="/p/lorem-ipsum-dolor-sit-amet-consectetur.html">Static Page</a></li>
 </ul>
 
 <form id="search-form" action="/search" style="display: inline;" method="get"><input onfocus="if(this.value==this.defaultValue)this.value='';" value="Search..." type="text" id="search-box" onblur="if(this.value=='')this.value=this.defaultValue;" vinput="" name="q"/> <input id="search-button" value="Go" type="submit"/></form>
 
  </nav>

2. Iklan Dibawah Judul
Template Ini memliki iklan dua versi yaitu mobile dan desktop, untuk menggantinya silakan edit kode dibawah ini.
Versi Mobile

   <!-- iklan bawah judul versi mobile -->
   <a target='_blank' href='http://www.evotemplates.net'><img alt='blogger templates' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhslgG-5DJ_CNzcYl2oSoUWJxulG-ZiYaFPs2AHTeb6CAkbxbuFoDFW_yapi0JOQ2bD0Nsqx7vd48EQA6F2vdUo87YQF4631n9JyOEolQ-SxoYv23SXNUtP-QBG96DDQFXvZevw2ORJQt7t/s1600/bannernew.png'/></a>

Versi Desktop

   <!-- iklan bawah judul -->
  <a target='_blank' href='http://www.evotemplates.net'><img alt='blogger templates' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhslgG-5DJ_CNzcYl2oSoUWJxulG-ZiYaFPs2AHTeb6CAkbxbuFoDFW_yapi0JOQ2bD0Nsqx7vd48EQA6F2vdUo87YQF4631n9JyOEolQ-SxoYv23SXNUtP-QBG96DDQFXvZevw2ORJQt7t/s1600/bannernew.png'/></a>