thn google
+13,700
twitter big logo icone 5336 48
1,755
Advertisers Tag Here
Join over 45,931 Daily Readers, Users, Subscribers
..who get notifications via Emails !
Jobs
Showing posts with label JQUERY for Blogger. Show all posts
Showing posts with label JQUERY for Blogger. Show all posts

18 Sept 2012

Add awesome scrolling recent post for BLogger

Labels: , ,

Add awesome  Scrolling Recent Posts Widget For Blogger

  1. Go to Blogger Dashboard -> Template
  2. Click on Edit HTML
  3. Click Proceed button
  4. Then
  5. Find below code in your template


</head>
Then add the below code just ABOVE / BEFORE It

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
NOW Save the Template
THEN 

  1. Go to Blogger Dashboard -> Layout
  2. Click on Add a Gadget
  3. Select HTML/JavaScript
  4. and then put the following code in it


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

/* ========== Scrolling Recent Posts Widget By www.tricks2blogging.blogspot.com ======== */

#tricks2blogging-widget {
    overflow: hidden;
    margin-top: 5px;
    padding: 0px 0px;
    height: 385px;
}

#tricks2blogging-widget ul {
    width: 295px;
    overflow: hidden;
    list-style-type: none;
    padding: 0px 0px;
    margin: 0px 0px;
}

#tricks2blogging-widget li {
    width: 282px;
    padding: 5px 5px;
    margin: 0px 0px 5px 0px;
    list-style-type: none;
    float: none;
    height: 80px;
    overflow: hidden;
    background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFhENPCWH2Bv07Hy380aiciJWo36FxTIi9Zw-qjq6jG68aS0rdFdqXtunDXXls2i_auxOZeUVsH3m0v5TGUW9Y4w-9WhN-nnJkySR3SDcdez_COJpmsU1IlQOrInAZ0d598vgIU_8_l8o/s1600/blogger-post.jpg) repeat-x;
    border: 1px solid #ddd;
}

#tricks2blogging-widget li a {
    text-decoration: none;
    color: #4B545B;
    font-size: 15px;
    height: 18px;
    overflow: hidden;
    margin: 0px 0px;
    padding: 0px 0px 2px 0px;
}

#tricks2blogging-widget img {
    float: left;
    margin-top: 10px;
    margin-right: 15px;
    background: #EFEFEF;
    border: 0;
}

#tricks2blogging-widget img {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
    padding: 4px;
    background: #eee;
    background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));
    background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,.7);
    -moz-box-shadow: 0 0 3px rgba(0,0,0,.7);
    box-shadow: 0 0 3px rgba(0,0,0,.7);
}

#
tricks2blogging-widget img:hover {
    -moz-transform: scale(1.2) rotate(-350deg);
    -webkit-transform: scale(1.2) rotate(-350deg);
    -o-transform: scale(1.2) rotate(-350deg);
    -ms-transform: scale(1.2) rotate(-350deg);
    transform: scale(1.2) rotate(-350deg);
    -webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
    -moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
    box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
}

.spydate {
    overflow: hidden;
    font-size: 10px;
    color: #0284C2;
    padding: 2px 0px;
    margin: 1px 0px 0px 0px;
    height: 15px;
    font-family: Tahoma,Arial,verdana, sans-serif;
}

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

/* ========== Scrolling Recent Posts Widget By www.tricks2blogging.blogspot.com
 ======== */

-->
</style>

<script language='JavaScript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDI3HkDBnJZ9lCavLsJkVs07ZZZRTm-rqh-Cnxga_Js9QFQMcD-E5WXbYm1bhZewq2vsELH75ye1AXd9o5QWdFprsARsMtj04nANPbd4hFeah4sgEbC4vlfURxiqhbjpOHlOsBvAeDHvM/s1600/no-thumbnail.png.jpgg";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDI3HkDBnJZ9lCavLsJkVs07ZZZRTm-rqh-Cnxga_Js9QFQMcD-E5WXbYm1bhZewq2vsELH75ye1AXd9o5QWdFprsARsMtj04nANPbd4hFeah4sgEbC4vlfURxiqhbjpOHlOsBvAeDHvM/s1600/no-thumbnail.png.jpg";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDI3HkDBnJZ9lCavLsJkVs07ZZZRTm-rqh-Cnxga_Js9QFQMcD-E5WXbYm1bhZewq2vsELH75ye1AXd9o5QWdFprsARsMtj04nANPbd4hFeah4sgEbC4vlfURxiqhbjpOHlOsBvAeDHvM/s1600/no-thumbnail.png.jpg";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDI3HkDBnJZ9lCavLsJkVs07ZZZRTm-rqh-Cnxga_Js9QFQMcD-E5WXbYm1bhZewq2vsELH75ye1AXd9o5QWdFprsARsMtj04nANPbd4hFeah4sgEbC4vlfURxiqhbjpOHlOsBvAeDHvM/s1600/no-thumbnail.png.jpg";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDI3HkDBnJZ9lCavLsJkVs07ZZZRTm-rqh-Cnxga_Js9QFQMcD-E5WXbYm1bhZewq2vsELH75ye1AXd9o5QWdFprsARsMtj04nANPbd4hFeah4sgEbC4vlfURxiqhbjpOHlOsBvAeDHvM/s1600/no-thumbnail.png.jpg";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
fntsize = 15;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://www.tricks2blogging.blogspot.com";
limitspy=4;
intervalspy=4000;
</script>
<div id="tricks2blogging-widget">
<script src='http://tricks2blogging.googlecode.com/svn/trunk/recent-posts-spy.js' type='text/javascript'></script><a href='http://www.tricks2blogging.blogspot.com'>_</a>
</div>
NOTE:- DO NOT CHANGE ANY CODES EXCEPT THE RED ONE OR THE CODES WILL NOT FUNCTION IF THE OTHER CODES ARE DISTURBED OR CHANGED >>


