Posts

Showing posts with the label Blogger Tutorials

Add Facebook Like and Share Button to Every Post in Blogger

Image
Facebook like and share buttons make easy to let your content to be shared by facebook users on their walls. This also helps you increase your social media traffic.Today we will learn how to add a facebook like and share button below or above  every post of blogger. Facebook Share and Like Button Below Every Post Login to blogger account Go to Template &gt; Edit HTML Now in the blogger template editor search for  < data:post.body/> Just below paste this code : <iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&amp;width&amp;layout=standard&amp;action=like&amp;show_faces=true&amp;share=true&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:80px;" allowTransparency="true"></iframe> If you want to add it above the posts just paste it before < data:post.body> Now you and y...

Display Labels Below Every Post in Blogger

Image
Labels are beautiful way to categorize your blogger posts. Labels are very good way to let user see your older posts from the same label. Today you will learn how to display labels below every post in blogger. Adding Labels Below Posts in Blogger Login to blogger account Go to Template > Edit HTML Now in the blogger template editor search for   <data:post.body/> Just below paste this code : <style>.post-labels { float:left; font-size:14px; color:#555 } .post-labels a { color:#111 text-decoration:none; } .post-labels a { text-decoration:undeline; }</style><span class='post-labels'> Posted in <b:if cond='data:post.labels'>           <b:loop values='data:post.labels' var='label'>             <a expr:href='data:label.url + &quot;?&amp;max-results=10&quot;' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &qu...

How to Display Author Name Below Every Post in Blogger

Image
Author name acknowledges the person who has written that blog post. In a blogger blog you can have upto 100 authors per blog . You can automatically display who has written the post by following this simple tutorial. Blogger/BlogSpot collects the data of the author from their blogger profile in case you have not connected your Google+ account with Blogger. If one haven't connected their profile to google+ then they can change the name of their blogger account easily. Whenever that author will publish a post, this display name will appear as the name of the author. Adding Author Name Below Posts in Blogger Login to blogger account Go to Template > Edit HTML Now in the blogger template editor search for  <data:post.body/> Just below paste this code : <span class='tfauthor'> Post By: <a expr:href='data:post.authorProfileUrl' title='posted by'> <data:post.author/></a>  </span><style> .tfauthor a { t...

Redirect Blogger 404 (Page Not Found) Error Page To Homepage

Image
A 404 error page is displayed when there is no content to display, the content of that page have been moved elsewhere or the url is misspelled. The 404 error page shows your visitors and search engines that their is no page to display and it displays a message something like "Sorry, the page you were looking for in this blog does not exist". This will make a bad impact on your traffic to solve this you can use this tutorial to redirect blogger 404 not found page to homepage. Redirect Blogger 404 Error (Page Not Found) To Homepage Go to blogger DashBoard login >  select your blog and then go  to Settings > Search preferences > Custom Page Not Found. Edit this field and paste the following code  Sorry, the page you're looking for does not exist. You will be redirected to homepage in 5 seconds. <script type="text/javascript"> BSPNF_redirect = setTimeout(function() { location.pathname= "/" }, 5000); </script> ...

Disable Comments on Blogger Pages

Image
Every blog have some pages like - about, contact and privacy policy. Blogger by default enables comments for pages. But, none of the users will be interested in posting comments on your blogger page and it also doesn't look professional. So i will show you how to remove or disable blogger comments on pages. How to Disable and Remove Comments on Blogger Pages  The steps you need to follow are to login into your blogger account.  Go to Pages >> Options >> under “Reader comments” and you will find their following three options: Allow:   Show comments in pages(it is default) Don't allow, show existing:  Checking this will not allow comments in pages, but will display the previous comments. Don't allow, hide existing:  Checking this will not allow comments in pages, hide the previous comments too. Select “Don't Allow” as your option and Press “Done”, ALSO READ :  How to Disable Anonymous Comments on Blogger ?   If you hav...

Adding a Floating Drop Down Menu In Blogger With Search Box

Image
A drop down menu is something that contains navigation URl's of your blog and making it easier to find the content users are looking for. A floating element is something that sticks to your blog at the place you post it and scrolling doesn't affects it position. Today I am sharing a drop down menu for blogger with search box. Adding Floating DropDown menu to blogger Login to your blogger dashboard. Select your blog. Select Template . Click Edit HTML.  Add this code just above the body tag <style> #naviopdropcont{   width:100%;   height:45px;   display:block;   padding:0;   margin:0 0 20px 0;  z-index:100;   top:0px; left:0px;  position:fixed;     box-shadow:2px 2px 5px  #444444; -moz-box-box-shadow:2px 2px 5px  #444444; -web-kit-box-shadow:2px 2px 5px  #444444; -goog-ms-box-shadow:2px 2px 5px  #444444; background:#000; } #naviopdropnav{   f...

How To Embed Google+ Posts In Blogger

Image
Google+ is becoming a popular social network day-by-day, and especially most of the bloggers now use google plus as one of their daily used social networks. If you are a Google+ user and post updates on your Google+ profile frequently then this tutorial is straight away for you. With embedding your google+ post on blogger you can get more +1's on your blog. Users can follow you on Google+, add comments to your post and also share it without leaving your awesome blog. Embedding Google+ Comments In Blogger Step 1: Go to any Google+ account from where you want to embed the post in your blog. Step 2: Go to the post which you want to embed in your blog(for this click on the timestamp link). Step 3: hover the mouse pointer on down arrow above post title and Click on it. Step 4: A dropdown menu will appear with many options. Step 5: Choose Embed post option from the list of option.           Step 6: Now a code will appear in a box copy this ...

How To Add Google Translate To Your Blogger Blog

Image
Many of the users of blogger are blogging about the content that can be used worldwide and not just in the area they live, but we live in a world where in every 10 miles languages change(not a fact, just a saying) . So to make your blog be usable and readable by the worldwide audience you may use a free service provided by Google , Google Translate. What is Google Translate Google translate is a web service provided by google for normal users as well as webmasters to traanslate their website content in the language end users want. Adding Google Translate To Blogger First thing you have to do is go to Google Translate website , then click on website translator link at the bottom. Then click on  Add To Your Website Button. Now fill up the form and in the next step you will have two options Translate all languages : this will display a list of all available languages on Google Translate to your user to translate into. Specific languages: this will add your c...

How To Add Popular Posts Widget To Blogger

Image
Popular posts, as it's name suggests shows your visitors your most popular blog posts name's and links to them. Adding his widget is very simple and cool and it has lots of benefits. This gadget shows which are the most visited blog posts on your blogspot blog, and you can set it to display the info you want in four possible combinations: (1) only the title of the post, (2) a thumbnail of the image and the post title, (3) post title with a summary, and (4) post title with a thumbnail and a post snippet. Why You Should Add A Popular Posts Widget Increase Your Pageviews: Showing your users what everyone is reading is a good idea to increase your pageviews. Higher Income: If you are monetizing your blog increased Page Views can increase your earnings too. Adding Popular Posts Widget To Blogger adding one is a great idea, is'nt it ? let's start the tutorial - Go to Blogger dashboard and sign-in and choose the blog from list. Go to Layout and look f...

How To Disable Anonymous comments in Blogger

Image
With comments users can express what they feel about your blog post and comments are essential part of each and every blog. Blogger also provides it's own commenting system for users to let comment on a blogger blog.By default Blogger allows anonymous comments, Using this any person can comment without giving any info about him/her(even not the name). Anonymous commenting means nothing but allowing strange, unregistered users to comment on your blog without logging in. Anonymous commenting is mostly used by spammers for posting spam links on your Blogger blog. Thus you must disable anonymous comments on your blogger blog to be safe from spam. Disable Anonymous Commenting in Blogger 1. Go to Blogger Dashboard > Settings > Posts and Comments. 2. Under the comments subheading, you will find an option saying 'who can comment?' There will be these 4 options to choose. Anyone: Anonymous commenting is allowed(Anyone can comment) Registered users: only ...

How To Add Meta Description To Blogger ?

Image
So, what you are blogging about on your Blogger blog? Describing this in 150 characters is called Meta Description . Meta description is also displayed on search engines below your Blog link. Meta descriptions are invisible to visitor on your blog but are crawled by search engines. Meta descriptions play an important part in Search Engine Optimization( SEO ) of your Blogger blog. How To Add Meta Description To Blogger  The first thing you have to do is going to your Blogger dashboard and from there, go to Settings > Search  preferences > Meta Tags > Description and click on Edit Meta Description. The screenshot below defines how will it look: How To Add Meta Description To Individual Post On Blogger  Its as easy as you can do it in 5 seconds, Just go to Blogger dashboard then go to the post or page you  want to edit and click on the Search Description setting, and there you enter the text and save by clicking  the Done button. Now you are don...

Add Stylish CSS3 Search Box To Blogger

Image
A search box helps your visitors find the information they are looking for easily and quickly. Most of users coming from search engines or landing at your homepage will want to search the information on your blog and they will need a search box. Today we are giving you a beautiful, responsive CSS3 search box for your Blogger blog. This search box will surely force your visitors to try a search on your blogspot blog. This search box is responsive and even works on non CSS3 supported browsers. How To Add Search Box To Blogger: 4 Steps 1. Go to Blogger Dashboard and select the blog to which you want to add the search box 2. Now click on Layout tab and add a new gadget in sidebar (or wherever you want to add it) and select HTML/Java Script for the gadget 3. Now paste the below code,  name the Title as Search or any other text(you can also leave it blank). <style>.searchform { display: inline-block; zoom: 1; display: inline-block; border: solid 1px #d2d2...

How To Style Blogger Blog Date Header

Image
Hello Blogger's today i am sharing a trick with you  on how to add cool CSS style to your BlogSpot blog date header. What we are going to do in this tutorial is changing the Blogger date header background color with some simple CSS adjustments that will make the date header to float on the left side of your post and to be partially out of the structure like a banner with a colorful appearance.  Customize Blogger Blog Date Header Step 1: Login to blogger dashboard with your Email and password. Step 2:  go to Template > Edit HTML Step 3: Click anywhere inside the text area where the code is and search (using CTRL + F ) for the following code: .date-header span Step 4:  Below this you may find the code above .date-header span { background-color: $(date.header.background.color); color: $(date.header.color); padding: $(date.header.padding); letter-spacing: $(date.header.letterspacing); margin: $(date.header.margin); } Step 5:  Now rep...

How To Optimize Blogger Post Title For SEO

Image
          When searching for something first we see the page title and so the Google does. In this tutorial we will change blogger blog title for better search engine optimization(SEO) and get high ranks in Google Search. This is called "Blogger Title Swapping". swapping blogs title can help boost your position in Search Engine results page listing and also increase clickthroughs. From an SEO (Search Engine Optimization) perspective, page title is the most important element in your blog in terms of ranking well in search engines. By default Blogger post page title is set as Blog Name : Post title Like if your blog's name is Example.com and Post title is hello world this will display the title as Example.com: Hello world , Instead of this a better Search Engine Optimized title would be Hello world - Example.com . How To SEO Optimize Your Blogger Blog Titles For Higher Search Results Step 1: .  Log in to your Blogger Dashboard and go to Template...

How to add Google +1 Button to Blogger

Image
Google +1 (Google Plus One) Button is one click approach to share the post you like on your Google + profile. It also displays count of total shares next to the +1 button . Example Google +1 Button :     Google +1 also shows friends recommendations under your post in Google SERP (search engine results pages). This tutorial will show you how you can add a Google +1 button to every blog post in a Blogger blog. It allows your readers to share your posts to their Google+ circles and contacts right from your blog post. Add Google+1 button to blogger : 8 steps Login to your blogger dashboard and choose desired blog. Go to Template > Edit HTML. Press Ctrl + F and find </head> Copy and Paste below code there <!-- Google +1 Start --> <b:if cond='data:post.isFirstPost'> <script type="text/javascript"> (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.sr...

How to Add Custom Robots.txt File to Blogger

Image
Allowing the Search engines to Crawl and Index your blog's post's and pages is very important thing in the terms of Search Engine Optimization(SEO). However sometimes you may not want to index all pages and post in search engine. Then you have to use robots.txt file. READ -  What is a robots.txt file ? Today you will know how to change robots.txt file in blogspot, 9 Steps: First of all, go to blogger.com and login using your login credentials. Select the blog of whose “Robot.txt” file you wish to edit. Click  the settings tab. From the Settings tab, click on the “Search Preferences” sub-menu. Now, from the “Search Preferences” sub-menu look out for the “Custom Robots.txt” option. Click on the “Edit” button beside the “Custom Robot.txt file” option. A box will appear below the option. There you can add your custom robots.txt text. Now if you have some knowledge about robots.txt file you can edit it yourself or try out the example below, User-agent: Med...

How To Add Google+ Comments To Blogger Blog

Image
Hello Bloggers !!! Today i am going to share with you how can add google+ comments to your beautiful blogger blog. As many of the bloggers are using google+ comments to increase their sites social activity. now you can also add google+ comments to your blog. Why should you add google+ comments Many people already asking why should they add a google+ commenting system to their blogger blog. So we have got some answers to your question. Google+ Comments is an awesome alternative to the default commenting system on Blogger and it lets you bring the following conversations together in one place, right under your blog post ! It includes : Comments made on your blogger post Comments on the blog post you have shared on google+ Shared content on google+ that links to your post How to add Google+ comments - Steps : Step 1:   Click on the google+ tab on your blogger dashboard at right. Step 2: Now on the right side check the box that says - Use Google+ comment...

How To Add Custom Favicon To Your Blogger Blog ?

Image
Its your own blog and you want to customize it fully . But there is a problem that is worrying you , i.e. the orange b icon in the address bar . That is called a website's favicon . What Is A Favicon ? A favicon /ˈfævɪkɒn/ (short for Favorite icon), also known as a shortcut icon, Web site icon, tab icon or bookmark icon, is a file containing one or more small icons, most commonly 16×16 pixels, associated with a particular Web site or Web page. A web designer can create such an icon and install it into a Web site (or Web page) by several means, and graphical web browsers will then make use of it. Browsers that provide favicon support typically display a page's favicon in the browser's address bar (sometimes in the history as well) and next to the page's name in a list of bookmarks. Browsers that support a tabbed document interface typically show a page's favicon next to the page's title on the tab, and site-specific browsers use the favicon as a desktop ico...