Menampilkan tombol sharing di artikel blog

Makin ke sini, kita diberi kemudahan menggunakan blogger. Kalau sebelumnya cukup repot menyisipkan kode html/javascript untuk menambah fungsionalitas, kini sedikit demi sedikit blogger sudah menyediakannya. Misalnya, memenggal artikel atau tombol sharing. Kali ini saya akan mencoba memasang tombol sharing pada setiap artikel.

• Masuk ke halaman Design.

• Klik Edit pada bagian Posting Blog.

• Klik Show Share Buttons lalu klik Save.

Hasilnya seperti ini.

Memasang gadget donasi di blog

Butuh dana untuk pengembangan blog? Mungkin ada baiknya Anda menampilkan widget donasi. Salah satunya dari Paypal. Tentu saja, blog yang sekarang sudah harus menarik dan banyak pengunjungnya. Kalau tidak menarik dan pengunjungnya sedikit, mungkin tidak akan dimintasi donatur.

• Cara membuatnya sebagai berikut. Buka https://giving.paypallabs.com/authenticate/review lalu login dengan akun Paypal Anda.
• Klik Create new widget.

• Atur widget sesuai kebutuhan.

• Klik Post Widget pada Step 2. Setelah kodenya muncul, salin ke gadget blog Anda.

Setelah dipasang, di blog Anda akan tampil seperti ini.

Cara cepat membuat daftar isi di blogger

Sebenarnya, banyak cara untuk membuat daftar isi di blogger. Banyak juga yang sudah menulis tatacaranya. Kalau saya, seperti biasa, memilih cara yang instan dan cepat saja. Cukup memasukkan url blog dan tunggu proses sampai selesai. Selanjutnya, tinggal pasang di blog. Bagaimana caranya?

• Buka link ini lalu masukkan url blog Anda. Lakukan pengaturan seperlunya. Klik Start.

• Tunggu proses sampai selesai.

• Tinggal dipilih formatnya mau yang mana. Jika ingin ditampilkan berupa link, klik view pada Download HTML sitemap.

• Jika Anda tidak memiliki tempat penyimpanan di internet, bisa menggunakan url yang diberikan di address bar untuk dipasang di blog.

Jika punya, download format HTML lalu upload ke tempat penyimpanan seperti pada blog ini saya menyimpan di www.sudarmaster.com.

Membuat top menu di blogger

Kebetulan template yang saya gunakan sudah memiliki top menu. Sebenarnya, bisa saja kita membuat top menu pada blog yang belum memilikinya.

Sebelum Anda mengikuti langkah-langkah di bawah ini, sebaiknya salin dulu semua kode ke notepad untuk menyesuaikan dengan template Anda, baik ukuran, warna, dan sebagainya. Kalau sudah, silakan ikuti langkah di bawah ini.

• Salin kode berikut lalu paste di atas ]]></b:skin>.

/* navbar

================== */

#bg_nav {

background: #0e3300;

width: 770px;

height: 29px;

font-size: 11px;

font-family: Arial, Tahoma, Verdana;

color: #caf99b;

font-weight: bold;

margin: 0px auto 0px;

padding: 0px;

border-top: 1px solid #0e3300;

border-bottom: 1px solid #0e3300;

overflow: hidden;

}

#bg_nav a, #bg_nav a:visited {

color: #FFFFFF;

font-size: 11px;

text-decoration: none;

text-transform: uppercase;

padding: 0px 0px 0px 3px;

}

#bg_nav a:hover {

color: #FFFFFF;

text-decoration: underline;

padding: 0px 0px 0px 3px;

}

#navleft {

width: 440px;

float: left;

margin: 0px;

padding: 0px;

}

#navright {

width: 200px;

font-size: 11px;

float: right;

margin: 0px;

padding: 6px 5px 0px 0px;

}

#navright a img {

border: none;

margin: 0px;

padding: 0px;

}

#nav {

margin: 0px;

padding: 0px;

list-style: none;

}

#nav ul {

margin: 0px;

padding: 0px;

list-style: none;

}

#nav a, #nav a:visited {

background: #0e3300;

color: #FFFFFF;

display: block;

font-weight: bold;

margin: 0px;

padding: 8px 15px 8px 15px;

border-left: 1px solid #000000

}

#nav a:hover {

background: #729e51;

color: #FFFFFF;

margin: 0px;

padding: 8px 15px 8px 15px;

text-decoration: none;

}

#nav li {

float: left;

margin: 0px;

padding: 0px;

}

#nav li li {

float: left;

margin: 0px;

padding: 0px;

width: 150px;

}

#nav li li a, #nav li li a:link, #nav li li a:visited {

background: #729e51;

width: 160px;

float: none;

margin: 0px;

padding: 7px 30px 7px 10px;

border-bottom: 1px solid #000000;

border-left: 1px solid #000000;

border-right: 1px solid #000000;

}

#nav li li a:hover, #nav li li a:active {

background: #0e3300;

padding: 7px 30px 7px 10px;

}

#nav li ul {

position: absolute;

width: 10em;

left: -999em;

}

#nav li:hover ul {

left: auto;

display: block;

}

#nav li:hover ul, #nav li.sfhover ul {

left: auto;

}

• Salin kode di bawah ini lalu paste di bawah widget id='Header1'. Setiap template bisa berbeda. Jika tidak ditemukan, cari yang mirip secara manual.

<div id='bg_nav'>

<div id='navleft'>
<div id='nav'>
<ul>
<li><a href='http://www.sudarma.info/'>home</a></li>
<li><a href='http://facebook.com/sudarma.sopian'>My Facebook</a></li>
<li><a href='http://templates.sudarmaster.com/'>Free Template</a></li>
<li><a href='http://blogkuring.com/'>Blogkuring</a></li>
</ul>
</div>
</div>

<div id='navright'>

<form action='http://www.sudarma.info/search' id='searchform' method='get' name='searchform'>
<input id='s' name='q' type='text' value=''/> <input id='searchsubmit' type='submit' value='Go'/> </form>

    </div>

</div><!-- akhir bg_nav -->

• Klik SAVE TEMPLATE.

Template blogger polos

Jika Anda sangat mengandalkan tulisan, mungkin tidak ingin terlalu ramai diisi gadget pada tampilan blognya. Pengunjung akan langsung fokus ke tulisan yang Anda publikasikan. Kalau pun ingin menambahkan gadget, bisa ditempatkan di bawah template.

Saya mencoba memodifikasi template blogger yang sangat sederhana. Tidak ada gadget di sisi template, melainkan di bawah. Selain itu, artikel otomatis dirangkum (readmore otomatis), sehingga tidak perlu repot mengaturnya bila artikel yang dipublikasikan cukup panjang.

Jika diperlukan, Anda juga bisa mengubah id Twitter di halaman Layout template, serta banner iklan. Jika tidak diperlukan, bisa Anda buang.

Jika tertarik menggunakannya, silakan download di sini. Sebelum menggunakannya, silakan lihat contoh penggunaannya di blog ini.