Berita

1. pingomatic.com PR 7, RA 1131. Ping This blog is not foreign to the blogger, support for RSS ping blog URL.
2. pingmyblog.com PR 5, RA 5074. To ping your blog URL and RSS.
3. pingoat.com PR 5, RA 5748. Support to ping blog URL and RSS.
4. feedshark.brainbliss.com PR 5, RA 18 560. Support is also to ping RSS and podcast.
5. auto-ping.com PR 5 RA 22 930. To ping your blog URL and RSS. It's my favorite, how to install a widget on blogs making it easier for us to ping after updating your blog with just one click. Examples like that attached my blog this.
6. pingler.com PR 4, RA 3325. To ping RSS must register, smentara ping blog URL can directly without a list.
7. pingates.com PR 4, RA 28 170. Just to ping blog URL.
8. totalping.com PR 3, RA 6153. Auto-ping.com alike to above. If this ping blog first and then install the widget.
9. autopinger.com PR 3, RA 26 071. Just to ping the blog alone.
10. blogpingtool.com PR 3, RA 50 210. Support for ping RSS, required to install code that has been given in the blog / web after pinging.

If you are providing useful information in your blog, then every visitor will want to get latest updates from your blog. For that purpose you need a Email Subscription Form in your blog, so that interested visitors can easily get latest updates. And to add email or feed Subscription Form to your blogger blog (blogspot) it's a very easy thing to do. So let's begin:

1. Log in to Blogger, then go to Design > Page Elements > click on "Add a Gadget" link. 
2. From the pop-up window, click on the "HTML/JavaScript" gadget. 
3. Paste the following code inside the empty box:

<style>
.hl-email{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqnXoMatWG1tDea_wlSXo9w6MpQ1CItd106NtVEWoNCP2VtJBQFsAVt4UKBa3N-rmuXRi7nKyGwSQ0nFZQBw9oJX8jpO9jeAXaYyMKPpimXRzu7TpxaDDmSI54L5Tjpj0aozdIjh720Dw/s1600/mail.png) no-repeat 0px 12px ;
width:300px;
padding:10px 0 0 55px;
float:left;
font-size:1.4em;
font-weight:bold;
margin:0 0 10px 0;
color:#686B6C;
}
.hl-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:3px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:12px sans-serif;
}
.hl-emailsubmit:hover{
background:#E98313;
}
.textarea{
padding:2px;
margin:6px 2px 6px 2px;
background:#f9f9f9;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;
width:130px;
color:#666;}
</style>
<div class="hl-email">
Subscribe via Email <form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=helplogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if (this.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" value="Enter email address here" type="text" />
<input type="hidden" value="helplogger" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="hl-emailsubmit" value="Submit" type="submit" />
</form>
</div>

Settings 

• Replace the url address in green if you want to change the email icon
• Increase/Decrease the 130 width value for a wider text area
• Replace http://feedburner.google.com/fb/a/mailverify?uri=helplogger with your Feedburner Email Feed link. You can get it by visiting your feedburner account then navigate to Publicize and then to Email Subscriptions.
• Replace helplogger with your feed title. It appear at the end of your feed link. In my case it is http://feedburner.google.com/fb/a/mailverify?uri=helplogger

4. Save your widget and check your blog.

Source

What the following CSS trick will do for you:

1. When the general block of comments is initiating (.comments-content) a counter called countcomments activates and starts with an initial value of 1. 
2. Then, each time the code flow goes through a review of any level, either a principal or a reply comment (.comment-thread li), content will bring us in front (:before) of the body of the comment, the number that is the counter at the time.
3. Then is incremented in one unit the counter (counter-increment).

1. Log in into your Blogger account, then go to Design (or Layout) > Page Elements
2. Click on Add a Gadget Link
3. Choose "HTML/JavaScript" option
4. Paste this code inside the empty box:

<div id="hlslidein" style="display:none;"> <div class="help">?</div><div class="expand">+</div> <div class="close">X</div> <p>Recommended for you</p> <div id="hlslidein_image"></div> <div  id="hlslidein_title">Loading..</div> </div> <script> if(document.location.href.split("/").length==6&&document.location.href.indexOf(".html")!=-1){if(typeof hl_onload_queue=='undefined')var hl_onload_queue=[];if(typeof hl_dom_loaded=='boolean')hl_dom_loaded=false;else var hl_dom_loaded=false;if(typeof hl_async_loader!='function'){function hl_async_loader(src,callback,id){var script=document.createElement('script');script.type="text/javascript";script.async=true;script.src=src;script.id=id;var previous_script=document.getElementById(id);if(previous_script)if(previous_script.readyState=="loaded"||previous_script.readyState=="complete"){callback();return}else{script=previous_script}if(script.onload!=null)previous_callback=script.onload;script.onload=script.onreadystatechange=function(){var newcallback;if(previous_script&&previous_callback)newcallback=function(){previous_callback();callback()};else newcallback=callback;if(hl_dom_loaded){newcallback()}else hl_onload_queue.push(newcallback);script.onload=null;script.onreadystatechange=null};var head=document.getElementsByTagName('head')[0];if(!previous_script)head.appendChild(script)}}if(typeof hl_domLoaded!='function')function hl_domLoaded(callback){hl_dom_loaded=true;var len=hl_onload_queue.length;for(var i=0;i<len;i++){hl_onload_queue[i]()}}hl_domLoaded();hl_async_loader("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js",function(){hl_async_loader("http://helplogger.googlecode.com/svn/trunk/Recommended Post Slide Out For Blogger Blogspot.js",function(){},"hl-out-slide")},"jQueryjs")} </script> <a href="http://www.blogzaim.com/2012/11/widget-how-to-add-recommended-post.html" target="_blank"></a>

5. Save The Widget.
6. Go to Edit HTML > Check the "Expand Widget Template" box
7. Search (CTRL + F) for the following code :

<div class='post-footer-line post-footer-line-1'>

OR

<p class='post-footer-line post-footer-line-1'>

OR

<data:post.body/>

Immediately below any of these lines, add the following snippet

<b:if cond='data:blog.pageType == "item"'>
<div style='display:none' id='bpslidein_place_holder'></div>
</b:if>

Now when the reader scrolls down to this div, the slide will open up.

8. Save your template. And that's it!

Source

Steps adding the Related Posts Widget to Blogger/Blogspot

Step 1. Go To Blogger Dashboard >> Template >>Edit HTML;

Step 2. Check the "Expand widgets template" box; 

Step 3. Search (CTRL + F) for this piece of code:

</head>

Step 4. Copy and paste the below code just before/above </head>

<!--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: 18px;
letter-spacing: 2px;
font-weight: bold;
text-transform: none;
color: #5D5D5D;
font-family: Arial Narrow;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
border-right: 1px dotted #DDDDDD;
color:#5D5D5D;
}
#related-posts a:hover{
color:black;
background-color:#EDEDEF;
}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaIq-KFErKcewCRNi77uC69FDDm-hhSOkcppBpcY-1Dg20KwhnorMA7T2tv8F1Tq0PtMWVttO19gFuoGrHD1qGN3sPVa9nJWe5996APQEmv2vEUOOyHtfugJWJSAV4QOoTw2silYsT6v9b/s1600/no_image.jpg&quot;;
var maxresults=5;
var splittercolor=&quot;#DDDDDD&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-big-thumbnails.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Note:
- to change the default picture, replace the URL in blue with your own
- for displaying more than 5 posts, replace 5 value from "var maxresults=5;"
- remove the code in violet if you want the related posts to be displayed in homepage too

Step 5. Now find the following code:

    <div class='post-footer'>

Step 6. And just above it, copy and paste the below code:

<!-- 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.blogzaim.com/'><img alt='Widget' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVM7B2k_FlglFeV1xQO-5O367AVAkHDD18NBaTYhnFJkVPWwJzze0vCeWMYXpQqp830xKcmlrL4kPX1b9jjyAt2S_AyjPoXpPHoY_sOMI7yAy3OKJIhQwoCIU2-sXO5rRfge6CpfAu572_/s1600/newslah2.png'/></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

Note:
- change the 6 value from max-results=6 with the number of posts you want to be displayed.
- If you want the related posts to be displayed on homepage too, remove the code in violet.

Step 7. Save the Template

Source

1. Log in to your Blogger Dashboard >> go to Design >> Add a Gadget >> choose HTML/JavaScript
2. Choose & Copy the code of one of the options below and paste it into the new HTML/JavaScript:

Option 1: Recent posts widget with snippets

<div id="hlrpsa">
<script src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-snippets.js">
</script>
<script>
var numposts = 5;var showpostdate = false;var showpostsummary = true;var numchars = 100;var standardstyling = true;
</script>
<script src="http://your-blog.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts">
</script></div>
<div id="rpdr" style="font-family: arial, sans-serif; font-size: 9px;">
<a href="http://helplogger.blogspot.com/2012/04/recent-posts-widget-for-bloggerblogspot.html" target="_blank" title="Grab this Recent Posts Widget">Recent Posts Widget</a> by <a href="http://helplogger.blogspot.com" title="Recent Posts Widget">Helplogger</a></div>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
#rpdr {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixpOBrbKSlMB7qYpTxrgg_9tPdt2ZLcRFKwI7o0sK-yUywBlbYwGPVjRwyS_LCxRZ1TX5yk8csyKyNXqBpHgWW5onIoWmJoA9c0JJYXLKGbKTN9yDJC2Yv54hcNsHVGzsAjiZ3WjIJvQHy/s1600/blogger.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rpdr, #rpdr a {color:#808080;}
#hlrpsa { border-bottom:1px #cccccc dotted; margin-top:-10px; padding-bottom:10px;}
.hlrps a {font-weight:bold; }
.hlrpssumm {}
</style>

