Cara Mudah Upload File CSS, Javascript, HTML Ke Google Drive

Google terus melakukan perubahan guna kenyamanan pengguna serta peningkatan efektifitas sistem.
Google Code merupakan tempat untuk melakukan upload file dengan berbagai jenis seperti CSS, JS (JavaScript), HTML, jQuery, dan sebagainya. Namun ketika Anda pergi ke Google Code sekarang, menu download sudah tidak ada lagi sehingga fungsi untuk upload file ke browser pun hilang. Proyek-proyek yang telah dibangun sebelumnya tetap akan masih tersimpan dan dapat digunakan.

Anda bisa dengan mudah mengupload kode CSS ataupun JavaScript pada web Anda. Caranya adalah dengan memanfaatkan fasilitas Google Drive.Google Drive akan mempermudah kita dengan banyaknya aplikasi yang disediakan oleh Google, mulai dari Pengolah kata, Pengolah Angka, Formulir, Presentasi, Pemutar Lagu, Video, Pembuatan Contact Form + Upload File (Integrasi dengan JOTFORM), terus Alat Konversi File, dan masih banyak lagi.

Berikut panduan, Tutorial cara mengupload file CSS, JavaScript di Google Drive Hosting :
1. Kunjungi Google Drive pada browser Anda.
2. Lalu jika Anda adalah pengguna baru silahkan login lewat email Gmail Anda dan buatlah satu buah folder sebagai tempat untuk menyimpan proyek file-file penting Anda. Caranya klik CREATE.
3. Setelah folder jadi, klik logo icon upload berwarna merah seperti gambar ini :

4. Pilih File.
5. Cari dokumen Anda yang akan di upload.
6. Tunggu hingga proses unggah selesai yang ditampilkan pada bagian kanan bawah layar desktop Anda.
7. Klik SHARE.
8. Copy link yang disediakan, paste di Notepad terlebih dahulu.
9. Pada bagian Privacy, klik CHANGE. Mengubah privacy bertujuan untuk bagaimana file tersebut dapat diakses, jika private berarti khusus diri sendiri dan tidak dapat diakses oleh browser ketika meminta file css, js yang ter-upload tadi.

10. Pilih Public, agar semua browser dan orang lain yang membuka web blog Anda dapat menggunakan file CSS atau JavaScript code yang di upload.
11. Maka akses akan berubah dari Private ke Public.
12. Click Save and save your link to share.

Sekarang, untuk mengkoneksikan antara file yang ada di Google Drive dengan blog Anda, caranya adalah seperti contoh di bawah ini :

Perhatikan, link to share file tadi, contohnya seperti di bawah ini :

https://docs.google.com/file/d/0B-EPE3cbkU9PeV9UOXI5Q1NrX0k/edit?usp=sharing

Kode berwarna biru, silahkan Anda salin dan ambil dan letakkan pada kode berikut untuk memanggil file Anda :

https://googledrive.com/host/Masukkan Kode File Disini

Maka, hasilnya akan seperti di bawah ini :

https://googledrive.com/host/0B-EPE3cbkU9PeV9UOXI5Q1NrX0k

Nah, sekarang struktur link tersebut sudah dapat digunakan untuk mengakses file kita dan coba buka URL diatas lalu lihat hasilnya, sama seperti ketika kalian menghosting File ke Your JavaScript atau Google Code kan! Struktur URL itulah yang bisa berfungsi untuk diterapkan ke Blog kita, lalu di bagian ini Anda juga bisa meletakkan ekstensi .js .css .html .php atau yang lainnya tapi harus sesuai dengan "Bahasa Pemrograman" yang Anda "host".

9.Kemudian untuk penerapannya ke Blog atau website kita tidak ada perbedaan dengan saat menghosting File ke Google Code, kurang lebih seperti di bawah ini :

Untuk File CSS penulisannya seperti ini :

<link href='https://googledrive.com/host/0B-EPE3cbkU9PeV9UOXI5Q1NrX0k' rel='stylesheet'/>

Untuk File JavaScript strukturnya seperti ini :

<script type="text/javascript" src="https://googledrive.com/host/0B-EPE3cbkU9PeV9UOXI5Q1NrX0k/"></script>

10. Silahkan Anda copy dan letakkan pada blog Anda di atas kode </head>

Tentu mudah kan. Ya, hampir sama dengan Google Code hanya berbeda sedikit dan cepat host tersebut. Itulah tadi panduan tentang memanfaatkan layanan Google Drive yang didalamnya Anda dapat meng-upload File Musik, Documen, Presentasi, Aplikasi Kecil, Data Microsoft Office Excell, Sistematika Statistik dan lainnya.

Cara Membuat Teks Berjalan Di Laman Blog

Atas permintaan teman akhirnya saya berbagi trik kuno ini. Dan sebelum kita membahasnya, terlebih dahulu kita wajib mengetahui apa itu "Marquee"? Marquee adalah suatu kode HTML untuk membuat teks agar bisa bergerak atau berjalan.

Seringkali kita melihat halaman blog teman yang dihiasi oleh tulisan atau kata-kata yang dapat berjalan. Mungkin sebagian besar dari Anda sudah mengetahui cara membuat tulisan berjalan tersebut. Tapi di posting kali ini, saya mencoba berbagi trik ini untuk Anda yang belum mengetahui cara membuatnya.

Cara membuatnya, yaitu:

- Pertama, login ke Blogger.

- Kemudian klik Rancangan dan Elemen Laman.

- Ketika sudah berada di Elemen Laman klik Tambah Gadget.

- Lalu pilih HTML/JavaScript.

Langkah selanjutnya, masukkan kode Marquee yang Anda inginkan seperti contoh di bawah ini:

1. Teks berjalan dari kanan ke kiri

Kodenya:

<marquee direction="left" scrollamount="2" align="center"> Contoh Tulisan Berjalan </marquee>

Hasilnya:

Contoh Tulisan Berjalan

2. Teks berjalan dari kiri ke kanan

Kodenya:

<marquee direction="right" scrollamount="2" align="center"> Contoh Tulisan Berjalan </marquee>

Hasilnya:

Contoh Tulisan Berjalan

3. Teks berjalan bolak balik

Kodenya:

<marquee direction="left" scrollamount="2" align="center" behavior="alternate"> Contoh Tulisan Berjalan </marquee>

