Abi Bakar Blog Info

Cara Pasang Widget Di Header Theme Thesis

Posted: 27 Dec 2010 04:55 PM PST

Sip posting kedua diblog ini adalah mengenai tutorial theme Thesis pesanan teman, yakni tutorial memasang iklan banner ukuran 468 x 60 di area header Thesis atau disebelah kanan judul blog. Seperti area header di AbiBakarBlog.Com:

Banner Thesis AbiBakarBlog

Untuk meletakan iklan disitu, diperlukan sebuah Widget. Jadi perlu menambahkan Widget baru di area header Thesis kita.

Langkah yang diperlukan untuk menambah Widget, pertama membuka folder Custom File Editor di dashboard WP anda, karena di theme Thesis untuk memodifikasi tampilannya harus dari situ. Sebab theme ini sejatinya merupakan ‘framework’, yang sangat fleksibel untuk dimodifikasi menurut kebutuhan.

Dan Chris Pearson menyediakan folder itu agar semua modifikasi tidak dilakukan di framework – agar jika terjadi update versi baru, modifikasi anda tidak ‘ditiban – overwritten’ dengan versi Thesis baru. Jadi apapun modifikasi di Custom file editor, tidak akan mempengaruhi theme intinya.

Custom file editor terdiri dari 2 file; custom.css dan custom_functions.php. Untuk meletakan banner di header, masukan ini ke dalam custom.css lalu save:

/* widget di header */. .custom .sidebar ul.sidebar_list {position: relative;} .custom #header_widget_1 ul.sidebar_list li.widget {position: absolute; display: block; top:80px; float: left; left:647px; width:468px; }

Setelah itu masukan kode hook-nya ke Custom_functions.php lalu save;
/*Widget di Header*/ register_sidebars(1, array( 'name' => 'Header Widget', 'before_widget' => '<li class="widget %2$s" id="%1$s">', 'after_widget' => '</li>', 'before_title' => '<h3>', 'after_title' => '</h3>' ) ); function header_widget() { ?> <div id="header_widget_1" class="sidebar"> <ul class="sidebar_list"> <?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('Header Widget') ){ ?> <li class="widget"><h3><?php _e('Header Widget', 'thesis'); ?></h3>You can edit the content that appears here by visiting your Widgets panel and modifying the <em>current widgets</em> there.</li><?php } ?> </ul> </div> <?php } add_action('thesis_hook_header', 'header_widget', '1');

Setelah itu silahkan menuju Widget, maka kita akan temui, area baru untuk Widget yang berada di header atau Widget Header seperti gambar.

Header Widget

Kemudian untuk memasukan iklan, maka tempatkan Widget baru disitu.

Posisi Widget

Agar letak iklannya cocok dengan desain theme anda, maka ada 2 bagian perlu di edit, dari kode .css tadi. Yakni

/* widget di header */.
.custom .sidebar ul.sidebar_list {position: relative;}
.custom #header_widget_1 ul.sidebar_list li.widget {position: absolute; display: block; top:80px; float: left; left:647px; width:468px; }

Keterangan:

Jika angka di top di perkecil, maka posisi banner (widget) akan naik. Jika diperbesar akan turun.
Jika angka di left di perbesar, maka posisi banner akan kekanan, jika diperkecil akan kekiri (mendekati judul blog).

AbiBakarBlog.Info Is Back

Posted: 26 Dec 2010 10:06 PM PST

Wow sudah hampir sebulan lebih atau mungkin 2 bulan saya sama sekali tidak login ke blog ini, kaget juga ternyata sudah ada 125 komentar yang masuk dan belum di approve.

Maaf seribu maaf untuk semua yang sudah luangkan waktu berkomentar, karena memang saya jarang sekali membelai blog ini, jadi seribu maaf sekali lagi komentar anda tidak bisa saya respon dan terima kasih untuk komentarnya. Insya Allah komentar kedepannya akan saya balas semampunya.

125 Komentar

Ini pengumuman kedua, bahwa saya akan membahas masalah SEO, ngeblog dan juga online tips disini. Sebagai penerus blog Abibakarblog.com yang isinya sudah campur-aduk, yang rasanya sudah tidak pas lagi menjadi blog SEO, yang ada adalah blog campur sari:)).

Jadi AbiBakarBlog.Com akan saya alih-fungsikan menjadi blog berita, sedangkan blog ini akan membahas khusus tentang SEO, tips ngeblog dan tutorial lainnya, seperti yang sudah saya pernah umumkan dulu di Abibakarblog migrasif ke .Info.

Terima kasih

Abi :d

Super Cheat PB