How Add your Own Emoticons to your Blog

Many bloggers looking to add emoticons to your blog, but this depends on blogs bloggers help to put emoticons in their blogs but today I will teach you how to add your own emoticons to your blogs.

The following code is for the script we use to make the call emoticon to blog:

*/ function emoticonComentario() { if(!document.getElementById) {return;} // no soportado bodyText = document.getElementById('comments'); emoticon = bodyText.innerHTML; // <b style="color: red;">:)</b> :-) :-] emoticon = emoticon.replace(/:\)/g,'&lt;img src="<span style="color: #0b5394;">http://static.mobile9.com/bbcode/smileys/smile.gif</span>" /&gt;'); emoticon = emoticon.replace(/:-\)/g,'&lt;img src="<span style="color: #0b5394;">http://static.mobile9.com/bbcode/smileys/smile.gif</span>" /&gt;'); emoticon = emoticon.replace(/:-\]/g,'&lt;img src="<span style="color: #0b5394;">http://static.mobile9.com/bbcode/smileys/smile.gif</span>" /&gt;'); // <b><span style="color: red;">X(</span></b> emoticon = emoticon.replace(/X\(/g,'&lt;img src="<span style="color: #0b5394;">http://static.mobile9.com/bbcode/smileys/tongue.gif</span>" /&gt;'); // :cool: emoticon = emoticon.replace(/:cool:/g,'&lt;img src="http://static.mobile9.com/bbcode/smileys/wink.gif" /&gt;'); // :cry: emoticon = emoticon.replace(/:cry:/g,'&lt;img src="http://static.mobile9.com/bbcode/smileys/laugh.gif" /&gt;'); // :blaf: emoticon = emoticon.replace(/:blaf:/g,'&lt;img src="http://static.mobile9.com/bbcode/smileys/frown.gif" /&gt;'); // :winky: emoticon = emoticon.replace(/:winky:/g,'&lt;img src="http://static.mobile9.com/bbcode/smileys/thumbup.gif" /&gt;'); // :noo: emoticon = emoticon.replace(/:noo:/g,'&lt;img src="http://static.mobile9.com/bbcode/smileys/blush.gif" /&gt;'); // :twisted: emoticon = emoticon.replace(/:twisted:/g,'&lt;img src="http://static.mobile9.com/bbcode/smileys/byebye.gif" /&gt;');

 What is in blue corresponds to the URL of the emoticon, that's where you put the URL of your emoticon (in the first part of the code you have to repeat the URL of the image 3 times, from now on you'll just have to put the URL only once).

What is in red corresponds to the code to be used in comments to display the emoticon.

Then save the file in a text editor (eg Notepad) with extension Js and upload it to a hosting like Dropbox or Google Sites, there give you the URL and you'll have to paste before </ body> following the following structure.

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src='URL of File .JS' type='text/javascript'/>
<script type='text/javascript'>
emoticonComentario();
</script>
</b:if>

 With this we will have ready the emoticons but now we need to show a list of emoticons that readers can use them.

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='divspoiler'>
<img onclick='if (this.parentNode.nextSibling.childNodes[0].style.display != &apos;&apos;) { this.parentNode.nextSibling.childNodes[0].style.display = &apos;&apos;; } else { this.parentNode.nextSibling.childNodes[0].style.display = &apos;none&apos;;}' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeFgk72GWnsGBZPExzStse4M293jl83kqH8uyCZj0lQj6FYPouo-UOt0ghzM8ppJ9EKMC-y7b_5ekKzHeLf18svK46Jz3DgOmrQjQevG2bkVQNE4bdRJCyDGNrwYNMtDJOyoypG_emnsI/s1600/Sin+t%C3%ADtulo-1.png'/>
</div><div><div class='spoiler' style='display: none;'>
<div class='comment-content' id='bc_0_1MC'>
<img src='http://static.mobile9.com/bbcode/smileys/smile.gif'/> :) <img src='http://static.mobile9.com/bbcode/smileys/tongue.gif'/> X( <img src='http://static.mobile9.com/bbcode/smileys/wink.gif'/> :cool: <img src='http://static.mobile9.com/bbcode/smileys/laugh.gif'/> :cry: <img src='http://static.mobile9.com/bbcode/smileys/frown.gif'/>  :blaf: <img src='http://static.mobile9.com/bbcode/smileys/thumbup.gif'/> :winky: <img src='http://static.mobile9.com/bbcode/smileys/blush.gif'/> :noo: <img src='http://static.mobile9.com/bbcode/smileys/byebye.gif'/> :twisted: <img src='http://static.mobile9.com/bbcode/smileys/clapping.gif'/>:D <img src='http://static.mobile9.com/bbcode/smileys/wow.gif'/> :oops: <img src='http://static.mobile9.com/bbcode/smileys/help.gif'/> :? <img src='http://static.mobile9.com/bbcode/smileys/devil.gif'/> :F
<img src='http://static.mobile9.com/bbcode/smileys/wub.gif'/> :alaba: <img src='http://static.mobile9.com/bbcode/smileys/cry.gif'/>:lpmqtp: <img src='http://static.mobile9.com/bbcode/smileys/thumbdown.gif'/> :idiot:</div>

</div></div>
</b:if>

What this highlighted in green is the URL of the emoticon and what is in pink is the code of the emoticon.

The above code WILL NEED paste it below

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

 With this we have finished the tutorial and you will ready your emoticons, I hope they have been helpful.

Change the Navigation links for the Title Post On Blogger

The navigation links are listed at the end of the entrance and say: Check latest Post, Post Older, although very useful, would be more useful instead of appearing these links appear the title of the post, this will undoubtedly attract more visitors.

This is just what I'm going to teach today, as changing these links and put in place the title of the Post.


Before:

 After:

To add this trick to your blog, go to Template, Edit HTML and paste before </ head> the following:


<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

Now go to Design, Add Gadget, and HTML / JavaScript paste the following:


 <script type="text/javascript">
$(document).ready(function(){
var newerLink = $("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {
var newerLinkTitle = $("a.blog-pager-newer-link:first").text();
$("a.blog-pager-newer-link").text("<< " + newerLinkTitle);
});
var olderLink = $("a.blog-pager-older-link").attr("href");
$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() {
var olderLinkTitle = $("a.blog-pager-older-link").text();
$("a.blog-pager-older-link").text(olderLinkTitle + " >>");//rgt
});
});
</script><style type="text/css">
#blog-pager{font-family: Arial,helvetica,sans-serif;font-size: 14px;}#blog-pager-newer-link {font-size:85%;width:200px;text-align:left;}#blog-pager-older-link {font-size:85%;width:200px;text-align:right;}</style>

With this last step ended the trick, and you've added this great trick to your blog

How To Show Guest Author Below Blog Post

The lack of time blog authors often have to rely on Guest posters. In return we offer them with quality back links and advertisement. In order to better serve them it is important to display some info about them in a polite and attractive manner.

This will encourage more and more people to write quality articles for you. We are very selective in accepting tutorials written by our readers but once the tutorial qualifies we publish their post in the best manner possible. See the example below
To create this type of attractive box for your guest authors you would need to play with some  delicious CSS and HTML . So then Lets jump straight to the main part!

How To Create a Customized Author Info Box?

 

1. Go To Blogger > Design > Edit HTML
2. Back up your template
3. Search for ]]></b:skin>
4. Just above it paste the code below,

/*----------Guest Poster --------*/
.mbt-gp img {
margin:0;
border:0;
}
.mbt-gp-about {
font-size:12px;
margin:0 auto;
padding:3px;
width:580px;
background:#edf6ff;
border:#9ecfff dotted 1px;
min-height:130px;
}
.mbt-gp {
padding-top:10px;
margin:0;
font-size:12px;
float:left;
width:17%;
text-align:center;
border-right:#93C0F9 solid 1px;
}
.mbt-gp-text {
float:right;
width: 80%;
padding:5px;
text-align:left;
font:12px arial,sans-serif;
text-align:justify;
margin:0;
padding:0;
}

   5.    Save your template and jump to the next part of the tutorial.

How To Add The Author Info Box Below Guest Post?

Now whenever you publish a Guest post at your blog, simply switch to the Edit HTML Mode of your
Blogger Editor. And drag to the bottom of the HTML codes and just at the end add the code below,

  <div class="mbt-gp"><img src="GUEST-AUTHOR-IMAGE-LINK" width="80" height="70" /> GUEST-AUTHOR-NAME </div>
  <div class="mbt-gp-text">
    <p><strong>About the Guest Author:</strong>
      <br />ADD-DESCRIPTION-ABOUT-AUTHOR-INFO-HERE </p>
  </div>
</div> See the screenshot below to know better where to add the code,

Make sure you replace the bolded text with proper details. The image size would fit perfectly if it is 200px by 125px.

You will have to add just the second code for every guest post that you publish. Once you understand on how to do it then doing it again and again would become more like a fun. I just hope you find it useful and worth trying. 

The Trick to Change Image On Blogger

How to make an image clickable?

The complete clickable image code looks like this,

<a href="LANDING URL" target="_blank">Image LINK" width="" height=""  alt=""  title="" border="0" /></a>

• Where refers to where will the image take the user when it is clicked.
• Where IMAGE LINK refers to the URL of your picture
• width="" and height="" has to be given proper values in pixels
• alt="" is alternative text tag that you right to tell search engine robots what the image is about
• title="" is the name of the image that appears on mouse hover. It is always kept the same as the alt=""
• border="0" ensures that no border or outline appears across the image

For example for the image below I have used the following code,

<a href="http://tricksblogspot.blogspot.com/" target="_blank"><img src="IMAGE LINK" width="240px" height="180px"  alt="Clickable Horse image" title="Clickable Horse image" border="0" /></a>

When you click the image, it will take you to our homepage. Else if you want to link to the original size of image then use this code,

<a href="IMAGE LINK" target="_blank"><img src="IMAGE LINK" width="240px" height="180px"  alt="Clickable Horse image" title="Clickable Horse image" border="0" /></a>

Clicking the image below will show you its original size.

How to make the same image un-clickable?

To make any image un-clickable simply remove the href linking tag. After removing the landing address tag we get,

<img src="IMAGE LINK" width="" height=""  alt=""  title="" border="0" />

You will see that the image is no more clickable. and the code I used this time is the same one but without the href tag,

<img src="IMAGE LINK" width="240px" height="180px"  alt="unclickable Horse image" title="unclickable Horse image" border="0" />

How to make an image fade in and fade out?

For this you will need to add a tiny CSS3 code to your template. So kindly follow these steps,

1. Go To Blogger> Design > Edit HTML
2. Backup your template
3. Search for ]]></b:skin>
4. Add the code below just above it

/*---MBT FADE OUT CODE ----*/
.Fadeout img {
filter:alpha(opacity=100);
opacity: 0.3;
border:0;
}
.Fadeout:hover img {
filter:alpha(opacity=30);
opacity:1.0;
border:0;
}
/*---MBT FADE IN CODE ----*/
.Fadein img {
filter:alpha(opacity=30);
opacity: 1.0;
border:0;
}
.Fadein:hover img {
filter:alpha(opacity=100);
opacity:0.3;
border:0;
}

    5.  Save your template.


Now whenever you wish to add the fading effect to your image then simply insert an additional code to the same Clickable image code that we discussed above.
To make the image Fade out simply insert class="Fadeout" to your image code like this,

<a class="Fadeout" href="LANDING URL" target="_blank"><img src="IMAGE LINK" width="" height=""  alt=""  title="" border="0" /></a>

See an example below. (Hover your mouse cursor on it)


To make the image Fade in simply insert class="Fadein" to your image code like this,

<a class="Fadein" href="LANDING URL" target="_blank"><img src="IMAGE LINK" width="" height=""  alt=""  title="" border="0" /></a>

See an example,




I hope you find it useful. If you wanted to know where to save your images or to get IMAGE Links then read this post,