Showing posts with label Widgets. Show all posts
Showing posts with label Widgets. Show all posts

Friday, 13 January 2012

Add Facebook Fan Page In Blog


 Do you have a facebook account? If you have, you can add facebook fan page in blog. One of the function of facebook fan page is to promote your blog in Facebook. As we know, Facebook is the greatest Social Bookmarking website in this world. So, if you promote your blog in facebook, I'm sure you can get many visitors per day. Shortly, if you want to add facebook fan page in your blog, just follow the steps below. See, the example first!


1. Sure, create your facebook fan page
2. Then, go to Facebook Developers
3. Settings the facebook like box, click "Get Code"
4. Choose "iframe"
5. Add the code in your blog 
6. Click SAVE

Saturday, 7 January 2012

Dancing Welcome Message for Blogger

Hi Friends now add superb Dancing style welcome message in your blog homepage.


Follow simple and easy Step to adding this effect in your blogger blog easily ---->>>>

* First go to your blogger Dashboard.

* Now click in design tab and you are here --->>>>> Page element.

* Click in Add Gadget which is in your blog sidebar.

* When open new window click in HTML/javascript from list.

* When open new blank box copy below code in blank box.

<script language="JavaScript1.2">
//configure message
message="ADD HERE YOUR WELCOME MESSAGE "
//animate text in NS6? (0 will turn it off)
ns6switch=1

var ns6=document.getElementById&&!document.all
mes=new Array();
mes[0]=-1;
mes[1]=-4;
mes[2]=-7;mes[3]=-10;
mes[4]=-7;
mes[5]=-4;
mes[6]=-1;
num=0;
num2=0;
txt="";
function jump0(){
if (ns6&&!ns6switch){
jump.innerHTML=message
return
}
if(message.length > 6){
for(i=0; i != message.length;i++){
txt=txt+"<span style='position:relative;' id='n"+i+"'>"+message.charAt(i)+"</span>"};
jump.innerHTML=txt;
txt="";
jump1a()
}
else{
alert("Your message is to short")
}
}

function jump1a(){
nfinal=(document.getElementById)? document.getElementById("n0") : document.all.n0
nfinal.style.left=-num2;
if(num2 != 9){
num2=num2+3;
setTimeout("jump1a()",50)
}
else{
jump1b()
}
}

function jump1b(){
nfinal.style.left=-num2;
if(num2 != 0){num2=num2-3;
setTimeout("jump1b()",50)
}
else{
jump2()
}
}

function jump2(){
txt="";
for(i=0;i != message.length;i++){
if(i+num > -1 && i+num < 7){
txt=txt+"<span style='position:relative;top:"+mes[i+num]+"'>"+message.charAt(i)+"</span>"
}
else{txt=txt+"<span>"+message.charAt(i)+"</span>"}
}
jump.innerHTML=txt;
txt="";
if(num != (-message.length)){
num--;
setTimeout("jump2()",50)}
else{num=0;
setTimeout("jump0()",50)}}
</script>
</head>
<body>

<h2><div id="jumpx" style="color:green"></div></h2>
<script>
if (document.all||document.getElementById){
jump=(document.getElementById)? document.getElementById("jumpx") : document.all.jumpx
jump0()
}
else
document.write(message)
</script>

NOTE:- Change Highlighted text with your welcome message.

* Now click to save your HTML/javascript.

* When it save drag and drop those element below blogger Header.

* And again click to save button now you are done ........CHEERS...!!!!!!

Thursday, 5 January 2012

Add Stylish Welcome Message to Blogger


Follow simple and easy step to adding this welcome box to blogger

* First go to your blogger Dashboard.

* Now click in design tab and edit HTML.

* Click in small box to expand your blogger Template.

* Now find this code </head> by CTRL+F key.

* Now copy below code and paste before </head>




* Now click to your blogger Template.

* Now again go to blogger Dashboard and click in design tab.

* Now you are here ---->>>> Page element.

* Click in add Gadget which is your blog sidebar.

* When open new window click in HTML/javascript from list.

* When open new blank box copy below code and paste in blank box.
 <div class="welcome">Your Message Here</div>

* Now click to  your HTML/javascript. Now you are Done CHEERS.

Wednesday, 4 January 2012

How to Add Angel Emoticons For Blogger Comments

Hi friends, now How to Add Angel Emoticons in your blogger Comments this very nice tutorial Design by Me.
If you like this please add your comment in below this post.



Follow Simple and easy step to for adding angel emotions in your blogger Comments---->>>>

* First go to Your blogger Dashboard.

* Now click in Design tab and Edit HTML.

* Click in small box to expand your blogger Template. 

* Now find this code <h4 id='comment-post-message'> By CTRL+F key.

* Copy below code and paste before <h4 id='comment-post-message'> 


<div style=' width: 450px; text-align: left; border: 4px solid #FF6600; background: #FEDFBF; padding: 10px; color:#0084ce; font-weight:bold; '>
<img border='0' src='http://freeemoticonsandsmileys.com/animated%20emoticons/Angel%20Animated%20Emoticons/angel1.gif'/> :a
&#160;
<img border='0' src='http://freeemoticonsandsmileys.com/animated%20emoticons/Angel%20Animated%20Emoticons/angel3.gif'/> :b
&#160;
<img border='0' src='http://freeemoticonsandsmileys.com/animated%20emoticons/Angel%20Animated%20Emoticons/angel_not.gif'/> :c
&#160;
<img border='0' src='http://freeemoticonsandsmileys.com/animated%20emoticons/Angel%20Animated%20Emoticons/undecided.gif'/> :d
&#160;
<img border='0' src='http://freeemoticonsandsmileys.com/animated%20emoticons/Angel%20Animated%20Emoticons/transforming.gif'/> :e
&#160;
<img border='0' src='http://freeemoticonsandsmileys.com/animated%20emoticons/Angel%20Animated%20Emoticons/bowarrow.gif'/> :f
&#160;
<img border='0' src='http://freeemoticonsandsmileys.com/animated%20emoticons/Angel%20Animated%20Emoticons/colored.gif'/> :g
&#160;
<img border='0' src='http://freeemoticonsandsmileys.com/animated%20emoticons/Angel%20Animated%20Emoticons/devil%20in%20angel.gif'/> :h
&#160;
<img border='0' src='http://freeemoticonsandsmileys.com/animated%20emoticons/Angel%20Animated%20Emoticons/enchufe.gif'/> :i
&#160;
<img border='0' src='http://freeemoticonsandsmileys.com/animated%20emoticons/Angel%20Animated%20Emoticons/flying%20aureola.gif'/> :j
&#160;
<img border='0' src='http://freeemoticonsandsmileys.com/animated%20emoticons/Angel%20Animated%20Emoticons/sad.gif'/> :k
&#160;
<img border='0' src='http://freeemoticonsandsmileys.com/animated%20emoticons/Angel%20Animated%20Emoticons/rolling%20eyes.gif'/> :l
&#160;
<img border='0' src='http://freeemoticonsandsmileys.com/animated%20emoticons/Angel%20Animated%20Emoticons/grey%20one.gif'/> :m
&#160;
<img border='0' src='http://freeemoticonsandsmileys.com/animated%20emoticons/Angel%20Animated%20Emoticons/little%20wings.gif'/> :n
&#160;
<img border='0' src='http://freeemoticonsandsmileys.com/animated%20emoticons/Angel%20Animated%20Emoticons/little%20angel.gif'/> :o
&#160;
<img border='0' src='http://freeemoticonsandsmileys.com/animated%20emoticons/Angel%20Animated%20Emoticons/blinking%20aureola.gif'/> :p
&#160;
<img border='0' src='http://freeemoticonsandsmileys.com/animated%20emoticons/Angel%20Animated%20Emoticons/no%20no%20angel.gif'/> :q
&#160; 
<img border='0' src='http://freeemoticonsandsmileys.com/animated%20emoticons/Angel%20Animated%20Emoticons/not%20angel%20anymore.gif'/> :r
&#160; 
<img border='0' src='http://freeemoticonsandsmileys.com/animated%20emoticons/Angel%20Animated%20Emoticons/angel%20kiss.gif'/> :s
&#160; 
<img border='0' src='http://freeemoticonsandsmileys.com/animated%20emoticons/Angel%20Animated%20Emoticons/devlish%20angel.gif'/> :t 
</div>


* Again find this code </body> By CTRL+F key easily.

* Copy below code and paste before </body>


<script type='text/javascript'>
//<![CDATA[ 
a = document.getElementById('comments'); 
if(a) { 
b = a.getElementsByTagName("DD"); 
for(i=0; i < b.length; i++) { 
if (b.item(i).getAttribute('CLASS') == 'Author-comment-body' , 'comment-body') { 
_str = b.item(i).innerHTML.replace(/:a/gi, "<img src='http://freeemoticonsandsmileys.com/animated%20emoticons/Angel%20Animated%20Emoticons/angel1.gif' alt='' class='smiley'/>"); 
_str = _str.replace(/:b/gi, "<img src='http://freeemoticonsandsmileys.com/animated%20emoticons/Angel%20Animated%20Emoticons/angel3.gif' alt='' class='smiley'/>"); 
_str = _str.replace(/:c/gi, "<img src='http://freeemoticonsandsmileys.com/animated%20emoticons/Angel%20Animated%20Emoticons/angel_not.gif' alt='' class='smiley'/>"); 
_str = _str.replace(/:d/gi, "<img src='http://freeemoticonsandsmileys.com/animated%20emoticons/Angel%20Animated%20Emoticons/undecided.gif' alt='' class='smiley'/>"); 
_str = _str.replace(/:e/gi, "<img src='http://freeemoticonsandsmileys.com/animated%20emoticons/Angel%20Animated%20Emoticons/transforming.gif' alt='' class='smiley'/>"); 
_str = _str.replace(/:f/gi, "<img src='http://freeemoticonsandsmileys.com/animated%20emoticons/Angel%20Animated%20Emoticons/bowarrow.gif' alt='' class='smiley'/>"); 
_str = _str.replace(/:g/gi, "<img src='http://freeemoticonsandsmileys.com/animated%20emoticons/Angel%20Animated%20Emoticons/colored.gif' alt='' class='smiley'/>"); 
_str = _str.replace(/:h/gi, "<img src='http://freeemoticonsandsmileys.com/animated%20emoticons/Angel%20Animated%20Emoticons/devil%20in%20angel.gif' alt='' class='smiley'/>"); 
_str = _str.replace(/:i/gi, "<img src='http://freeemoticonsandsmileys.com/animated%20emoticons/Angel%20Animated%20Emoticons/enchufe.gif' alt='' class='smiley'/>"); 
_str = _str.replace(/:j/gi, "<img src='http://freeemoticonsandsmileys.com/animated%20emoticons/Angel%20Animated%20Emoticons/flying%20aureola.gif' alt='' class='smiley'/>"); 
_str = _str.replace(/:k/gi, "<img src='http://freeemoticonsandsmileys.com/animated%20emoticons/Angel%20Animated%20Emoticons/sad.gif' alt='' class='smiley'/>");
_str = _str.replace(/:l/gi, "<img src='http://freeemoticonsandsmileys.com/animated%20emoticons/Angel%20Animated%20Emoticons/rolling%20eyes.gif' alt='' class='smiley'/>"); 
_str = _str.replace(/:m/gi, "<img src='http://freeemoticonsandsmileys.com/animated%20emoticons/Angel%20Animated%20Emoticons/grey%20one.gif' alt='' class='smiley'/>"); 
_str = _str.replace(/:n/gi, "<img src='http://freeemoticonsandsmileys.com/animated%20emoticons/Angel%20Animated%20Emoticons/little%20wings.gif' alt='' class='smiley'/>"); 
_str = _str.replace(/:o/gi, "<img src='http://freeemoticonsandsmileys.com/animated%20emoticons/Angel%20Animated%20Emoticons/little%20angel.gif' alt='' class='smiley'/>"); 
_str = _str.replace(/:p/gi, "<img src='http://freeemoticonsandsmileys.com/animated%20emoticons/Angel%20Animated%20Emoticons/blinking%20aureola.gif' alt='' class='smiley'/>"); 
_str = _str.replace(/:q/gi, "<img src='http://freeemoticonsandsmileys.com/animated%20emoticons/Angel%20Animated%20Emoticons/no%20no%20angel.gif' alt='' class='smiley'/>"); 
_str = _str.replace(/:r/gi, "<img src='http://freeemoticonsandsmileys.com/animated%20emoticons/Angel%20Animated%20Emoticons/not%20angel%20anymore.gif' alt='' class='smiley'/>"); 
_str = _str.replace(/:s/gi, "<img src='http://freeemoticonsandsmileys.com/animated%20emoticons/Angel%20Animated%20Emoticons/angel%20kiss.gif' alt='' class='smiley'/>"); 
_str = _str.replace(/:t/ig,"<img src='http://freeemoticonsandsmileys.com/animated%20emoticons/Angel%20Animated%20Emoticons/devlish%20angel.gif' alt='' class='smiley'/>") 
b.item(i).innerHTML = _str; 
} 
} 
}
//]]>
</script>



