After long time this widget (Accordion for Blogger) I’m not release, some blogger ask me about the script at my sidebar. For that I release this script for you all.
Many blogger already make this but none of them user friendly for new blogger.

This script very useful to everyone, specially for those who have a lot of content on their sidebar and spend much time thinking where to place new stuff.

The method I developed is from Simple JQuery Accordion Menu, I just found it very useful and decided to adapt that technique to Blogger platform. This tutorial will bring you a very easy to implement way to make accordions out of your sidebar widgets, here are some features of my method:

• Easy to install.
• No need to edit html in Sidebar part.
• Freedom to set which widgets will show or hide.
• Have two type, first is Accordion and second is Only hide/show
• After implementing, Widgets are normally edited from Page Elements section.

The Final Result

If you want to see it working please check the live demo.

Demo using Template from Choen if you want you can download here Grid Template

From Demo First Sidebar using Accrodion and Second sidebar Toggle Show/Hide

Step 1 – Installing jQuery Library

This script needs the jQuery JavaScript library, if you already have it installed, you can skip this step, if you dona’t have find this :

</head>

Replace with this

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'>
</head>

Step 2 – Installing the Script

Ok now that you’ve made sure that you have jQuery
installed, you need to install the script, find this :

</head>

replace with this :

<script type='text/javascript'>
var sidebarnameacc1=&quot;sidebar&quot;;
var accordionside1=true;
var sideshow1=new Array(0,0);
var sidebarnameacc2=&quot;sidebar2&quot;;
var accordionside2=false;
var sideshow2=new Array(0,0);
</script>
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/accordionscriptv101-min.js' type='text/javascript'/>
</head>

Customizing

As you have noted you’ll get a few lines that can be customized, those are:

var sidebarnameacc1="sidebar";
var accordionside1=true;
var sideshow1=new Array(0,0);

sidebarnameacc1 is your first sidebara’s id, it is generally just sidebar, but just in case you have a different id you can learn from This post

accordionside1 –> True mean it will be accordion type, false mean
Hide or Show Contents, you can try from Demo.

sideshow1 = number for your chosen widgets to Show, usually if you
have advertisement you want to always show when load with this variable you can
select the widgets.

0 = first widget at your sidebar

1 = second widget at your sidebar and so on

if only one for first widget like this

var sideshow1=new Array(0,0);

if only one for second widget like this

var sideshow1=new Array(1,1);

if two for first and second widget like this

var sideshow1=new Array(0,1);

if many you can add like this

var sideshow1=new Array(0,1,2,3,4,5);

Ok Finish only that the step if you want to give Style you can continue on
step 3

Step 3 – Only for Advanced Users : Placing the styles on your CSS

I give “headactive” class to make different when Content show or hide, you
can change waht ever you want for that template I use this style.

find this in your template :

]]></b:skin>
[/html]
replace with this :
[html]
.sidebar h2.headactive {
background-color: #d77218;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
}

.sidebar2 h2.headactive {
background-color: #d77218;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
}
]]></b:skin>

ok Only that I hope you can use for your blog

Page navigation is need for all blogger because it can make navigation easy for your visitors. Previous script have some weakness :

1. Maximum posts 500
2. Have to read all JSON file if post so many make your blog slow
3. Need long loop to calculate all posts (no body know this if they not read the script)

Now all those problems can be solved, Insya Allah. The script is different with My Previous Modification Nummbered Page Navigation for blogger, the script based on my own idea and for style I used from Mohamed Rias

To see the result open These demos:

• Demo for Minima
• Demo for Custom Template (Irressistible from Anshul)
• Demo for Classic from Choen Blog

Step 1 : Apply Style

1. Login to Blogger Dashboard and navigate to Layout > Edit Html
2. Don’t click the checkbox which says ‘Expand Widget Templates’
3. Find this

]]></b:skin>

and replace it with

.showpageNum a {
  padding: 3px 8px;
  margin:0 4px;
  text-decoration: none;
  border:1px solid #999;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  background: #ddd;
  }

.showpageOf {
margin:0 8px 0 0;
}
.showpageNum a:hover {
  border:1px solid #888;
  background: #ccc;
  }

