Tempat Berbagi Berita, Cerita dan Derita

Kategori Yang Kalian Suka

New From All Category
Showing posts with label Tutorial Blog. Show all posts
Showing posts with label Tutorial Blog. Show all posts
Post ini diterbitkan pada : Friday, November 26, 2010

14 Buatlah Blog Yang Beratnya Lebih Bersahabat

Selain mempertimbangkan masalah Keyword, Meta Tag, dan segala macam pernak-pernik lainnya yang berbau Search Engine Optimation (SEO), sebuah blog juga wajib mengedepankan masalah berat halaman sebagai aspek yang paling utama untuk dibenahi. Ya, itu benar. Blog yang ringan cenderung lebih "bersahabat" ketimbang blog yang berat.

Apa yang dimaksud dengan "bersahabat"..?

Kita akan membahasnya dalam konteks yang lebih luas, karena tidak semua pengguna layanan internet mempunyai jaringan akses yang cepat. Disaat sebagian pengguna internet asyik berlalu-lalang dengan akses kecepatan 1mbps, perlu diperhitungkan juga, bahwa banyak juga yang berinternet-ria dengan hanya ditemani modem handphone berkecepatan max 152kbps saja, seperti halnya gw.

Bagi blogger yang memang menggunakan akses berkecepatan tinggi dalam mengurus blognya, masalah mengenai berat loading page kadang sering luput dari perhatian mereka. Hal ini tentu saja terjadi karena mereka membuka blognya sendiri dengan kecepatan tinggi yang mereka miliki, sehingga blog mereka seolah-olah ringan dan baik-baik saja.

Jadi, yang dimaksud dengan "Bersahabat" disini, adalah blog yang mampu beradaptasi tidak hanya kepada user internet dengan kecepatan akses tinggi, melainkan juga kepada user yang datang dengan akses berkecepatan rendah.

Berapa standar ukuran blog yang benar..?

Standarnya, sebuah situs seharusnya tidak memiliki berat lebih dari 25kb per-halamannya. Hal ini di sarankan oleh banyak sekali situs mengenai Search Engine Optimation (SEO), termasuk situs-situs besar seperti www.iwebtool.com, www.websiteoptimization.com, bahkan hingga www.google.com/analytics. Mereka serempak menganjurkan hal yang sama.

Jujur saja, walaupun 25kb bukan sesuatu yang mustahil dan sangat mungkin bisa dicapai, standar tersebut masihlah terlalu berat untuk di penuhi oleh kalangan blogger.

Apa benar sesulit itu standar yang harus kita ikuti..? , kalo ngga percaya, coba cek dulu berat blog kalian lewat  http://www.iwebtool.com/speed_test . Masukkan alamat blog kalian pada kolom yang disediakan, kemudian klik tombol check dan tunggu hasilnya.

cek-besar-dan-waktu-loading-blog

Bagaimana? apa blog kalian sudah berhasil mengikuti standar tersebut? atau jangan-jangan blog kalian malah hampir 3-4x lipat lebih berat dari yang disarankan?

Lewat test pada situs yang sama, blog gw sendiri masih ngga sesuai standar koq.. ukurannya masih 49kb. Hmm.., hasil yang mengecewakan, tapi setidaknya sampai pada tahap ini, kita udah bisa sama-sama menilai bagaimana sulitnya mengikuti standar tersebut bukan..?

Ukuran yang paling realistis untuk sebuah blog.

Setelah melihat hasil test, mungkin saja kalian berpikir bahwa mengurangi ukuran blog hingga 25kb adalah hal yang sulit diikuti. Dan kalo benar demikian, maka kalian mempunyai pemikiran yang sama dengan gw. Standar tersebut memang disarankan agar blog kita lebih mudah di index oleh Robot Search Engine, tapi bukan berarti itu adalah standar yang paling ideal.

Perhitungannya, sebuah blog berukuran "super duper berat (150kb keatas)" sekalipun, tetap saja tidak akan terlihat berat ketika diakses dari koneksi 1mbps. Lain ceritanya ketika blog tersebut diakses dari koneksi yang hanya berkecepatan 152kbps.. dijamin, minimal diperlukan waktu sekitar 3-4 menit untuk melihat blog secara utuh. Bahkan ada beberapa blog yang membutuhkan waktu hingga 10 menit sampai bisa diload sempurna.

Kalau kalian pernah menonton acara MTV Booling Points, kalian pastinya udah tau dengan jelas tentang bagaimana tahap mendidihnya amarah seseorang. Hal ini juga terjadi lho pada pengunjung yang menunggu terlalu lama saat mengunjungi sebuah blog. Ada titik mendidih yang membuat mereka akhirnya kabur ke tempat lain, dan ngga mau kembali lagi. Yap!, kurang lebih seperti itulah yang terjadi.