Hasilnya:

Contoh Tulisan Berjalan

4. Teks berjalan dari atas ke bawah

Kodenya:

<marquee direction="down" scrollamount="2" align="center"> Contoh Tulisan Berjalan </marquee>

Hasilnya:

Contoh Tulisan Berjalan

5. Teks berjalan dari bawah ke atas

Kodenya:

<marquee direction="up" scrollamount="2" align="center"> Contoh Tulisan Berjalan </marquee>

Hasilnya:

Contoh Tulisan Berjalan

6. Teks berjalan mondar-mandir

Kodenya:

<marquee direction="up" scrollamount="2" align="center" behavior="alternate"> Contoh Tulisan Berjalan </marquee>

Hasilnya:

Contoh Tulisan Berjalan

7. Teks berjalan zig-zag lalu tembus

Kodenya:

<center><marquee direction="up" scrollamount="2" align="center" behavior="alternate" width="90%"><marquee direction="right"> Contoh Tulisan Berjalan </marquee></marquee></center>

Hasilnya:

Contoh Tulisan Berjalan

8. Teks berjalan zig-zag memantul

Kodenya:

<center><marquee direction="up" scrollamount="2" align="center" behavior="alternate" width="90%"><marquee direction="right" behavior="alternate"> Contoh Tulisan Berjalan </marquee></marquee></center>

Hasilnya:

Contoh Tulisan Berjalan
Langkah selanjutnya adalah mengganti tulisan.

Contoh Tulisan Berjalan

dengan tulisan atau kata-kata yang Anda inginkan.

Keterangan:

- direction="left/right/up/down" = mengatur arah gerakan teks.

- scrollamount="angka" = mengatur kecepatan gerakan dalam pixel, semakin besar angka semakin cepat gerakannya.

- behavior="scroll/slide/alternate" = untuk mengatur perilaku gerakan:
* Scroll: teks bergerak berputar.
* Slide: teks bergerak sekali lalu berhenti.
* Alternate: teks bergerak dari kiri ke kanan lalu balik lagi (bolak-balik)

Fungsi dari :

<center> ............. </center> adalah agar tulisan tersebut selalu berada di tengah.

Untuk Teks berjalan berwarna: Tambahkan kode <span style="color:#f00; font-weight: bold;"> di depan tulisan Contoh Tulisan Berjalan </span>, kode warna #f00 bisa Anda ubah dengan kode warna lainnya. Untuk kode warna selengkapnya, Anda bisa mencarinya di Google Search.

Selamat mencoba! Jangan lupa klik iklan yang ada. Thanks.

Pasang Komentar Terbaru Dengan Avatar

Cara membuat Widget Komentar Terbaru Dengan Avatar:
1. Login
2. Rancangan
3. Tambah Gadget
4. Pilih Gadget HTML/Javascript
5. Salin Kode HTML di bawah ini, lalu tempel di kotak HTML.
6. Dan jangan ada yang terlewat ubah dulu http://SNIFAN.blogspot.com, dengan nama blog kalian, lalu SAVE.
7. Lihat Blog.

Kalau widgetnya tidak sesuai dengan sidebar blog kalian, ada beberapa kode yang ditandai miring di bawah ini yang bisa kalian utak-atik biar tampilan widgetnya sesuai dengan ukuran sidebar blog kalian.

Jika kalian tertarik sama widget komentar terbaru ini, silahkan dicoba. Gratis!

<style type="text/css">
ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
.w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
.w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 20,
showAvatar = true,
avatarSize = 60,
roundAvatar = true,
characters = 40,
showMorelink = false,
moreLinktext = "More »",
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = false;
//]]>
</script>
<script type="text/javascript" src="http://snifan-blogspot.googlecode.com/files/recentcomment.js"></script>
<script type="text/javascript" src="http://SNIFAN.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=20"></script>

Happy Blogging!

Membuat Iklan Muncul Tiba-Tiba Pada Blog

Para blogger, tentunya ingin iklan yang dipasang di blognya banyak yang lihat dan terus diklik oleh pengunjung, trik kali ini akan membahas cara untuk membuat iklan muncul tiba-tiba saat blog Anda di buka oleh pengunjung, dengan demikian iklan yang Anda pasang tersebut terlihat oleh pengunjung yang membuka blog Anda, dan kemungkinan besar iklan tersebut akan diklik oleh pengunjung, sehingga penghasilan Anda juga meningkat. Pastinya Anda mau kan jika iklan yang telah pasang di blog Anda tersebut banyak yang nge-klik? Oke, langsung saja ke caranya:

Caranya di bawah ini:
1. Login ke Blogger.
2. Pilih Rancangan.
3. Pilih Tambah Gadget.
4. Pilih HTML/JavaScript.
5. Copy/Paste kode di bawah ini:

