Latest Post
Showing posts with label widget. Show all posts
Showing posts with label widget. Show all posts

Cara Memasang Widget Hanya di Homepage

Pernahkah anda terfikir untuk menjadikan halaman awal (homepage) blogspot anda berbeda dengan halaman isi? Misalnya, widget-widget tertentu hanya muncul di homepage tapi tidak muncul dibagian dalam. (iklan atau link ke situs lain yang hanya membeli spot untuk halaman depan saja). Bisakah kita membuatnya ? Jawabnya bisa.

Artikel berikut akan menjelaskan cara bagaimana sebuah widget atau link hanya tampil di bagian depan (homepage) blogspot.

1. Seperti biasa, login ke dashboard blogspot.

2. Masuk ke Layout > Add gadget dan pilih tipe gadget yang anda perlukan, kemudian simpan.

3. Saatnya menambah sedikit kode sehingga widget yang baru anda tambahkan itu hanya tampil di bagian homepage saja. Masuk ke Edit HTML.

4. Normalnya, widget dalam tampilan template dimulai dengan kode berikut ini.

<b:widget id=


Sebagai contoh, widget untuk label terlihat sebagai berikut:

<b:widget id='Label1' locked='false' title='Title' type='Label'>

dan widget html terlihat sebagai berikut:

<b:widget id='HTML1' locked='false' title='' type='HTML'>


sedangkan daftar list akan tampil seperti berikut:

<b:widget id="LinkList2" locked="false" title="Title" type="LinkList">


3. Cari kode untuk widget yang akan anda ubah.
(Jika ingin tahu secara pasti apa widget id yang perlu anda ubah, cobalah lihat source code blog anda. In Firefox : View » Page Source sedangkan In IE : View » Source )

Tepat di bawah widget id, anda dapat melihat tag b:includable seperti berikut..

<b:includable id='main'>


Pada titik ini, sebagian besar tugas kita sudah selesai, kita hanya perlu menambahkan sedikit kode di bawah tag b:includable tersebut, kodenya adalah :

<b:if cond='data:blog.url == data:blog.homepageUrl'>


dan terakhir, kita harus menutup tag b:if . Cukup tambahkan kode berikut sebelum penutup tag b:includable.
Seperti ini:

</b:if>
</b:includable>


Nah, hasil akhir kode adalah seperti screenshoot di bawah ini:



Jangan lupa simpan hasil pekerjaan anda. Kini, widget dimaksud hanya akan tampil di halaman depan / homepage saja. Semoga bermanfaat.
 

Widget Recent Post dengan Thumbnail untuk Blogspot

Anda menggunakan widget bawaan dari blogger untuk menampilkan artikel terbaru (recent post) ? Aku sendiri kurang suka dengan tampilannya. Jika anda ingin tampilan yang lebih “eye-catching”, yakni menampilkan gambar kecil (thumbnail) di widget recent post, coba cara ini.

Artikel berikut akan menjelaskan bagaimana membuat widget Recent Post dengan disertai gambar kecil (thumbnail) untuk blogger blogspot. Jika mau, Anda dapat melihat sumber tulisan ini dari bloggertricks.com atau langsung saja lihat caranya disini.



1. Masuk ke dashboard blogspot

2. Tambahkan widget HTML/Javascript (Layout » Add a gadget » html/javascript)

3. Kopi-paste kode berikut :

Penjelasan:

(Edit angka-angkanya untuk disesuaikan dengan blog anda)

boxwidth – Lebar widget, tentunya isikan sesuai dengan lebar widget dari template yang anda gunakan.
cellspacing – Spasi antar sel (sebaiknya tidak perlu diubah)
borderColor – Warna border (gunakan warna background template anda sehingga terlihat menyatu)
thumbwidth & thumbheight – Lebar dan tinggi thumbnail (biarkan saja)
fntsize – Ukuran huruf untuk Judul
acolor – Warna tulisan judul
aBold - pilih saja mau ditebalkan atau tidak huruf judul (true or false)
numposts – Berapa banyak artikel yang ingin ditampilkan
home_page : http://www.bewegaleri.com/ (ubah sesuai dengan url blog anda)

Script ini dihost di server milik bloggertricks ( http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js ).
Namun, SANGAT dianjurkan untuk download script ini dan upload di hosting sendiri, dan ganti urlnya dengan url dimana anda menyimpan file js tersebut.

4. Terakhir, Simpan perubahan

Demikian cara membuat widget recent-post dengan tampilan thumbnail serta jumlah komentar yang ada. Semoga membantu.

Note : Pastikan anda memilih YES di Settings » Site Feed » Full » Allow Blog Feeds


 
 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Bewegaleri Blog - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger