Ebloger Templates

Wednesday, October 20, 2010 Anonymous

As a designer when we get a new logo designing project we tend to search for logo inspiration to brush up our creativity and also to develop a unique logo which ain’t seen anywhere. Logo are the ideal product to tag your presence and to brand your product. So, I thought of coming up with an inspirational logo’s to help designer to create more creative logo, which is all about branding.

Fire Embrion

Power Providers

American Architects Center

Read more...

As a blogger, we do love to maintain a personal blog to share their thoughts irrespective of a topic and WordPress is one of the best platform to have a personal blog. So, this post is about the best of WordPress personal blogging theme that are available for FREE download. The list has a mixed formation of minimalistic theme to designer theme to help you choose a better theme for your personal blog.

15 killer wordpress personal blog themes

Elevate – Demo | Download

Modernist – Demo | Download

My Diario – Demo | Download

Pure 11 – Demo | Download

Elegance – Demo | Download

Desk Space – Demo | Download

Vostok – Demo | Download

Minicard – Demo | Download

Tiny Studio – Demo | Download

Manifesto – Demo | Download

Rio – Demo | Download

Zexee – Demo | Download

Notepad – Demo | Download

Smooth – Demo | Download

Mono Columnist – Demo | Download

If you have any template suggestion under personal theme category, share your template suggestions with us. In the meantime you can also check out Free Premium WordPress Theme Collection.

Read more...

Its been a while I was planning to release a simple elegant Blogger template and today I got some time to release it for the Blogger fans. The template name is gonna be Royale Note, which is a simple elegant blogger template based on the inspiration from a Tumblr theme Royal Ribbon. I have made this template keeping in mind of the personal blogging template. So let have a live demo and look at the template.

Live Demo | Download

Blogger template specifications

One column
Elegant design
Page navigation navbar
Social sharing buttons

If you have any trouble in installing this template, drop in your comments here and also share your views about this template here.

Read more...

Blogger is not more a blogging platform for beginners, there are lot more can be made with a blogger / blogspot blogs. Featured content sliders are seen in many Wordpress blogs and when coming to blogger it is certainly not much seen. Here I am going to teach you, how to add a featured content slider to your blogger / blogspot blogs.

Step 1: Let get into the coding part. Here I just made a CSS stylesheet, to make the installation pretty simple. So all you need to do is just copy the below code and paste it after

<head>

1<link href='http://sites.google.com/site/bloggermintcom/style.css' rel='stylesheet' type='text/css'/>

Step 2: If you need to change the dimensions of the slider you can use this step instead of step 1. Search for the code
]]></b:skin>
Now the place the below code before ]]></b:skin>

01 #featured{

02 width:400px;

03 padding-right:250px;

04 position:relative;

05 border:5px solid #ccc;

06 height:250px;

07 background:#fff;

08 }

09 #featured ul.ui-tabs-nav{

10 position:absolute;

11 top:0; left:400px;

12 list-style:none;

13 padding:0; margin:0;

14 width:250px;

15 }

16 #featured ul.ui-tabs-nav li{

17 padding:1px 0; padding-left:13px;

18 font-size:12px;

19 color:#666;

20 }

21 #featured ul.ui-tabs-nav li img{

22 float:left; margin:2px 5px;

23 background:#fff;

24 padding:2px;

25 border:1px solid #eee;

26 }

27 #featured ul.ui-tabs-nav li span{

28 font-size:11px; font-family:Verdana;

29 line-height:18px;

30 }

31 #featured li.ui-tabs-nav-item a{

32 display:block;

33 height:60px;

34 color:#333; background:#fff;

35 line-height:20px;

36 }

37 #featured li.ui-tabs-nav-item a:hover{

38 background:#f2f2f2;

39 }

40 #featured li.ui-tabs-selected{

41 background:url('http://i47.tinypic.com/6jojr4.jpg') top left no-repeat;

42 }

43 #featured ul.ui-tabs-nav li.ui-tabs-selected a{

44 background:#ccc;

45 }

46 #featured .ui-tabs-panel{

47 width:400px; height:250px;

48 background:#999; position:relative;

49 }

50 #featured .ui-tabs-panel .info{

