Membuat Loading Blog Lebih Cepat

Kalo misalnya ada orang yang buka blog kalian, trus nunggunya lam, apa yang terjadi? pasti males kan yang mau buka tu blog?
makanya, ini ada beberapa tips buat temen-temen semua biar proses loadingnya lebih cepat,,

1. Jangan memasang aksesoris yang terlalu berat(ex:lagu,flash apps) dan banyak, yang penting kn isinya?
2. Buat postingan kamu jadi read-more, cara membuat auto read more juga sudah pernah saya post di artikel sebelumnya, atau jika ingin tahu tutorialnya, klik di sini
3. Jangan buat header yang terlalu besar, lagian ntar kalo kebesaran kepala jadi sombong donk? hehehe,,,
4. kompresi css, ini kayaknya cara yang cukup efektif, tentang kompresi css ini juga sudah ada pada artikel saya sebelumnya, bisa juga di lihat di sini. 
5. Jangan beri animasi pada background blogmu, itu adalah widget yang sangat berat dan sepertinya tidak terlalu bermanfaat
6. Jangan pasang banner terlalu banyak,
7. Buat related post agar pengunjung bisa membuka postingan lain tanpa harus kembali ke halaman sebelumnya, artikel tentang related post bisa di lihat di sini

Nah, itu tadi beberapa cara yang bisa digunakan agar blog kamu loadingnya nggak terlalu lama,,,
Enjoy!!!
(^_^)

Read more >> >

Kompresi css

Wahh, lama gag ngepost artikel nih, gara-gara ada semesteran, tapi kini saya kembali dengan tips yang mudah-mudahan bisa membantu kalian semua, , ,
Kali ini tentang kompresi css, apa itu kompresi css? ini adalah penyederhanaan kode css yang ada di blog kamu,
kompresi css ini juga bisa membuat blog kamu loadingnya cepet loh!!!
Gag percaya? coba aja,,,
nah, kan kalo kamu yang nyederhaaain sendiri pasti gag bisa, ya kan? hahaha,,,
makanya saya di sini akan membantu temen-temen buat mengkompres css kalian, tapi nggak secara manual, ada website penyedia layanan kompresi css yang cukup manjur, yaitu di CSS DRIVE. begini langkahnya:

1. Masuk pada CSS DRIVE 
2. kemudian pilih mode kompresi yang kamu inginkan
   -light : mode ini mengkompresi kode css blog kamu secara ringan atau bisa dibilang tidak terlalu kecil
   -normal : mode ini mengkompresi kode css blog kamu sewajarnya
   -super compact : mode ini mengkompresi kode css blog kamu sangat berat,atau membuat kode css kamu sangat simple.
   (semakin ke bawah semakin cepat nantinya loading blog kamu, tapi itu juga membuat semakin rumit kode css kamu, dan berakibat sulitnya jika nanti kamu pengen memodifikasi ulang kode-kode tersebut)
3. pada comments handling pilih 'don't strip any comment',
4. pada kolom insert css kode, masukkan kode css blog kamu, letaknya di antara <b:skin><![CDATA[ dan ]]></b:skin>
5.  compress it!
6. Nah, sekarang ganti kode css kamu dengan kode yang terpampang setelah terkompres,,,
7. Simpan, , , 

Sekarang coba kamu reload blog kamu, pasti lebih cepet kan,,,,
Enjoy!!!
(^_^)

Read more >> >

Biar template lama gag hilang abis coba-coba

Buat teman-temanku yang masih gonta-ganti template karena coba-coba,,,
setiap ganti template, template yang lama biasanya ilang kan?
truz kalo template yang baru ngga' cocok, pengen balik ke template yang baru diganti jadi bingung karena hilang,
Nah, ini biasanya salah satu faktor yang bikin kalian males ngutak-ngatik blog kalian lagi, iya kan? Udah, ngaku aja,,,
Sebenarnya ada jalan keluarnya, dan sudah banyak di bahas, kalian aja sieh yang gag tau, hehehe,,
Pada edit HTML, ada tulisan Download Template Lengkap gini kan?
sebelum kalian mengganti template, saya sarankan untuk membuat back-upnya dengan meng-klik kode di atas,,,
kalo template yang kalian baru pasang ngga' sesuai, kan ada back-upnya?
jadi y tinggal upload file yang lama lagi, , ,
Semoga bisa bantu teman-teman,,,
Enjoy, , ,
(^_^)

Read more >> >

membuat related post (posting terkait)