.showpagePoint {
  color:#fff;
  text-shadow:0 1px 2px #333;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  border:1px solid #999;
  background: #666;
  text-decoration: none;
  }

]]></b:skin>

Above style use Old Style You can use Six other style from this Posts
Six Styles Page Navigation for Blogger

Step 2 : Aplly Javascript

Find This :

</body>

Replace with :

<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=4;
var upPageWord ='Prev';
var downPageWord ='Next';
</script>
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/pagenaviv202-min.js' type='text/javascript'></script>
</body>

Change based on your blog setting :
var postperpage=7;
var numshowpage=4;

Postperpage : How many Post every Page for your blog
numshowpage : how Many number will show in Your page Navigation

Step 3 : Customize Label (if you already use my previous Page Navi don’t use this step)

Go to the Edit HTML page and “Expand Widget Templates”
Find this (all of this text in your xml or template)

'data:label.url'

and Replace with this

'data:label.url + "?&max-results=7"'

Change 7 base on how many post every page

only That, I hope it can work and make your blog easy to navigate, amiin

1. Six Styles Page Navigation for Blogger
2. Beautiful New Page Navi For Blogger With Scroll
3. Page navigation for Blogger with Google Style
4. Page Navigation for Blogger (Problems Solved)

Demo

Step 1 : Apply Style

1. Login to Blogger Dashboard and navigate to Layout > Edit Html
2. Dona’t click the checkbox which says “Expand Widget Templates”
3. Find this

]]></b:skin>

and replace it with

	
.paginator {
	margin-top:60px;
	font-size:1em;
}
.paginator table {
	border-collapse:collapse;
	table-layout:fixed;
	width:100%;
}
.paginator table td {
	padding:0;
	white-space:nowrap;
	text-align:center;
}
.paginator span {
	display:block;
	padding:3px 0;
	color:#fff;
}
.paginator span strong,
.paginator span a {
	padding:2px 6px;
}
.paginator span strong {
	background:#ff6c24;
	font-style:normal;
	font-weight:normal;
}
.paginator .scroll_bar {
	width:100%;	height:20px;
	position:relative;
	margin-top:10px;
}
.paginator .scroll_trough {
	width:100%;	height:3px;
	background:#ccc;
	overflow:hidden;
}
.paginator .scroll_thumb {
	position:absolute;
	z-index:2;
	width:0; height:3px;
	top:0; left:0;
	font-size:1px;
	background:#363636;
}
.paginator .scroll_knob {
	position:absolute;
	top:-5px; left:50%;
	margin-left:-10px;
	width:20px; height:20px;
	overflow:hidden;
	background:url(http://3.bp.blogspot.com/_McxL-_3YYuM/TBG843o8-TI/AAAAAAAAAAM/tAE1hAOX6Ys/s1600/slider_knob.gif) no-repeat 50% 50%;
	cursor:pointer; cursor:hand;
}
.paginator .current_page_mark {
	position:absolute;
	z-index:1;
	top:0; left:0;
	width:0; height:3px;
	overflow:hidden;
	background:#ff6c24;
}

.fullsize .scroll_thumb {
	display:none;
}

.paginator_pages {
	width:600px;
	text-align:right;
	font-size:0.8em;
	color:#808080;
	margin-top:-10px;
}
]]></b:skin>

Step 2 : Aplly Javascript

Find This :

</body>

Replace with :

<script src='http://scriptabufarhan.googlecode.com/svn/trunk/paginator3000.js' type='text/javascript'></script>
<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=6;
</script>
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/paginator3000-forblogger-v1.0.0.js' type='text/javascript'/>
</body>

Change based on your blog setting :
var postperpage=7;
var numshowpage=6;

Postperpage : How many Post every Page for your blog
numshowpage : how Many number will show in Your page Navigation

Step 3 : Customize Label (if you already use my previous Page Navi don’t use this step)

Go to the Edit HTML page and “Expand Widget Templates”
Find this

'data:label.url'

and Replace with this

'data:label.url + "?&max-results=7"'

Change 7 base on how many post every page

only That, I hope it can work and make your blog easy to navigate, amiin

