Membuat text widget wordpress versi blogger atau blogspot, itulah yang saya lakukan kemarin untuk memodifikasi template super seo punya kang Ismet yang saya gunakan di blog ini. Berhubung di sidebar masih ada ruang kosong untuk widget, saya coba mencari kira-kira tambahan widget apa yang cocok untuk template ini. Terinspirasi dari text widget yang ada blog kang Herman Yudiono yaitu blogodolar.com saya pun ingin memasang widget serupa di blog ini. Tapi apa bisa, blog kang Herman kan menggunakan wordpress sedangkan saya pake blogspot?.

Pepatah mengatakan "Dimana ada kemauan disitu ada jalan". Coba browsing di google siapa tau sudah ada yang share membuat text widget serupa untuk blogger, ternyata oh ternyata hasil pencarian hanya mengarahkan pada text widget wordpress yang mengharuskan menggunakan plugin di self hosting wordpress.  Berhubung saya hanya menggunakan blog gratisan blogger ya apa boleh buat satu-satunya cara adalah membuat sendiri text widget untuk blogger.

Dengan sedikit jurus html dan css sayapun memaksakan diri membuat text widget serupa. Agar tampilan text widget sama seperti di blogodolar.com maka saya harus lakukan adaah membongkar code html dan css yang ada di blog tersebut. Google Chrome memudahkan saya dalam proses bongkar kode di blognya kang Herman.

Setelah sekitar 10 menit berlalu mengbongkar dan membaca kode yang ada di blogodolar.com, akhirnya saya menemukan celah kode untuk text widget agar bisa dipasang di blogger alias blogspot. Daripada saya sendirian yang pake text widget ini di blogger, lebih baik saya share untuk rekan-rekan blogger lainnya 'itu juga kalo ada yang mau pake' ha ha. Mari kita mulai :

• Log-in ke Blogger
• Pilih layout > Edit HTML
• Untuk berjaga-jaga silahkan backup terlebih dahulu blog anda.
• Letakan kode css dibawah ini diatas code ]]></b:skin>

/* Text Widget  */

#textwidget {display: block;}

#sidebarwrap .textwidget ul{list-style-type: none;margin: 0;padding: 0;}

#sidebarwrap .textwidget ul li{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjonUan66wXWhNby-_m2de-oXz5fBKoVsVUBOB7Z8TfxFxdYaqkOZdjVMx_dl-VMlBs4g0uE0OAQjgQpmSOZhNLx1LRJEqynQcasnRw673cMKrAdve_8dODG75SHYkygCCriOqxmlLabQ/s1600/sidebar+list.png) no-repeat top left;border-bottom: 1px dotted #ddd;margin: 0 0 5px;padding: 0 0 5px 16px;word-wrap: break-word;}

#sidebarwrap .textwidget ul li a:hover{color: #0072A4;text-decoration: underline;}

• Simpan template anda dan tutup editor html.
• Sekarang masuk ke Layout > Page Element > Pilih add a gadget pada sidebar.
• Kemudian pilih HTML/Javascript
• Copy dan paste kode dibawah ini di html/javascript form

<div class="textwidget"><div style="padding-top: 5px; background-color: #f5f5f5;">

<ul>

<li><a href="http://ecotutorials.blogspot.com/2013/06/cara-menampilkan-iklan-adsense-diatas.html">Google Adsense diatas Header</a></li>

<li><a href="http://ecotutorials.blogspot.com/2013/06/edit-seo-friendly-blogger-template.html">Edit Super SEO Template</a></li>

<li><a href="http://ecotutorials.blogspot.com/">Blogger Tutorials</a></li>

 </ul>

</div></div>

Catatn: Ganti text berwarna hijau dengan url postingan dan text berwarna biru untuk text yang akan tampil saat blog halaman tampil.

• Save widget.