Standar sebuah blog yang ideal sebenarnya masih tergantung pada seberapa cepat koneksi yang pengunjung gunakan ketika mengakses blog kita.

Lupakan masalah standar yang benar (25kb), sekarang kita akan menghitung ukuran yang paling seimbang, yang bisa diakses dengan mudah oleh pengunjung low speed connection ataupun yang high speed connection.

Perbedaan antara standard blog yang benar dengan standar blog yang ideal.

Blog yang benar di mata SEO memang seharusnya berukuran 25kb.., tapi dalam hal ini, standard yang dimaksud tersebut mungkin hanya sebatas ukuran default blog yang wajar. Selebihnya, ketika ditambahi beberapa widget-widget, sebuah blog tentu saja akan kesulitan dalam mempertahankan berat badannya.

Oleh karena itu, walaupun ada tolak ukur 25kb dalam warning yang muncul dalam analysis page-nya, kebanyakan situs-situs analyzer selalu memberikan toleransi. Minimal jika blog kita tidak melebihi 100kb, maka blog kita masih masuk ke dalam tahap aman.

Bagaimana kalo lebih dari 100kb..? Kalo blog kalian lebih dari 100kb, gw rasa sudah saatnya kalian mengurangi beberapa widget yang dirasa ngga terlalu penting dari blog kalian. Zona 100kb sudah termasuk ke dalam zona bahaya, dimana search engine sudah dipastikan akan kesulitan dalam mengindex blog kita.

Dan jika kalian bertanya kepada gw tentang berapa ukuran blog yang ideal.., maka gw akan menjawab "60kb". Kenapa? karna ukuran 60kb bisa dibilang adalah perbatasan yang paling seimbang, agar blog kita bisa mudah diakses oleh pengunjung berkoneksi lemot.

Selain hal tersebut, ukuran 60kb juga ukuran yang paling pas untuk dimasukkan kedalam kategori Mobile Friendly. Disini, gw menggunakan Opera Mini sebagai acuannya. Seperti yang kita ketahui, ketika kita membuka sebuah situs menggunakan Opera Mini, maka kita akan dialihkan terlebih dahulu ke server mereka, sebelum akhirnya mereka mengkompresi seluruh isi halaman agar situs lebih kecil dan menampilkannya di browser. Betul..?

Berdasarkan hal tersebut, sebuah blog dengan ukuran 60kb, ngga akan melebihi 25kb ketika diakses lewat Opera Mini. Sudah masuk standar kan sekarang? setidaknya, buat Mobile .. hehe..

See u..

Post ini diterbitkan pada : Tuesday, November 23, 2010

18 Cara Memasang Template Valid XHTML

Ada beberapa hal penting yang harus Anda lakukan sebelum menginstal template ini di blog Anda.

1. Hal pertama yang harus Anda lakukan adalah meng-backup semua widget yang ada pada template Anda yang lama. Kenapa? karena kita akan mengatur ulang semua kode error pada template dengan cara menghapus bagian <body> htmlnya.

Jika tidak dibackup, nantinya anda akan kesulitan ketika memasangnya kembali. Jadi, pastikan Anda sudah membuat backup semua widget yang ada.

2. Masuk ke menu Design -> Edit HTML, kemudian beri tanda centang pada kotak Expand Template Widget.

Selanjutnya, hapus semua kode yang berada antara <body> dengan </body>

<body>
Hapus semua kode yang ada di bagian ini
</body>

Save template, dan pilih Hapus Widget (delete widget) jika ada warning yang muncul.

3. Ekstrak file zip template yang telah anda download sebelumnya, dan upload file XML-nya ke blog Anda. Jika peringatan muncul lagi, pilih Hapus opsi Navbar.

4. Sekarang, masuklah ke menu Page Elements, dan masukkan kembali semua widget yang sebelumnya sudah anda backup. Setelah itu, beralih ke menu Settings -> Basic, dan ubahlah pengaturan untuk Show Quick Editing menjadi No

5. Kembali lagi ke Edit HTML (Beri tanda centang pada Expand Widget Template). Gunakan CTRL + F untuk mencari kode <b:include name='quickedit'/>, dan hapus semua kode tersebut dari template anda.

6. Jika anda menggunakan widget arsip blog dari blogger, jangan menggunakan tampilan hirearcy. Anda sebaiknya menggunakan tampilan Flat.

7. Simpan template Anda, dan kunjungi www.validator.w3.org untuk memeriksa blog Anda.
Apakah blog Anda valid sekarang?