<style type="text/css" scoped>
#topbar {
position:absolute;
z-index: 100;
padding: 8px;
background: #eee;
background: -moz-linear-gradient(top, rgba(255, 255, 255, .9), rgba(211, 211, 211, .9));
background: -webkit-gradient(linear,left top,left bottom,from(rgba(255, 255, 255, .9)),to(rgba(211, 211, 211, .9)));
border: 1px solid #fff;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-box-shadow: #600 0 2px 15px;
-moz-box-shadow: #600 0 2px 10px;
margin:0 auto 10px;
float:left;
color:rgba(0, 0, 0, 0.75);
font-size: 12px;
font-family: Verdana, serif;
text-shadow:0 1px 0 #FFFFFF;
}
#topbar img {
border:none;
}
#topbar .tombol {
margin:0;
padding-bottom:5px;
text-align:right;
}
#topbar .tombol button {
color:#FFFFFF;
border: solid 1px #494949;
margin:0;
padding:2px 15px;
cursor: pointer;
text-shadow: 0 1px 1px rgba(0,0,0,.6);
background: #5f5f5f;
background: -webkit-gradient(linear, left top, left bottom, from(red), to(#454545));
background: -moz-linear-gradient(top, red, #454545);
}
#topbar .isi_iklan {
background-color:#FFFFFF;
margin:0;
padding:4px;
width: 468px;
border: 1px solid #999;
}
</style>
<script src="https://googledrive.com/host/0B-EPE3cbkU9PM3pvam9ZNHJrQUk" type="text/javascript"></script>
<script type="text/javascript">
var persistclose=1
var startX = 20
var startY = 20
var verticalpos="fromtop"
</script>
<div id="topbar">
<div class="tombol"><a href="" onclick="closebar(); return false" style="text-decoration: none;"><button>Tutup</button></a></div>
<div class="isi_iklan">
<!-- Kode Iklan-->
</div>
<a style="text-decoration: none; color: #00f; text-align:right; display: block; font-size: 10px;" href="http://snifan.blogspot.com/2011/06/membuat-iklan-muncul-tiba-tiba-pada.html" target="_blank" title="Ads Popup">Widget by <span style="color: #333;">Blog</span> <span style="color: #f00;">Tips</span></a>
</div>

6. Ganti kode yang berwarna merah dengan kode script iklan Anda.
7. Anda dapat juga merubah lebar widgetnya disesuaikan dengan panjang iklan yang ingin Anda masukkan (lihat kode width: 468px; di atas, ubah ukuran width-nya sesuai dengan panjang iklannya).

Nah, sekarang tinggal Anda tunggu saja seberapa banyak iklan Anda yang di klik dengan menggunakan script ini jika dibandingkan dengan tanpa script!!!

Cara Membuat Tombol Send Facebook

Facebook meluncurkan tombol "Send". Tombol ini diharapkan dapat meningkatkan fungsi Groups sekaligus menggantikan tombol klasik "email to a friend".

Tombol "Send" sebenarnya mirip dengan tombol "Like". Saat diklik, sebuah jendela muncul yang memungkinkan Anda mengirimkan link artikel atau halaman ke jaringan teman, grup, atau alamat email.

Pengguna bisa menambahkan pesan dan mengirimkan halaman itu ke inbox teman atau "wall" sebuah "Group".
Tombol "Send" didesain untuk memudahkan pengguna berbagi konten dengan grup tertutup.

Anda dapat menambahkan tombol "Send" di blog Anda, caranya ikuti langkah-langkah berikut ini:

1. Login akun Blogger Anda.
2. Pilih Rancangan.
3. Klik Edit html.
4. Centang Expand Template Widget.
5. Cari kode "</head>".
6. Salin dan tempel kode berikut ini dan taruh di atas kode "</head>".

<script>(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>

7. Selanjutnya cari kode "<data:post.body>".
8. Salin dan tempel kode di bawah ini dan taruh di bawah kode "<data:post.body>":

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div>
<fb:send expr:href="data:post.url" font="arial" colorscheme="light"></fb:send>
</div>
</b:if>

Cari kode <html, biasanya berada di paling atas pada kolom edit html.



Dan ubah menjadi <html xmlns:fb="https://www.facebook.com/2008/fbml"

Setelah selesai, jangan lupa Anda klik "simpan".

Anda dapat mengubah kode "font=arial" bisa juga Anda ubah menjadi "font=lucida_grande/segoe_ui/tahoma/trebuchet_ms/verdana", dan "colorscheme=light" juga bisa Anda ubah menjadi "colorscheme=dark".

Selamat mencoba.

Cara Membuat Navigation Page

Page Navigation adalah sebuah widget yang digunakan pada web atau blog untuk memperlihatkan postingan atau artikel pada web atau blog tersebut per halaman, contohnya seperti gambar di bawah ini:

Untuk membuatnya sangat mudah!

1. Login ke Blogger dengan ID Anda.
2. Lalu Rancangan.
3. Klik Tambah Gadget.
4. Pilih Menu HTML/Java Script.
5. Lalu salin kode di bawah ini lalu tempel kodenya pada kotak HTML tersebut.

<style type='text/css'>.showpageArea a {text-decoration:underline;}.showpageNum a {text-decoration:none;border: 1px solid #cccccc;margin:0 3px;padding:3px;}.showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}.showpagePoint {color:#333;text-decoration:none;border: 1px solid #cccccc;background: #cccccc;margin:0 3px;padding:3px;}.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}.showpage a {text-decoration:none;border: 1px solid #cccccc;padding:3px;}.showpage a:hover {text-decoration:none;}.showpageNum a:link,.showpage a:link {text-decoration:none;color:#333333;}</style><script style='text/javascript'>var pageCount=5;var displayPageNum=5;var upPageWord="Previous";var downPageWord="Next";</script><script style='text/javascript' src='http://snifan-blogspot.googlecode.com/files/kode3.js'></script>

6. Save Widget tersebut
7. Scrool atau pindahkan widget tersebut pada area di bawah posting [lihat gambar]



8. Save Template
9. Selesai

Selamat Mencoba!

Cara Membuat Tombol Like Facebook

Facebook, situs layanan jejaring sosial paling terkenal, baru-baru ini merilis fitur baru yaitu Facebook Like. Kalau sebelumnya tombol "Like" hanya terlihat pada situs Facebook saja (misalnya di bawah status update pengguna Facebook), dengan fitur ini pengguna Facebook bisa menunjukkan rasa suka/like langsung di situs/blog di luar Facebook. Tapi tentunya hanya pada situs/blog yang memasang tombol ini yang bisa membagi link artikelnya ke Facebook.

Nah, bila Anda tertarik untuk memasang tombol "Like" di artikel blog Anda, silahkan ikuti cara pemasangannya. Sebenarnya, di situs Facebook sudah tersedia tool untuk mendapatkan kode yang bisa dipasang di situs/blog. Tapi sayangnya, pada pilihan URL to Like di tool itu, hanya bisa menentukan URL statis, tidak bisa membaca secara otomatis URL setiap artikel/halaman blog (URL dinamis). Untuk itu perlu sedikit modifikasi dari kode yang bisa didapat di Facebook itu.

Silahkan pilih kode yang sesuai dengan platform blog yang dipakai. Jika Anda tertarik silahkan ikuti langkah demi langkah di bawah ini:

- Login dulu ke akun Blogger Anda
- Klik pilihan Rancangan
- Edit HTML
- Tandai Expand Template Widget
- Cari kode <data:post.body/> dan masukkan kode di bawah ini di atas atau di bawahnya.

<b:if cond='data:blog.pageType == "item"'>
<div>
<fb:like expr:href="data:post.url" layout='button_count' send='true' show_faces='false' font="arial" action="like" colorscheme="light"></fb:like>
</div>
</b:if>

- Cari kode </head>, masukkan script berikut ini di atas kode </head>.

<script>(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>

Cari kode <html, biasanya berada di paling atas pada kolom edit html.



Dan ubah menjadi <html xmlns:fb="https://www.facebook.com/2008/fbml"

Jika sudah selesai, simpan template dan silahkan lihat hasilnya. Anda bisa memilih pengaturan tampilan pada tombol like, yaitu "Like" menjadi "Recommend" atau sebaliknya. Silahkan ganti kode like pada bagian "action=like" menjadi "action=recommend" pada pilihan kode di atas, "layout=standar" bisa Anda ubah menjadi "layout=button_count/box_count", "font=arial" bisa Anda ubah menjadi "font=lucida_grande/segoe_ui/tahoma/trebuchet_ms/verdana", dan "colorscheme=light" juga bisa Anda ubah menjadi "colorscheme=dark".

Tips Pasang Auto Readmore

Walau Blogger sudah menambahkan fitur "jump break" pada default postingnya, nampaknya pilihan AUTO READ MORE masih menjadi pilihan favorit kebanyakan Blogger dengan fitur read more yang otomatis, Anda tidak perlu bersusah payah dalam menyelipkan kode HTML pada artikel Anda, agar artikel menjadi dua bagian (bagian yang tampil di depan dan bagian yang tampil setelah di klik).
Cukup menulis artikel menarik yang Anda bisa, lalu fitur Javascript akan langsung membuat ringkasan artikel Anda dengan word count tertentu. Hebatnya, dengan Javascript, gambar (image) pertama yang ada pada artikel, juga akan secara otomatis diletakkan pada sisi kiri atas artikel. Tentunya jauh lebih mudahkan? Lalu bagaimana cara menambahkan fitur Auto Read More ini pada template Anda?
Simak petunjuk berikut ini:

1. Login ke akun blog Anda. Pada menu dasbor, pilih Rancangan.
2. Selanjutnya, masuklah ke menu Edit HTML, sebelumnya backup dulu template Anda dengan cara mengklik link " Download Full Template".

3. Cari kode </head>, dan taruh script di bawah ini di atas kode </head>:

<script type='text/javascript'>
var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script src='http://snifan-blogspot.googlecode.com/files/autoreadmore.js' type='text/javascript'/>

4. Jangan lupa klik "simpan".
5. Centang "Expand widget template".
6. Cari kode <data:post.body/>, dan ganti kode tersebut 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>

7. Save. Lalu apa saja kode yang perlu di ganti?

Catatan:

- var thumbnail_mode = "float"; > Anda dapat mengganti letak gambar artikel. Apakah ingin ditempatkan di samping kiri artikel, atau jika Anda tidak menginginkannya ganti "float" dengan "no-float".
- summary_noimg = 250; > Jumlah teks yang tampil pada artikel tanpa gambar.
- summary_img = 250; > Jumlah teks yang tampil pada artikel yang bergambar.
- img_thumb_height = 120; > Ukuran tinggi gambar yang tampil.
- img_thumb_width = 120; > Ukuran lebar gambar yang tampil.

Ganti teks Read more...(Perhatikan langkah No.6) dengan teks yang Anda inginkan.

Selesai!

Cara Membuat Kotak Fans Page

Apakah Anda ingin menampilkan seberapa banyak fans blog Anda di Facebook? Saat ini Facebook menyediakan berbagai macam aplikasi dan widget yang dapat Anda gunakan di website atau blog Anda. Tapi kali ini saya akan membahas bagaimana cara membuat like box (dulu disebut fan box) dan menampilkannya di blog Anda.

Like box adalah sebuah widget yang dapat Anda tampilkan di blog atau website Anda, berupa kotak yang berisi foto-foto dari profile Facebook yang menyukai, atau meng-like blog kita dengan mengklik tombol like yang terdapat di kotak tersebut. Like Box dahulu bernama Fan Box dan tombol like di dalam kotak itu dulu ditulis become a fan. Tidak tahu kenapa Facebook menggantinya dengan like, menurut saya kata-kata become a fan agak sedikit terlalu berlebihan, tidak seperti kata like yang lebih familiar dan lebih ringan didengar.

Ada banyak keuntungan menggunakan Like Box, disamping dapat mendatangkan traffic dari Facebook, akan ada kepuasan tersendiri jika banyak yang menyukai blog kita. Tentu saja untuk menampilkan sebuah Like Box kita harus membuat page di Facebook. Page adalah fasilitas dari Facebook, penggunaannya sama seperti halnya profil pribadi Facebook kita, kita dapat menuliskan status, dan sharing apapun disana. Hanya saja di page ini tidak fasilitas add friend request atau approve friend request. Yang ada hanya tombol like itu tadi. Dan jika kita sudah meng-like sebuah page di Facebook, kita tidak perlu menunggu disetujui dahulu oleh sang empunya page.

Lalu bagaimana cara membuat page di Facebook?

Setelah login, klik link ini Create Facebook Page, selanjutnya pilih salah satu jenis halaman yang akan dibuat, berikut ini:
- Tempat atau Bisnis Lokal
- Perusahaan, Organisasi, atau Institusi
- Merek atau Produk
- Artis, Band, atau Tokoh Masyarakat
- Hiburan
- Gerakan atau Topik

Selanjutnya pilih kategori halaman yang tersedia, tulis Nama Halaman yang akan dibuat, dan beri tanda centang pada "I agree to Facebook Pages Terms" atau yang bertuliskan "Saya adalah perwakilan resmi bagi orang, bisnis, grup musik, atau produk ini, dan memiliki izin untuk membuat Halaman ini", serta akhiri dengan mengklik tombol Memulai. Jika Anda tidak masuk pada salah akun Facebook ketika membuat halaman, silakan klik tombol Buat Halaman Komunitas atau jika halaman yang dibuat bersifat resmi, pilih yang di sebelah kanannya dengan mengisi data yang diperlukan dan akhiri dengan mengklik tombol Buat Halaman Resmi.
Sekarang halaman Anda telah berhasil dibuat, silakan tambahkan informasi lainnya, dan undang teman Anda untuk bergabung atau menjadi penggemar di halaman tersebut.

Selanjutnya Anda dapat menambahkan foto atau mengedit profil sesuai dengan keinginan Anda.

Cara Membuat Like Box

Setelah selesai membuat Official Page pribadi Anda di Facebook, langkah selanjutnya adalah membuat Like Box.

- Klik Edit page.

- Lalu klik Promote with a Like Box.

- Pada Facebook Page ID isikan dengan Facebook Page ID Anda.
- ID ini dapat Anda temukan di address bar browser Anda.

- Maka akan Like Box Anda akan muncul. Anda tinggal mengatur saja Width, Height, Connections, Stream, Headernya.

Width: lebar dari Like Box, Height: tinggi dari Like Box, Connections: jumlah orang yang meng-like page Anda (sesuaikan dengan header dan width), Stream: aktivitas live terbaru dari page Anda, Header: opsi untuk menampilkan Find us on Facebook atau tidak.
Setelah selesai Anda setting, klik Get Code

- Dan akan muncul 2 macam kode yang dapat Anda pilih.

Saya menyarankan Anda gunakan XFBML, karena kelebihan dari XFBML adalah lebih flexible dibandingkan dengan iframe.
Kelebihan lain dari XFBML adalah Like Box yang Anda pasang nanti tidak akan menghalangi loading element lain di blog Anda. Berbeda dengan iframes, contoh: Like Box Anda taruh di sidebar bagian atas, jika loading Like Box ini belum sempurna, maka widget atau elemen lain di bawah Like Box akan loading sebelum Like Box Anda di-load secara utuh.
Namun ada kode yang harus Anda tambahkan agar Anda dapat menambahkan kode XFBML ini. Masukkan kode dibawah ini di header.php Anda setelah itu copy kode Javascript SDK yang ada di halaman tersebut.

Tips Mempercepat Loading Form Komentar

Selain mengandung banyak error dan tidak valid HTML, sebenarnya form komentar default blogger juga mempunyai permasalahan lain. Terdapat "keanehan" dalam cara penulisan kode pemanggilan iframe form tersebut. Kenapa dibilang aneh? Karena pemanggilan iframenya dibuat terpisah menjadi dua bagian.
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 tidak akan terlihat ketika pengunjung membaca isi artikel blog Anda sampai habis terlebih dahulu. Why? Karena saat pengunjung selesai membaca artikel, form komentar memang sudah berhasil diloading dengan sempurna. Tapi, kalau kita bandingkan lama loading form komentar dengan widget-widget lainnya, dijamin pasti akan terlihat seberapa lambatnya iframe tersebut.

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

Dan kalau blog Anda mengalami masalah yang persis seperti pembahasan sebelumnya, berikut ini ada cara untuk memperbaiki "keanehan" form komentar tersebut.

1. Masuk ke menu Edit HTML blog Anda, kemudian berikan tanda centang pada kolom Expand Widget Template. (Jangan lupa untuk membackup blog terlebih dahulu, untuk berjaga-jaga dari kesalahan waktu meng-edit kodenya)

2. Carilah kode seperti di bawah ini pada template Anda:

<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 karena 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%'/>

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

Cara Membuat Iklan Tampil Melayang Di Blog

Pernahkah Anda mengunjungi blog dengan iklan/gambar melayang di depan halaman blognya? Nah, Blog Tips kali ini memberikan tips kepada Anda bagaimana caranya membuat iklan melayang dengan tombol close?
Pertama Login ke Blogger lalu pilih rancangan, elemen halaman, dan masukkan kode html dibawah ini:

<style type="text/css" scoped>
#gb{
position:fixed;
top:10px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbcontent{
float:right;
border:2px solid #A5BD51;
background:#ffffff;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
<div style="text-align:right">
<a href="javascript:showHideGB()">
.:[Close][Klik 2x]:.
</a>
</div>
<div style="text-align: justify;">

Masukan Kode iklan atau Gambar yang Anda inginkan di sini

</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.center = (30-gb.offsetWidth).toString() + "px";
</script></center></div></div>

Klik simpan dan lihat hasilnya, selamat mencoba!

Pasang Widget SMS Gratis

Anda mungkin kehabisan pulsa dan sedang browsing di dunia maya lalu ingin memberikan informasi yang menarik via SMS ke teman Anda. Jangan kuatir blog ini akan memberitahu widget yang bisa dipasang dan digunakan untuk mengirim SMS GRATIS via blog Anda. Dan seperti judul di atas, blog ini tidak akan panjang lebar dalam membahasnya.
Dan juga tentunya keunggulan dari memasang widget ini ialah dapat mendatangkan trafik pengunjung tambahan buat blog Anda. Namun masih ada kekurangan dari widget ini yaitu tidak bisa menerima SMS balasan. Sehingga bila ada yang membalas SMS, Anda tidak bisa membacanya. Namun walaupun seperti itu widget ini sangat bermanfaat terutama untuk Anda yang suka ber-SMS ria. Dan yang terpenting pesan Anda dapat segera terkirim ke teman. Oke!

Silakan copy/paste kode di bawah ini:

<a href="http://snifan.blogspot.com/" target="_blank"><iframe name="widgetsms" src="http://www.sms-online.web.id/widget" rel="nofollow" style="border:0" scrolling="no" width="270" height="350"> not support </iframe></a>

Silakan Anda login dahulu ke Blogger:

- Pilih rancangan,
- Tambah widget baru,
- Setelah itu Anda pilih,
- Edit HTML/Javascript,
- Paste-kan kode yang sudah Anda copy tadi.

Sekarang blog Anda sudah bisa melayani SMS gratis buat Anda juga para pengunjung, lumayan bisa menambah trafik di blog Anda.



Semoga bermanfaat.

Tips Hilangkan Widget Entri Lawas

Kembali lagi dalam Blog Tips, kali ini akan membahas bagaimana cara menghilangkan tulisan entri lawas?
Entri Lawas merupakan pengaturan standar dari Blogspot.
Tetapi sebagian blogger merasa terganggu dengan adanya "widget entri lawas" ini.
Jika ada di antara blogger yang ingin menghilangkan "widget entri lawas" ini, ikuti langkah berikut:

Login ke Blogger:

- Klik Rancangan, Edit HTML.
- Klik tulisan Download Template Lengkap.
- Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan edit pada template, Anda masih punya cadangan data untuk mengembalikannya seperti semula.
- Beri tanda centang pada kotak di samping tulisan "Expand Template Widget"
Kemudian cari kode seperti dibawah.

Tips: Untuk mempercepat pencarian Anda bisa gunakan tombol Ctrl + F atau (F3)

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

Jika sudah ketemu, hapus dan ganti dengan kode di bawah ini:

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

Jika sudah selesai SIMPAN TEMPLATE dan lihat hasilnya

Selamat mencoba.

Hack Tag HTML Blogspot Anda

Hal pertama yang dilakukan ketika membuat template blogger, melakukan reset, katakanlah seperti itu. Reset Blogger Template yang dimaksud disini adalah untuk memperbaiki tampilan dan struktur dasar template, agar lebih baik.

RESET CSS

Reset CSS yang digunakan, yang simpel, jadi tidak terlalu banyak dan tidak membebani, yaitu:

*{margin:0; padding:0;}
.post-body ol,.post-body ul {margin:5px 20px;}

RESET BAWAAN BLOGGER

Reset ini lebih berfungsi untuk menyembunyikan (hack) bawaan blogger yang menurut blog ini menggangu, seperti: "Navbar, Quick Edit, Status Massage, dan Feed Link". Reset Bawaan Blogger keseluruhannya seperti ini:

#navbar-iframe, .status-msg-wrap, .icon-action, .quickedit, .feed-links {display: none;}

Tapi juga bisa dilakukan dengan cara yang ekstrim seperti dibawah ini:

1. Menambah kode berikut diantara </head> dan <body>; untuk menghilangkan Navbar

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

2. Menghapus Semua Kode Quick Edit (aktifkan Expand Widget Templates)

<b:include name='quickedit'/>

3. Menghapus Feed Link (aktifkan Expand Widget Templates)

CSS nya:

.feed-links {
clear: both;
line-height: 2.5em;
}

HTML nya:

<b:includable id='feedLinksBody' var='links'>
<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>
</b:includable>

4. Menghapus Status Massage (aktifkan Expand Widget Templates)

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

RESET HEADING

Idealnya Hirarki Heading (h1-h6) sebagai berikut:

h1 = Judul Blog
h2 = Judul Post
h3 = Judul pada Sidebar/Footer (widgate)
h4 = Judul Komentar

Jadi di Blogger Template perlu ada pembenahan pada judul Post (h3), judul pada Sidebar dan Date (h2).

1. Pembenahan pada Judul Post

Pada Kode CSS:

.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}
.post h3 strong, .post h3 a:hover {
color:$textcolor;
}

Pada Kode HTML:

<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>

- Ubah heading h3 menjadi h2

2. Pembenahan pada Judul pada Sidebar/Footer (widgate)

Pada Kode CSS:

h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
}

Pada Kode HTML:

<h2 class='title'><data:title/></h2>

Ubah heading h2 menjadi h3

3. Pembenahan pada Date

Menurut blog ini 'date' tidak perlu menggunakan tag heading, karena kurang memiliki nilai. Jadi tag heading pada 'date' dapat Anda hapus.

Pada Kode CSS:

h2.date-header {
margin:1.5em 0 .5em;
}

Hilangkan h2 nya sehingga menjadi:

.date-header {
margin:1.5em 0 .5em;
}

Pada Kode HTML:

<h2 class='date-header'><data:post.dateHeader/></h2>

Ganti h2 menjadi div seperti:

<div class='date-header'><data:post.dateHeader/></div>

Penutup

Demikian keseluruhan reset Blogger Template yang dapat Anda lakukan dalam mengedit template. Tapi reset ini jangan digunakan untuk Free Blogger Template, terutama untuk Reset Heading. Mungkin Anda punya cara lain juga. Kalau mau silahkan berbagi dikomentar.

Tips Agar Blog Anda Memuat Lebih Cepat

Kecepatan di mana beban blog Anda sangat penting untuk menarik lebih banyak pembaca ke blog Anda. Jika blog Anda membutuhkan waktu yang lama untuk loading, banyak pembaca dapat meninggalkan blog Anda sebelum mereka memiliki kesempatan untuk membacanya. Berikut adalah beberapa tips dan trik yang akan membantu memuat blog Anda lebih cepat dan menarik lebih banyak pengguna:

Posting

Waktu buka blog Anda bisa dipengaruhi oleh jumlah posting Anda tampilkan di halaman utama Anda. Anda dapat dengan mudah mengedit jumlah posting yang ditampilkan di halaman utama dari tab Pengaturan | Format. Anda kemudian dapat memilih jumlah posting yang ingin ditampilkan pada halaman utama. Disarankan menampilkan 10 atau lebih sedikit posting di halaman utama.

Pihak Ketiga JavaScript dan Link

Untuk kecepatan load blog optimal, kami sarankan untuk menggunakan Google/Blogger widget, JavaScipt dan link. Namun, jika Anda perlu menggunakan JavaScipt pihak ketiga dan link, blog Anda akan memuat lebih cepat jika Anda menempatkan semua JavaScript di bagian bawah blog Anda. Jika Anda memiliki JavaScript pihak ketiga dan link pada sidebar Anda, tempatkan semuanya di di bagian bawah sidebar.

Foto dan Media



Pelajari cara bahkan lebih produk Google lainnya.

Gambar, video dan multi-media yang Anda miliki di blog Anda semakin lama waktu yang dibutuhkan untuk beban. Namun, gambar dan multimedia lainnya adalah penting untuk menarik pengguna untuk blog Anda, sehingga sangat penting untuk mengoptimalkan kecepatan memuat gambar Anda dan media. Berikut adalah beberapa tips untuk meningkatkan kecepatan beban media Anda:

* Kurangi ukuran gambar Anda atau gambar kecil menggunakan link ke gambar ukuran penuh.
* Jika Anda menggunakan gambar dari pihak ketiga, disarankan untuk meng-upload gambar maupun foto ke Picasa Web Album melalui editor posting Blogger.
* Jika Anda memiliki sejumlah besar gambar untuk menampilkan, Anda dapat meng-upload semua foto Anda (dari sebuah liburan atau acara) ke Picasa Web Album dan link ke album di posting atau sidebar.

Saran lainnya:

* Jika Anda telah menambahkan apapun CSS kustom ke blog Anda, pastikan Anda letakkan di bagian atas halaman.
* Kandungan yang paling penting dari blog Anda yang bisa menarik perhatian pembaca harus memuat tercepat. Untuk membantu Anda mengidentifikasi item yang mengambil terpanjang untuk memuat Anda dapat menggunakan Stopwatch. Untuk menggunakan Stopwatch, masukkan URL blog Anda ke dalam kotak teks dan klik "Start Stopwatch". Stopwatch kemudian akan membuka blog Anda dalam bingkai dan akan mencatat waktu yang diperlukan untuk segalanya di blog Anda untuk memuat, termasuk gambar, video, widgets, dll. Mencatat item yang mengambil terpanjang untuk memuat dan memodifikasi mereka secara tepat menggunakan saran blog ini.

Membuat Headline New Artikel Anda

Jika Anda ingin membuat tampilan blog menjadi lebih kelihatan menarik dan keren, silahkan memanfaatkan fasilitas penyedia headlines. Judul-judul artikel blog Anda pada saat yang sama membantu Anda untuk menampilkan artikel-artikel Anda supaya menarik perhatian pengunjung blog untuk membaca artikel-artikel yang tampil, berarti Anda patut untuk mencoba widget "Headline News" di blog Anda.
Caranya sangat mudah.

1. Login ke Blogger
2. Klik Rancangan
3. Tambahkan gadget Anda dan pilih HTML/Javascript
4. Copy kode di bawah ini lalu paste ke kolom gadget HTML/Javascript.

<script type="text/javascript"
> var hn_url_blog = "http://namablog-Anda.blogspot.com";
var hn_jumlah_post = 5;
var hn_warna_latar = "#EEEEEE";
var hn_warna_garis = "#000000";
var hn_posisi = "top";
var hn_tampilkan_judul = true;
var hn_backlink = true;
</script> <script src="http://snifan-blogspot.googlecode.com/files/headlinenewsscript.js"> </script>

Keterangan:
Ganti kode yang berwarna biru dengan url blog Anda,
var hn_url_blog = URL blog,
var hn_jumlah_post = jumlah judul artikel posting yang ditampilkan,
var hn_warna_latar = warna latar belakang headline news,
var hn_warna_garis = garis border headline news,
var hn_posisi = posisi headline news,
var hn_backlink = bila ingin backlink ditampilkan,

5. Jangan lupa disimpan.

Selamat mencoba.

Cara Membuat Widget Page Loading Time Di Blog

Trik berikut ini adalah cara membuat script Page Loading Time. Page Loading Time atau Waktu Pemuatan Halaman adalah merupakan alat bantu untuk mengetahui waktu yang diperlukan untuk memuat keseluruhan halaman dari suatu halaman situs atau blog. Dengan widget ini dapat diketahui kecepatan dalam memuat halaman blog, dan dengan ini akan memberikan ide bagi pemilik blog untuk mengoptimasi blognya agar lebih cepat.

Langsung saja, satuan yang akan digunakan adalah milidetik, bagaimana jika Anda ingin menggunakan satuan waktu menit???

Oke, Ini cara memasang script Page Loading Time:

Langkah 1:
- Login ke Blogger.
Langkah 2:
- Masuk ke "Rancangan, Edit HTML".
Langkah 3:
- Cari kode di bawah ini:

</head>

Langkah 4:
- Salin lalu tempel kode di bawah ini di atas kode </head>:

<script type='text/javascript'>// <![CDATA[ var now = new Date(); window.onload = function() { document. getElementById("waktuload").style.display = "block "; document. getElementById("milidetik") .innerHTML = (new Date()). getTime() - now.getTime(); } //]]></script>

Langkah 5:
- Cari kode di bawah ini:

<body>

Langkah 6:
- Sisipkan kode di bawah ini:
id="waktuload", pada kode <body>, sehingga hasilnya menjadi seperti di bawah ini:

<body id="waktuload">

Langkah 7:
- Tempatkan kode di bawah ini, dimana saja sesuai dengan keinginan Anda?

Loading time <span id='milidetik'/> ms

Catatan:
Kode di atas akan menampilkan waktu pemuatan halaman yang sedang Anda lihat.

Langkah 8:
- Simpan template dan preview blog Anda!

Selamat mencoba dan semoga berhasil.
Happy Blogging!

Konversi Blog Ke Versi Mobile

Blog Anda jadi lebih nyaman dibaca di browser ponsel, oke tampaknya di masa depan semua ponsel bakal menyuguhkan browser dengan kemampuan terbaiknya.
HTML, AJAX, JAVA STRING, FLASH, dan MULTIMEDIA, semua akan tampil sempurna di layar ponsel, sesempurna tampilannya di komputer desktop. Namun saat ini, ponsel dengan kemampuan browser kompleks seperti itu masih sedikit. Beberapa vendor malah mematok harga yang cukup mahal untuk ponsel full browser mereka. Hal ini menjadi tantangan bagi para blogger dan pemilik website.
Bagaimana supaya mereka bisa menyuguhkan blog yang selain nyaman dibaca di komputer desktop, namun juga nyaman ditelaah di browser ponsel biasa? Solusinya? Jangan berpikir terlalu rumit. Tak perlu pula memeras keringat mengingat banyaknya "command html" dan berlama-lama membuat versi mobile yang rumit.

Anda hanya perlu berterima kasih pada MOFUSE, layanan konversi blog versi Mobile yang gratis dan mudah digunakan.

KONVERSI

Yang Anda butuhkan untuk memulai operasi ini adalah sebuah desktop komputer dengan browser dan koneksi internet. Itu saja. Masuklah ke situs Mofuse. Di bagian tengah, Anda akan melihat kolom dengan tulisan "Mobilize your Blog Now". Masukkan alamat blog Anda ke dalam kolom yang tersedia, kemudian tekan tombol Mobilize. Selanjutnya Anda akan dibawa ke halaman baru berisi beberapa setting dan konfigurasi.

LANGKAH 1:

Konfigurasi alamat web versi mobile

Masukkan alamat blog versi mobile Anda. Agar mudah diingat, sebaiknya masukkan alamat yang mirip blog versi webnya. Misalkan jika alamat webnya "namablog-Anda.blogspot.com", maka alamat versi mobilenya menjadi "namablog-Anda.mofuse.mobi". Mofuse secara otomatis akan menambahkan akhiran mofuse.mobi pada alamat mobile Anda. Jangan lupa cantumkan judul atau tema blog Anda pada kolom "Mobile Site Tittle", serta kategori blog Anda dalam kolom "Mobile Site Category".

LANGKAH 2:

Membuat akun untuk mengklaim alamat mobile site Anda

Untuk mengklaim alamat mobile site yang Anda buat di langkah pertama, Anda perlu membuat akun di Mofuse. Masukkan password yang Anda kehendaki. Cantumkan pula alamat email Anda sehingga data-data penting seperti password dan konfigurasi situs mobile Anda terkirim ke alamat email.

LANGKAH 3:

Finalisasi

Pada langkah ini, Anda hanya perlu memberi tanda centang di kolom persetujuan layanan, kemudian menekan tombol "Launch Mobile Site". Sesaat kemudian, Anda akan mendapatkan halaman baru bernama "Dashboard". Di dashboard ini, Anda bisa melakukan konfigurasi lebih lanjut terhadap situs mobile Anda, termasuk melakukan pengaturan akun, utak-atik tampilan, dan menerima pesan email. Sekarang Anda dapat membandingkan blog Anda, versi web dengan versi mobilenya.

* Ada alternatif lainnya untuk mengkonversi blog Anda ke versi mobile menggunakan akun Google Anda.

- Klik link ini untuk konversi blog Anda menjadi versi mobile

- Klik "Sign In with Google Account", "Add New Blog", masukkan nama blog Anda, "Go", masukkan kembali nama blog Anda, "Check Availability", "Next", setting site feed blog Anda ke "FULL", "Add Code", tambahkan gadget, kembali lagi ke bloggertouch, isi kembali nama blog Anda bila diminta, klik "Next", "Verification", bila sukses diverifikasi berarti blog Anda telah dikonversi ke versi mobile secara otomatis.

Silahkan Anda lihat tampilan baru blog Anda via browser ponsel Anda. Bagaimana? Keren kan?

Tampilan blog Anda memang menjadi sederhana. Tapi dengan begitu loading blog Anda menjadi cepat diakses dan pengunjung blog Anda pun tidak perlu menunggu lama untuk sekedar melihat maupun membaca artikel di blog Anda.

Menarik bukan?

Blog Anda kini lebih leluasa diakses melalui ponsel.

Selamat mencoba!

Cara Menempatkan Metatag DMOZ

Submit blog Anda ke direktori DMOZ merupakan suatu keharusan bila blog Anda ingin mendapatkan trafik pengunjung yang melimpah dan juga terdaftar otomatis di direktori populer, yang menjadi masalah adalah lamanya blog yang didaftarkan untuk disetujui, kadang bisa berbulan-bulan lamanya. Kalau beruntung blog Anda akan disetujui oleh para penilai sukarelawan DMOZ yang berwujud manusia asli bukan robot search engine.

Nah, setelah disetujui, Google hanya akan menampilkan deskripsi yang Anda tulis di DMOZ pada waktu pendaftaran dihasil pencarian Google. Dan hal ini tidak diinginkan sebagian blogger, karena mereka menginginkan meta deskripsi yang ada di blognya bukan deskripsi di DMOZ dihasil pencarian Google.

Untuk mencegah Google menampilkan deskripsi yang ada di direktori DMOZ, Anda dapat menambahkan metatag DMOZ di html blog Anda.

Selanjutnya, untuk memasang metatag DMOZ. Anda dapat mengikuti langkah-langkah berikut ini:
1. Login menggunakan akun Blogger Anda.
2. Setelah berhasil login, klik "rancangan", "edit html".
3. Kemudian salin/tempel kode metatag DMOZ ini tepat dibawah tag <head>.

<meta name="Robots" content="NoOdp"/>

4. Lalu "simpan" dan lihat hasilnya.

Dengan menempatkan metatag DMOZ berarti Anda melarang Google untuk menampilkan deskripsi blog Anda yang ada di direktori DMOZ. Namun hanya menampilkan deskripsi yang Anda inginkan atau deskripsi yang sesuai dengan blog Anda.

Catatan: Bila isi deskripsi yang Anda tulis di DMOZ sama dengan meta deskripsi di blog Anda. Anda tidak perlu menempatkan metatag ini.

Memasang Tombol Komentar Klasik (Classic) Di Atas Kolom Komentar

Blog ini akan membahas bagaimana caranya Memasang Tombol Komentar Klasik (Classic) Di Atas Kolom Komentar. Sebenarnya sangat mudah, Anda hanya perlu memasang script code komentar klasik pada Script komentar.

Lalu apa fungsi dari tombol ini? Fungsinya adalah untuk mempermudah para pengunjung blog yang menggunakan koneksi lemah untuk berkomentar. Karena jika berkomentar seperti biasa, membutuhkan ukuran loading yang lebih besar karena pengunjung harus me-load ulang halaman blog Anda. Namun dengan tombol komentar classic ini, pengunjung hanya me-load kolom komentar dan komentar pembaca sebelumnya saja.

Langsung saja, Buka HTML Editor template blogspot Anda. Menuju Rancangan > Edit HTML. Jangan lupa centang "Expand Template Widget".

Letakkan kode di bawah ini tepat setelah kode <data:blogTeamBlogMessage/>.

<div style='margin-bottom: 5px;'>
<a expr:href='&quot;http://www.blogger.com/comment.g?blogID=XXXX12358834XXXXXX&amp;postID=&quot; +data:post.id+ &quot;&amp;isPopup=true&quot;' href='' onclick='javascript:window.open (this.href,&quot;bloggerPopup&quot;,&quot;toolbar=0,location=0,statusbar=1, menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;' title='Form Komentar Klasik'>
<b style='-moz-border-radius: 5px 5px 5px 5px; background-color: #f6f6f6; border: 2px solid rgb(192, 192, 192); color: #333333; padding: 2px 10px;'>Gunakan Form Komentar Klasik</b>
</a></div>

Atau jika tidak ada kode <data:blogTeamBlogMessage/>, kode di atas juga bisa ditempatkan setelah kode <p><data:blogCommentMessage/></p>.

Keterangan:

Angka berwarna hijau adalah Id Blog Anda. Untuk mengetahui ID Blog Anda, silahkan Anda coba masuk ke Post Editor (Menuju Dasbor > Entri Baru). Lalu lihat pada Address Bar browser Anda, akan di tampilkan Id Blog Anda. Untuk mempermudah coba lihat gambar di bawah ini.

Teks berwarna biru adalah teks yang ingin anda tampilkan pada tombol komentar classic.