Mengubah template blogger mobile

Setelah meluncurkan blogger versi mobile, disertai pula dengan pilihan template yang bisa kita gunakan. Namun, sampai artikel ini ditulis, baru ada enam template yang bisa kita pilih. Juga belum ada pilihan memodifikasi HTML template.

Cara mengubahnya, sebagai berikut.

Pada dashboard blogger versi baru, pilih blog yang akan diubah templatenya. Klik Template.

Klik ikon gerigi pada versi Moblie untuk mengubah template.

Untuk memilih template, klik drop down menu yang disediakan atau klik tanda panah pada thumbnail di sebelahnya.

Klik Preview untuk melihat hasilnya.

Ketika diakses di perangkat mobile (handphone), blog kita akan seperti ini.

Klik Save bila sudah yakin akan memilih template tersebut.

Mengubah favicon blogger lebih mudah

Ingin mengganti logo blogger? Kini, tidak perlu repot lagi menyisipkan kode HTML. Blogger sudah menyediakannya. Tinggal kemampuan kita untuk membuat logonya. Cara mengubahnya sebagai berikut.

Masuk ke Design. Klik Edit pada Favicon.

Klik Pilih Berkas.

Pilih logo milik Anda lalu klik Open.

Klik Save.

Sebarkan blog ke puluhan web menggunakan Google Ping

Masih seputar promosi blog. Kali ini, saya akan mencoba ping ke puluhan website menggunakan Google Ping. Ada sekitar 96 website yang bisa kita masukkan. Tentu saja hal ini sangat membantu dibanding harus memasukkan satu per satu ke web tersebut.

Caranya sebagai berikut.

Buka http://googleping.com/

Isi pada bagian Blog Details lalu ceklis web mana saja yang Anda inginkan.

Klik Send Pings.

Tunggu proses sampai selesai. Ketika saya coba, hanya 3 web yang gagal di ping.

Hal ini bisa dilakukan beberapa kali. Jadi, jangan lupa simpan (bookmark) Google ping supaya bisa digunakan di kemudian hari.

Promosikan blog sesering mungkin

Promosikanlah blog sesering mungkin, kapan pun dan di mana pun tempatnya. Asalkan jangan “menyampah”. Kali ini saya akan mencoba membuat widget promosi untuk blogger. Widget ini nantinya akan menampilkan ringkasan blog dalam bentuk pop pun. Kita juga bisa mengaktifkan auto share supaya ketika menambah artikel, otomatis di-sharing ke Facebook maupun Twitter.

Caranya sebagai berikut.

Buka http://www.blogupp.com/ lalu masukkan url blog Anda. Klik Get widget!

Tunggu proses pembacaan konten blog. Kalau sudah selesai, pilih bentuk widget yang disediakan.

Untuk mengaktifkan auto share, pilih salah satu tombol yang diinginkan.

Klik Allow jika Anda mengizinkan situs tersebut mengakses data Anda di facebook.

Jika sudah selesai, copy kode yang diberikan.

Paste di gadget HTML/JavaScript lalu klik Save.

BlogUpp akan mereview selama kurang lebih satu hari. Jika sudah, nantinya konten yang ditampilkan, dari blog kita sendiri.

Blogger versi mobile

Secara resmi, sampai artikel ini ditulis, blogger memang belum menyediakan versi mobile. Fasilitas ini masih dalam tahap pengembangan. Kita tetap bisa mencobanya dengan mengaktifkannya pada blogger versi draft. Dengan demikian, kita bisa menambah trafik blog via handphone.

Caranya sebagai berikut.

1. Login ke http://draft.blogger.com.
2. Klik Email & Mobile pada tab Settings.
3. Pilih opsi Yes, pada Show mobile template.
4. Klik Save Changes.

Ketika blog kita dibuka di handphone, tampilannya seperti ini.

Alamat urlnya tetap sama sehingga bisa menambah trafik ke blog kita. Yang mengakses pun akan terasa lebih ringan dibanding tampilan blog secara penuh.

Siapa yang menyebarkan blog kita?

Siapa yang menyebarkan artikel di blog kita melalui Facebook? Kalau kita lacak satu per satu, sepertinya memakan banyak waktu. Coba saja gunakan plugin ini. Akan menampilkan siapapun yang terakhir kali membagikan artikel di blog kita. Plugin ini juga banyak digunakan di situs berita.

Buka link ini lalu masukkan url blog Anda. tekan tombol Tab pada keyboard.

Tentukan pula ukuran dan informasi lainnya. Jika sudah, klik Get Code.

Salin kode yang diberikan.

Pasang di gadget blog Anda.

Tingkatkan trafik blog Anda