Biar pengunjung gampang ngeliat posting kita dari satu postingan ke postingan lain, bisa di gunakan related post atau posting terkait,,
ini menampilkan postingan lain berlabel sama di bawah postingan yang sedang dilihat,,
begini caranya,,,

1. seperti biasa, masuk ke edit HTML
2. and jangan lupa centang expand template widget
3. cari kode <data:post.body/>
4. kemudian copy kan kode di bawah ini di bawah kode di atas:
   
   
   <b:if cond='data:blog.pageType == "item"'>
   <div class='similiar'>
   
   <div class='widget-content'>
   <h3>Related Post</h3>
   <div id='data2007'/><br/><br/>
   <script type='text/javascript'>
   
   var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
   var maxNumberOfPostsPerLabel = 4;
   var maxNumberOfLabels = 10;
   
   maxNumberOfPostsPerLabel = 100;
   maxNumberOfLabels = 3;
   
   
   function listEntries10(json) {
   var ul = document.createElement(&#39;ul&#39;);
   var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
   json.feed.entry.length : maxNumberOfPostsPerLabel;
   for (var i = 0; i &lt; maxPosts; i++) {
   var entry = json.feed.entry[i];
   var alturl;
   
   for (var k = 0; k &lt; entry.link.length; k++) {
   if (entry.link[k].rel == &#39;alternate&#39;) {
   alturl = entry.link[k].href;
   break;
   }
   }
   var li = document.createElement(&#39;li&#39;);
   var a = document.createElement(&#39;a&#39;);
   a.href = alturl;
   
   if(a.href!=location.href) {
   var txt = document.createTextNode(entry.title.$t);
   a.appendChild(txt);
   li.appendChild(a);
   ul.appendChild(li);
   }
   }
   for (var l = 0; l &lt; json.feed.link.length; l++) {
   if (json.feed.link[l].rel == &#39;alternate&#39;) {
   var raw = json.feed.link[l].href;
   var label = raw.substr(homeUrl3.length+13);
   var k;
   for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
   var txt = document.createTextNode(label);
   var h = document.createElement(&#39;b&#39;);
   h.appendChild(txt);
   var div1 = document.createElement(&#39;div&#39;);
   div1.appendChild(h);
   div1.appendChild(ul);
   document.getElementById(&#39;data2007&#39;).appendChild(div1);
   }
   }
   }
   function search10(query, label) {
   
   var script = document.createElement(&#39;script&#39;);
   script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
   + label +
   &#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
   script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
   document.documentElement.firstChild.appendChild(script);
   }
   
   var labelArray = new Array();
   var numLabel = 0;
   
   <b:loop values='data:posts' var='post'>
   <b:loop values='data:post.labels' var='label'>
   textLabel = &quot;<data:label.name/>&quot;;
   
   var test = 0;
   for (var i = 0; i &lt; labelArray.length; i++)
   if (labelArray[i] == textLabel) test = 1;
   if (test == 0) {
   labelArray.push(textLabel);
   var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
   labelArray.length : maxNumberOfLabels;
   if (numLabel &lt; maxLabels) {
   search10(homeUrl3, textLabel);
   numLabel++;
   }
   }
   </b:loop>
   </b:loop>
   </script>
   </div>
   
   </div>
   </b:if&gt;
   
   
5. Simpan

Nah, lihatlah di salah satu postinganmu, , ,
Dan, Voila!!!
mission completed,,
Enjoy,,,
(^_^)

Read more >> >

Tulisan berkedip

Kali ini menambahkan tentang teks, tapi yang kali ini bukan yang jalan, tapi berkedip-kedip, tapi gag genit lohhh, hehehe,,,

Langsung caranya aja yak?
gampang koq, letakkan teks yang pengen kamu buat berkedip di antara kode berikut
<blink>teks berkedip</blink>

seperti contoh di bawah ini
teks berkedip
teks berkedip ini bisa digabungkan dengan teks berjalan di postingan sebelumnya,,,
Voila!!!
kamu dapatkan teks yang agak genit nieh,,,
Enjoy!!! (^_^)

Read more >> >

Tag Cloud animasi

Kalian tau tag cloud kan?
itu loh, yang biasanya isinya label-label dari postingan-postingan kamu,,,
sekarang gimana kalo tuh tag cloud gag cuma diem?
bisa gerak-gerak sendiri gitu?
wah, horor donk? hehehe, bukan gitu, gerak sendiri kalo cursor kita deketin ke tuh tag cloud,,,
penasaran? langsung praktekin aja,,,

1. as always, masuk ke edit HTML
2. simpen dulu pake Download Template Lengkap, biar nanti kalo gag cocok tinggal ganti lagi dengan yang lama
3. cari kode ini nieh
   
    <b:section class='sidebar' id='sidebar' preferred='yes'>
4. kalo udah ketemu, taruh kode yang ini tepat di bawahnya
   
   <b:widget id='Label88' locked='false' title='Tag Cloud' type='Label'>
   <b:includable id='main'>
   <b:if cond='data:title'>
   <h2><data:title/></h2>
   </b:if>
   <div class='widget-content'>
   <script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
   <div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://hermanblogtips.blogspot.com'>Herman Blog</a></div>
   <script type='text/javascript'>
   var so = new SWFObject(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;200&quot;, &quot;150&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
   // uncomment next line to enable transparency
   //so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
   so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
   so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
   so.addVariable(&quot;distr&quot;, &quot;true&quot;);
   so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
   so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='14'><data:label.name/></a></b:loop></tags>&quot;);
   so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
   so.write(&quot;flashcontent&quot;);
   </script>
   <b:include name='quickedit'/>
   </div>
   </b:includable>
   </b:widget>
5. Simpan

seperti bysa, ukuran widgetnya bisa di edit sendiri d width dan height dan lain-lain, seua bisa di edit sesuai selera Anda, hehehe,,,
Voila!!!
lihatlah, tag cloudmu bergerak!!!
Enjoy,,,
(^_^)

Read more >> >

ada yang bisa bantu?

Guys, ma'af ya, banyak temen yang pengen saya follow, tapi ada kendala nieh, paz mw follow kalian semua, pasti kalo mw follow, selalu ada tulisan kaya gini,,,
"Kami minta maaf...

Kami tidak dapat menangani permintaan Anda. Coba lagi dan kembali nanti."

ada yang bisa bantu gak? biar bisa follow kalian semua nieh, hehehe,,,
kalau ada yang tau, tlong kasih komen yak???
terima kasih,,,,
(^_^)

Read more >> >

Tanda Tangan Digital

gimana ya biar postingan kita terlihat otentik?
gimana kalo di tanda tanganin aja?
yah, gag usah bingung,,,
banyak koq penyedia layanan tanda tangan digital,,
misalnya di mylivesignature,,
di sini gag perlu daftar biisa langsung buat tanda tanganmu sendiri,,,
kamu akan di beri 3 pilihan setelah meng-klik "Click Here to Start"

1. Using signature creation wizard
   ini cara yang paling gampang, tinggal masukkan namamu di sana dan otomatis tanda
   tanganmu jadi.
   
2. Draw a signature straight to the screen
   ini pilihan bagi yang tangannya udah jadi satu sam mouse-nya, hehehe,,,
   nggambar sendiri coy,,,
   
3. using scanned image
   ini harus pake scanner, ah daripada repot, gag usah di bahas aja yak?
   hehehe,,,

apapun yang kamu pilih dari ketiga pilihan di atas, setelah tandatanganmu jadi:

1. klik want to use this code?
2. klik pada generate HTML code, kemudian copy kode tersebut.
3. masuk dasbor>pengaturan>format
4. pada template entri, pastekan kode HTML yang kamu dapat tadi,
5. simpan.

Voila!!!
Lhoh? mana? postingannya gag ada tanda tangannya?
tenang,tenang,, tanda tangan ini berlaku pada postingan yang kamu posting setelah kamu mengaplikasikan tandatangan ini,,,
tapi kalo pengen di kasi tanda tangan pada postingan sebelumnya, ya tinggal paste-kan koe tadi pada postingan-postingan kamu sebelumnya,,,
Enjoy,,,
(^_^)

Read more >> >

Drop Cap

Sekarang waktunya memperindah blog lewat postingan kita, gimana kalo postingan kita di awali dengan huruf cetak besar seperti di majalah atau koran-koran?
berhubung saya ini baik hati dan tidak sombong,,,(wkwkwk, gag ada yang muji sieh), gini nieh caranya :

1. yang pasti masuk edit HTML
2. dan seperti biasa, centang expand widget template-nya
   
3. langsung cari kode 
    <b:skin><![CDATA[
4. copy kan kode ini di bawah kode sebelumnya
   
   
   /*dropcap*/
   .post t{
   float:left;
   color:#004EFF;
   font-family: Castellar;
   font-size:60px;
   line-height:48px;
   padding-top:7px;
   padding-right:5px;
   }
5. simpan deh,,,

nah, sekarang gimana cara make'nya? pasti bingung kan? hehehe,,,
dan beginilah caranya biar gag bingung, taruh huruf yang pengen di dropcap di antara kode <t> dan </t>,,,
nb: color: warna dropcap
font-family: jenis teks
semuanya bisa di edit sesuai selera,,

cobalah pada salah satu postinganmu dan,,,
Voila!! kini postinganmu seperti di koran-koran,,,
enjoy,,,
(^_^)

Read more >> >

membuat favicon

sering kita lihat blog kita, pada bagian icon, hanya ada huruf "b" yang menandakan blogspot, , ,
ga' jrang juga kan kita ngerasa bosen dengan icon yang gitu-gitu aja?
pengen ganti icon? gampang,pengen tau caranya?
gini nieh,,,

1. pertama, buat atau paling gampang, browse aja di internet gambar yang kamu pengen, n simpen dulu buat sementara
2. next, tuh gambar biar bisa di jadiin icon, ubah dulu gambarnya, caranya, kamu bisa ke salah satu website icon generator, misalnya http://www.favicon generator.com.
3. kemudian klik tombol browse di sana dan pilih gambar yang tadi kamu pilih
4. klik generate favicon.
5. setelah beberapa saat proses, download dengan meng-klik click here to download your favicon dan simpan.
6. upload gambar tadi pada salah satu imagehosting, misalnya flickr atau photobucket tapi kamu harus mendaftar dulu, gag perlu khawatir, gampang koq daftarnya, tinggal ngikut cara yang ada pada masing-masing website.
7. kemudian copy kode url yang di dapet setelah uload di galerimu pada webhosting yang kamu pilih, misal kodenya seperti ini:
   
   http://www.geocities.com/icon_bagus/favicon.ico
   
   
8. kemudian tambahkan sedikit kode pada urlmu seperti ini:
   
   <link rel="shortcut icon" href="http://www.geocities.com/amn_tea/favicon.ico"/>


9. masuk ke blogmu dan langsung ke edit html
   
10. letakkan kode urlnya tepat di atas kode </head>
    

Dannn,,,
Voila!!!
jadilah icon kamu sendiri, Enjoy,,,(^_^)

Read more >> >

Membuat tombol "like" facebook pada blog

Biar cara menyukai artikel kita gak usah ribet, bagaimana kalau kita taruh tombol "like"nya facebook di sana?
siapa bilang gak bisa? bisa kok, gini caranya,,,

1. masuk ke edit html
2. centang expand widget template
3. cari kode <data:post.body/> , biar gampang, pake ctrl+f trus copykan kode tersebut ke dalam kotak pencarian
4. setelah ketemu, pastekan kode di bawah ini di bawah kode tersebut di atas,,,(haha, ribet ya ngomongnya?)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:410px; height:40px;'/> 
</b:if>


5.simpan perubahan

nah, sekaranglihat pada salah satu postinganmu dan,,,
voil!!!
lihat ada tombolnya di sana,,,
Enjoy,,, (^_^)

Read more >> >

Cara membuat tulisan berjalan

Kali ini mbahas tentang tulisan yang bisa jalan-jalan nieh,,, biar di liat gag diam aja, biar tambah gaya gitu,, hehehe,,,
misalnya kaya' gini nie

1.) tulisan berjalan biasa

Tulisan berjalan

kodenya:<marquee behavior="scroll">Tulisan berjalan</marquee>

2.) tulisan jalan kekanan

Tulisan berjalan kekanan

kodenya:<marquee behavior="scroll" direction="right">Tulisan berjalan kekanan
</marquee>

3.) jalan ke atas

Tulisan berjalan ketas

kodenya:<marquee height="30" behavior="scroll" direction="up">Tulisan berjalan ketas
</marquee>

4.) atau mau yang mantul-mantul?

Tulisan mantul

kodenya:<marquee width="200" behavior="alternate">Tulisan mantul</marquee>

5.)bisa di stop jika dibayangi kursor

Tulisan berjalan akan stop bila dibayangi oleh cursor

kodenya:<marquee onMouseOver=this.stop() onMouseOut=this.start()>Tulisan berjalan akan stop bila dibayangi oleh cursor</marquee>

6.)yang jalannya lemot juga ada

Tulisan berjalan lambat

kodenya:<marquee behavior="scroll" scrolldelay=32 scrollamount=1>Tulisan berjalan lambat</marquee>

7.)zig-zag

Zig-zag

kodenya:<marquee behavior="alternate" direction="up" height="50px">
<marquee direction="right">Zig-zag</marquee>
</marquee>

8.)mantul-mantul gak jelas juga ad lowh!! awas mabok,,

Minggir-minggir!!

kodenya:<marquee behavior="alternate" direction="up" width="300" height="100">
<marquee direction="right" behavior="alternate">Bouncing around</marquee>
</marquee>

9.)yang ini ada backgroundnya

