Blogger Store

Created for bloggers who want to start an e-commerce or shopping site, Blogger Store is a professional looking template compatible with Paypal or Google Checkout

  • Animated shopping cart
  • Dual dropdown menu bar
  • Automatic featured content carousel
  • Grid and list style post view
Blogger store shopping blogger template

Lightroom Photo Blog Template

A beautiful photo blog template that displays photos in gallery format and is available in two styles basic and advanced

  • Switchable background
  • Attractive theme font
  • Integrated social media icons
  • Left sidebar and navigation menu
Lightroom Photo Blog Template

Magpress

Magazine style theme adapted from wordpress

  • Featured slider section
  • Dual menu bar
  • Tabbed widget
  • 4 column footer
Magpress Magazine style Blog Template

Sens

A simple theme with a clean layout

  • Full width featured slider
  • 4 column footer
  • Social widgets integrated
Sens Blogger template

Pop Out Social Bookmarking Widget

A nice-looking pop out social bookmarking widget that allows readers to share their favorite post easily

  • Neat display
  • Easy to install
Add pop out social bookmarking widget for blogger

Sporty Magazine 2 Blogger Template edit post

Posted by Bhavika On Thursday, July 26, 2012
Sporty magazine 2 is a 3 column sports blogger template created by Borneo Templates. Its a professional theme with dropdown menu bar, featured slideshow, news ticker, twitter widget, 5 column footer and social bookmarking icons on post pages.
sporty magazine football blogger template
Lets start with the menu bar, search for the below code in Edit Html and change the links -
<div id='menuwrapper'>
<ul id='menubar'>
<li class='selected'><a href='/'><img border='0' src='http://1.bp.blogspot.com/-7Eveg1Sruok/TZE6GFV_OHI/AAAAAAAABZo/jRHomtpFbd0/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>
Replace '#' with page or category links and default labels with your own labels, you can also add sub-categories, for example - below 'Contact us'. Next up is the news ticker, you have to register for Google Developers API Code and you will see your API key. Once done, search for this code in Edit HTML -
<script src='http://www.google.com/jsapi?key=ABQIAAAA4qkT5i26SQ6NmgJd5KQemhRQ_a6zv5_Bim3H_GL4gaueIFZ15xRdt8jcAUk8ZHokIVo-TBZgYVbkzw'/>
Replace the code marked in bold with your API key. Next step is to add your blog link, indicated in bold, in the following code, so the news update picks up the latest posts -
<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(&quot;example1&quot;, &quot;example1class&quot;, 4000, &quot;_new&quot;)
cssfeed.addFeed(&quot;Herdiansyah Hamzah&quot;, &quot;http://sportymagazine2.blogspot.com/feeds/posts/default&quot;) //
To activate the slider, add the below code in Layout--Add a Html/javascript gadget and paste -
<div id='featured'>
<ul class='ui-tabs-nav'>

<!-- 1st Small Image -->
<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>

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

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

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

<!-- First Content -->
<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>

<!-- Second Content -->
<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>

<!-- Third Content -->
<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>

<!-- Fourth Content -->
<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>
In the above code you have to make few changes, the first four paragraphs are for the small images on the side and next four for the slider. Replace '#' with your image url, add your post title and url link as indicated in the code. The main post column shows posts and thumbnails based on the labels you select, to activate that feature, insert the below code in Layout--Add html/javascript gadget -
<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 60;</script>

<script type="text/javascript" src="/feeds/posts/default/-/Borneo?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
Change the number of posts from 3 to whatever you like and also the label you want to display, repeat the steps to add more labels.

The sidebar has a search box with an option to search on Google, MSN and Yahoo as well. To add that feature, paste the below vode in Layout, add a gadget in the sidebar -

<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=&#39;&#39;;" value="Search on this site..." type="text" onblur="if(this.value==&#39;&#39;)this.value=this.defaultValue;" style="width: 240px;border:none;padding:8px 10px; font:normal 11px arial;color:#666; background:url(http://3.bp.blogspot.com/-KPO8JYvY8q0/TaTLCf3UXqI/AAAAAAAAAk0/HMNCQmZV-YI/s1600/search_field.jpg) no-repeat;" /><input type="image" src="http://4.bp.blogspot.com/-tS-vIIuEX1Y/TaTJeZlNYPI/AAAAAAAAAkw/-OF_RBII1lw/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="www.borneotemplates.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>
Simply change the blog url in the code and save the changes. This template also has a twitter widget that shows your latest tweets in the sidebar. Go to Layout, add Html/javascript gadget and paste this code. Replace the default twitter handle with your id -
<div style="background:#fff url(http://4.bp.blogspot.com/-EGnF5QAztxU/TaHe6Nz0N4I/AAAAAAAAAjw/KkLBzEZ8hiw/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('borneotemplates').start();
</script>
</div>
Download the Sporty Magazine Blogger Template
Share this Blogger Template:
edit post

1 Response to "Sporty Magazine 2 Blogger Template"

  1. Thanks for share this beaytiful templates for free

     

Post a Comment

    Recent Templates

    Recent Comments

    Video Guides