Showing posts with label Blog. Show all posts
Showing posts with label Blog. Show all posts

4/11/12

Releasing Thesis Blogger Template

Thesis is the popular and worthy WordPress theme provided by DiyThemes. I am very happy to announce that, I've successfully converted Thesis WordPress theme for all blogger users for absolutely free. Thesis Blogger Template have 2 columns, where you can place many widgets and Ads.

View Demo




4309
Times Downloaded

I've converted it into blogger template based on the theme of ShoutMeloud.

Features of Thesis Template:

It has stylish 2 columns, one is post body and second one is sidebar, where you can put many widgets and Ads. In the bottom of this template, there is 3 rows as well.


This template consists of Read More hack with automatic thumbnail to make the template more professional.


Readers can easily comment on any post by clicking Add your comment button which consists on Home Page. Also, you can view, how many comments consists in each posts.


It has 2 navigation bar on the top of the template where you can add the main link to your blogs post or categories.


On the bottom of the template there is 3 rows where you can place option widgets like About Me, Categories and so on.


It has the most demanded Blogger hack i.e. Page navigation on the bottom of each page.

Customizations

Top Menu Configuration

To customize Top Menu, find the following code in your template and place your own links.
<div id='nav'>
<ul id='secnav'>
  <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
  <li><a href='http://hacktutors.info/2009/08/contact-me.html'>Contact Us</a>
    <ul class='children'>
    </ul>
  </li>
  <li><a href='http://www.hacktutors.info/p/our-in-touched-bloggers.html'>Bloggers</a></li>
  <li><a href='http://hacktutors.info/p/link-to-us.html'>Link to Us</a></li>
  <li><a href='http://hacktutors.info/search/label/Download'>Download</a>
    <ul class='children'>
      <li><a href='#'>Drop</a></li>
    </ul>
  </li>
  <li><a href='http://www.hacktutors.info/search/label/Page%20Rank'>Rank</a></li>
  <li><a href='#'>Join HackTutors</a>
    <ul class='children'>
      <li><a href='#'>Advertise</a></li>
    </ul>
  </li>
</ul>

Adsense Search Customization

To customize the search form on the top right side of the template, find the following code and replace it with your own adsense search code.

<div id='google-search'>
  <form action='http://www.shoutmeloud.com/search' id='cse-search-box'>
    <div>
      <input name='cx' type='hidden' value='partner-pub-6601904697443775:73g5y9j0de1'/>
      <input name='cof' type='hidden' value='FORID:10'/>
      <input name='ie' type='hidden' value='ISO-8859-1'/>
      <input name='q' size='30' type='text'/>
      <input name='sa' type='submit' value=''/>
    </div>
  </form>
  <script src='http://www.google.com/cse/brand?form=cse-search-box&amp;lang=en' type='text/javascript'/> </div>
Sub Navigation Bar

To customize sub navigation bar, search for the following code code and replace the link with your own.

<div id='categories'>
  <ul>
    <li><a href='http://hacktutors.info/search/label/Blogging'>Blogger tools</a> </li>
    <li><a href='http://www.hacktutors.info/search/label/Graphic'>Graphics</a>
      <ul class='children'>
        <li class='cat-item cat-item-149'><a href='#'>SEO</a> </li>
      </ul>
    </li>
    <li><a href='http://www.hacktutors.info/search/label/Web%20design'>Web Design</a>
      <ul class='children'>
        <li><a href='http://www.hacktutors.info/search/label/Social%20Media'>Social Media</a> </li>
      </ul>
    </li>
    <li><a href='http://www.hacktutors.info/search/label/Make%20money%20online'>Make Money Online</a> </li>
    <li><a href='http://www.hacktutors.info/search/label/Blogger%20Help'>Blogger Help</a> </li>
  </ul>
</div>
Header Logo and Banner

Search for the following code in your template to replace the logo. There is the 468X60px banner on the top right, you can customize that with your banner URL.

<div id='joelogo'>

<a href='http://www.hacktutors.info'><img class='logo' src='http://4.bp.blogspot.com/_b0xJ7qk6DTc/TGdrjNWW8cI/
AAAAAAAAA1Q/mZxvQIRDDO0/s1600/Thesislogo+copy.png
'/></a>

  <div id='joead2'>
<a href='http://www.hacktutors.info' target='_blank'><img border='0' src='http://3.bp.blogspot.com/_b0xJ7qk6DTc/TGdcVUncDfI/
AAAAAAAAA0o/T6te7Q6DjS8/s1600/Bigbanner.gif
'/></a>
 </div>
