Make Your Sitemap or Your Content Looks Professional

This is a widget to display content or blog content. This widget displays all of your post, category wise and actually save time. This widget on the adoption of the Abu-Farhan and then to conversion. This widget will also tell visitors that a new post and old. This widget has been modified CSS to make it neat and in accordance with the look of your blog.

Follow the steps below to create a TOC page for your blog:

• Go To Blogger > Design > Edit HTML
• Back up your template
• Search for ]]</b:skin>
• And just above it paste the CSS code below,

/*--------IB TOC-----*/

.judul-label{

background-color:#E5ECF9;

font-weight:bold;

line-height:1.4em;

margin-bottom:5px;

overflow:hidden;

white-space:nowrap;

vertical-align: baseline;

margin: 0 2px;

outline: none;

cursor: pointer;

text-decoration: none;

font: 14px/100% Arial, Helvetica, sans-serif;

padding: .5em 2em .55em;

text-shadow: 0 1px 1px rgba(0,0,0,.3);

-webkit-border-radius: .5em;

-moz-border-radius: .5em;

border-radius: .5em;

-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);

-moz-box-shadow: 1px 1px 4px #AAAAAA;

box-shadow: 0 1px 2px rgba(0,0,0,.2);

color: #e9e9e9;

border: 2px solid white !important;

background: #6e6e6e;

background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));

background: -moz-linear-gradient(top, #888, #575757);

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');

}

.data-list{

line-height:1.5em;

margin-left:5px;

margin-right:5px;

padding-left:15px;

padding-right:5px;

white-space:nowrap;

text-align:left;

font-family:"Arial",sans-serif;

font-size:12px;

}

.list-ganjil{

background-color:#F6F6F6;

}

.headactive{

color: #fef4e9;

border: 2px solid white !important;

background: #1C8DFF;

background: -webkit-gradient(linear, left top, left bottom, from(#9dc2e7), to(#438cd2));

background: -moz-linear-gradient(top, #9dc2e7, #438cd2);

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dc2e7', endColorstr='#438cd2');

}

• Save your template and now create a New Page (not a new Post).
• Give Your new Page a relevant title like “My Contents” and then in the EDIT HTML mode of your blogger editor paste the code below,

UPDATED CODE:

<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js">

</script>

<script src="http://www.yourname.yourdomain.com/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>

Now simply replace http://www.yourname.yourdomain.com with your Blog URL and hit save. View your new page to see a Beautiful  Contents with a nice drop down effect.

To see how it looks, please click on this link.

That's it!

Do you Like this Post ?

Get Free Email Updates Daily!	Follow us!

Posted in: How to,Tips,Trick,Web,Widget Sitemap