Membuat Tombol Next Page Pada Blog

Membuat tombol next page pada blog, yang mana tombol ini berfungsi buat mengarahkan para pengunjung untuk melihat halaman demi halaman yang berada pada blog kita berdasarkan angka yang tertera dalam tombol tersebut.
Artikel ini diperuntukkan buat blog-blog yang memang templatenya belum memiliki tombol next page

Bila anda masih bingung juga seperti apakah tampilannya, silahkan anda lihat gambar seperti yang ada dibawah ini.

Bagaimana...sudah jelaskah gambarnya...? apabila sudah jelas, kini kita akan mulai ke cara pembuatannya. Silahkan ikuti panduannya ya...

• Masuk ke akun blogger anda. ( ingat blog anda...bukan blog orang lain...! )

• Pada  tampilan Dashboard klik Design kemudian klik Edit HTML

• Untuk menjaga hal-hal yang tidak diinginkan saya sarankan backup dulu template blog anda dengan mengklik Download Full Template.

• Centang kotak kecil yang bertuliskan Expand Template Widged.

• Silahkan anda cari kode ]]></b:skin>

• Copy kode yang ada dibawah ini kemudian 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;}

• Kemudian cari kode </body>

• Copy kode yang ada dibawah ini dan paste kan diatas kode </body>

<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord=&#39;Previous&#39;;
var downPageWord=&#39;Next&#39;;
</script>
<script src='http://marbun.googlecode.com/files/scriptsnext.js' type='text/javascript'/>

• Dan terakhir silahkan Save Template anda.

silahkan anda mencobanya.

READMORE....!!

MEMBUAT KOTAK POSTING TERPISAH

Membuat kotak posting terpisah sebagian banyak yang menyukai, karena kelihatan lebih rapi disamping dapat mengatur border warna yang lebih menarik kemudian dikombinasikan dengan warna background membuat kolom post lebih cerah.
Kali ini saya mencoba untuk berbagi informasi, bagaimana membuat kotak posting terpisah-pisah disetiap judul dengan cara 2 pilihan :