</div>

Placement of Google Ads below the Sub Navigation bar

You can get more ad clicks by placing the Google Ad Link Units below the sub navigation bar. To do like that, search for the following code and place your link unit code just below the following code.

<div id='joead3'>

Your ad code goes here.

</div>

Customizing Facebook Like Button

There is the small Facebook like button on the top right in each blog posts. To customize that, Search for the following code in your Template:

<div class='post-header-line-1'>

<div style='float:right;padding:4px;'>

<iframe allowTransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.hacktutors.info&amp;layout=button_count&amp;
show_faces=false&amp;width=70&amp;action=like&amp;font=arial&
amp;colorscheme=light&amp;height=21' style='border:none; overflow:hidden; width:70px; height:21px;'/>


</div>

Replace above red codes with the following:

(Code Updated)


<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;
width=64&amp;action=like&amp;
font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:64px; height:40px;'/>

Now, you are ready to use this template! Enjoy the new Thesis Blogger Template. If you have any problem regarding this template, you are free to ask me. You can suggest me any thing that you are thinking to do new in this template.

I'll update this template with more new feature. Please subscribe to our feed using your Email address to get the new updated template direct to your inbox.

Releasing Platinum Blogger Template

Once again I'm back with one new magazine style Blogger Template named "Platinum". It look very professional and definitely suits on your blog. Platinum Blogger Template has many features that are most demanded by Blogger users. Thesis Blogger Template is also the greatest template that I've made. I guess you'll love it after viewing the Demo.
Download Platinum Blogger Template

View Demo

Download Platinum Blogger Template

3828 Times Downloaded

I converted Platinum WordPress theme into Blogger Template. Originally, Brian Gardner designed it and I converted it for all Blogger users and make it available for absolutely free. 

Let see what I have added the cool feature on this template:

JQuery Drop Down Menu Bar



On the top of the page, it consists of awesome Drop down menu with JQuery effects. When you hover your mouse to these menus, it will drop soothly to downward direction.

JQuery Featured Post widget


With this widget, you can show the most featured post of your blog with image thumbnail and summary text. However, featured post widget is only visible on HomePage to make it look more professional. 

Automatic Read More with Thumbnail



After you've written a post, you don't need to worry about the Jump links that blogger recently announced. Just you have to create a post a publish it! Your reader can easily view your post with attractive thumbnail on the left side and Ream More link on the right side.

Page Navigation



There was an error on the Blogger's default pager links. So, I installed Page Navigation hack for it to make it easy to turn the page of your blog easily.

There is many more missing that I cannot mention it here. In fact this template have more flexible where you can add more widgets on the right sidebar and there widget on the footer.

Customizations

Now, let's do some customization to fit it on your blog.

Top Menu Configuration

Find the following code on your template and replace URL(s) with your own.

<div id='nav'>
<ul class='nav superfish'>
<li class='home'><a class='home-link' expr:href='data:blog.homepageUrl'>Home</a></li>
<li class='page_item page-item-70'><a href='#'>Sample Page</a>
  <ul class='children'>
    <li class='page_item page-item-17'><a href='#'>Sub Page 1.1</a>
      <ul class='children'>
        <li class='page_item page-item-25'><a href='#'>Sub Page 2.1</a>
          <ul class='children'>
            <li class='page_item page-item-31'><a href='#'>Sub Page 3.1</a></li>
            <li class='page_item page-item-33'><a href='#'>Sub Page 3.2</a></li>
          </ul>
        </li>
        <li class='page_item page-item-27'><a href='#'>Sub Page 2.2</a></li>
        <li class='page_item page-item-29'><a href='#'>Sub Page 2.3</a></li>
      </ul>
    </li>
    <li class='page_item page-item-375'><a href='#' title='Page Layouts'>Page Layouts</a>
      <ul class='children'>
        <li class='page_item page-item-377'><a href='#'>Content/Sidebar</a></li>
        <li class='page_item page-item-379'><a href='#'>Sidebar/Content</a></li>
        <li class='page_item page-item-387'><a href='#'>Full Width Content</a></li>
      </ul>
    </li>
    <li class='page_item page-item-62'><a href='#'>Page Templates</a>
      <ul class='children'>
        <li class='page_item page-item-112'><a href='#'>Archive Page</a></li>
        <li class='page_item page-item-227'><a href='#'>Blog Page</a></li>
      </ul>
    </li>
    <li class='page_item page-item-213'><a href='#'>Contact Page</a></li>
    <li class='right rss'><a href='#'>Posts</a><a href='#'>Comments</a></li>
  </ul></div>
