Paling asik pas di saat ada waktu luang gini enaknya ngeBlog deh...hemmm, kira kira apa yah yang mau saya bahas kali ini.Nah...gimana kalo saya coba bahas cara membuat widget top artikel blogspot..?? tambah kata aduhai deh biar lebih asik.
Ok, kalo gitu kita langsung mulai saja yah....Widget top artikel blogspot.....!Sebenarnya ngga harus top artikel sih.Tapi umumnya artikel yang saya letakan di widget tersebut adalah artikel artikel populer atau artikel yang sering dilihat oleh para pengunjung dan beberapanya adalah artikel terbaru yang baru saja saya publish.
Seperti apakah widget tersebut....? Coba anda lihat pada sisi sidebar saya, ada sebuah widget yang saya beri nama Pujangga Blogs Head News.Konten Box yang menampilkan penggalan artikel, Tittle dan Thumbnail Images yang selalu berubah dengan effect fade.
Kode CSS :
Untuk penarapan widget top artikel pada blogspot anda, lagi - lagi kita memerlukan serangkain kode CSS yang akan kita letakan pada page template HTML blog.dan bagi anda yang tertarik dengan project latihan ini,silahkan ikuti step-step ini.
Letakan kode CSS ini pada page template HTML anda, tepatnya di atas tag </b:skin> :
#divTrigger a:link,#divTrigger a:visited{
text-decoration: none; /* hilangkan garis bawah pada link */
margin:4px 0px; /* memberi jarak antar link */
padding: 1px 4px; /* menjadikan link seperti kotak */
border: 1px solid #000;
background-color: #FFF;
color: #000;
}
/* link yang dilalui oleh mouse dan element dengan class='selected' akan mempunyai efek yang sama */
#divTrigger a:hover,#divTrigger a:active,.selected{
background-color: #00A;
color: #FFF;
}
#divContent{
margin-top:4px;
border:1px solid #999999;
border-bottom:none;
width: 290px;
height: 130px;
padding: 4px;
-moz-border-radius-topleft:7px;
-moz-border-radius-topright:7px;
background-color: #FFFBDF;
}
#divContent div{
/* semua div di dalam element dengan id='divContent' akan di sembunyikan sementara */
display:none; overflow: hidden; height:130px; text-align:justify; font-family:arial; font-size:13px;
}
.title-head{
font-size: 16px;
font-weight: bold;
color: #006;
text-decoration: none;
margin-bottom: 2px;
display:block;}
#divContent img {
height: 100px;
width: 100px;
padding-right:5px;
}
text-decoration: none; /* hilangkan garis bawah pada link */
margin:4px 0px; /* memberi jarak antar link */
padding: 1px 4px; /* menjadikan link seperti kotak */
border: 1px solid #000;
background-color: #FFF;
color: #000;
}
/* link yang dilalui oleh mouse dan element dengan class='selected' akan mempunyai efek yang sama */
#divTrigger a:hover,#divTrigger a:active,.selected{
background-color: #00A;
color: #FFF;
}
#divContent{
margin-top:4px;
border:1px solid #999999;
border-bottom:none;
width: 290px;
height: 130px;
padding: 4px;
-moz-border-radius-topleft:7px;
-moz-border-radius-topright:7px;
background-color: #FFFBDF;
}
#divContent div{
/* semua div di dalam element dengan id='divContent' akan di sembunyikan sementara */
display:none; overflow: hidden; height:130px; text-align:justify; font-family:arial; font-size:13px;
}
.title-head{
font-size: 16px;
font-weight: bold;
color: #006;
text-decoration: none;
margin-bottom: 2px;
display:block;}
#divContent img {
height: 100px;
width: 100px;
padding-right:5px;
}
Keterangan :
Ada beberapa value yang bisa anda rubah dari kode CSS diatas , yakni pada value yang sudah saya tandai dengan tulisan berwarna merah bold :
Pada Selector #divContent : adalah container ( wadah ) dimana nantinya semua content /artikel kita letakan didalamnya.Dan seperti yang anda lihat pada selector diatas mempunyai value width: 290px; dan height: 130px; . Silahkan anda rubah dan sesuaikan dengan lebar sidebar pada blog anda.
Pada Selector #divContent img : adalah selector yang akan kita gunakan sebagai properties images thumbnail pada widget top artikel.Selctor diatas mempunyai value height: 100px; dan width: 100px; silahkan sesuaikan dengan selera anda atau biarkan saja pada default value.
jQuery javascript :
Sekarang kita beralih ke bagian javascript dan plugin jQuery.javascript dan jQuery inilah yang nantinya akan menciptakan effect fade pada widget top artikel yang kita jadikan project kali ini.Untuk plugin jQuery....silahkan anda letakan pada bagian bawah dari tag <head> page template HTML blogspot anda:
<script language='javascript' src='http://pujangga.googlecode.com/files/headline.js'></script>
<script language='javascript' src='http://pujangga.googlecode.com/files/jquery-1.4.js'></script>
<script language='javascript' src='http://pujangga.googlecode.com/files/jquery-1.4.js'></script>
lalu...masukan perintah javascript dibawah ini , dan letakan pada bagian bawah dari tab </body>
<script type="text/javascript">
$(document).ready(function(){
// untuk permulaan, tampilkan content nomor 1 '#slideAwal'
bukaContent($('#slideAwal'),'div1');
});
</script>
$(document).ready(function(){
// untuk permulaan, tampilkan content nomor 1 '#slideAwal'
bukaContent($('#slideAwal'),'div1');
});
</script>
Sampai sini saya rasa sudah cukup, dan sekarang silahkan SAVE template blogspot anda.
Kode HTML :
Selanjutnya kita akan menambah halaman widget baru pada halaman website anda, halaman ini yang akan kita pakai untuk meletakan kode HTML nantinya.
Masuk ke Page element » add a gadget » HTML / JAVASCRIPT
Ok..waktunya kita meletakan kode HTML pada halaman yang telah kita sediakan diatas :
<div id="divContent">
<div id="div1">
<span class="title-head"><a href="URL ARTIKEL ">TITTLE ARTIKEL</a></span>
<img src="URL IMAGE" width="" height="" align="left" />
DESKRIPSI SINGKAT TENTANG ARTIKEL</div>
<div id="div2">
<span class="title-head"><a href="URL ARTIKEL ">TITTLE ARTIKEL </a></span>
<img src="URL IMAGE" width="" height="" align="left" />
DESKRIPSI SINGKAT TENTANG ARTIKEL</div>
<div id="div3">
<span class="title-head"><a href="URL ARTIKEL ">TITTLE ARTIKEL</a></span>
<img src="URL IMAGE" width="" height="" align="left" />
DESKRIPSI SINGKAT TENTANG ARTIKEL</div>
<div id="div4">
<span class="title-head"><a href="URL ARTIKEL ">TITTLE ARTIKEL </a></span>
<img src="URL IMAGE" width="" height="" align="left" />
DESKRIPSI SINGKAT TENTANG ARTIKEL</div>
</div>
<div id="divTrigger" align="left" style="width:288px; padding:5px; padding-right:5px; border:1px solid #999999; border-top:none; -moz-border-radius-bottomleft:7px;
-moz-border-radius-bottomright:7px;background-color: #FFFBDF;">
<a href="javascript:;" onclick="bukaContent(this,'div1')" id="slideAwal">1</a>
<a href="javascript:;" onclick="bukaContent(this,'div2')">2</a>
<a href="javascript:;" onclick="bukaContent(this,'div3')">3</a>
<a href="javascript:;" onclick="bukaContent(this,'div4')">4</a></div>
<div id="div1">
<span class="title-head"><a href="URL ARTIKEL ">TITTLE ARTIKEL</a></span>
<img src="URL IMAGE" width="" height="" align="left" />
DESKRIPSI SINGKAT TENTANG ARTIKEL</div>
<div id="div2">
<span class="title-head"><a href="URL ARTIKEL ">TITTLE ARTIKEL </a></span>
<img src="URL IMAGE" width="" height="" align="left" />
DESKRIPSI SINGKAT TENTANG ARTIKEL</div>
<div id="div3">
<span class="title-head"><a href="URL ARTIKEL ">TITTLE ARTIKEL</a></span>
<img src="URL IMAGE" width="" height="" align="left" />
DESKRIPSI SINGKAT TENTANG ARTIKEL</div>
<div id="div4">
<span class="title-head"><a href="URL ARTIKEL ">TITTLE ARTIKEL </a></span>
<img src="URL IMAGE" width="" height="" align="left" />
DESKRIPSI SINGKAT TENTANG ARTIKEL</div>
</div>
<div id="divTrigger" align="left" style="width:288px; padding:5px; padding-right:5px; border:1px solid #999999; border-top:none; -moz-border-radius-bottomleft:7px;
-moz-border-radius-bottomright:7px;background-color: #FFFBDF;">
<a href="javascript:;" onclick="bukaContent(this,'div1')" id="slideAwal">1</a>
<a href="javascript:;" onclick="bukaContent(this,'div2')">2</a>
<a href="javascript:;" onclick="bukaContent(this,'div3')">3</a>
<a href="javascript:;" onclick="bukaContent(this,'div4')">4</a></div>
Keterangan :
URL ARTIKEL : Isi dengan link posting blog anda.
TITTLE ARTIKEL : Isi dengan Judul artikel anda.
URL IMAGE : Isi dengan link gambar / image anda.
DESKRIPSI SINGKAT TENTANG ARTIKEL : Isi dengan deskripsi singkat artikel anda.
Selesai...silahkan SAVE dan lihat hasilnya.
Semoga bermanfaat......
0 komentar:
Posting Komentar