1. Kotak Posting terpisah dengan bentuk garis kotak
   
   1. Login ke"Blogger" dengan user ID Anda
   2. Pilih "Tata Letak"
   3. Pilih "Edit HTML"
   4. Cari Kode berikut .post {
   5. Copy "kode dibawah" ini dan letakan dibawah kode tersebut
      
      
      
      
      Padding:10px; /* Jarak text post dengan garis pinggir */
      Border-top: 2px solid #D8D8D8; /* warna garis pinggir atas */
      Border-bottom: 2px solid #D8D8D8; /* warna garis pinggir bawah */
      Border-left: 2px solid #D8D8D8; /* warna garis pinggir kiri */
      Border-right: 2px solid #D8D8D8; /* warna garis pinggir kanan */
      Margin-bottom: 30px; /* jarak antara post yang satu dengan yang lainnya */
      
      
   6. Simpan Template
   
   
   Contoh kotak posting terpisah garis lurus
   
   
   KOTAK POSTING I bentuk garis kotak
   
   
   KOTAK POSTING II bentuk garis kotak
   
   
   
   
2. Kotak Posting terpisah dengan garis melengkung disetiap sudut

1. Login ke Blogger dengan user ID Anda
2. Pilih Tata Letak
3. Pilih Edit HTML
4. Cari kode h2.date-header {
5. Letakan kode dibawah ini tepat dibawah kode tersebut
   
   
   border-left:3px solid #A9D0F5;
   border-right:3px solid #A9D0F5;
   border-top:3px solid #A9D0F5;
   border-bottom:0px solid #A9D0F5;
   -moz-border-radius-topleft:15px;
   -moz-border-radius-topright:15px;
   
   
   
6. Kemudian Anda cari kode .post-body {
7. Letakan kode dibawah ini tepat dibawah kode tersebut
   
   
   
   border-right:3px solid #A9D0F5;
   border-left:3px solid #A9D0F5;
   
   
8. Berikutnya cari kode .post-footer {
9. Letakan kode dibawah ini tepat dibawah kode tersebut
   
   
   
   border-left:3px solid #A9D0F5;
   border-right:3px solid #A9D0F5;
   border-top:0px solid #A9D0F5;
   border-bottom:3px solid #A9D0F5;
   -moz-border-radius-bottomleft:15px;
   -moz-border-radius-bottomright:15px;
   
   
10. Simpan Template

READMORE....!!

Cara Membuat Daftar Isi Blog di Halaman Posting

Sebelumnya saya jelaskan Daftar isi atau sitmap berfungsi untuk membantu para pengunjung/visitor agar mereka tidak kesulitan dalam mencari artikel yang mereka butuhkan pada blog kita. Salah satunya dengan car membuat daftar isi blog di halaman posting. Di halamn posting, kenapa?? karena cara ini sangat berguna sekali bagi para blogger yang tidak ingin menampilkan daftar isi blog mereka di sidebar Beranda. Apalagi kalau artikel blog mereka yang sudah banyak sekali dalam satu bulan misalnya mereka memposting ratusan artikel, hehe pasti akan kelihatan panjang sekali di halaman sidebar berandanya. Untuk melihat demonya kalian bisa klik . Kalian sudah mengerti kan apa yang saya maksud.

Silahkan ikuti langkah-langkah cara membuat daftar isi atau sitemap blog berikut ini.

Cara membuat daftar isi Blog pertama

• Buatlah sebuah posting kosong/page kosong/entri baru dengan judul "Daftar Isi" atau "Sitmap" atau "Archive Blog". Terserah kalian sesuai keinginan.
• Copy kode dibawah ini kemudian paste pada postingan tersebut ( paste kodenya pada posisi Edit HTML, bukan Compose )

<script src="http://sakawku.googlecode.com/files/sakawku.blogspot.com-sitmap.js"></script><script src="http://URL-BLOG-KALIAN/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

• Pada post option jangan ijinkan komentar, agar halaman ini tidak dipenuhi komentar sehingga membuat berat blog kalian.
• Jangan lupa ganti URL-BLOG-KALIAN dengan alamat/url blog kalian
• Ok sekarang publish post dan selesai.

Cara membuat daftar isi Blog kedua

• Caranya sama seperti yang pertama, bedanya hanya pada kode javascript yang di gunakan. Gunakan kode berikut.

<script src="http://sakawku.googlecode.com/files/sakawku.blogspot.com-sitemaptag.js"></script><script src="http://URL-BLOG-KALIAN/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

• Pada post option jangan ijinkan komentar, agar halaman ini tidak dipenuhi komentar sehingga membuat berat blog kalian.
• Jangan lupa ganti URL-BLOG-KALIAN dengan alamat/url blog kalian
• Publish post dan lihat hasilnya.

 Jadi bedanya antara cara pertama dan kedua yaitu pada hasil daftar isi/archive/sitmap. Kalau yang pertama mengurutkan daftar isi sesuia archive per bulan. Sedangkan hasil dari cara kedua, daftar isi/archive/sitmap yang tampil di urutkan bedasarkan label atau category. Untuk yang kedua juga ada tambahan notice, New!! apabila posting itu masih baru. Sekarang kallian sudah bisa membuat daftar isi blog sendiri.

READMORE....!!

Membuat Tombol Home Next Dan Previous Di Blog

Jadi begini Sobat,untuk cara Membuat Tombol Home Next Dan Previous Di Blog tidak semua template bisa di buat tumbol tersebut,karna saya sudah mencoba beberapa kali tapi memang tidak bisa,bukan saya tidak bisa membuat nya,karna memang template nya yg tidak bisa di buat tombol tersebut,tapi mudah-mudahan template sobat bisa di buat tombol Home Next Dan Previous.



Ya udah,, kali ini langsung aja ,,

Caranya ,, Seperti biasa ,,

1. Masuk (login) ke blogger

2. Klik tata letak > edit HTML

3. Sekarang saatnya kita mencari cari sampah,, lho .. ?

4. Untuk mengganti tulisan "next page /posting baru" dengan gambar,,
    Cari dan ganti kode <data:newerpagetitle> dengan <img src="terserah" alt="Next" />

5. Untuk mengganti tulisan "previous page /posting lama" dengan gambar,,
    Cari dan ganti kode <data:olderpagetitle> dengan <img src="terserah" alt="Prev" />

6. Untuk mengganti tulisan "home" dengan gambar,,
    Cari dan ganti kode <data:homemsg> dengan <img src="terserah" alt="home" />
    #Catatan : biasanya, ada dua kode <data:homemsg> .. Pilih yang paling atas aja ,,
    #Catatan : ganti kode terserah dengan alamat gambarnya ,,

Contohnya :
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2BrJnz0d8uZqycSZp3Vfu9Yx_0BJq4afpPfzQqlkslXClv-bQxOOS4nekjrpu_uDzF9cPyC9PhvxTkXEjkUAU9mLWtPNgVoMenstc9KR-WXnyMmUdIiQhre9jaN6vuBxNyns_HgY-TlGy/s400/ikon+ku.png" alt="home" />

Keterangan
Contoh di atas yg berwarna biru merupakan Link gambar sobat,sobat bisa meng Upload dahulu gambar nya,lalu link gambar nya sobat copy dan paste di pereti contoh di atas yang berwarna biru.
sedangkan untuk yang berwarna merah,itu merupakan Teks,sobat bisa ganti sesuai keinginan sobat.

Kalau sobat tidak punya atau nggak sempat nyiapin gambarnya saya sudah menyiap kan dan bisa sobat download di sini

Mungkin hanya itu saja Info dari saya, mengenai Membuat Tombol Home Next Dan Previous Di Blog semoga bermanfaat.
Selamat Eksperimen

READMORE....!!

Widget Search Box Keren untuk Blog

Widget search box untuk membantu pengunjung menemukan apa yang mereka cari pada blog kita. Dan tentunya ini sangat berguna. Selain itu 99,99% para blogger memasang widget Search box pada blog mereka.

Langsung aja gan :
Cara memasang widget search box di blogger
Login ke Blogger > Edit HTML > Add Element baru > HTML atau Javascript
Copy salah satu kode dari 6 widget search box keren di bawah ini dan paste pada element baru tadi :

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlY7tqazI2TJLF3j3YElv1BMUUQ-8rjGuJ9cSm19Dlq2xHb8Jv6BHVifQe3ADNHmOv46Y6NCsRPbNUm0SMkdFPKL5cc2wzJGJinIenr7m5h9RGEfMwV1nkoqMrWJuLC8SeuZbsoIhfV2v8/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidI0NFgwaNRHQ2xBVP3PPK9XUxQVNu5VhQ7xGSW4QedXVlk2dOjOQmMTQ-U8ZQ0cws-P6irHLb2_lBNMDk4cw7kVoIytuUKnDlz68OObOriUIGxmdvDZLCLhyGH8Aumug-MKyVPL_Je1dg/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQoDnT3qOftHWTrk0nTLOpyEFnSdtf_tpj_tlD078XcUlAM6LvjYRfBm2tX6iUErZei9GTl6pP7Yiru7iUj8pK2W1ZQo0u-JKImwhuklRfiX3-dhK5eFL_M3B5_eaNrrgjILstFvmQizNU/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6DgYwO5H2CZuXZxI1VTBPvlxqM5h5f3NvPhOSU_2gswvIhMp_kKBXS9MNCOyQTaNUh3jD191K9zOJ3Y4wjG92LwsA9CzgGAuJYElD2_U0INNhOFYAD3MmJQGcGs7IVYzEaYr8h_VYbvDj/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value=""/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY9ueLJe1fZBpBL1t1AAE7Q8Pmf8eNcnq2wkCMzLiv2rHpd0qE22EKuI35yvrQmoCSMz5dpdnyZ-BHZf9M8iZ05yv0bvOzFtNkJbRV1Ax_ygO1WnBh8Atj9RaRjBPd1ecuXdX6or5UG1VC/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value=""/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLU7Q6U4JsCyHjbhyphenhyphenQ8EtF3erE5aiXrroUnOtfC3hNt9KNHbEkNLO4I2osaqqb8fbaMHxaNFJpvJiQHDzd9c8iViZawgzn4aHFGQym0cxRdefhyphenhyphen1YqzoNzyeRau5EfvBgBksN045LqwvdT/) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value=""/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Silahkan sesuaikan tampilan widget tersebut dengan tampilan blog agan, kemudian pilih simpan.
Selamat mencoba, semoga berhasil !!

READMORE....!!

Cara Membuat Menu Tab Sesuai Label

Cara Membuat Menu Tab/Laman Blog Sesuai Label
Dalam Panduan Blogspot kali ini kita akan membahas tentang Cara membuat menu tab/laman blog sesuai label.Salah satu sahabat blog AKC bertanya tentang bagaimana cara membuat menu tab seperti menu Software Gratis di blog AKC ini.Dengan membuat menu tab-laman blog sesuai dengan label postingan blog kita,dapat mengirit waktu kita karena kita tidak perlu lagi membuat postingan di dalam menu tab blog kita.
Karena dengan membuat menu tab sesuai dengan label postingan,maka setiap postingan kita yang mempunyai label akan secara otomatis muncul di menu tab tersebut.

Contohnya bisa sobat lihat dengan cara mengklik menu tab Games yang berada di atas blog saya ini.Pada halaman tersebut postingan yang tampil hanyalah postingan blog saya yang berlabel Games .Cara membuatnya juga tidaklah terlalu sulit,sobat hanya membutuhkan beberapa menit saja untuk membuatnya.Dan pastikan setiap postingan blog sobat mempunyai label.Ayo langsung saja kita praktekan

Cara Membuat Menu Tab/Laman Blog Sesuai Label

1.Login ke akun Blogger Sobat
2.Klik Menu Laman

3.Kemudian klik Laman Baru Lalu klik Alamat Web

4.Setelah itu masukan judul menu sobat pada form yang di atas dan masukan url label blog sobat pada form Alamat Web (URL).Contoh Url label http://warnet-palapa.blogspot.com/search/label/GamesLabel Postingan Sobat.
Contoh :http://warnet-palapa.blogspot.com/search/label/Games
Alamat tersebut adalah alamat postingan saya yang berlabel Download Software Gratis.

5.Klik SIMPAN
6.Selesai

Coba sobat Lihat hasilnya,jika ada pertanyaan silahkan sobat tulis saja di kotak komentar.Semoga postingan saya tentang Cara Membuat Menu Tab/Laman Blog Sesuai Label dapat bermanfaat.

READMORE....!!

Cara Membuat Label di Blog

Cara Membuat Label di Blog merupakan tutorial dasar dalam blogger, namun ini merupakan hal penting untuk perkembangan blog kedepannya. Jika dijelaskan menurut kepentingannya sama halnya dengan sebuah buku, yang memiliki judul, daftar isi dan sub daftar isi yang membedakan antara pembahasan yang satu dengan yang lainnya. Jika dalam sebuah buku itu tidak memiliki sub-sub didalamnya maka daftar kategori akan bercampur aduk, carut-marut dan tidak menentu.

Begitu juga dengan sebuah web/blog, yang kita ibaratkan saja dengan buku, jika tidak memiliki label blog akan carut-marut tidak menentu. Disamping itu label dalam sebuah blog dapat diklasifikasikan sesuai dengan keinginan anda, misalnya label kesehatan, anda harus menyesuaikan postingan dengan label yang nantinya ingin anda masukkan. Kalau postingan anda mengenai bahaya merokok idealnya anda harus memasukkannya kedalam label kesehat.

Membuat label blog tidaklah sulit, anda cukup memperhatikan langkah-langkah yang akan saya jelaskan dibawah ini, sembari mempraktekannya kedalam blog Anda.

1. Sig in ke akun blogger Anda
2. Klik menu Layout
3. Klik menu Elemen Halaman
4. Klik tulisan Tambahkan sebuah Elemen Halaman
5. Klik tombol yang bertuliskan tambahkan ke blog yang berada di bawah tulisan Label
6. Tulisan Labels di samping tulisan Judul bisa sobat rubah menjadi Kategori jika sobat mau merubahnya
7. Pilih radio button yang sobat inginkan di samping tulisan Menyortir, Alfabetik : jika kategori ingin di tampilkan sesuai dengan abjad alfabetik ( dari A –> Z ), Berdasarkan Frekuensi : jika kategori ingin ditampilkan sesuai dengan banyaknya label (kategori)
8. Klik tombol yang bertuliskan simpan perubahan
9. Selesai.

Lihat gambar dibawah ini :

Demikianlah cara membuat label di blog, semoga bermanfaat, Happy Blogging..

READMORE....!!

Cara Mudah Membuat Kotak Komentar Facebook di Blogger

 Banyak banget tutorial cara memasang kotak komentar facebook di blogspot, namun ada beberapa cara yang kita coba dengan hasil gagal, ada juga yang ribet banget.
tapi kali ini kita coba membuat kotak komentar facebook di blog dengan tutorial yang gampang banget..




 

Berikut tutorialnya

• Masuk ke akun blogger
• Pilih desain selanjutnya pilih edit html 
• Jangan lupa centang Expand Template Widget
• Sekarang cari kode <b:includable id='status-message'> dan diatas kode tersebut agan akan menemukan kode ini </b:includable> 
• Copy kode dibawah ini   

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<p align='left'><a href='http://aneukcabak.blogspot.com/2012/04/cara-mudah-membuat-kotak-komentar.html' target='new'><img border='0' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhT_wMHB76oESwD8_vHOUkHrXfVeGisHnnnjYgtUQOi_D0wZPmUbL6aSbXSWwKJRrg9rMv78PGGKgml2KB_dblKI5-fwBFmGecpAR43p6oNSMBO8dkYUN38rL8Ij8Giek6JwSP_pRg8_CE/s1600/comment.gif' width='200'/></a></p>

<div id='fb-root'/>

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>

<fb:comments expr:href='data:post.url' num_posts='5' width='500'/>

</b:if>

• Letakkan kode tersebut diatas kode </b:includable> 

Perhatikan kode yang berwarna biru (500), itu ukuran lebar kotak comment fb anda. gantikan kode tersebut menurut templates blogger anda.

• Dan yang terakhir jangan lupa disimpan

 

READMORE....!!