Add an Advertise Here Section To Your Blog

Add an Advertise Here Section

You must have seen such Advertise Here ads on this blog or many other blogs. There are some blogs that say that they are Ad Ready. But you don't have to change your blog template for those ad blocks. Adding an Ad section to your blog isn't that tough. It will just take less than 5 minutes to place Advertise Here ads on your blog. You don't even have to search for Blogger Templates having ad slots.





Read More »

0 comments:

Displaying HTML And Javascript In Blogger Blog Posts

If you have tried to display HTML or Javascript or any other code in Blogger posts, then you must have seen that the code isn't displayed in the Blog Post. Check the following example below:

If you want to display how to add image to blog post I will put the following code in the Blog Post

<img src="Image URL Here" alt="image" />

But when you check the post, instead of the code you will see only image as seen below as the we have kept alt="image" . Rest of the code wont be visible.

image

However the method to display HTML/Javascript/CSS or any other code in the Blog Posts is very easy and you don't even have to add any code to the blog template. Just go to the Adsense Code Converter and paste your code and click on Convert.

Now that you have converted the code, go to the blog post and paste the converted code and publish the post. Now the code will be visible in the blog post.

Now that you have displayed the HTML/CSS/javascript code in the blog post, its better if you highlight the code so that everyone can differentiate it from the normal post. You can use Bold to highlight it but it doesn't look good. So after you have converted the code, paste it between the following two tags

<blockquote>
Paste the Code Here
</blockquote>

So now the code will appear like shown below


<img src="Image URL Here" alt="image" />

That's it. I hope that you found this post useful. If you are facing any problem then use the comments section below.

0 comments:

32 Beautiful Girly Blogger Templates

Girly Blogger Templates












Here is a collection of 35 beautiful Girly Blogger templates.
Enjoy these templates and do share this post if you liked the templates.

If you are new to Blogger and dont know how to change the blog template, then read "Installing A New Blogger Template"



Chobits


Chobits










Demo | Download


Shugo Chara

Shugo Chara








Demo | Download


Tired Girl

Tired Girl









Demo | Download


Rosa

Rosa










Demo | Download


Love 2

Love 2










Demo | Download


AniGirl

AniGirl










Demo | Download


Forever in pink

Forever in pink










Demo | Download


Cute Pinky

Cute Pinky










Demo | Download


Pinky Girl

Pinky Girl








Demo | Download


Disney Princess

Disney Princess










Demo | Download


Shoe Fetish

Shoe Fetish










Demo | Download


Greeny Girl

Greeny Girl










Demo | Download


Pink City

Pink City










Demo | Download


Shoppaholic

Shoppaholic










Demo | Download


Pink Blue

Pink Blue










Demo | Download


Momochi Girl

Momochi Girl


















Demo | Download


Pink Holic

Pink Holic










Demo | Download


Couple in black

Couple in black










Demo | Download


Fashionholic

Fashionholic










Demo | Download


Guitar Pink

Guitar Pink










Demo | Download


Girly Diaries

Girly Diaries










Demo | Download


Sweet Girl

Sweet Girl










Demo | Download


Girly Blue

Girly Blue


















Demo | Download


City Girl

City Girl










Demo | Download


Shopping Bag

Shopping Bag










Demo | Download


Kuzu Lamb

Kuzu Lamb












Demo | Download


Girl in Bathroom

Girl in Bathroom











Demo | Download


Pinky 84

Pinky 84










Demo | Download


Paper Girl

Paper Girl










Demo | Download


Girl Lay Down

Girl Lay Down











Demo | Download


What A Girl Wants

What A Girl Wants











Demo | Download


Girly Web 2.0

Girly Web 2.0











Demo | Download


0 comments:

Adding Adsense To Blogger Blog Posts

Google Adsense








You must have seen many blogs displaying Adsense ads below the Blog Title or at the end of the post and must have tried doing the same without any success. The main problem is that Blogger doesn't allow you to add the Adsense code directly to your blog template.

For adding Adsense to your blog post you have to first convert the Adsense code and then it is possible to add the code to your blog template without any error. Visit the Adsense Ad Code Converter to convert the code.

Now that you have converted the Adsense code by visiting the above link, its time to paste the code in the Blogger template.

Just follow the steps given below:

Step 1:
Login to your Blogger Account. You will be taken to the Blogger Dashboard. You will see a list of blogs or only 1 blog. It depends on the number of blogs you have. Click on Layout.


Blogger Basics








Step 2:
Now you will reach the Layout section where you can see the basic framework of your blog and all the Widgets or Gadgets as they call it now. At the top of the page you will see some links. Click on Edit HTML.

Blogger Basics






Step 3:

Click on
Expand Widget Templates


Expand Blog Template






Step 4:

Now search the following code in the template

<data:post.body/>

If you want to display the ads at the start of the post, then paste the code above <data:post.body/> and if you want to display the ads at the end of the post, then paste the code below it. However you will have to add the Adsense code between two lines of code before adding it to the template.

Now paste the Adsense code between these two lines of code


<b:if cond='data:blog.pageType == &quot;item&quot;'>
Paste the Adsense Code here
</b:if>

The main reason for pasting the Adsense code between the 2 lines is that it wont display the ads on the Home Page. The ads will be visible only when you visit the blog post. This is important as Google allows only 3 ad units per page. Most of the blogs display 5 posts per page, because of which 5 ad units will be visible on the Home Page which is against the rules. But if you want to display the ads on the Home Page and have only 3 or less posts per page, then you don't need to add the above code to your Adsense code.

Now save the template and check your blog posts. The adsense code will be visible in the posts.

0 comments:

Adding A jQuery Posts Slider To Blogger Blog

If you see the header section of this blog, you will see a jQuery Posts Slider. Check the pic below.

jQuery Post Slider








This slider which is also called Featured Content Slider was used in the Zinmag Primus Wordpress Template which was converted to Blogger by Falconhive. Using this Featured Content Slider you can display Featured Blogposts in the slider. You can check the Demo

The posts slider is very useful as we can show our blog visitors some of our best blog posts without them having to search it. This even makes our blog look more professional. Adding this slider to our blog isnt that tough, but it may require some trial and error pasting of some code depending on your blog template. But even that isnt difficult.

Before we start our work I recommend that you backup your blogger template incase something horrible happens to your blog template.

NOTE: There was some problem with the earlier script and it stopped working. I have replaced the script and its working fine now. If you have already added this slider to your template and are facing problem with the slider, then please change the script in the template with the new one given below

First we start with the CSS part of the template. Copy the following code and paste it anywhere between <b:skin> and </b:skin>




#slider {
background:url(http://i39.tinypic.com/a2bzhd.png);
height: 254px;
width: 983px;
overflow: hidden;
position: relative;
margin: 5px 0;
}


#mover {
width: auto;
position:absolute;
overflow:hidden;
}


.slide {
padding: 20px 0px;
width: 1000px;
float: left;
position: relative;
height:200px;
}


.slide h2 {
font-family:georgia, Helvetica, Sans-Serif;
font-size: 24px;
position: absolute;
top: 20px;
left: 1px;
color: #ac0000;
padding:0px 0px 0px 30px;
margin:0px 0px;
width:500px;
overflow:hidden;
}


.slide h2 a:link, .slide h2 a:visited {
color:#fff;
background-color: transparent;
}


.slide h2 a:hover {
color: #ddd;
background-color: transparent;
}




.slide p {
color: #999;
position: absolute;
top: 100px;
left: 1px;
font-size: 12px;
font-family:georgia, Helvetica, Sans-Serif;
line-height: 20px;
width: 500px;
padding:0px 0px 0px 30px;
margin:0px 0px;
}


.slide img {
position: absolute;
top: 20px;
left: 577px;
background:#fff;
padding:10px 10px;
}


#slider-stopper {
position: absolute;
font-family: Georgia, Helvetica, Sans-Serif;
top: 113px;
right: 55px;
color: #AC0000;
padding: 3px 8px;
font-size: 14px;
text-transform: uppercase;
z-index: 1000;
}

Now that you have pasted the CSS part, paste the given code between ]]></b:skin> and </head>




<script src='http://bloggerjavascripteffect.googlecode.com/files/primus-jquery-1.2.6.min.js' type='text/javascript'></script>
<script src='http://bloggerjavascripteffect.googlecode.com/files/primus-slider.js' type='text/javascript'></script>


