Panduan Menambahkan Widget Tumblr ke Sidebar Blog

Berbagai situs menyediakan widget yang dapat dipasang di blog Anda, membuka banyak opsi kustomisasi. Jika tema Tumblr Anda memiliki sidebar, Anda dapat menambahkan aplikasi dengan menempelkan satu baris kode HTML ke tag sidebar pada tema Anda. Situs penyedia widget biasanya sudah menyediakan baris kode tersebut, sehingga Anda tidak perlu menguasai pemrograman.

Kunjungi situs seperti Widgetbox, ShareThis atau Tumblring untuk mencari widget yang ingin Anda tambahkan ke halaman Tumblr Anda (link tersedia di Sumber). Proses pembuatan kode HTML berbeda-beda, namun setiap situs menyediakan petunjuk tentang cara menyesuaikan widget, menghasilkan kode, dan menempelkannya ke halaman Tumblr Anda. Jenis widget yang tersedia meliputi tombol bookmark sosial, pemutar musik, mesin pencari, dan banyak lagi.

Pilih widget dan, bila diminta, sesuaikan opsi seperti tata letak, warna, atau font. Beberapa widget memerlukan pengaturan tambahan. Contohnya, jika Anda menyematkan pemutar musik, Anda mungkin perlu membuat daftar putar terlebih dahulu sebelum kode dapat dibuat. Setelah selesai, klik “Generate HTML” atau tombol serupa, lalu salin kode yang muncul di kotak teks.

Buka Notepad dan tempel kode tersebut ke dokumen teks baru. Simpan berkas dan beri nama yang mudah dikenali, misalnya nama widget.

Masuk ke dasbor Tumblr, klik ikon “Gear” dan pilih blog Anda di sidebar. Di bagian Theme, klik “Customize”, lalu pilih “Edit HTML”. Kode HTML blog Anda akan terbuka di editor teks bawaan.

Salin kode HTML dari editor Tumblr ke dokumen Notepad baru. Beri nama berkas tersebut, misalnya “Tumblr HTML Original”, sehingga Anda dapat dengan cepat menemukannya jika ingin kembali ke versi semula.

Kembali ke editor HTML Tumblr dan tekan “Ctrl‑F” untuk menampilkan baris “Find and Replace”. Gunakan ini untuk mencari tag sidebar dalam kode. Karena format kode berbeda per tema, cari kata “sidebar” (tanpa kutip). Contohnya, pencarian “sidebar” dapat menemukan potongan kode seperti <div id="sidebar">, yang menandai awal tag sidebar. Tag tersebut berakhir dengan </div>.

Tempel kode widget Anda di dalam tag sidebar, tetapi tidak di dalam tanda kurung sudut yang menandai kata kunci tag. Setelah menambahkan kode, tag sidebar Anda akan terlihat seperti contoh berikut:

<div id="sidebar"> Kode HTML widget Anda di sini </div>

Kode yang dihasilkan bisa panjang dan rumit, namun Anda hanya perlu menempelkannya di dalam tag sidebar. Spasi putih dan tab tidak penting karena editor HTML Tumblr akan memformat kode secara otomatis.

Tekan “Update Preview” untuk melihat perubahan. Jika widget tampil sesuai keinginan, klik “Save” dan tutup editor HTML. Jika ingin mengubah aspek widget, ganti kode yang dimodifikasi dengan kode asli yang Anda simpan di Langkah 5. Kembali ke halaman pembuatan widget, pilih opsi yang Anda inginkan, buat kode baru, dan ulangi proses penempelan.

Tips

Jika Anda menambahkan beberapa widget di sidebar, tempelkan mereka sesuai urutan yang Anda inginkan muncul di sidebar.