1. Six Styles Page Navigation for Blogger
2. Numbered Page Navigation For Blogger New Script
3. Page navigation for Blogger with Google Style
4. Page Navigation for Blogger (Problems Solved)

Actually between this Trick and Webitect is completely different I only got inspiration from that. Because they made for general website.

If you search from Google you will found many way to make Tabbed Sidebar but Difficult to implement in blogger, because we have to modify HTML or XML in Sidebar Part. This Trick is very easy only put CSS and JS. The JS will automatic make structure for Tabbed and we don’t have to modify in Sidebar Part.
So this trick will not mess up you html and disturb your sidebar. After put js You can change position or content of sidebar, it was very easy.

Here are some features of my method:

• Easy to install.
• No need edit html in Sidebar part.
• Automatically place your handpicked widgets inside tabs.
• Freedom to set what widgets stay out of the tabs.
• After implementing, Widgets are normally edited from Page Elements section.

The Final Result

If you want to see it working please check the live demo.

Step 1 – Placing the styles on your CSS

The style of the tabs can be easily changed anytime just using CSS, but this is not the main reason for this tutorial, It’s up to you to change or not, use your own CSS skills. We’ve made a general layout for it, to install it just place the following code right before the ]]></b:skin> line:

/* Tabbed Sidebar Widgets
--------------------------------- */
.widget-wrapper2{
border:1px solid #494e52;
background-color:#636d76;
padding:8px;
}

.widget-tab {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topright:5px;
-webkit-border-radius-bottomleft:5px;
-webkit-border-radius-bottomright:5px;
-webkit-border-radius-topright:5px;
background:#FFFFFF url(http://i195.photobucket.com/albums/z105/dantearaujo/tabcontentbg.gif) repeat-x scroll left bottom !important;
border:1px solid #CFCFCF;
font-family:Arial,Helvetica,sans-serif;
padding:15px !important;
}

.widget-tab  ul {
margin:0px;
padding:0px 20px 0px 20px;
}
.widget-tab  ul li {
list-style:none;
border-bottom:1px solid #d6dde0;
padding-top:10px;
padding-bottom:10px;
font-size:13px;
}
.widget-tab  ul li:last-child {
border-bottom:none;
}
.widget-tab  ul li a {
text-decoration:none;
color:#3e4346;
}
.widget-tab  ul li a small {
color:#8b959c;
font-size:9px;
text-transform:uppercase;
font-family:Verdana, Arial, Helvetica, sans-serif;
position:relative;
left:4px;
top:0px;
}
.tab-content  ul li a:hover {
color:#a59c83;
}
.tab-content  ul li a:hover small {
color:#baae8e;
}

.active-tab{
background:#FFFFFF url(http://i195.photobucket.com/albums/z105/dantearaujo/tabtopbg.gif) repeat-x scroll left top !important;
border-color:#CFCFCF #CFCFCF #FFFFFF #CFCFCF !important;
border-style:solid !important;
border-width:1px 1px 2px !important;
color:#282E32 !important;        

}

ul.tab-wrapper {
margin:0px; padding:0px;
margin-top:5px;
margin-bottom:6px;
}
ul.tab-wrapper li {
-webkit-border-radius-topleft:5px;
-webkit-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background:#191919 url(http://i195.photobucket.com/albums/z105/dantearaujo/tabinactivebg.gif) repeat-x scroll left top;
border:1px solid #464C54;
color:#FFFFFF;
cursor:pointer;
display:inline;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:9px;
font-weight:bold;
line-height:2em;
list-style-image:none !important;
list-style-position:outside !important;
list-style-type:none !important;
margin-right:1px;
padding:8px 14px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
}

Step 2 – Installing jQuery Library

This script needs the jQuery JavaScript library, if you already have it installed, you can skip this step, if you don’t just paste the code below right before your </head> line:

<!-- jQuery Call -->

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>

<!-- End of jQuery Call -->

Step 3 – Installing the Script

Ok now that you’ve made sure that you have jQuery installed, you need to install the script that will do all the magic for us, just place the following code right before your </head> line:

<script type="text/javascript">
var starttab=0;
var endtab=2;
var sidebarname="sidebar1";
</script>
<script type="text/javascript" src="http://scriptabufarhan.googlecode.com/svn/trunk/bloggertabv1.0-min.js"></script> 

Customizing

As you have noted you’ll get a few lines that can be customized, those are:

var starttab=0;
var endtab=2;
var sidebarname="sidebar";

Very quickly: starttab is the starting number for your chosen widgets, it starts counting from 0. endtab is the number for your last included widget. sidebarname is your sidebar’s id, it is generally just “sidebar”, but just in case you have a different id, we’ll help you finding the right one to place here.

How to find your sidebar’s ID

Ok if you have installed the script and it is not working, you may have a different sidebar ID that is not only “sidebar”, use the following methods to find he right id of your sidebar.

Method 1 – Getting from the HTML

This one may be the fastest one, if you use Minima template, or any template derived from it, just go to Layout > Edit HTML > Search for “sidebar-wrapper” and you may get something like this:

<div id='sidebar-wrapper'>

<b:section class='sidebar' id='sidebar' preferred='yes'>

Just take a closer look and you will find it id=’sidebar’.

Method 2 – Using Firebug

Firebug is the most wonderful Firefox extension for web developers, If you dont have it, just download it from here.

Method 3 – Using Web developer Firefox Plugin

This is another great extension, if you don’t have it, get it here.

Ok now that you have installed the script on your blog, you should be able to normally edit your widgets on your page elements section.

What are the Gadget Numbers

Here is a simple explanation for those who haven’t understand the numbers yet. Let’s say that you want make tabs out of your first 3 widgets, so your starting number will be 0 and your finishing number will be 2:

var starttab=0;
var endtab=2;
var sidebarname="sidebar";

Check images below for better understanding:

In this case, Widget 3 and 4 will not get any tabs, because your finishing number was 2. Very easy huh?

Advices

• This script works for only one sidebar per blog.
• We have included a general styles for your tabs, however, you can use your CSS skills to customize them, but be aware that CSS related errors will not be supported here, make sure you do the right thing.
• All the tabbed widgets need to have a title.

]]> http://www.abu-farhan.com/2009/10/easiest-way-to-make-tabber-sidebar-for-blogger/feed/ 48 http://www.abu-farhan.com/2009/09/page-navigation-for-blogger-with-google-style/ http://www.abu-farhan.com/2009/09/page-navigation-for-blogger-with-google-style/#comments Sat, 26 Sep 2009 05:44:39 +0000 admin http://www.abu-farhan.com/2009/09/page-navigation-for-blogger-with-google-style/ After my modification of Page Navigation from www.techieblogger.com actually I want to make new style for page navigation but I think other designer will make better so I’ll wait for that. When I saw Catalog Tutorial template I have one inspiration to make page navigation with google style only for Kang Jaloee. Now I will give this for all of you if you want to use or modify base on you template style.

Method is same with Page Navigation for Blogger (Problems Solved)

different only style and js

CSS

Javascript Page Navi for Blogger

Screenshoot for Page Navi

Demo

Demo from Boogle

]]> http://www.abu-farhan.com/2009/09/page-navigation-for-blogger-with-google-style/feed/ 40 http://www.abu-farhan.com/2009/09/bloggertube-the-first-blogger-video-template-by-www-dantearaujo-net/ http://www.abu-farhan.com/2009/09/bloggertube-the-first-blogger-video-template-by-www-dantearaujo-net/#comments Thu, 24 Sep 2009 02:57:24 +0000 admin http://www.abu-farhan.com/2009/09/bloggertube-the-first-blogger-video-template-by-www-dantearaujo-net/ Finally Dante araujo has Released his new Template. I help him with small Javascript code for his template. For Explanations and demo click these links:
BloggerTube – The first Blogger video template!
Demo
Download Link (update with js file)
Features on BloggerTube :

1. Automatic embedded video on post page (only paste URL link)
2. Automatic slider for the last featured videos
3. Automatic Recent videos widget (video thumbnail)
4. Automatic Thumbnail from Youtube (only Youtube URL)
5. Page Navigation
6. Three Column Video Posts

