Saturday, 4 January 2014
How to Customize Blogger Labels & Make Them Attractive
Well I am using the cloud version and I have just added some CSS styles that I have created by my own to modify the overall look of it. So you can see in the above image what kind of look you will get when you will apply the below CSS.
Well obviously you can edit the styles according to your preference or maybe add some more interactivity to it that depends on your creativity. So now jump in to the below tutorial and lets start the process.
- Visit Blogger.com > Template > Edit HTML.
- Now press
Ctrl +F and search for ]]></b:skin> and paste below code above it.
#Label1 a{background:#f6f6f6;background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1));background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1));border:1px solid #aaa;display:inline-block;font-family:cambria;font-size:10px;letter-spacing:1px;margin:3px 0;padding:6px;text-transform:uppercase;-moz-box-shadow:0 5px 5px -5px #999;-webkit-box-shadow:0 5px 5px -5px #999;box-shadow:0 5px 5px -5px #999;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}#Label1 a:hover{border:1px solid #666;color:#000}3. Now this is the default code for modifying labels in blogger template, if this code does not work you might have something else constructing your blogger labels.
What if the above code does not work ?
This can be due to code your blogger labels are created with, just follow below steps to see your appropriate code and replace it with above CSS code.
So what you can do is just right click on your label in chrome browser and you will see something like in the image on the right, it’s the code constructing your labels.
- So now just change the above CSS code starting with that code you found and it will work fine.
So that’s it this tutorial will give your labels a new look and will surely attract your readers to click on them and see how they work :) So do comment if you find any problems installing theseCSS styles.
How to add Facebook Comment Box in Blog of Blogger With Notifications Enabled
Facebook comment for your web log will function a decent thanks to a lot of participating and encourage readers to drop comments if they’re already logged in to Facebook. It conjointly is a supply of traffic since victimization Facebook comment shares the comment and post page on the visitor’s Facebook wall. One issue ought to be noted though: Facebook comment has no SEO price since it’s being displayed in Associate in Nursing iframe that Google won’t index. Comments created with the regular comment box on your website has a lot of benefits particularly if you get different comment, a lot of keywords you didn’t truly mention within the post content however showing in comments do bring a lot of traffic. this is often one thing Facebook comment lacks, execept the additional traffic you get from Facebook.
use the Facebook comments enclose parallel to your recent Blogger Comment kind in order that you will loose no previous comments and supply users with multiple choices of commenting from completely different platforms.
 |
