Rabu, 04 Mei 2011

How To In Blogger




Posted: 04 May 2011 03:07 AM PDT
Blogger related posts widget with thumbnails – There are many ways to endure your blog visitors for long to read your blog, one of which way is to place related posts widget with thumbnails.
By placing related posts widget with thumbnails, at the end of your posts, then the chances of your blog visitors will be more interested to read  other articles.
related posts with thumbnails for blogger

Add Related Post with Thumbnails on Blogger

Here are the steps to add related posts widget on blogger:
  1. Please login to blooger using your ID
  2. Click Design
    blogger design
  3. Click Edit HTML tab
    blogger edit html
  4. Please backup your template first then click Download Full Template
  5. Check the small box next to Expand Widget Template
    expand widget templates
  6. Find the code: </head>
  7. Delete the code above and  replace with the following code:
    <!--Related Posts with thumbnails Scripts and Styles Start--> <!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'> <style type="text/css"> #related-posts { float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px; } #related-posts h2{ font-size: 1.6em; font-weight: bold; color: black; font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif; margin-bottom: 0.75em; margin-top: 0em; padding-top: 0em; } #related-posts a{ color:black; } #related-posts a:hover{ color:black; } #related-posts  a:hover { background-color:#d4eaf2; } </style> <script type='text/javascript'> var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLxOUT-tCDSZieJO9casBVSK16tU1kTwT7Rpk8dWS3JZiW26J0MzRRZtQtKc3w7ifLH10RuB7OC4m6Dpp477aJ7exXHiOaJ5IKSh09ZLFy63rVEcOgiFpNii5t5fhcpWrPKu4VQ9insbE/s400/noimage.png"; var maxresults=5; var splittercolor="#d4eaf2"; var relatedpoststitle="Related Posts"; </script> <script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/> <!-- remove --></b:if> <!--Related Posts with thumbnails Scripts and Styles End--> </head> 
  8. Then find the code:
    <div class='post-footer-line post-footer-line-1'> 
    Or sometimes like these:
    <p class='post-footer-line post-footer-line-1'> 
  9. Paste the following code right under the code before:
    <!-- Related Posts with Thumbnails Code Start--> <!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;); </script> </div><div style='clear:both'/> <!-- remove --></b:if> <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'> <a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a> </b:if></b:if> <!-- Related Posts with Thumbnails Code End--> 
  10. Click Save Template
  11. Finish and please to check the result.

Related posts widget has explained above will show up at the end of each posts page and not at the front page. If you want it appears at the front page, then you just need to delete the following code:
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'> 
And code
<!-- remove --></b:if> 

Customize  related posts widget

There some needs to be customized from related posts widget with thumbnails above, among them are:
var maxresults=5; 
The code above is to display the number of related posts that appear, to change the number, just replace the digit of 5 with another digits.
var relatedpoststitle="Related Posts";
By default, related posts widget which appear will titled as Related Posts as shown in code above, but the text can be modified as you like, e.g: You might also like, or other words.
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLxOUT-tCDSZieJO9casBVSK16tU1kTwT7Rpk8dWS3JZiW26J0MzRRZtQtKc3w7ifLH10RuB7OC4m6Dpp477aJ7exXHiOaJ5IKSh09ZLFy63rVEcOgiFpNii5t5fhcpWrPKu4VQ9insbE/s400/noimage.png";
If there is no image on your posts, then related posts widget will appear default image which contain text No image. Image can be changed by changing the image address.
var splittercolor="#d4eaf2";
Code #d4eaf2 is the color code of between posts border line. You can change it with other colors.
Good Luck!!!!!
Credits: Related posts widget with thumbnails above was created by Blogger plugins
Blogger Related Posts Widget with Thumbnails is a post from: Blogger Tutorial for beginners

Another useful blogger tutorials:

Posted: 03 May 2011 03:23 PM PDT
How to create Subscribe buttons – Someone through my facebook page asked about how to create subscribe buttons on facebook, twitter, and feeds as well as on this How To In Blogger blog.
The following is the subscribe buttons which was meant:
subscribe button
To create such subscribe buttons above is very easy, just follow the steps below.

