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/

• 3 column (2 columns post and 1 column sidebar)
• Masonry plugin ready
• CSS3
• Page Navigation Ready
• Auto Read More
• Page for blogger ready (Menu bar and auto readmore)
• No image

Demo
Download

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

I add one more Blogger template collection at my Blogger Templates . This template call Accordion Template. This template not design by me but my Team.
I made this template to make it easy visitor to read and not show all long post. The script only show first post and hide others. If visitor click title bar for every post will show the post area.
Feature of This template :

1. Accordion at Post area and Sidebar
2. All new feature of Blogger (Read More, Avatar, Page list)
3. Automatic page list at menu bar
4. Modification of h1 for title(Front page h2 and Single h1)
5. Paginator 3000 for page navigation
6. Some color can change inside of Blogger Dashboard

DemoDownload

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 I used old theme, today I change my Theme. Theme is design by Choen. This theme created very quick only 3 days from PSD to html to WP.  After I received theme from choen I have to change some of my post to fit with this theme. I have to add custom field to all my posts that’s why I can’t upload directly.

I used custom field to input image, demo link and download link (my new element at post area). When I edit this theme I learn many think. Like everyone know, my previous theme are very heavy, that is because of :

1. I used automatic search img tag and put it  in thumbnail of my posts
2. Image slider also search img tag from featured posts.
3. Spy slider at my sidebar used search img in my posts also.
4. Static featured at my sidebar also use same method.
5. I used thimbthumb to reduce size of image (this can reduce but in server side have very long calculations)

From all of that think in my new theme I used custom field for image and some of static think I write down in html tag. This method can reduce server side calculations.

Thanks to Choen for this new theme

Thanks to Kang Rohman and Blog Template 4u for Continuing my Domain (www.abu-farhan.com)

Without help from Allah and then choen and kang rohman I can’t continue my blog.

That’s all about my new theme. In a few day I’ll prepared new trick and template for all of you.

Thank you for coming here please subscribe to my feed and follow my twitter

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)