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. ^^

3 Membuat Blog Lebih Valid XHTML

valid-xhtml

Setelah membaca beberapa artikel mengenai pentingnya kevalidan XHTML bagi sebuah blog, gw jadi tau bahwa ternyata para pengguna mesin Blogger/Blogspot seperti gw pasti mempunyai permasalahan yang sama, yaitu ngga lulus test Valid XHTML. Hal ini dikarenakan fitur-fitur default dari template blogger yang cacat alias kurang bersahabat dengan XHTML.

Lah, terus bagaimana dengan nasib gw yang juga memakai mesin blogger ini?, apa  blog ini juda ngga valid XHTML seperti pengalaman temen-temen yang lainnya? duh,gw jadi penasaran dan pengen tau bagaimana hasil tes blog ini.

Akhirnya, setelah membaca beberapa baris doa dan berpuasa selama 3 jam, gw pun memberanikan diri mengunjungi markas w3 validator di www.validator.w3.org. Dengan penuh keyakinan, gw memasukkan alamat blog ini pada kolom yang mereka sediakan dan segera menekan tombol check. Gw berharap cemas.

w3 validator

Setelah menunggu beberapa saat, kemudian keluarlah hasil test yang begitu menakjubkan tentang blog ini. Blog ini ternyata sukses dinyatakan gagal uji ke-validan. Dan dengan ditemukannya 198 Errors dan 143 warning tersebut, maka bisa disimpulkan bahwa blog ini adalah blog yang cacat (sama seperti pemiliknya), dan ngga bersahabat dengan search engine.

w3-validator

Hasil test pun gw periksa satu-persatu dengan seksama dan teliti. Ternyata memang bener kata yang lain, bahwa fitur-fitur bawaan blogger itu cacat. Dan lebih celakanya lagi, ini baru gw sadari setelah jumlah post blog ini mencapai angka 200 lebih. Tentunya akan sulit sekali dalam memperbaikinya.

Menurut artikel-artikel yang gw baca, blog yang udah lama memang lebih susah lolos test Valid XHTML, karena konten postnya juga udah banyak yang mengandung error. Berita yang sangat buruk. Tapi apa boleh buat? nasri udah menjadi tukang bubur. Sekarang yang perlu gw lakukan adalah mengurangi jumlah error dan warning pada blog ini sampai batas maksimal yang bisa dicapai.

Apa aja sih yang gw benahi? dan bagaimana tahap-tahap yang gw lakukan? berikut ini gw lampirkan step-step tersebut. Semoga ini bisa membantu rekan-rekan blogger yang ingin membenahi blognya juga.

1. Mengganti kode DOCTYPE default dari blogger menjadi type transitional. Hasilnya, jumlah error pun berkurang dari 198 errors menjadi 125 Errors.

valid1 

--> Masuk ke menu Edit HTML blog kalian, dan cari kode berikut ini :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

--> Kemudian ganti kode tersebut dengan kode dibawah ini :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2. Gw menghapus semua tanda strip (-) pada kode default template blogger. Hasilnya, jumlah warning yang tadinya 143 menjadi 132 warning.

valid2 

--> Kode default dari blogger biasanya akan terlihat seperti ini :

<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name:     Minima
Date:     26 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */

--> Hapus tanda strip (-) yang ngga penting tersebut.