Apa yang harus dilakukan agar template tetap valid?

1. Jika Anda menggunakan fitur Jump Break (read more) default dari blogger, pastikan untuk mengubah kode
<!--more--> menjadi <!-- more --> pada mode Edit HTML sebelum anda mempublikasikan post. (berikan spasi pada teks "more")

2. Jangan menaruh gambar pada posting yang muncul di halaman depan (jika menggunakan fitur Read More dari Blogger). Gambar harus ditempatkan setelah kode <!-- more -->

3. Selalu berikan tag alt pada setiap gambar di blog Anda, termasuk gambar pada postingan.

4. Ingatlah untuk menghapus kode <b:include name='quickedit'/>, setelah Anda menginstal sebuah widget baru di blog Anda.

Post ini diterbitkan pada : Monday, November 22, 2010

3 Mengkompres Gambar Agar Blog Tetap Indah dan Ringan

Kehadiran image/gambar dalam sebuah situs memang sangat dibutuhkan. Selain memperindah, sebuah gambar juga mampu berkata lebih banyak ketimbang teks yang berjibun di situs kita. Terlebih jika sebuah situs berfokus kepada konten mengenai tutorial, gambar adalah sebuah konten wajib yang harus ada didalam postingannya.

Tapi permasalahannya menjadi berbeda ketika sebuah situs akhirnya menjadi berat, lantaran gambar-gambarnya yang berukuran besar. Ini bisa dilihat pada situs-situs mengenai tutorial photoshop, seperti psdtuts, photoshoplady, dsb.

Adakah cara mengatasinya?

Untuk yang mempunyai program Photoshop pada komputernya, kalian bisa menggunakan pilihan Save For Web Devices (CTRL+SHIFT+ALT+S) yang sudah ada. Tools yang disediakan ini mampu mengecilkan ukuran file gambar, dengan menurunkan kualitas gambar ke kualitas yang paling mendekati gambar asli.

Berikut adalah contoh hasil gambar yang dikompress menggunakan Save for Web Devices :

Jay chou2  

Gambar disebelah kiri berukuran 30kb, dan setelah dikompress, ukurannya menjadi hanya 14kb saja. Hasilnya tidak terlalu jauh berbeda kan dengan yang aslinya?

Lalu bagaimana dengan yang ngga punya sotosop ? kalian bisa memakai software Image Resizer sebagai alternatif.

Dari hasil uji coba, software yang satu ini bisa menghasilkan kualitas gambar yang ngga jauh beda dengan yang dihasilkan oleh tools Save for Web Devices nya photoshop. Cara pakainya pun mudah koq.

1. Download dulu softwarenya melalui link ini :

http://www.ziddu.com/download/12644093/ImageResizer_Portable_4.0.1.5_Multilingual.paf.exe.html (7mb)

2. Jalankan file installernya.

3. Kalo udah, jalankan deh programnya.

software-image-resizer 

4. Dimenu utama, masukkan file gambar yang ingin kalian perkecil, kemudian tekan tombol next untuk masuk ke pengaturan selanjutnya.

software-image-resizer-2

Pada menu pengaturan, pilihan resize yang di berikan sangat lengkap. Kalian bisa merubah ukurannya sesuai dengan standar profile ataupun dengan resolusi yang kalian inginkan sendiri. Kemudian, juga ada pilihan preview untuk melihat bagaimana hasil gambar yang akan dihasilkan nantinya.

Pengen berimprovisasi lebih dengan gambar yang kalian resize tersebut?, kalian bisa memasukkan efek ke dalamnya, dan masih banyak lagi fitur-fitur lainnya. Pokoke, software ini bisa dibilang software wajib untuk kalian yang ingin blognnya tetap ringan walaupun memakai image yang lumayan banyak.

Post ini diterbitkan pada : Thursday, November 18, 2010

9 Mempercepat Loading Form Komentar

Selain mengandung banyak error dan ngga valid XTML, sebenarnya form komentar default blogger juga mempunyai permasalahan lain. Terdapat kejanggalan dalam cara penulisan kode pemanggilan iframe form tersebut. Kenapa gw bilang janggal ?, karna pemanggilan iframenya dibuat terpisah menjadi dua bagian.

formkomentar

Kode src yang biasanya digunakan untuk memanggil data external, entah kenapa dibuat terpisah dengan tautan link menuju halaman form komentar yang asli di Blogger. Dan ini membuat loading form komentar menjadi lambat.

Efeknya mungkin ngga akan terlihat ketika pengunjung membaca konten post kita sampai habis terlebih dahulu. Why?, karna saat dia selesai membaca artikel, form komentar memang udah berhasil di loading dengan sempurna. Tapi, kalo kita bandingkan lama loading form komentar dengan widget-widget lainnya, dijamin pasti akan terlihat seberapa lemotnya iframe tersebut.

Seringkali, elemen sidebar lebih duluan tampil dibanding form komentar. Hal ini tentu saja membingungkan, karna seharusnya, form komentar adalah elemen yang tampil pertama kali setelah konten post, sesuai dengan letak kodenya yang berada persis dibawah kode main post blog. Baru setelah itu, kode sidebar dan footer.

Dan kalo blog kalian mengalami masalah yang persis seperti pembahasan sebelumnya, berikut ini ada cara untuk memperbaiki "kejanggalan" form komentar tersebut.

1. Masuk ke menu Edit HTML blog kalian, kemudian berikan tanda centang (check mark) pada kolom Expand Widget Template. (jangan lupa untuk membackup blog terlebih dahulu, untuk berjaga-jaga dari kesalahan nantinya)

2. Carilah kode seperti ini di template kalian :

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>

3. Perhatikan kode diatas. Kode data:post.commentFormIframeSrc dan src yang seharusnya bisa ditulis bersamaan, malah dibuat terpisah, dengan target src iframe yang dibiarkan kosong.

Dan karna browser biasanya cenderung lambat dalam merespon kode src yang null alias kosong, maka kita harus mengganti struktur penulisannya menjadi lebih benar. Bagaimana caranya?

--> Pindahkan kode data:post.commentFormIframeSrc kedalam target src yang kosong, seperti ini :

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='data:post.commentFormIframeSrc' width='100%'/>

--> Selanjutnya, hapuslah kode <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>

Sekarang kode form komentar kita sudah lebih singkat :

<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='data:post.commentFormIframeSrc' width='100%'/>

4. Save template, dan cek kinerja form komentar kalian sekarang.

Post ini diterbitkan pada : Friday, November 12, 2010

1 comments Pentingnya Memperbaiki Error Pada Widget Blog Archive

Masih berhubungan dengan masalah ketidak-validan template Blogger dimata Validator W3, kali ini ada sedikit info tentang widget Blog Archive atau Arsip Blog, yang mungkin saat ini juga sedang kalian pasang di blog kalian. Widget ini mengandung banyak Error jika ditampilkan dalam bentuk Hirearcy. Dan hal ini tentu saja semakin membuat blog kita tidak valid.

Hal ini disebabkan karena kode pemanggilan database blogger yang memakai huruf besar dalam penulisannya. Dalam struktur template yang valid, kode-kode javascript dan juga database harusnya hanya menggunakan huruf kecil.

Sayangnya, kita ngga akan bisa memperbaiki penulisan kode tersebut, karena kode tersebut ditanamkan pada mesin Blogger, dimana stylesheet tersebut adalah kode default untuk semua pengguna mesin Blogger. Sampai saat ini, satu-satunya cara untuk mengatasi masalah Error pada Widget ini, adalah dengan mengganti jenis tampilannya menjadi Flat.

So, ada baiknya kalian juga memperhatikan mengenai masalah kevalidan widget yang satu ini di blog kalian. Kenapa? karena semakin valid blog kita, akan semakin mudah juga bagi Bot dari Search Engine dalam mengindeks blog kita.

Semakin mudah search engine mengindeks konten blog kita, semakin besar juga peluang blog kita menduduki Top 10 hasil pencarian pada search engine kan?

Happy Blogging..

Post ini diterbitkan pada : Tuesday, November 9, 2010

5 Cara Menambahkan Fitur Auto Read More

Walau Blogger sudah menambahkan fitur jump break pada default posting nya, nampaknya pilihan auto read more masih menjadi pilihan kebanyakan . Dengan fitur read more yang otomatis, kita ngga perlu bersusah ria dalam menyelipkan kode HTML pada post kita agar artikel menjadi dua bagian (bagian yang tampil di depan dan bagian yang tampil setelah di klik).

Read More Otomatis

Cukup menulis sebagus yang kita bisa, lalu fitur akan langsung membuat ringkasan artikel kita dengan word count tertentu. Hebatnya, dengan Javascript, gambar (image) pertama yang ada pada artikel, juga akan secara otomatis di letakkan pada sisi kiri atas artikel. Tentunya jauh lebih mudah kan?

lalu bagaimana cara menambahkan fitur Auto Read More ini pada template kita? simak adegan berikut. Eh salah, maksudnya simak tutorial berikut..

1. Login ke account blog kalian. Pada menu dashboard, pilih Rancangan / Design.

2. Selanjutnya, masuklah ke menu Edit HTML , Backup dulu template kalian dengan cara mengklik link Download Full Template, kemudian berikan tanda centang pada kolom Expand Widget Template.

Menu Edit Html

3. Cari kode ]]></b:skin> , dan ganti kode tersebut dengan kode ini :

]]></b:skin>
<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 400;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 130;
</script>

<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

4. Cari kode <div class='post-body entry-content'> , dan ganti kode tersebut dengan kode ini :

<div class='post-body entry-content'>
<p><b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>Read More...</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if></p>

5. Save.

Apa saja yang perlu di ganti ?

summary_noimg = 400;         <-- Jumlah teks yang tampil pada artikel tanpa image / gambar.
summary_img = 250;            <-- Jumlah teks yang tampil pada artikel yang bergambar.
img_thumb_height = 120;     <-- Ukuran tinggi gambar yang tampil.
img_thumb_width = 130;      <-- Ukuran lebar gambar yang tampil.

Ganti teks Read More... (Perhatikan langkah No.4) dengan teks yang kalian inginkan.

Selesai deh.

Post ini diterbitkan pada : Friday, November 5, 2010

4 Cara Membuat Navigasi Halaman Bernomor

navigasi-halaman

Navigasi halaman sebenarnya udah disediakan oleh pihak blogger dalam template Framework (Default) mereka. Bentuknya berupa link Older Post, Newer Post dan Home. Tapi kalo kalian ingin mengganti tampilan sederhana tersebut dengan yang lebih elegan, navigasi dalam bentuk nomor ini bisa menjadi alternatif buat blog kalian.

  • Login ke Account (dashboard) blog kalian.
  • Masuk ke menu Rancangan (design), kemudian pilih Edit HTML.
  • Cari kode ]]></b:skin> , dan ganti kode tersebut dengan kode berikut :

