Sign by Danasoft - For Backgrounds and Layouts

MENU

HOME | KEMENAG | DISDIK | NISN | SERTIFIKASI | INPASSING | OPERATOR NPSN | DOWNLOAD | SMS GRATIS | TIPS DUNIA ANAK |

Cara Buat Widget Top Artikel cantik

Label: , , Diposting oleh Madrasah Ibtidaiyah DARUSSALAM


Cara Membat widget yang cantik, trutama yang shilid begini ni. yang kelihatan bagus tuk di pandang
untuk langkah-langkah pembuatanya ikuti tips blog cantik di bawah ini :


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;
}


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>


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>


Sampai sini saya rasa sudah cukup, dan sekarang silahkan SAVE template blogspot anda.
blogspot template

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
html page blogspot

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>


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......tepuk tangan   ok silahkan  di tes gannn