WELCOME TO SHARING SHIP. Get Our Post Daily to Your Mobile Click Here



Thursday, 22 March 2012

Get Know How To add Read More Link In Feedburner Feeds?

0 comments

read more link in feedburnerWhether you call it "Read More Link" or "continue Reading Link" or "Jump Break" orExcerpts (teasers), they all refer to the link or button that displays only a small portion of the post on homepage. The visitor can see full post only when he clicks this link or button. Some of you are still confused on how to add a "read more link" inside your RSS Feeds. You have seen this link in MBT's email feeds and RSS Feeds. some of you even asked how to format the intro image and opening paragraph so that it may display perfectly in feeds. In todays tutorials we will learn how to make things clean.

What Causes the Read More To Appear?

Its called the more Tag, which is a simple HTML tag that tells the browser to display the post only till the read more tag and hide the remaining part. Its structured as follows:

<!--more-->

If you wish to add a read more link after the starting paragraph or some specific number of characters then you just need to add the more Tag at that point inside your Blog post editor.

Tip: In Windows Live Writer you can insert this tag by clicking on Insert > Split Post option. In Blogger you can insert it by clicking the "Insert Jump Link" Icon as shown below:

jump break in blogger

The reason why read more link does not display in many feeds is because some bloggers use automatic read more scripts or plugins. You should avoid summarizing the posts automatically. The disadvantage is that the intro image gets auto resized which badly effects its quality and the read more link appears after selected number of characters, which means whether the sentence completes or not, post will be chopped and this is not a wise thing to do.

Therefore you should always add <!--more-->  anywhere inside your post editor where you want the read More link to appear.

Blogger has now added read more functionality in all templates by default and its called "Jump break". I don't use it because I prefer the custom script I use on my blog. If you wish to customize the read more link and add exciting effects to it then you remove the jump break provided by blogger and use the custom one. Read this tutorial:

Add Read More To Feeds

Most of you use the "Summary Burner" option given inside your Feedburner accounts. The summary burner adds a teaser link along with some text after specific number of characters in all your posts. This again acts like an automatic read more script so you should avoid adding read more using Summary Burner tool.

The simplest and easiest way to add read more to both Email and RSS Feeds is through Blogger Dashboard settings. Do this:

  1. Go To Blogger > Settings > Site Feed
  2. Set "Allow blog Feeds" to "Untill Jump Break"

readmore to feeds

    3.  Save your settings and you are all done

This will add a Jump Break i.e "Read More" link to all your feeds which includes Post, comment and per-post comment feed.

Remember that the read more link will appear at exact same location where the more Tagappears and thus it keeps things clean and neat as you wanted.

Why intro images do not display in Email Feeds?

The image that you add in the start of your post just like I often do is called the featured thumbnail image. This image has significance both for search engines and social networking sites, because it's the first choice and is picked first while your blog is shared in Facebook or Google+ or search via Google Image search. Therefore always tag it wisely.

Email Feeds by default do not display thumbnails and instead display the image alt tags only. See below:

Email Feed View:

no image in Email feeds

RSS FEED View in any Feed Reader:

thumbnail in RSS feed

If you are facing this problem then just relax and know that its perfectly alright. This is how Email FEEDs and RSS Feeds display.

Read more >>
Read More... Get Know How To add Read More Link In Feedburner Feeds?

Do You Like this Story Most Wanted Widget For Blogger V-2

0 comments

blogger widget do you like thisI just took a simple HTML div box and inserted inside it Facebook Like and send button along with Twitter follow button to create version 2 of one of our popular sharing widgets i.e. "Do You Like This Story" The first version included social media sharing buttons along with a subscription box and Facebook like button and it was designed to be added just at the bottom of blog posts but this version is kept simple and clean and designed to be added just below blog post titles in sub pages. This plugin would work with both BlogSpot and wordpress blogs. The tutorial below is aimed for blogger users only. Wordpress users may simply add the code in step#5 without the purple lines just below their post titles manually. Lets first see a demo:

Live Demo

Advantages of This Sharing widget

Since the area just below post titles has highest page impressions therefore it will always catch the attention of every single visitor thus leading to an increase in the number of your Facebook and Twitter followers. You can even set the like button to link to your Fan Page in order to increase your Fan following massively. We will learn below how to code it.

Add This Widget To Blogger

Follow these easy steps:

  1. Go To Blogger > Design > Edit HTML
  2. Back up your template
  3. Click the "Expand Widget templates"
  4. Search for  this

<data:post.body/>

    5.   Just above it paste the following code:

<b:if cond='data:blog.pageType == "item"'>

<div style=" height:80px;  background:rgb(232, 240, 249); border: 1px solid rgb(171, 210, 233); padding: 10px; margin: 10px 0pt 10p 0px;">
<p style="color: rgb(59, 89, 152); margin: 0pt 0pt 5px; font: bold 1.3em helvetica,arial,verdana;">Do you like this story?</p>
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like send="true" width="450" show_faces="false"></fb:like>

<a class='twitter-follow-button'  href='http://twitter.com/bloggersmentors' rel='nofollow'></a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>

</div>

</b:if>

  • Replace bloggersmentors with your twitter username
  • By default the like button will count hits for the post link only. This will cause your individual posts to be liked and circulated via Facebook. But if you wish to increase your Fan followers then you can fix the like button to count hits for Fan Page only by replacing the yellow highlighted code with the following:

<div class="fb-like" data-href="http://facebook.com/bloggersmentor" data-send="true" data-width="450" data-show-faces="true"></div>

  • Replace bloggersmentor with your Facebook username. If you don't have a Facebook username then get one from here.

       6.   Save your template and you are all done!

Visit any of your blog posts to see it hanging just perfectly below post title. The widget is coded such that it will appear only in post pages and not on homepage. If you wish to show it even on homepage then delete the purple bolded lines of code.

Read more >>
Read More... Do You Like this Story Most Wanted Widget For Blogger V-2

New Multilevel Menu For Blogger Updated ::

0 comments

drop down menu for blogsDrop down menus provide easy and neat navigation by organizing and featuring important category links of your blog. With increased use of categories and tags, organizing links in a simple menu is difficult therefore the menu that we share today provides you with easy control over its column and rows display. You can choose to create as many sub levels as you want. Its created using simple HTML and CSS3 along with cool JavaScript transition effects. The script is adopted from dynamicdrive and bloggerized by MBT blog. We have kept the installation extremely simple. All you need is to copy and paste the code as instructed. The top bar menu instruction below are for blogger users only but if you use wordpress as a blogging platform then you will need to manually insert the code inside your template or using the widget section.

Live Demo

Add This Drop Down Menu To Blogger
  1. Go To Blogger > Design
  2. Choose HTML/Javascript Widget. We will add the menu just below Header so choose the widget near the Head section of your layout
  3. Paste the following code inside it,

<script src='http://mybloggertricks.googlecode.com/files/dropdownddlevel.js' type='text/javascript'></script>
<style>
/* ######### Drop Down Menu by www.MyBloggerTricks.com ######### */

.ddsubmenustyle, .ddsubmenustyle div{ /*topmost and sub DIVs, respectively*/
font: normal 13px Verdana;
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
background: white;
border: 1px solid black;
border-bottom-width: 0;
visibility: hidden;
z-index: 100;
}

.ddsubmenustyle ul{
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
border: 0px none;
}

.ddsubmenustyle li a{
display: block;
width: 170px; /*width of menu (not including side paddings)*/
color: black;
background-color: lightyellow;
text-decoration: none;
padding: 4px 5px;
border-bottom: 1px solid black;
}

* html .ddsubmenustyle li{ /*IE6 CSS hack*/
display: inline-block;
width: 170px; /*width of menu (include side paddings of LI A*/
}

.ddsubmenustyle li a:hover{
background-color: black;
color: white;
}

.downarrowpointer{ /*CSS for "down" arrow image added to top menu items*/
padding-left: 4px;
border: 0;
}

.rightarrowpointer{ /*CSS for "right" arrow image added to drop down menu items*/
position: absolute;
padding-top: 3px;
left: 100px;
border: 0;
}

.ddiframeshim{
position: absolute;
z-index: 500;
background: transparent;
border-width: 0;
width: 0;
height: 0;
display: block;
}

/* ######### Black Strip Main Menu Bar CSS ######### */

.mattblackmenu ul{
margin: 0;
padding: 0;
font: bold 12px Verdana;
list-style-type: none;
border-bottom: 1px solid gray;
background: #414141;
overflow: hidden;
width: 100%;
}

.mattblackmenu li{
display: inline;
margin: 0;
}

.mattblackmenu li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 6px 8px; /*padding inside each tab*/
border-right: 1px solid white; /*right divider between tabs*/
color: white;
background: #414141;
}

.mattblackmenu li a:visited{
color: white;
}

.mattblackmenu li a:hover{
background: black; /*background of tabs for hover state */
}

.mattblackmenu a.selected{
background: black; /*background of tab with "selected" class assigned to its LI */
}

</style>

<div id="ddtopmenubar" class="mattblackmenu">
<ul>
<li><a href="#">LINK1</a></li>
<li><a href="#" rel="ddsubmenu1">LINK2</a></li>
<li><a href="#" rel="ddsubmenu2">LINK3</a></li>
<li><a href="#">Link4</a></li>
<li><a href="#" rel="ddsubmenu3">LINK5</a></li>
</ul>
</div>

<script type="text/javascript">
ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar")
</script>

<ul class='ddsubmenustyle' id='ddsubmenu1'>
<li><a href='#'>LINK2 ITEM 1</a></li>
<li><a href='#'>LINK2 ITEM 2</a>
  <ul>
  <li><a href='#'>LINK2 ITEM 2.1</a></li>
  <li><a href='#'>LINK2 ITEM 2.2</a></li>
  </ul>

</li>
<li><a href='#'>LINK2 ITEM 3</a>
  <ul>
  <li><a href='#'>LINK2 ITEM 3.1</a></li>
    </ul>

</li>
<li><a href='#'>LINK2 ITEM 4</a></li>

</ul>

<ul class='ddsubmenustyle' id='ddsubmenu2'>
<li><a href='#'>LINK3 ITEM 1</a></li>
<li><a href='#'>LINK3 ITEM 2</a></li>
<li><a href='#'>LINK3 ITEM 3</a>
  <ul>
  <li><a href='#'>LINK3 ITEM 3.1</a></li>

<li><a href='#'>LINK3 ITEM 3.2</a></li>
  <li><a href='#'>LINK3 ITEM 3.3</a></li>
  <li><a href='#'>LINK3 ITEM 3.4</a></li>
  </ul>
</li>
<li><a href='#'>LINK3 ITEM 4</a></li>
<li><a href='#'>LINK3 ITEM 5</a>
  <ul>

  <li><a href='#'>LINK3 ITEM 5.1</a></li>
  <li><a href='#'>LINK3 ITEM 5.2</a>
    <ul>
    <li><a href='#'>LINK3 ITEM 5.2 1</a></li>
    <li><a href='#'>LINK3 ITEM 5.2 2</a></li>
    <li><a href='#'>LINK3 ITEM 5.2 3</a></li>

    </ul>
  </li>
    </ul>
</li>
<li><a href='#'>LINK3 ITEM 6</a></li>
</ul>

<ul class='ddsubmenustyle' id='ddsubmenu3'>
<li><a href='#'>LINK5 ITEM 1</a></li>
<li><a href='#'>LINK5 ITEM 2</a></li>

<li><a href='#'>LINK5 ITEM 3</a></li>
<li><a href='#'>LINK5 ITEM 4</a></li>
<li><a href='#'>LINK5 ITEM 5</a></li>
</ul>

All you need to understand is:

  • Replace the # symbols with page links
  • Replace the bolded black texts with Page Titles
  • To create a drop down menu inside a Main Menu link simple add to it a rel attribute like rel="ddsubmenu1Change the drop down number accordingly.
  • Normal li and ul rules apply here to create sub menu and sub sub menu links.
  • Main links are mentioned first and drop down menu links are mentioned separately after the JavaScript call function.
  • To change the background color of the menu simply edit background: #414141;

   4.   Save your widget and you are all done!

Visit your blogs to see the menu working just perfectly. I know creating HTML tags for sub links would be a little tricky for those who are not well versed with HTML. But if you mention how you want your links to appear in the comment box below then we will create a code for you as a favour. :)

Read more >>
Read More... New Multilevel Menu For Blogger Updated ::

Blogger Complete History

0 comments

Blogger is a blog-publishing service that allows private or multi-user blogs with time-stamped entries. It was created by Pyra Labs, which was bought by Google in 2003. Generally, the blogs are hosted by Google at a subdomain of blogspot.com. Up until May 1, 2010 Blogger allowed users to publish blogs on other hosts, via FTP. All such blogs had (or still have) to be moved to Google's own servers, with domains other than blogspot.com allowed via Custom URLs

History

On August 23, 1999, Blogger was launched by Pyra Labs. As one of the earliest dedicated blog-publishing tools, it is credited for helping popularize the format. In February 2003, Pyra Labs was acquired byGoogle under undisclosed terms. The acquisition allowed premium features (for which Pyra had charged) to become free. In October 2004, Pyra Labs' co-founder, Evan Williams, left Google. In 2004, Google purchased Picasa; it integrated Picasa and its photo sharing utility Hello into Blogger, allowing users to post photos to their blogs.