Create Subscribe Buttons Using CSS Image Sprites

The technique to create subscribe buttons which will described is inspired by the creating awesome menu technique which using CSS image Sprite that is using one image background media for several buttons which considered more efficient from the blog loading aspect. Background images used are as follows:
CSS image sprites
Without elaborating, for you who interested to create subscribe buttons using CSS sprite image technique, just follow the steps below:

Step #1

  1. Please login to blogger using your ID
  2. Click Design
    blogger design
  3. Click Edit HTML sub menu
    blogger edit html
  4. Do the backup for your template first for secure then click Download Full Template
  5. Find the code: ]]></b:skin>
  6. Remove the above code and replace with the following code:
    ul#soc{width:200px;margin:10px 0px;list-style:none;} ul#soc li{display:inline;} ul#soc li a{display:block;float:left;height:32px;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbWUnywdnnQe-AjM0Zyn8pTi7Dx3Omw6xjaPCuW61pySzHUcF3T5kcOTbvzhYYBc6n8Ka1lY50iyi7aa_UAY-G5ZtPqK2d3bA9G995FcxgxVl-PF8UHrzqwaV9_mYh6wk7xrnRUbNCHmg/s1600/sprite.png');text-indent:-9999px;} ul#soc li a.facebook{width:35px;background-position:0 0;} ul#soc li a.twitter{width:45px;background-position:-35px 0;} ul#soc li a.rss{width:40px;background-position:-80px 0;} ul#soc li a.email{width:30px;background-position:-120px 0;} ul#soc li a.facebook:hover, ul#soc li a.facebook:focus{background-position:0 -32px;} ul#soc li a.twitter:hover, ul#soc li a.twitter:focus{background-position:-35px -32px;} ul#soc li a.rss:hover, ul#soc li a.rss:focus{background-position:-80px -32px;} ul#soc li a.email:hover, ul#soc li a.email:focus{background-position:-120px -32px;} ]]></b:skin>
  7. Click Save Template
  8. First step has complete

Step #2
  1. Considered that you still login on blogger
  2. Click Page elements menu
    page elements tab
  3. Click Add a Gadget
    add a gadget link
  4. Click Plus (+) for HTML/ Javascript gadget
    html javascript gadget
  5. Paste the following code on coloumn. Click Save
    <ul id="soc"> <li><a class="facebook" title="Be my facebook fan" href="http://www.facebook.com/pages/How-To-In-Blogger/166729273361572">Facebook</a></li> <li><a class="twitter" title="Folow me on Twitter" href="http://twitter.com/howtoinblogger">Twitter</a></li> <li><a class="rss" title="Subscribe via RSS" href="http://feeds.feedburner.com/howtoinblogger">rss</a></li> <li><a class="email" title="Subscribe via Email" href="http://feedburner.google.com/fb/a/mailverify?uri=howtoinblogger">email</a></li> </ul> 
  6. If you want to move the gadget recently created position, you can just move it and click Save button which on top to finish
  7. Done and please to check the result

Customize Subscribe Links

From the steps above there is some thing you should change that is replace the existing subscribe link with yours. Remember! The code above just an example, you should change the subscribe link with your subscribe code. Here is the code that you need to edit:

http://www.facebook.com/pages/How-To-In-Blogger/166729273361572
Change the link above with your facebook address or facebook page address.

http://twitter.com/howtoinblogger
Change the code above with your twitter address

http://feeds.feedburner.com/howtoinblogger
Change the code above with your blog feed address

http://feedburner.google.com/fb/a/mailverify?uri=howtoinblogger
Change the code above with your email blog subscribe

Just it and get your beautiful subscribe buttons.


How to Create Subscribe Buttons is a post from: Blogger Tutorial for beginners

Another useful blogger tutorials:

0 komentar:

Posting Komentar


Powered byEMF Form Builder
Report Abuse