.showpageArea{padding:15px;background:#fff}
.showpageArea a{-moz-border-radius:5px;text-decoration:none}
.showpageNum a{font-weight:bold;color:#0080ff;padding:1px 8px; margin:0 4px;text-shadow:0px 2px 4px #666;border:1px solid #91bde6;background:#fff;}
.showpageNum a:hover{color:#fff;background:-moz-linear-gradient(top,#cee5fc,#0080ff);text-shadow:0px 2px 2px #00a;border:1px solid #369afc;}
.showpagePoint{color:#fff; text-shadow:0px 2px 2px #00a; padding:1px 8px; margin:2px; font-weight:bold;border:1px solid #369afc;background:-moz-linear-gradient(top,#cee5fc,#0080ff);-moz-border-radius:5px;}
.totalpages{margin:0 8px 0 0;color:#444;background:#fff;padding:1px 10px;border:1px solid #91bde6;-moz-border-radius:5px;}
.showpage a{padding:1px 8px; margin:0 2px;border:1px solid #91bde6;background:#fff;color:#0080ff;text-shadow:0px 2px 4px #999;padding-left:10px}
.showpage a:hover{background:-moz-linear-gradient(top,#cee5fc,#0080ff);color:#fff;text-shadow:0px 2px 2px #00a;padding:1px 8px;padding-left:10px}
#showlastpage a{font-weight:bold}
]]></b:skin>

  • Save template.

Berikutnya, kita akan memasukkan kode script pada bagian html template. Disini ada dua cara dalam membuatnya.

1. Menggunakan Inline Script.

--> Cari kode </body> pada kode template kalian, dan ganti kode tersebut dengan kode dibawah ini :

<div>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;&#9668;&#39;;
var downPageWord =&#39;&#9658;&#39;;
</script>
<script type='text/javascript'>
//<![CDATA[
document.getElementById("blog-pager").style.display="inline";var canvas="";function writescript(a){document.write('<script src="/feeds/posts/summary?alt=json-in-script&callback='+a+"&start-index="+startindex+'&max-results=100" ><\/script>')}function writelabelscript(a){document.write('<script src="/feeds/posts/summary/-/'+label+"?alt=json-in-script&callback="+a+"&start-index="+startindex+'&max-results=100" ><\/script>')}var url=location.href,total;var already=new Boolean(false);var timestamps=new Array();if(url.indexOf("/search/label/")!=-1){if(url.indexOf("?updated-max")!=-1){var label=url.substring(url.indexOf("/search/label/")+14,url.indexOf("?updated-max"))}else{var label=url.substring(url.indexOf("/search/label/")+14,url.indexOf("?&max"))}}if(url.indexOf("#Page")!=-1){var currentpagenum=parseInt(url.substring(url.indexOf("#Page")+5,url.length))}else{var currentpagenum=1}var startindex=(currentpagenum-displayPageNum-1>0)?((currentpagenum-displayPageNum-2)*pageCount+1):1;var total=(2*displayPageNum+1)*pageCount;if(url.indexOf("?q=")==-1&&url.indexOf(".html")==-1){if(url.indexOf("/search/label/")==-1){var islabel=new Boolean(false);do{writescript("buildtimestamps");startindex+=100}while(total>startindex)}else{var islabel=new Boolean(true);do{writelabelscript("buildtimestamps");startindex+=100}while(total>startindex)}document.write('<script type="text/javascript">printnav();<\/script>')}function buildtimestamps(b){if(already==false){total=parseInt(b.feed.openSearch$totalResults.$t)}init=pageCount-1;for(var a=init;post=b.feed.entry[a];a+=pageCount){timestamps[timestamps.length]=encodeURIComponent(post.published.$t.substring(0,19)+post.published.$t.substring(23,29))}}function printlast(b){var a=encodeURIComponent(b.feed.entry[0].published.$t.substring(0,19)+b.feed.entry[0].published.$t.substring(23,29));if(islabel==false){link="search?updated-max="+a+"&max-results="+pageCount+"#Page"+maxpages}else{link="/search/label/"+label+"?updated-max="+a+"&max-results="+pageCount+"#Page"+maxpages}document.getElementById("showlastpage").innerHTML='<a href="'+link+'">'+maxpages+"</a>"}function printnav(){maxpages=Math.ceil(total/pageCount);canvas=canvas+'<span class="totalpages">Page ['+maxpages+"]</span>";var a=((currentpagenum+displayPageNum)<maxpages)?currentpagenum+displayPageNum:maxpages;var c=((currentpagenum-displayPageNum)>1)?currentpagenum-displayPageNum:1;if(currentpagenum>1){if(islabel==false){if(currentpagenum==2){link="/"}else{link="search?updated-max="+timestamps[(c==1)?currentpagenum-c-2:currentpagenum-c-1]+"&max-results="+pageCount+"#Page"+(currentpagenum-1)}}else{if(currentpagenum==2){link="/search/label/"+label+"?&max-results="+pageCount}else{link="/search/label/"+label+"?updated-max="+timestamps[(c==1)?currentpagenum-c-2:currentpagenum-c-1]+"&max-results="+pageCount+"#Page"+(currentpagenum-1)}}canvas=canvas+' <span class="showpage"><a href="'+link+'">&#9668</a></span>'}if(c!=1){if(islabel==true){canvas=canvas+'<span class="showpageNum"><a href="/search/label/'+label+"&max-results="+pageCount+'">1</a></span>'}else{canvas=canvas+'<span class="showpageNum"><a href="/">1</a></span>'}canvas=canvas+"..."}for(var b=c;b<=a;b++){if(islabel==true){if(b==1){link="/search/label/"+label+"?&max-results="+pageCount}else{link="/search/label/"+label+"?updated-max="+timestamps[(c==1)?b-c-1:b-c]+"&max-results="+pageCount+"#Page"+b}if(b==currentpagenum){canvas=canvas+'<span class="showpagePoint">'+b+"</span>"}else{canvas=canvas+'<span class="showpageNum"><a href="'+link+'">'+b+"</a></span>"}}else{if(b==1){link="/"}else{link="search?updated-max="+timestamps[(c==1)?b-c-1:b-c]+"&max-results="+pageCount+"#Page"+b}if(b==currentpagenum){canvas=canvas+'<span class="showpagePoint">'+b+"</span>"}else{canvas=canvas+'<span class="showpageNum"><a href="'+link+'">'+b+"</a></span>"}}}if(a!=maxpages){canvas=canvas+' .. <span id="showlastpage" class="showpage"></span>';startindex=Math.floor((total-1)/pageCount)*pageCount;if(islabel==true){writelabelscript("printlast")}else{writescript("printlast")}}if(currentpagenum<maxpages){if(islabel==false){link="search?updated-max="+timestamps[(c==1)?currentpagenum-c:currentpagenum+1-c]+"&max-results="+pageCount+"#Page"+(currentpagenum+1)}else{link="/search/label/"+label+"?updated-max="+timestamps[(c==1)?currentpagenum-c:currentpagenum+1-c]+"&max-results="+pageCount+"#Page"+(currentpagenum+1)}canvas=canvas+' <span class="showpage"><a href="'+link+'">&#9658</a></span>'}document.getElementById("blog-pager").innerHTML=canvas};
//]]>
</script>
</b:if>
</div>
</body>

--> Ubah angka 5 pada var pageCount sesuai dengan jumlah post yang tampil di halaman depan blog kalian.

var pageCount=5;
var displayPageNum=5;

--> Angka 5 pada var displayPageNum adalah jumlah page yang akan ditampilkan. Ganti sesuai yang kalian inginkan.

--> Save, dan lihat hasilnya.

2. Menggunakan script dari luar.

--> Buka Notepad , dan copy kode berikut ini kedalamnya :

//<![CDATA[
document.getElementById("blog-pager").style.display="inline";var canvas="";function writescript(a){document.write('<script src="/feeds/posts/summary?alt=json-in-script&callback='+a+"&start-index="+startindex+'&max-results=100" ><\/script>')}function writelabelscript(a){document.write('<script src="/feeds/posts/summary/-/'+label+"?alt=json-in-script&callback="+a+"&start-index="+startindex+'&max-results=100" ><\/script>')}var url=location.href,total;var already=new Boolean(false);var timestamps=new Array();if(url.indexOf("/search/label/")!=-1){if(url.indexOf("?updated-max")!=-1){var label=url.substring(url.indexOf("/search/label/")+14,url.indexOf("?updated-max"))}else{var label=url.substring(url.indexOf("/search/label/")+14,url.indexOf("?&max"))}}if(url.indexOf("#Page")!=-1){var currentpagenum=parseInt(url.substring(url.indexOf("#Page")+5,url.length))}else{var currentpagenum=1}var startindex=(currentpagenum-displayPageNum-1>0)?((currentpagenum-displayPageNum-2)*pageCount+1):1;var total=(2*displayPageNum+1)*pageCount;if(url.indexOf("?q=")==-1&&url.indexOf(".html")==-1){if(url.indexOf("/search/label/")==-1){var islabel=new Boolean(false);do{writescript("buildtimestamps");startindex+=100}while(total>startindex)}else{var islabel=new Boolean(true);do{writelabelscript("buildtimestamps");startindex+=100}while(total>startindex)}document.write('<script type="text/javascript">printnav();<\/script>')}function buildtimestamps(b){if(already==false){total=parseInt(b.feed.openSearch$totalResults.$t)}init=pageCount-1;for(var a=init;post=b.feed.entry[a];a+=pageCount){timestamps[timestamps.length]=encodeURIComponent(post.published.$t.substring(0,19)+post.published.$t.substring(23,29))}}function printlast(b){var a=encodeURIComponent(b.feed.entry[0].published.$t.substring(0,19)+b.feed.entry[0].published.$t.substring(23,29));if(islabel==false){link="search?updated-max="+a+"&max-results="+pageCount+"#Page"+maxpages}else{link="/search/label/"+label+"?updated-max="+a+"&max-results="+pageCount+"#Page"+maxpages}document.getElementById("showlastpage").innerHTML='<a href="'+link+'">'+maxpages+"</a>"}function printnav(){maxpages=Math.ceil(total/pageCount);canvas=canvas+'<span class="totalpages">Page ['+maxpages+"]</span>";var a=((currentpagenum+displayPageNum)<maxpages)?currentpagenum+displayPageNum:maxpages;var c=((currentpagenum-displayPageNum)>1)?currentpagenum-displayPageNum:1;if(currentpagenum>1){if(islabel==false){if(currentpagenum==2){link="/"}else{link="search?updated-max="+timestamps[(c==1)?currentpagenum-c-2:currentpagenum-c-1]+"&max-results="+pageCount+"#Page"+(currentpagenum-1)}}else{if(currentpagenum==2){link="/search/label/"+label+"?&max-results="+pageCount}else{link="/search/label/"+label+"?updated-max="+timestamps[(c==1)?currentpagenum-c-2:currentpagenum-c-1]+"&max-results="+pageCount+"#Page"+(currentpagenum-1)}}canvas=canvas+' <span class="showpage"><a href="'+link+'">&#9668</a></span>'}if(c!=1){if(islabel==true){canvas=canvas+'<span class="showpageNum"><a href="/search/label/'+label+"&max-results="+pageCount+'">1</a></span>'}else{canvas=canvas+'<span class="showpageNum"><a href="/">1</a></span>'}canvas=canvas+"..."}for(var b=c;b<=a;b++){if(islabel==true){if(b==1){link="/search/label/"+label+"?&max-results="+pageCount}else{link="/search/label/"+label+"?updated-max="+timestamps[(c==1)?b-c-1:b-c]+"&max-results="+pageCount+"#Page"+b}if(b==currentpagenum){canvas=canvas+'<span class="showpagePoint">'+b+"</span>"}else{canvas=canvas+'<span class="showpageNum"><a href="'+link+'">'+b+"</a></span>"}}else{if(b==1){link="/"}else{link="search?updated-max="+timestamps[(c==1)?b-c-1:b-c]+"&max-results="+pageCount+"#Page"+b}if(b==currentpagenum){canvas=canvas+'<span class="showpagePoint">'+b+"</span>"}else{canvas=canvas+'<span class="showpageNum"><a href="'+link+'">'+b+"</a></span>"}}}if(a!=maxpages){canvas=canvas+' .. <span id="showlastpage" class="showpage"></span>';startindex=Math.floor((total-1)/pageCount)*pageCount;if(islabel==true){writelabelscript("printlast")}else{writescript("printlast")}}if(currentpagenum<maxpages){if(islabel==false){link="search?updated-max="+timestamps[(c==1)?currentpagenum-c:currentpagenum+1-c]+"&max-results="+pageCount+"#Page"+(currentpagenum+1)}else{link="/search/label/"+label+"?updated-max="+timestamps[(c==1)?currentpagenum-c:currentpagenum+1-c]+"&max-results="+pageCount+"#Page"+(currentpagenum+1)}canvas=canvas+' <span class="showpage"><a href="'+link+'">&#9658</a></span>'}document.getElementById("blog-pager").innerHTML=canvas};
//]]>

--> Simpan kode tersebut dengan nama navigasihal.js (Rubah pilihan Save as type menjadi All Files)

save-as-type-notepad

--> Upload script navigasihal.js ke situs hosting. Kalian bisa menggunakan layanan hosting gratis dari Ripway.com

--> Kalau udah di upload, sekarang kita tinggal memasukkan script pemanggilannya pada kode template kita.

Di menu Edit HTML, cari kode </body> dan ganti kode tersebut dengan kode berikut ini :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;&#9668;&#39;;
var downPageWord =&#39;&#9658;&#39;;
</script>
<script type='text/javascript' src='navigasihal.js'></script>

Nb: ganti teks berwarna hijau dengan URL link file di hostingan kalian. Contoh :

<script type='text/javascript' src='http://ripway.com/keichiro/navigasihal.js'></script>

--> Save, dan lihat hasilnya.

Semoga bermanfaat.

Post ini diterbitkan pada : Thursday, November 4, 2010

4 Mengatasi Widget Followers Yang Tidak Valid XHTML

Dari hasil uji Valid XHTML lewat http://validator.w3.org, dinyatakan bahwa widget Follower default dari blogger tidak lolos uji kevalidan. Widget ini mengandung error alias cacat. Padahal, widget ini bisa dibilang sangat penting bagi blog kita kan? Lewat widget ini,kita bisa berinteraksi lebih jauh dengan para pembaca setia blog kita.

Adakah cara untuk mengatasinya? Jawabannya, ada. Kita bisa memakai kode asli yang dikeluarkan oleh google friend connect.

Sebenarnya yang membuat widget follower ini menjadi error adalah kode pemanggilan script yang ditambahkan oleh blogger pada script aslinya. Jadi tanpa adanya kode tambahan blogger tersebut, widget ini aman dan valid untuk dipasang pada blog kita.

1. Kunjungi situs http://www.google.com/friendconnect/ , dan loginlah menggunakan account gmail anda.

login-google-account

2. Klik pada banner Tambahkan Gadget Anggota

Tambah-gadget-anggota

3. Sesuaikan lebar widget dengan sidebar anda, berikut juga penggunaan font dan warnanya. Bisa dilihat pada live preview yang ditampilkan pada sebelah kanan halaman.

Live Preview Edit Tampilan

4. Kalau sudah klop, tekan tombol Buat Kode pada bagian bawah halaman.

membuat-kode-widget

5. Salin/copy kode yang diberikan oleh Google Friend Connect tersebut.

kode-widget-blogger

6. Beralih ke situs blogger. Masuklah ke menu Design/Rancangan, kemudian pilih Add a Gadget.

add-a-gadget

7. Pada halaman pop-up yang muncul, pilih HTML/Javascript dan masukkan kode yang diberikan oleh Google Friend Connect tadi.

memasukkan-kode-widget

8. Berikan judul widget sesuai dengan keinginan anda, lalu tekan tombol save.

9. Masuk ke menu Edit HTML, dan berikan tanda centang pada box Expand Widget Template.

menu-edit-html-blogger

expand-widget-template

10. Cari kode <b:include name='quickedit'/> , dan hapus semua kode tersebut dari template anda.

Sekarang widget Followers anda telah dinyatakan bersih, aman dan Valid XHTML. ^^

My Tweet

 
Site Meter
© 2008 Blogger Abstrak | Template by : O-zone | Owner : Angga Leoputra