Change 'Read More' or 'Jump Break' Link to Button in Blogger

Stylish Read More Button
Today I'm going to teach how you can insert read more link in your blogger posts.

After inserting your read more links in your blogger posts you can change them to stylish buttons of your choice.
Now first we will see how to insert read more links in the blogger posts.
"Back To Top" Button for Blogger

How to Insert 'Read More' links in Blogger Posts.


While writing a post in blogger post editor there is an option called "Jump Break" which can be used to insert the read more link anywhere you want in the post. See the image below.

how to insert jump break

That option is actually used to insert the Read More link inside a post in blogger. Click this option where you want to insert the Read More link. Usually people insert it after the first paragraph.

Inserting this Link will only show that part of the post that is above the "jump break" on the home page. In place of the remaining post it will show a link as 'read more' to read the full post.

You can actually change this text link to an image link or stylish button link.Now let us see how to change this link to buttons.

Change "Read More" Text link to Button.

Follow these steps to change the text with a button.

1. Go to Design tab >> click "Edit html" >> Tick "Expand widget Templates" checkbox
2. Find below text from search (Ctrl + F)

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>

3. Now remove these words from the above code.
 + &quot;#more&quot;

Use Mouse Pointers in Blogger
4. After removing these codes your html will look like this.
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>

5. Now look for these words
<data:post.jumpText/>
Replace it with your Text which you want to appear in the place of 'read more' or with your image url
 <img src="http://image-URL.png"/>

Inseert this Stylish Read More Button
6. If you want to insert this picture as your jump break button then put this code.
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZy-dG1DdzMFdVjbYMkjtdKL9vdxDFJlUwY4Mbd6qL39n88fAaO2i99erFfKcuhLb_5h4uLrCduA9sG3W3v_vOnR6r7LGkLtJhigeDUoozCN0tIAZ0dEPykdVHr9sVjRwRZwSd7CHd-97b/s1600/read+more+in+blogger.gif" width="87" height="47"/>

7. Now save your template ,everything is done. View your blog and see the button Working.

Change Older Posts,Home and Newer Post Links to Buttons in Blogger

In Blogger Blogs, there are newer posts, home and older posts links below every post. That's been set by default by blogger , but you can change them to buttons as mentioned above or the text of your choice. e.g.. next page or previous page.
Preivious, Home and Next Post Button

In this tutorial I'll teach you how you can change these links into buttons or change the text to your choice.
So let's start changing these links by some very simple steps.

Also Read Procedure to  Remove "Subscribe to: Posts (Atom)" Link on Blogger?

Change Older Posts,Home and Newer Post Links to Buttons in Blogger


Start the procedure by following below steps:

Log-in to Blogger dashboard
Go to Template >> HTML >> Check the Expand Widget Template

For Previous Post Button search for below code (tip: use CTRL+F)
<data:newerPageTitle/>
Replace it with this code below:
<img src="Img-Url-for-previous-button"/>


For Next Post Button search for this code:
<data:olderPageTitle/>
Replace it with this one below:
<img src="Img-url-for-next-button"/>


For Home Button search for this code:
 <data:homeMsg/>
The above code may appear twice, so both times replace it with below code:
<img src="img-url-for-home-button"/> 

Now save your template and you've done almost all steps :-)

Things to Remember



  • Change bold img tag URL's with your desired Button URL's or if you just want to change the text then only write the desired text (do not write any URL.)
  • You can download the buttons from Google then upload it on your blog new post to get the URL on the images, then copy that URL's and paste them in these codes and then visit your Blog and see the butons working.

If you have any questions regarding this post than comment below.

How to Remove Subscribe to: Posts (Atom) Link on Blogger?

In Blogger, there is a link namely "Subscribe to: Posts (Atom)" which appears below every post sometimes at left side or at center. It also appears on Blog'e home page. By clicking this link a visitor can subscribe to your RSS feeds. but instead of this unnatural link, there are many other awesome ways to give visitor the opportunity to subscribe to your blog feeds. 

Subscribe to: Posts (Atom) Link

