Showing posts with label Blogger Tutotial. Show all posts
Showing posts with label Blogger Tutotial. Show all posts

Friday, January 22, 2010

I Never knew This Feature Exists on Blogger


Im talking about the scheduled post feature in Blogger. Yesterday I was thinking how will I do it. I am so busy at school so from now on I will be writing future posts and just scheduled them all out. Wondering how I would do it, I asked Google. Luckily Google has the answers. For the sake of newbies who doesn't know about it yet, here is how you do it.

1. First write your post the way you do it as normal.

2. Above the Publish Post button, there is a link called " Post Options". Click it.

3. A box will appear with options to choose from. Check on the Scheduled Post and then set the time and date you want your posts to appear on your blog.

4. Hit the publish button and its done! You will get a confirmation message that your posts will be scheduled at the time you specified. And when the sheduled date arrives, your posts will be automatically publish.

Honestly, I never knew about this on Blogger cause I never thought doing it. Just this time cause im busy.

Wednesday, December 30, 2009

Adding a "Sharing is Sexy/Caring Widget for Blogger

This tutotiral lets you add autohiding social bookmarking buttons on your blogger blog. This is a must have for bloggers. It helps your visitors to bookmark and share your articles easily. The button shows when your visitors hover their mouse pointer over the icons. I got one on my footer (I switched to floating social media buttons already) . This is how you do it. The button should look like this:



Step 1:

Login to Blogger, go to Layout > Edit HTML and check on the " Expand Widget Template". Back up your template after doing this.

Step 2:

Find this code "</head>"
and immediately before or after it paste the following codes
<!--HIDDEN-BOOKMARKS-STARTS-->
<style type='text/css'>
div.beauty-bookmarks {
height:54px;
background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat left bottom;
position:relative;
width:540px;
}

div.beauty-bookmarks span.beauty-rightside {
width:17px;
height:54px;
background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat right bottom;
position:absolute;
right:-17px;
}

div.beauty-bookmarks ul.socials {
margin:0 !important;
padding:0 !important;
position:absolute;
bottom:0;
left:10px;
}

div.beauty-bookmarks ul.socials li {
display:inline-block !important;
float:left !important;
list-style-type:none !important;
margin:0 !important;
height:29px !important;
width:48px !important;
cursor:pointer !important;
padding:0 !important;
}

div.beauty-bookmarks ul.socials a {
display:block !important;
width:48px !important;
height:29px !important;
font-size:0 !important;
color:transparent !important;
}

.beauty-furl, .beauty-furl:hover, .beauty-digg, .beauty-digg:hover, .beauty-reddit, .beauty-reddit:hover, .beauty-stumble, .beauty-stumble:hover, .beauty-delicious, .beauty-delicious:hover, .beauty-yahoo, .beauty-yahoo:hover, .beauty-blinklist, .beauty-blinklist:hover, .beauty-technorati, .beauty-technorati:hover, .beauty-facebook, .beauty-facebook:hover, .beauty-twitter, .beauty-twitter:hover, .beauty-myspace, .beauty-myspace:hover, .beauty-mixx, .beauty-mixx:hover, .beauty-script-style, .beauty-script-style:hover, .beauty-designfloat, .beauty-designfloat:hover, .beauty-syndicate, .beauty-syndicate:hover, .beauty-email, .beauty-email:hover {
background:url('http://i44.tinypic.com/1znbj83.png') no-repeat !important;
}