<b:skin><![CDATA[/*
Blogger Template Style
Name:     Minima
Date:     26 Feb 2004
Updated by: Blogger Team
*/

Note: Cek juga tanda strip (-) pada bagian template lainnya. Biasanya, struktur template di pisahkan dengan kode seperti ini :

/* Sidebar Content
------------------------------- */

Kalo strukturnya seperti yang diatas, hapus tanda stripnya dan sederhanakan menjadi

/* Sidebar Content */

3. Gw menghapus kode <b:include data='blog' name='all-head-content'/> dari template. Hasilnya, jumlah error kembali berkurang menjadi 121 error. Warning masih berjumlah 132.

--> Cari kode tersebut dan hapus dari blog kalian. Biasanya kode tersebut ada di dekat kode <head>

4. Gw menghapus navbar asli dari blogger. Hasilnya berkurang menjadi 119 errors dan 122 warning(s).

--> Cari kode </head> dan ganti dengan kode berikut ini :

</head>
<!-- <body>
<div></div> -->

Note: Menghapus Navbar sebenarnya melanggar TOS blogger. Tapi kalo memang mau valid XHTML, ngga ada cara lain selain menghapusnya. Seperti yang gw bilang, fitur default dari blogger itu semuanya ngga Valid XHMTL.

5. Kalo kalian menemukan penulisan meta content dalam huruf besar, maka gantilah dengan huruf kecil. Contoh:

<META content='1b911dc834bf2d9e' name='y_key'/>
diganti menjadi,
<meta content='1b911dc834bf2d9e' name='y_key'/>

6. Gw menghapus semua kode <b:include name='quickedit'/> dari template. Sekarang hasilnya berkurang dratis menjadi 61 Errors, 17 warning(s).

--> Gunakan CTRL+F dan hapus semua kode <b:include name='quickedit'/> dari blog kalian.

7. Gw menambahkan jenis type="text/javascript" pada semua kode javascript yang ada. Contoh:

<script src="http://www.ripway.com/keichiro/recentpost.js"></script>
menjadi,
<script type="text/javascript" src="http://www.ripway.com/keichiro/recentpost.js"></script>

8. Gw memasukkan element tag dan title ke dalam semua image/gambar (baik dalam konten post ataupun pada layout template). Contoh penggunaan :

<img alt='Blogger Abstrak' title='Berbagi Berita Cerita dan Derita' src='http://photoserver.ws/images/02.png'/>

Hasilnya sekarang sudah menjadi 24 Errors, 17 warning(s). Sudah jauh berkurang dari yang tadinya 198 Errors dan 143 warning(s).

valid3

Sebenarnya, hasil tersebut masih bisa dikompress lagi. Tapi berhubung widget Facebook Like, Blog-pager, Followers dan Polling masih mau gw pertahankan, maka gw rasa hasil ini udah yang paling maksimal buat blog gw.

Bisa dibilang, gw memang sengaja ngga mau terlalu valid. Setidaknya sampai gw nemuin cara baru lagi buat ngakalin widget-widget yang lain. ^^

Situs-situs besar seperti Facebook, Twitter, Google hingga Bing pun ngga begitu mementingkan masalah kevalid XHTML. Coba deh liat screenshot berikut ini :

--> Facebook
valid-XHTML-facebook

--> Twitter
valid-XHTML-Twitter 

--> Google
valid-XHTML-Google

Sekarang, tinggal pilih sendiri deh. Mau Valid XHTML atau ngga.. hehe..

Post ini diterbitkan pada : Tuesday, November 2, 2010

17 Cara Mengedit Widget Pada Template Black Transform

Bagi teman-teman yang sudah memakai Template Black Transform, berikut ini adalah tutorial mengenai cara mengedit widget-widget yang disertakan pada template tersebut. Pastikan kalian sudah berada pada menu Edit HTML account blog kalian pada saat mengikuti tutorial ini. Kalo udah, kita langsung ke TKP. Berangkatttt..

Free-blogger-template-black-transform-column

***** Mengedit Link Follow Us *****

Widget Follow us facebook twitter

Cari kode : <div id='header2-wrapper'> , dan perhatikan kode dibawah elemen tersebut :

<h2>Follow Us</h2>
<ul id='soc'>
    <li><a class='facebook' href='http://www.facebook.com/pages/blogger-abstrak/108579879204062' title='Be my facebook fan'>Facebook</a></li>
    <li><a class='twitter' href='http://www.twitter.com/angga_leoputra' title='Folow me on Twitter'>Twitter</a></li>
</ul>

--> Ganti teks berwarna Merah dengan Judul Widget yang kalian inginkan.
--> Ganti teks berwarna Biru dengan alamat situs sosial kalian masing-masing.

***** Mengedit Widget New Articles *****

Widget-Artikel-Terbaru

Widget New Articles berada pada elemen <div id='kolom1'>

1. Untuk merubah judul widget, cari kode :

<h2>New Articles</h2>

--> Ganti teks New Articles dengan judul yang kalian inginkan.

2. Untuk merubah jumlah post yang tampil, cari kode :

numposts = 10;

--> Ganti angka 10 dengan jumlah post yang ingin ditampilkan.

3. Selanjutnya, cari kode :

home_page = &quot;http://anggaleoputra.blogspot.com/&quot;;

--> Ganti teks http://anggaleoputra.blogspot.com/ dengan alamat blog kalian. Format penulisan diakhiri dengan tanda garis miring "/"

***** Mengedit Widget Slideshow *****

Widget-Slideshow

Widget Slideshow berada pada elemen <div id='kolom2'>

Cari kode <div id='sizzles'> , dan perhatikan format penulisan kode dibawah elemen tersebut :

    <div id='sizzles'>
<a href='http://anggaleoputra.blogspot.com'><img id='sizzleImg0' src='http://photoserver.ws/images/Mm9T4cc3293f5fc12.jpg'/></a>
<div class='sizzle_title' id='sizzle_title0'>
<a href='http://anggaleoputra.blogspot.com'>Rounded Black</a></div>

--> Teks berwarna Biru adalah Alamat Link Tujuan ketika judul artikel/gambar di klik. Ganti dengan URL tujuan yang kalian inginkan.
--> Teks berwarna Merah adalah Alamat Tempat Foto Kalian Di Upload/Simpan. Ganti dengan URL gambar kalian.
--> Teks berwarna Orange adalah Judul Artikel/Gambar . Ganti dengan judul yang kalian inginkan.

Lakukan hal yang sama pada baris-baris kode berikutnya.

Jangan sungkan untuk bertanya bila mengalami kesulitan dalam mengaplikasikan tutorial diatas.

Post ini diterbitkan pada : Monday, November 1, 2010

5 Membuat Blog Menjadi Mobile Friendy

Dengan kehadiran handphone-handphone yang lebih banyak difokuskan pada fitur chat dan browsing, Sekarang hampir semua orang udah bisa mengakses internet dengan mudah. Kapanpun dan dimanapun itu. Ya, cukup mengeluarkan dana sebesar 300ribu aja, HP berfitur aplikasi chatting dan browsing udah menjadi milik kita.

Mengakses internet dengan HP pun udah menjadi pilihan banyak orang, karena ringan dan mudah dibawa kemana-mana. Hal ini tentu saja ngga boleh luput dari perhatian kita, para blogger. Kita harus membuat blog kita menjadi "Mobile Friendly" alias "ringan dan sederhana".

Kepuasan para pengunjung yang datang dari browser HP juga perlu kita perhatikan. Tampilan blog yang terlihat bagus pada kompi, belum tentu terlihat sama pada HP. Design yang "Wuah" pada layar kompi, bisa menjadi "Wuekz" pada layar HP.

web-mobile-friendly

Bagaimana caranya membuat blog kita menjadi Mobile Friendly ?

Perbedaan yang paling mencolok antara kebutuhan pengunjung yang menggunakan HP dan Detskop adalah masalah Tampilan dan Size. Semakin kecil ukuran sebuah situs, semakin mudah dan murah juga untuk diakses melalui HP. Karena itu, hal terpenting yang harus kita lakukan adalah memperkecil ukuran blog kita.

Coba deh lihat situs-situs besar semacam Facebook dan Twitter. Situs mereka ketika di akses melalui HP dibuat berbeda dengan tampilan untuk browser kompi. Tampilan untuk web jauh lebih sederhana dan ringan. Hal ini tentu saja membuat biaya pemakaian pulsa juga berkurang bagi pengguna handphone.

Melihat data-data diatas, kita bisa menyimpulkan bahwa blog yang Mobile Friendly tentunya harus mengutamakan keringanan dan konten post diatas segala-galanya. Widget-widget bisa kita kesampingkan, karna pengunjung lebih berfokus kepada dua hal tersebut.

Pointnya udah kita dapat. Sekarang kita bisa mengunakan bantuan Google Reader untuk memimalis tampilan blog kita, sehingga menjadi Mobile Friendly.

Google Reader mempunyai kemampuan untuk menghasilkan tampilan versi mobile dari RSS Feed web kita dengan begitu mengagumkan. Yang kita perlukan hanyalah alamat RSS Feed dari situs kita untuk membuat halaman mobile website.

Cukup dengan memasukkan alamat url feed blog kita seperti contoh dibawah ini, maka blog kita udah bisa tampil dalam versi Mobile :

http://www.google.com/reader/m/view/feed/[url_feed_anda]

Teks berwarna merah adalah alamat feed blog kita.

Untuk format penulisannya, kita akan pakai contoh alamat feed blog ini.

http://www.google.com/reader/m/view/feed/http://anggaleoputra.blogspot.com/feeds/posts/default

Sampai tahap ini, blog kita sudah 100% Mobile Friendly. Dan yang perlu kita lakukan selanjutnya adalah membuat blog kita bisa mendetect jenis browser yang digunakan oleh pengunjung secara otomatis. Apabila pengunjung datang dari browser HP, maka mereka akan di alihkan ke alamat blog kita via google reader. Sedangkan pengunjung yang datang dari browser detskop, akan tetap menuju blog utama kita.

Caranya?

1. Login ke Account / Dashboard blogger.

2. Masuk ke menu Rancangan / Design, kemudian pilih Edit HTML.

3. Letakkan kode dibawah ini sebelum kode <head>

<script type='text/javascript'>
(function(a,b){if(/android|avantgo|blackberry|blazer|compal|elaine|fennec|hiptop|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile|o2|opera m(ob|in)i|palm( os)?|p(ixi|re)\/|plucker|pocket|psp|smartphone|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce; (iemobile|ppc)|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))window.location=b})(navigator.userAgent||navigator.vendor||window.opera,&#39;http://www.google.com/reader/m/view/feed/http://anggaleoputra.blogspot.com/feeds/posts/default&#39;);
</script>

4. Ganti teks berwarna merah pada kode diatas dengan alamat url feed blog kalian yang sudah di gabungkan dengan URL Google Reader.

5. Simpan, dan coba akses blog kalian dari HP, atau bisa juga melalui Opera Mini Simulator.

Untuk simulator detskop Opera Mini versi 4.2 , kunjungi http://www.opera.com/mobile/demo/?ver=4
Untuk simulator versi terbaru (versi 5) , kunjungi http://www.opera.com/mobile/demo/

Apa sudah berjalan?

Kalo udah, sekarang saatnya cari ilmu lain lagi.. hehe..

See u..

Post ini diterbitkan pada : Sunday, October 31, 2010

4 Cara Menampilkan Foto Avatar Pada Komentar

avatar-komentar-blogger
Sebelum kita mulai tutorial yang di request oleh saudara Rizal ini, pertama-tama pastikan settingan untuk foto komentar kalian sudah benar. Caranya? Login dulu ke Akun/ Dashboard, pilih Pengaturan / Setting kemudian masuk ke menu Komentar / Comment.

Scroll sampai ke bagian paling bawah, dan berikan tanda centang pada Show profile images on comments?

Menampilkan-foto-komentar

Kalau settingan komentar sudah benar, maka kita lanjut ke pengaturan kode CSS nya.

1. Masuk ke tab Rancangan / Design, lalu pilih menu Edit HTML.

2. Backup template dulu sebelum mulai mengedit. Caranya, klik link Download Template Lengkap. (Sambil nunggu, jangan lupa berdoa)

backup-template

3. Beri tanda centang pada link Expand Template Widget

expand-widget-template

4. Cari kode ]]></b:skin>