51 position:absolute;

52 top:180px; left:0;

53 height:70px;

54 background: url('http://i50.tinypic.com/11rgghl.jpg');

55 }

56 #featured .info h2{

57 font-size:18px; font-family:Georgia, serif;

58 color:#fff; padding:5px; margin:0;

59 overflow:hidden;

60 }

61 #featured .info p{

62 margin:0 5px;

63 font-family:Verdana; font-size:11px;

64 line-height:15px; color:#f0f0f0;

65 }

66 #featured .info a{

67 text-decoration:none;

68 color:#fff;

69 }

70 #featured .info a:hover{

71 text-decoration:underline;

72 }

73 #featured .ui-tabs-hide{

74 display:none;

75 }

Step 3: This step involves the featured content structure. Search for the code
<div id=’content-wrapper’> and place the below code just before
<div id=’content-wrapper’>

01 <div id='featured'>

02      <ul class='ui-tabs-nav'>

03          <li class='ui-tabs-nav-item ui-tabs-selected' id='nav-fragment-1'><a href='#fragment-1'><img alt='pic1' src='http://i49.tinypic.com/e1aohv.jpg'/><span>Install Mac OS X on Intel/AMD PC using iATKOS v7</span></a></li>

04          <li class='ui-tabs-nav-item' id='nav-fragment-2'><a href='#fragment-2'><img alt='blogger' src='http://i438.photobucket.com/albums/qq108/fooble11/image2-small.jpg'/><span>How to remove "showing post with label" in Blogger</span></a></li>

05          <li class='ui-tabs-nav-item' id='nav-fragment-3'><a href='#fragment-3'><img alt='buzz' src='http://i438.photobucket.com/albums/qq108/fooble11/new1.jpg'/><span>How to add Google Buzz to Blogspot blog</span></a></li>

06         <li class='ui-tabs-nav-item' id='nav-fragment-4'><a href='#fragment-4'><img alt='chat' src='http://i50.tinypic.com/34xfg4m.jpg'/><span>Chat live with your blog visitors using Yahoo Pingbox</span></a></li>

07      </ul>

08      

09      <div class='ui-tabs-panel' id='fragment-1' style=''>

10         <img alt='mac' src='http://i47.tinypic.com/rsbi80.jpg'/>

11 <div class='info'>

12          <h3><a href='#'>Install Mac OS X on Intel/AMD PC using iATKOS v7</a></h3>

13          <p>Description goes here, this is just a test description....<a href='http://www.bloggermint.com/2010/02/install-mac-os-x-on-intelamd-pc-using.html'>read more</a></p>

14          </div>

15      </div>

16      

17      <div class='ui-tabs-panel ui-tabs-hide' id='fragment-2' style=''>

18          <img alt='' src='http://i50.tinypic.com/33kprh5.jpg'/>

19          <div class='info'>

20          <h3><a href='#'>How to remove "showing post with label" in Blogger</a></h3>

21          <p>Description goes here, this is just a test description....<a href='#'>read more</a></p>

22         </div>

23     </div>

24      

25      <div class='ui-tabs-panel ui-tabs-hide' id='fragment-3' style=''>

26          <img alt='' src='http://i47.tinypic.com/2191lqt.jpg'/>

27          <div class='info'>

28          <h3><a href='#'>How to add Google Buzz to Blogspot blog</a></h3>

29          <p>Description goes here, this is just a test description....<a href='#'>read more</a></p>

30          </div>

31      </div>

32      

33      <div class='ui-tabs-panel ui-tabs-hide' id='fragment-4' style=''>

34          <img alt='' src='http://i48.tinypic.com/10pwp3o.jpg'/>

35          <div class='info'>

36          <h3><a href='#'>Chat live with your blog visitors using yahoo</a></h3>

37          <p>Description goes here, this is just a test description....<a href='#'>read more</a></p>

38          </div>

39      </div> </div>

Replace the default image URL with your image URL. The bigger image dimension is 400 * 250 and for smaller its 80 * 50. Do insert your image with these dimensions, to make it look better. Also replace the text and link with your info.
Step 4: Now we need to initialize a script to play the slide show. For that we use this script. Place the below script just after <head>

