Membuat Tombol Next Page dengan Angka

Tutorial kali ini yaitu bagaimana caranya membuat tombol next page / halaman selanjutnya dengan menggunakan angka di bawah postingan blogger, berikut langkah-langkahnya :

1. login ke blogger
2. pilih tab rancangan
3. klik tambah gadget lalu pilih html/javascript
4. copy kode di bawah ini kemudian paste ke konten dari html/javascript tadi (judul tidak perlu ditulis)


<style> .showpageArea a { text-decoration:underline; } .showpageNum a { text-decoration:none; border: 1px solid #ccc; margin:0 3px; padding:3px; } .showpageNum a:hover { border: 1px solid #ccc; background-color:#ccc; } .showpagePoint { color:#333; text-decoration:none; border: 1px solid #ccc; background: #ccc; margin:0 3px; padding:3px; } .showpageOf { text-decoration:none; padding:3px; margin: 0 3px 0 0; } .showpage a { text-decoration:none; border: 1px solid #ccc; padding:3px; } .showpage a:hover { text-decoration:none; } .showpageNum a:link,.showpage a:link { text-decoration:none; color:#333; } </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=6; var firstPageWord = 'First'; var endPageWord = 'last'; var upPageWord ='Back'; 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 += '&nbsp;<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"></span>'+upPageHtml+' '+html +' '; } } html = '<div class="showpageArea"><span style="color:#fff;" class="showpage"> Total '+(postNum-1)+': </span>'+html; if(thisNum<(postNum-1)){ html += downPageHtml; } 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>


5. Masih di rancangan (elemen laman), Arahkan/geser gadget html/javascript yang telah di tambahkan ke bawah postingan, kemudian klik simpan 





6. lihat blog untuk mengetahui hasilnya

Demikian cara membuat tombol next page dengan angka, semoga bermanfaat.

Baca Selengkapnya

Membuat Widget Google Translate Versi Baru

Pada tutorial sebelumnya telah kita bahas bagaimana Cara Membuat Widget Google Translate dengan Logo Bendera. Kali ini masih tetap dalam bahasan yang sama hanya saja yang berbeda model benderanya. Untuk lebih jelasnya silahkan anda lihat tampilan bendera untuk widget google translate yang akan kita buat kali ini.

Langkah-langkah untuk membuatnya :

1. Login ke Blogger.
2. Klik Rancangan
3. Klik tambah gadget
4. Pilih html/javascript
5. Copy kode dibawah ini dan paste dikonten dari html/javascript tadi

<center><a href="http://caranyamembuatblogspot.blogspot.com" target=" blank"><b>Google Translate</b></a></center> <div style="overflow:no; width:100%px; height:100%px; padding: 5px; background: #FFFFFF;"> <style> .google_translate img { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; } .google_translate:hover img { filter:alpha(opacity=30); -moz-opacity: 0.30; opacity: 0.30; } .google_translatextra:hover img { filter:alpha(opacity=0.30); -moz-opacity: 0.30; opacity: 0.30; } </style> <center> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" src="http://img31.imageshack.us/img31/1661/pinginbelajarsaudiarabi.gif" style="cursor: pointer;margin-right:3px"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" src="http://img43.imageshack.us/img43/2771/pinginbelajarsouthkorea.gif" style="cursor: pointer;margin-right:3px"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" src="http://img34.imageshack.us/img34/4583/pinginbelajarjapan.gif" style="cursor: pointer;margin-right:0px"/></a> </center> <center> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" src="http://img41.imageshack.us/img41/1681/pinginbelajarchina.gif" style="cursor: pointer;margin-right:3px"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" src="http://img32.imageshack.us/img32/7591/pinginbelajarrussia.gif" style="cursor: pointer;margin-right:3px"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" src="http://img31.imageshack.us/img31/7112/pinginbelajarbrazil.gif" style="cursor: pointer;margin-right:0px"/></a> </center> <center> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" src="http://img43.imageshack.us/img43/2598/pinginbelajarunitedking.gif" style="cursor: pointer;margin-right:3px"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" src="http://img40.imageshack.us/img40/4035/pinginbelajarfrance.gif" style="cursor: pointer;margin-right:3px"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" src="http://img38.imageshack.us/img38/344/pinginbelajargermany.gif" style="cursor: pointer;margin-right:0px"/></a> </center> <center> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" src="http://img41.imageshack.us/img41/1191/pinginbelajarspain.gif" style="cursor: pointer;margin-right:3px"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" src="http://img36.imageshack.us/img36/6670/pinginbelajaritalia.gif" style="cursor: pointer;margin-right:3px"/></a> <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" src="http://img33.imageshack.us/img33/2439/pinginbelajarnetherland.gif" style="cursor: pointer;margin-right:0px"/></a> </center> </div>

Demikian cara membuat widget Google Translate versi baru, semoga bermanfaat.

Baca Selengkapnya

Cara Membuat Widget Google Translate dengan Logo Bendera

Jika sebelumnya telah kita bahas bagaimana supaya blog kita bisa dibaca oleh pengunjung dari negara lain dengan menggunakan widget google translate, Kali ini kita akan membahas bagaimana Cara Membuat Widget Google Translate dengan Logo Bendera. Untuk membuatnya cukup mudah, ikuti langkah-langkah berikut :

1.  Login ke dashboard blog anda, kemudian pilih tab rancangan
2.  Klik tambah gadget, kemudian pilih html/java script
3.  Copy kode di bawah ini, dan paste ke content dari html/java script
4.  Klik simpan dan lihat blog anda untuk mengetahui hasilnya.

<style> .translate img { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; border:0; padding-left:0px; } .translate:hover img { filter:alpha(opacity=50); -moz-opacity: 0.50; opacity: 0.50; border:0; } </style> <div style="text-align:center"><a href="#" target="_blank" rel="nofollow" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en'); return false;"><img border="0" align="absbottom" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht37tem-zlvvdlAj-JlarwddbjGaOYCtbXJ7j2EW2xOI_rGj7oszj2jR6PCfWupEnzeuSXRtIC-1cx1XQdJUrZHr9FcD9NX4Y6y7L-9VJNE85ToiTJjcWe6SRQ54HwTT4kWUMQ1LGF9jfA/s144/uk-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a href="#" target="_blank" rel="nofollow" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en'); return false;"><img border="0" align="absbottom" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ93y1VyVbTtbEImruI6uJ7TuhPOmSkI4jn3mPT-nmwyL4TC8Z6NWQElvgTDWrMhzcYluauTubvqrka09eorY85YYT4HYzUZNWa1Kkuo70E9Eo2XG85Wkh_mQvl30UeF8Bp3oESddvy8UF/s144/france-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a href="#" target="_blank" rel="nofollow" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cde&hl=en'); return false;"><img border="0" align="absbottom" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXSa28LxEr3SbIFoE7BJZiLDGRv2z-iI1fIK05oBVXqdiuoZODBW1VeWrlzfB52iRe8QVUT6r2Kpawo7z48mJWdo0G5kzyYoSgNSUcQtQfq_gv0YMUV6k3OdFdp-IjgKHZI6UUXZ-fbnd-/s144/german-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a href="#" target="_blank" rel="nofollow" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ces&hl=en'); return false;"><img border="0" align="absbottom" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW2fMMX1y8XybZeMi7S0ffMKqmheKOfWE5mYoaXNeGd9agY-iwwr8J4M4e1twFo3N8RiAr5PjPFQKhZGJ1d9qMSH5cx_54QhhJqL23OPO8rwYRmeofzpvvfEcvwFiRLAA2YLEI310nHAO0/s144/spain-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a href="#" target="_blank" rel="nofollow" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en'); return false;"><img border="0" align="absbottom" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7bVM26YrJpAnwCplDQsE5W2j_z7_ADrwppaEMqRCzkT0B9J103GZgaU3vBwWgJRprWnD4X6vzNE8_zpEPGCTMf_iMqNruNVXOX-8g-E-jP3-mw0dRE3JK0Ds4Fnwotx60vAaLy7NfTrpl/s144/italy-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a href="#" target="_blank" rel="nofollow" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cnl&hl=en'); return false;"><img border="0" align="absbottom" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUnQlQFVYNaraLigdOS6yfnwT4hxcsROEZGarL8agoNk9vi9w2iVtSIEWKhIDbwqjp4QwDePo6m_8mfkKe7l9cQE2DnDi7wA9zvMRdGxXh3gJcNzcsv7MLjUMtJ69VpTWvmvDXkgULVEfM/s144/dutch-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <br/><br/> <a href="#" target="_blank" rel="nofollow" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cru&hl=en'); return false;"><img border="0" align="absbottom" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEr9DvwtoZy8puGIxrsKyqjKF8kaS6V3A3ybzhDJTLSy8UziQ45HeD-tIYNVUNLXoBGgVdS32sija_5eMfZftk-sARsuf2E1Zc5gh9lqwk8AUczZkIEZd9gtPabtV9hZp2Lgv1QHbbQnNo/s144/russian-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a href="#" target="_blank" rel="nofollow" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cpt&hl=en'); return false;"><img border="0" align="absbottom" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhszWaQWfOvNsm7GsqiPDrERD_w_IP5E8wraQ8wVmWl5su7tjwgEp6YQ_IvbdaT91fOfKjVJPHdnYMlQ9SYhIr9Wp4PMSlU3tyHiMURdlL4AuMBegrTXWhaWxyapd63vpxT8JxAMrBnwy1Z/s144/brazil-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a href="#" target="_blank" rel="nofollow" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cja&hl=en'); return false;"><img border="0" align="absbottom" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHXSlaX5hTu8arucu5aryiFay7rBsf-XYf3KmPe-3sO0TGJkusuD5o-nbf9d7Xm2WNh4zZUn4qfIvnDTJaXyOLcDnCMDSIntPAKkHFFghdvYZK8sIcvQ0icaY2HoadJQKb35fMRtj2eyQW/s144/japan-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a href="#" target="_blank" rel="nofollow" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cko&hl=en'); return false;"><img border="0" align="absbottom" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfd2HZqP-z-PQlywUxbGkea9s20xxfejNJcbQBvBiwb4IkvyWpXK5ctM86TC2mclHKz_TsrUIlbW4gyOo4WstiySFbmuhEQESj4gBWK5w4ae8N94R8xytREwtXwhKFb6P6wGdAT8TTnKu-/s144/korean-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a href="#" target="_blank" rel="nofollow" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Car&hl=en'); return false;"><img border="0" align="absbottom" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkXYuDS3D0csc4BNUr8OuD9FAVcMxrfId1dqk5bLX8yDSDKbAKDvbTk0aHxlhqsTWQhM0SNO5cD0hBKGWWwRyYSr46CtH1Ngf-9hTomATGTfATD0qaMzpNqNtMrH2YSBuIajLuu8Gb8nVr/s144/arab-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <a href="#" target="_blank" rel="nofollow" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Czh-CN&hl=en'); return false;"><img border="0" align="absbottom" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVrzJEP14Hbjs0F2OCnHD9x5fQbxomy9EybD51U7NnM1NqGY8ohxt2BM6NzJ1KTdw4swuYVaAQlpcAdHpD-L5Vmp2NcXsccRTYRQ-OjBuuBvEFNGsJw1UESUhtd-s4sUTbQ2h7w-uoZygm/s144/china-flag.png" style="cursor: pointer;margin-right:8px" width="24"/></a> <div style="font-size:9px; padding:8px 0px 0px 0px"><a href="http://caranyamembuatblogspot.blogspot.com"/>Translate Widget</a> by Google </div></div>

