Showing posts with label Blogger Template. Show all posts
Showing posts with label Blogger Template. Show all posts

Converting Wordpress themes to Blogger Templates

It's being longtime I have ripped a Wordpress theme to use in Blogger Beta. Many users ask me for wordpress theme conversion in Google talk. I thought it would be great to open a thread in Techie blogger itself , so that all my readers can give me suggestions. I can rip any existing wordpress theme to blogger template or I can customize your existing Blogger template.



Some Blogger use to demand money to rip wordpress themes to blogger templates , But I am going to do this for free. So No need to pay 10$ for any site to get your desired wordpress theme to use in Blogger. You can request conversion of any wordpress theme here via comments. If more users recommend the same theme or if I feel it to be a professional one, I will rip that wordpress theme to Blogger Beta Template.

Customizing Blogger Templates

If you have any errors in Blogger templates , then you can contact me via gtalk. I can help you to fix errors online itself.

You can contact me via Google Talk for any of these services :

  1. Ripping Wordpress themes to Blogger templates

  2. Fixing errors in Blogger Templates

  3. Making your CSS code compatible for all browsers

  4. Fixing XML or CSS errors

  5. SEO tips

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 726x15 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>

    <!--SmoothGallery Starts-->

    <link rel="stylesheet" href="http://wpthemes.blogohblog.net/wp-content/themes/Digital_Statement/js/smoothgallery/css/jd.gallery.css" type="text/css" media="screen"/>
    <script type="text/javascript" src="http://wpthemes.blogohblog.net/wp-content/themes/Digital_Statement/js/smoothgallery/scripts/mootools.v1.11.js"></script>
    <script type="text/javascript" src="http://wpthemes.blogohblog.net/wp-content/themes/Digital_Statement/js/smoothgallery/scripts/jd.gallery.js"></script>
    <!--SmoothGallery Ends-->


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' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
</b:section>

</div>

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


<b:section class='tabbertab' id='tab2' preferred='yes'>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
</b:section>
</div>

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

<b:section class='tabbertab1' id='tab3' preferred='yes'/>
</div>

</div></div>


remove this whole code.

If you need any other customization let me know..

Custom Search
Web Analytics