Earn Money by clicking ads
Mostly people, especially new blogger users dislike this link. They want to make their blog more beautiful and shiny. So and therefore, they want to remove this link as quickly as they find a solution for it. There are many tricks have been shared on the internet about this issue. But the one I'm going to share, is the easiest method to remove this link from your blog. Let's now come straight to the solution.
Use Related Posts Widget in Blogger/Blogspot

How to Remove Subscribe to: Posts (Atom) Link on Blogger?


You can remove this link by using many tricks, but this is the simplest & quickest method, because by using this method we will just hide it from our blog by using CSS property. You'll have to add just one single CSS line to your blog's style sheet and that's all. Now follow the steps to do this:

You would also like to use:  Social Media Sharing Buttons in Blogger.

  • Log-in to your blog
  • Template >> HTML >> Proceed
  • Search For this code ]]></b:skin> (tip: Use CTRL+F)
  • Now Just above/before ]]></b:skin> insert following code

.feed-links { display:none !important; }
Save your template and view your blog. Feed Atom link will no longer be there.

Write Best Post Title For Search Engine Optimization(SEO)

Today we're going back to basics! And nothing is more basically important to a site than properly written title tags. You know the ones that used to appear in the little blue bars in your browsers. Most modern browsers try to hide these, though that doesn't stop them being helpful!

So what is a title tag? Why is it important to SEO, and how do you write the darn things?

Meta Tags:


First let's talk about meta tags. Meta elements are HTML or XHTML elements used to provide information about a web page for the search engines and website users.

Such elements must be placed as tags in the head section of a HTML document. These elements are the:

  • Title Tag
  • Description
  • Keywords (No one uses these anymore and you can get spam "points" for overuse on Bing, so just forget them. If you have keyword stuffed "spammy" ones, you probably want to fix those.)

What is a Post Title Tag?

Title tags are part of the meta tags that appear at the top of your HTML inside the < head> area. Think of title tags like the title of the chapter of a book. It tells people and search engines what your page is about.

Title tags are also part of what makes people decide whether to visit your site when it shows up in the search results. The title tag should contain important keywords to help the search engine determine what the page is about.

Write title tags for humans; format them for search engines.

NOTE: Every experienced SEO has their own unique methods to doing this, so I'm going to give you best practices along with some of my methods. However, there are a million ways to write a title tag.

What Does the Title Tag Look Like?

The title tag looks like this in your HTML code:

<title>Important Words Go Here</title>

Here is how title tags appear in a browser that uses the bar to display title tags (other browsers might only use the tab space or not show them at all):
Title Tags in Browser Bar

Finally, here's where Google shows the title tag:

Title Tags in Google Search

REMEMBER: A title tag is THE MOST IMPORTANT SINGLE TAG in your page. It tells the search engines what your page is about. It is still vitally important to your SEO strategy.

Quick Checklist

When you're writing your title tag what do you need to know? Here's a quick checklist with some tips on how to write optimized title tags:

Length: Title tags should be a maximum of 70 characters long, including spaces.
Keyword Placement: Your most important words (keywords) need to be first in your title tag, with your least important words being last in the title tag (most to least). However, if you're working in a language that reads right-to-left, then it is reversed, and it would be least important to most important.
Keyword Separation: Use pipes | to separate important (keyword) phrases (no commas, underscores, dashes or any other punctuation unless the keyword is written that way).
Wording: Keep your important phrases short and simple. Leave out words that would make it read like a sentence. (e.g., and, if, but, then, etc.)
Company Name: If your company name is not part of the important (keyword) phrases, put it at the end of the title tag; if it is part of your important words, put it as the first words in the title tag. Some SEOs will tell you to leave it out. You can leave it in for branding purposes – so people will see the brand and click. This isn't valid for all sites.
DON'T DUPLICATE Title Tags: They must be written differently for every page. Don't mass replicate your title tags.
Make It Relevant: Title tags must be written to be descriptive of the content on the page. (e.g., the About Page would be:
About | Important Keywords | Company Name

or

Important Keywords | About Us | Company Name.

Google & Title Tags

Sometimes Google doesn't like your title tag. In fact, sometimes Google thinks it can pick a better one, so it will rewrite the tag for you. There are several places it might get this information, most of them you won't prefer to one you crafted yourself.

While there isn't any assurance your title tag won't be replaced, make sure you write a title tag that is page related, content descriptive, short and sweet, and not keyword stuffed. This is your one defense.

Keyword Stuffed Title Tags

You've probably come across badly written title tags that try to rank for everything or repeat a word over and over. Keyword stuffing is the worst offense when it comes to title tags.

Say your site is trying to rank for Blue Bells and Yellow Bells. Many times you will see the main keyword repeated multiple times across the title tag. It might appear like this:

Blue Bells, Yellow Bells, All Types of Bells | Bells Bells and More | Doors.com

This is bad title tag writing. You don't need to repeatedly write the keyword. Google especially can pick up the keywords like your eyes can read them, so you would best to rewrite this as

Blue & Yellow Bells | Doorbells | Doors.com

We removed the extra words, combined the products (if possible you would split these products to separate pages, a blue and a yellow, but this isn't always feasible or desirable) and added a category keyword which would appear in the middle of the title tag on all doorbell related page titles, then end it with the domain name (again this is for branding purposes – there are also good reasons to not do this, it depends on the SEO).

Now our title tag is short, sweet, simple, and to the point. We have also categorized it and added in branding for good measure.

We also took out the word "and" and replaced it with an ampersand (&) so that you don't accidentally relate the two items and make Google think you want people who are looking for Blue AND Yellow Bells.

And there you go, a basic lesson in title tag writing. This can be the most challenging and fun part of any SEO's work! Or should that be "Inbound Marketer's" work?

Some Title Tag Writing Examples

Let's look at a few examples of writing title tags with actual examples.

If your important words (keywords) were "Charlie Sheen" and "Winning" your title tag would be written in that order:

Charlie Sheen Winning

Charlie Sheen would be the first words in the tag.

Now what if we had more than one set of words? What if my keywords were "Charlie Sheen Winning" and "Tiger's Blood"? Your title tag would still be written with "Charlie Sheen Winning" as the first words in the tag. Then you would add a pipe | and "Tiger's Blood" as the second phrase:

Charlie Sheen Winning | Tiger's Blood

Don't use hyphens, underscores, commas or any other type of character – just pipes.

Now what if we had more than one set of words and a company name we were not worried about optimizing for (the company name was not part of the reputation issue). If my words were "Charlie Sheen Winning" and "Tiger's Blood" and "CBS", you would separate these three phrases with pipes, with CBS last and farthest from the beginning, which Google sees as the least important phrase:

Charlie Sheen Winning | Tiger's Blood | CBS

The company name can be repeated in every title tag as long as it as not part of the important words and appears at the far right end of the title tag.

What about sentences? Couldn't you just write a sentence such as "Charlie Sheen Says Winning And Tiger's Blood And Gets CBS Riled Up"? You could, but those extra words like "says", "and", and "riled", dilute your important words and make them less important to content, so best to keep it short, simple, and clear. Leave out the extra words.


Title Tag Writing Pop Quiz!

When using strict SEO principles. Which are the BEST title tags for the important (keywords): (pick 2) "Charlie Sheen" "Winning" "Howard Stern Show" when optimizing (trying to rank for) the words "Charlie Sheen (1) Winning (2)"


  1. Charlie Sheen Winning on the Howard Stern Show
  2. Howard Stern Show & Charlie Sheen | Winning
  3. Charlie Sheen is Winning Points on the Howard Stern Show
  4. Charlie Sheen | Winning | Howard Stern Show
  5. Charlie Sheen and Howard Stern Winning the Show
  6. Winning | Charlie Sheen on the Howard Stern Show
  7. Charlie Sheen Winning | Howard Stern Show


Doesn't matter as long as the words are all there

If I were writing this, the correct answer would be No. 4.

How to Remove "Powered By Blogger" Attribution from Blogger?

Blogger Attribution
As many of you know that Blogger is completely developed in XML (Extensible Mark Up Language). Blogger has its own XML codes which you can use to add elements or to remove elements. Those who make Blogger templates must know XML. There are many attributes or links on default blogger templates which sometimes people don't want to see on their blogs. And one out of those links is "Powered By Blogger" Attribution which appears in every blogger default template at the footer.


So today, we will find the easiest and quickest way to remove this link.

Steps:

  1. Go to Blogger Dashboard.
  2. Now click on your Blog Title.
  3. Navigate to Template tab.
Blogger Template
Note: Before editing your template, you may want to save a copy of it. Back Up Your Template.




4. Click on Edit HTML button.

5. Click Proceed button to continue.

6. Now you have to find the code of attribution element. Search for the code snippet similar to below in the template,
<b:widget id='Attribution1' locked='true' title='' type='Attribution'>

7. Now alter the attribute locked value to false in the line of code, which cause element unable to remove.
i.e: <b:widget id='Attribution1' locked='false' title='' type='Attribution'>

8. Now you will able to remove attribution element. But still you won't be able to add any element to your page footer. So you need to change another line of code to allow adding elements to footer. Find the code snippet similar to below from the template.
<b:section class='foot' id='footer-3' showaddelement='no'>

9. Now change attribute value showaddelement to yes as below,
<b:section class='foot' id='footer-3' showaddelement='yes'>

10. Now Save template.

Blogger Layout

11. Navigate to Layout tab from left pane.




12. Find Attribution element bottom of the page.

Blogger Attribution Element




13. Click on Edit link correspond to the Attribution element.

14. Now click Remove button on pop up window.

15. Now Attribution element has been removed. You can add another element using bottom Add a Gadget link to add custom attribution or any other element.

16. Click Save arrangement button.

Enjoy :-)

Vertical Social Media Sharing Buttons Widget For Blogger

Vertical Social Media Sharing Buttons Widget For Blogger
Blogging becomes interesting when people share your content on different social media sites and other websites with friends. In order to share your content on social media sites by visitors; you need to add some beautiful and smashing social sharing widgets. If your widget is looking attractive and catches people's attention then your content might get shared by visitors. For this purpose, there has been a huge number of Blogger widgets and plugins by different designers. Today, I would like to share a floating social sharing widget with you which scrolls down automatically when visitors scroll down the page. You can see this widget on my blog. The same widget I'm sharing with you.

You would also like:  Facebook Widgets for Blogger

The Benefits of This Widget:

There are many advantages you can get by using this widget on your blog. The first benefit is that you can have all social sharing buttons in a single widget and also one can send your content to someone via email by using this widget. The second benefit is that this widget don't have loadable JavaScript or jQuery codes so it can easily be loaded by browser and also it scrolls down automatically and user can observe sharing your content somewhere, while visiting your blog.

You would also like:  Add Facebook Comments Box in Blogger

How to Add Social Media Floating Widget to Blogger?

The process of adding this widget to your blog is simplest. You need just to follow below steps:

1. Open Blogger
2. Go to Layout
3. Add a Gadget
4. Add HTML/JavaScript
5. Copy the below code and Save

<div <!–sidebar floating share buttons code start–>
<style>
#pageshare {position:fixed; bottom:15%; left:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#000000;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div id='pageshare' title="Apply this Widget on your website or Blog">
<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="UmarKhaleeq">Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>
<div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class='sbutton' id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<div class='sbutton' 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>
<br/><div style="clear: both;font-size: 9px;text-align:center;">[<a href="http://bloggerseotipstraining.blogspot.com/2013/03/vertical-social-media-sharing-buttons-blogger.html">share buttons Blogger</a>]<font></font></div></div>
<!–sidebar floating share buttons code end–></!–sidebar></!–sidebar>


6. Save Arrangement


Customization

The floating is set to left side of your blog, if you want set it for right side of your blog then simply change the bolded  float:left property to float:right.