5. Ganti kode tersebut dengan kode dibawah ini :

.avatar-image-container{float:left;width:40px;height:40px;background:#fff;padding:1px;border:1px solid #ccc;margin:0px 10px 0px 0px;}
.avatar-image-container img { background:transparent url(http://photoserver.ws/images/qoyS4cc437164683f.jpg)no-repeat;width:40px; height:40px;}
]]></b:skin>

6. Lanjut lagi, cari kode <dl id='comments-block'> atau <div id='comments-block'>

7. Jika elemen template kalian memakai kode dl, gantilah dengan kode berikut :

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

  • Jika memakai div, ganti dengan kode yang ini :

<div expr:class='data:post.avatarIndentClass' id='comments-block'>

8. Cari (lagi) kode <a expr:name='data:comment.anchorName'/>

9. Ganti dengan kode berikut :

<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>

10. Simpan dan lihat hasilnya.

Happy blogging.

Post ini diterbitkan pada : Sunday, October 24, 2010

1 comments Cara Menghilangkan Tanda Quickedit (Icon Tang & Obeng)

icon-quickedit Dalam keadaan login ke account gmail/Blog, kita akan melihat tanda tang dan obeng pada widget-widget yang terpasang pada blog kita. Ini sebenarnya tidak akan mengganggu kenyamanan pengunjung, karena icon ini hanya terlihat pada account kita, tidak pada halaman yang dilihat pengunjung. Tapi bila anda merasa terganggu dengan tampilannya, anda bisa menghilangkannya koq.

1. Login ke Account / Dashboard blog anda.

2. Masuk ke pilihan Design / Rancangan.

3. Pilih menu Edit HTML.

4. Cari kode ]]></b:skin>

