Pada postingan kali ini
Education for all akan posting artikel tentang
cara membuat Recent posts floating bar. Nah apa sebenarnya yang dimaksud dengan Recent posts floating bar, recent post floating bar adalah, dimana setiap posting baru yang sobat blogger mania buat akan muncul dibar sobat blogger mania seperti stiker, hal ini tentunya akan mempermudah tamu sobat blogger mania dalam melihat posting terbaru dari blog sobat blogger mania. Bila sobat blogger mania berminat untuk membuatnya silahkan ikuti langkah langkah berikut ini:
1. Silahkan login ke Blogger terlebih dahulu.
2. Kemudian masuk kehalaman Edit HTML..
3. Seterusnya tick "Expand Widget Templates dan cari kode
</head> .
4. Letakkan kode css berikut ini, tepat diatas kode
</head>
| paste kod css ini, di atas kode </head> |
<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:#98BF2F;
margin-left:8px
}
div#news-1 .gk_news_highlighter {
font-family:Verdana, Arial;
font-size:11px;
color:#666
}
div#news-1 {
width:960px;
height:24px;
margin-left: -10px;
display:scroll;
position:fixed;
bottom:1px;
border-top:1px solid #CCC;
border-bottom:1px solid #CCC;
background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheIQfnIe9BjaVdhdhGVR7zqqtzFLGsigaS39wu8vbHfEsh9ZEGiI6tBP0R1nMkxm7x5aGywlRuaiIbWcCJFZAHer5OKqwiaBzYEtgmBOoOhDoBZZXY87f5XqRSfnCR8kIZJsXCyVDYlwN5/s320/gradient.png) 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieFie0yxdbkHQeH7Edi2pOATyanlp7A5Mxih4CcaO7yZoaXKfWgxlvPSa9s9dFiIenfzhj0AeTldj1L4KvyXDFBnX-SHLgvxC-joICn9lXu5Mx9zzLt_3JB6WjGI3FuIbVDPkvz0kniho/s1600/play.png') 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:#FFF
}
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> |
5. Selanjutnya, dengan menggunakan keyboard, tekan "Ctrl+F" cari kode
<div id='content-wrapper'>
Bagi blog yang menggunakan template dari template designer, cari kod
</footer>
6. Copy dan paste kod HTML dan Javascript ini, dibawah atau selepas kod <div id='content-wrapper'>
Bagi blog yang menggunakan template dari template designer, paste kod HTML dan Javascript ini di atas atau sebelum
</footer>
| Copy paste kode ini, dibawah <div id='content-wrapper'> |
<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 = "no";
showPostDate = false;
summaryPost = 200;
summaryFontsize = 12;
summaryColor = "#000";
icon = " » ";
label = "";
numposts = 30;
home_page = " http://fajar7siblings.blogspot.com/";
</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["gk_news_highlighternews-1"] = {
"animationType" : 3,
"animationSpeed" : 200,
"animationInterval" : 2000,
"animationFun" : Fx.Transitions.linear,
"mouseover" : 1};
</script> |
7. Edit kod yang di bold warna merah dengan menggantikannya URL blog sobat blogger mania dan jumlah postingan terbaru yang akan ditampilkan
8. Seterusnya klik Preview. Jika posisi bar terlalu ke kiri atau ke kanan, silahkan edit nilai pada kode yang di bold dengan warna biru pada langkah 4.
width:960px; (Panjang bar)
margin-left: -10px; (Jika posisi bar terlalu ke kanan, edit nilai -10 menjadi 10 dan sebaliknya)
9 . terakhir dan paling utama save template,
Semoga bermanfaat...........
The Owner of Education For All Blog hanyalah seorang Blogger pemula namun bila sobat blogger mania berminat untuk melihat tutorial lainya bergaya magazine blog silahkan. Akses melalui link di bawah ini :
» Selamat Berkreasi - E F A «
Posted byTeacher's Message
0comments:
Post a Comment
Terimakasih Atas Komentar Anda dan EFA akan segera menuju Blog anda...