Tuesday, 30 April 2013
customize label cloud block in blogger
Do you know you can customize default label or tag widget that are used to show categories. Yes, of course you can change it but how? Today we will look at this feature and how we can add it in blogger template. I must say that this tutorial was requested by many of our beloved readers. Lets get started.
What Are Labels?
This was shared by Mybloggertricks ,Actually labels are the ways to organize your posts in to a perfect manner,so that it comes easily in front of a visitors eye or other way you can say to categorize your post. Whenever you make a new post just put the label name and publish it, now you have a new category or label. Now you can change the default look of label by using style sheet.You can change looks of label in several ways but today we are going to show the best label style ever.
How To Add Label in Blogger?
1. Go to blogger > Setting > Layouts2. Now click add a gadget (Tip-right side bar is standard display)
3. Click labels and choose cloud.
4. Save the widget.
5. Now go to settings > Template (Tip- Make sure to back up your template)
6. Click edit html and search for ]]></b:skin>
7. Just above ]]></b:skin> put below code
.label-size{We hope you will not get any problem while installing but if you get any problem then kindly comment and we will surely help you as soon as possible.
margin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase;
border: solid 1px #C6C6C6;
border-radius: 3px;
float:left;
text-decoration:none;
font-size:10px;
color:#666;
}
.label-size:hover {
border:1px solid #6BB5FF;
text-decoration: none;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}
.label-size a {
text-transform: uppercase;
float:left;
text-decoration: none;
}
.label-size a:hover {
text-decoration: none;
}
Till then peace and happy blogging.
Labels:
Blogging Tricks,
Css,
Widget
Sunday, 17 March 2013
10 steps to create PHP contact us form for blogger
Contact us form is very important form that should be kept in every website.Blogger does not give you a opportunity to have in built contact form, so how can a advertiser or your visitors will contact you through private. In this situation your losing your advertiser by no means and your loosing money too.Sometimes blog owner may not get time to read comments but he will surely check his emails then definitely he will receive your email via contact form.Today we will learn a very easy way to add contact form which is based on php and it remain on same page when a user send a message through it.
- Unlimited message can be sent and receive,there is no restriction.
- No charges for using this forms,its totally free form.
- Even you don’t need to register to use it. Amazing?
- Also have anti spam protection by captcha.
- I must tell you that its too much stylized, you will just love it.
How to add it on you blog?
1. Go to www.foxyform.com and click title,name,email,subject and website.2. Remember to tick required field on right side.
3. Customize your form:
Here you can select background color,font color,font style and font size.
4. Now enter email address that you want to receive visitors message.
Also enter captcha and click Create Formular.
5. Now you will html code which you need to paste in your blogger page in html mode.
6.Got to Blogger click on dropdown and select pages.
7.Click new page and select blank page.
8.Give page a title as Contact Us.
9.Click html and put the code in it by replacing existing code.
10. Publish page and link it to your menu.
Now successfully you have created Contact us form. Hope you will get touch with your visitors more closely then ever.
Peace and happy blogging.
Labels:
Blogger Plugins,
Blogging Tricks
Saturday, 16 March 2013
Add stylish email subscription box below posts in blogger
One of the most attractive way to boost traffic is by email subscription.A subscription box usually have a link to your feed address which contain email delivery,when there is a new post made in blog/website.A blog with no subscription box is useless because most users who liked your content on any topic may wanted to subscribe to regular updates of your blog and when one cannot find any button to subscribe ,simply he will leave your blog silently.By any possible way try to attract visitors to subscribe to your blogs, this will increase your visitors.So to increase your visitors you need to have a eye catching design that can easily visible by a reader. So today we will learn how to easily add email subscription box to blogger below post body.Most chance of getting readers is to place subscribe box below post body because your visitors will end up with your content at lower part of the post body,so just after finishing his reading his attention will fall on subscribe box that we will add now and you have new reader.
How to add in blogger template?
1. Log in to your Dashboard--> Template- -> Edit HTML2. Click on "Expand Widget Templates"
3. Search "Ctrl+F" and find ]]></b:skin> . Before it paste the below code:
4. Again Search "Ctrl+F" and find <data:post.body/> . After it paste the below code:
#mbw-box{background: -webkit-gradient(linear, left top, left bottom, from(#00aeef), to(#00aeef));;border:1px
solid #00aeef;border-radius:10px; margin-bottom:10px;padding:10px;text-align:center;background: -moz-linear-gradient(top, #333, #00aeef)}
#mbw-box h1{margin-top:5px; color:#FFF;font-family:georgia;font-size:25px;margin-bottom:5px;padding:0;text-shadow:0 2px 3px #000;line-height:35px}
#mbw-box input{background: -moz-linear-gradient(center top , #FFFFFF, #EFEFEF) repeat scroll 0 0 transparent;border:medium none;border-radius:10px 10px 10px 10px;font-size:14px;padding:10px;text-shadow:1px 1px 0 #FFF;width:280px; color:#666; font-family:georgia; margin-bottom:5px;}
#mbw-box .submit{background: -webkit-gradient(linear, left top, left bottom, from(#369a18), to(#205f0d));background: -moz-linear-gradient(center top , #ff00ff, #ec008c) repeat scroll 0 0 transparent;color:#FFF;cursor:pointer;font-weight:bold;margin-left:20px;text-shadow:0 1px 2px #000;width:120px; font-family:georgia; margin-left:5px;}
#mbw-box .submit:hover{background: -moz-linear-gradient(center top , #9e005d, #9e005d) repeat scroll 0 0 transparent}
#mbw-box .submit:active{background: -moz-linear-gradient(center top , #46B725, #205F0D) repeat scroll 0 0 transparent}
<b:if cond='data:blog.pageType == "item"'>
<div id='mbw-box'><h1>Subscribe To Get FREE Tutorials!</h1><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=mybloggingway', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'><center> <input name='email' onblur='if (this.value == "") {this.value = "Enter Your Email Address...";}' onfocus='if (this.value == "Enter Your Email Address...") {this.value = ""}' size='30' type='text' value='Enter Your Email Address...'/> <input name='uri' type='hidden' value='mybloggingway'/> <input name='loc' type='hidden' value='en_US'/> <input class='submit' type='submit' value='Subscribe'/></center></form></div>
</b:if>
- Replace mybloggingway with your feed name.
Labels:
Blogging Tricks,
Css,
Widget
Wednesday, 13 March 2013
Top reasons not to accept guest post
One of the top reasons for boosting traffic to a blog/website is by guest post service but it may harm your blog. Search engine are getting more smarter these days,of course you don’t want your blog to get penalize by search engine. Now a days you can find many guest posting tips over the internet but it will make your blog penalize.Your blog can accept guest post if guest posting etiquette are done properly.Google thinks that ,through guest blogging lots of junk content or spammy links are posted on the web. Many bloggers who just started a blog/website are searching for guest posting opportunities to get quality back links but not for readers and to give a link to low quality website is spam in eyes of Google.You may think that every blog/website recommends for guest posting but why we suggest not to accept guest post? Its because Google said that giving quality links to low quality site is big spam.
When Not To Accept Guest Post?
Content:- You don’t want your blog wit low quality content. Mostly guest post are of low quality content and totally unfurnished.For just seeking a backlink author can write a post for your blog which may be published or written many times by many authors.So you will not get any traffic from this post. Reader on your blog are searching for your post on your blog, not other posts because they love your style of writing and your concept on many topic,so there is a chance of losing traffic.Writing skills:- Most writer don’t have skills of writing because they are new to blogging field and still learning.Content may not be unique and may not follow the rules of contents. Ideal post length are 500-700 words and they may not know the depth of content.Many times writer do not follow your niche while writing and thus he don’t know the content of your blog, so you cant link your previous article with the guest post(interlinking).
What to check for Guest post?
Check if he is a good writer,how his previous work?,where did he work?,did they made any traffic?,what search engine thinks about his article?Does his site well optimized,fresh and make sure its not a spammy site in front of Google?Lastly, I would say that if you are busy in your college work or any other work for which you are not getting time for frequent updates then you make guest posting guidelines for your blog.Remember to check writer english and grammar errors.Content must be unique and under stable by your reader and lastly check that post is published else where or not and if published then convince your writer to check his content on guest posting site test about his article.Before accepting guest post check that are you satisfied with posts or not?
Let us know you’re your point of view on guest posting service.
Peace and happy blogging.
Labels:
Blogging,
Blogging Tips
Friday, 8 March 2013
7 Top professional css sub headings for blogger
With recent updates ,search engine bots like <h2> tags for post titles for better SEO optimization but if your blog is still using old <h3> tags then we recommend you to change to <h2> tags because it is seo friendly post titles.
Sub heading in posts are something that attract users to read your content carefully and can be customize it by css style sheet but how can you use it and where does style tag go? It goes to post area section of your blogger template. You can find it as .post h2, .post h3, .post h4,.post h5 etc ,these are called sub heading.So in order to edit it first you need to search existing css custom heading tag or you may call it custom html tags css.
How to add css h2 custom heading in blogger?
1.Go to blogger > Template > Edit html.2.Search for .post h3 (Ctrl+f to search).
3.Replace .post h3 with any of the following css heading style.
- Heading style 1:
.post h3 {
background-attachment: scroll;
background-color: white;
background-image: url("http://2.bp.blogspot.com/-GZCR82-F-bU/UTnAhdjJ9eI/AAAAAAAAbXI/Fy0CjGpYCMM/s1600/h2.png");
background-position: 4px 50%;
background-repeat: no-repeat no-repeat;
border: 3px solid;
border-radius: 60px 60px 60px 60px;
box-shadow: 0 1px 3px, 1px 1px 0 inset;
color: #333333;
font-family: inherit;
font-size: inherit;
font-size-adjust: inherit;
font-stretch: inherit;
font-style: inherit;
font-variant: inherit;
font-weight: inherit;
line-height: 1;
list-style: none outside none;
margin: 15px 3px;
outline: medium none;
padding: 3px 10px 3px 30px;
text-shadow: 0 1px 0;
text-transform: uppercase;
vertical-align: baseline;
}
- Heading Style 2:
.post h3 {
background-attachment: scroll;
background-color: white;
background-image: url("http://4.bp.blogspot.com/-tFJEmtdTP9s/UTnAR0IbXxI/AAAAAAAAbXA/WO-NEvmKtXA/s1600/h2.png");
background-position: 0 50%;
background-repeat: no-repeat no-repeat;
border: 3px solid #0D7005;
border-radius: 14px 14px 14px 14px;
box-shadow: 3px 3px 3px #ABABAB;
color: #25991C;
font-family: Lobster,cursive;
font-size: 26px;
font-weight: normal;
margin: 0 0 1em;
padding: 0 1px 4px 34px;
position: relative;
text-shadow: 1px 1px 0 #000000;
text-transform: capitalize;
}
- Heading Style 3:
.post h3 {
border-bottom: 1px dotted #4E555A;
border-top: 1px dotted #4E555A;
color: #4E555A;
padding: 3px;}
.post h3 {
border-bottom: 1px dotted #0080FF;
border-top: 1px dotted #0080FF;
color: #0080FF;
padding: 3px;
}
- Heading Style 5:
.post h3{
background: url("http://1.bp.blogspot.com/-zs4aWzVV5J4/UTm__Ri99eI/AAAAAAAAbW4/a--rNrWDM9Q/s1600/h2.png") no-repeat scroll 4px center transparent;
border: 3px solid #C8C800;
border-radius: 60px 60px 60px 60px;
box-shadow: 0 1px 3px #C6C6C6, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
color: #A5A503;
font-family: 'lobster',sans-serif;
font-size: 19px;
font-weight: bold;
line-height: 1;
margin: 15px 3px;
padding: 3px 10px 3px 30px;
text-shadow: 0 1px 0 #CCCCCC;
text-transform: uppercase;
}
- Heading Style 6:
.post h3 {Hope you will like heading for blogger posts and if you get any problem then comment below ,we will try to help you as soon as possible.
background: url("http://1.bp.blogspot.com/-wo4kiWscFy4/UTm_U5Uz8FI/AAAAAAAAbWo/vWgBX1TCQO0/s1600/star.png") no-repeat scroll 5px center transparent;
clear: both;
color: #662D2D;
font-family: 'Oswald',sans-serif;
font-size: 26px;
font-weight: bold;
line-height: 1.2;
margin: 25px 5px;
padding: 6px 10px 2px 40px;
text-shadow: 0 1px 0 #CCCCCC;
text-transform: uppercase;
Peace and happy blogging.
Labels:
Blogging Tricks,
Css,
Design
Thursday, 7 March 2013
3 tips for writing keyword rich content for seo
Yesterday I shared 3 tips to add photo gallery using jQuery and zoom effect and today I will share how to write contents full of keywords that makes your blog famous for and you can change your writing style to make your content seo friendly and it will help to increase search engine visibility.
1. Start with keywords
Select your keyword first. Remember to look at google analytics dashboard for the keywords that your blog is getting from search engine. Now take 2 or 3 keywords and search it on google that what topic are written on those keywords. What are the question,phrases or any content made? If you are newbie then look for medium competitive keywords and take a look at the value of searches that are getting monthly and choose high value keywords.For getting idea use Google adwords keyword tools that will show you how many users are searching for your phrases and get suggest some more phrases and note it down in a paper. Remember not to use same phrase for many times,say,if you get “John Photography”, you can use it for once or twice and you can use after like “John” and “Photography” separately in other ways.Over optimizing your phrase,you may get punished by Google,Bing and other search engine and your post may get neglect by bots.
Your post title must be unique that must use keyword rich content then your success is at you door and your post will continue attract more visitors to your blog or websites for year making your blog popular is search engine.
2. Check your content
You have finished writing your post,so now its time to look at your entire phrase or keywords that you used for this post.Points to check:
- Is your post title contain keywords or phrases?
- Did your post can explain keywords that you use in your title?
- Did you use the same phrase for more then two times?
- Will your post satisfy your readers query?
Let Google know your blog,content and then you no need to look back.
Be Master of Your Content
Produce such a great content so that other bloggers are bound to read your content. Although I am huge fan of writing SEO content, I never look back while thinking of SEO optimizing post. Blogs are often more conversational , so try to engage your readers by asking question and made keep them to stay loner by your post(It will help search engine to think about the importance of your page ).Search engine focus on the words in links,means you might want user to read other topic on your blog, so you recommend them by a link that says “click here”. Instead of this use a phrase and put link in it.
For Search Engine Traffic Follow These Steps:
- Give importance on each blog post with your heart and soul.
- Try to use keywords in first part of your post and often in your blog post.
- Title must be keywords that you used in your entire post.
- Remember to satisfy readers with your content.
- Make in bound links with other post of your blog/website.
Peace and happy blogging.
Labels:
Blogging,
Blogging Tips,
Keyword
Tuesday, 5 March 2013
3 tips to add photo gallery using jQuery and zoom effect
Yesterday we shared How to add an accordion panel to your blogger template and today I will present you with a tutorial for creating a photo gallery with jQuery and zoom effect. It's a pretty nice gallery and you can add it both in your posts and in a HTML/Javascript widget. Also if you want, you can add it as menu and and give it a url of target link.
It's very easy to add , the tutorial having just 3 small steps. So....
How to install photo galley with zoom effect?
1. Log in to your Dashboard--> Template- -> Edit HTML
2. Search "Ctrl+F" and find ]]></b:skin>. Before it paste the code:
/* Blogger Zoom Gallery */
ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative; /* Set the absolute positioning base coordinate */
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px; /* Set the small thumbnail size */
-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.thumb li img.hover {
background:url(http://4.bp.blogspot.com/_p4Te9Li52fs/So9a2fSh2jI/AAAAAAAAAAc/VX0mAW1oYHc/thumb_bg.png) no-repeat center center; /* Image used as background on hover effect
border: none; /* Get rid of border on hover */
}
Change the value of width: 360px; to change the width of the gallery.
3. Then go and find the </head> tag and before it paste the next code:
<script src='http://code.jquery.com/jquery-latest.js'
type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
//Larger thumbnail preview
$("ul.thumb li").hover(function() {
$(this).css({'z-index' : '10'});
$(this).find('img').addClass("hover").stop()
.animate({
marginTop: '-110px',
marginLeft: '-110px',
top: '50%',
left: '50%',
width: '174px',
height: '174px',
padding: '20px'
}, 200);
} , function() {
$(this).css({'z-index' : '0'});
$(this).find('img').removeClass("hover").stop()
.animate({
marginTop: '0',
marginLeft: '0',
top: '0',
left: '0',
width: '100px',
height: '100px',
padding: '5px'
}, 400);
});
//Swap Image on Click
$("ul.thumb li a").click(function() {
var mainImage = $(this).attr("href"); //Find Image Name
$("#main_view img").attr({ src: mainImage });
return false;
});
});
</script>
If you have jQuery already installed on your template delete the <script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/> .
4. Save your template.
5. Now in the place you want your gallery to appear just paste the next code:
<ul class="thumb">
<li><a href="#"><img src="picture 1 Link" alt="" /></a></li>
<li><a href="#"><img src="picture 2 Link" alt="" /></a></li>
<li><a href="#"><img src="picture 3 Link" alt="" /></a></li>
<li><a href="#"><img src="picture 4 Link" alt="" /></a></li>
</ul>
- Replace picture 1 Link,picture 2 Link,picture 3 Link,picture 4 Link with the URL of your images,
- Change # to the target url.
Each time you want to add a new image just add a new line of code like the upper ones. Shared by artistutorial.
If you like the post please share with your friends too and for any problem please comment on it.
Labels:
Blogging Tricks,
Css,
Jquery

Hi! I am Azad hussain, a certified Smartphone Consultant,Blogger, Student and an addicted Web Developer.