Wednesday, September 22, 2010

Digital Statement Blogger Template

One of my Blog reader , requested me to convert Digital Statement wordpress theme to blogger. The wordpress theme was developed by Blog Oh Blog. This is a professional theme with lots of new features available.

Main features of this template:

  • Header with a search widget on right :
  • This is the code i have used
    <div id=’searchbox’> <form action=’/search’ id=’searchform’ method=’get’> <input class=’swap_value’ id=’s’ name=’q’ type=’text’ value=”/> <input alt=’Search’ id=’go’ src=’http://i624.photobucket.com/albums/tt327/digitalstatement/go.gif’ title=’Search’ type=’image’/> </form> </div>
    you can see this code if you check expand widgets box in layout page. If you want to show your own adsense search box then just replace this code with your adsense search box code.
  • Two navigation widget available.
  • This is the code I have used
    <div id=’nav’> <ul> <li class=’page_item’><a href=’http://techieblogger.com/’>Home</a></li> <li class=’page_item’><a href=’http://www.wordpress.org’ title=’Wordpress’>Wordpress</a></li> <li class=’page_item’><a href=’http://www.blogger.com’ title=’Blogger’>Blogger</a></li> <li class=’page_item’><a href=’http://www.techieblogger.com’ title=’Taking Blogger to Next Level’>Techie Blogger</a></li> </ul><div class=’clearfloat’/> <ul id=’cat’> <li class=’cat-item’><a href=’http://www.techieblogger.com’ title=’View all posts filed under Blockquotes’>admin</a></li> <li class=’cat-item’><a href=’http://www.techieblogger.com/2008/07/page-navigation-hack-for-blogger.html’ title=’Page Navigation Widget’>Numbered Page navigation</a></li> <li class=’cat-item’><a href=’http://www.techieblogger.com/’ title=’View all posts filed under Lists’>Author</a></li> </ul> </div></div>
    replace all the links with your own links. If you are satisfied with just one navigation widget and want to show adsense 726×15 ad link unit then you need to edit the second navigation code with this.
    <ul id=’cat’> < —- adsense code here — > </ul>
  • Related Posts Widget with custom CSS is included in this template with print option.
  • Comments with unique CSS style and showing author comments in different style is included.
  • If you want to show your own avatar then search for this code in the edit HTML tab pge with expand widgets box checked. http://www.gravatar.com/avatar.php?gravatar_id=ef6eb8d01747fd1846efd0227517ca1c&rating=R&size=36 replace that url with your own avatar url.
  • Two Tabbed Navigation Widget is included in Sidebar. If you want to change the titles of the tabbed navigation , then search for this tag in EDIT HTML page.
  • <div class=”tabbertab” title=”Recent Post“> similarly you can change the titles of other widgets also.
  • Three column footer section is available in this template.
  • I haven’t included the featured post hack in this template , because most of the blogger users won’t use that. if you want to add that featured post widget then add the following java script above </head>

What’s Next ?

With So many new features available , hope everyone will like this template.
Download | Demo
Guys I am giving this template as free so please don’t remove the footer credits
Hope you Guys will like this template.. if you are really impressed by my hard work then please make some donations.

See you soon with a new template.
update :
if you want to remove one of the tabbed navigation Widget then do the following step.
Go to Layout page of your template and then navigate to EDIT HTML sub page. There search for the following tag
<div id=’tab’>
<div class=’tabber’>

<div class=’tabbertab’ title=’Archives’>

<b:section class=’tabber’ id=’tab1&#8242; preferred=’yes’>
<b:widget id=’BlogArchive1&#8242; locked=’false’ title=’Blog Archive’ type=’BlogArchive’/>
</b:section>

</div>

<div class=’tabbertab’ title=’Categories’>

<b:section class=’tabbertab’ id=’tab2&#8242; preferred=’yes’>
<b:widget id=’Label1&#8242; locked=’false’ title=’Labels’ type=’Label’/>
</b:section>
</div>

<div class=’tabbertab’ title=’Tag Cloud’>

<b:section class=’tabbertab1&#8242; id=’tab3&#8242; preferred=’yes’/>
</div>

</div></div>
remove this whole code.
If you need any other customization let me know..

No comments:

Post a Comment