</div>
<div id='subnav'>
  <div class='wrap'>
    <ul class='nav superfish'>
      <li class='cat-item cat-item-4'><a href='#'>Category #1</a></li>
      <li class='cat-item cat-item-5'><a href='#'>Category #2</a></li>
    </ul></div></div></div>

Remove # and place your URL.

Featured Post

Go to Design > Page Element. You'll found the widget on the top named "Featured Post". Edit that widget and replace all URL and text with your own.

Note: You can remove that widget if it doesn't fits on your blog.

Logo

To change your own logo find the following code on your template and replace the image URL with your own logo URL,

  <h1 id='title'><a expr:href='data:blog.homepageUrl'><img src='http://4.bp.blogspot.com/_b0xJ7qk6DTc/
THvRqkecH1I/AAAAAAAAA64/EgNa1OjtlQQ/s1600/logo.png
'/></a></h1>

Now finally, you are ready to use Platinum Blogger Template to your blog. If you have any problem regarding this template feel free to ask. You feedback is highly appreciated. You can share your opinion about this new wordpress converted Blogger Template. I hope you like this template.

We'll create more Blogger Template like this. Subscribe to this blog to get more awesome template direct to your inbox.

Releasing Flash News Blogger Template

nce again, I'm back with the new Blogger Template named Flash News. Flash News Blogger Template have 2 columns with the clean layouts and professional design. Flash News Blogger Template suits on any blog. It loads faster with comparison to other web templates. I made Flash News Blogger Template available for freefor all blogger users!

View Live Demo



2874 Times Downloaded

Main Features
Flash News Blogger Template has all the features that has been taken out through the official Blogger and Blogger resources. I converted it into Blogger Template, originally it is WordPress theme designed by WooThemes.

Stylish Menu Bar
JQuery Menu Bar

Th top Menu Bar is based on JQuery which is professional designed and with special hover effects.

Featured Post Widget
Featured Post Widget

The Flash News Blogger Template contains featured post widget which is entirely different from other.

Automatic ReadMore with Image Thumbnails

Automatic read more makes easy to all of your viewers to view your post in summary with relevant image. Continue Reading link contains on the left side and the labels contains on the right side of the post .

Page Navigation

Instead of Older Post, Newer Post link there is a navigation which makes easy to scroll and jump within the page to page.

3 Footer Widgets

You can place the three or more widgets on the footer. So, you can have a maximum widget on this template.

Configurations
Lets fit it on your blog! Flash News is very easy to use.

Top Menus Configuration
Find the following code in your template and replace the URLs with your own:

<ul class='nav1'>
       
<li><a expr:href='data:blog.homepageUrl'><span>Home</span></a></li>

<li><a href='http://www.hacktutors.info/2009/08/contact-me.html'><span>Contact Me</span></a></li>

<li><a href='http://www.hacktutors.info/p/our-in-touched-bloggers.html'><span>Blogs</span></a></li>

<li><a href='http://www.hacktutors.info/2010/08/color-picker-tool-for-web-developer.html'><span>Tools</span></a></li>

<li><a href='http://hacktutors.info/p/link-to-us.html'><span>Link to Us</span></a></li>

<li><a href='http://www.hacktutors.info/p/blog-page.html'><span>Archive</span></a></li>

         </ul>

Sub Menu Configurations
Find the following code in your template and replace with your own:

<ul id='nav'>
  <li class='cat-item cat-item-3'><a href='#'>Asides</a> </li>
  <li class='cat-item cat-item-4'><a href='#'>Category Three</a> </li>
  <li class='cat-item cat-item-5'><a href='#'>Category Two</a>
    <ul class='children'>
      <li class='cat-item cat-item-11'><a href='#'>Two Point Two</a> </li>
    </ul>
  </li>
  <li class='cat-item cat-item-6'><a href='#'>CatOne</a>
    <ul class='children'>
      <li class='cat-item cat-item-13'><a href='#'>Another SubCat</a> </li>
      <li class='cat-item cat-item-7'><a href='#'>CatOne Sub</a>
        <ul class='children'>
          <li class='cat-item cat-item-9'><a href='#'>Multi level</a> </li>
        </ul>
      </li>
      <li class='cat-item cat-item-10'><a href='#'>Subber</a> </li>
    </ul>
  </li>
  <li class='cat-item cat-item-8'><a href='#'>Featured</a> </li>
  <li class='cat-item cat-item-12'><a href='#'>Video</a> </li>
