utak-atik

Cara Menampilkan Judul Saja Pada Label

2011-01-06T11:00:00.000-08:00

Tampilan yang saya maksud pada judul di atas mungkin sering anda lihat di situs portal atau website. Cara menerapkannya di weblog berbasis blogspot sebenarnya sangat mudah.

Anda pernah melihat tampilan label yang hanya menampilkan judul-judul postingan saja seperti ini? Atau di sini? Salah satu kegunaannya ketika Pengunjung blog anda mencari artikel berdasarkan Label, mereka tidak terlalu lama menunggu buat mencari atikel yang mereka inginkan.Karena kita hanya menampilkan judul saja pada halaman Label. Loadingnya juga tidak terlalu lama.

Mari kita coba :
1. Login ke Blogger
2. Langsung menuju Tata Letak/Layout => Edit HTML
3. Centang tulisan "Expand Widget Template"
4. Tekan Ctrl+F dan cari code ini :

<b:include data='post' name='post'/>

5. Jika sudah ketemu, hapus dan ganti dengan code dibawah ini

<b:if cond='data:blog.homepageUrl!= data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

6. Klik Save dan lihat hasilnya pada halaman Label anda.

Selamat mencoba dan semoga berhasil, sobat.

Membuat Slideshow Headlines Ala DetikCom dan Kompas

2010-12-01T08:38:00.000-08:00

Membuat Slideshow Headline News Ala Okezone, DetikCom, Kompas dan lain-lainnya? Mudah saja. Sebagai contoh, bisa dilihat di slideshow blog ini atau di salah satu weblog saya "sastra_dio." Nah. Caranya sebagai berikut:

Langkah 1

1. Login ke Blogger

2. Pilih Tata Letak / Rancangan

3. Pilih Tab Edit HTML

4. Centang " Expand Template Widget"

5. Silakan Cari Kode ]]></b:skin> dan Taruh Kode di bawah ini di atas kode ]]></b:skin>

/* Image Slideshow */

#s3slider{margin-bottom:5px; width:100%; /* important to be same as image width */height:250px; /* important to be same as image height */position:relative; /* important */word-wrap:break-word; /* fix for long text breaking sidebar float in IE */overflow:hidden; /* fix for long non-text content breaking IE sidebar float */}

#s3sliderContent{width:100%; /* important to be same as image width or wider */position:absolute; /* important */top:0; /* important */margin:0px; padding-left:0px; /* important */}

.s3sliderImage{float:left; /* important */position:relative; /* important */display:none; /* important */}

.s3sliderImage span{position:absolute; /* important */left:0; font:normal 11px 'Arial',Helvetica,sans-serif; padding:10px; width:100%; text-align:center; padding-left:0px; background-color:#000; filter:alpha(opacity=70); /* here you can set the opacity of box with text */-moz-opacity:0.7; /* here you can set the opacity of box with text */-khtml-opacity:0.7; /* here you can set the opacity of box with text */opacity:0.7; /* here you can set the opacity of box with text */color:#fff; display:none; /* important */top:0; /*if you puttop:0; ->the box with text will be shown at the top of the i

6. Kemudian coba cari kode </head> dan Taruh Kode berikut di atas kode </head>

//<![CDATA[

//]]>

</script>

//<![CDATA[

//]]>

</script>

$(document).ready(function() {

$('#s3slider').s3Slider({

timeOut: 3000

});

</script>

Langkah 2
Widget ini dapat tampil setelah melakukan lagi yang berikut :

1. Login ke Blogger
2. Pilih Tata Letak Atau Rancangan
3. Pilih Tab Edit HTML
4. Jangan Lupa Untuk buat Backupa data anda
5. Centang expand template widget
6. Cari Kode ini <div id='main-wrapper'>
Tekan Ctrl+F untuk mempermudah pencarian.
7. Copy kode di bawah ini dan Paste tepat di bawah kode <div id='main-wrapper'>

<b:if cond='data:blog.pageType != "item"'>

<img height='245'

src='URL gambar'

width='450'/>