Hallo teman-teman Blogger dan para pengunjung setia, Artikel Panduan Belajar Blog kali ini membahas tentang Cara Membuat Navigasi Halaman, dimana cara ini dilakukan adalah untuk memudahkan para pengunjung web/blog dalam melakukan pencarian suatu artikel dalam halaman-halaman di web/blog kita.
Tombol navigasi halaman ini sebetulnya hampir sama dengan tombol next atau previous pada web/blog Anda, bedanya adalah navigasi halaman ini bisa mengingatkan pengunjung akan tempat suatu artikel pada halaman ke berapa pada web/blog kita. Karena navigasi halaman akan menampilkan nomor per halaman web/blog kita, mungkin Anda pernah melihat contoh pada halaman bawah search engine di google, disana terlihat tombol navigasi halaman untuk pencarian keyword dihalaman-halaman selanjutnya.
Untuk mempersingkat waktu, berikut ini langkah-langkah dalam pembuatan tombol navigasi halaman :
- Login ke Blogger Anda.
- Klik Tata Letak, lalu klik Elemen Halaman.
- Lalu klik Tambah Gadget.
- Pilihlah Edit HTML/Javascript.
- Tambahkan kode berikut dibawah ini pada kotak kosong yang tersedia.
<style>
.showpageArea {padding: 0 2px;margin-top:10px;margin-bottom:10px;
}
.showpageArea a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
.showpageNum a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;
}
.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;}
.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
</style>
<script type="text/javascript">
function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';
var pageCount=5;
var displayPageNum=4;
var firstPageWord = 'First';
var endPageWord = 'Last';
var upPageWord ='Previous';
var downPageWord ='Next';
var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){
itemCount++;
}
}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}
for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}
fFlag++;
}
if(p==(thisNum-1)){
html += ' <span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}
if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){
if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}
html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" class="showpage">Halaman '+thisNum+' dari '+(postNum-1)+': </span>'+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}
if(postNum==1) postNum++;
html += '</div>';
if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");
if(postNum <= 2){
html ='';
}
for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}
if(pageArea&&pageArea.length>0){
html ='';
}
if(blogPager){
blogPager.innerHTML = html;
}
}
}
</script>
<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>
- Lalu Drag and drop kode HTML tersebut tepat dibawah kolom postingan Anda.
7. Jangan lupa Klik Save
Keterangan :
Untuk kode var pageCount=5;, merupakan jumlah postingan dalam satu halaman, jadi Anda bisa sesuaikan dengan jumlah postingan dalam satu halaman. Jika Anda menampilkan 5 postingan setiap halaman, maka Anda gunakan var pageCount=5.
Sebagai Catatan : Jika Anda sudah menggunakan script ini, tapi tombol navigasi halaman masih juga belum muncul berarti akan muncul di halaman ke dua setelah anda meng-klik link Older Posts/Posting Terbaru di bawah postingan blog. Ini mungkin dikarenakan pengaruh template atau anda sebelumnya pernah menghapus bagian HTML blog anda yang berhubungan dengan hal ini.
Oke, sampai disini dulu pembahasan mengenai Cara Membuat Navigasi Halaman, semoga informasi ini berguna buat Anda semua.
Terimakasih.
Cara membagi postingan menjadi 2 kolom
Postingan yang unik dan menarik merupakan salah satu daya tarik yang bisa dilakukan oleh para pemilik blog, dengan harapan agar pengunjung yang datang, bisa terus datang dan kembali mengunjungi website/blog yang sudah pernah dikunjunginya.
Banyak cara yang bisa dipergunakan, selain dari bukan hanya terkait dari isi postingan saja, tetapi dari penampilan postingan tersebut. Nah kali ini Saya akan sharing 1 cara yang bisa dilakukan yaitu dengan Cara Membagi Postingan di blog menjadi 2 Kolom.
Banyak cara yang bisa dipergunakan, selain dari bukan hanya terkait dari isi postingan saja, tetapi dari penampilan postingan tersebut. Nah kali ini Saya akan sharing 1 cara yang bisa dilakukan yaitu dengan Cara Membagi Postingan di blog menjadi 2 Kolom.
Mengapa Saya bisa katakan bahwa postingan yang dibuat menjadi 2 kolom adalah menarik atau unik ? Anda bisa melihat contohnya seperti dibawah ini :
| Postingan yang unik dan menarik merupakan salah satu daya tarik yang bisa dilakukan oleh para pemilik blog, dengan harapan agar pengunjung yang datang, bisa terus datang dan kembali mengunjungi website/blog yang sudah pernah dikunjunginya. | Banyak cara yang bisa dipergunakan, selain dari bukan hanya terkait dari isi postingan saja, tetapi dari penampilan postingan tersebut. Nah kali ini Saya akan sharing 1 cara yang bisa dilakukan yaitu dengan Cara Membagi Postingan di blog menjadi 2 Kolom. |
Apakah cukup menarik minat Anda ? Jika ya, saya akan memberikan beberapa trik "Cara Membagi Postingan Menjadi 2 Kolom", disaat Anda membuat sebuah postingan, maka usahakan untuk menulis lewat Edit HTML, dan bukan dari Compose, lalu masukanlah kode di bawah ini :
<table cellpadding="10" cellspacing="10"><tbody>
<tr> <td align="justify" valign="top" width="250"> artikel di posisi kiri</td><td align="justify" valign="top" width="250"> artikel di posisi kanan</td> </tr>
</tbody></table>
Untuk lebih memperjelas, silahkan ikuti contoh berikut dibawah ini :
Keterangan :
<table cellpadding="10" cellspacing="10"><tbody>
<tr> <td align="justify" valign="top" width="250"> artikel di posisi kiri</td><td align="justify" valign="top" width="250"> artikel di posisi kanan</td> </tr>
</tbody></table>
Untuk lebih memperjelas, silahkan ikuti contoh berikut dibawah ini :
<table cellpadding="10" cellspacing="10"><tbody>
<tr> <td align="justify" valign="top" width="300">Postingan yang unik dan menarik merupakan salah satu daya tarik yang bisa dilakukan oleh para pemilik blog, dengan harapan agar pengunjung yang datang, bisa terus datang dan kembali mengunjungi website/blog yang sudah pernah dikunjunginya.</td><td align="justify" valign="top" width="300"> Banyak cara yang bisa dipergunakan, selain dari bukan hanya terkait dari isi postingan saja, tetapi dari penampilan postingan tersebut. Nah kali ini Saya akan sharing 1 cara yang bisa dilakukan yaitu dengan Cara Membagi Postingan di blog menjadi 2 Kolom.</td> </tr>
</tbody></table>
Keterangan :
- Cellpadding : jarak antara tepi kolom dengan tulisan;
- Cellspacing : jarak antara dua kolom;
- Width : lebar masing-masing kolom;
- Align adalah perataan teks (justify untuk rata kanan kiri, left untuk rata kiri, right untuk rata kanan dan center untuk rata tengah);
- Valign adalah perataan verikal (top untuk rata atas, bottom untuk rata bawah dan middle untuk rata tengah);
Anda bisa merubah dan mengatur setting diatas sesuai dengan keinginan dan selera Anda.
Cara Sederhana Untuk Menambah Trafik Blog
Apabila anda kebetulan online dilayanan umum seperti warnet maka anda bisa juga mengoptimalkan moment tersebut untuk juga meningkatkan trafik blog anda. Kunjungan anda ke sebuah warnet yang tidak ada lain untuk keperluan online sekalian saja memberi manfaat khusus.
Manfaat tertentu tersebut adalah menjadikan blog yang anda miliki sebagai home page dari browser yang ada diwarnet tersebut, misal warnet tersebut memakai Mozilla, maka beberapa langkah sederhana bisa anda lakukan bebrapa langkah sebagai berikut:
1. Buka halaman blog anda
2. Cari menu tools > option> main > cari kata Home page.
3. Masukan URL blog anda pada kotak home page, tekan use current page.
4. Maka blog anda akan menjadi default di computer tersebut.
5. Setiap pengguna warnet pada komputer tersebut akan langsung membuka blog anda.
Jadi langkah yang anda lakukan akan memperbanyak trafik blog juga kan! Hehehe. Selama settingan nggak dirubah maka karena setiap pengunjung yang membuka browser menjadi pengunjung blog anda. Terima kasih.
E-book Gratis Cara Menyulap Blog Menjadi Mesin Uang Online
Tidak ada kata terlambat. Hukum ini berlaku pada siapa saja.
Berikut ini adalah sedikit gambaran mengenai e-book yang bisa Anda pelajari, sebagai langkah awal Anda belajar bagaimana memanfaatkan BLOG sebagi media untuk sedikit menghasilkan income. Berikut tahapan-tahapan yang saya buat detail agar saya dan Anda lebih bisa memahaminya.
Silakan kunjungi alamat topan.web.id/cafebisnis.
Masukkan Nama dan Alamat E-mail Anda di kolom yang disediakan
Lalu buka e-mail Anda yang tadi didaftarkan di atas , dan buka e-mail yang masuk, kemudian klik link konfirmasi yang harus anda klik. (lihat gambar di bawah)
Setelah anda klik maka akan muncul halaman konfirmasi bahwa anda sukses mendaftar.
Buka kembali e-mail dan buka e-mail kedua yang dikirimkan. Silakan catat username dan password yang dikirim. (password bisa anda ubah di menu Profil, jika anda sudah login)
Kemudian login ke member area dengan meng-klik link di email atau anda bisa login dengan mengetikkan alamat http://cafebisnis.com/wp-admin dan silakan masukkan username dan password yang telah diberikan.
Untuk mendownload e-book-ebook yang disediakan, silakan Masuk ke Member Area dan pilih Menu Download, dan silakan download e-book yang ada.
Selamat Mencoba membuat Blog dan belajar menyulap Blog menjadi mesin uang online
Semoga bermanfaat teman.
Adsense
My Link
Copyright © RAMSI-SMBIRINK.
