Buku Tamu

$00.00

TUTORIALS HOW TO USE SPORTY MAGAZINE 2

First step, you have to download Sporty Magazine 2 files. After that, follow the instruction below.

Menu Navigation Dropdown

To set this menu, please go to your HTML stukrut page (no need to expand), then scroll down and find the following code : <div id='menuwrapperpic'> (Notes : for quick search, press the F3 key, type the code above and enter). After this code, you will find menu navigation dropdwon below :

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li class='selected'><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuyRt-JFRsCvYTmCR5nV-xyjPjwLJw_o5E64y1wle9MNvi54M5Fyzj0nMsPG2kgTypsnoFyXADV49Wn1yXih2vqsB9lveQzWRx1miHz3N6btRgfMUu0_441KGehlC-XIvTzD7gt6NecCg/s1600/home_white.png' style='padding:0px;'/></a></li>
<li class='selected'><a href='#'>About Us</a></li>
<li><a class='trigger' href='#'>Contact Us</a>
<ul>
<li><a href='#'>Herdiansyah Blog</a></li>
<li class='hr'/>
<li><a href='#'>Contact on Facebook</a></li>
<li><a href='#'>Contact on Twitter</a></li>
<li class='hr'/>
<li><a href='#'>Free Template Design</a></li>
</ul>
</li>
<li><a href='#'>Moto GP</a></li>
<li><a href='#'>Football</a></li>
<li><a href='#'>Formula 1</a></li>
<li><a href='#'>Web Design</a></li>
<li><a href='#'>Free Template</a></li>
<li><a href='#'>Videos</a></li>
<li><a href='#'>Image</a></li>
<li><a href='#'>Download</a></li>
<li><a class='trigger' href='#'>More</a>
<ul>
<li><a href='#'>Editorial</a></li>
<li class='hr'/>
<li><a href='#'>Off Topic</a></li>
</ul>
</li>
</ul>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div>

Notes : change the code # with your link url address, and name labels with your label or categories.

News Ticker

First step, you have to register your blog to API Google Code and you will see your API code. After that, find this code below on your edit HTML tabs :

<script src='http://www.google.com/jsapi?key=ABQIAAAA4qkT5i26SQ6NmgJd5KQemhRQ_a6zv5_Bim3H_GL4gaueIFZ15xRdt8jcAUk8ZHokIVo-TBZgYVbkzw'/>

Notes : replace the blue code, with yourAPI Key.

Next step, you have to change your url link to make it news ticker appear with your latest post. Find this code below on edit HTML tabs.

<div class='newspic'>
<div class='news'>
<div style='float:left;padding:5px 60px 5px 0;font:bold 14px Arial;color:#333;text-transform:none;'>News Update :</div>
<div style='float:left;width:800px;padding:4px 0; position:relative; overflow:hidden;'>
<script type='text/javascript'>
var cssfeed=new gfeedrssticker("example1", "example1class", 4000, "_new")
cssfeed.addFeed("News Update", "http://sportymagazine2.blogspot.com/feeds/posts/default") //Specify "label" plus URL to RSS feed
cssfeed.displayoptions("date") //show the specified additional fields
cssfeed.setentrycontainer("div") //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, "date") //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
</div><div style='clear:both;'/>
</div>

Notes : replace the red code, with your site/blog url link.

Featured Slideshow Content

First step, add new html/java script widget on your page. Put this code below :

<div id='featured'>
<ul class='ui-tabs-nav'>


<li class='ui-tabs-nav-item ui-tabs-selected' id='nav-fragment-1'><a href='#fragment-1'><img alt="" src="#" /><span>Post Title</span></a></li>


<li class='ui-tabs-nav-item' id='nav-fragment-2'><a href='#fragment-2'><img alt="" src="#" /><span>Post Title</span></a></li>


<li class='ui-tabs-nav-item' id='nav-fragment-3'><a href='#fragment-3'><img alt="" src="#" /><span>Post Title</span></a></li>


<li class='ui-tabs-nav-item' id='nav-fragment-4'><a href='#fragment-4'><img alt="" src="#" /><span>Post Title</span></a></li>
</ul>


<div class='ui-tabs-panel' id='fragment-1' style=''>
<img alt="" src="#" />
<div class='info'>
<h2><a href=' your-url-link '>Post Title</a></h2>
</div></div>


<div class='ui-tabs-panel ui-tabs-hide' id='fragment-2' style=''>
<img alt="" src="#" />
<div class='info'>
<h2><a href=' your-url-link '>Post Title</a></h2>
</div></div>


