About
Tags
Activate the mobile version of your blogspot blog 1
07:45<div id='clock'>
<script type='text/javascript'>var d = new Date(); document.write(d.getHours()+':'+d.getMinutes());</script>
</div>
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
<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='http://3.bp.blogspot.com/_hrhg1n2KA3Y/S3TK09ReIxI/AAAAAAAADBg/R4JrmxfUWrs/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.
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.
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.
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog archive' type='BlogArchive'/>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
</div>
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.
Put this code in your post and you'll have a working animated gif in you blogger blogspot post.
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!
Do you want to create a static page in your blogspot blog just like wordpress users do it ? Blogger has made it easy for you.
Since two weeks now, it's possible to make a static page in blogger via Blogger in draft. This static pages can help you to set a "Contact" page, a "About Me" page, etc. You only have a limitation of 10 pages. I think it can be enough for most blog, but it will not be bad if blogger set it to a more important number in the future.
Inlike normal blog post, when published, a page will not appaer at homepage of your blog or in archive (and it doesn’t have labels).
To create a static page for your blogspot blog, you only need to go to your Blogger account vi Blogger in draft, clic on “New post” and in the next page, clic on “Edit pages”. You will the see a button to create a new page, clicit. Add content to your new stand-alone page and publish it.
Next, you’ll have the choice of showing links to your pages in a menu bar (just under the header) or in a Linklist widget in your sidebar. Make your choice and I
The cool thing with the pages menu bar, it’s that you can drag and drop items inside.
So, you want to have a wordpress like page in your blogspot blog ? Just log in Blogger in draft and have fun !
To use the new blogger post editor, just go to Settings and scroll down the page till "Global settings". Select "Updated editor" and "Save settings".
Here are some features of the new post editor :
- Images resizing is more easy
- You can choose to interpret typed html or to show them litteraly (see "options")
- Blogger doesn't add html codes when you add tables
- You can resize the post editor (just maintain clic at the right bottom and elance)
- etc.
I suggest you to use this new blogger post editor for having more fun with your blogspot blog.
One of the best method to keep visitor reading others posts of your blog after reading the one they come in for, it's to show them related posts at the end of each post of your blog.And LinkWithin make it easy for you to do that.
With this widget, your past posts will not go waste cause it will index all your blog archive to give to your new and past readers a way to an accessibility to them.
LinkWithin is just a free widget wich take your blog to another level by showing related posts with thumbnails.
When you're putting a new template in your blog and if this template is lacking some widgets wich were present in the previous, Blogger will let you know that your new theme has not the widgets which will be list. You'll have the choice to Keep them or to just delete them all.
If you choose to "Keep your widgets", Blogger will install them in the sidebar of the new template so you'll be able to drag them to another location when you'll finish (just go to page elements for that).
1. Send an invitation to the new owner of the blog and set him as an administrator when he'll accept your invite.
2. The new administrator can now go in his blogger account and delete you as administrator and even author of the blog.
It's all, only this two step and you're done.
1. Create a New blog for your visiting card
2. Create two posts, one for your "About" page and the other for your "Contact" page. In the "Contact" just put a word, what ever, it'll not appaer when you'll install the visiting card blogger template.
3. Show your blog in the browser and copy the link location of the two posts.
4. After that, go to edit the posts and delete titles then publish again.
5. Template installation
Extract Blogger Template - visitingcard.zip
After login, goto Layout > Edit HTML > Browse > choose Blogger Template - visiting-card-blogger-template.xml > Upload > Save Template
6. Posts pages
After login, goto Layout > Edit HTML > and check "expand widget"
Find this line :
<b:if cond='data:blog.url == "http://yourblog.blogpost.com/about.html"'>
Put your about page link instead of http://yourblog.blogpost.com/about.html
Find this line :
<b:if cond='data:blog.url == "http://yourblog.blogpost.com/contact.html"'>
Put your contact page link instead of http://yourblog.blogpost.com/contact.html
Save your template.
7. Menu links
Find these code :
<li><a href='http://yourblog.blogpost.com/about.html'>About</a></li>
<li><a href='http://yourblog.blogpost.com/contact.html'>Contact</a></li>
Replace the two links with yours (those you have copy in the step 3)
8. Picture or avatar
<img alt='VisitingCardBlogger' src='http://4.bp.blogspot.com/_hrhg1n2KA3Y/S1cKtQx3IcI/AAAAAAAAC0w/wDvGlqilXN0/s1600/person.png'/>
Put your Picture or avatar link to replace http://4.bp.blogspot.com/_hrhg1n2KA3Y/S1cKtQx3IcI/AAAAAAAAC0w/wDvGlqilXN0/s1600/person.png
Your picture must have 59px with and 60px height.
9. Title and description
Find these codes :
<h1>My visiting card</h1>
<p>A short description of your person</p>
10. Networks links
Find these codes and add your links between '' after href=
<li><a href=''><img src='http://3.bp.blogspot.com/_hrhg1n2KA3Y/S1cJ1P1CAbI/AAAAAAAAC0k/oncblNUTnjU/s1600/i_twitter.png'/> <strong>Twitter</strong>twitter.com</a></li>
<li><a href=' '><img src='http://2.bp.blogspot.com/_hrhg1n2KA3Y/S1cG49qPkbI/AAAAAAAAC0E/cRJCajcofK0/s1600/i_facebook.png'/><strong>Face Book</strong>facebook.com</a></li>
<li><a href=''><img src='http://2.bp.blogspot.com/_hrhg1n2KA3Y/S1cJoivorHI/AAAAAAAAC0g/lqjKkW9724Q/s1600/i_stumbleupon.png'/> <strong>Stumbleupon</strong>stumbleupon</a></li>
<li><a href=' '><img src='http://1.bp.blogspot.com/_hrhg1n2KA3Y/S1cFjp1MGHI/AAAAAAAACz0/G5ZMG-Cc-CY/s1600/i_delicious.png'/> <strong>Delicious</strong>delicious.com</a></li>
<li><a href=''><img src='http://2.bp.blogspot.com/_hrhg1n2KA3Y/S1cGJg-GmoI/AAAAAAAACz8/6CnnFCaogs4/s1600/i_digg.png'/> <strong>Digg</strong>digg.com</a></li>
<li><a href=''><img src='http://4.bp.blogspot.com/_hrhg1n2KA3Y/S1cH0YoNPrI/AAAAAAAAC0I/oTomBZMJW28/s1600/i_flickr.png'/> <strong>Flickr</strong>flickr.com</a></li>
<li><a href=''><img src='http://2.bp.blogspot.com/_hrhg1n2KA3Y/S1cIALnrYLI/AAAAAAAAC0M/rZxCss-b77g/s1600/i_lastfm.png'/> <strong>Last.fm</strong>last.fm</a></li>
<li><a href=''><img src='http://4.bp.blogspot.com/_hrhg1n2KA3Y/S1cI162218I/AAAAAAAAC0U/5ND7ykx0pCg/s1600/i_myspace.png'/><strong>My Space</strong>myspace.com</a></li>
<li><a href=''><img src='http://2.bp.blogspot.com/_hrhg1n2KA3Y/S1cJMETBFeI/AAAAAAAAC0c/HYkIEcQT8kw/s1600/i_reddit.png'/> <strong>Reddit</strong>reddit.com</a></li>
To add a new network link, just put this code after those one and fill it with correct informations.
<li><a href='Your profil link in the social site'><img src='http://network-image-link.com/network.png'/> <strong>Social site name</strong>Socialsitelink.com</a></li>
Your network picture must be 30x30px.
11. Contact content
Find these codes and put your informations
<div class='row'><span class='field_l i_company'>Company:</span><span class='field_r'>Your Company Name</span></div>
<div class='row'><span class='field_l i_location'>Location:</span><span class='field_r'>You Location (Town, Country)</span></div>
<div class='row'><span class='field_l i_web'>Website:</span><span class='field_r'><a href='http://yourblogurl.blogspot.com'>Blog or website name</span></div>
<div class='row'><span class='field_l i_mail'>E-Mail:</span><span class='field_r'>youremail@host.com</span></div>
<div class='row'><span class='field_l i_mail'>IM :</span><span class='field_r'>YourIM</span></div>
<div class='row'><span class='field_l i_mail'>Skype:</span><span class='field_r'>yourskype</span></div>
Save your template and Enjoy!
2008 - 2009 SimplexDesign. Content in Blogger Mastering is licensed under a Creative Commons License.- SimplexPro template designed by Simplex Design.
- Powered by Blogger.com.
- Sciences politiques.
- La Divinité de Jésus-Christ.

















