Many comment ask me about my script that not working anymore that is because my file at googlecode disappear. I have already other place so I made announcement at my last post “My Script Address” . But some blogger still not understand how to use it.  So I updated some of my posts. I’m sorry I’m not change all my posts because I’m busy with my work. so this is some of my post that already update :

• Accordion Template for Blogger
• Table of contents and Accordion for Blogger
• Table of Contents for Blogger new style
• The Best Accordion for Blogger user
• Numbered Page Navigation For Blogger New Script
• Six Styles Page Navigation for Blogger
• Beautiful New Page Navi For Blogger With Scroll
• Easiest Way to Make Tabbed Sidebar for Blogger

I hope this can help all of you

Today I received many comments said that my script can’t show, when I checked the file storage at googlecode, I can’t access it anymore. so I put some of my script in another storage, you can download and upload to your server or use that link

I hope this can help all off you

This is my scipt link

http://scriptabufarhan.googlecode.com/svn/trunk/

Feature of this font is :

• Support Ie 6
• Host by Google ( big bandwidth and Cache in your browser)
• Using @font-face
• Will have many type of font

How to use in blogger is very easy this is one example I put in blogger :

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'/>
<style>
h1 { font-family: &#39;Lobster&#39;, arial, serif; }
h3 { font-family: &#39;Lobster&#39;, arial, serif; }
.post-body { font-family: &#39;Lobster&#39;, arial, serif; }
</style&gt

I use the Font for h1, h3 and post-body class
If you want to change type of the font you can select from here

Demo

1. Accordion effect
2. Show and hide effect
3. CSS 3
4. Automatic add jquery
5. Different color for content
6. Different style for open and close
7. Auto Sort the title
8. Add New!! for 10 newest entry

How to use is very easy. Create Static Page .
Put the script in Html mode

<link href="http://abu-farhan.com/script/acctoc/acc-toc.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"></script>
<script src="http://www.oblo.web.id/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript"></script>

Replace www.oblo.web.id with your blog name

Demo

Below images are how to create page in blogger.

<link rel="stylesheet" href="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css" type="text/css" media="screen" />
<script style="text/javascript" src="http://scriptabufarhan.googlecode.com/svn/trunk/daftarisiv2.js"></script>
<script src="http://deconstructioncode.blogspot.com/feeds/posts/summary?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

Replace http://deconstructioncode.blogspot.com to your blog name
Demo
Title of the post have different color odd and even.
You can Change the Style by yourself.

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)

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.

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