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 don’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://all-in-one-blogger-widget.googlecode.com/files/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 sidebar’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>

replace with this :

.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://all-in-one-blogger-widget.googlecode.com/files/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

'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

For All My Page Navi Can read from Read this :
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)
]]> http://www.abu-farhan.com/2009/12/numbered-page-navigation-for-blogger-new-script/feed/ 94 http://www.abu-farhan.com/2009/12/numbered-page-navigation-for-blogger-new-script/ http://feedproxy.google.com/~r/AbuFarhan/~3/jRWmi1rVbpQ/ http://www.abu-farhan.com/2009/12/six-style-page-navigation-for-blogger/#comments Thu, 10 Dec 2009 16:59:11 +0000 admin http://www.abu-farhan.com/2009/12/six-style-page-navigation-for-blogger/ Bismillah, Alhamdulillah New Page Navi has been finished for normal view, from my previous post using Paginator 3000. For the next post I will give you Normal Page Navigation for blogger but before that I’ll give six different style that my friend Choen gave to me

This is view of those Page Navigations



This Demo for All :

1. Style 1
2. Style 2
3. Style 3
4. Style 4
5. Style 5
6. Style 6

 

And this css file :

1. Style 1
2. Style 2
3. Style 3
4. Style 4
5. Style 5
6. Style 6

For the next post I’ll give you the script. You can use for my previous Page Navi Also.

]]> http://www.abu-farhan.com/2009/12/six-style-page-navigation-for-blogger/feed/ 21 http://www.abu-farhan.com/2009/12/six-style-page-navigation-for-blogger/ http://feedproxy.google.com/~r/AbuFarhan/~3/0JXzWJ34-Lg/ http://www.abu-farhan.com/2009/12/beautiful-new-page-navi-for-blogger/#comments Thu, 10 Dec 2009 10:29:14 +0000 admin http://www.abu-farhan.com/2009/12/beautiful-new-page-navi-for-blogger/ Bismillah (in the Name of Allah), Alhamdulillah (All Praise to Allah)
After Long time not post in my Blog. I didn’t post anything because I was busy for my Dissertation for my Doctor Defense. Alhamdulillah now I’m graduated (not in web designer, my major is not related with web designer)
Now I want to give all of you beautiful Page Navigation. Like I said before in my comment I’ll make new Page Navigation that can support more than 500, and now this Page Navigation can support more than 500, Alhamdulillah.
To make it beautiful I used New Pugin from WP Paginator
This Plugin call Paginator 3000
- idea by ecto (ecto.ru)
- coded by karaboz (karaboz.ru)
To see the result open This Demo



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

.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://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/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://all-in-one-blogger-widget.googlecode.com/files/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://all-in-one-blogger-widget.googlecode.com/files/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

For All My Page Navi Can read from Read this :
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)
]]> http://www.abu-farhan.com/2009/12/beautiful-new-page-navi-for-blogger/feed/ 29 http://www.abu-farhan.com/2009/12/beautiful-new-page-navi-for-blogger/ http://feedproxy.google.com/~r/AbuFarhan/~3/BJ0t_bqINU8/ http://www.abu-farhan.com/2009/10/easiest-way-to-make-tabber-sidebar-for-blogger/#comments Sat, 10 Oct 2009 08:47:12 +0000 admin http://www.abu-farhan.com/2009/10/easiest-way-to-make-tabber-sidebar-for-blogger/ Bismillah, Alhamdulillah. After long time this trick I release, I have this idea when Webitect made tutorial for Tabbed Sidebar. Until yesterday I didn’t make tutorial yet, because I’m busy and difficult for me to make good tutorial for this trick special for blogger. I modified this trick special for Bloggertuts after that Dantearaujo made tutorial and CSS Style for this TAB and put it in bloggertuts. Alhamdulillah he made great tutorial for this Trick, everyone will understand easily. You can read here

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.

The Feature of my trick are :

• 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.

Small screenshot from Tabbed Sidebar with Dante’s css style. Demo you can see from this DEMO



 

For this post I only give you the CSS and script, Complete Explanation about this you can read from Bloggertuts

CSS

Script

You only have to change this part :

var starttab=0;
var endtab=2;
var sidebarname=”sidebar“;

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”

Only That after that Insya Allah you will see Script Automatic Generated HTML structure for Tabbed and will show Animated Jquery.

I hope This will be usefull insya Allah, Complete Explanation in here The Easiest Way to Make Tabbed Sidebars on Blogger

]]> http://www.abu-farhan.com/2009/10/easiest-way-to-make-tabber-sidebar-for-blogger/feed/ 27 http://www.abu-farhan.com/2009/10/easiest-way-to-make-tabber-sidebar-for-blogger/ http://feedproxy.google.com/~r/AbuFarhan/~3/O99NhntQriI/ http://www.abu-farhan.com/2009/10/falkner-shine-blogger-template/#comments Sat, 03 Oct 2009 09:01:46 +0000 admin http://www.abu-farhan.com/2009/10/falkner-shine-blogger-template/ Bismillah

After long time not release this template in my blog, now I put it in my blog. This template same from other Falkner Series source from www.bloggertricks.com and wordpress theme from www.camelgraph.com . This template from Falkner Press and I change bg and color from Falkner shine (www.camelgraph.com ).

Screenshot



Demo | Download

]]> http://www.abu-farhan.com/2009/10/falkner-shine-blogger-template/feed/ 21 http://www.abu-farhan.com/2009/10/falkner-shine-blogger-template/ http://feedproxy.google.com/~r/AbuFarhan/~3/1THgH_l2kSo/ 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 http://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 see Catalog Tutorial template  I have 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 Google Style

Screenshoot for Page Navi



My Demo

Demo from Boogle

]]> http://www.abu-farhan.com/2009/09/page-navigation-for-blogger-with-google-style/feed/ 35 http://www.abu-farhan.com/2009/09/page-navigation-for-blogger-with-google-style/ http://feedproxy.google.com/~r/AbuFarhan/~3/P1e-3gzU8l4/ 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 small Javascript coding for This template. For Explanations and demo click these links:

BloggerTube – The first Blogger video template!
Demo

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



]]> http://www.abu-farhan.com/2009/09/bloggertube-the-first-blogger-video-template-by-www-dantearaujo-net/feed/ 76 http://www.abu-farhan.com/2009/09/bloggertube-the-first-blogger-video-template-by-www-dantearaujo-net/ http://feedproxy.google.com/~r/AbuFarhan/~3/5u093ZbO_ys/ 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/ 25 http://www.abu-farhan.com/2009/09/table-of-contents-categorized-by-dates-by-archived/ http://feedproxy.google.com/~r/AbuFarhan/~3/wIFVGAs0LKk/ 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, you can see this  Blog, all of them use this hack:

bloggerbuster

Bloggertricks

Deluxetemplates

Blogger Pluggin

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 pervious 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) , one blogger have good idea to use max (Blogger Pluggin), but he still use same script, only use max, but if I checked some page not shown properly. 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.

Please look at article from bloggerbuster and Blogger Pluggin they Always mention original Author if they took from other hack, and they are not only copy the hack but they give some suggestion to make the script better.

]]> http://www.abu-farhan.com/2009/09/page-navigation-for-blogger-problems-solved/feed/ 132 http://www.abu-farhan.com/2009/09/page-navigation-for-blogger-problems-solved/