Searching...
Sabtu, 01 September 2012
08.42 0

Bagaimana Memasang Recent posts floating bar widget di Blogspot

Hello to all visitors mediasiber blog, If you all noticed under this blog once there appears hot news headlines featuring the latest post slider effect.If you want to install to your blog, here is how caranya.Terima thanks go to maribinablog on this tutorial very interesting for me.
1) Login to Dashboard> Design> Edit HTMLNote: please backup your template first to avoid any negligence.2) Tick the expand widget templates.3) Using the keyboard, press "Ctrl + F" to find the code </ head>4) Copy and paste this css code, on or before the code </ 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/AVvXsEjxIWz8QnRzZiVO6eZv22N2i_lpwxYhsoQiLr0a1x3lfz0caK2ufzXflUoZ4AXhVTKqcuhkA8es2wMRNPDaeZ5rrJgN7okHzFINhxUBEmIrwjVaR3etu6BbeFmti01O8vp70Z3OqMQ7ZzYM/s320/gradient.png) repeat-x 0-100px;cons: Lingo;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;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) After that, looking about id='content-wrapper'> <div code.For a blog that uses a template from the template designer, find the code </ footer>
6) Copy and paste this HTML code and Javascript, below or after the code <div id='content-wrapper'>

 
For a blog that uses a template from the template designer, paste this HTML code and Javascript on or before </ footer>

 
<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://mediasiber.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>
Note: Replace the url of your blog with the word red above.
7) Click the preview and if satisfied, click save.8) Done.

0 komentar:

Posting Komentar