Tulisan berjalan dengan background.

kodenya: <marquee bgcolor="grey" style="color:white;">Tulisan berjalan dengan background.</marquee>


semua bisa di edit sesuai keinginan, atau kalo ada yang lain tolong ditambahin yah??? hehehe,,,
(^_^) Enjoy!!!

Read more >> >

Cara membuat jam pada blog

Jika ingin menambahkan jam digital di blogmu, langsung saja ke site penyedia jam digital, misalnya yang gampang n gratis di www.clocklink.com lalu kamu langsung bisa memilih jam seperti apa yang kamu inginkan melalui kategori-kategori yang tersedia, setelah kamu mengklik salah satu kategori, akan muncul beberapa pilihan tampilan, klik yang kamu inginkan, tentukan warna dan area waktunya,lalu copy kode yang berada dalam kotak yang atas.
setelah itu untuk menambahkannya pada blogmu, ikuti langkah-langkah berikut:

1. login
2. masuk ke pengaturan => elemen laman
3. tambah gadget
4. html/java script
5. paste kode yang sebelumnya kamu copy
6. simpan

Dan, abrakadabra, bukan sulap bukan sihir, ada jam pada baris widgetmu, , ,
Enjoy! ! !(^_^)

Read more >> >

Cara memberi kotak shoutbox