5. Ganti kode tersebut dengan kode berikut ini :

.quickedit {display:none !important;}
]]></b:skin>

6. Save, dan lihat hasilnya.

Mudah kan?

Post ini diterbitkan pada : Saturday, October 23, 2010

7 Membuat Widget Hanya Terlihat Pada Halaman Post

Widget Hanya terlihat di halaman post Dengan menambahkan beberapa kode pada template, kita bisa membuat sebuah widget hanya tampil pada halaman membaca artikel (Post page) saja,dan tidak tampil pada halaman depan blog (Home Page). Bagaimana caranya? Kita pakai cara yang paling mudah aja.. Let see.

1. Login ke Account/Dashboard blog kalian,kemudian pilih tab Design/Rancangan.

2. Masuk ke menu Edit HTML.

3. Cari kode ]]></b:skin>

4. Ganti kode tersebut dengan kode di bawah ini :

]]></b:skin>
<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
#HTML1 {display:none}
#HTML3 {display:none}
</b:if>
</style>

5. Perhatikan teks berwarna biru diatas.. itu adalah kode id elemen yang akan kita buat tampil di halaman artikel /post saja. Ganti kode tersebut dengan id widget kalian. Bagaimana cara mengetahui kode id tersebut pada template kalian?

Kalian bisa mencari berdasarkan judul widgetnya. Teks warna merah dibawah adalah judul widget,sedangkan yang berwarna biru adalah id widgetnya.