<div class='ui-tabs-panel ui-tabs-hide' id='fragment-3' style=''>
<img alt="" src="#" />
<div class='info'>
<h2><a href=' your-url-link '>Post Title</a></h2>
</div></div>


<div class='ui-tabs-panel ui-tabs-hide' id='fragment-4' style=''>
<img alt="" src="#" />
<div class='info'>
<h2><a href='your-url-link'>Post Title</a></h2>
</div></div>
</div>

Notes : replace red code (#) with your image url link, orange code (Post Title) with your post title, and blue code (your-url-link) with your url link post.

Featured Label Categories

First step, open your blog page and add new HTML/Java Script widget. Next step, put this code below :

Notes : Change orange code (3), with number of post will be appear, and red code (News) with your label or categories.

Twitter Widget (Live Updates)

Open your page elements and put this code below with add new HTML/Java Script.

<div style="background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnMVIX1xnp12WyGu2wwioaQs_uB0HtOZ8ncKPmUD0EoSwVZEGHtCFTO-0-t5-PSVFRp5RzHYrmFE08t53B2B-dYRBic7PsQj70qAElEayg8RMOVP-X8KYPQbPf5cgDLBp1Z2sdlZALNp0/s1600/bg_twitter.gif) no-repeat;padding-top:40px;padding-left:5px">
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 10,
interval: 3000,
width: 285,
height: 118,
theme: {
shell: {
background: 'transparent',
color: '#000000'
},
tweets: {
background: 'transparent',
color: '#000000',
links: '#B45F04'
}
},
features: {
scrollbar: true,
loop: true,
live: true,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'default'
}
}).render().setUser('Free_download').start();
</script>
</div>

Notes : change orange code ( Free_download ) with your twitter username.

Search Widget

Open your page elements and put this code below with add new HTML/Java Script.

<form name="jksearch" action="http://www.google.com/search" method="get" onsubmit="jksitesearch(this)" target="_blank">

<input id="hiddenquery" type="hidden" name="q" />
<input name="qfront" onfocus="if(this.value==this.defaultValue)this.value='';" value="Search on this site..." type="text" onblur="if(this.value=='')this.value=this.defaultValue;" style="width: 240px;border:none;padding:8px 10px; font:normal 11px arial;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTOiJcO2SHzjlPyzf52lOtD1bVnW590SPDfoifqokvqf-ggmMdJTEWx0neoUQ_Gpb3fZtlmrBxHu5BdKUERvLyyW4ubl4ICMxogPOOeVbg58B0MwsB2NEhfQYc64s3BEO6KaW8tDkrfdg/s1600/search_field.jpg) no-repeat;" /><input type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibyIOEy-7CntL8QsvO-xZb2QRK50G0_KIDwBOjWFGHaQhlsT56N7NsrCyO5MQAnLD9PriZlZBVdSsoXkxSrCfDfTKNqPl_yGZQ51N2TcKJNzqGPP4QkyiPlnwBNgBi0WsNfGPbgf2Iffc/s1600/search_button.jpg" align="top" value="Search"/>

<div style="font: normal 11px Arial;color:#666;padding:2px 0;">
<input name="se" type="radio" checked /> Google
<input name="se" type="radio" /> Yahoo
<input name="se" type="radio" /> Msn
</div>

<script type="text/javascript">

// All-in-one Internal Site Search script- By JavaScriptKit.com (http://www.javascriptkit.com)
// For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/
// This notice must stay intact for use

//Enter domain of site to search.
var domainroot=" freedownloadtemplateblog.blogspot.com "

var searchaction=[ //form action for the 3 search engines
"http://www.google.com/search",
"http://search.yahoo.com/search",
"http://search.msn.com/results.aspx"
]

var queryfieldname=["q","p","q"] //name of hidden query form for the 3 search engines

function switchaction(cur, index){
cur.form.action=searchaction[index]
document.getElementById("hiddenquery").name=queryfieldname[index]
}
function jksitesearch(curobj){
for (i=0; i< document.jksearch.se.length; i++){ //loop through radio to see which is checked
if (document.jksearch.se[i].checked==true)
switchaction(document.jksearch.se[i], i)
}
document.getElementById("hiddenquery").value="site:"+domainroot+" "+curobj.qfront.value
}
</script>
</form>

Notes : change orange code ( freedownloadtemplateblog.blogspot.com ) with your twitter username.