On May 9, 2004, Blogger introduced a major redesign, adding features such as web standards-compliant templates, individual archive pages for posts, comments, and posting by email. On August 14, 2006, Blogger launched its latest version in beta, codenamed "Invader", alongside the gold release. This migrated users to Google servers and had some new features, including interface language in French, Italian, German and Spanish. In December 2006, this new version of Blogger was taken out of beta. By May 2007, Blogger had completely moved over to Google operated servers. Blogger was ranked 16 on the list of top 50 domains in terms of number of unique visitors in 2007.

Redesign

As part of the Blogger redesign in 2006, all blogs associated with a user's Google Account were migrated to Google servers. Blogger claims that the service is now more reliable because of the quality of the servers.

Along with the migration to Google servers, several new features were introduced, including label organization, a drag-and-drop template editing interface, reading permissions (to create private blogs) and newWeb feed options. Furthermore, blogs are updated dynamically, as opposed to rewriting HTML files.

In a version of the service called Blogger in Draft, new features are tested before being released to all users. New features are discussed in the service's official blog.

In September 2009, Google introduced new features into Blogger as part of its tenth anniversary celebration. The features included a new interface for post editing, improved image handling, Raw HTML Conversion, and other Google Docs-based implementations, including:

  • Adding location to posts via geotagging.
  • Post time-stamping at publication, not at original creation.
  • Vertical re-sizing of the post editor. The size is saved in a per-user, per-blog preference.
  • Link editing in Compose mode.
  • Full Safari 3 support and fidelity on both Windows and Mac OS.
  • New Preview dialog that shows posts in a width and font size approximating what is seen in the published view.
  • Placeholder image for tags so that embeds are movable in Compose mode.
  • New toolbar with Google aesthetics, faster loading time, and "undo" and "redo" buttons. Also added was the full justification button, a strike-through button, and an expanded color palette.

In 2010, Blogger introduced new templates and redesigned its website. The new post editor was criticized for being less reliable than its predecessor.

Integration

  • The Google Toolbar has a feature called "BlogThis!" which allows toolbar users with Blogger accounts to post links directly to their blogs.
  • "Blogger for Word" is an add-in for Microsoft Word which allows users to save a Microsoft Word Document directly to a Blogger blog, as well as edit their posts both on- and offline. As of January 2007, Google says "Blogger for Word is not currently compatible with the new version of Blogger", and they state no decision has been made about supporting it with the new Blogger. However, Microsoft Office 2007 adds native support for a variety of blogging systems, including Blogger.
  • Blogger supports Google's AdSense service as a way of generating revenue from running a blog.
  • Blogger also started integration of Amazon Associates as a service to generate revenue.
  • Blogger offers multiple author support, making it possible to establish group blogs.
  • Blogger offers a template editing feature, which allows users to customize the Blogger template.
  • Windows Live Writer, a standalone app of the Windows Live suite, publishes directly to Blogger.

Blocking

Blogger has been blocked for various periods of time in the following countries:

  • Cuba
  • Fiji
  • Iran
  • Kazakhstan
  • Kyrgyzstan (www.blogger.com and www.blogspot.com, as well as all blogs on this platform are not accessible under most Internet providers because they take traffic from Kazakhstan where they are blocked)
  • Myanmar
  • Pakistan
  • People's Republic of China
  • Syrian Arab Republic
  • Turkey (for a small period)

Blocking of *.blogspot.com domains by keyword-based Internet filtering systems is also encountered due to the domain containing the substring "gspot".

Limitations

Blogger has the following limitations on content storage and bandwidth, per user account:

  • Number of blogs = Unlimited
  • Size of pages = Individual pages (the main page of a blog or archive pages) are limited to 1 MB
  • Number of labels = 2,000 unique labels per blog, 20 unique labels per post
  • Number of pictures (hyperlinked from user's Picasa Web Album) = Up to 1 GB of free storage
  • Size of pictures = If posted via Blogger Mobile, limited 250 KB per picture; posted pictures are scaled to 800px
  • Team members (those that can write to a blog) = 100
  • Stand-Alone Page = Limited to 20 stand-alone pages

On February 18, 2010, Blogger introduced "auto-pagination", which limited the number of posts that could be displayed on each page, often causing the number of posts on the main page to be less than that specified by the user and leading to a hostile response from some users.

Read more >>
Read More... Blogger Complete History

SUPPORT US

Followers

 

About The Author

Categories

My Blogger Pedia. Copyright 2008 All Rights Reserved | Contact | about

/*featured start*/ /*featured start*/