Download Link (update with js file)

]]> http://www.abu-farhan.com/2009/09/bloggertube-the-first-blogger-video-template-by-www-dantearaujo-net/feed/ 146 http://www.abu-farhan.com/2009/09/table-of-contents-categorized-by-dates-by-archived/ http://www.abu-farhan.com/2009/09/table-of-contents-categorized-by-dates-by-archived/#comments Sun, 20 Sep 2009 14:03:41 +0000 admin http://www.abu-farhan.com/2009/09/table-of-contents-categorized-by-dates-by-archived/ Bismillah Alhamdulillah, After my script The Best TOC/SiteMap/Daftar isi For blogger , I made one more TOC base on Archive, actualy this method more simple than before because it’s only show All data no need to sort all posts. Preview of the result shown below picture and this is the
DEMO

How to use my script is very easy only input this two line to the post in HTML Mode

<script style="text/javascript" src="http://abu-farhan.com/script/daftarisibloggerarchive/tocbyarchivemin.js"></script>
<script src="http://audio.assunnah.web.id/feeds/posts/default?max-results=500&alt=json-in-script&callback=loadtoc"></script>

change audio.assunnah.web.id to your blogger URL

]]> http://www.abu-farhan.com/2009/09/table-of-contents-categorized-by-dates-by-archived/feed/ 38 http://www.abu-farhan.com/2009/09/page-navigation-for-blogger-problems-solved/ http://www.abu-farhan.com/2009/09/page-navigation-for-blogger-problems-solved/#comments Mon, 14 Sep 2009 13:40:20 +0000 admin http://www.abu-farhan.com/2009/09/page-navigation-for-blogger-problems-solved/ Bismillah, Alhamdulillah, after some of my json hack for blogger. Now, I’ll try to solve most need hack for blogger is Page Navigation for blogger. Actually this hack I solved 2 months ago, but I’m not make tutorial for that because to explain this hack very difficult.

If we search about Page navigation for blogger will found to the author Mohamed Rias

Tutorial for Page Navigation for blogger by Mohamed Rias :

Page Navigation Hack for Blogger

Page Navigation Menu Widget for Blogger

I think this hack is the best Hack for blogger because useful and use for many blogger

If we check all comments from many tutorial about this so many question said that it can’t work :

For my Script I used same script from Mohamed Rias (Jazakallahu khoiran ya akhi) but I modified some places.

Now I tried to solve by simple problem first, Page navigation not show, This problem because :

1. Domain name in first script use only for blogger and Amanda give explanation about this , but in my script no need to change for this problem.
2. No id name ‘blog-pager’ , to solve this problem you have to change the script base on your ID in blog-pager because some template that not original from blogger they change id name.

Now I’ll explain what is the problem for advanced user. They found these kind of problems :

1. If we post more than one post in same day, navigation can’t show right result. They solve by only post one post in one day. But it will problem for someone have many post in previous posts and they post more than one in same day, problem because previous hack only use Date not until Time (Insya Allah this problem Solved in my script).
2. Label problem, if we click the label it will show more than maximum post per page (problem is from blogger.com), If you want know why it can’t solved that problem because Label have different JSON feed (In my script this problem solved insya Allah)

Explanation what I changed inside the script :

1. Var timestamp , Prev hack only count Date not time, the problem occur when many post in one day.
2. Separate JSON link and Function script for Page and Label.
3. Make Max Post for Label.

Follow All tutorial in this post because the script is different from original script. CSS is same with previous hack.

Now tutorial to use my script, I’ll use tutorial from Mohamed Rias

Step 1 : Log in to your blogger account and navigate to Layout section. Now go to the edit HTML subtab.

Step 2 : search this line ]]></b:skin> and add this CSS code above that line.

It must look like this :

(Picture source from Mohamed Rias)

Step 3 : Now search for this code or related in your template ( no need to expand widgets )

<b:section class='main' id='main' showaddelement='yes' >
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>

Now Add This script just below the </b:section> .

if you can’t find you can search (ctrl+f) by this key ” id=’main’

Now Add This script just below the </b:section> .

Or if Difficult you can put before closing body tag

My Modification Script already solve the problem for Post more than one and Label Problem.