.beauty-furl {
background-position:-300px top !important;
}
.beauty-furl:hover {
background-position:-300px bottom !important;
}
.beauty-digg {
background-position:-500px top !important;
}
.beauty-digg:hover {
background-position:-500px bottom !important;
}
.beauty-reddit {
background-position:-100px top !important;
}
.beauty-reddit:hover {
background-position:-100px bottom !important;
}
.beauty-stumble {
background-position:-50px top !important;
}
.beauty-stumble:hover {
background-position:-50px bottom !important;
}
.beauty-delicious {
background-position:left top !important;
}
.beauty-delicious:hover {
background-position:left bottom !important;
}
.beauty-yahoo {
background-position:-650px top !important;
}
.beauty-yahoo:hover {
background-position:-650px bottom !important;
}
.beauty-blinklist {
background-position:-600px top !important;
}
.beauty-blinklist:hover {
background-position:-600px bottom !important;
}
.beauty-technorati {
background-position:-700px top !important;
}
.beauty-technorati:hover {
background-position:-700px bottom !important;
}
.beauty-myspace {
background-position:-200px top !important;
}
.beauty-myspace:hover {
background-position:-200px bottom !important;
}
.beauty-twitter {
background-position:-350px top !important;
}
.beauty-twitter:hover {
background-position:-350px bottom !important;
}
.beauty-facebook {
background-position:-450px top !important;
}
.beauty-facebook:hover {
background-position:-450px bottom !important;
}
.beauty-mixx {
background-position:-250px top !important;
}
.beauty-mixx:hover {
background-position:-250px bottom !important;
}
.beauty-script-style {
background-position:-400px top !important;
}
.beauty-script-style:hover {
background-position:-400px bottom !important;
}
.beauty-designfloat {
background-position:-550px top !important;
}
.beauty-designfloat:hover {
background-position:-550px bottom !important;
}
.beauty-syndicate {
background-position:-150px top !important;
}
.beauty-syndicate:hover {
background-position:-150px bottom !important;
}
.beauty-email {
background-position:-753px top !important;
}
.beauty-email:hover {
background-position:-753px bottom !important;
}

</style>
<!--HIDDEN-BOOKMARKS-STOPS-http://pcholics.blogspot.com-->
Step 3:
Find this code "<data:post.body/>"
and after that paste the following codes
<b:if cond='data:blog.pageType == "item"'>
<div class='beauty-bookmarks'>
<ul class='socials'>
<li class='beauty-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='beauty-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='beauty-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='beauty-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='beauty-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='beauty-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='beauty-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='beauty-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='beauty-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='beauty-syndicate'><a href='http://YOURFEEDHERE'title='Subscribe to RSS'/></li>
<li class='beauty-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
</ul>
<span class='beauty-rightside'/></div>
</b:if>
Now save the template and its done! You may edit the codes if you want to delete buttons.

Wednesday, December 23, 2009

Adding Code Snippets on Blogger Posts without any Installation

I've been looking for this for over a year now. Last year I was planning to make a blogspot tutorial blog when I encountered difficulty in displaying codes on blogger posts. So I decided to stop and blog for another topic that don't use any codes on the post. Until I've found some tutorials on how to do so.

First Method - Use SyntaxHighlighter

SyntaxHighlighter allows you to display codes on blogger posts. You can upload this on your own hosting or you can use the free hosted option. You can download SyntaxHighlighter here. Also on the page are tutorials on how to upload it. Or use the free hosted version.


Second Method - Parsing the Codes

You can do this by just following these simple steps. This method also works well in putting adsense codes on inside blogger posts.
  1. Copy the code you want to parse or display on your blog posts.
  2. Parse the code by using parse tool. It is free. Go to Blogcrowds.
  3. Paste the code on the form and hit Parse.
  4. There you go, the parsed code is now ready to be displayed on blogger post.
You can now display the codes on your blogger posts. But before that, enclose the code on a blockquote to give it an elegant look. To fully understand method number two, you can read BlogPandit's guide on how to do it.
Example:

PC Holics' Pagerank

Page Rank Check



PC Holics' Pagerank - Parsed Code
<a href="http://www.prchecker.info/" target="_blank">
<img src="http://pr.prchecker.info/getpr.php?codex=aHR0cDovL3BjaG9saWNzLmJsb2dzcG90LmNvbQ==&tag=1" alt="Page Rank Check" border="0" /></a>