Buat yang pengen komunikasi di blog selain lewat komentar, juga bisa melalui shoutbox pada blog. cara membuatnyapun juga mudah, contohnya pada www.shoutmix.com ini hanya salah satu penyedia layanan shoutbox.
jika sudah masuk shoutmix, klik pada create shoutbox, kemudian isi semua informasinya, lalu contreng terms of servicenya, klik next.
tunggu beberapa saat, kamu akan masuk ke bagian setting, langsung saja klik get codes pada kolom quick start, atau kalo pengen custom shoutboxmu, bisa di klik pada kolom display, kamu bisa mengedit warna, smileynya, dan lain-lain. jika sudah puas dengan hasil custommu sendiri klik save setting, dan klik pada get codes, di sini kamu bisa mengatur ukuran yang nantinya akan di tampilkan, atau bisa di edit belakangan saat memasukkan kode html-nya. copy kode htmlnya.
sekarang masuk pada langkah menambahkannya di blogmu.

1. login
2. masuk ke pengaturan => elemen laman
3. tambah gadget
4. html/java script
5. paste kode yang sebelumnya kamu copy
6. simpan

untuk mengatur lebar dan panjang shoutboxmu perhatikan pada angka setelah kode width dan height, kamu bisa mengaturnya sesuai keinginanmu, dan silahkan mencoba!! (^_^)
Enjoy!!!