In the code above you can edit this line only :

var pageCount=10;
var displayPageNum=6;

1 : var pageCount = 10;

The Pagecount represents number of posts to be shown in single page. Change the digit to show as many pages you want.

for example :

In my example I have put that value as 10 . In each page you can see only 10 posts .

The number have to same with your setting

The picture show from Setting –> Formatting –> Show –> 10 posts

2 : var displayPageNum = 6;

here the digit 6 represents number of pages to be listed.

For example :

In my example I have chosen 6 , then 6 pages will be shown.

Tutorial from Mohammed Rias only stop here, But for my script have to add modification for label link

Modification Step for Label :

Step 1 : Add Label Gadget (Layout –> page elements –> Add Gadget –> Select Labels)

Step 2 : From Layout –> Edit HTML . Don’t Forget to backup your template (Download Full Template)

Step 3 : Search this

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>

Change to this And Click “save template”

Finished, I hope it can work and This is Demo :

Demo

Note : If Some blogger one to make Tutorial in their own blog, please give link to my blog (Abu Farhan) or Mohamed Rias to appreciate our work for this hack, and for me Insya Allah I can give some explanation if error or can’t show for the user.

]]> http://www.abu-farhan.com/2009/09/page-navigation-for-blogger-problems-solved/feed/ 184 http://www.abu-farhan.com/2009/09/the-best-table-of-content-toc-or-sitemap-for-blogger/ http://www.abu-farhan.com/2009/09/the-best-table-of-content-toc-or-sitemap-for-blogger/#comments Wed, 02 Sep 2009 00:57:50 +0000 admin http://www.abu-farhan.com/2009/09/the-best-table-of-content-toc-or-sitemap-for-blogger/ Many blogger want to make sitemap or Table of contents for their blog in blogger engine. Some of them only index of their posts by only show title of blog or make it manual by type the title every posts. Here some example of simple table of content (Manual Input) :

• TOC type Manual
• Only Show Title by Beautiful Beta

Amanda just post How to create a sitemap with Google Feed control, her idea is good she want to categorized the post but using google feed and have to input label feed one by  one.

But I like her blog she provide many tutorial for blogger, every blogger have to know and read bloggerbuster

Beautiful Beta make javascript and used json from blogger call blogtoc widget. Many blogger try and modifed of his script but only change a little bit thing. Here some example what they change :

1. Change position of TOC to the post, first time Beautiful Beta show his TOC in every post using javascript button in sidebar (I forgat the way how to use)
2. Only change the language, this method can be found from Indonesian blogger they only change the language nothing to change inside.
3. Give CSS for the table, only change the color and other thing.

Actually I used his javascript but I modified to become sitemap view not table anymore, and categorized the post.

Featured of My Script :

1. Easy to use, only two line script.
2. Categorized by Label.
3. Can use for Multiple label in every posts.
4. Give “New !!” Text for 10 latest posts.

Demo

How to use my script is very easy only input this two line to the post in “HTML” Mode

<script style="text/javascript" src="http://www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js"></script>
<script src="http://www.abufarhan.co.cc/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

change “www.abufarhan.co.cc” to your blogger URL

]]> http://www.abu-farhan.com/2009/09/the-best-table-of-content-toc-or-sitemap-for-blogger/feed/ 107 http://www.abu-farhan.com/2009/08/masagana-blogger-template/ http://www.abu-farhan.com/2009/08/masagana-blogger-template/#comments Thu, 06 Aug 2009 09:30:11 +0000 admin http://www.abu-farhan.com/2009/08/masagana-blogger-template/ Bismillah, Alhamdulillah.

Now I’ll give you all my new blogger template with magazine style. Template name is Masagana Blogger Template. This template from Wordpress Theme Masagana from http://www.paddsolutions.com (WP Demo)

This is the preview for Blogger template.

Features :

• Auto Popular topic based on most comments
• Magazine Style
• Adsense ready
• Auto Readmore and thumbnail
• Twitter Account Integration
• Featured post using smoothgallery

Demo Download

]]> http://www.abu-farhan.com/2009/08/masagana-blogger-template/feed/ 15