Archive for February 2013


Kali ini saya akan mencoba berbagi sedikit tutorial yang cukup sederhana mengenai Cara Membuat Daftar Isi Blog Otomatis Berdasarkan Tanggal Posting. Tutorial ini sekaligus melanjutkan artikel sebelumnya mengenai Cara Membuat Daftar Isi Blog Otomatis Berdasarkan Label. Dalam pengelompokkannya, tidak hanya artikel dengan tanggal posting saja yang muncul di melainkan bulan dan tahun terbit artikelnya pun juga akan mengelompokkan artikel - artikel yang telah kita buat dari awal pertama kali blogging sampai sekarang ini. Dan Berikut tutorialnya :

Pertama masuk dahulu ke dalam akun Blogger anda. Buka menu Posting atau Posts kemudian kita klik Entri Baru atau New Post. Setelah masuk ke dalam halaman editor posting pilih dalam mode HTML bukan Compose. Lalu copy paste kan kode di bawah ini ke dalam halaman editor posting :
<script src="http://kiosbisnis-daftarisi.googlecode.com/files/DaftarIsiTanggal_KiosBisniscom.js"></script><script src="http://www.kiosbisnis.com/feeds/posts/default?max-results=999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
Ganti text yang berwarna merah diatas dengan alamat blog anda. Simpan dan Lihat hasilnya. Berikut tampilan daftar isi berdasarkan tanggal posting.
Sama seperti pada artikel tutorial sebelumnya, jika anda ingin menambahkan fungsi scroll maka cukup menambahkan script diatas dengan script berwarna biru di bawah ini.
<div style="overflow:auto; border: 1px solid #000000; margin: auto; padding: 3px; width: 100%; height: 500px; background-color: none; text-align: left;"> <script src="http://kiosbisnis-daftarisi.googlecode.com/files/DaftarIsiTanggal_KiosBisniscom.js"></script><script src="http://www.kiosbisnis.com/feeds/posts/default?max-results=999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div> 
Jangan lupa untuk mengganti text yang berwarna merah diatas dengan alamat blog anda. Simpan dan Lihat hasilnya. Berikut tampilan daftar isi berdasarkan tanggal posting menggunakan fungsi scroll.
Sekian, Semoga Bermanfaat dan Selamat Mencoba.

Kali ini saya akan berbagi Tips dan Tutorial Blog yaitu Cara Membuat Daftar Isi Keren di Blog, daftar isi kali ini lain dari yang sebelumnya lebih bagus, keren dan praktis, juga bisa kamu bikin di Halaman Penuh.Jika kamu memasang Daftar isi kaya gambar di bawah ini maka akan tampil berupa Label nya setelah di Klik Judul Label nya maka akan terbuka bagian isi Label tersebut berupa judul posting nya.


Jika sobat berminat silahkan kamu Copy kode di bawah ini.

<style type="text/css">
#dafis-acc{ font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#333; background:url(http://lh3.ggpht.com/_xcD4JK_dIjU/S-KAWJugl3I/AAAAAAAAEBg/bY_3UzrECSg/d/bg5.gif) repeat-y scroll left center #E7F7FB; padding:2px 0; border:1px solid #339DC6; } .dafis-label{ background:url(http://lh5.ggpht.com/_7Y9pl24WpQY/Ss37F0ZA9kI/AAAAAAAAB2k/c_ySi8QZg20/header_thumb%5B2%5D.jpg) repeat-x scroll 0 0 #E1F4FB; font-weight:bold; line-height:1.4em; overflow:hidden; white-space:nowrap; vertical-align: baseline; margin: 1px 3px; outline: none; cursor: pointer; text-decoration: none; padding: 2px 10px; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.3); border:1px solid #2F94BA; } .dafis-label:hover{ background:ccc; repeat-x scroll 0 0 #E1F4FB; color:#003366; } .dafis-daf ol{ margin:0 0 0 30px !important; padding:0 !important; } .dafis-daf ol li{ background-color:#C9E9F4; line-height:1.5em; margin:1px 3px !important; white-space:nowrap; text-align:left; border:1px solid #339DC6; } .dafis-daf ol li a{ text-decoration: none !important; color:#333 !important; display:block; padding-left:10px; } .dafis-daf ol li a:hover{ background:#ccc; border-left: 5px #333 solid; padding-left: 5px; text-shadow: 0 1px 1px rgba(0,0,0,.3); }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
</script>
<script src="http://infonetmu.googlecode.com/files/Acc1.js" type="text/javascript">
</script>
<script src="http://blazerracing.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc">
</script>
Kamu ganti kode yang berwarna merah dengan alamat Blog kamu.
Kalau mau di Halaman Penuh.

  • Pilih Posting Baru.
  • Pilih Edit Html yang ada di samping Compose.
  • Lalu copy kode yang di atas.
  • Dan lihat hasilnya. 
Gimana mudah kan Cara Membuat Daftar Isi Keren.
SELAMAT MENCOBA


Daftar Isi atau yang sering kita sebut Sitemap pada umumnya kita gunakan sebagai petunjuk atau informasi sudah berapa banyak artikel yang selama ini sudah kita buat di dalam blog kita. Kadang kita merasa malas apabila kita harus membuat dan mengisi daftar isi tersebut secara manual setiap kali kita selesai meng update artikel. Maka dari itu kali ini saya akan berbagi informasi tentang bagaimana cara membuat daftar isi atau sitemap berdasarkan label secara otomatis mengisi sendiri setiap kita selesai membuat artikel. Berikut tutorialnya.
Pertama masuk dahulu ke dalam akun Blogger anda. Buka menu Posting atau Posts kemudian kita klik Entri Baru atau New Post. Setelah masuk ke dalam halaman editor posting pilih dalam mode HTML bukan Compose. Lalu copy paste kan kode di bawah ini ke dalam halaman editor posting :
<script src="http://sitemap-kiosbisnis.googlecode.com/files/KiosBisnislabel2.js"></script><script src="http://www.kiosbisnis.com/feeds/posts/default?max-results=999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
Ganti text yang berwarna merah diatas dengan alamat blog anda. Simpan dan Lihat hasilnya. Berikut contoh tampilan daftar isi berdasarkan label dari blog KiosBisnis.com.


Namun misal anda menginginkan menggunakan fungsi scroll karena daftar isi dirasa sudah terlalu banyak dan terlalu banyak memakan tempat (memanjang ke bawah) maka bisa menambahkan kode berwarna biru di bawah ini.
<div style="overflow:auto; border: 1px solid #000000; margin: auto; padding: 3px; width: 100%; height: 500px; background-color: none; text-align: left;"> <script src="http://sitemap-kiosbisnis.googlecode.com/files/KiosBisnislabel2.js"></script><script src="http://www.kiosbisnis.com/feeds/posts/default?max-results=999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>
Jangan lupa untuk mengganti teks berwarna merah dengan alamat blog anda. Simpan dan Lihat hasilnya. Berikut contoh tampilan daftar isi berdasarkan label menggunakan fungsi scroll dari blog KiosBisnis.com.
Selamat mencoba dan Semoga Bermanfaat.

Apa kabar sobat blogger semua!!! Kali ini saya akan mempostingan tentang cara membuat / memasang permalink di blogspot. Sebelum kita ke TKP ada baiknya saya jelaskan sedikit dulu tentang Permalink ( permanen link).