<div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML1' locked='false' title='Subscribe' type='HTML'/>
<b:widget id='HTML2' locked='false' title='Free Template' type='HTML'/>
<b:widget id='HTML3' locked='false' title='New Tutorial' type='HTML'/>
</b:section>
      </div>

NB: Pada contoh diatas,berarti widget yang hanya akan tampil dihalaman artikel/post adalah widget Subscribe dan New Tutorial. Sedangkan pada halaman depan blog (Home Page),kedua widget tersebut ngga akan terlihat.

6. Save template,dan lihat hasilnya.

Untuk membuat widget hanya terlihat pada halaman home,bisa membaca post ini :
http://anggaleoputra.blogspot.com/2010/10/cara-membuat-widget-hanya-terlihat-di.html

6 Cara Membuat Widget Hanya Terlihat di Halaman Home

gdata-blogger-icon Dengan menambahkan beberapa kode pada template, kita bisa membuat sebuah widget hanya tampil pada halaman depan blog (Home page) saja,dan tidak tampil pada halaman membaca artikel (Post Page). Bagaimana caranya? Kita pakai cara yang paling mudah aja.. Let see.

1. Login ke Account/Dashboard blog kalian,kemudian pilih tab Design/Rancangan.

2. Masuk ke menu Edit HTML.

3. Cari kode ]]></b:skin>

4. Ganti kode tersebut dengan kode di bawah ini :

]]></b:skin>
<style type='text/css'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
#HTML1 {display:none}
#HTML3 {display:none}
</b:if>
</style>

5. Perhatikan teks berwarna biru diatas.. itu adalah kode id elemen yang akan kita buat tampil di halaman home saja. Ganti kode tersebut dengan id widget kalian. Bagaimana cara mengetahui kode id tersebut pada template kalian?

Kalian bisa mencari berdasarkan judul widgetnya. Teks warna merah dibawah adalah judul widget,sedangkan yang berwarna biru adalah id widgetnya.

<div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML1' locked='false' title='Subscribe' type='HTML'/>
<b:widget id='HTML2' locked='false' title='Free Template' type='HTML'/>
<b:widget id='HTML3' locked='false' title='New Tutorial' type='HTML'/>
</b:section>
      </div>

NB: Pada contoh diatas,berarti widget yang hanya akan tampil dihalaman depan blog adalah widget Subscribe dan New Tutorial. Sedangkan pada halaman membaca artikel,kedua widget tersebut ngga akan terlihat.

6. Save template,dan lihat hasilnya.