Now comes the tricky part which will require some trial and error pasting. Search </head> in the template and you will have to paste the following code somewhere below it. As every template is different from the other, I cant tell you the exact location to paste the code.

But I guess that everyone wants to put the posts slider in the header part. So search for <div id='header-wrapper'> or <div id='header-wrap'> or <div id='header'> or something that is similar to the three examples that I have given. All you have to do is paste the code somewhere near them and save the template. If the end result isnt what you want, again go to the template and paste the code at a different place. Copy the code given below




<!-- Slider -->
<div id='slider'>
<div id='mover'>


<div class='slide'>
<h2><a href='http://www.cooltricksntips.com' title='Cool Tricks N Tips '>Post Slider By Cool Tricks N Tips </a></h2>
<p>If you liked this tutorial then please Subscribe to Our Feeds and dont forget to share it on Digg/Stumble Upon/Twitter</p>
<img alt='Cool Tricks N Tips' src='Image URL'/>
</div>


<div class='slide'>
<h2><a href='Post URL' title='Post Title '>Post Title </a></h2>
<p>Post Description</p>
<img alt='image name' src='Image URL'/>
</div>


<div class='slide'>
<h2><a href='Post URL' title='Post Title '>Post Title </a></h2>
<p>Post Description</p>
<img alt='image name' src='Image URL'/>
</div>


<div class='slide'>
<h2><a href='Post URL' title='Post Title '>Post Title </a></h2>
<p>Post Description</p>
<img alt='image name' src='Image URL'/>
</div>






</div>
<!-- /Mover -->
</div>
<!-- /Slider -->

Now its time for you to put your favourite posts in the Posts Slider. If there are some alignment problems with the Post Title or Image or the Stop Button in the slider then dont worry, continue doing what I say. Search <!-- Slider --> in the blog template. Below it you will see




<div class='slide'>
<h2><a href='Post URL' title='Post Title '>Post Title </a></h2>
<p>Post Description</p>
<img alt='image name' src='Image URL'/>
</div>

Just replace Post URL, Post Title, Post Description, image name and Image URL with the information about your blog post. By default there are 4 such blocks for adding your blog post in the Posts Slider with the 1st block having information about Cool Tricks N Tips. Just replace it with info about your blog post.

If you want more than 4 or less than 4 posts in the posts slider add or remove the code given above depending on what you want.

After you have done everything as I have given, there are some instructions for you.
In the CSS code given above I have highlighted the background image of the Slider in red colour. Please copy the image to your computer and host it on your own.

Now check your blog. If everything is working properly, stop here. You dont have to read the part given below. But if there is any problem with the Slider, then Continue Reading the post.

Just below the highlighted image in CSS part, I have even highlighted the width option. There are chances that the image may be big for your blog template and isnt appearing properly. So change the number of pixels accordingly so that the slider appears properly.

To calculate the pixel width and height properly, first install Adobe Air on your computer and then install Pixus.

Now, there may be a chance that the alignment of the Post Title, Summary, Image or the Stop button isnt proper. For that read the information given below.

If you are having problem with the placement of the Image, search .slide img { in the template. The code will be as shown below




.slide img {
position: absolute;
top: 20px;
left: 577px;
background:#fff;
padding:10px 10px;
}
To change the alignment of the image, change the values highlighted in red colour. The value 20 indicates 20 pixels from the top of the image and 577 indicates 577 pixels from left side of the image. Use Pixus to measure the values.

If you are facing any problem with alignment of Post Title, search .slide h2 { and change the top and left values as I have shown for the Image.
For alignment problem with Post Summary search .slide p { and change the values
For alignment problem with the Stop Button search #slider-stopper { and change the values.

Thats it, now save the template and refresh your blog to see the Posts Slider working properly for your blog.

If you liked this post then Subscribe To Our Feeds or share it on Digg/Stumble Upon/Twitter or any other service that you like.



0 comments:

Adsense Ad Code Converter

Adsense Ad Code Converter converts the Adsense code and makes it suitable for adding it to your blog posts. This tool can also be used for displaying HTML and other code in your blog posts. Check the tutorial for Adding Adsense To Blogger Blog Posts
Paste your Adsense Code or any HTML/Javascript/CSS code below and click on convert



1 comments: