Tutorial: Reply To Comments

Reply to those people who comment your posts
Steps:
1. Go to Dashboard => Design => Edit HTML => Tick Expand Widget
2. Search ( Ctrl + F )

<b:include data='comment' name='commentDeleteIcon'/>

3. Paste this under it ( Ctrl + C ) ( Ctrl + V )

<span class='comment-reply'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=BLOG ID&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450&quot;); return false;'>[Reply]</a></span> 

P/S: preview first before saving just in case it didn't work due to a few mistakes...

JibberJabber Kid...  

---

Have A Nice JibberJabber Day!

---

Tutorial: Put A Message At The Comment Form

Change those comment form with your own words..
here's how:
1. Go to Dashboard => Setting => Comments
2. Search ( Ctrl + F )

Comment Form Message

 3. Type in your words there to attract people to comment your posts.

P/S: preview first before saving just in case it didn't work due to a few mistakes...

JibberJabber Kid... 

---

Have A Nice JibberJabber Day!

---

Tutorial: Cute Icon Beside The Date At Comment Form

Folow this simple steps:
1. Go to Dashboard => Design => Edit HTML => Tick Expand Widget
2. Search for ( Ctrl + F )

<dd class='comment-footer'>

3. Paste this code under the code just now.

<img src='ICON URL'/> 

P/S: preview first before saving just in case it didn't work due to a few mistakes...

JibberJabber Kid...  

---

Have A Nice JibberJabber Day!

---

Tutorial: Floating Notes

Here's how:
1. Go to Dashboard => Design => Page Element => Add Gadget => HTML/JavaScript
2. Paste this ( Ctrl + C ) ( Ctrl + V )

<style type="text/css">#topbar{position:absolute;color:#000000; border: 3px solid purple;padding: 2px;background-color: #FFFFFF;width: 239px;visibility: hidden;z-index: 100;}
</style><br /><br /><script type="text/javascript">
/************************************************ Floating Top Bar script- © Dynamic Drive (www.dynamicdrive.com)* Sliding routine by Roy Whittle (http://www.javascript-fx.com/)* This notice must stay intact for legal use.* Visit http://www.dynamicdrive.com/ for full source code***********************************************/
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser sessionvar startX = 30 //set x offset of bar in pixelsvar startY = 5 //set y offset of bar in pixelsvar verticalpos="frombottom" //enter "fromtop" or "frombottom"
function iecompattest(){return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body}
function get_cookie(Name) {var search = Name + "="var returnvalue = "";if (document.cookie.length > 0) {offset = document.cookie.indexOf(search)if (offset != -1) {offset += search.lengthend = document.cookie.indexOf(";", offset);if (end == -1) end = document.cookie.length;returnvalue=unescape(document.cookie.substring(offset, end))}}return returnvalue;}
function closebar(){if (persistclose)document.cookie="remainclosed=1"document.getElementById("topbar").style.visibility="hidden"}
function staticbar(){barheight=document.getElementById("topbar").offsetHeightvar ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;var d = document;function ml(id){var el=d.getElementById(id);if (!persistclose || persistclose && get_cookie("remainclosed")=="")el.style.visibility="visible"if(d.layers)el.style=el;el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};el.x = startX;if (verticalpos=="fromtop")el.y = startY;else{el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;el.y -= startY;}return el;}window.stayTopLeft=function(){if (verticalpos=="fromtop"){var pY = ns ? pageYOffset : iecompattest().scrollTop;ftlObj.y += (pY + startY - ftlObj.y)/8;}else{var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;ftlObj.y += (pY - startY - ftlObj.y)/8;}ftlObj.sP(ftlObj.x, ftlObj.y);setTimeout("stayTopLeft()", 10);}ftlObj = ml("topbar");stayTopLeft();}
if (window.addEventListener)window.addEventListener("load", staticbar, false)else if (window.attachEvent)window.attachEvent("onload", staticbar)else if (document.getElementById)window.onload=staticbar</script><div id="topbar"><a href="" onclick="closebar(); return false"><img src="CLOSE BUTTON URL"></a>YOUR NOTES HERE</div>

Close Button Suggestion:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwiMY6Sf50fFd2mrhY60SLi3KlOuyNv6BIGrdtP13k_8Yne3SfAOQuOHOGDKpLlApo44bDjlyjukh8RmhgZ9Jx6ec2Hlg-fCYoLNeM_dO3Eg3lerW5LntMtaZHB8XzMA8qyNqH1IbVBAhG/s1600/close+lagi.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXll1DylVGyfmKDux9riY1OF4BzfRY8OCIgIg3I2UO5N4Hhpu2Sd8OFeeOgVJMdVoqsqaYlUGqa_CmvPL0R_0jyDGGw05Vp6AzCK-vF-Mt4VD1D2vTX-sLhYBl3SKuZyxbWqUcHVaoMHqw/s1600/close.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDZMMsTKHYVEsnZzIavbXlaKheCoxpyhzw30r3MiKCGlco6YFBYfgqyZBl6X95foVm6w3Z1n83MB8eya9riaLMEaFN7x7qI5eDLtfNIa8ieqIXth5NBW1GD-y0bZjqxPStU6KHEBozPJwl/s1600/tutup+lagi.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJVky-Eyl7g9PP6ezL-YCNT1XYIgqdrVOxKQH68S4ZAcQjeJLef4hyphenhyphenSJzCNpcZXRptf_oqSrv3l3AJaIR17jHafDk-H2DW5rF5AA8R5KVO1MQqH00F6yUYENn_WKM0EAFeJQnu-GF6yNW7/s1600/tutup.png 

 P/S: preview first before saving just in case it didn't work due to a few mistakes...

JibberJabber Kid... 

---

Have A Nice JibberJabber Day!

---

Tutorial: Type Of Border

You Don't want just pointy borders for those post/sidebar title:
1. Go to Dashboard => Design => Edit HTML => Tick Expand Widget
2. Search for (Ctrl + F )

Post Title:

h3.post-title {

Sidebar Title:

h2 {

3. Paste it under the code you've search for ( Ctrl + C ) ( Ctrl + V )

 -moz-border-radius-bottomright: 50px;border-bottom-right-radius: 50px;}

________________________________________ 

 -moz-border-radius-bottomright: 50px 25px;border-bottom-right-radius: 50px 25px;}

________________________________________

-moz-border-radius-bottomright: 25px 50px;border-bottom-right-radius: 25px 50px;}

________________________________________

 -moz-border-radius: 1em 4em 1em 4em;border-radius: 1em 4em 1em 4em;}

________________________________________

 -moz-border-radius: 25px 10px / 10px 25px;border-radius: 25px 10px / 10px 25px;}

 ________________________________________

-moz-border-radius: 35px;
border-radius: 35px;
}

 P/S: preview first before saving just in case it didn't work due to a few mistakes...

JibberJabber Kid... 

---

Have A Nice JibberJabber Day!

---

Tutorial: Energy Saving Mode

Energy Saving MOde:
1. Go to Dashboard => Design => Edit HTML => Tick Expand Widget
2. Search for ( Ctrl + F )

</head>

3. Paste ( Ctrl + C ) ( Ctrl + V )

<script language="javascript" type="text/javascript" src="http://www.onlineleaf.com/savetheenvironment.js"></script>

P/S: preview first before saving just in case it didn't work due to a few mistakes...

JibberJabber Kid...  

---

Have A Nice JibberJabber Day!

---

Tutorial: Ajax Float Chatbox

Ajax Float Chatbox is when you click chatbox...it'll appear in the middle of your screen magically... try it if you don't believe it:

1. Go to Dashboard => Design => Page Element => Add Gadget => HTML/JavaScript
2. Paste it there:

<div style='display:scroll; position:fixed; top:70px; right:-0px;'>
<!-- Start Ajax Popup Shoutbox by -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>
$(document).ready(function() {
//select all the a tag with name equal to modal
$('a[name=modal]').click(function(e) {
//Cancel the link behavior
e.preventDefault();


//Get the A tag
var id = $(this).attr('href');


//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();


//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});






//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();


//Set the popup window to center
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);


//transition effect
$(id).fadeIn(2000);


});


//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();


$('#mask').hide();
$('.window').hide();
});


//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});


});
</script>
<style>
img { border: none; }
#mask {
position:center;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}


#boxes .window {
position:fixed;
left:0;
top:0;
width:271px;
height:480px;
display:none;
z-index:9999;
padding:20px;
}
#boxes #wanhazelshoutbox {
background:url(BODY/BACKGROUNDCHATBOX) no-repeat 0 0 transparent;
width:271px;
height:480px;
padding:56px 0 20px 5px;
}
#closesb {
padding:2px 0 0 0;
}
#author {
padding:8px 0 0 168px;
}
</style>
<ul><center> <a href="#wanhazelshoutbox" name="modal"><img src="ICON CHATBOX" border="0" /></a> </center> </ul>
<div id="boxes">
<!-- Start Shoutbox -->
<div id="wanhazelshoutbox" class="window"><!-- Begin ShoutMix - http://www.shoutmix.com/ --><center>



CODE CHATMIX



</center><!-- End ShoutMix -->
<div id="author">
</div><div id="closesb"><center><input type="button" value="Close" class="close" /><center>
</div></div><!-- End of Ajax Shoutbox -->
<!-- Mask to cover the whole screen -->
<div id="mask"></div></div>
<!-- End of Ajax Popup Shoutbox--></div>

Here's a few design for the Backgroun Chatbox:
BLUEISH :

http://i1180.photobucket.com/albums/x416/whatevagurl/anigifbiru.gif

GREENY :

http://i1180.photobucket.com/albums/x416/whatevagurl/anigifhijau.gif

PURPLELICIOUS :

 http://i1180.photobucket.com/albums/x416/whatevagurl/anigifpepel.gif 

PINK

 http://i1180.photobucket.com/albums/x416/whatevagurl/ainaamaniaanimated.gif

P/S: preview first before saving just in case it didn't work due to a few mistakes...

JibberJabber Kid...  

---

Have A Nice JibberJabber Day!

---