Are you looking for a script for showing the hour in your blog, just for reminding your readers that there's a real world waiting for them ? Here is one script which doesn't need to load an external thing.
<div id='clock'>
<script type='text/javascript'>var d = new Date(); document.write(d.getHours()+':'+d.getMinutes());</script>
</div>
Just put the script above in an html/javascript widget and you'll have the exact hour showed in your blog.
Cool ?
Today, I am happy to give you a piece of code that I've just release to help bloggers having a blogspot blog to enjoy the new google service, Google Buzz. This widget is based on the one made by Andrew Brett for TechCrunch, derived from a button used to share an items on Google Reader.
To have the Buzz it button in your blog, just login your Blogger account, goto Layout > Edit HTML > and check "expand widget" and put this piece of code before <p><data:post.body/></p> or <data:post.body/>
<a expr:href='"http://www.google.com/reader/link?url=" + data:post.url + "&title=" + data:post.title' expr:onmouseout='"javascript:showsbtext(\"sbtxt" + data:post.id + "\",0);"' onClick='return buzzPopup(this, 'Buzz this')' rel='nofollow'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4YPxA49_M3WiBmkWw8kmRXhpwxeLSHCDTZKwFXeoiKKHcAUfVqqjZ_WnCm96b2dkMuirRGO9dOc-QSBh96afLsPvhdO1KDrPJIth1ramUq2v6g7nPaVpTPmxOpZmRRV-kX319dBdwpXG0/s1600/buzz-icon2.png'/>Buzz it</a>
When clicked, the button will send the visitor to his Google reader account to share the post.
When done, the post shared will be viewed by him and his Google Buzz followers.
I wish you'll love this Google Buzz button for Blogger blogspot, so Buzz it.
Do you offer a full feed or excerpts to your Rss readers ?
If you've not already chose what kind of feed to offer, I think you need two types of information to make your choice: 1) Why visitors subscribe to your feed and 2) What is the common behavior of Rss readers
1. Why visitors subscribe to your feed
I think there's three big reasons which persuade a visitor to become a Rss reader of your blog ( if you know another one, add it on comments):
2. The common behavior of Rss readers
The best answer to this question comes from Bob Jones who said about common behavior of Rss readers that :
If you've not already chose what kind of feed to offer, I think you need two types of information to make your choice: 1) Why visitors subscribe to your feed and 2) What is the common behavior of Rss readers
1. Why visitors subscribe to your feed
I think there's three big reasons which persuade a visitor to become a Rss reader of your blog ( if you know another one, add it on comments):
- He doesn't to miss updates of your intersting blog
- He wants to have all his favorites’ blogs in the same place instead of checking out all bookmarks
- He doesn't want to see all the ads you put in your blog
2. The common behavior of Rss readers
The best answer to this question comes from Bob Jones who said about common behavior of Rss readers that :
People that read a blog in their RSS readers don’t actually read my stuff half of the time. They scan and skip.
People that read a blog in their RSS readers don’t see any ads I have on my site. Advertisers don’t get enough ROI and stop advertising.
People that read a blog in their RSS readers hardly ever feel the need to engage in the comments. They read your post and move on.
People that read a blog in their RSS reader do not contribute to your page view statistics, making it harder for you to sell space to advertisers at a good price.
Some people can will steal and copy your content. They are called scrapers, and we all hate them. They don’t care.
With all these infos in your hands, I think you can now make chose if you want to offer a full feed or just excerpts to your Rss readers.
One day, perhap's it will be impossible for you to use the drag and drop fonction for blogger widgets in the layout. If in meantime you have an urgent need to move a widget from a place to another, just follow the steps describe here to make the change you want :
1. Log in your Blogger account. Go to Layout > Edit html
2. Find the part of the your template where there's the widget you want to move.
Here, will take the example of the widget "followers" in the sidebar. When you create a blog and chose the minima template, your sidebar will a have three widgets showed in the following order :
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='BlogArchive1' locked='false' title='Blog archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='Who am I?' type='Profile'/>
</b:section>
</div>
If I want to put the followers widget at the bottom and to have the Profile widget at the top of the sidebar, I will begin by cutting the followers widget line and paste it at the bottom.
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='Who am I?' type='Profile'/>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/></b:section>
</div>
Then, I'll cut the Profile widget line and will put it at the top of the sidebar.
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='Who am I?' type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Blog archive' type='BlogArchive'/>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='BlogArchive1' locked='false' title='Blog archive' type='BlogArchive'/>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
</b:section>
</div>
</div>
I'll now have a sidebar with widgets organize the way I want it. The last thing to do will be to save the template.
So, like we have see it, it's very simple to move a widget from a place to another in the html code of your template when the drag and drop fonction doesn't work.
If you have wonder why animated gifs don't work after being upload in a blogger post, I think a can give you a quick answer to this question.
When uploaded in a Blogger post, the animated gif having a gif extension is changed to a png image. So, if your image was named moonwalk.gif, it will be named moonwalk.png after being uploaded in your Blogger post editor.
To show a working gif animated, just upload your picture in another host and put the link in this code :
Put this code in your post and you'll have a working animated gif in you blogger blogspot post.
In SimplexPro template design by Simplex desing there’s an accordion widget which show featured posts with thumbnails. This widget help you to publicize posts of a important label of your blog.
I really love the ability it gives visitors to enhance or hide posts shows within.
This widget only work with one label and thumbnails will only be view if you offer a full feed. To have it in your blog, just follow these steps:
1. Login your Blogger account and go to “Layout” > “Edit html”
2. Place this css just before ]]></b:skin>
.accordion {
float:left;
width: 260px;
border-bottom: solid 1px #c4c4c4;
}
.accordion h4 {
background: #e9e7e7 url(http://www.webdesignerwall.com/demo/jquery/images/arrow-square.gif) no-repeat right -51px;
padding: 7px 15px;
margin:0;
font: bold 120%/100% Arial, Helvetica, sans-serif;
border-top: solid 1px #c4c4c4;
border-bottom: none;
cursor: pointer;
}
.accordion h4:hover {
background-color: #e3e2e2;
}
.accordion h4.active {
background-position: right 5px;
}
.accordion p {
background: #f7f7f7;
margin: 0;
padding: 10px 15px 20px;
}
3. Put this code before </head>
<script src='http://contact.dinhquanghuy.googlepages.com/jquery.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(".accordion h4:first").addClass("active");
$(".accordion p:not(:first)").hide();
$(".accordion h4").click(function(){
$(this).next("p").slideToggle("slow")
.siblings("p:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h4").removeClass("active");
});
});
</script>
Save your template.
4. Go to “Layout” and add a new Html widget where you’ll put all this code: replace words in bold with correct informations.
<script language='javascript'>
imgr = new Array();
imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";
showRandomImg = true;
jimgwidth = 220;
jimgheight = 120;
jfntsize = 12;
jacolor = "#E67C15";
jaBold = true;
jtext = "Comments";
jshowPostDate = true;
sumtitle = 25;
jsummaryPost = 200;
summaryFontsize = 12;
summaryColor = "#000";
numposts = 6;
label = "Your label";
home_page = "http://yourblog.blogspot.com/";
</script>
<div class='accordion'>
<script src='http://simplexdesign.googlecode.com/files/j-label-fix.js' type='text/javascript'></script>
</div>
Save the widget, go to have a look and enjoy this accordion widget showing one label featured posts with thumbnails!
This widget only work with one label and thumbnails will only be view if you offer a full feed. To have it in your blog, just follow these steps:
1. Login your Blogger account and go to “Layout” > “Edit html”
2. Place this css just before ]]></b:skin>
.accordion {
float:left;
width: 260px;
border-bottom: solid 1px #c4c4c4;
}
.accordion h4 {
background: #e9e7e7 url(http://www.webdesignerwall.com/demo/jquery/images/arrow-square.gif) no-repeat right -51px;
padding: 7px 15px;
margin:0;
font: bold 120%/100% Arial, Helvetica, sans-serif;
border-top: solid 1px #c4c4c4;
border-bottom: none;
cursor: pointer;
}
.accordion h4:hover {
background-color: #e3e2e2;
}
.accordion h4.active {
background-position: right 5px;
}
.accordion p {
background: #f7f7f7;
margin: 0;
padding: 10px 15px 20px;
}
3. Put this code before </head>
<script src='http://contact.dinhquanghuy.googlepages.com/jquery.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$(".accordion h4:first").addClass("active");
$(".accordion p:not(:first)").hide();
$(".accordion h4").click(function(){
$(this).next("p").slideToggle("slow")
.siblings("p:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h4").removeClass("active");
});
});
</script>
Save your template.
4. Go to “Layout” and add a new Html widget where you’ll put all this code: replace words in bold with correct informations.
<script language='javascript'>
imgr = new Array();
imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";
showRandomImg = true;
jimgwidth = 220;
jimgheight = 120;
jfntsize = 12;
jacolor = "#E67C15";
jaBold = true;
jtext = "Comments";
jshowPostDate = true;
sumtitle = 25;
jsummaryPost = 200;
summaryFontsize = 12;
summaryColor = "#000";
numposts = 6;
label = "Your label";
home_page = "http://yourblog.blogspot.com/";
</script>
<div class='accordion'>
<script src='http://simplexdesign.googlecode.com/files/j-label-fix.js' type='text/javascript'></script>
</div>
Save the widget, go to have a look and enjoy this accordion widget showing one label featured posts with thumbnails!