Showing posts with label BLOGGER. Show all posts
Showing posts with label BLOGGER. Show all posts
18 June 2016
How to Remove Powered by Blogger Attribution Widget
If you want to give a professional look to your blogspot blog, I will recommend you to remove the “Powered by Blogger” Attribution. It is not mandatory but it will leave a positive impact on your visitors which are quite important for any blogger.
Here I have demonstrated you two methods for removing attribution widget. Some blogger templates may not support method 1 then you need to follow method 2 for successfully removing attribution widget.
Step-2: Than Click on “Jump to Widget” option, drop down the list and choose “Attribution 1” See the screenshot below.
Step-3: You should be concentrate on this code:
"<b:widget id='Attribution1'locked='true'title=''type='Attribution'> "
Step 4: Replace the locked=’true’ with locked=’false’ as you can in picture highlighted
Step 5: Now Click on Save Template
Step-6: You would be able to see the layout of your template. Now, find the “Attribution” widget and click on “Edit” link. Below given figure shows the same..
Step-7: Another screen will popup appear before you. Simply click on “Remove” button. see the screenshot below
Step-8: Now Click the “Save arrangement”.
That’s it. You are done.
Step 2: Search this line of code
body {
in your blogger template, for quick finding Hit CTRL+F
Add this code above the body { code, as shown below in picture.
Step 3: Save template and view your blog, you will be no longer able to see attribution widget in footer of blogspot blogs.
If you are still facing any kind of problem, Feel free to ask me via comments.
Cheers! :)
Here I have demonstrated you two methods for removing attribution widget. Some blogger templates may not support method 1 then you need to follow method 2 for successfully removing attribution widget.
Method 1
Step 1: Go to your blog “Template” | click on “Edit HTML”.
"<b:widget id='Attribution1'locked='true'title=''type='Attribution'> "
Step 4: Replace the locked=’true’ with locked=’false’ as you can in picture highlighted
Step 5: Now Click on Save Template
Step-6: You would be able to see the layout of your template. Now, find the “Attribution” widget and click on “Edit” link. Below given figure shows the same..
Step-7: Another screen will popup appear before you. Simply click on “Remove” button. see the screenshot below
That’s it. You are done.
Method 2:
Follow the same step 1 as mention above in method 1.Step 2: Search this line of code
body {
in your blogger template, for quick finding Hit CTRL+F
Add this code above the body { code, as shown below in picture.
#Attribution1 {display: none;}
Step 3: Save template and view your blog, you will be no longer able to see attribution widget in footer of blogspot blogs.
If you are still facing any kind of problem, Feel free to ask me via comments.
Cheers! :)
15 June 2016
How to change Blogger template
Step 1. Log in to your Blogger account and choose your blog (if you have more than one)
Step 2. Now click on the drop down menu and choose Template.
step 3. Now Press Backup/Restore button.
Step 4. First you should download your existing template as a backup. So, click on “Download full template” button.
Step 5. Now click on Choose File button and choose your new template in XML version which you
want to apply to your blog.
Step 6. Click on Upload button.
Congratulation! You are done.
Read Also:
13 June 2016
How To Add A Facebook Like Button to Blogger Posts
Adding a Facebook Like button to your Blogger website lets readers share your content with their Facebook friends. Clicking the Like button posts a link to your blog post on the visitor’s Facebook wall and news feed. Blogger doesn’t offer a Facebook Like button widget, but you can add the Like feature to each blog post by pasting the Like button code into your blog’s template.
Add A Facebook Like Button to Blogger Posts
Step 1. Go to your Blogger dashboardStep 2. Click on Template in the sidebar, then Edit HTML
Step 3. Click inside of the text area and press CTRL + F (or CMD + F on a Mac) to open up the “Find” text box.
Step 4. Inside the “find” box in the top right corner of the text area, enter this code and press enter TWICE. You want to work with the second instance of it:
<data:post.body/>If you want to add your Like button to the top of your posts, add one of the following Facebook codes ABOVE this code. If you want the Like button on the bottom of your posts, add it UNDER this code.
Copy this Facebook button code below for a Horizontal count style:
<br/><br/><iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.canonicalUrl + "&layout=button_count&show_faces=false&width=100&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:21px;'/>
Or, copy this code for a Vertical count style:
<br/><br/><iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.canonicalUrl + "&layout=box_count&show_faces=false&width=100&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:55px; height:62px;'/>
If you prefer it without the count, use this Standard code:
<br/><br/><iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.canonicalUrl + "&layout=standard&show_faces=false&width=100&action=like&font=arial&colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:35px;'/>
Step 6. click “Save Template.
Bottom Line
Adding the Facebook Like button code to the template adds the button to all existing blogs posts in addition to new posts when you create them.Before saving the template, click the "Preview" button to check how the Facebook Like button displays on your posts.
Read Also: How to Add Floating Social Media Sharing Buttons to Blogger
12 June 2016
How to Add Floating Social Media Sharing Buttons to Blogger
Are you searching for an amazing floating social media sharing widget for blogger blog? If your answer is yes, then you come to the right place here because in this post i am going to share an Amazing Social Media Buttons Floating Widget for blogspot blogs. These Social Media Floating Buttons will surely attract more visitors and force them to share your page and website’s content with their friends and colleagues.
Add Floating Social Share Buttons To Blogger
Do you want to know how to add floating share buttons on Blogger? Follow the simple steps I am going to list out.Step 1: As you all know the first step is logging into blogger.com and being in the dashboard of the blog on which you want to add the floating share buttons.
Step 2: Click on Layout
Step 3: Click on Add a widget. see the screenshot below.
Step 4: You will be provided with a number of predesigned widgets. For adding a customized code to integrate a new widget, you must select HTML/Javascript from the options.
<style type="text/css">
#social-buttons {
position:fixed;
bottom:15%;
margin-left:-721px;
float:left;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
background-color:#fff;
padding:0 0 2px 0;
z-index:10;
}
#social-buttons .button-share {
float:left;
clear:both;
margin:5px 5px 0 2px;
}
</style>
<div id='social-buttons' title="Get this from trueblogmoney.blogspot.com">
<div class='button-share' id='like' style='margin-left:7px;'>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-send="false" data-layout="box_count" data-width="40" data-show-faces="false"></div>
</div>
<br /><div class='sbutton' style="margin-left: 2px;" ><a class='twitter-share-button' data-count='vertical' data-via='Trueblogmoney' expr:data-counturl='data:blog.url' href='http://twitter.com/share' rel='nofollow'>Tweet</a><script src='http://platform.twitter.com/widgets.js'; type='text/javascript'></script>
<br />
<div class='button-share' style="margin-left: 3px;" id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<div class='button-share' id='digg' style='margin-left:3px;width:48px'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script>
<a class="DiggThisButton DiggMedium"></a>
</div>
<div class='button-share' style='margin-left:3px;' id='gplusone'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
</div>
<div style="clear: both;font-size: 9px;text-align:center;">Get <a style="color: #3399BB;" href="http://trueblogmoney.blogspot.com/">widget</a></div></div></div>
Customization:
You can change the vertical alignment by putting a value instead of 15% and horizontal alignment by inserting altering -721px (check the highlighted texts). And it will lead to malfunctioning of the social share bar if you proceed to edit the code other than those two alignment items.
Twitter setting- Replace Trueblogmoney with your twitter username
Replacing and removing buttons - you can replace exiting buttons with your own. Each button is represented by this code.
<div class='sbutton'> BUTTON CODE HERE </div>
Cheers! :)
31 May 2016
How To Add Costom Robots.txt File in Blogspot Blog?
When a robot search engine crawler is visiting a page or website, robots.txt is the first thing it looks for is the robots.txt file. As a Blogger user you now have the option to control what the search engine crawlers should follow and index from your website or blog.
Every blogger blog has a default robots.txt but with advanced changes in blogger you can change it according to your needs. In this post, you will know about the default robots.txt of blogger, how to add or edit a custom robots.txt for your blogger blog and some useful examples of robots.txt with an adsense friendly one. So let’s get started.
Read Also: How To Add Custom Robots Header Tags Settings In Blogger
Default Custom Robots.txt of Blogger Blog
Every time you create a blog in blogger a default robots.txt is created and until you change it by the setting is dashboard it remains same.User-agent: Mediapartners-Google
Disallow:
User-agent: *
Disallow: /search
Allow: /
Sitemap: http://Trueblogmoney.blogspot.com/feeds/posts/default?orderby=UPDATED
It is same for each blog and it is Adsense friendly. Don't worry
if it isn't colored. I colored it so that you may understand what these words mean.
User-agent: Mediapartners-Google
This code is for Google Adsense robots which help them to serve better ads on your blog. Either you are using Google Adsense on your blog or not simply leave it as it is.User-agent: *
This is for all robots marked with asterisk (*). In default settings our blog’s labels links are restricted to indexed by search crawlers that means the web crawlers will not index our labels page links because of below code.Disallow: /search
That means the links having keyword search just after the domain name will be ignored. See below example which is a link of label page named SEO.http://myblog.blogspot.com/search/label/SEO
And if we remove Disallow: /search from the above code then crawlers will access our entire blog to index and crawl all of its content and web pages.
Allow: /
refers to the Homepage that means web crawlers can crawl and index our blog’s homepage.Sitemap: http://example.blogspot.com/feeds/posts/default?orderby=UPDATED
This code refers to the sitemap of our blog. By adding sitemap link here we are simply optimizing our blog’s crawling rate. Means whenever the web crawlers scan our robots.txt file they will find a path to our sitemap where all the links of our published posts present. Web crawlers will find it easy to crawl all of our posts. Hence, there are better chances that web crawlers crawl all of our blog posts without ignoring a single one.Howevwr by default, the robot will index only 25 posts, so if you want to increase the number of index files, then replace the sitemap link with this one.
Sitemap: http://example.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=500
And if you have more than 500 published posts in your blog then you can use two sitemaps like below:
Sitemap: http://example.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=500
Sitemap: http://example.blogspot.com/atom.xml?redirect=false&start-index=500&max-results=1000
Read Also: How To Submit Blogger Sitemap To Google Webmaster Tools?
How to prevent posts/pages from being indexed and crawled?
In case you haven't yet discovered yourself, here is how to stop spiders from crawling and indexing particular pages or posts.Disallow Particular Post
Disallow: /yyyy/mm/post-url.html
The yyyy and mm refers to the publishing year and month of the post respectively. For example if we have published a post in year 2015 in month of March then we have to use below format.
Disallow: /2015/03/post-url.html
Disallow Particular Page
If we need to disallow a particular page then we can use the same method as above. Simply copy the page URL and remove blog address from it which will something look like this:
Disallow: /p/page-url.html
Adding Custom Robots.Txt to Blogger
Now the main part of this tutorial is how to add custom robots.txt in blogger. So below are steps to add it.- Go to your blogger blog.
- Navigate to Settings >> Search Preferences ›› Crawlers and indexing ›› Custom robots.txt ›› Edit ›› Yes
- Now paste your robots.txt file code in the box.
- Click on Save Changes button.
- And congratulation, You are done!
Bottom Line
It was easy. once you knew what those code words meant. If you couldn't get it for first time, just go again through the tutorial and read it again.In any case, from SEO and site ratings it's important to make that tiny bit of changes to your robots.txt file, so don't be a sloth, Learning is fun, as long as its free, cheers :)
Read Also: How To SEO Optimize Your Blogspot Blog Post Titles
30 May 2016
How To Add Custom Robots Header Tags Settings In Blogger
Custom Robots Header Tags are the most advanced features in blogger blogs. This tool helps us to pick what part of our blog should enable from Advanced Search Preferences. If you can perfectly use Custom Robots Header Tags in option in settings Blog directs robots can index all enable pages.
3. nofollow – All links on the page containing this directive will be treated as nofollow. The page will be indexed but the linked pages will not be crawled. Note that if there is another web page somewhere on the internet having links to those pages marked as nofollow by you, then those pages will be crawled. The nofollow directive simply states that ‘Do not index the linked pages because I have linked to them. But, if someone else has linked to them and has not marked them as nofollow, then you are free to index them’.
4. none – none combines the features of both noindex and nofollow tags. The crawlers will neither index your pages nor skim through the links.
5. noarchive – You might have noticed a cached label with most of the website links on SERPs. It shows that Google has captured a copy of your site into their server to display in case it goes down. That being said, the noarchive tag turns off cached version in search pages.
6. nosnippet – The text snippets in search results help people find what’s on the webpage. If you want to keep the content exclusive, you can turn this header tag on.
7. noodp – Open Directory Project or Dmoz is a man-made directory of websites. Google use the information from there sometimes. You can turn it off with this tag if you want to.
8. notranslate – Do you want to disable translation on your site? Then use notranslate for the exact purpose.
9. noimageindex – If you allow, the images on that page will not be indexed. This is similar to nofollow tag. If the same image is present on some other page, then that image may be indexed.
10. unavailable_after – In Blogger, you will get a field right to this tag. So, the webpage will be deindexed after this time.
Click on the edit link under the Custom Robots Header Tags section as shown in under screenshot.
Once you click on the edit link you will see many options. Simply tick on the options which shown in the below image.
Custom Robots Header Tags and Purpose
In Blogger, you are going to deal with the following custom robots header tags.
1. all – If you set this tag, crawlers are not bound by any constraints. They can freely crawl, index and expose your content.
2. noindex – Not all the blogs are for public notice. Even if you don’t share the URL of your personal blog with anybody, chances are people will come to it from search results. On such a scenario, you can use noindex tag as it prevents search engines from indexing the pages.3. nofollow – All links on the page containing this directive will be treated as nofollow. The page will be indexed but the linked pages will not be crawled. Note that if there is another web page somewhere on the internet having links to those pages marked as nofollow by you, then those pages will be crawled. The nofollow directive simply states that ‘Do not index the linked pages because I have linked to them. But, if someone else has linked to them and has not marked them as nofollow, then you are free to index them’.
4. none – none combines the features of both noindex and nofollow tags. The crawlers will neither index your pages nor skim through the links.
5. noarchive – You might have noticed a cached label with most of the website links on SERPs. It shows that Google has captured a copy of your site into their server to display in case it goes down. That being said, the noarchive tag turns off cached version in search pages.
6. nosnippet – The text snippets in search results help people find what’s on the webpage. If you want to keep the content exclusive, you can turn this header tag on.
7. noodp – Open Directory Project or Dmoz is a man-made directory of websites. Google use the information from there sometimes. You can turn it off with this tag if you want to.
8. notranslate – Do you want to disable translation on your site? Then use notranslate for the exact purpose.
9. noimageindex – If you allow, the images on that page will not be indexed. This is similar to nofollow tag. If the same image is present on some other page, then that image may be indexed.
10. unavailable_after – In Blogger, you will get a field right to this tag. So, the webpage will be deindexed after this time.
Setup Custom Robots Header Tags in Blogspot
At First you need to enable this option from your blogger settings.- Log into your blogger account.
- Now start to Settings >> Search Preference
Click on the edit link under the Custom Robots Header Tags section as shown in under screenshot.Once you click on the edit link you will see many options. Simply tick on the options which shown in the below image.
- Now click on ''Save Changes'' button.
- finally you are done.
Bottom Line
Incorrect use of robot tags can affect the performance of your site in search results. These options should be used only if you are completely sure of what you are doing. Generally, a normal blogger wouldn’t be requiring these options.21 May 2016
How To Submit Blogger Sitemap To Google Webmaster Tools?
Are you looking for some love… from Google? Other than buying paid traffic through their AdWords program, the best way to get more traffic from them is through search engine optimization.
Google Webmaster tool is a free service offered by Google that helps you monitor and maintain your site's presence in Google Search results.
You just need to verify your blog ownership in Google Webmaster Tools and then submit a simple sitemap. It is very important to submit blogger sitemap to Google in terms of SEO which tells Google about your blog and its content.
Let see how to add blogger sitemap to Google Webmaster Tools.
Read Also: How To Add Costom Robots.txt File in Blogspot Blog?
Once you click the button, a small box will appear.
step 5. Add the below code in the text field.
This is the sitemap code for your blogger blog which you need to add.
step 6. Press “Submit Sitemap” button.
step 7. Refresh the page.
Congratulation! you are done.
Note: The above sitemap will work for 500 posts only. If you have more than 500 posts in your blog, then you have to add one more sitemap. but at this time you have to add this code.
What do you say? Do you have any problem or suggestion for xml blogger sitemap? Let me know here
Read Also: How To Add Custom Robots Header Tags Settings In Blogger
Google Webmaster tool is a free service offered by Google that helps you monitor and maintain your site's presence in Google Search results.
You just need to verify your blog ownership in Google Webmaster Tools and then submit a simple sitemap. It is very important to submit blogger sitemap to Google in terms of SEO which tells Google about your blog and its content.
Let see how to add blogger sitemap to Google Webmaster Tools.
Read Also: How To Add Costom Robots.txt File in Blogspot Blog?
Submit Blogger Sitemap To Google Webmaster Tools
step 1. Sign in to Google Webmaster Tools.
step 2. Click on the blog title for which you want to add sitemap.
step 3. Click on Sitemaps button as shown below.
step 2. Click on the blog title for which you want to add sitemap.
step 3. Click on Sitemaps button as shown below.
step 4. At the top right corner of the page, press Add/Test sitemap button.
Once you click the button, a small box will appear.
step 5. Add the below code in the text field.
atom.xml?redirect=false&start-index=1&max-results=500
This is the sitemap code for your blogger blog which you need to add.
step 6. Press “Submit Sitemap” button.
step 7. Refresh the page.
Congratulation! you are done.
Note: The above sitemap will work for 500 posts only. If you have more than 500 posts in your blog, then you have to add one more sitemap. but at this time you have to add this code.
atom.xml?redirect=false&start-index=501&max-results=500The sitemap which we submit to Google Webmaster Tools is a XML sitemap which is used by search engines to find our content easily.
What do you say? Do you have any problem or suggestion for xml blogger sitemap? Let me know here
Read Also: How To Add Custom Robots Header Tags Settings In Blogger
19 May 2016
How To SEO Optimize Your Blogspot Blog Post Titles
By default Blogger or Blogspot’s Post Titles are not well SEO Optimized. Title is most important thing when comes to search engine optimization. But in Blogger first comes the Blog name and then blog post’s title, but today we are gonna learn how to change that. We will tweak blogger’s template to make Post Title appear first.
Post titles are the one which is viewed by the visitor first. When you make a better first impression with the catchy blog post titles (while showing in the search engine results, social media or any place), you have the more chance to get the visitors to your blog.
In a nutshell, your post CTR will be increased. Let’s check it out the steps to SEO optimize blogger blog post titles.
Step 1:- Open up your desired blogger blog then “Template” >> “Edit HTML”.
Step 2 :- click anywhere inside the code area and press the CTRL + F to open the Blogger search box.
Step 3 :- Type or paste the code below inside the search box to find it
Step 4 :- You need to replace the code above with this one.
Step 5 :- Click save Template and you are done.
This is called "Blogger/blogspot title swapping" Swapping blogs title can help boost your position in search engine result page listing and also increase clickthrough. from an SEO perspective. page title is the most important element in your blog in term of ranking well in search engines.
Post titles are the one which is viewed by the visitor first. When you make a better first impression with the catchy blog post titles (while showing in the search engine results, social media or any place), you have the more chance to get the visitors to your blog.
In a nutshell, your post CTR will be increased. Let’s check it out the steps to SEO optimize blogger blog post titles.
Step 1:- Open up your desired blogger blog then “Template” >> “Edit HTML”.
Step 2 :- click anywhere inside the code area and press the CTRL + F to open the Blogger search box.
Step 3 :- Type or paste the code below inside the search box to find it
<title><data:blog.pageTitle/></title>
Step 4 :- You need to replace the code above with this one.
<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title> </b:if>
Step 5 :- Click save Template and you are done.
This is called "Blogger/blogspot title swapping" Swapping blogs title can help boost your position in search engine result page listing and also increase clickthrough. from an SEO perspective. page title is the most important element in your blog in term of ranking well in search engines.
18 May 2016
How to Change Width In Blogspot Blog
Why to increase the width
- You can have bigger images in your blogs.
- Good result in old browsers like Internet Explorer 6.
- Sidebar in perfect position.
- It gives your blog an overall clean look.
Steps to follow
- First of all you need to go to Design tab and then select Edit HTML.
Tip: Click on Download Full Template to backup your template.
- Find the following code between <b:skin> and </b:skin>.
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Remember: The width factor in #outer-wrapper defined the overall width of blog, in #main-wrapper it defines the width of your posts and in #sidebar-wrapper it defines the width of your sidebar.
3- Now you know the code, you can increase the width in #outer-wrapper and then increase in the #main-wrapper (for posts) or #sidebar-wrapper (for sidebar).
Warning: When you increase the width of any tag, see the preview and if you're satisfied only then you should save.
4- Similarly if you want to change the width of your header, here is the code in your template CSS between <b:skin> and </b:skin>.
/* Header
-----------------------------------------------
*/
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
5- Just change the width factor and see the preview, if you're happy with the outcome, save the template otherwise discard the changes.
Contact Me If Something Does Not Work!
If you are unable to make changes as described
in the tutorial, please drop me an email
at Sanjayjoshi592@gmail.com.
I'd charge $10 to fix the issue.
How To Customize Blogger Header [MUST KNOW]
What We'll Do?
Our objective is to change the outlook of our header as well as play with the header widget itself.
The Default Code
In your Blogger CSS, the header is defined by the following piece of code:
/* Header
-----------------------------------------------
*/
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}
#header a {
color:$pagetitlecolor;
text-decoration:none;
}
#header a:hover {
color:$pagetitlecolor;
}
#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}
#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}
Understanding the Default Code
-> #header-wrapper describes overall look of your header.
-> #header will describe the overall look of your blog title and description.
-> #header h1 specifically describes your blog title.
-> #header .description will be responsible for the description of your blog.
-> #header img will become affective if you're using an image as your blog title.
Understood the Default Code? Start Making it Tasty!
I'm changing the overall look of header by making modifications in #header-wrapper.
-> To change the width of your header increase the value of width in #header-wrapper from 660px to a higher number i.e. 750px and see the preview.
-> To add color in the background, you can add background-color:#000000; in #header-wrapper. Please note that #000000 is hex code of black color, you can change it with your desirable code. To easily capture colors on web or on your computer,
-> Our header border is a thin solid line and it is defined by border:1px solid $bordercolor; in #header-wrapper. If you want to change the thickness of your border, change 1px to 2px and preview. You can also create a dotted line border by replacing solid with dotted. Last thing you can do is to change color of your border, you need to replace $bordercolor with #FF0000. Please note that #FF0000 is the hex code for Red color.
Now I'll try to change the appearance of blog title.
-> The blog title is defined by #header h1.
-> Currently the line-height is 1.2em, change it to 1.5em and you'll see that the space occupied by blog title has increased. Please note that this setting will not affect the font size.
-> Now lets try to change the size of the font. We need to add a new tag in #header h1 which is font-size:15px; and then see the preview, if font size is small increase the 15px otherwise decrease it.
-> To change the font of your blog title, you need to replace font: $pagetitlefont; with font-family: arial, "lucida console", sans-serif; now your blog title will appear in Arial font. I'm adding 3 fonts because your visitor might not have Arial font available on his/her computer then 2nd font can be used.
-> By default, your blog title will appear in uppercase because of text-transform:uppercase; property. Change uppercase to lowercase and then the title will become lowercase. If you don't want both uppercase or lowercase, you can remove text-transform:uppercase;.
-> Last property is letter-spacing:.2em; it defines the spacing between two alphabets. You can increase it (.3em, .4em, .5em) or simply remove it and see the preview.
Read Also: How to Change Width In Blogspot Blog
Add more widgets around header in 'page elements' section.
By default, you can't add any widget around your header because there's no "Add a Gadget" option beneath or above your header. So, lets add that option by ourself.
The default header widget code in 'edit html' section.
First of all we must know the default code, only then we can play with it. If you'll go to "Edit HTML" tab and search for <body> you'll find some code like this some lines after <body> tag...
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Blogger FAQs | Premium Blogger Templates, Tutorials, Hacks, Tips &amp; Tricks. (Header)' type='Header'/>
</b:section>
</div>
Change the header widget code.
All we need to do is to change the value of 'maxwidgets' from '1' to '3' and 'showaddelement' from 'no' to 'yes' and now the code should look something like this:<div id='header-wrapper'>What I've done is that I've increased the maximum number of widgets that can be installed around our header (maxwidgets='3') and I've also made the option of "Add a Widget" available in your header (showaddelement='yes') you need to save the template here and go to the "Page Elements" section to see the results.
<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Blogger FAQs | Premium Blogger Templates, Tutorials, Hacks, Tips &amp; Tricks. (Header)' type='Header'/>
</b:section>
</div>
Read Also: How to stop Tracking your pageviews in Blogger
Why it is good to have more widgets around header?
This is an obvious question and the answer is very simple. Your header is the first area where an incoming visitor will look so you can have an Adsense ad, a search engine, a translator or any other important widget in your header.
Contact Me If Something Does Not Work!
If you are unable to make changes as described
in the tutorial, please drop me an email
at SanjayJoshi592@gmail.com.
I'd charge $10 to fix the issue.
17 May 2016
How To Add Alexa Widget to your Blogger Blogs
If you think that Alexa Ranking is important to you, You may be considered to add the Alexa rank checker on widget sidebar of your blog directly. The high ranked blog site is motivated for advertisers and webmasters to take your blog site seriously. Now you can add and to show your blog or website ranking checker direct as well as you perform your visitor the interesting to your blog site by showing a web site popularity of page ranking.
In case you are happy and familiar with Alexa widget Ranking, you might be want to use it to place to your blog or website on the widget sidebar section.
Add Alexa Rank Widget To Blogger Using HTML Code
The following alexa widget will show only your blog's world ranking.
<a href="http://www.alexa.com/siteinfo/trueblogmoney.blogspot.com" rel="nofollow" target="_blank"><script src="http://xslt.alexa.com/site_stats/js/t/a?url=trueblogmoney.blogspot.com" type="text/javascript"></script></a>
It will only display the alexa ranking of your blog. If you want to show your site linking too, you can use the following alexa widget script.
<a href="http://www.alexa.com/siteinfo/trueblogmoney.blogspot.com" rel="nofollow" target="_blank" ><script type="text/javascript" src="http://xslt.alexa.com/site_stats/js/s/a?url=trueblogmoney.blogspot.com"></script></a>
Note: Don't forget to change the domain name with your blog URL on both places. Change trueblogmoney.blogspot.com to yourdomain.com on both two places. I have also added nofollow tag to this external link because dofollow link is not necessary for your blog's alexa page.
You can also make this alexa widget invisible to your readers if you want. Your readers could not be able to view the alexa widget but the visit would be count in alexa ranking.
Read Also: How to Add Floating Social Media Sharing Buttons to Blogger
Add Invisible Alexa Widget to Blogger
If you want to add invisible alexa widget to your Blogger, use the following code instead of the above codes.
<a style="opacity:0" href="http://www.alexa.com/siteinfo/trueblogmoney.blogspot..com" rel="nofollow" target="_blank" ><script type="text/javascript" src="http://xslt.alexa.com/site_stats/js/s/a?url=trueblogmoney.blogspot.com"></script></a>
Don't forget to change your domain name in both places. Once you add this code your website, you or your visitors can't see this widget. If you hovering your mouse on that place your cursor pointer will going to change.
Now, follow the steps to show your blog's alexa widget into your blogs.
If you are using Google Blogger platform, go to Blogger dashboard -> select your blog -> Layout -> Add a gadget (from sidebar or footer or header) -> choose "HTML/JavaScript" paste above alexa script here, and finally save it.
congratulation !! you are done.
14 May 2016
How to stop Tracking your pageviews in Blogger
Blogger provides a built-in stats monitoring tool that provides you the most comprehensive information about your visitors. It keeps track of your visitors and provides in-depth details about the total number of Pageviews, the operating system they are using, the traffic source and etc. Since, it also tracks your Pageviews, so it gets difficult to identify how many visitors or page views your site is serving. So, if you are looking to Stop Tracking your own Page views in Blogger Stats then in this article, we will show you How to Stop Tracking your own Pageviews in Blogger.
Read Also: How To Customize Blogger Header
The first step you need to take is to log in to your blogger account. After logging in, from the dashboard go to your site >> Stats >> Overview. Now on the right side of your screen, just under the page views statistics select the “Don't track your own pageviews” link and proceed to the next step
Read Also: How To Customize Blogger Header
Why you should Stop Tracking Your own Pageviews?
As a website owner, you might visit your site more often may be 10 to 20 times a day and during the visit you might serve hundreds of pageviews yourself. Since, Blogger keeps track of all visitors it would also include your views in the traffic statistics. For that reason, you will be unable to know the real performance of your site. For instance, your site has 6000 views per day out of which 2000 views are yours, so the real visitors are just 4000. Now you can notice the foremost difference in your real traffic.
The first step you need to take is to log in to your blogger account. After logging in, from the dashboard go to your site >> Stats >> Overview. Now on the right side of your screen, just under the page views statistics select the “Don't track your own pageviews” link and proceed to the next step
A new window will pop out asking you whether you want to track your own pageviews or not. Now just check the box next to the “Don't track your own pageviews” and press the save button to finish the whole process. At this instant, Blogger would stop tracking your own views until or unless you clear your browser cookies or tried to access your site with different browsers
I hope this tip was helpful for you in getting rid of your views from your site. However, you can also try Google Analytics for tracking because it is the most accurate tracking service. If anyone has a better tip for tracking visitors then, do not hesitate to leave your comment below.
Read Also: How to Change Width In Blogspot Blog
Read Also: How to Change Width In Blogspot Blog
Subscribe to:
Posts (Atom)