Ingin menambah trafik blog? Banyak cara bisa dilakukan. Pada intinya, kita harus promosi di berbagai tempat dan kesempatan, baik di dunia maya maupun dunia nyata. Berikut ini, saya menjelaskan cara promosi secara otomatis, yang biasa disebut ping.

Silakan buka http://pingomatic.com/ lalu isi formulir di bawahnya. Ceklis semua service lalu klik Send Pings.

Tunggu sebentar, proses ping telah dilakukan.

Selain situs di atas, bisa juga menggunakan http://pingler.com/.

Proses ping sebagai berikut.

Jika artikel Anda berbahasa Inggris, cara ini saya rasa lebih bermanfaat. Kalau berbahasa Indonesia, siapa tahu ada yang nyasar.

Readmore sudah lama disediakan blogger

Sampai sekarang, masih banyak pengguna blogger yang belum sadar bahwa blogger sudah menyediakan fasilitas readmore (baca selengkapnya). Padahal, fasilitas itu sudah lama ada. Mungkin, karena ketika menulis artikel, menggunakan aplikasi lain seperti Windows Live Writer. Namun, meskipun seperti itu, sekali-kali hendaknya berkunjung ke dashboard blogger kita supaya apabila ada perubahan, bisa langsung mengetahui dan menggunakannya.

Bagaimana menggunakan fasilitas readmore di blogger?

Silakan tulis artikel seperti biasa lalu letakkan kursor pada awal paragraf yang akan dipenggal. Klik Insert jump break.

Akan keluar garis putus-putus di antara paragraf yang akan ditampilkan dengan paragraf yang akan dipenggal. Klik PUBLISH POST.

Hasilnya seperti ini.

Mudah, bukan? Tidak perlu repot-repot mengubah/menambah kode HTML untuk membuat readmore. Jika ingin membuat readmore otomatis, silakan baca di sini.

Highlight syntax pada blogger

Sering memasukkan kode pada artikel blogger? Kalau ya, Anda bisa membedakannya dari tulisan lain menggunakan syntaxhighlighter. Dengan demikian, si pengunjung bisa sedikit memahami tentang kode tersebut. Contohnya seperti berikut ini.

Cara membuatnya sebagai berikut.

• Salin kode di bawah ini lalu paste sebelum kode ]]></b:skin>.

.dp-highlighter
{
 font-family: "Consolas", "Monaco", "Courier New", Courier, monospace;
 font-size: 12px;
 background-color: #E7E5DC;
 width: 99%;
 overflow: auto;
 margin: 18px 0 18px 0 !important;
 padding-top: 1px; /* adds a little border on top when controls are hidden */
}

/* clear styles */
.dp-highlighter ol,
.dp-highlighter ol li,
.dp-highlighter ol li span 
{
 margin: 0;
 padding: 0;
 border: none;
}

.dp-highlighter a,
.dp-highlighter a:hover
{
 background: none;
 border: none;
 padding: 0;
 margin: 0;
}

.dp-highlighter .bar
{
 padding-left: 45px;
}

.dp-highlighter.collapsed .bar,
.dp-highlighter.nogutter .bar
{
 padding-left: 0px;
}

.dp-highlighter ol
{
 list-style: decimal; /* for ie */
 background-color: #fff;
 margin: 0px 0px 1px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */
 padding: 0px;
 color: #5C5C5C;
}

.dp-highlighter.nogutter ol,
.dp-highlighter.nogutter ol li
{
 list-style: none !important;
 margin-left: 0px !important;
}

.dp-highlighter ol li,
.dp-highlighter .columns div
{
 list-style: decimal-leading-zero; /* better look for others, override cascade from OL */
 list-style-position: outside !important;
 border-left: 3px solid #6CE26C;
 background-color: #F8F8F8;
 color: #5C5C5C;
 padding: 0 3px 0 10px !important;
 margin: 0 !important;
 line-height: 14px;
}

.dp-highlighter.nogutter ol li,
.dp-highlighter.nogutter .columns div
{
 border: 0;
}

.dp-highlighter .columns
{
 background-color: #F8F8F8;
 color: gray;
 overflow: hidden;
 width: 100%;
}

.dp-highlighter .columns div
{
 padding-bottom: 5px;
}

.dp-highlighter ol li.alt
{
 background-color: #FFF;
 color: inherit;
}

.dp-highlighter ol li span
{
 color: black;
 background-color: inherit;
}

/* Adjust some properties when collapsed */

.dp-highlighter.collapsed ol
{
 margin: 0px;
}

.dp-highlighter.collapsed ol li
{
 display: none;
}

/* Additional modifications when in print-view */

.dp-highlighter.printing
{
 border: none;
}

.dp-highlighter.printing .tools
{
 display: none !important;
}

