Auto Image Thumbnail & ReadMore Link For Blogger Post

7:57 AM | ,

Features:
  1. When you apply this code you need not to enter LINE BREAK option in your every new post even in old post, This will automatically break the line after some words.
  2. The first image of your post will be chosen for the view on main page of your blog for that post.
  3. If you already insert LINE BREAK option in your desire post, after applying this code you will see the two READ MORE link below of every post.Then Please Contact Me Or Comment Here, I Will Set It With You.
How To Apply The Code:
  1. Login to your Blogger account.
  2. Go to Dashboard > Design > Edit HTML.
  3. Back up your template.
  4. Check the Expand Widget Templates check box on top right of the HTML window.
  5. In the code window, look for </head> line.
  6. Add the code below right after that line.


After that, find this line:
&lt;data:post.body/&gt;
Replace the line with this code:
Click Preview.
If it works, then click Save Template.

Customizing the snippet:
You can customize the read more by changing the values of the variables below:
thumbnail_mode –set to “yes” if you want to show thumbnail with text summary. Set to other than “yes” to show only text summary.
summary_img –specify the number of characters (including spaces) you want to show in the summary, with thumbnail.
summary_noimg –specify the number of characters (including spaces) you want to show in the summary, when there is no thumbnail.
img_thumb_height and img_thumb_width -specify the thumbnail height and width (in pixels).
You can change the words “Read more” with your own by changing it in line 12 of the code in step 8.
Read More... Text – you can also change this with image, Please comment here if you want read more image.

Read More

How To Add Stylish J-Query Multi-Tab Widget For Blogger & Website

7:30 AM | ,


1. Log in to your blogger and Go to Design >> Edit HTML
2. Make sure you put check mark to “Expand Widget Templates” 
3. Find this tag by using Ctrl+F </head>
4. Paste below code Before </head> tag







<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"> </script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"> </script> 
<script> $(document).ready(function() { $("#tabs").tabs(); }); </script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/blitzer/jquery-ui.css" type="text/css"/>







5. Now Go to Design >> Page Element
6. Click Add Gadget and select 'HTML/Javascript'
7. Paste below one of below code.



<div id="tabs">
<ul>
<li> <a href="#tabs-1">Tab-1</a></li>
<li> <a href="#tabs-2">Tab-2</a></li>
<li> <a href="#tabs-3">Tab-3</a></li>
</ul> 
<div id="tabs-1">Script or Text Here</div>
<div id="tabs-2">Script or Text Here</div> 
<div id="tabs-3">Script or Text Here</div>



8. You can replace Script or Text Here with text or any script you want.
9. After save HTML/Javascript
10. You are done.


sumber : netzpot
Read More