CLICK ... 

Monday, 2 January 2012

Social Slider Gadget Special for Blogger Add Now



Follow simple and easy step to adding this social slider gadget in your blogger blog ---->>>>>

* First go go your blogger "Dashboard"

* Now click  in "design" tab and edit "HTML".

* Click in small box to expand your blogger Template.

* Now find this code "]]</b:skin>" by "CTRL+F" key.

* Copy below code and paste before "]]</b:skin>"

#socialslider  {
display : block;
padding : 0;
z-index : 9999;
}
#socialslider {
position : absolute;
}
#socialslider li {
background : none;
}
#socialslider img {
padding : 0;
margin : 0;
border : none;
}
.socialslider-grupa {
float : left;
}
#socialslider-linki {
float : left;
width : 75px;
}
#socialslider-linki img {
width : 32px;
height : 32px;
}
#socialslider-ikony {
position : absolute;
top : -1px;
width : 32px;
z-index : 110;
}
#socialslider-ikony ul {
left : 0;
position : relative;
bottom : -10px;
width : 32px;
}
#socialslider-ikony ul li {
padding : 0 6px 10px 6px;
width : 20px;
height : 20px;
}
#socialslider-ikony img {
width : 20px;
height : 20px;
border : none;
margin : 0;
}
#socialslider-ikony ul, #socialslider-linki ul, #socialslider-ikony li, #socialslider-linki li {
display : block;
list-style : none;
margin : 0;
padding : 0;
}
#socialslider-linki li {
padding : 5px;
text-align : center;
width : 75px;
}
#socialslider-linki img {
display : block;
border : none;
margin : 0 auto;
}
#socialslider-linki a {
border : none;
font-size : 10px;
text-decoration : none;
}
#socialslider-autor a {
font-family : Segoe UI, Tahoma;
font-size : 10px;
text-decoration : none;
}

#socialslider-ikony {
background : transparent url('http://www.freetraffictip.com/wp-content/plugins/social-slider-2/images/handle-lewy-ciemny.png') no-repeat right top;
padding-top : 1px;
padding-right : 1px;
}
#socialslider-ikony ul {
background : transparent url('http://www.freetraffictip.com/wp-content/plugins/social-slider-2/images/handle-lewy-ciemny.png') no-repeat right bottom;
padding-bottom : 1px;
padding-right : 1px;
} 







* Now again find this code </head> by ctrl+f key.

* Copy below code and paste before </head>
<script type="text/javascript">     jQuery(document).ready(function () {var hideDelay=200;var hideDelayTimer=null;jQuery("#socialslider").hover(function(){if(hideDelayTimer)clearTimeout(hideDelayTimer);jQuery("#socialslider").animate({left:'0'},"normal");},function(){if(hideDelayTimer)clearTimeout(hideDelayTimer);hideDelayTimer=setTimeout(function(){hideDelayTimer=null;jQuery("#socialslider").animate({left:'-86'},"normal");},hideDelay);});});    </script> 



                                            For Example dont copy..

* Now click to save your blogger Template.


* Again go to your blogger Dashboard and click in design tab.


* Now you are here---->>>> Page element.


* Click in add gadget which is in your blogger Sidebar.


* When open new window click in HTML/javascript from list.


* When open new blank box copy below code and paste in blank box.

border-right: 1px solid #5b5b5b; border-top: 1px solid #5b5b5b; border-bottom: 1px solid #5b5b5b; background: #222; position: fixed;">
  <div id="socialslider-contener" class="socialslider-contener">

       <div id="socialslider-linki" class="socialslider-grupa">
     <ul>
      <li><a href='YOUR FEED URL HERE' title='RSS' style='color: #eee;' target='_self' rel='nofollow'><img src='http://www.freetraffictip.com/wp-content/plugins/social-slider-2/icons/standard/rss-32.png' alt='RSS' />RSS</a></li><li><a href='YOUR FEEDBURNER EMAIL URL HERE' title='Newsletter' style='color: #eee;' target='_self' rel='nofollow'><img src='http://www.freetraffictip.com/wp-content/plugins/social-slider-2/icons/standard/newsletter-32.png' alt='Newsletter' />Newsletter</a></li><li><a href='YOUR TWITTER URL HERE' title='Twitter' style='color: #eee;' target='_self' rel='nofollow'><img src='http://www.freetraffictip.com/wp-content/plugins/social-slider-2/icons/standard/twitter-32.png' alt='Twitter' />Twitter</a></li><li><a href='YOUR FACEBOOK URL HERE' title='Facebook' style='color: #eee;' target='_self' rel='nofollow'><img src='http://www.freetraffictip.com/wp-content/plugins/social-slider-2/icons/standard/facebook-32.png' alt='Facebook' />Facebook</a></li><li><a href='YOUR YOUTUBE URL HERE' title='YouTube' style='color: #eee;' target='_self' rel='nofollow'><img src='http://www.freetraffictip.com/wp-content/plugins/social-slider-2/icons/standard/youtube-32.png' alt='YouTube' />YouTube</a></li><li id='socialslider-autor'><a href='http://www.blogger9.com/2011/07/social-slider-gadget-special-for.html/' title='Social Slider' style='color: #ccc;' target='_self'>Social Slider</a></li>     </ul>

    </div>
       <div id="socialslider-ikony" style="right: -33px;">
    <ul>
    <li><img src='http://www.freetraffictip.com/wp-content/plugins/social-slider-2/icons/standard/rss-20.png' alt='RSS' /></li><li><img src='http://www.freetraffictip.com/wp-content/plugins/social-slider-2/icons/standard/newsletter-20.png' alt='Newsletter' /></li><li><img src='http://www.freetraffictip.com/wp-content/plugins/social-slider-2/icons/standard/twitter-20.png' alt='Twitter' /></li><li><img src='http://www.freetraffictip.com/wp-content/plugins/social-slider-2/icons/standard/facebook-20.png' alt='Facebook' /></li><li><img src='http://www.freetraffictip.com/wp-content/plugins/social-slider-2/icons/standard/youtube-20.png' alt='YouTube' /></li>    </ul>
   </div>
  </div>
 </div>

 <script src="http://www.freetraffictip.com/wp-content/plugins/tweetmeme/button.js" type="text/javascript"></script>
