[Turns Tricks] Table of contents and Accordion for Blogger

Bismillah
Allahmdulillah, Alhamdulillah, Alhamdulillah
Usually we have so many posts in our blog and if we used TOC it will be very long. If we have very long TOC, it make visitors difficult to read our posts. To make it easy to read Abu Farhan made modification from previous script Table of Contents for Blogger new style and he used Accordion.
Feature of this script :

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

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.7-Turns.com/feeds/posts/summary?max-results=1000&alt=json-in-script&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.7-Turns.com with your blog name
Demo

Demo

Below images are how to create page in blogger.

Source : abu-farhan.com

Read More

what is (WOT) Web of Trust...?

Web of Trust

Web of Trust is a community-based safe surfing tool that uses an intuitive traffic-light style rating system to help Internet users stay safe as they search, browse, and shop online. The WOT add-on provides safety ratings to search results when using Google, Yahoo!, Wikipedia, and other popular sites, helping people protect their computers and personal information.

Read More

[Turns Tricks] How to Custom heading and subheading styles for Blogger

Heading and subheadings are essential for a organized blog post. By defult most blogger template has a boring heading and subheading style set up. Let's make the heading and subheadings of blogger more interesting. If you are familiar with messing with codes, you will love to see my previous examples of adding custom styles for for heading and make your own. Today I will give you some all set nice looking and background base heading and subheading styles for blogger. Keep updated for more advance and with different style heading CSS....

What is Heading/Subheading in blogger

There you go, the last line was a heading with custom styles. You should consider using them more often to get better SEO and better user interaction. You can use them by selecting the text from composer and choosing from the option shown in the image.

How to install the custom heading style

The css of each styles are below. Copy the code you choose. Then go to blgger.com and choose your blog. Go to Template > Edit HTML > Proceed. Now find </b:skin> and paste your code before </b:skin> . Save the template and your done!

The heading CSS, the talk

These are simple heading CSS with only background difference. You can choose from or create your own background pattern and replace with the background image. You can find link to background pattern gallery here.  Stay updated for more advance css and new styles.

Check out: some more cool heading/subheading css

Heading style 1

CSS for heading:

.post h2{background: url("http://4.bp.blogspot.com/-X7ttbkmWQCE/UCUoRfLo1CI/AAAAAAAAAmw/a9c156k5huA/s320/crisp_paper_ruffles.png");-webkit-box-shadow: inset 0 0 10px #8D8C8B;
-moz-box-shadow: inset 0 0 10px #8D8C8B,
box-shadow: inset 0 0 10px #8D8C8B;
padding-left:20px;}

CSS for subheading:

.post h3{background: url("http://4.bp.blogspot.com/-X7ttbkmWQCE/UCUoRfLo1CI/AAAAAAAAAmw/a9c156k5huA/s320/crisp_paper_ruffles.png");-webkit-box-shadow: inset 0 0 10px #8D8C8B;
-moz-box-shadow: inset 0 0 10px #8D8C8B,
box-shadow: inset 0 0 10px #8D8C8B;
padding-left:20px;}

Heading Style 2

CSS for heading:

.post h2{background: url("http://2.bp.blogspot.com/-KtkNgCXTHJs/UCUoRO9r4DI/AAAAAAAAAmo/aQxtR3iCA8s/s1600/carbon_fibre_big.png");-webkit-box-shadow: inset 0 0 10px #ffffff; -moz-box-shadow: inset 0 0 10px #ffffff, box-shadow: inset 0 0 10px #ffffff; padding-left:20px; color:white;}

CSS for subheading:

.post h3{background: url("http://2.bp.blogspot.com/-KtkNgCXTHJs/UCUoRO9r4DI/AAAAAAAAAmo/aQxtR3iCA8s/s1600/carbon_fibre_big.png");-webkit-box-shadow: inset 0 0 10px #ffffff; -moz-box-shadow: inset 0 0 10px #ffffff, box-shadow: inset 0 0 10px #ffffff; padding-left:20px; color:white;}

Heading Style 3

CSS for heading:


.post h2{ background: url("http://2.bp.blogspot.com/-vKsJl1CqC5g/UCUoR7AWeQI/AAAAAAAAAm4/LiRyKFe4bA8/s1600/diagonal-noise.png");-webkit-box-shadow: inset 0 0 10px #ffffff; -moz-box-shadow: inset 0 0 10px #ffffff, box-shadow: inset 0 0 10px #ffffff; padding-left:20px; }

CSS for subheading:


.post h3{ background: url("http://2.bp.blogspot.com/-vKsJl1CqC5g/UCUoR7AWeQI/AAAAAAAAAm4/LiRyKFe4bA8/s1600/diagonal-noise.png");-webkit-box-shadow: inset 0 0 10px #ffffff; -moz-box-shadow: inset 0 0 10px #ffffff, box-shadow: inset 0 0 10px #ffffff; padding-left:20px;

Make your own blogger heading style

Now that you saw all the codes, you can create your own. For the url, change it to any pattern you wish. You can find patterns to download and upload to get the link at subtlepatterns.com. If the bakground is black, add color:white; to make the text white and change the inset color to #ffffff. And if you think you can handle little more, you might want to add a custom font as well. Otherwise copy everything and replace with the link to create similar style heading to add. Have fun and happy blogging :)

Read More