Permalink adalah istilah untuk link aktif permanen pada suatu artikel di halaman posting yang di biasanya di letakan di bawah atau sesudah postingan, fungsinya tidak lain dan tidak bukan yaitu untuk meningkatkan seo on page blog sobat. Biasanya sobat yang newbie menemukan artikel seperti ini dengan keyword cara membuat link tetap atau tambahan detail postingan yang letaknya di bawah artikel, sebelum sobat tahu bahwa namanya adalah permanen link.

Permalink kali ini saya sudah di lengkapi dengan author box dimana di dalamnnya bisa di pasangi foto / gambar milik sobat, juga di lengkapi dengan url artikel yang auto drag ( otomatis ter blok ) . Contohnya bisa sobat lihat tepat di bawah artikel.


Sobat yang tertarik dengan widget yang satu ini, silahkan ikuti tutorial berikut.

Cara Membuat Permanen Link di Blog

1. Login ke akun blog sobat.
2. Klik rancangan --> Edit HTML --> Centang kotak expand template widget
3. Letakkan kode berikut di atas kode ]]></b:skin>
.admin-tulisan{
width:auto;
background:#f2f2f2;
border:2px solid #000000;
margin:30px 0 10px 0;
display:block;
font-family:"julee";
color:#000;
}
.admin-tulisan .kontainer{padding:5px;}
.admin-tulisan h4{
background:#FF0000;
border:none;
border-bottom:1px solid #000000;
color:#fff;
font-family:"julee";
text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
padding:5px 10px;
margin:0 0 0 0;
display:block;
}
.admin-tulisan h4 a{color:#000000;}
.admin-tulisan img{
background:#000000;
width:90px;
height:100px;
border:1px solid #000000;
margin:3px 10px 0 0;
float:left;
padding:2px;
box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;
}

4. Cari kode <data:post.body/> ( gunakan Ctrl + F ) dan letakkan kode berikut tepat di bawahnya.
<!-- Permalink Tatelu -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='admin-tulisan'>
<h4>Ditulis Oleh : <b><data:post.author/></b> ~ Tips dan Trik Blogspot</h4>
<div class='kontainer'>
<img alt='Syarif Hidayat' src='https://lh5.googleusercontent.com/-naHd6gkFhhc/US857I4yq6E/AAAAAAAAABI/-9cwDUJEGIc/s299-c/28Februari2013'/>
Sobat sedang membaca artikel tentang <b><a expr:href='data:post.url'><data:post.title/></a></b>.  Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya
<textarea cols='50' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='1'>&lt;a href=&quot;<data:post.url/>&quot; target=&quot;_blank&quot;&gt;<data:blog.pageName/>&lt;/a&gt;</textarea>
<p><span style='float:right;font:italic 10px Arial, Sans-Serif;'>
<a href='http://syarifshareilmu.blogspot.com/2013/02/cara-membuat-permalink-di-blog.html' target='_blank'>:: Get this widget ! ::</a></span></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>
<!-- Permalink Tatelu -->

5. Klik save dan lihat hasilnya.

Tambahan :
  • Ganti kode yang berwarna biru dengan Url foto / gambar milik sobat
  • Sesuaikan angka yang berwarna merah dengan ukuran template blog sobat ( ukuran textarea )
  •  Kalau pada saat di Edit HTML pada saat anda cari Kode : <data:post.body/> , dan terdapat banyak kode yang sama dengan <data:post.body/> maka saya sarankan untuk memilih Kode : <p><data:post.body/></p>  (Kalau ada) dan pastekan kode diatas kebawah Kode : <p><data:post.body/></p> (Kalau Ada).Kanena pegalaman saya adalah seperti itu dan kalau anda merasa tidak ngerti atau pura-pura nggak ngerti (Belagak Bego) loe pastekan saja kode diatas dibawah Kode: <data:post.body/> dan kalau kode <data:post.body/> banyak pastekan saja kode diatas ke semua kode :<data:post.body/> .
 Terima Kasih dan Semoga Bermanfaat.
Wassalamualaikum.

Google Translate
Memasang translete pada blog sangat perlu karena mungkin saja ada pengunjung dari negara asing yang nyasar keblog anda, tapi yang harus diperhatikan agar tidak terjadi kesalahan translate maka blog anda harus menggunakan bahasa yang resmi, bukan bahasa pasaran atau gaul.
Nah caranya ikuti langkah-langkah berikut:
  • Seperti biasa sig in dulu ke blogger.
  • Masuk/ klik tombol layout/ tataletak.
  • Klik tombol elemen halaman/ page elemen=>tambah gadget=>HTML/ Java script
  • Beri nama/ isi titel dengan kalimat translate atau dengan kalimat yang anda sukai. Kemudian  Untuk Tampilan Pertma seperti berikut:
Google Translate Bendera

Copy kode berikut dan paste dikolom HTML/ Java Script.
<style>
.google_translate img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.google_translate:hover img {
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
.google_translatextra:hover img {
filter:alpha(opacity=0.30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
</style>
<div>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="32" src="http://lh6.ggpht.com/_pt7i0nbIOCY/SWwjycGEnLI/AAAAAAAAA1o/7p6S3-tipsA/English_thumb%5B3%5D.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="32" src="http://lh3.ggpht.com/_pt7i0nbIOCY/SWwj1AdOWZI/AAAAAAAAA1w/lWUkGNrOFYo/French_thumb%5B5%5D.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXWiXqk1bPertJxGlCVbRnO4s4BiGfhKZd5MWSKQnUAyOZocQ6U5WJrcNl0LISGS5k4dWXhvG4polyfRBTr8Izw6mnKuPLyLoBL6wGXt75Du5SugZ9P02l_Wi35XN13dv76HvQriCpa-kP/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb9BcxAaoWGxBfjRBB91I4gRgC7hQaJf3_c9LQrwz3-18eucli2KN1oWih4BKBn60ZoN-8C0Wie5qC3K7UiE5lzHb8xVlIW1_nuBeDJer1hsC7pOUQCMiuNPvMa9gOnmO5WcDyncFMPq6-/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="32" src="http://lh3.ggpht.com/_pt7i0nbIOCY/SWwj-14HeyI/AAAAAAAAA2I/TN52dIqkO9Q/Italian_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="32" src="http://lh5.ggpht.com/_pt7i0nbIOCY/SWwkBmKewNI/AAAAAAAAA2Q/43NEAnyNo1I/Dutch_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<br /><br />
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="32" src="http://lh4.ggpht.com/_pt7i0nbIOCY/SWwkESa-0pI/AAAAAAAAA2Y/i0X4cKgxq3g/Russian_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="32" src="http://lh4.ggpht.com/_pt7i0nbIOCY/SWwkG0osjzI/AAAAAAAAA2g/_kM2A16R_Ho/Portuguese_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW0_QjTFCDZOmwDCBhPWCSi2kWp7NE_qaNtdXKu4_qgmc-B7VkywsGqthgk2T7OJ29yloDwjBQSBQmrPXajBZsiPVcaMeYNvOpxm6HS_Rf5VwmY4t5KYfXJDS0DzXBSeAWBL9WLhTjGxCA/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="32" src="http://lh4.ggpht.com/_pt7i0nbIOCY/SWwkMouNMKI/AAAAAAAAA2w/L5l6J-Hh8XA/Korean_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="32" src="http://lh5.ggpht.com/_pt7i0nbIOCY/SWwkPdkvXBI/AAAAAAAAA24/A1LSG1lcuac/Arabic_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="32" src="http://lh6.ggpht.com/_pt7i0nbIOCY/SWwkSgrv4ZI/AAAAAAAAA3A/jQqZ1l6avts/Chinese-Simplified_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
</div> <div style="font-size:90%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href="http://www.tipstrikblogging.com/2009/07/cara-memasang-translate-pada-blog_6889.html" target="_blank" title="Google Translate">Get This Widget</a></div>
Untuk tampilan kedua seperti berikut ini:

Google Translate Bendera

Copy kode berikut dan paste dikolom HTML/ Java Script.
<style>
.google_translate img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.google_translate:hover img {
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
.google_translatextra:hover img {
filter:alpha(opacity=0.30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
</style>
<div>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="32" src="http://lh6.ggpht.com/_pt7i0nbIOCY/SWwjycGEnLI/AAAAAAAAA1o/7p6S3-tipsA/English_thumb%5B3%5D.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="32" src="http://lh3.ggpht.com/_pt7i0nbIOCY/SWwj1AdOWZI/AAAAAAAAA1w/lWUkGNrOFYo/French_thumb%5B5%5D.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXWiXqk1bPertJxGlCVbRnO4s4BiGfhKZd5MWSKQnUAyOZocQ6U5WJrcNl0LISGS5k4dWXhvG4polyfRBTr8Izw6mnKuPLyLoBL6wGXt75Du5SugZ9P02l_Wi35XN13dv76HvQriCpa-kP/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb9BcxAaoWGxBfjRBB91I4gRgC7hQaJf3_c9LQrwz3-18eucli2KN1oWih4BKBn60ZoN-8C0Wie5qC3K7UiE5lzHb8xVlIW1_nuBeDJer1hsC7pOUQCMiuNPvMa9gOnmO5WcDyncFMPq6-/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="32" src="http://lh3.ggpht.com/_pt7i0nbIOCY/SWwj-14HeyI/AAAAAAAAA2I/TN52dIqkO9Q/Italian_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="32" src="http://lh5.ggpht.com/_pt7i0nbIOCY/SWwkBmKewNI/AAAAAAAAA2Q/43NEAnyNo1I/Dutch_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="32" src="http://lh4.ggpht.com/_pt7i0nbIOCY/SWwkESa-0pI/AAAAAAAAA2Y/i0X4cKgxq3g/Russian_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="32" src="http://lh4.ggpht.com/_pt7i0nbIOCY/SWwkG0osjzI/AAAAAAAAA2g/_kM2A16R_Ho/Portuguese_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW0_QjTFCDZOmwDCBhPWCSi2kWp7NE_qaNtdXKu4_qgmc-B7VkywsGqthgk2T7OJ29yloDwjBQSBQmrPXajBZsiPVcaMeYNvOpxm6HS_Rf5VwmY4t5KYfXJDS0DzXBSeAWBL9WLhTjGxCA/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="32" src="http://lh4.ggpht.com/_pt7i0nbIOCY/SWwkMouNMKI/AAAAAAAAA2w/L5l6J-Hh8XA/Korean_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="32" src="http://lh5.ggpht.com/_pt7i0nbIOCY/SWwkPdkvXBI/AAAAAAAAA24/A1LSG1lcuac/Arabic_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="32" src="http://lh6.ggpht.com/_pt7i0nbIOCY/SWwkSgrv4ZI/AAAAAAAAA3A/jQqZ1l6avts/Chinese-Simplified_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
</div>
<div style="font-size:90%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href="http://www.tipstrikblogging.com/2009/07/cara-memasang-translate-pada-blog_6889.html" target="_blank" title="Google Translate">Get This Widget</a></div>
  • Save template anda. Semoga bermanfaat!


 

Unttuk ebih jelasnya silahkan lihat ScreenShoot dibawah ini :


 Silahkan ikuti tutorial berikut jika sobat tertarik membuat emoticon gundam di komentar blog.

Emoticon Gundam di Kotak Komentar Blog

1. Log in ke akun blog sobat.
2. Klik rancangan --> Edit HTML --> Centang kotak Expand template widget.
3. Letakkan kode berikut di atas kode </head>


<script src='http://tateluproject.googlecode.com/files/Gundam%20emoticon.js'/>


4. Cari kode   <b:if cond='data:post.embedCommentForm'> dan letakkan kode berikut ini di bawahnya.

<b><img height='50' src='http://i1108.photobucket.com/albums/h405/christian410/14-1.gif' width='50'/>
:b:
<img height='50' src='http://i1108.photobucket.com/albums/h405/christian410/13-1.gif' width='50'/>
:c:
<img height='50' src='http://i1108.photobucket.com/albums/h405/christian410/12-1.gif' width='50'/>
:d:
<img height='50' src='http://i1108.photobucket.com/albums/h405/christian410/11-1.gif' width='50'/>
:e:
<img height='50' src='http://i1108.photobucket.com/albums/h405/christian410/10-1.gif' width='50'/>
:f:
<img height='50' src='http://i1108.photobucket.com/albums/h405/christian410/9-1.gif' width='50'/>
:g:
<img height='50' src='http://i1108.photobucket.com/albums/h405/christian410/8-1.gif' width='50'/>
:h:
<img height='50' src='http://i1108.photobucket.com/albums/h405/christian410/7-1.gif' width='50'/>
:i:
<img height='50' src='http://i1108.photobucket.com/albums/h405/christian410/6-1.gif' width='50'/>
:j:
<img height='50' src='http://i1108.photobucket.com/albums/h405/christian410/5-1.gif' width='50'/>
:k:
<img height='50' src='http://i1108.photobucket.com/albums/h405/christian410/4-1.gif' width='50'/>
:l:
<img height='50' src='http://i1108.photobucket.com/albums/h405/christian410/3-1.gif' width='50'/>
:m:
<img height='50' src='http://i1108.photobucket.com/albums/h405/christian410/2-1.gif' width='50'/>
:n:
<img height='50' src='http://i1108.photobucket.com/albums/h405/christian410/1-1.gif' width='50'/>
:o:
<img height='50' src='http://i1108.photobucket.com/albums/h405/christian410/15-1.gif' width='50'/>
:p:
</b><BR/>

5. Klik save dan lihat hasilnya...

Ilustrasi cacad
Oke men yang mau blognya cepet ? Yang mau blognya tampil Cepet ? Rugi kalo nggak baca postingan ini hehe. Dalam tutorial kali ini saya akan membuka rahasia dan tips-tips agar blog tampil lebih cepat. Khususnya blog yang berplatform blogspot, untuk wordpress saya tidak menguasai (jujur nih gue) hehe. Terus apa aja sih hal hal yang mempengaruhi loading blog kita ? Check it out !

1. Widget
           Perhatikan widget yang lo pasang di blog, jangan memasang widget secara berlebihan atau widget tidak penting/unimportant. Karena ini akan mempengaruhi loading blog lo juga. Perhatikan widget berikut :
  • Jam, jam dinilai tidak penting karena di bagian taskbar komputer sudah ada jam. Jadi buat apa lo masang jam di blog, ini nggak terlalu penting ya. Mending lo hapus deh widget jam dari sekarang.
  • Kalender, begitu pula dengan kalender. Kalender juga tidak penting, sama seperti jam. Jangan bilang dengan tujuan mempercantik blog, lo masang kalender yang gedee banget tapi pengen loading blog lo cepet, yaa sama aja bohong kali. Oke men mulai sekarang remove widget kalender.
  • Widget iklan, banyak yang cari uang melalui widget iklan ini. Nah saran saya jangan pasang iklan yang berlebihan karena akan berpengaruh ke loading blog (mungkin SEO juga) CMIIW, Dan kasian juga kan yang liat blog lo harus dicekokin iklan-iklan yang merusak mata.
  • Widget backlink dan external link, jangan terlalu banyak pihak ketiga yang tampil di blog kita. Maksud saya ya backlink, kalo bisa pasang backlink di halaman tertentu jangan di postingan atau halaman awal/beranda/home. Boleh sih, asal jangan berlebihan yak !
  • Nah buat lo yang mau pasang banyak widget tapi mau loadingnya cepet, mendingan pake cara menghemat widget dengan scroll box. Nah ini bisa di pake buat menampilkan counter histats, alexa traffic rank, dan yang lain-lain. Silahkan baca artikel ini Cara Menggabungkan Widget dalam 1 Scrollbox.
2. Template Blog
          Untuk template blog, saya saranin pakai yang dari blogger aja karena simpel. Atau silahkan download template SEO friendly. Dan perhatikan hal berikut :
  • Sidebar blog, untuk sidebar saya saranin untuk pake yang 1 kolom aja dan letaknya disebelah kanan. Ini akan otomatis mempercepat loading blog, daripada lo pake 2 kolom (kanan-kiri) selain lemot jadi nggak fresh gimana gitu crowded lah pokoknya. Masalah penempatan sidebar disebelah kanan, entah ini mitos atau apa (gue belum tau kenapa) penempatan sidebar disebelah kanan lebih cepat tampil dibanding sidebar di sebelah kiri.
  • Compress Template lo, hal ini paling penting nih men. Untuk mengompress template silahkan baca artikel gue yang  Cara Mengompres Ukuran Blog (100 % TERBUKTI) atau lo bisa pake link ini yang berguna juga untuk mengompress blog Klik Disini Untuk Mengompress Blog. Nah disana lo tinggal copy-paste isi template lo aja terus di compress deh. Ambil  hasil compressanya dan pastekan ke Template lo.
3. Tampilan Blog
           Banyak nih gue liat di blog blog orang masang musik, salju-saljuan atau efek daun berjatuhan. Nah dari sini kita bisa liat bagaimana loading blog mereka ? Kalo gue nilai sih ya rada lemot sih nggak cepet banget gitu tampilnya. Coba deh simak :
  • Kursor blog, hindari memasang tulisan berputar-putar di kursor blog. Gue udah nyoba dan hasilnya adalah.. sangat tidak memuaskan. Iya kalo koneksi lo cepet, kalo buat yang koneksi lemot ? Kan kasian di mereka. Jadi gue saranin NO ! Lebih baik lo ganti tampilan kursor blog aja deh dengan membaca artikel gue yang Cara Merubah Kursor Blog.
  • Hindari memasang video atau musik streaming yang otomatis di puter. Ada nih blog temen gue yang masang lagu di blognya nah otomatis kan ada bufferingnya atau apalah CMIIW (koreksi jika salah) ini bikin loading blognya jadi lama. Dan bikin blognya berat atau gendut isitilahnya hehe.
  • Hindari memasang alert pesan di blog, emang sih menurut lo blog lo bakalan keren. Tapi faktanya alert di log bikin pengunjung/visitor ribet pas baca postingan kita. Selain ribet ini juga bikin loading lama alias lola. Jadi jangan pasang deh alert-alert begituan.
  • Hindari Memasang Teks Berjalan (secara berlebihan), pemasangan teks berjalan/marquee juga memakan waktu untuk loading. Jadi mendingan gak usah pasang ya kalo mau tampil superr cepat. 
  • Direkomendasikan untuk mengompres ukuran foto, agar blog tampil lebih cepat (karena tidak terbebani oleh foto). Lo bisa baca Cara Mengompress Ukuran foto di Blog
  • Untuk tampilan home/beranda, gue saranin hanya menampilkan post maksimal 5 (itu juga udah berat banget) mending kalo bisa lo pasang 2 aja bahkan 1. Caranya adalah buka setelan > Post dan komentar > tampilkan sebanyak mungkin > 3 posting dihalaman utama.
seperti ini nih gambarnya
4. Postingan Blog
              Hal ini wajib banget deh lo perhatiin. Untuk postingan, gue saranin jangan PAKE GAMBAR YANG GEDE-GEDE. Maksimal lo pake ukuran medium aja, kalo nggak jelas bilang ke pembaca "Jika Gambar Kurang Jelas Silahkan Di Klik" . Nah hal kecil ini membantu banget, karena gambar juga mempengaruhi kualitas loading blog. Kalo lo pengen ngecilin ukuran gambar supaya upload lo cepet baca postingan gue tentang Tips Untuk Mengecilkan Gambar/File. Dan simak juga ini hal berikut :
  • Pasang lah Read More di setiap postingan (WAJIB), selain mempercantik tampilan blog lo. Readmore juga bisa mempercepat loading blog loh. Kenapa ? Ya karena readmore menghemat tempat, dan otomatis cepet kan loadingnya. Jadi pasang deh pasang ajaa, gak ada dampak  negatifnya kok. Dan ini gampang, nih baca aja artikel gue yang Cara Mudah Membuat Readmore.
  • Jangan kebanyakan label, oke ini udah terbukti di blog gue dan temen gue. Katanya sih setelah dia meminimalisasi atau mengurangi label-label pada postinganya. Blognya tampil lebih cepat. Jadi silahkan coba, ini nggak ada dampak negatifnya juga kok.
5. Pakai Lazy Script Untuk Template Anda
             Oke untuk ini sedikit hati-hati karena gue gak begitu menguasai, lebih baik lo backup dulu template lo sebelum melakukan hal dibawah ini. (FYI : Lazy script berfungsi untuk meringankan bobot blog hingga loading cepat karena browser di perintahkan agar tidak membaca gambar-gambar yang ada pada blog kita). Nah jadi definisi garis besarnya gitu men, jadi saran gue ikutin aja apa kata hati lo. Dan caranya adalah :
  • Buka Template > Edit HTML > Lanjutkan
  • Cari kode </head> (gunakan CTRL + F dan tuliskan </head> agar lebih cepat)
  • Paste kan kode berikut sebelum atau diatas kode </head>
<script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script src='http://cuerosb.googlecode.com/files/cueros%20-lazyload.js' type='text/javascript'/> <script charset='utf-8' type='text/javascript'> $(function() { $(&quot;img&quot;).lazyload({placeholder : &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3_TNkKzm_ghjXeL7B0nEYek3C1kVFG215fWVWXkuQKbvIucuYiSUK_q_atN3bhfV45r5BwUQodOlxi3JNh77-AWe1mSmB1AeG6ixa1qik34Mi9PuHRYmo7IH2bQgAz9abKwiiHVTkLW0/&quot;,threshold : 200}); }); </script>
  • Terakhir, Klik Simpan dan Nikmati selagi hangat ! 
6. Hindari Script-script Nggak jelas
                 Apa ya script yang gak jelas itu ? Ya kayak script salju-saljuan (FYI : Dulu gue pernah nyoba di blog gue yang lain, eh malah nggak bisa di scroll ke bawah akibat pasang beginian). Yap tentunya script ini memakai pihak ketiga, jadi kalo lo nggak make ini. Insya Allah blog lo wooosssh ! Cepet deh pokoknyah. Oiya jangan pasang burung twitter yang terbang-terbangan juga atau kelelawar. Karena itu bikin loading lama, emang sih jejaring sosial juga berperan penting dalam mem-FAMOUS kan blog kite-kite. Tapi mendingan lo pake cara gue, yaitu menempatkan jejaring sosial (facebook, twitter) di header blog. Selain hemat tempat, mempercepat loading, ini juga bikin blog cantik nan imut seperti afikaa kali ya hehe. Selain itu lo juga dituntut untuk lebih kreatif, so daripada header nganggur mending baca nih artikel gue yang Cara Membuat Header Ngelink.
7. Ganti Domain blogspot.com dengan com
               Ini adalah cara terakhir, dan ini nggak sepenuhnya bisa ya. Tergantung sang penyedia domain, kalo lo pinter ya bisa dapet domain gratis dari lomba blog review atau cari-cari di google. Tapi domain berbayar lebih aman men, jadi tinggal pilih mana nih selara kau haha. Setelah diganti menjadi com, blog lo gue yakin lebih cepet deh loadingnya. Karena blog lo udah punya domain sendiri dan nggak bergantung sama blogspot lagi CMIIW.
         
Nah sekian deh Cara Membuat Blog Tampil Lebih Cepat dan Tutorial Blog lainya yang keselip-selip, saran gue lo langsung rombak blog lo yak hehe. Tapi hati-hati dan mesti sabar, buang gadget yang nggak perlu, jangan kebanyakan banner flash, hindari backlink nggak jelas, jangan kebanyakan iklan, dan jangan lupa mengompress foto/file serta template blog lo secara lengkap men. Gue yakin lo bisa, buktiin kita anak Indonesia yang kreatif dan Blog bermanfaat bukan hanya sekedar copy paste dan menjadikan Blog sebagai mesin pencetak uang. Oke gue capek dan galau  upss nggak deh ahaha, iya maksud gue udah nggak ada yang disampein lagi, lo juga puyeng kan bacanya ? So wassalamu'alaikum warahmatullahi wabarakatuh.

Tambahan :
Untuk Mengecek Kecepatan blog kalian silahkan baca Cara Mengecek Kecepatan Loading Blog Lengkap.

Pembaca Mudah Bosan dengan Blog yang Loading Blog anda yang lebih dari 15 detik. So buat kamu yang punya blog dan memiliki aset penting di dalamnya, jangan sampai loading blog kamu bikin pembaca bosen terus berpindah ke lain hati.. waduh sampai segitunya.. haha.

Berikut adalah beberapa screenshot kecepatan Loading Blog saya  :


Pengecekan Via Gtmetrix


 Pengecekan Via IWeb Tool

Dan berikut adalah Website untuk mengecek kecepatan Bllog anda.Silahkan bandingkan dari ke 6 Website dibawah karena masing-masing memiliki metode untuk mengukur kecepatan yang berbeda.

1. http://gtmetrix.com/
2. http://iwebtool.com/speed_test
3. http://websiteoptimization.com/services/analyze
4. http://tools.pingdom.com/
5. http://numion.com/stopwatch
6. http://pagespeed.googlelabs.com/

Keterangan :
1. Langkahnya gampang kalian tinggal masukin aja link blog kalian terus klik submit atau go.
2. Hasil pengukuran berbeda-beda antara satu situs dengan situs lainya.
3. Pengukuran kecepatan ini tidak menimbulkan resiko apapun (AMAN)

Sekarang gimana hasilnya ? Apakah blog anda loadingnya cepat ? Untuk google speed dianjurkan hasil tes anda minimal 80 dan lebih dari 80 berarti itu bagus. Dan untuk yang lainya mungkin berbeda lagi, dan canggihnya salah satu dari situs diatas dapat mengcompare/membandingkan situs kalian dengan situs lainya. Jadi buruan dicoba yah sobat, sebelum lo kehilangan banyak pengunjung karena nggak tau apa fungsi ini.

Nah buat yang blognya lambat, kalian bisa baca artikel saya yang berjudul Cara Membuat Blog tampil Lebih Cepat yang bisa anda baca DISINI


Sialhkan Pilih Channel Kesukaan Anda .




kerlipan
Cara ini membolehkan link berkelip bila dihalakan cursor padanya.Disamping berkelip ia kan mengeluarkan kerlipan bintang disekeliling.Tidak menggunakan javascript,hanya gabungan css dan imej sahaja.Contohnya boleh dilihat pada blog ini.Kalau berminat hendak membuatnya,berikut adalah langkahnya:

Klik pada Design
Edit HTML
Cari kod:
</head>
Dan letak kod ini diatasnya:
<style>
a:hover { text-decoration:blink; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdeD2548qO9M8SliXGBd2R56VdMm0-wjvSrp6I7QkKozb9fMN_Jc7dPDabngj6ddJogF6fhOEJPudpebE1vmyC4X518zvAWf5T3WnfH-ajbZKffNwwt8tKQI47A1aCQ3prBp-Ob0UnHCE/s1600/blink.gif); }
</style>

atau gunakan yang dibawah ini:

bintang berkelip

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbQHy7GsQA0YLTcE_6DgQpneq7-IONjRfOnLKw-_dNltJPhwE1dpE7gkjZB4K93h5hpa_57ZVU469oZsCCbkhawJLafhyNnQbdGUtWA1yRMQbgaEsclfn31f7K_nABEJJnsV6LBB2AnYo/s1600/str4.gif
cuma tukarkan tulisan merah pada diatas dengan url bagi kerlipan seperti diatas
#sesuai hanya untuk template berwarna gelap.

Simpan template…selesai..

Hai Sobat...
Melalui posting ini ane mengajak sobat semua untuk mengambil keuntungan dari kecepatan penyebaran sistem ini dalam bentuk backlink, salah satu cara yang mudah untuk meningkatkan pengunjung blog.
Caranya sangat mudah, Yang harus sobat lakukan adalah dengan meletakkan link-link berikut di blog ataupun di artikel sobat.
    e46313345822479627a3141ea879b2d7_google-update-pagerank
  1. Selamat2U.blogspot.com.
  2. InformasiTerbaru.com
  3. Tribunjambi.com
  4. Kompasiana.com
  5. Kerincionline.com
  6. mualaf.com
  7. Cahaya.com
  8. InfoSinta.com
  9. Kayosakti.blogdetik.com.
  10. Syarif Share Ilmu
Tapi ingat, sebelum sobat meletakkan link diatas, harus menghapus peserta nomor 1 dari daftar. Sehingga semua peserta naik 1 level. Yang tadinya nomor 2 jadi nomor 1, nomor 3 jadi 2, dst. Kemudian masukkan link sobat di bagian paling bawah (nomor 10).
Jika tiap peserta mampu mengajak 5 orang saja, maka jumlah backlink yang akan didapat adalah:
Ketika posisi anda 10, jumlah backlink = 1
Posisi 9, jml backlink = 5
Posisi 8, jml backlink = 25
Posisi 7, jml backlink = 125
Posisi 6, jml backlink = 625
Posisi 5, jml backlink = 3,125
Posisi 4, jml backlink = 15,625
Posisi 3, jml backlink = 78,125
Posisi 2, jml backlink = 390,625
Posisi 1, jml backlink = 1,953,125
Dan semuanya menggunakan kata kunci yang sobat inginkan. Dari sisi SEO sobat sudah mendapatkan 1,953,125 backlink dan efek sampingnya jika pengunjung web para downline sobat mengklik link itu, juga membuat ngeblog sobat mendapatkan traffik tambahan.
Nah, silahkan copy paste artikel ini, dan hilangkan peserta nomor 1 lalu tambahkan link blog/website sobat di posisi 10. Ingat, sobat harus mulai dari posisi 10 agar hasilnya maksimal. Karena jika sobat tiba2 di posisi 1, maka link sobat akan hilang begitu ada yang masuk ke posisi 10.
Ane yakin dalam waktu yang singkat, Pagerank blog sobat pasti langsung naik drastis di luar dugaan. Selamat mencoba trik rahasia ini!
Jika sobat semua berkenan?copas aja! terus sarankan ke teman yang lain supaya terus menyebar!begitu pula seterusnya!



Blogger adalah salah satu CMS (Content Management System) yang paling populer di internet. Beragam kalangan menggunakan Blogger, mulai dari remaja, dewasa hingga para pebisnis pun sudah banyak yang menggunakan layanan Blogger. Ada yang menggunakan Blogger untuk blogging, ada yang memakai Blogger untuk membangun toko online,ada yang menggunakan blogger untuk mendapatkan uang dan masih banyak fungsi lain dari CMS Blogger.

Kalau kita bicara soal Blogger, maka tidaklah lengkap bila kita tidak bicara soal desainnya. Dengan memiliki desain blog yang baik, maka tentu pengunjung blog kita akan gembira dan suka dengan tampilan blog kita. Makin bagus makin baik.

Bicara soal desain, tentu tidak lepas dari yang namanya template. Nah sobat , kali ini saya akan special menampilkan 5 situs download template Blogger paling populer di internet. Mudah-mudahan sharing ini bisa membantu sobat-sobat sekalian yang ingin mencari template menarik untuk digunakan di blognya.

Ini dia 5 situs download template Blogger paling populer di internet

1. Btempaltes.com

Merupakan satu dari sederet tempat download template Blogger papan atas dunia. Dengan alexa rank mencapai angka 4654 maka situs ini termasuk situs paling sering diakses di internet. Di situs ini, Anda bisa menemukan beragam template dengan berbagai kategori. Mulai dari template minimalis, template Blogger mirip WordPress, template galeri, dan lain sebagainya.

Selain menyajikan berbagai template gratis, situs ini juga bisa Anda manfaatkan untuk publikasi template blog yang Anda buat. Jadi kalau Anda punya kreasi template sendiri, Anda bisa mengirim template untuk dipublikasikan di Btemplates.com.

Berikut adalah tampilan dari situs www.btemplates.com.


2. ZoomTemplate

Zoom Template adalah salah satu situs download template yang cukup populer di internet. Dengan alexa rank mencapai angka 24.312 maka situs ini bisa dikategorikan sebagai situs papan atas dalam hal download tempalte. Yang lebih membanggakan, pemilik situs ini adalah Agus Ramadhani atau yang lebih dikenal dengan nama OOM.

Di Zoom Template, Anda tidak hanya bisa menemukan template gratis, tetapi di sini si pemilik website juga menjual berbagai template premium yang keren dan elegan. Nah berikut tampilan situs www.zoomtemplate.com.


3. BlogTemplate4u

Siapa yang belum kenal dengan Kang Rohman? Ya blogger papan atas Indonesia yang sudah banyak membantu blogger pemula dalam mempelajari blog ini memang sangat berjasa bagi banyak blogger. Tidak hanya piawai dalam menyajikan tutorial blog, Kang Rohman juga menambah amalnya dengan sering membagikan template gratis di internet.
Salah satu situsnya yakni Blogtemplate4u.com menjadi situs download template blog yang cukup populer di internet.

Di situs tersebut, Anda bisa menemukan berbagai template, mulai dari template untuk Blogger, themes WordPress, bahkan hingga template untuk Joomla!. Berikut tampilan situs www.Blogtemplate4u.com.



4. PremiumBloggerTemplates

Meski namanya premium namun situs ini juga menyediakan banyak sekali template gratis nan elegan yang bisa Anda dapatkan. Situs ini termasuk situs download template yang sangat populer di internet. Dengan alexa rank mencapai angka 10.544 maka situs ini benar-benar ramai pengunjungnya.

Banyak blogger yang sering mengunjungi situs ini untuk mencari template-template keren dan gratis. Situs ini dimiliki oleh Lasantha Bandara (kalau tidak salah orang India).

Nah ini dia tampilan situs www.premiumbloggertemplates.com


5. All Blog Tools

All Blog Tools merupakan situs yang tidak hanya menyediakan template Blogger, melainkan situs ini juga menampilkan berbagai tools untuk blog, layanan premium, template premium dan tutorial blog. Situs ini benar-benar komplit.

Template yang dibagikan di situs ini juga cukup banyak dan begitu menarik. Berbagai template dari banyak kategori, warna, fitur semua ada di situs ini. Sama halnya seperti Btemplates.com, Anda juga boleh mengirim template Anda atau tutorial ke situs ini untuk dipublikasikan.

Berikut tampilan dari situs ww.allblogtools.com.


Nah sobat , itulah 5 situs download template Blogger paling populer dan paling mantap di internet. Mudah-mudahan bisa bermanfaat.

Anda dendam dengan Windows atau dengan teman anda? Bunuh saja ^_^ (Maksudnya Windowsnya ya jangan Orangnya) seperti yang kita ketahui bahwa Kekuatan Windows adalah dari semua aplikasi yang ada di dalamnya, tanpa seluruh aplikasi-aplikasi tersebut sudah bisa dibayangkan bahwa Windows pasti akan lemah tak berdaya.

Nah, teknik serangan kali ini adalah untuk melumpuhkan semua aplikasi yang ada di windows tersebut agar tidak bisa berjalan lagi. Namun saya berpesan bahwa jangan sekali-kali mencoba trik ini jika komputer anda belum di DeeP Freeze karena bisa berakibat sangat fatal. Jadi, jika anda ingin mencoba teknik ini maka terlebih dahulu silahkan Deep Freeze komputer tersebut agar setelah di restart nanti bisa kembali normal lagi. Jika belum punya Deep Freeze silakan download dulu Disini atau Disini.

Kita mulai, cara untuk membunuh semua aplikasi Windows sanga mudah sekali. Cukup anda buka Run dan ketikkan CMD kemudian tekan Enter atau tekan tombol Windows+R pada keyboard untuk membuka Run.


Maka akan segera ditampilkan jendela Command Prompt seperti gambar berikut ini. Silahkan anda ketikkan “assoc .exe=.hank” (tanpa tanda petik tentunya) dan tekan Enter. Maka di bawahnya akan muncul tulisan secara otomatis “.exe=.hank”.


Hanya begitu saja?? Yah….hanya seperti itu kok. Kalau tidak percaya, sekarang cobalah buka semua program yang anda inginkan dan apakah yang terjadi?? Pasti semua program di komputer tersebut tidak akan bisa berjalan.

Jadi intinya, hanya dengan mengetikkan “assoc .exe=.hank” pada Command Prompt maka seluruh aplikasi windows akan di non-aktifkan dan dibunuh.


Nantinya, Rata-rata program yang anda buka tidak akan bereaksi sama sekali, tetapi ada beberapa program yang jika dibuka akan memunculkan kotak dialog seperti pada gambar berikut. Berikut ini contoh penulis membuka Microsoft Word 2010 dan hasilnya malah muncul seperti ini. OK!! Gunakanlah secara bijak dan lakukan trik ini jika kondisi anda dalam keadaan terdesak (kepEpEt) ^_^


Peringatan :
Trik ini bisa mengakibatkan komputer anda LUMPUH 95% dan anda mungkin harus install ulang untuk mengembalikannya. Jadi, jangan muncoba Trik ini sembarangan atau jika ingin mencobanya silakan Deep Freeze dulu.

Jangan menjahili komputer/laptop teman dengan Trik ini karena sangat merugikan. Trik ini hanya untuk pembelajaran semata!!

Semoga Bermanfaat,

Saat membuat web design, seorang web designer tentunya membutuhkan software. Beberapa web design software yang cukup populer ialah Adobe Dreamweaver dan tentunya beberapa program pendukungnya seperti Adobe Photoshop dan Adobe Illustrator.
Tetapi untuk berbagai keperluan khusus, program-program tersebut kadang belum cukup. Dalam kenyataannya, dibutuhkan banyak program atau tools lain yang sesuai dengan kebutuhan web design. Di bawah ini kita tampilkan 10 software gratis yang sekiranya bisa dipakai untuk membuat website design secara simpel dan cepat. Gratis karena free software, jadi bisa langsung didownload tanpa membayar. Untuk mengetahui lebih detil tentang cara install, fungsi, dan pengoperasian software internet ini, silahkan kunjungi website penciptanya.

Berikut 10 Softaware Gratis Mendesain Website :

Expression Web Design Menu 1.0

Expression Web Design Menu 1.0

Expression Web Menu Adalah sebuah web design tool untuk membuat web DropDown Menu. Anda hanya tinggal menseting jumlah tombol beserta sub itemnya, teks, link target, dan beberapa parameter lain. Di program ini sudah tersedia banyak template, yang terdiri dari 500+ button, 100+ sub menu design, 6600+ icon, dan 100+ sample.

Atrise Web Design HTMLock 2.2.0

10 Softaware Gratis Mendesain Website

Atrise HTMLock adalah sebuah software komputer untuk membuat proteksi password pada teks file dan HTML file. Dengan HTML tool ini Anda juga bisa membuat encrypt HTML untuk kemudian ditempatkan pada website, CD, DVD, bahkan harddisk. Free software ini berbasis JavaScript sehingga bebas digunakan dimana saja tanpa perlu database. User-Friendly wizard-nya sangan membantu Anda untuk mengenkripsi HTML dan text files dalam beberapa kali klik.

ZoloPages 1.33

10 Softaware Gratis Mendesain Website

Zolopages adalah program yang berfungsi meng-capture data di web page lalu menyimpannya dalam format database. Program ini berguna jika kita hendak mengambil dan menyimpan data dari situs-situs direktori seperti Yellow Pages.

RBT 1.3.1

10 Softaware Gratis Mendesain Website

RBT adalah sebuah browser seperti internet explorer 9 atau mozzila firefox, tetapi browser ini berbasis PHP query yang ditenagai J2EE technology. Program ini berguna jika Anda ingin membuat desain web berbasis community yang memiliki banyak user. Dengan software ini Anda bisa mengatur security setup untuk user/group access serta  mengontrol tabel & kolom databasenya.

Free Colored ScrollBars 2.2

10 Softaware Gratis Mendesain Website

Free Colored ScrollBars adalah sebuah tool pembuat JavaScript code dan CSS Style untuk membuat animated scrollbars pada website. Program ini disertai 44 theme warna dan template yang dapat dikostumisasi sesuai kebutuhan penggunanya.

Sigma Visual Ajax GUI builder 2.02

10 Softaware Gratis Mendesain Website

Sigma Visual adalah web based tool untuk aplikasi Ajax. Dengan tools ini, programmer dan developer bisa membuat website seperti yang biasa dilakukan dalam VB atau Delphi. Program ini juga mensupport code highlight dan syntax checking.

eMule Ultra Accelerator 2.8.9

10 Softaware Gratis Mendesain Website

Fungsi eMule Ultra Accelerator mirip dengan Internet Download Manager. Program gratis ini berfungsi untuk mempercepat proses download file dengan memaksimalkan kapasitas bandwith koneksi yang Anda miliki.


AAA Web Album 2.10

10 Softaware Gratis Mendesain Website

AAA Web Design Album adalah softare untuk menciptakan web photo albums lalu menguploadnya ke website. Web designer juga bisa membuat berbagai tampilan web album tersebut.



Pixel Ruler 2.0.2

10 Softaware Gratis Mendesain Website

Sesuai dengan namanya, Pixel Ruler berfungsi sebagai penggaris untuk mengukur panjang objek di monitor secara vertikal dan horisontal dalam satuan Pixel. Tools ini sangat berguna bagi web designer yang berkonsentrasi pada pembuatan template.

CoffeeCup Free HTML Editor 9.4

10 Softaware Gratis Mendesain Website

Fungsi CoffeeCup Free HTML Editor sangat mirip dengan Adobe Dreamweaver yaitu untuk mengedit file html dan PHP hingga membuat website secara komplit. Cara design web yang ditampilkan CoffeeCup cukup praktis. Selain gratis, free software ini juga jauh lebih ringan dari pada dreamweaver serta sudah mensupport HTML 5.0 dan CSS 3.0.

Membuat Objek Berputar-putar Pada Kursor Mouse di Blogger 
Bagaimana cara Anda untuk mendapatkan perhatian pengunjung Anda? Membuat konten berkualitas? Membuat blog indah dipandang mata? atauu membuat objek pada kursor mouse di blog Anda? Yapp kali ini kita akan membahas bagaimana membuat objek pada kursor mouse.

Gaya Pertama :

Cursor fo blogger


  1. Buka akun Blogger Anda
  2. Masuk ke menu tata letak/layout > add gadget > HTML/Javascript
  3. Pastekan kode dibawah ini dan save.
<script language="JavaScript" type="text/javascript">
var xCol = "#FF0000";
var yCol = "#FFFF00";
var zCol = "#0000FF";

var n = 6; //number of dots per trail.
var t = 40; //setTimeout speed.
var s = 0.2; //effect speed.
var r,h,w;
var d = document;
var my = 10;
var mx = 10;
var stp = 0;
var evn = 360/3;
var vx = new Array();
var vy = new Array();
var vz = new Array();
var dy = new Array();
var dx = new Array();
var pix = "px";
var strictmod = ((document.compatMode) &&
document.compatMode.indexOf("CSS") != -1);
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var idx = d.getElementsByTagName('div').length;
for (i = 0; i < n; i++)
{
var dims = (i+1)/2;
d.write('<div id="x'+(idx+i)+'" style="position:absolute;'
+'top:0px;left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+xCol+';font-size:'+dims+'px"><\/div>'
+'<div id="y'+(idx+i)+'" style="position:absolute;top:0px;'
+'left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+yCol+';font-size:'+dims+'px"><\/div>'
+'<div id="z'+(idx+i)+'" style="position:absolute;top:0px;'
+'left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+zCol+';font-size:'+dims+'px"><\/div>');
}
if (domWw) r = window;
else
{
if (d.documentElement &&
typeof d.documentElement.clientWidth == "number" &&
d.documentElement.clientWidth != 0)
r = d.documentElement;
else
{
if (d.body && typeof d.body.clientWidth == "number")
r = d.body;
}
}
function winsize()
{
var oh,sy,ow,sx,rh,rw;
if (domWw)
{
if (d.documentElement && d.defaultView &&
typeof d.defaultView.scrollMaxY == "number")
{
oh = d.documentElement.offsetHeight;
sy = d.defaultView.scrollMaxY;
ow = d.documentElement.offsetWidth;
sx = d.defaultView.scrollMaxX;
rh = oh-sy;
rw = ow-sx;
}
else
{
rh = r.innerHeight;
rw = r.innerWidth;
}
h = rh;
w = rw;
}
else
{
h = r.clientHeight;
w = r.clientWidth;
}
}
function scrl(yx)
{
var y,x;
if (domSy)
{
y = r.pageYOffset;
x = r.pageXOffset;
}
else
{
y = r.scrollTop;
x = r.scrollLeft;
}
return (yx == 0)?y:x;
}
function mouse(e)
{
var msy = (domSy)?window.pageYOffset:0;
if (!e) e = window.event;
if (typeof e.pageY == 'number')
{
my = e.pageY - msy + 16;
mx = e.pageX + 6;
}
else
{
my = e.clientY - msy + 16;
mx = e.clientX + 6;
}
if (my > h-65) my = h-65;
if (mx > w-50) mx = w-50;
}
function assgn()
{
for (j = 0; j < 3; j++)
{
dy[j] = my + 50 * Math.cos(stp+j*evn*Math.PI/180) *
Math.sin((stp+j*25)/2) + scrl(0) + pix;
dx[j] = mx + 50 * Math.sin(stp+j*evn*Math.PI/180) *
Math.sin((stp+j*25)/2) * Math.sin(stp/4) + pix;
}
stp+=s;
for (i = 0; i < n; i++)
{
if (i < n-1)
{
vx[i].top = vx[i+1].top; vx[i].left = vx[i+1].left;
vy[i].top = vy[i+1].top; vy[i].left = vy[i+1].left;
vz[i].top = vz[i+1].top; vz[i].left = vz[i+1].left;
}
else
{
vx[i].top = dy[0]; vx[i].left = dx[0];
vy[i].top = dy[1]; vy[i].left = dx[1];
vz[i].top = dy[2]; vz[i].left = dx[2];
}
}
setTimeout(assgn,t);
}
function init()
{
for (i = 0; i < n; i++)
{
vx[i] = document.getElementById("x"+(idx+i)).style;
vy[i] = document.getElementById("y"+(idx+i)).style;
vz[i] = document.getElementById("z"+(idx+i)).style;
}
winsize();
assgn();
}
if (window.addEventListener)
{
window.addEventListener("resize",winsize,false);
window.addEventListener("load",init,false);
document.addEventListener("mousemove",mouse,false);
}
else
if (window.attachEvent)
{
window.attachEvent("onload",init);
document.attachEvent("onmousemove",mouse);
window.attachEvent("onresize",winsize);
}
</script>

Gaya Kedua

Comment Buble
  1. Masih pada langkah-langkah pada gaya pertama pastekan kode dibawah ini :
<script type="text/javascript" src="https://sites.google.com/site/unwanted86/javascript/bubblecursor.js"></script><script type="text/javascript">
// <![CDATA[
var colours=new Array("#0066FF", "#0066FF", "#0066FF", "#0066FF", "#0066FF"); // colours for top, right, bottom and left borders and background of bubbles
var bubbles=100; // maximum number of bubbles on screen
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var bubb=new Array();
var bubbx=new Array();
var bubby=new Array();
var bubbs=new Array();
window.onload=function() { if (document.getElementById) {
var rats, div;
for (var i=0; i<bubbles; i++) {
rats=createDiv("3px", "3px");
rats.style.visibility="hidden";
div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.top="1px";
div.left="0px";
div.bottom="1px";
div.right="0px";
div.borderLeft="1px solid "+colours[3];
div.borderRight="1px solid "+colours[1];
div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.top="0px";
div.left="1px";
div.right="1px";
div.bottom="0px"
div.borderTop="1px solid "+colours[0];
div.borderBottom="1px solid "+colours[2];
div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.left="1px";
div.right="1px";
div.bottom="1px";
div.top="1px";
div.backgroundColor=colours[4];
div.opacity=0.5;
if (document.all) div.filter="alpha(opacity=50)";
document.body.appendChild(rats);
bubb[i]=rats.style;
}
set_scroll();
set_width();
bubble();
}}
function bubble() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<bubbles; c++) if (!bubby[c]) {
bubb[c].left=(bubbx[c]=x)+"px";
bubb[c].top=(bubby[c]=y)+"px";
bubb[c].width="3px";
bubb[c].height="3px"
bubb[c].visibility="visible";
bubbs[c]=3;
break;
}
}
for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);
setTimeout("bubble()", 40);
}
function update_bubb(i) {
if (bubby[i]) {
bubby[i]-=bubbs[i]/2+i%2;
bubbx[i]+=(i%5-2)/5;
if (bubby[i]>sdown && bubbx[i]>0) {
if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {
bubb[i].width=bubbs[i]+"px";
bubb[i].height=bubbs[i]+"px";
}
bubb[i].top=bubby[i]+"px";
bubb[i].left=bubbx[i]+"px";
}
else {
bubb[i].visibility="hidden";
bubby[i]=0;
return;
}
}
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sleft;
x=(e)?e.pageX:event.x+sdown; }
window.onresize=set_width;
function set_width() {
if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (typeof(self.innerHeight)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
else {
swide=800;
shigh=600;
}
}
window.onscroll=set_scroll;
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height;
div.style.width=width;
div.style.overflow="hidden";
return (div);
}
// ]]>
</script>

Gaya Ketiga :

sparkle cursor


  1. Masih pada langkah 1 diatas, pastekan kode dibawah ini :

<script src="URL JS" type="text/javascript"></script>

Note : untuk URL JS, tukarkan dengan kod berikut mengikut warna sprakle yang anda kehendaki

  1. Biru - https://sites.google.com/site/unwanted86/javascript/biru.js
  2. Hitam - https://sites.google.com/site/unwanted86/javascript/black.js
  3. hijau - https://sites.google.com/site/unwanted86/javascript/lawngreen.js
  4. Ungu - https://sites.google.com/site/unwanted86/javascript/purple.js
  5. Putih - https://sites.google.com/site/unwanted86/javascript/putih.js
  6. Pink - https://sites.google.com/site/unwanted86/javascript/salmon.js
  7. Kuning - https://sites.google.com/site/unwanted86/javascript/yellow.js
  8. Hijau kebiruan - https://sites.google.com/site/unwanted86/javascript/aqua.js


Contoh: jika anda mahu mouse anda dengan sparkle warna biru, kodnya adalah:
<script src="https://sites.google.com/site/unwanted86/javascript/biru.js" type="text/javascript"></script>


Keterangan : Ubah warna kode yang telah diwarnai diatas.