Text Widget for bloger

Text Widget Wordpress Versi Blogger

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 ]]>

/* 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/AVvXsEiyL9Ev_s4z96nNcQJKQuNvaBlvUD04Bqfslw-4ev3sgAyRHZIAcozcVPTevy8uCVmduc_RzgQ8fkpomMcrHCZlYdBb6szyh9gvbvvT-VI3ZNva7m0o1U4WygKG5VAwHq2-6XbuWZN4CQ/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

http://ecotutorials.blogspot.com/2013/06/cara-menampilkan-iklan-adsense-diatas.html

">Google Adsense diatas Header

http://ecotutorials.blogspot.com/2013/06/edit-seo-friendly-blogger-template.html

">Edit Super SEO Template

http://ecotutorials.blogspot.com/

">Blogger Tutorials

 

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

• Save widget.

Dan sekarang coba lihat blog anda, di sidebar sudah tampil text widget seperti di blogodolar.com. Semoga kang Herman Yudiono tidak marah karena text widgetnya saya bajak. Demikian tutorial  cara membuat text widget wordpress versi blogger ala blogodolar yang bisa saya berikan hari ini.

Dan Sekarang Saya Akan Menjelaskan cara-cara Project Blogger Template blogodolar.com

Blogodolar.com merupakan salah satu blog populer di Indonesia. Adalah kang Herman Yudiono si pemiilik blogodolar, dimana dia selalu menyajikan tulisan-tulisan seputar tips blogging dan cara menghasilkan uang lewat blog yang pastinya bermanfaat bagi pembaca. Jika anda ingin menggeluti bagaimana meraup dolar dari proses ngeblog, saya pikir blogodar.com lah blog yang cocok untuk  tempat anda belajar. Bukan hanya tulisan-tulisan kang Herman yang berkulitas tapi juga tampilan blog yang simpel membuat pengunjung blog betah. 

Dari tampilan blog yang simpel tersebut saya memiliki ide untuk membuat template blogodolar.com versi blogger. Perlu diketahui bahwa blogodolar.com menggunakan platform wordpress self hosting, dan apa mungkin template wordpress yang digunakan bisa dibuat versi blogger/ blogspot?. Hmm... tak ada salahnya mencoba bukan. Sebenarnya sudah ada 1 bagian dari template blogodolar yang berhasil saya buat versi bloggernya yaitu text widget yang digunakan kang Herman untuk menampilkan progress duel blog niche dan postingan terpopuler yang ada di sidebar. 

Saya sebut ini sebagai project  template blogodolar.com. Di project ini saya akan mencoba membuat tampilan blogodolar.com versi blogger semirip mungkin dengan yang aslinya. Saya membuat project ini bukan tanpa alasan, ini sebagai bahan motivasi saya  untuk belajar bagaimana mengedit template blogger dan mempelajari kode-kode html maupun css yang digunakan pada blog. Nampaknya saya harus meminta ijin terlebih dahulu pada kang Herman untuk melakukan hal ini dan mudah-mudahan kang Herman mengijinkan template wordpressnya saya buat versi blogger.