Widget top artikel blogspot aduhai ||Blogger Tips||

Pujangga Blogs

26 January 2011

Widget top artikel blogspot aduhai ||Blogger Tips||

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


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

9 comments:

Anonymous said...

good 36

sonigunz on May 29, 2011 at 3:35 PM said...

mantap nih keqnya bro..ijin copas dulu yak.. :25
maen2 k blog aku jg ya bro technoentrick.blogspot.com
thankss..

Pujangga on May 29, 2011 at 5:51 PM said...

@sonigunz : sip mas.... silahkan, :36

Hanif on June 6, 2011 at 7:38 AM said...

Mas kok Cuma Bisa 4 konten yah, padahal saya pengen jadi 9 konten. Dah diutak atik semua tetap gak bisa2... Kontennya dah ditambah jadi 9, terus angkanyapun dah diganti jadi 1-9. Yang kode HTMLpun udah dirubah sampai ke kontent 9, kok gak mau yah mas... Tolong dibantu mas Pujangga.. Makaci

Pujangga on June 6, 2011 at 1:40 PM said...

@Hanif :
Setiap penambahan content, tag ID nya pun harus di tambah. contoh untuk menambahkan konten :

<div id="div5"> konten </div>

lalu pada tag divTrigger, tambahkan pula seperti ini.

<a href="javascript:;" onclick="bukaContent(this,'div5')">5</a>

Hanif on June 6, 2011 at 2:54 PM said...

Terima Kasih mas udah ditanggapi. Iya, tadinya saya udah coba kayak geto mas. Tapi tetep gak bisa.. saya cuba lagi deh.. Ntar balik kesini lagi... Seneng berkunjung kemari. Ohw ya mas, background template nya saya pakai boleh mas? td saya ngeditnya maen instan aja, jd tak coba punya mas, eh ternyata bagus juga. Luar biasa.

Hanif on June 6, 2011 at 3:34 PM said...

Alhamdulillah, Sudah Bisa Mas... Terima Kasih ^_^

Pujangga on June 6, 2011 at 3:37 PM said...

@Hanif :
Amiin.. sukses yah :36

admin on July 15, 2012 at 6:15 PM said...

terima kasih atas infonya
salam sukses
http://gunung-air.com


Post a Comment

:11
smiley
:12
smiley
:13 smiley :14
smiley
:15
smiley
:16
smiley
:17
smiley
:18
smiley
:19
smiley
:20
smiley
:21
smiley
:22 smiley :23 smiley :24
smiley
:25
smiley
:26
smiley
:27
smiley
:28
smiley
:29
smiley
:30
smiley
:31
smiley
:32
smiley
:33 smiley :34
smiley
:35
smiley
:36
smiley
:34
smiley
:38
smiley
:39
smiley
:40
input code is in the right smile icon image

Silahkan tinggalkan komentar anda dan harap tidak melakukan Spam..!!

Pujangga Blogs

administratorSeandainya segala sesuatu yang telah saya berikan ini bermanfaat bagi rekan-rekan semua.Sungguh saya ucapkan banyak Doa dan terimakasih kepada Mu Allah.SWT yang telah memberikan nikmat Berbagi sesama manusia dengan niat kebaikan dan kemajuan Negeriku ini..

the existence of this blog aims to broaden the information about web design by studying the parts of the structure of the html code for the beginner. Here also you can get the latest info about the entertainment media, affiliate programs etc.

Recent post


Download Free Movie


Pujangga Blogs Head News

Mengubah ILM ads google Untuk mengganti tampilan adsense google yang menampilkan Iklan Layanan Masyarakat tersebut dengan adsense lokal. Anda harus mengupload script adsense lokal dengan extensi html kelayanan webhosting anda.
Recent comment dengan efek overlay menu Following cursorBagi anda yang mempunyai keterbatasan ruang untuk meletakan widget Recent Comments, Saya akan mencoba membantu anda untuk membuat "Widget Recent comments" dengan efek overlay.
Membuat Guestbook Overlay fading headerEfek yang akan saya bahas kali ini adalah membuat tampilan Guestbook dan status twitter melayang dan berada ditengah - tengah halaman blog. Kita akan menyediakan menu guestbook pada sisi kiri halaman.
Membuat Headline Post widget tooltipsHeadline akan menggulung ke atas dengan sentuhan fade out ,seakan konten tersebut hilang dengan perlahan dan konten yang berada di bawahnya akan naik ke atas mengganti konten sebelumnya.
Membuat Number Page Navigation jQueryUmumnya Navigasi halaman dengan angka ini sering kita jumpai pada blog berplatform Wordpress. Namun bagi anda yang menggunakan platform Blogspot tak perlu berkecil hati, karena blogspot pun bisa mengadopsi tampilan NEXT dan PREV dengan widget Page Navigation Number.
Kode adsense didalam post menu navigasiUntuk meletakan Adsense didalam postingan, anda harus meletakan kode Script ads tersebut langsung ke template HTML blogspot. Sebagai langkah awal, silahkan anda login ke blogger.com » Dasboard »Design » Edit HTML » Beri tanda ceklist pada kolom .
1 2 3 4 5 6

Enter your email address:




review www.pujangga-adhitya.blogspot.com on alexa.com

free counters
 

Followers

Live Blog Stats

Recent Comment