Customize and Style Read more (Jump Break) option in Blogger - Blogger Tutorials

Customize and Style Read more (Jump Break) option in Blogger - Blogger Tutorials:

'via Blog this'

A Stylish Css3 Fixed Position Vertical Side Menu For Blogger | Spice Up Your Blog

A Stylish Css3 Fixed Position Vertical Side Menu For Blogger | Spice Up Your Blog:

'via Blog this'

How to Add the Facebook Like Button Below every Post

Facebook Like Button For Blogger - Blogger Widgets: "How to Add the Facebook Like Button Below every Post"

'via Blog this'

How to Add Floating Social Media Icons to Blogger - Blogger Tutorials

How to Add Floating Social Media Icons to Blogger - Blogger Tutorials:

'via Blog this'

Add Floating Share Buttons Like Mashable to Blogger - Blogger Tutorials

Add Floating Share Buttons Like Mashable to Blogger - Blogger Tutorials:

'via Blog this'

How to Add Tabs to Sidebar in Blogger - Blogger Tutorials

How to Add Tabs to Sidebar in Blogger - Blogger Tutorials:

'via Blog this'

How to Add Tabs to Sidebar in Blogger - Blogger Tutorials

How to Add Tabs to Sidebar in Blogger - Blogger Tutorials:

'via Blog this'

Sharing in Facebook Not Showing Blogger Post Description (Solved)

 By Raju on May 28, 2011
http://www.simplebloggertutorials.com/2011/05/sharing-in-facebook-not-showing-blogger.html

 “

why Facebook does not show the description of the post when it has been liked or shared by the readers”

t Facebook pulls out the description of the post from the first paragraph found and is determined by the paragraph tags. It is represented by <p></p> tags. Thus, a paragraph will be created when it will be formatted as the example below in Edit HTML mode: 

<p>The para starts.</p>

 you generally press “Enter” key on your keyboard. This creates line breaks (<br> tags) instead of <p>tags. As a result Facebook cannot extract the description from the post.  

Option 1

Step 1: Go to Blogger’s dashboard > Design > Edit HTML tab and check “Expand Widget Template”. 

Step 2: Find <data:post.body/> and add the <p> tags as shown below: 

<p><data:post.body/></p>

 Step 3: Save your template. 

<data:post.body/> is the part where your actual post is displayed which is written in Post Editor. Adding paragraph tags ensures that whole of the post body remains in between these tags. As a result, you can write normally within the post editor and no manual formatting is needed. As you publish the post, it will automatically be inserted within the paragraph tags.

But there is a problem also. These tags will break in any div tags are used within the post editor. For example, adding images to your post in Compose mode will break the tags at that position. If you want to use this method and also want to add an image to your post then you have to write the first para, at least containing more than 150-200 words and then you can add the image for your post. In this way you will get the first paragraph with proper tags. 

Remember

When you are writing a new post from post editor, find Options, check Press "Enter" for line breaks and click Done or Save. This is one time process and ensures that you don't see any<br> tags in HTML mode.

Facebook scraps the page every 24 hours, so, once your post has been shared or “Liked”, it would automatically add the description from blogger post. Thus, it’s solved.

自動加入繼續閱讀，並摘要、圖片列

- Your posts will automatically be displayed as short summary's with a read more link.
- An image from the post will be re sized into a thumbnail and displayed beside the summery.
- You can choose how much text is displayed in the summery.
- You can choose the size of the thumbnail.
- All Previous posts will also have the jump break so you don't need to go through your archive adding it.

Add Auto Read More Post Summary's To Your Blog

Step 1. In your Blogger dashboard click Design > Edit Html > Tick The Expand Widget Templates Box







Step 2. Find the following piece of code in your blogs Html : (Click CTRL and F for a search bar to help find the code - More Info)

</head>

Step 3. Copy the following code and paste it Directly Above / Before </head>

<script type='text/javascript'>
var thumbnail_mode = "no-float" ;

summary_noimg = 430;

summary_img = 340;

img_thumb_height = 120;

img_thumb_width = 120;

</script>
<script type='text/javascript' src='http://bloggerblogwidgets.googlecode.com/files/auto_readmore_blogger.js' ></script>

Important 

The code in red sets how the post summary's are displayed.Remember if a post has an image it will be re sized into a thumbnail to be displayed beside the summery.If the post does not have an image just a text summery will be displayed.

summary_ noimg= 430; --> The length of the summery if the post does not have a thumbnail.
summary_img = 340; --> The length of the summery if there is an image in the post that will be converted into a thumbnail.
null_thumb_height = 120; --> The height in pixels of the thumbnail.
null_thumb_width = 120; --> The width in pixels of the thumbnail.

Step 4. Find the following piece of code in your blogs Html : (Click CTRL and F for a search bar to help find the code - More Info)

<data:post.body/>

Step 5. Replace <data:post.body/> With The Code Below

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<div style='clear: both;'/>
<span class='rmlink' style='font-weight:bold;padding:5px;float:right;text-align:right;'><a expr:href='data:post.url' >Read more ... </a></span>
</b:if>
</b:if>

Note - You can change the text in red from Read More to "Continue Reading", "Read Full Post" or anything you like.

Note 1. You should try to have the first image in your posts as close to square as possible so they work well when used as thumbnails on your home page.Images that are for example rectangle in shape will appear distorted when they are re sized.I use a version of this script on this blog and always add an image at the top of the posts that are close to square, then size then wont make a big impact on the appearance.Remember it's the first image in each post that is used as a thumbnail.

Step 6. Save Your Template.

That's it for this Blogger tip, All your posts including all archived posts will now be displayed with a summary and read more on your home page, labels pages and archive pages.Check out more of our Blogger Tips and Blog Gadgets.

Did you know you can use a Jump Break In Your Full Feed ?

Drop Your Comments, Views And Opinions Below. 

如何更改預設字型、顏色及大小

Blogger 官方說明網頁

FB promotion official tutorial  FB official

FB Page Insights Manual (pdf)

《TotalLikes》總共有的粉絲數量

《Friends of Fans》所有粉絲們的朋友數量總合。
      因為這個很重要，當你開始利用FB的粉絲頁進行公司、或個人品牌的行銷時，一定要     
      抓準你的目標客戶，而這些是你粉絲的朋友們，或多或少都擁有一些共同特質，是你
      要
《》
《》

ICON, PNG ---- Fackbook

 download    

 download 

Use Rss And Social Icons For Your Blog

New Ready To Use Rss And Social Icons For Your Blog | Spice Up Your Blog:

將fb， twitter, RSS, G+ 換成自己喜歡的大icon, 連結

這裡直接提供四個圖示（也不必再下載了，直接將html複製貼上即可）

Live Preview