01 <script type='text/javascript'>

02 $(document).ready(function(){

03 $("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);

04 $("#featured").hover(

05 function() {

06 $("#featured").tabs("rotate",0,true);

07 },

08 function() {

09 $("#featured").tabs("rotate",5000,true);

10 }

11 );

12 });

13 </script>

Step 5: This is an optional step, if your blog already includes the jQuery and jQuery UI libraries. If not, follow this instructions. Copy the code below and paste it after <head>

1 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

2 <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js' type='text/javascript'/>

You are done, check to see the effect. If you have any troubles in executing this technique, drop in your comments. Click here to see the live demo

Read more...

Saturday, October 9, 2010 Anonymous

We all know how annoying it can be sometimes to have to scroll all the way back to the top of a page after reading a long blog post and a long list of useful comments. Just being able to click a link to take us straight back to the top is much easier.

Some blogs have added them to the bottom of sidebars, some have added them to footers if they have them. The easiest way to add the link is to place it so that it appears at the bottom of each page just above the standard Blogger navigation links to Newer Posts, Home and Older Posts.

It is simply a case of adding a link back to the header to the template code:

<p><a href='#header'>Top of Page</a></p>

Before you do, download the full template to keep it safe in case of problems then expand the widgets so that you can find the following section of code:

</b:loop>
<data:adEnd/>
</div>

<b:include name='nextprev'/>

<b:include name='feedLinks'/>

To find this use your browser’s search/find (CTRL+F) to look for nextprev. The one you want is the second one as shown above. (The first is the includable which is used to make nextprev work.) Then add the link as shown in red.

</b:loop>
<data:adEnd/>
</div>
<p><a href='#header'>Top of Page</a></p>

<b:include name='nextprev'/>

<b:include name='feedLinks'/>

Click Preview to make sure that all is well and if so Save the template.

You may have to make one or two tweaks to achieve the correct layout. For instance in the illustration above, which is taken from the WP Premium Red template there was no space above or below the link. Surrounding the paragraph with breaks brought about the above layout.

<data:adEnd/>
</div><br/><br/>
<p><a href='#header'>Top of Page</a></p><br/><br/>

<b:include name='nextprev'/>

Adding a class and styles could have been used instead, but this was much easier and requires less code.

Occasionally, as in the template used for this blog, '#header' may not take you quite to the top. This is because something, such as a navigation bar has been added above the header. The solution is to use '#header-wrapper' instead:

<p><a href='#header-wrapper'>Top of Page</a></p>

That takes you right to the top of the page and includes the navigation, which is probably what your reader was trying to reach in the first place.

You can, of course change the wording of the link as you wish. For instance Jump to Top, Return to Top or just Top will do as long as it is clear to your reader.

If you prefer to add the link to the sidebar or footer the format is basically the same and the format and styling are up to you as long as it is right for your blog design.

Read more...

Blogger has now taken the Google search gadget out of draft and added it to the list of gadgets you can add to your blog sidebars. This means you can use Add a Gadget to add and configure it instead of having to set it up in Google Custom Search, then copy the code into an HTML/JavaScript gadget to insert it the blog.

In the Configure Search Box window you can choose whether you want your readers to be able to search just your blog, the whole Web, pages you have linked to or the sites in your Blog Roll and link lists. Or, perhaps, all of them.

The choice is yours, as is the title. You may want to change it from the default “Search This Blog” to whatever best suits your requirements.

Clicking on “Save” when you have made your choices will add the gadget using your blog’s style and colours. So you will no longer need to bother about styling it to match the blog.

Now, in case you are wondering why the search choices are listed under tabs it is because the search results will open in tabs in your blog and will be styled to suit the look and feel of your blog. You can see an example here on Google’s Ajax APIs Blog.

A word of caution. If you have not made your blog public so that it can be indexed by search engines you will be given a warning notice. If you continue and click save, the gadget will be added but may not appear in your sidebar until you go to Setting>Basic and change the selection next to “Let search engines find your blog” to Yes.

Once installed you will have a custom search engine which, because it uses the Ajax Search APIs, will be constantly updated as you change or update your link lists and Blog Roll. And, best of all, the results will be inline and closely integrated with your blog.

The only gripe I have is that you cannot do this for AdSense for Search. So you will still have to configure AdSense for Search yourself and copy the code to the HTML/JavaScript gadget. Let’s hope that Blogger introduces an AdSense version soon.

Read more...

Friday, October 8, 2010 Anonymous

Blogger is constantly improving the way that it works in order to give us a better service. This is great and it means that users can get the best performance out of their Blogger blogs. Unfortunately it does cause problems for those of us who choose to make our blogs a little more individual by using third party templates.

Some of these problems include the inability to save the template once it is uploaded because the dreaded and totally unfathomable BX error window pops up and leaves a message that no one can understand.

Sometimes the template starts to save and you confirm that you want to replace the widgets in the list. Then along comes the message:

The new widget id "Recent-Posts-Widget2" is invalid for type: Feed or
The new widget id "ads2" is invalid for type: HTML
or
The new widget id "search" is invalid for type: HTML

and nothing seems to solve this.

So, let’s look at a cure.

The Invalid For Type Error

First, the invalid for type error. This is caused because template designers like to give their widgets ids which tell you exactly what they are. This used to work and it was a good idea as it told you exactly what the next section of code was for. In the recent past I successfully uploaded a template with ids of this sort. I would not be able to upload this template again without correcting the widget ids.

Before you attempt to upload a new template it is best to open the XML template in a good text editor, preferably with a search function. Search for widget id and check that the widget id matches the type every time.

<b:widget id='Profile1' locked='false' title='About Me' type='Profile'>
or
<b:widget id='Feed2' locked='false' title='Recent Comments' type='Feed'>
or
<b:widget id='HTML11' locked='true' title='Search' type='HTML'>

If it does not match then change it and if there is more than one of a type add a number, with no gap between the id and number. Remember to give each id of the same type a unique number or Blogger will give you another error message that you cannot have two of the type with the same number.

If you successfully uploaded the template before you changed the ids then as you get each "invalid for type" error message you can just use your browsers search/find function to look for the incorrect id and change it to match the type, click save and confirm if asked and hope that no more errors pop up.

I successfully uploaded the Daya Earth template to a test blog after correcting the widget ids in a text editor. I changed nothing else in the template.

Look below for more information on Recent Posts and Recent Comment widgets.

The Dreaded BX Error

If you get the dreaded BX error window you may be able to fix this by opening your template code and increasing the widget id number by one (1) for every id. This has worked quite successfully in the past.

Rather than repeat everything that has already been very well explained by Amanda Fazani I suggest that you read this post on Blogger Buster.

Some people have done this and found that this has not worked. If increasing the numbers again still does not work then a drastic course of action is required.

First make sure that you have downloaded your original template and saved it so that if all else fails you can restore it. Go to Layout>Choose New Template and choose a simple template such as Minima and click Save Template. Then go Layouts>Page Elements and delete every gadget you can by clicking on Edit, then Remove, in the window which opens.

The upload really should work now. If not then try clearing your browsers cache to get rid of any saved pages which may be popping up. Better still close your browser and use CCleaner, which is both free and excellent. After cleaning open up your Dashboard and try uploading again.

If none of the drastic action works then try a nice cup of tea or find a brick wall and beat your head on it.

If you have concerns about losing some of your favourite widgets when changing templates then have a look at another of Amanda Fazani’s articles on transferring your widgets.

Ebloger Templates

Infolinks In Text Ads

About Us

Wednesday, October 20, 2010

40 Fresh Modern Logo Inspiration For The Designers

15 Killer Free WordPress Personal Blog Themes

Royale Note Blogger Template

Featured Content Slider for Blogger Using jQuery

Saturday, October 9, 2010

Add a Top of Page Link to Blogger Templates

Google Search Gadget for Blogger

Friday, October 8, 2010

Fixing Problems Uploading Templates to Blogger

The Invalid For Type Error

The Dreaded BX Error

Recent Posts and Recent Comments Widgets.

Thursday, October 15, 2009

Flickr

Subscribe

Search

Popular Posts

Labels

Blog Archive

Alexa