Iklan Nuffnang

..................................................................................................

..................................................................................................

Monday 30 January 2012

Cara Pasang Recent Posts Floating Bar

SEMOGA APA YANG ADMIN KONGSIKAN BERMANFAAT UNTUK KORANG SEMUA. JIKA ADA KELUAR IKLAN SEMASA MENDOWNLOAD..HARAP KORANG BIAR LOADING SEHINGGA HABIS. BAGI LAH SEDIKIT PENGHARGAAN UNTUK DUNIAKONGSI. TERIMA KASIH JIKA MEMAHAMI (^_^) p/s : SILA LAPORKAN DI RUANGAN KOMEN JIKA TERDAPAT LINK YANG ROSAK

Salam semua. hari ini admin nak berkongsi tutorial dengan korang. kali ini admin akan kongsikan Cara Pasang Recent Posts Floating Bar. seperti yang korang tengok pada gambar diatas dan pada blog duniakongsi, "floating bar" ini akan memaparkan tajuk "recent posts" di blog korang.

Berminat nak buat?. korang ikut seperti yang akan admin ajar ni satu persatu.

1. Login dashboard > design > edit html > tick "Expand Widget Templates". untuk keselamatan, korang "download full template" dulu


2. Tekan "Ctrl+F" cari kod </head> . lepastu korang copy coding dibawah dan paste sebelum coding </head> tadi

<style type='text/css'>

#bd {
float:bottom;
font-family:Arial, Helvetica, sans-serif;
line-height:1.5;
margin-top:5px;
font-size:12px
}

.text {
color:#F30F26;
margin-left:8px
}

div#news-1 .gk_news_highlighter {
font-family:Arial, Arial;
font-size:13px;
color:#F30F26
}

div#news-1 {
width:1000px;
height:24px;
margin-left: -10px;
display:scroll;
position:fixed;
bottom:1px;
border-top:1px solid #F30F26;
border-bottom:1px solid #F30F26;
background:#000 repeat-x 0 -100px;
clear:both;
overflow:hidden
}

div#news-1 .gk_news_highlighter_wrapper {
float:left;
width:820px;
height:24px;
line-height:24px;
overflow:hidden;
position:relative
}

div#news-1 .gk_news_highlighter_item {
width:auto;
height:24px;
padding-left:20px;
display:none;
position:absolute
}

div#news-1 .nowrap {
white-space:nowrap
}

div#news-1 .gk_news_highlighter_title {
padding-left:5px
}

div#news-1 .gk_news_highlighter_desc {
padding-right:5px
}

div#news-1 .gk_news_highlighter_interface {
float:left;
width:120px;
height:24px;
text-align:right;
line-height:24px;
z-index:1000
}

div#news-1 .gk_news_highlighter_interface .text {
float:left;
display:block;
width:auto;
padding-left:5px;
font-weight:700
}

div#news-1 .gk_news_highlighter_interface div {
width:30px;
float:right
}

div#news-1 .gk_news_highlighter_interface a.prev,div#news-1 .gk_news_highlighter_interface a.next {
cursor:pointer;
width:13px;
height:24px;
display:block;
background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRmm4mOfJNxXSVdYvtqxMU_1g9oHCiYy4-Tr_VKrqyOUery4z0kSZkudjGVXCuQqlxK8iHTnHtw7aMS8Fop940Lj1q_DcArJKW2HYn7YzMrfD8yFUEFE3614Q-0bXgzLdn4GfbgCSfd2o/s1600/play.png&#39;) no-repeat 0 50%;
float:left
}

div#news-1 .gk_news_highlighter_interface a:hover.prev {
background-position:-13px 50%
}

div#news-1 a,div#news-1 a:link,div#news-1 a:visited,div#news-1 a:active,div#news-1 a:focus {
color:#F30F26
}

div#news-1 .gk_news_highlighter_interface a.next {
float:right;
background-position:-26px 50%
}