Option 2: Recent Posts Widget Showing Post Titles Only

<div id="hlrpsb">
<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-titles-only.js"></script>
<script style="text/javascript">var numposts = 10;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script>
<script src="http://your-blog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div>
<div style="font-family: arial, sans-serif; font-size: 9px;" id="rpdr"><a href="http://helplogger.blogspot.com/2012/04/recent-posts-widget-for-bloggerblogspot.html" title="Grab this Recent Posts Widget" target="_blank">Recent Posts Widget</a> by <a href="http://helplogger.blogspot.com" title="Recent Posts Widget">Helplogger</a></div><noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>
<style type=text/css>
#rpdr {background: url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixpOBrbKSlMB7qYpTxrgg_9tPdt2ZLcRFKwI7o0sK-yUywBlbYwGPVjRwyS_LCxRZ1TX5yk8csyKyNXqBpHgWW5onIoWmJoA9c0JJYXLKGbKTN9yDJC2Yv54hcNsHVGzsAjiZ3WjIJvQHy/s1600/blogger.png ) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rpdr, #rpdr a {color:#808080;}
#hlrpsb { }
.bbrecpost2 {
padding-top:6px;
padding-bottom:6px;
border-bottom: 1px #cccccc dotted; }
</style>

3. Change 5 (option 1) and 10 (option 2) with the number of posts you want to show. Changefalse to true if you want the posts dates to appear, and change 100 (option 1) if you want more characters to be displayed.
Don't forget to change your-blog text with the name of your blog or if you have a custom domain change all the bolded line with your address like in this example:

http://www.your-site.com/feeds/posts/default....

4. Save your widget. That's it!! Enjoy

Source

1. Go To Blogger > Design > Edit HTML
2. Backup your template
3. Click the "Expand Widgets Templates" Box
4. Search for this,

<data:post.body/>

5.  Just above it paste the code below

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp; action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:20px;'/>

6. Save your template and you are done!

1) : Masukkan Widget menggunakan button dibawah ini

<div id="bpslidein" style="display:none;"> <div class="help"> ?</div> <div class="expand"> +</div> <div class="close"> X</div> <p> Recommended for you</p> <div id="bpslidein_image"> </div> <div id="bpslidein_title"> Loading..</div> </div> <script> if(document.location.href.split("/").length==6&&document.location.href.indexOf(".html")!=-1){if(typeof bp_onload_queue=='undefined')var bp_onload_queue=[];if(typeof bp_dom_loaded=='boolean')bp_dom_loaded=false;else var bp_dom_loaded=false;if(typeof bp_async_loader!='function'){function bp_async_loader(src,callback,id){var script=document.createElement('script');script.type="text/javascript";script.async=true;script.src=src;script.id=id;var previous_script=document.getElementById(id);if(previous_script)if(previous_script.readyState=="loaded"||previous_script.readyState=="complete"){callback();return}else{script=previous_script}if(script.onload!=null)previous_callback=script.onload;script.onload=script.onreadystatechange=function(){var newcallback;if(previous_script&&previous_callback)newcallback=function(){previous_callback();callback()};else newcallback=callback;if(bp_dom_loaded){newcallback()}else bp_onload_queue.push(newcallback);script.onload=null;script.onreadystatechange=null};var head=document.getElementsByTagName('head')[0];if(!previous_script)head.appendChild(script)}}if(typeof bp_domLoaded!='function')function bp_domLoaded(callback){bp_dom_loaded=true;var len=bp_onload_queue.length;for(var i=0;i<len;i++){bp_onload_queue[i]()}}bp_domLoaded();bp_async_loader("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js",function(){bp_async_loader("http://recommended-slide-out-for-blogger.googlecode.com/svn/trunk/bp-out-slide.min.js",function(){},"bp-out-slide")},"jQueryjs")} </script> <a href="http://www.bloggerplugins.org/2011/12/recommended-post-slide-out-for-blogger.html" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikJAtSRcyE8GUYz1Y8hyphenhyphenyZAnaDibx0ph_P8n-CfimSy1X1vA2UlAaHSI5NaC_4XlPsheg1mDsCRPtlVw67kkUJoDfd1ZoPE-iHsJKwC7TN822UIM6IOd_lUy-tkesRhSwpt928C5g8vVc/I/bloggerplugins.png" alt="Recommended Post Slide Out For Blogger" /></a>

Popup ini akan keluar di penghabisan posting anda (DEMO). Benda ni kalau letak kat bawah memang da ok sangat.

