Cara Mengganti Older Post dengan Angka di Blog

Cara Mengganti Older Post dengan Angka Sederhana untuk para Pemula 

Secara umum, navigasi untuk pindah halaman di blogspot biasanya menggunakan link dengan teks "Older Posts (posting lama)" dan "Newr Posts (posting baru)". Beda dengan wordpress yang navigasinya bisa berbentuk angka sehingga bisa memudahkan untuk loncat beberapa halaman ke postingan yang lama maupun baru.


Sebelum diganti dengan angka seperti gambar di bawah ini

Nah kali ini saya akan menjelaskan bagaimana cara mengganti link "Older Posts (posting lama)" dan "Newer Posts (posting baru)" menjadi angka seperti gambar di bawah ini.

Lakukanlah langkah-langkah berikut ini:

1. Login ke blogger sobat

2. Masuk ke menu template dan pilih Edit HTML

3. Copy kode script dibawah ini lalu paste di atas kode ]]></b:skin>
 

.showpageArea a { text-decoration:underline; } .showpageNum a { text-decoration:none; border: 1px solid #cccccc; margin:0 3px; padding:3px; } .showpageNum a:hover { border: 1px solid #cccccc; background-color:#cccccc; } .showpagePoint { color:#333; text-decoration:none; border: 1px solid #cccccc; background: #cccccc; margin:0 3px; padding:3px; } .showpageOf { text-decoration:none; padding:3px; margin: 0 3px 0 0; } .showpage a { text-decoration:none; border: 1px solid #cccccc; padding:3px; } .showpage a:hover { text-decoration:none; } .showpageNum a:link,.showpage a:link { text-decoration:none; color:#333333; }

3. Copy kode script dibawah ini lalu paste di atas kode </body>.

<!--Page Navigation Starts--> <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <script type='text/javascript'> var pageCount=5; var displayPageNum=5; var upPageWord ='Previous'; var downPageWord ='Next'; </script> <script src='http://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/> </b:if> </b:if> <!--Page Navigation Ends -->

Yang di atas adalah contoh sederhana tentang Cara Mengganti Older Post Dengan Angka , selanjutnya bisa sobat kembangkan sendiri menurut keinginan sobat.
Demikianlah postingan saya kali ini tentang Cara Mengganti Older Post Dengan Angka... Semoga bermanfaat..

dikembangkan dari: http://vathflasz.blogspot.com

Read More

Cara Membuat Animasi Menu Drop Down di Blog

Hay sob, pada sebelumnya mengenai tips blogging saya sudah membahas Cara membuat 'You might also like' dengan Mudah di Blog, kali ini saya kembali share mengenai tips blogging tentang bagaimana cara untuk membuat animasi pada menu drop down serta langkah-langkah cara menerapkannya ke dalam blog. Untuk memasang menu navigasi drop down dengan efek animasi ke dalam blog langkahnya cukup mudah dan simple,sobat  hanya perlu menambahkan sedikit kode kedalam template dengan mengikuti petunjuk yang ada dibawah ini.

Oke.. langsung saja lakukan langkah-langkah berikut ini.

1. Login ke blogger sobat

2. Masuk ke menu template dan pilih Edit HTML

3. Copy kode berikut ini lalu paste di atas kode ]]></b:skin>

Klik show untuk melihat kode

#nav_menu { font:bold 13px verdana; height: 35px; list-style: none; padding: 0px; margin: 0px auto; background:#0091d6; } #nav_menu ul { left: -9999px; position: absolute; top: -9999px; z-index: 1; } #nav_menu li { border-right: 1px solid #111; display: block; float: left; height: 35px; position: relative; width: 105px; } #nav_menu li a { color: #fff; display: block; line-height: 35px; text-align: center; text-decoration: none; background-color:#0091d6; } #nav_menu li a:hover{ background-color:#222; } @-webkit-keyframes animation1 { 0% { -webkit-transform: scale(1); } 30% { -webkit-transform: scale(1.3); } 100% { -webkit-transform: scale(1); } } @-moz-keyframes animation1 { 0% { -moz-transform: scale(1); } 30% { -moz-transform: scale(1.3); } 100% { -moz-transform: scale(1); } } #nav_menu li > a:hover { -moz-animation-name: animation1; -moz-animation-duration: 0.0s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; -webkit-animation-name: animation1; -webkit-animation-duration: 0.0s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; } #nav_menu li:hover > a { z-index: 4; } #nav_menu li:hover ul.sub { padding: 0; left: 0; top: 35px; width: 200px; } #nav_menu ul li { background: none repeat scroll 0 0 #838383; opacity: 0; width: 100%; } #nav_menu ul li a{ text-align: left; padding-left: 10px; border-top: 1px solid #333; background:#222; } #nav_menu ul li a:hover{ background:#111; } @-webkit-keyframes animation2 { 0% { margin-left:185px; } 100% { margin-left:0px; opacity:1; } } @-moz-keyframes animation2 { 0% { margin-left:185px; } 100% { margin-left:0px; opacity:1; } } #nav_menu li:hover ul li { -moz-animation-name: animation2; -moz-animation-duration: 0.3s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: 1; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; -webkit-animation-name: animation2; -webkit-animation-duration: 0.3s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: 1; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; } #nav_menu li:hover ul li:nth-child(1) { -moz-animation-delay: 0; -webkit-animation-delay: 0; } #nav_menu li:hover ul li:nth-child(2) { -moz-animation-delay: 0.05s; -webkit-animation-delay: 0.05s; } #nav_menu li:hover ul li:nth-child(3) { -moz-animation-delay: 0.1s; -webkit-animation-delay: 0.1s; } #nav_menu li:hover ul li:nth-child(4) { -moz-animation-delay: 0.15s; -webkit-animation-delay: 0.15s; } #nav_menu li:hover ul li:nth-child(5) { -moz-animation-delay: 0.2s; -webkit-animation-delay: 0.2s; } #nav_menu li:hover ul li:nth-child(6) { -moz-animation-delay: 0.25s; -webkit-animation-delay: 0.25s; } #nav_menu li:hover ul li:nth-child(7) { -moz-animation-delay: 0.3s; -webkit-animation-delay: 0.3s; } #nav_menu li:hover ul li:nth-child(8) { -moz-animation-delay: 0.35s; -webkit-animation-delay: 0.35s; }   

