If your blogs usually consists of sharing codes, this tutorial may help you simplify your posts. Make it look better and cleaner by adding functionality and organization for a user-friendly interface.
You can add this plugin to your posts by simply adding this section code whenever you need to place a code into a textbox.
Note: To adjust the textbox’s size, just adjust the textarea cols=”X“ for width and rows=”X” for height.
This script allows you to display the most popular or most interesting content of your blog in a nice intuitive way for your readers. Featured contents are commonly displayed on the index or front page, enabling readers to instantly find the “good stuff” of your blog. Furthermore, it offers the ability to customize appearance and functionality. Note: The above code references the external .png and .gif file "transparent-bg.png", "selected-item.gif”, which you need to download (right click, and select "Save As").#featured{
width:400px;
padding-right:250px;
position:relative;
height:250px;
background:#fff;
border:5px solid #ccc;
}
#featured ul.ui-tabs-nav{
position:absolute;
top:0; left:400px;
list-style:none;
padding:0; margin:0;
width:250px;
}
#featured ul.ui-tabs-nav li{
padding:1px 0; padding-left:13px;
font-size:12px;
color:#666;
}
#featured ul.ui-tabs-nav li span{
font-size:11px; font-family:Verdana;
line-height:18px;
}
#featured .ui-tabs-panel{
width:400px; height:250px;
background:#999; position:relative;
overflow:hidden;
}
#featured .ui-tabs-hide{
display:none;
}
#featured li.ui-tabs-nav-item a{/*On Hover Style*/
display:block;
height:60px;
color:#333; background:#fff;
line-height:20px;
outline:none;
}
#featured li.ui-tabs-nav-item a:hover{
background:#f2f2f2;
}
#featured li.ui-tabs-selected{ /*Selected tab style*/
background:url('selected-item.gif') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#ccc;
}
#featured ul.ui-tabs-nav li img{
float:left; margin:2px 5px;
background:#fff;
padding:2px;
border:1px solid #eee;
}
#featured .ui-tabs-panel .info{
position:absolute;
top:180px; left:0;
height:70px; width: 400px;
background: url('transparent-bg.png');
}
#featured .info h2{
font-size:18px; font-family:Georgia, serif;
color:#fff; padding:5px; margin:0;
overflow:hidden;
}
#featured .info p{
margin:0 5px;
font-family:Verdana; font-size:11px;
line-height:15px; color:#f0f0f0;
}
#featured .info a{
text-decoration:none;
color:#fff;
}
#featured .info a:hover{
text-decoration:underline;
}
4. Navigate over to Layout > Page Elements to “Add a Gadget” and paste the following section code into the box<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
</script>
Note: The above code references the external .jpg file "image4.jpg", "image2.jpg”, “image3.jpg”, “image1.jpg”, “image4-small.jpg”, “image3-small.jpg”, “image2-small.jpg”, “image1-small.jpg”, which you need to download (right click, and select "Save As").<div id="featured">
<ul class="ui-tabs-nav">
<li id="nav-fragment-1" class="ui-tabs-nav-item ui-tabs-selected"><a href="#fragment-1"><img alt="" src="/image1-small.jpg"/><span>15+ Excellent High Speed</span></a></li>
<li id="nav-fragment-2" class="ui-tabs-nav-item"><a href="#fragment-2"><img alt="" src="/image2-small.jpg"/><span>20 Beautiful Long Exposure</span></a></li>
<li id="nav-fragment-3" class="ui-tabs-nav-item"><a href="#fragment-3"><img alt="" src="/image3-small.jpg"/><span>35 Amazing Logo Designs</span></a></li>
<li id="nav-fragment-4" class="ui-tabs-nav-item"><a href="#fragment-4"><img alt="" src="/image4-small.jpg"/><span>Create a Vintage</span></a></li>
</ul>
<!-- First Content -->
<div id="fragment-1" style="" class="ui-tabs-panel">
<img alt="" src="/image1.jpg"/>
<div class="info">
<h2><a href="#">15+ Excellent High Speed</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#">read more</a></p>
</div>
</div>
<!-- Second Content -->
<div id="fragment-2" style="" class="ui-tabs-panel ui-tabs-hide">
<img alt="" src="/image2.jpg"/>
<div class="info">
<h2><a href="#">20 Beautiful Long Exposure</a></h2>
<p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#">read more</a></p>
</div>
</div>
<!-- Third Content -->
<div id="fragment-3" style="" class="ui-tabs-panel ui-tabs-hide">
<img alt="" src="/image3.jpg"/>
<div class="info">
<h2><a href="#">35 Amazing Logo Designs</a></h2>
<p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#">read more</a></p>
</div>
</div>
<!-- Fourth Content -->
<div id="fragment-4" style="" class="ui-tabs-panel ui-tabs-hide">
<img alt="" src="/image4.jpg"/>
<div class="info">
<h2><a href="#">Create a Vintage</a></h2>
<p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#">read more</a></p>
</div></div></div>
**Tutorial completed$(document).ready(function(){
$("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
$("#featured").hover(
function() {
$("#featured").tabs("rotate",0,true);
},
function() {
$("#featured").tabs("rotate",5000,true);
}
);
});
//--> 
Click here to see the demo
Steps to follow:
1. Login into your Blogger dashboard > Layouts > Edit HTML
2. Insert the following section code below into your template right before the closing of head. </head>
3. Next, go to Layouts > Page Elements > and Add an HTML/JavaScript Gadget. Insert the following section code below as the HTML and after saving, move the gadget where you want the calendar to appear.
<style>
<!--
.styling{
background-color:black;
color:lime;
font: bold 15px MS Sans Serif;
padding: 3px;
}
-->
</style>
** Tutorial completed
<span id="digitalclock" class="styling"></span>
<script>
<!--
var alternate=0
var standardbrowser=!document.all&&!document.getElementById
if (standardbrowser)
document.write('<form name="tick"><input type="text" name="tock" size="6"></form>')
function show(){
if (!standardbrowser)
var clockobj=document.getElementById? document.getElementById("digitalclock") : document.all.digitalclock
var Digital=new Date()
var hours=Digital.getHours()
var minutes=Digital.getMinutes()
var dn="AM"
if (hours==12) dn="PM"
if (hours>12){
dn="PM"
hours=hours-12
}
if (hours==0) hours=12
if (hours.toString().length==1)
hours="0"+hours
if (minutes<=9)
minutes="0"+minutes
if (standardbrowser){
if (alternate==0)
document.tick.tock.value=hours+" : "+minutes+" "+dn
else
document.tick.tock.value=hours+" "+minutes+" "+dn
}
else{
if (alternate==0)
clockobj.innerHTML=hours+"<font color='lime'> : </font>"+minutes+" "+"<sup style='font-size:1px'>"+dn+"</sup>"
else
clockobj.innerHTML=hours+"<font color='black'> : </font>"+minutes+" "+"<sup style='font-size:1px'>"+dn+"</sup>"
}
alternate=(alternate==0)? 1 : 0
setTimeout("show()",1000)
}
window.onload=show
</script>
<style type="text/css"> Note: The above references an external .js file. Download basiccalendar.js (by right clicking, and selecting "Save As"), and upload to your webpage directory. 
Click here to see the demo
Steps to follow:
1. Login into your Blogger dashboard > Layouts > Edit HTML
2. Insert the following section code below into your template right before the closing of head. </head>
.main {
width:200px;
border:1px solid black;
}
.month {
background-color:black;
font:bold 12px verdana;
color:white;
}
.daysofweek {
background-color:gray;
font:bold 12px verdana;
color:white;
}
.days {
font-size: 12px;
font-family:verdana;
color:black;
background-color: lightyellow;
padding: 2px;
}
.days #today{
font-weight: bold;
color: red;
}
</style>
<script type="text/javascript" src="basiccalendar.js">
</script>
Note: Within the above code, you may customize the CSS rules to change all visual aspects of the calendar.
3. Next, go to Layouts > Page Elements > and Add an HTML/JavaScript Gadget. Insert the following section code below as the HTML and after saving, move the gadget where you want the calendar to appear.
<script type="text/javascript">
var todaydate=new Date()
var curmonth=todaydate.getMonth()+1 //get current month (1-12)
var curyear=todaydate.getFullYear() //get current year
document.write(buildCal(curmonth ,curyear, "main", "month", "daysofweek", "days", 1));
</script>
** Tutorial completed
Steps to follow:
1. Visit http://www.twitthis.com and click Tools in the top right hand navigation. (you will need to navigate to this page later to copy/paste the section code you want to your xml template.)
2. Login to your Blogger Dashboard in a new browser window.
3. Go to Layout > Edit HTML (Click on “expand widgets” box)
4. Next, search for the following section code below:
<div class='post-footer'>
and paste the following section code right after it…
<!-- Footer Button Codes BEGIN -->
<div>
<p><span id='footer-buttons'>
<!-- things placed after this line will show on all pages -->
<b:if cond='data:blog.pageType == "item"'>
<!-- things placed after this line will only show on post pages –>
<!-- TwitThis Button BEGIN -->
<a href='javascript:(function(){TwitThisPop=window.open(%22http://twitthis.com/twit?url=%22+encodeURIComponent(location.href)+%22&title=%22+((document.title)%20?%20encodeURIComponent(document.title.replace(/^\s*|\s*$/g,%27%27))%20:%20%22%22),%20%22TwitThisPop%22,%20%22width=600,%20height=500,%20location,%20status,%20scrollbars,%20resizable,%20dependent=yes%22);%20setTimeout(%22TwitThisPop.focus()%22,%20100);%20})()'><img alt='TwitThis' src='http://s3.chuug.com/chuug.twitthis.resources/twitthis_grey_72x22.gif' style='border:none;'/></a>
<!-- TwitThis Button END –>
<!-- Do Not Paste Any Code Below This Line -->
</b:if>
</span></p>
</div>
<!-- Footer Button Codes END –>
5. Preview your template, and if all is working fine, Save Template.
Note: Your Twit This! button should appear on all posts pages ONLY, and not the main page. Test the button by clicking it on a post and sharing one of your posts on twitter.
From this tutorial, you will be able to display a photo album for your viewers to browse through. This is good for blogs that offer free or ecommerce templates, icons, designs, or photos. This photo album script v2.0 is brought to you by dynamicdrive.com and modified by Blogspot Vision for blogger blogs. The photo album script is ideal for displaying multiple images at once, with links to cycle through additional batches of images.
Highlights of script:
You will need the following for this tutorial:
Steps to follow:
1. Login to your Blogger dashboard
2. Go to Layout > Edit HTML (Click on “expand widgets” box)
3. Search for the following section code: ]]></b:skin>
and add the following section code below right after it:
<script src='/photogallery.js' type='text/javascript'>
/***********************************************
* Photo Gallery Script v2.0- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/</script>
<style type='text/css'>
.photogallery{ /*CSS for TABLE containing a photo album*/
}.photogallery img{ /*CSS for images within an album*/
border: 1px solid green;
}.photonavlinks{ /*CSS for pagination DIV*/
font: bold 14px Arial;
}.photonavlinks a{ /*CSS for each navigational link*/
margin-right: 2px;
margin-bottom: 3px;
padding: 1px 5px;
border:1px solid gray;
text-decoration: none;
background-color: white;
}.photonavlinks a.current{ /*CSS for currently selected navigational link*/
background-color: yellow;
}
</style>
Note: You will need to replace the link in red with the link you uploaded the javascript to. For example:
<script src='http://www.blogspotvision.com/bspotvision/photogallery.js' type='text/javascript'>
4. Next, Preview you template and if all works fine, Save Template.
5. Then you will need to click over to page elements under the layout tab.
6. Click Add a Gadget and select HTML/JavaScript
1.
2.
7. Next, copy and paste the following section code in the html/javascript option:
<script type="text/javascript">
//Define your own array to hold the photo album images
//Syntax: ["path_to_thumbnail", "opt_image_title", "opt_destinationurl", "opt_linktarget"]var myvacation=new Array()
myvacation[0]=["../photo1.jpg", "", "photo1-large.jpg"]
myvacation[1]=["photo2.jpg", "Our car", ""]
myvacation[2]=["photo3.jpg", "Our dog", "photo3-large.jpg"]
myvacation[3]=["photo4.jpg", "Our hotel", "http://www.blogspotvision.com"]
myvacation[4]=["photo5.jpg", "Our Computer", http://www.blogspotvision.com, "_new"]
myvacation[5]=["photo6.jpg", "Our house", "photo6-large.jpg"]
myvacation[6]=["photo7.jpg", "Our Friends", "http://www.blogspotvision.com"]//initiate a photo gallery
//Syntax: new photogallery(imagearray, cols, rows, tablewidth, tableheight, opt_[paginatetext_prefix, paginatetext_linkprefix])
var thepics=new photogallery(myvacation, 3, 4, '700px', '600px')//OPTIONAL: Run custom code when an image is clicked on, via "onselectphoto"
//DELETE everything below to disable
//Syntax: function(img, link){}, whereby img points to the image object of the image, and link, its link object, if defined
thepics.onselectphoto=function(img, link){
if (link!=null) //if this image is hyperlinked
window.open(link.href, "", "width=800, height=600, status=1, resizable=1")
return false //cancel default action when clicking on image, by returning false instead of true
}</script>
Note: You will need to replace all .jpg links with your photo links and all links that you want your image to link to. For example, replace the http://www.blogspotvision.com in the section code above.
8. Your done! Save and view your blog.
1. After you have written your post, click Post Options in the bottom left corner of the post form.
2. The Reader Comments and Post date and time options will appear. Set the date and time you want your current post to be published, and select Publish Post to save it to a scheduled post.
Note: To un-schedule a post, simply save it as a draft at anytime before the published date.
From this tutorial, you will be able to add a read more link to all of your posts, old or new. Adding a read more link to your posts can and will save upload time of your blog for your readers. This will be convenient for your readers and definitely keep them happy from the long wait to get the information they need now. This tutorial will be useful for blogs that have long posts. As always, make sure you download your current existing template just in case it doesn’t turn out as expected.
Steps to follow:
1. Login to your Blogger dashboard.
2. Go to Layout > Edit HTML (click on “expand widgets” box)
3. Now search for this line of code: ]]></b:skin>
4. Now add the following code right after it:
<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>
5. Next, you will need to search for this line of code: <data:post.body/>
6. Once you have located the code, add all of the following section code right after it.
<!--READ-MORE-STARTS--><b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>Read More!</a>
</b:if><!--READ-MORE-STOPS—>
Note: You will be able to modify the text above in orange.
7. Preview the page, and if all is fine, Save Template.
Note: You will not be able to see the Read more link yet, or after step 7.
8. Once you have saved your template, go to Settings>Format. Scroll down to Post template and add the following section code inside of it, then click Save Settings.
<span class=”fullpost”>
</span>
Note: You should now be able to see a Read more link under all your posts.
Note: The way this code works: Everything between the <span class=”fullpost”> and </span> will be the hidden information until the reader clicks on read more, which will bring them directly to the post link. For example: The part in red will be shown, the part in blue will be hidden until readers click read more link.
This part will be shown <span class=”fullpost”> while this part here will be hidden until the reader clicks on the read more link. </span>
From this tutorial, you will be able to show the post date on every last one of your posts. As we all know, Blogger’s default templates only show a single date for every post that was posted that day. Some readers will find it convenient to have that quick glance at the date on each post, but some will not even notice. This tutorial is definitely handy if you plan to use a calendar icon as your post date, since the timestamp can be modified. As always, make sure you download your current existing template just in case it doesn’t turn out as expected.
Steps to follow:
1. Login to your Blogger dashboard.
2. Go to Layout > Edit HTML (click on “expand widgets” box)
3. Now search for the red line of code or similar code:
Note: If you can’t seem to find the line in red, try the second section code in blue.
<div class='post-feeds'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'>
<data:post.dateHeader/>
</h2> </b:if>
<b:include data='post' name='post'/>
4. Next, replace the section code above in green with the section code below:
<div class='date-header'>
<data:post.timestamp/>
</div>
5. Preview, and if all looks good, Save Template.
Note: You can modify your timestamp by clicking on the settings tab > formatting. Change the setting under timestamp format to your desired option.
From this tutorial, you will be able to add social icons under your posts for readers to have easy access while trying to share information with others. Having a share this widget for your blog posts is almost crucial if you want to drive traffic to your website. This widget is definitely recommended to have on your blog because the more people that shares, the more traffic you will attain. As always, make sure you download your current existing template just in case it doesn’t turn out as expected.
You will need these files for this tutorial:
1. Set of social icons no.2 by ~Tydlinka
Note: You will need to upload these files to your host and replace the links with yours.
Steps to follow:
1. Login to your Blogger dashboard.
2. Go to Layout > Edit HTML (click on “expand widgets” box)
3. Next, you will need to locate this section code: <div class='post-footer'>
4. Add ALL of the following section code right after it.
<p class='feedburnerFlareBlock'>Share this: <img src='http://www.yourlinkhere.com/16x16/rss.png'/><a href='flare2url'>RSS</a> <span>•</span> <img src='http://www.yourlinkhere.com/16x16/twitter.png'/><a href='flare3url'>Twitter</a> <span>•</span> <img src='http://http://www.yourlinkhere.com/16x16/digg.png'/><a href='flare4url'>Digg This!</a> <span>•</span> <img src='http://www.yourlinkhere.com/16x16/facebook.png'/><a href='flare5url'>Share on Facebook</a> <span>•</span> <img src='http://www.yourlinkhere.com/16x16/delicious.png'/><a href='flare5url'>Add to del.icio.us</a></p>
Note: Replace the links in orange with the links you uploaded your images to, and replace the links in blue with your social accounts.
5. Preview, and if all looks fine, Save Template.
Extra information on post:
Note: If you want to add more social icons, simply add this section code right after any of the section code: </a>. Replace the link in orange with your desired social icon image link and replace the blue link with your desired social account.
<span>•</span> <img src='http://www.yourlinkhere.com/16x16/delicious.png'/><a href='flare5url'>Add to del.icio.us</a>
Note: The section code in green represents the dot separating the social icons, if you do not want to have that, simply remove the entire section code in green.