div#news-1 .gk_news_highlighter_interface a:hover.next {
background-position:-39px 50%
}

</style>


3. Kemudian tekan "Ctrl+F" cari kod <div id='content-wrapper'> atau kod </footer> . korang cuba lah kod mana yang sesuai dengan template korang. kemudian paste coding ini

<div id='bd'>
<div class='gk_news_highlighter' id='news-1'>
<div class='gk_news_highlighter_interface'>
<span class='text'>HOT NEWS</span>
<div>
<a class='prev' href='#'/>
<a class='next' href='#'/>
</div>
</div>
<div class='gk_news_highlighter_wrapper'>
<script language='JavaScript'>
imgr = new Array();
showRandomImg = false;
aBold = true;
text = &quot;no&quot;;
showPostDate = false;
summaryPost = 200;
summaryFontsize = 12;
summaryColor = &quot;#000&quot;;
icon = &quot; &#187; &quot;;
label = &quot;&quot;;
numposts = 100;
home_page = &quot;http://www.duniakongsi.net/&quot;;
</script>
<script src='http://yourjavascript.com/11843262101/post-hotnews.js' type='text/javascript'/>
</div>
</div>
</div>
<script src='http://yourjavascript.com/01042612211/mootools.js' type='text/javascript'/>
<script src='http://javscript-code.googlecode.com/files/engine_compress.js' type='text/javascript'/>
<script type='text/javascript'>
try {$Gavick;}catch(e){$Gavick = {};};
$Gavick[&quot;gk_news_highlighternews-1&quot;] = {
&quot;animationType&quot; : 3,
&quot;animationSpeed&quot; : 200,
&quot;animationInterval&quot; : 2000,
&quot;animationFun&quot; : Fx.Transitions.linear,
&quot;mouseover&quot; : 1};
</script>

4. Untuk kod <div id='content-wrapper'> , paste coding diatas betul2 dibawah atau selepas kod <div id='content-wrapper'>

5. Untuk kod </footer>, paste coding diatas betul2 diatas atau sebelum kod </footer>


6. Ejas width:1000px; dan height:24px; mengikut kesesuaian. kemudian tukar juga www.duniakongsi.net kepada nama blog korang. ubah numposts = 100; untuk seberapa banyak post yang korang nak paparkan


7. Bila dah siap semua, SAVE TEMPLATE dan lihat hasilnya. semoga berjaya yer. ikhlas admin kongsikan somoga admin dapat membantu mencantikkan lagi blog korang(^_^)

Suka dengan apa yang admin kongsikan?. sila klik pada button dibawah sebagai tanda sumbangan ikhlas anda untuk duniakongsi.net. hanya sedikit iklan untuk menampung duniakongsi. sumbangan "klik" dari anda sangat admin hargai dengan ucapan terima kasih


6 comments:

Nadia said...[Reply to comment]

tutorial...:)

Kongsi Apa2 Aje said...[Reply to comment]

@Miss Nadya huhu..berminat cuba lah buat (^_^)

Areyoudys said...[Reply to comment]

as salam..
erk..tak jadi..hm..
sebab pakcik punya custom made.. takpe la. nanti pakcik godek2 nak edit attribute yang mana

>__<


terima kasih ;)


Jemput ziarah membaca entri pakcik.. ;)
syukran..


Pergi Mati..


Cara meringankan solat dalam Islam


Under Guise Of Friendship

mDOTsyafiq said...[Reply to comment]

yeah , menjadi . btw thanks KONGSI <3

Kongsi Apa2 Aje said...[Reply to comment]

@Подтверждаю (fadzli) yeke..takpe lah..buat slow2..6t jadi lah tu. insyaallah..admin singgah balik (^_^)

Kongsi Apa2 Aje said...[Reply to comment]

@ShafyqOnlyy sama2..bagus lah klu dah jadi :)

Iklan Nuffnang

Share This With Your Friends

 
NAK YANG LEBIH HEBAT?. TENGOK NI..