4. Copy kode berikut ini lalu paste di atas kode <div class='main-outer'>

Klik show untuk melihat kode

<ul id="nav_menu">
<li><a expr:href="data:blog.homepageUrl" href="https://www.blogger.com/null">Home</a></li>
<li><a href="http://hilalhuda.blogspot.com/">Menu 1</a>
        <ul class="sub">
<li><a href="http://hilalhuda.blogspot.com/">Sub Menu 1</a></li>
<li><a href="http://hilalhuda.blogspot.com/">Sub Menu 2</a></li>
<li><a href="http://hilalhuda.blogspot.com/">Sub Menu 3</a></li>
<li><a href="http://hilalhuda.blogspot.com/">Sub Menu 4</a></li>
<li><a href="http://hilalhuda.blogspot.com/">Sub Menu 5</a></li>
<li><a href="http://hilalhuda.blogspot.com/">Sub Menu 6</a></li>
</ul>
</li>
<li><a href="http://hilalhuda.blogspot.com/">Menu 2</a>
        <ul class="sub">
<li><a href="http://hilalhuda.blogspot.com/">Sub Menu 1</a></li>
<li><a href="http://hilalhuda.blogspot.com/">Sub Menu 2</a></li>
<li><a href="http://hilalhuda.blogspot.com/">Sub Menu 3</a></li>
<li><a href="http://hilalhuda.blogspot.com/">Sub Menu 4</a></li>
<li><a href="http://hilalhuda.blogspot.com/">Sub Menu 5</a></li>
</ul>
</li>
<li><a href="http://hilalhuda.blogspot.com/">Menu 3</a>
        <ul class="sub">
<li><a href="http://hilalhuda.blogspot.com/">Sub Menu 1</a></li>
<li><a href="http://hilalhuda.blogspot.com/">Sub Menu 2</a></li>
<li><a href="http://hilalhuda.blogspot.com/">Sub Menu 3</a></li>
<li><a href="http://hilalhuda.blogspot.com/">Sub Menu 4</a></li>
</ul>
</li>
<li><a href="http://hilalhuda.blogspot.com/">Menu 4</a>
    </li>
</ul>

Keterangan:
- Ganti tulisan warna merah dengan label link pada blog sobat.
- Ganti tulisan warna biru dengan nama judul group dari label sobat.
   untuk Sub Menu 1 dst diganti dengan nama label sobat.

5. Langkah terakhir klik Simpan Template. Selesai.

Klik disini untuk melihat demo.

Demikian tutorial untuk Cara Membuat Animasi Menu Drop Down di Blog, apabila ingin merubah misal pada warna atau font maupun lainnya silahkan bisa di custom sendiri.

Read More

Cara Membuat 'You might also like' dibawah Postingan dengan Mudah

Cara Membuat You might also like atau Artikel Terkait dengan Thumbnail/Gambar dibawah Postingan pada Blog dengan Mudah

Tulisan ini akan menjadi postingan pertama yang berlabel Tips Blogging. Kali ini saya akan membahas seputar tips blog yaitu Cara Membuat You Might Also Like atau Artikel Terkait dengan Thumbnail/gambar yang ada di bawah postingan pada blogspot. Mungkin kamu sering melihatnya ketika sedang berkunjung ke situs blog, pada suatu postingan dibawahnya ada 'You Might Also Like:' dan kamu ingin menerapkannya di blog sobat, maka saya akan beritahu caranya. Caranya mudah sekali. Silahkan disimak langkah-langkah berikut ini: 

1. Pertama-tama sobat masuk dulu ke situs ini : http://www.linkwithin.com

2. Kalau sudah masuk maka tampilan akan seperti dibawah ini.

3. Kemudian isi data-data yang diperlukan pada form yang telah disediakan.
      
         Email       :   Isi dengan email sobat
         Blog Link :  Alamat blog dimana sobat memasang widget related post with thumbnail  
         Platform   :  pilih 'Other' 
         Width       :  pilih jumlah related post yang mau ditampilkan

    Beri centang pada kotak kecil jika sobat menggunakan background template yang gelap.

4. Klik  Get Widget

5. Copy dan paste kode yang diberikan. letakkan kode script tersebut diatas kode </body> pada template blog sobat  lalu save template dan selesai. Semoga berhasil.
   

Read More