Demikian cara membuat widget Google Translate dengan logo bendera, semoga bermanfaat.

Baca Selengkapnya

Cara Membuat Email di Yahoo

Siapa yang tidak kenal dengan situs yahoo, salah satu situs penyedia layanan email gratisan yang populer selain gmail. Yahoo memiliki beberapa kelebihan dibanding situs penyedia lainnya diantaranya adalah ada banyak pilihan domain email yang bisa anda pilih seperti ......@yahoo.com, ....@ymail.com, ....@rocketmail.com, dan domain asal negara masing-masing untuk indonesia misalnya menggunakan domain ....@yahoo.co.id. Disamping itu yahoo juga memiliki banyak fitur lainnya dimana kita bisa login cukup dengan satu id yahoo saja. Untuk membuat email di yahoo ini, silahkan anda ikuti langkah-langkah berikut :

Buka situs yahoo.com atau yahoo.co.id  kemudian klik Buat account

Isi formulir dengan lengkap. Contoh cara pengisiannya sebagai berikut (anda bisa ganti sesuai selera) :

• Nama saya, bagian depan : Mister, bagian belakang : TooCool
• Jenis kelamin : laki-laki
• Tanggal lahir : 19 September 1990
• Saya tinggal di : Indonesia
• Id yahoo dan email : toocoolmister
• Kata sandi : Dewa19
• Ketik ulang kata sandi : Dewa19
• Pertanyaan rahasia 1 : Siapakah nama tokoh kartun pavorit anda saat kecil
• Jawaban anda : spongebob
• Pertanyaan rahasia 2 : Siapakah nama belakang sahabat anda saat kecil
• Jawaban anda : Bagus
• Ketik kode yang ditampilkan : (ketik sesuai dengan huruf yang ditampilkan)

Selanjutnya klik Buat Account Saya dan selamat anda telah mempunyai email di yahoo. Kemudian klik lanjutkan,

Anda akan dibawa kembali ke halaman depan yahoo, tapi lihat tulisan sign in sudah berganti dengan nama anda. Untuk melihat email yang masuk dan mulai berkirim email anda klik tulisan mail :

Demikian cara membuat email di yahoo, semoga bermanfaat.

Baca Selengkapnya