Place the Codes Where you want
  • Change the Red UrL with your URL

Customize the codes which are in fushia color

  1. numposts = 10; Total number of posts
  2. imitspy=4; Number of the posts to appear
  3. intervalspy=4000; Scrolling speed of the widget
Attention:-
If you Decreased the value,  speed of the widget will increases
Read More

17 Sept 2012

4 in 1 jquery Social Sharing Tab [ Fb,Twitter, Feed, G+]

Labels: , ,

4 in 1 jquery Social Sharing Tab [ Fb,Twitter, Feed, G+]


How to add 4 In 1 Jquery Facebook page,Twitter Follower,Google+ and Rss Subscribing Widget to your Blog

  1. Go to  Design >> Page Element.
  2. Click Add Gadget 
  3. and select HTML/Javascript
  4. Paste below code.
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmJkYPjc6MvRC4qG-hszxXK_lc_6QKt57QOfdp_HS9P_NrkMswOtxgeUPI2_iyU2IIk44yEry7wpRjsmCMJm951y0YsXiXtmjQ1Ib-WIRslGPx18Ey9gWTp1OKt2iBYM-49D51gGMTJE0/s1600/facebook-icon.png" alt=""/>
   <iframe src="//www.facebook.com/plugins/likebox.php?
href=http%3A%2F%2Fwww.facebook.com%2FTricks2Blogging&amp;width=200&amp;height=346&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:346px;" allowtransparency="true">  </iframe> </div> </div></div><div id="on"> <div id="twitter_right" style="top: 35%;">
  <div id="twitter_div">
   <img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDNcJ4oaQoEAnlQ7q1IzGUlO_RhwcsKqbPJQpRFkfG3VLVqJZAh_V8-5xfd0LkcxXYCf6gEmMnJYZ0a5hkemQiSkcwEuLdOyp6V9TF_O4wrzkhyphenhyphenw8oCDgyg1hVxg-mJ984F0rP1tK_T8c/s1600/twitter-icon.png"/>
   <script src="http://widgets.twimg.com/j/2/widget.js"></script>
   <script>new TWTR.Widget({version: 2,type: 'profile',rpp: 4,interval: 1000,width: 246,height: 265,theme: {shell: {background: '#63BEFD',color: '#FFFFFF'},tweets: {background: '#FFFFFF',color: '#000000',links: '#47a61e'}},features: { loop: false,live: true,scrollbar: false,hashtags: false,timestamp: true,avatars: true,behavior: 'all' }})
.render().setUser('Tricks2Blogging').start();</script> </div></div></div><div id="on">
 <div id="google_plus_right" style="top: 52%;">
  <div id="google_plus_div">
   <img id="google_plus_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTFQ9yLqKMR55mXNiKazQUZEG7jKuFO8rnxdK9tWTSnBPSwOHYB6lRP44ROixACvVOqxz-5zey4Eox5sC8JJIQNTlbEDkMlo-VAcasaDUQB89xAZWhckqZcLCexlMUR9JOCT-Ybc8Cq5g/s1600/google-plus-icon.png"/>
   <div style="float:left;margin:10px 10px 10px 0;">
    <g:plusone size="tall" expr:href="data:post.url"></g:plusone>
   </div>
  </div>
 </div>
 <div id="on">
  <div id="feedburner_right" style=" top: 69%;">
   <div id="knfeedburner_div">
    <center>
    <h4 style="color:#F66303;">You can also receive Free Email Updates:</h4>
    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open
('http://feedburner.google.com/fb/a/mailverify?uri=Tricks2Blogging', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
     <input gtbfieldid="10" class="enteryouremail" name="email" value="Enter your email here..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" type="text"/>
<input value="Tricks2Blogging" name="uri" type="hidden"/><input value="Submit" class="submitbutton" type="submit"/>
    </form>
    </center><a href='www.tricks2blogging.blogspot.com'>_</a><img id="feedburner_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3UO407sdHPoTCMrR3oYNwVxmpL0fgKZbwEBvVN67Jy4fGsSx1jKSyLzqwB0NEB0rdHg8TOa5tb_10i1MWFZCdCEs21_JmHAh7Kgv0ElGp8qYg1AtVDOJ-Fhy7YFxfzs38pcH6DkLlrDQ/s1600/subscribe-icon.png"/>
   </div>
  </div>
 </div>
</div>
NOTE
Replace Tricks2Blogging  With Facebook fan page.
Replace Tricks2Blogging With your Twitter Username.
Replace Tricks2Blogging With Your feedburner Username
Save And Enjoy
If any Problem comment below..Like And Follow us on Facebook and Twitter...Thanks
Read More
Subscribe to: Posts (Atom)