</ul>

Featured Post Widget

In default, featured post widget may not appear. To make it work go to Design > Page Element. Click Add a Gadget just between "Blog Posts" and "Header" widget as shown below:


Then click HTML / JavaScript and add the following code in the box:

<div class="box">
  <div id="arrows">
   <a id="prev2" href="#">
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb5-bFjFPq3mKyK0K3K5BAx9bq7HWHYfimdYykl9cHcu74QcioPUjdKyplb5CcBy7VyBUmYgXNnrY86Jt6G5rHMjjEMIv_f5a4Y-CyF890Ibm0ut93k31cfk4qUacSbYBy2KasCxQBljZO/s1600/left-bar.gif&quot;" alt="" class="fl" /></a> <a id="next2" href="#">
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjRP1xcLbBBjjYjrUmi97QM1aybaBbw8Ou8C8Kwiekou2q7yX02UA9fgvpAZN5JTworegXJ29Idh4zGeKUx5U5-k7VsCvubt8zxjDMuqe1-ne5dd0sWPPbQHYcBUfnAoauJVnCqfji4cWM/s1600/right-bar.gif" alt="" class="fr" /></a> </div>
  <!--/arrows -->

  <div class="featuredpost">
    <div class="featureditem" >
      <div class="col4">
    
       <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjI79rhrQ_n3Wp7kEgfWDOGo7hibUnFDNjxLfzAo12iJQE8IV_ZPf1hZDt6uSIHaIfteiwZkvbkNK9LdR6GmbMbS9YU06l9MakJnOkXuo9F13A2ZxujytUb9efxxQ8z6bjjW0kEYQ3JPCD/s1600/thumb.jpg" /> </div>
    
      <div class="col5">
        <h2><a href="#">Title 1</a></h2>
        <p class="content">Title1's short summary Goes Here</p>
      
        <p class="reading"><a href="#">Continue reading...</a></p>
      </div>
      <!--/col5 -->
    
    </div>
    <div class="featureditem" style='display:none'>
      <div class="col4">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT7mKypONU0BYUr7kBlkNgC1SG98slelXlhGK5G3N53N5-9H7uRfPTP9zYYRQgcEHU1brr67oP4z5_dk5gWVRYiFNAekb4sphl9bkfr3qJ2Dy8GhPFP0a2fhzWnhEpM6YzOWoT1SxQ8JM/s400/Platinum+Blogger+Template.JPG" /> </div>
      <div class="col5">
        <h2><a href="#">Title 2</a></h2>
        <p class="content">Title2's short summary Goes Here</p>
        <p class="reading"><a href="#">Continue reading...</a></p>
        <p></p>
      </div>
      <!--/col5 -->
    
    </div>
    <div class="featureditem" style='display:none'>
      <div class="col4">
    
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjneA1HluLae8pWPKldnOSOX-jvkEHRhhOwNIgxlC3fl6tVvAxieAN1_iGq54X9aV6SNI0wf9LmvvwA9tDU09rzyAczL51AphXFRxxP-6OGaLgPYcTqVk-WLMKrvN2GUojJJpkR9433N6q8/s1600/thumb2.jpg" /> </div>
      <div class="col5">
        <h2><a href="#">Title 3</a></h2>
        <p class="content">Title1's short summary Goes Here</p>
        <p class="reading"><a  href="#">Continue reading...</a></p>
        <p></p>
      </div>
      <!--/col5 -->
    
    </div>
  </div>
  <!--/featuredpost -->

</div>
<!--/box -->

You can place any image size, it automatically resizes and fits on the featured post widget. Here is the instruction how to customize featured post widget:

There is 3 content in this widget, replace each Blue color URL with your own Image URL.

Replace # with the post URL.

Replace the Green color text with the title of each featured post.

And replace Pink color text with the short summary of the each featured post.

Finally, save the widget!

Now, you are ready to use Flash News Blogger Template on your blog. I hope you loved this template. Your suggestions and feedback is highly appreciated!

Feel free to ask if there is any confusing and problems. I'm always ready to help you!
by hacktutors.info