Read more >> >

Cara membuat "Read more" pada posting

Cara ini lebih praktis daripada melakukannya secara manual, dengan auto "read more" ini, semua postingan akan secara otomatis di beri "read more". Dan langsung saja, untuk membuat "read more" otomatis, masuk pada Layout> edit HTML lalu centang 'Expand Widget Template', dan cari kode </head> kemudian ketikkan kode berikut di atas kode </head> tadi:

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 230;
summary_img = 140;
img_thumb_height = 100;
img_thumb_width = 100;
</script>
<script src='http://blogergadgets.googlecode.com/files/excerpt.js' type='text/javascript'/>

angka-angka di atas menunjukkan seberapa jumlah postingan yang ditampilkan sebelum di beri "read more".
Kemudian, cari kode berikut <data:post.body/> dan ganti saja dengan kode di bawah ini:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<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>
<div style='clear: both;'/>
<span style='padding-top:5px;;float:right;text-align:right;'><a expr:href='data:post.url' rel='bookmark'><b>Read more >></b></a></span>
</b:if>
</b:if>

kata "read more" di atas bisa kamu ganti dengan kata apapun sesuai seleramu.
Jangan lupa simpan perubahannya, dan voila!!! Lihat apa yang terjadi pada post-postmu.


Enjoy!!!

Read more >> >