.dp-highlighter.printing li
{
 display: list-item !important;
}

/* Styles for the tools */

.dp-highlighter .tools
{
 padding: 3px 8px 3px 10px;
 font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;
 color: silver;
 background-color: #f8f8f8;
 padding-bottom: 10px;
 border-left: 3px solid #6CE26C;
}

.dp-highlighter.nogutter .tools
{
 border-left: 0;
}

.dp-highlighter.collapsed .tools
{
 border-bottom: 0;
}

.dp-highlighter .tools a
{
 font-size: 9px;
 color: #a0a0a0;
 background-color: inherit;
 text-decoration: none;
 margin-right: 10px;
}

.dp-highlighter .tools a:hover
{
 color: red;
 background-color: inherit;
 text-decoration: underline;
}

/* About dialog styles */

.dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; }
.dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; }
.dp-about td { padding: 10px; vertical-align: top; }
.dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; }
.dp-about .title { color: red; background-color: inherit; font-weight: bold; }
.dp-about .para { margin: 0 0 4px 0; }
.dp-about .footer { background-color: #ECEADB; color: #333; border-top: 1px solid #fff; text-align: right; }
.dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; }

/* Language specific styles */

.dp-highlighter .comment, .dp-highlighter .comments { color: #008200; background-color: inherit; }
.dp-highlighter .string { color: blue; background-color: inherit; }
.dp-highlighter .keyword { color: #069; font-weight: bold; background-color: inherit; }
.dp-highlighter .preprocessor { color: gray; background-color: inherit; } 

• Salin kode berikut lalu paste sebelum kode </head>.

• Terakhir, salin kode berikut lalu paste sebelum kode </body>.

<!-- Add-in Script for syntax highlighting -->

<script language='javascript'>

dp.SyntaxHighlighter.BloggerMode();

dp.SyntaxHighlighter.HighlightAll('code');

</script>

• Simpan perubahan kode tersebut. Sekarang, setiap akan posting kode, klik bagian html, lalu atur kodenya seperti berikut ini.

<pre name="code" class="cpp">

Kode Anda di sini

</pre>

Menonaktifkan klik kanan di blogger

Mencegah orang lain menjiplak hasil karya memang susah. Selama hasil karya kita publikasikan, meskipun diproteksi, tetap saja bisa dilakukan. Meskipun demikian, setidaknya dengan proteksi, orang lain tidak bisa langsung menyalin isi dari blog/website kita. Salah satu caranya adalah dengan mendisable (menonaktifkan) klik kanan. Bagi yang terbiasa copy-paste dengan klik kanan, tentu hal ini sedikit merepotkan.

Jika Anda ingin memasang fasilitas ini di blogger, bisa dicoba dengan cara berikut.

• Klik Design.

• Klik Add a Gadget.

• Klik + pada HTML/JavaScript.

• Salin kode berikut.

<script language=javascript>

<!-- http://www.spacegun.co.uk -->

var message = "function disabled";

function rtclickcheck(keyp){ if (navigator.appName == "Netscape" && keyp.which == 3){ alert(message); return false; }

if (navigator.appVersion.indexOf("MSIE") != -1 && event.button == 2) { alert(message); return false; } }

document.onmousedown = rtclickcheck;

</script>

• Paste di kotak HTML/JavaScript lalu klik Save.

• Coba buka blog lalu klik kanan. Akan ada pesan seperti gambar berikut.

Jika ada artikel menarik di blog orang lain, usahakanlah untuk tidak copy-paste, melainkan menulis kembali dengan gaya tulisan sendiri. Lama-kelamaan, Anda pasti mahir menulis. Be Creative! Jangan Cuma Copy-Paste.

Cara cepat mengubah blog menjadi versi mobile

Ingin memperluas akses blog? Sebenarnya dengan smartphone, tampilan blog bisa diakses dengan mudah, meskipun lumayan berat. Namun, supaya lebih ringan dan bisa dibuka di semua versi handphone yang bisa mengakses internet, ada cara mudah untuk mengubahnya.

• Coba buka situs ini. Masukkan url blog Anda, lalu klik Go.

• Masukkan username dan password.

• Ketik ID lalu klik Next. Kalau sudah ada yang menggunakan, cari nama yang lain.

• Salin kode JavaScript yang diberikan.

• Di bagian dashboard, klik Rancangan.

• Klik Tambah Gadget (lokasinya bebas).

• Klik tanda + pada HTML/JavaScript.

• Paste kode yang tadi diberikan lalu klik Simpan.

• Kembali ke situs yang tadi lalu klik Next.

• Klik Verification.

• Klik OK.

• Coba buka di tab baru.

Hasilnya seperti ini.

Mudah, bukan? Silakan dicoba.