Untuk membuat widget hanya terlihat pada halaman post,ikuti tutorialnya di :
http://anggaleoputra.blogspot.com/2010/10/membuat-widget-hanya-terlihat-pada.html

Post ini diterbitkan pada : Tuesday, October 19, 2010

4 Membuat Widget Social Bookmark

Salah satu cara untuk menambah jumlah pengunjung adalah dengan mempromosikan blog kita melalui situs-situs jejaring sosial. Oleh karna itu,memasang widget social bookmark di blog kita juga sangat diperlukan. Dengan sedikit berkreasi menggunakan photoshop dan teknik Sprite pada CSS3,kita bisa membuat widget social bookmark yang simpel dan keren.
( Klik pada gambar untuk melihat previewnya )
social bookmark
Tertarik untuk membuatnya?,silahkan ikuti step-step cara pembuatannya berikut ini..
1. Login ke Account/Dashboard blog kalian. Pilih Rancangan/Design.
2. Klik Add a Gadget dan Pilih HTML/JavaScript.
add a gadget html javascript
3. Sebuah halaman baru akan terbuka.
memasukkan kode html
4. Masukkan kode di bawah ini ke dalam kolom Konten/Content.
<ul id="soc">
    <li><a class="facebook" href="http://www.facebook.com/pages/blogger-abstrak/108579879204062" title="Be my facebook fan">Facebook</a></li>
    <li><a class="twitter" href="http://www.twitter.com/angga_leoputra" title="Folow me on Twitter">Twitter</a></li>
    <li><a class="rss" href="http://feeds.feedburner.com/infogaul/feed" title="Subscribe via RSS">rss</a></li>
    <li><a class="mail" href="http://feedburner.google.com/fb/a/mailverify?uri=Infogaul/feed" title="Subscribe to Email updates">email</a></li>
    <li><a class="google" href="http://www.google.com/friendconnect/signin/home?st=e%3DAOG8GaCke6EyES7R%252F9vQV5GbUWRJF1fu2rLjjX8fsVKsnv%252BUZJKZE4NAmdyu0XQgIXM9gdqI%252FvpboOpFyglpdV6Ty1PGzveP%252Bc71pwG8jbWh7HYxnBN%252BTV6%252BYcxszDlrJB6JZ6WWuGE%252B2e3eoPcHsW6Qols5LSOtoN%252BqF22EbtCfkcY5D4DIL3xFYOSKUMLOoi52z94sqJFW%252FVXy0fnf2UGhFG9FAG57LZLxus2kR%252BLo6nV2ggDqtx8%253D%26c%3Dpeoplesense&psinvite=&subscribeOnSignin=1" title="Follow Via Google Friend Connect">email</a></li>
</ul>
5. Kode diatas menggunakan URL dari blog ini.. ganti kode berwarna biru dengan URL kalian sendiri,lalu save.
6. Beralih ke menu Edit HTML.
menu edit html blogger
7. Cari kode ]]></b:skin> menggunakan CTRL+F pada browser kalian,dan ganti kode tersebut dengan kode berikut ini :
ul#soc{width:250px;margin:0px auto;list-style:none;padding:0px}
ul#soc li {display:inline;}
ul#soc li a {padding:0px;margin:0px;display:inline-block;float: left;  height: 50px;background: url('http://img201.imageshack.us/img201/2135/socialbutton.png')no-repeat center; text-indent:-9999px;}
ul#soc li a.facebook {width:50px;background-position:0 0;}
ul#soc li a.twitter {width:50px; background-position: -50px 0;}
ul#soc li a.rss {width:50px;background-position: -100px 0;}
ul#soc li a.mail {width:50px;background-position: -150px 0;}
ul#soc li a.google {width:50px;background-position: -200px 0;}
ul#soc li a.facebook:hover,ul#soc li a.facebook:focus {background-position: 0 -50px;}
ul#soc li a.twitter:hover,ul#soc li a.twitter:focus{background-position:-50px -50px;}
ul#soc li a.rss:hover, ul#soc li a.rss:focus {background-position: -100px -50px;}
ul#soc li a.mail:hover, ul#soc li a.email:focus {background-position: -150px -50px;}
ul#soc li a.google:hover, ul#soc li a.email:focus {background-position: -200px -50px;}
]]></b:skin>
8. Save template dan lihat hasilnya.
Semoga bermanfaat.

My Tweet

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