Di dalam template edit HTML anda sila cari code di bawah ini,(Kamu perlu expand the Widget Templates)

<div class='post-footer-line post-footer-line-1'>

or

<p class='post-footer-line post-footer-line-1'>

or

<data:post.body/>

Sekiranya sudah menjumpainya, sila copy code dibawah ini dan letak/paste di bawah code di atas.

<b:if cond='data:blog.pageType == "item"'>
<div style='display:none' id='bpslidein_place_holder'></div>
</b:if>

Sekarang, apabila pembaca sedang membaca post anda, di penghabisan post akan keluar popup ini.

2) Bagi nampak lebih menarik

]]></b:skin>
Cari code di atas ini dan paste code di bawah ini di atasnya.

---

#bpslidein{z-index:5;width:400px;height:100px;padding:10px;background-color:#fff;

border-top:3px solid #1616F5;position:fixed;right:-430px;bottom:0;-moz-box-shadow

:-2px 0 5px #aaa;-webkit-box-shadow:-2px 0 5px #aaa;box-shadow:-2px 0 5px #aaa;fo

nt-family:Arial, Helvetica, sans-serif;}

#bpslidein p{font-size:11px;text-transform:uppercase;font-family:Arial,Helvetica,

sans-serif;letter-spacing:1px;color:#555;}

#bpslidein_title{color:#555;font-weight:700;font-size:16px;margin:10px 20px 10px 

0;}
#bpslidein a,#bpslidein a:hover,#bpslidein_title{text-decoration:none;color:#1616

F5;}
#bpslidein .close,#bpslidein .expand,#bpslidein .help{border:2px solid #EEE;curso

r:pointer;color:#9A9AA1;width:13px;height:15px;padding:2px 0 0 5px;position:absol

ute;right:10px;font-size:17px;font-weight:700;font-family:Arial, Helvetica, sans-

serif;font-size:12px;}
#bpslidein .help{right:35px;}
#bpslidein_title,#bpslidein_image{float:left;width:80px;}
#bpslidein_title{width:290px;}

---

CSS di atas ini adalah untuk default, sekiranya anda pandai menggunakannya, boleh la menukar warna mengikut kesukaan anda.

Facebook Like auto show hide when mouse over Demo Here

Untuk slider di sebelah kanan : 

Di sini terdapat 2 cara mudah

Step 1 : Masukkan Jquery Javascript Plugin (Kepada Yang dah ada, jangan pedulikan ini)

Pergi ke Blogger Dashboard < Design tab > Edit Html
Cari/Search </head> tag
Masukkan code di bawah ini di bawah </head> tag

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>

Step 2: Masukkan Code Widget
Senang saja
Masukkan code di bawah ini dan tukar tulisan tulisan berwarna merah.
Contoh : http://www.facebook.com/Gsiym
Tukar yang merah sahaja

<script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".w2bslikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8R3MrNg-DPZhUqJ7OiDDsBAX_sGxr4BOVW35MYcEsJs4KrjyvUppg6U5YqeIkcXQ7tvISoIANugU7SJVvhDs4BqfLvjkWgMxXoTuajzcSOKGAYKVhC-V-bIaYm1USGg3q74h61XsIjCf1/s150/w2b_facebookbadge.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;} .w2bslikebox div{border:none;position:relative;display:block;} .w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 7px;text-align: right;z-index: 99999;} .w2bslikebox span a{color: gray;text-decoration:none;} .w2bslikebox span a:hover{text-decoration:underline;} </style> <div class="w2bslikebox" style=""> <div> <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FGsiym&amp;width=245&amp;colorscheme=light&amp;show_faces=
true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe><span><a href="http://www.way2blogging.org/2011/06/add-static-facebook-pop-out-like-box.html">by Way2Blogging</a></span> </div> </div>

Untuk WordPress blog, masukkan code di bawah ini di header.php fail di <head> :
wp_enqueue_script(“jquery”);
Sebelum code ini:
wp_head();

Untuk blogger atau website yang lain, sila masukkan code ini di atas </head> :

(click here) A Message box when page opens
(click here) Don't let the user use right click on mouse

Layout > Add a gadget > HTML/Javascript

<SCRIPT LANGUAGE="JavaScript"> var message="Function Disabled!"; /////////////////////////////////// function clickIE() {if (document.all) {alert(message);return false;}} function clickNS(e) {if (document.layers||(document.getElementById&&!document.all)) { if (e.which==2||e.which==3) {alert(message);return false;}}} if (document.layers) {document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;} else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;} document.oncontextmenu=new Function("return false") // --> </script>

Layout > Add a gadget > HTML/Javascript

<html> <head> <script language="javascript" type="text/javascript"> alert("Welcome to my site") </script> </head> </html>