NOTE: Remove highlighted text in above code with your own ok.


* Now click To save your HTML/javascript now you are done....CHEERS

Friday, 30 December 2011

New Popular Post for Blogger With Animation


This script very easy to install, you only have to put the script to the new Gadget

Login to Blogger Dashboard and navigate to Design – Page Elements
Click “Add Gadget” and Choose “Popular Posts”, Customize the gadget with more than 4 popular post will show–> “Display Up to” … Posts


(If you already have this gadget skip this step)
After you have Popular Post Gadget “Add Gadget” again and select “HTML/Javascript”
Put all script bellow to the “Content” of HTML/Javascript Gadget
Done- your popular post now with animation


<style type="text/css" media="screen">

#PopularPosts1 {
 overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:400px;

}

#PopularPosts1 ul {
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}

#PopularPosts1 li {
 width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:80px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}

#PopularPosts1 li .item-title {
    color:#A5A9AB;
    font-size:1em;
    margin-bottom:0.5em;
}

#PopularPosts1 li .item-title a {
 text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}

#PopularPosts1 li img {
 float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}

#PopularPosts1 li .item-snippet {
  overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

#PopularPosts1 .item-snippet a,
#PopularPosts1 .item-snippet a:visited {
    color:#3E4548;
    text-decoration: none;
}

#PopularPosts1 .spyWrapper {
    height: 100%;
    overflow: hidden;
    position: relative;
}

#PopularPosts1 {
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
}

.tags span,
.tags a {
 -webkit-border-radius: 8px;
 -moz-border-radius: 8px;
}

a img {
    border: 0;
}

-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
    $('.popular-posts ul').simpleSpy();
});
</script>
<script src="http://accordion-for-blogger.googlecode.com/svn/trunk/simplespy.js" type="text/javascript"></script>

Now    your "HTMl JavaScript" You are done.

Tuesday, 6 December 2011

How to add Social Networking Buttons Below Every Post - New


By adding social networking icons to your blog you will definitely boost your blog's traffic, if done properly. So be careful while placing them. They should be attractive, correctly placed, aligned and also they should be visible separately from the post. Although buttons like AddThis and AddToAny are quite useful, but now they look quite outdated.

So have a look on these buttons:
Download buttons from here
Or from here [Free Icons Download]
Or From here [Glossy Buttons]



To show these icons below all your posts and to dynamically synchronize the post's address with each of these buttons, follow these steps:

Go to "Layout" section, then click on "Edit HTML" link.
Then click on "Expand Widget Templates". Now find (CTRL+F) this code:

<data:post.body/>

Then immediately after that code, add these lines:


<!--SOCIAL-BOOKMARKING-ICONS-STARTS-->
<b:if cond='data:blog.pageType == "item"'>
<!--DIGG-->
<a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Digg It!' src=' ' /></a>
<!--Stumble-->
<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' src=' '/></a>
<!--Delicious-->
<a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Delicious' src=' '/></a>
<!--Technorati-->
<a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Technorati' src=' '/></a>
<!--Twitter-->
<a expr:href='&quot;http://twitter.com/home/?status=Chk Out-&quot; + data:post.title + &quot; &quot; + data:post.url' target='_blank'><img alt='Tweet It!' src=' ' width='122'/></a>
<!--Facebook-->
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Facebook' src=' '/></a></b:if>
<!--SOCIAL-BOOKMARKING-ICONS-STOPS-4-Help-http://bloggerstop.net-->




In the highlighted code (in red color), paste the DIRECT LINKS to the various social networking icons.
The black bolded code hides these icons in your Home-Page and only shows them below your posts.
Related Posts Plugin for WordPress, Blogger...
;