| Both Facebook and Blogger Comment Enable How Desable Blogger Comment |
How to add Facebook comment box to Blogspot
There are about five steps to get this done but chill out, it’s easy, ok?
Just follow the steps and you’ll have a nice Facebook comment box installed on your blog in no time.1. Creating a Facebook Application
i. Head on to facebook developer page, you should create a new app by clicking the button at the top right.
ii. Enter your application name and namespace,input the captcha code and proceed.
For App website, enter you blog URL. ( http://www.xyz.com/ or http://xyz.blogspot.com/ ). Be sure it starts with http:// and ends with / as shown in the screenshot below:
iv. Scroll down a bit and hit the Save Changes button. Now you’re done with creating your facebookapplication but there’s one more thing to do. On that same page, you should see your application ID. Copy it and save somewhere, you’re gonna be needing it.
Now let’s head to your blog and finish this up
2. Adding the codes to your template
We’re adding four sets of codes into your template to make this work the way we want, aight?PS: Please make sure your blogger comment form is embedded below posts. For doing this first go toBlogger > Settings > comments > and then choose embed comments below posts. After doing this follow the tutorial below.
Log in to your blogger account and click on Template > Edit HTML
i. Press
This should be found on the second or third line of your template.
xmlns:fb='http://www.facebook.com/2008/fbml'
ii. Press
<body>
Note: In New Blogger Designed templates the same code looks like this,
<body expr:class='"loading" + data:blog.mobileClass'>
Find any one of these codes and just after it paste the code given below,
<div id="fb-root"></div>
<script>
window.fbAsyncInit = functionundefined) {
FB.initundefined{
appId : 'YOUR APPLICATION ID HERE',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
undefinedfunctionundefined) {
var e = document.createElementundefined'script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementByIdundefined'fb-root').appendChildundefinede);
}undefined));
</script>
- Replace YOUR APPLICATION ID HERE with your Facebook application ID that you saved in a notepad.
iii. Now,Press
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='RN Hckr' property='og:site_name'/>
<meta content='BLOG-LOGO-IMAGE-LINK' property='og:image'/>
<meta content='YOUR_APP_ID ' property='fb:app_id'/>
<meta content='http://www.facebook.com/RohitMewada' property='fb:admins'/>
<meta content='article' property='og:type'/>
- Replace RN Hckr with your blog title/Name.
- Replace BLOG-LOGO-IMAGE-LINK with the image link of your logo. Your logo will look good if it is in gif format and having this size -> 40px by 40px . This logo will appear next to your post title on Facebook profiles of your visitors like this,
- Replace YOUR_APP_ID with the your Facebook Application ID that you saved in notepad
- Replace http://www.facebook.com/RNHckrDotCom with your Facebook user profile link
iv Now Press
<b:includable id='comment-form' var='post'>
<b:if cond='data:blog.pageType == "item"'> <div style='padding:0px 0px 0px 0px; margin:0px 0px 0px 0px;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/> <div> <fb:comments colorscheme='light' expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='520'/></div> <div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:510px;'>Facebook Blogger Plugin: By <b><a alt='Rohit Mewada' href='http://www.BlogofBlogger.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='Blog of Blogger'>Blog of Blogger</a></b></div></div> </b:if>
- If you want to use the dark scheme then simply replace light with dark
- To change the Comments box size, change this value width='520'
- To change the footer credits size, change this value width:510px
- Keep a difference of 10 pixels between the box size and footer size. For example if you set box-size to width='600' then set footer-size to width:590px
3. Enabling notification for comments on every post
This is the last part and it’s optional but I recommend it. Enabling this lets you know whenever someone comments on your blog. You get a regular notification on Facebook and you can visit your blog to reply the comment.- Visit this URL: https://developers.facebook.com/tools/comments/?id=YOUR_APP_ID
- Be sure to replace YOUR_APP_ID with your real application ID
- On the page that opens, click on settings and add yourself as moderator
- Click on your name when it shows up and save the changes you made. When someone drops acomment on your blog, you should be notified that instant on Facebook.
Update 2: Fix Facebook Comment Box Aligned to the Right
We all understand Blogger recently created some changes and that i noticed this box got aligned to the correct because of some reasons. This appears to be cause by some html tags being incorrectly parsed by the new template editor… my guess.Anyway, here’s the fix: Replace the code you have under data:post.body with the one below.
<b:if cond='data:blog.pageType == "item"'>
<style>
.doncaprio-share-buttons
{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border:1px solid #BBBBBB;
background-color:#F2F2F2;
-webkit-box-shadow: #B3B3B3 5px 5px 5px;
-moz-box-shadow: #B3B3B3 5px 5px 5px;
box-shadow: #B3B3B3 5px 5px 5px;
padding: 5px;
margin: 10px;
}
</style>
<p align='center'>
<div class='doncaprio-share-buttons' style='background: #f2f2f2;'>
<font size='6'><strong>Love to hear what you think!</strong></font> <img src='http://www.doncaprio.com/wp-content/uploads/2012/08/comment.png'/>
<br/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div><fb:comments expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' width='450'/></div>
<div align='right'><a href='http://www.doncaprio.com/2011/08/facebook-comment-box-for-blogger.html' target='blank'><small>[Facebook Comment For Blogger]</small></a></div>
</div>
</p>
</b:if>
Replacing the whole code pasted earlier under data:post.body or post-footer-line-1 should fix it. I did it on my test blog and it works just fine. Any problem? Don’t hesitate to holla at me.
If this works for you, you'll be able to say thanks by sharing on Facebook, striking the Google +1button or just victimisation the comment box. Also, it might be nice of you to not take away the credit link to permit others notice this handy contraption. If you’re having issues implementing this likewise, don’t hesitate to let me recognize perhaps I will be of facilitate.
ALT Tag: How to Add ALT Tag in Blogger Images For Image SEO
I know you Like: How Add Alt Tag Automatic in Blogger
Learn additional regarding alternative Text (alt tag)
- It is scan by in place of pictures permitting the content and performance of theimage to be accessible to those with visual or bound psychological feature disabilities.
- It is showed in place of the image in user agents (browsers) that do not support the display of pictures or once the user has chosen to not .
- It provides a linguistics meaning and outline to images which may be read by or be wont to later confirm the content of the image from page context alone.
More information I Found On internet regarding “Alt Tag “
When robots scan your content they appear for each detail and after they come across your imagehtml code they are doing not recognize what the image is all regarding. It cannot choose if it's a picture on Vector Icons or template. To let robots index every of your pictures you want to add an alt Tag This alt Tag was introduced by Google in order that pictures may well be well described, categorised and indexed. This Tag tells the robot regarding the purpose of the image. therefore i feel we want to stop the discussion and lets begin Tutorial.Add Alt Text Using Blogger Post HTML Editor
1. Go to your blogger post html editor.2. Click on image icon on the top menu.
3. Upload your image and then click on image you can see option like screenshot below.
4. Click on Properties.
7. In alt text tell Google Robots more about your image.
8. and click ok. You’re done!!
Add Alt Text Using Windows Live Writer
1. Add a image in Windows live Writer.2. Click on image and you will see options in the right side menu like screenshot below.
5. In alternate text Writer Little Description about your image. Less Description is more better for Search engine Accessibility.
6. After Adding Alt text you do not need to save anything just ok blank or white are and start writing your post.
Add Alt Tag Manually To Your Images
1. See Following HTML Image Link example of a simple image HTML Code:Adding this code any where in your templates will display an image.
When robots scan your content they look for every detail and when they come across your imageHTML code they do not recognize what the image is all about.
<img src="image example link" />
2. Image link with alt tag
<img src="image example link" alt="alt tag tutorial" />
You can see in the above code that the alt=”alt tag tutorial” tells Search engine spiders that theimage being displayed is about "alt tag tutorial" add two-three short words to describe your image.
This way you will turn your images into a traffic driving source and can expect fair amount of increase in daily visitors just by adopting the habit of Image Tagging. Use the image alt attribute the way it was ment to be used, to provide useful information to your website visitors no matter how they access your website. Subscribe to our blog via email or RSS and Like our Facebook page to receive free future updates. Enjoy! Thanks for reading our post. happy blogging.
This way you will turn your images into a traffic driving source and can expect fair amount of increase in daily visitors just by adopting the habit of Image Tagging. Use the image alt attribute the way it was ment to be used, to provide useful information to your website visitors no matter how they access your website. Subscribe to our blog via email or RSS and Like our Facebook page to receive free future updates. Enjoy! Thanks for reading our post. happy blogging.
Alt Tag: How Auto Alt Title Tags to Images in Blog of Blogger
Using Alt Tags For pictures Drives Even moreTraffic particularly From the Google pictures. It provides a correct Naming and description to theimages. Well there many more Scripts to convey an Automatic Alt Title Tags to images.
How Important Alt Tag for Image for SEO
But Here may be a easy and cool Script that you just got to Add in Your template. this can be easy and does not take much Time. All you would like to try and do is that the correct Naming of the Imagein order that it Suits the Name of the Title.So give the Image a correct Naming. as an alternative you will not be able to See the correct
This script not only adds an “alt” and “title” tags but also gives a plus ‘+’ symbol if there is space in the name of uploaded image.
But Here may be a easy and cool Script that you just got to Add in Your template. this can be easy and does not take much Time. All you would like to try and do is that the correct Naming of the Imagein order that it Suits the Name of the Title.So give the Image a correct Naming. as an alternative you will not be able to See the correct
This script not only adds an “alt” and “title” tags but also gives a plus ‘+’ symbol if there is space in the name of uploaded image.
How To Add Auto Alt title Tags to Blogger Images :-
A Following are the simple steps to add the Script :- Go to Template >> Edit Html
- Now Press
Ctrl +F and Search for the </body> Tag in Your Template - Now Copy the Below Code and Paste it Above/Before </body> Tag
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('img').each(function(){
var $img = $(this);
var filename = $img.attr('src')
$img.attr('title', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
$img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
});
});
//]]>
</script>
Now Save the Template and Check Your images. By Hovering Your Cursor Over the Image.It Will Show Some Name on the Tooltip.That's It Enjoy..
!!!!!Happy Blogging!!!!!!!!
!!!!!Happy Blogging!!!!!!!!
