Les nouveautés et Tutoriels de Votre Codeur | SEO | Création de site web | Création de logiciel

Loading...

seo New Expandable Recent Comments Widget For Blogger 2013

Seo Master present to you:
Expandable Recent Comments Widget is a new Blogger Widget,which shows the recent comments of the readers along with the Date and Exact Time.This is very interesting widget which allows you to easily see the Contents of the Comment,Now you don't have to Click on the title link or commenter for showing the comments,just add this widget on your blog right side-bar and then you can easily navigate the comments of your readers.For expanding the Content of the comment just click the "plus +"  sign and for hiding the content of comment click the minus sign (-) or you can simply hide and show it by simply pressing Show All or hide All Button at starting time.

Live Demo

How To Add New Expandable Recent Comments Widget To Blogger

  • A Window will Popup Select HTML/JavaScript
  • Now Copy the Below Script and paste it into the Box
<style type="text/css" media="screen">
.row-aa {        background: #f2f2f3; }
.row-bb {        background: #F8F5F1; }
.row-div {
  margin:0px;
  padding:5px;
}
.comment-header {
  font-size:0.9em;
//  border:1px solid #E0E0E0;
//  background-color:#F3F3F3;
  padding:4px;
  margin-top:10px;
  margin-bottom:5px;
}
.comment-box {
  margin:0px;
  padding:0px;
  font-size:0.9em;
  height:500px;
  overflow:auto;
}
.comments1  {
//  background: #F3F3F3;
  padding:3px;
  border-left:1px dashed #A6A6A6;
  color: #888888;
  font-style: italic;
  padding-top:4px;
  margin-bottom:5px;
}
.comment-footer {
  text-align:center;
  font-size:0.9em;
  padding:4px;
  margin-top:5px;
}
</style>
<div style="text-align: center" class="comment-header"><input class="comment-button" id="commshowall" type="button" onclick="if (this.value == &#39;Show all&#39;) { unfold_all(this); this.value=&#39;Hide all&#39;; } else { fold_all(this); this.value=&#39;Show all&#39;; }" style="width:8em;font-size:1em;font-family:Verdana,sans" value="Show all" /></div>
<div class="comment-box">
<script type="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/expandable-recent-comments.js"></script>
<script type="text/javascript"  src="http://www.matrixar.com/feeds/posts/default?start-index=1&max-results=999999&alt=json-in-script&callback=showrecentposts">
</script>
<script type="text/javascript"  src="http://www.matrixar.com/feeds/comments/default?start-index=1&max-results=999999&alt=json-in-script&callback=showrecentcomments">
</script>
</div>

  • Replace  "http://www.matrixar.com" with your Own Blog URL 
  • Save The Widget and that's it
So What's Up:- This was really awesome widget,we already shared many Recent Comments Widgets but this one is really attractive and accessible widget,try it and share your beautiful ideas with us,stay Blessed,Happy Blogging.Script/Code Credit @Helplogger




2013, By: Seo Master

seo Add Social Sharing Buttons Widget To Blogger 2013

Seo Master present to you:
Add Social Sharing Buttons Widget To Blogger
Social Media has become the main source of your Blog/website traffic,there fore never underestimate the social media networks.For Boosting Blog traffic you should add Social Sharing Buttons Widget to your Blog.Which helps you and your visitors to easily share your Blog Contents with their Friends,as a result you will get the bonus of traffic to your blog.The widget we are sharing contain Google+ Share Button,Twitter Tweet Buttons,Stumble,Facebook Send and Like Button,Pinterest,and many other social network buttons.You can add it either above the Blogger Post or Below the Blogger Posts,however it is very simple and clean widget which will not effect your Blog Loading Speed.

How To Add Social Sharing Buttons Widget To Blogger

  • Go To Blogger Dashboard
  • There Click On Template 
  • Now Search for This Script/Code <data:post.body/>
  • After Finding The above Code in Template
  • Copy The Below Script and paste it above(for Showing Buttons above The Blogger Post) or below(for Showing Buttons Below Blogger Post) this Script <data:post.body/>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>   <div class="sharethatsblogging"> <center><div class="headingthatsblogging">Like the Post? Do share with your Friends.</div>     <ul class='social' id='cssanimation'>     <li class='facebook'>     <a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow'><strong>Facebook</strong></a>     </li>     <li class='twitter'>     <a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' target='_blank'><strong>Twitter</strong></a>     </li>     <li class='googleplus'> <a expr:href='&quot;https://plusone.google.com/_/+1/confirm?hl=en&amp;url=&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank'><strong>Google+</strong></a>     </li>     <li class='pinterest'> <a href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());' rel='nofollow' target='_blank'><strong>Pinterest</strong></a>     </li>     <li class='stumbleupon'>     <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>StumbleUpon</strong></a>     </li>     <li class='delicious'>     <a expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>Delicious</strong></a>     </li>     <li class='linkedin'>     <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow' target='_blank'><strong>LinkedIn</strong></a>     </li>     <li class='reddit'>     <a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow'><strong>Reddit</strong></a>     </li>     <li class='technorati'>     <a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url ' rel='nofollow' target='_blank'><strong>Technorati</strong></a>     </li>     </ul></center></div>   <link href='http://fonts.googleapis.com/css?family=Englebert' rel='stylesheet' type='text/css'/>​ <style> ul.social { list-style:none; display:inline-block; margin:15px auto; }  ul.social li { display:inline; float:left; background-repeat:no-repeat; }  ul.social li a { display:block; width:50px; height:50px; padding-right:10px; position:relative; text-decoration:none; }  ul.social li a strong { font-weight:400; position:absolute; left:20px; top:-1px; color:#fff; z-index:9999; text-shadow:1px 1px 0 rgba(0,0,0,0.75); background-color:rgba(0,0,0,0.7); -moz-border-radius:3px; -moz-box-shadow:0 0 5px rgba(0,0,0,0.5); -webkit-border-radius:3px; -webkit-box-shadow:0 0 5px rgba(0,0,0,0.5); border-radius:3px; box-shadow:0 0 5px rgba(0,0,0,0.5); padding:3px; }  ul.social li.facebook { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_zOQnT4HAnmyVzd5fXCLYjllAivcIJVR_BP6ZCT6x-1nYU3fLPvQTq3UZUXtQ25IUdyvhl1D9BUmMULkwsEnfXI8m4e32jlpSDXscI4Xhv6QBT8bAf-mv68DauIwxEbdpulXsTMZvoAY/s50/facebook.png); }  ul.social li.twitter { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4rOB7UvPU_Hkurg8PajyLjj8X6eOJTas1UTSMulZCujL8T4Y7xnMpiDdLMPkdXK0qzkAJhzQKRZBroG6HlUXjGkBmjCMtr-923lN1VwVitXMO0ljBcK6ErBbo6FDjKItb9-mQixkPdiM/s50/twitter.png); }  ul.social li.googleplus { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQTcSNwiP6UpwnDs4HDRUSI5hLG5naW3d_FSiLoIPYgaowBwVG1dvAwI9dtNhxFlYbbJ7ghPJR-h6IFQ7vSaPETn_bYgSTqbzMUVcSlPUD4BgMPMJdg69edlH6bw4IrRtkj6BXLeruZHA/s50/google%252B.png); }  ul li.pinterest { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLQ-UkXQ1FZnvwxZLaJx3i7491Jgxq6yo6hryW7SwH2jcgL9-oXHreaRbvYRpS2Vxttp7R11Hr8fUdfufcFo1BMgEEO4D5lEyqcikFwvidM01tHg-UCLT1jUmUw5I1tbiGKmVkxc5vvyw/s50/pinterest.png); }  ul.social li.stumbleupon { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirbdmoehRhnAoUo57sZOI_fOux_7wF9N0mAFkyUwZ5VV0kGFHd4qEi9XDVfWSeBhAo56_7X0a0fYmL8JIEhE4x7iV-H5OulybSLK94J3bMRjKc7olrIQv6F8Ox2_ilrvgQyHWS4D-mynA/s50/stumbleupon.png); }  ul.social li.delicious { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvWiRmFdlsjbPtd8oqiz_dmnInqdt-ZBqP5A31CuQH6-zT64LQ1vRfNWQBAEffRUS65hSdlaKva7Wolmc5ZHYkzl77BPq0pLmaXfSdXP2HV_BvXljek515IM9JASUKm0qMkbOqjDGqg2c/s50/delicious.png); }  ul.social li.linkedin { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn-LTimoN19rIufFMjEgyK11txvO8S5CaA3bJbr4qPIjMCTEyccJ7cfv6lRZm8p3Woh6tjnQF1n3n8F1imIXRxpnR3vfzg1h1eHCkS7X1_HN4jnLD3zGQSnmzhEUnWh65d4bLeGXzrDlA/s50/linkedin.png); }  ul.social li.reddit { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje9HNcxRXmHAXB_9H_PLtxTl1lAJOnrd93jpTxfFphWq4dW6_mxhGfhElG_QCdfZo0r75lQsVOmQ8Blbk5VSnbZ5yAaInFUm2hw9k0u0vlL9iklCvylLvxhDutTOscIHJsX4Y0PG9Cugg/s50/reddit.png); }  ul.social li.technorati { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGW0_MlBKeybcn4D2A-6sLt9BeEXcVwE1ddKUzf6bevNzIS-MWpSaqUGIcCImESXgLEYn9GF1zntp1zkHX_nVwpkOhYdwaW_xj-lckSl08ZPFOQZe1TP_Q-r503GREs-5VJQ67NoLFWmri/s1600/TBI-technorati.png); }  #cssanimation:hover li { opacity:0.2; }  #cssanimation li { -webkit-transition-property:opacity; -webkit-transition-duration:500ms; -moz-transition-property:opacity; -moz-transition-duration:500ms; }  #cssanimation li a strong { opacity:0; -webkit-transition-property:opacity, top; -webkit-transition-duration:300ms; -moz-transition-property:opacity, top; -moz-transition-duration:300ms; }  #cssanimation li:hover { opacity:1; }  #cssanimation li:hover a strong { opacity:1; top:-10px; } .headinglordhtml{     font-size:25px;     font-family: 'Englebert', sans-serif; } .sharelordhtml{   border-top:30px solid #3873CC;      padding:16px;         -webkit-box-shadow: 0px 7px 9px rgba(50, 50, 50, 0.75); -moz-box-shadow:    0px 7px 9px rgba(50, 50, 50, 0.75); box-shadow:         0px 7px 9px rgba(50, 50, 50, 0.75);     transition: background .777s; -webkit-transition: background .777s; -moz-transition:background .777s; -o-transition: background .777s; -ms-transition: background .777s;     background:#D9D6FF; }  .sharelordhtml:hover {         background:white;  }  ​ </style>  </b:if>
Note:-
- In Magazine Blogger Templates,there are more then two Scripts similar to <data:post.body/>,so do paste the above Script after each script.
  • Now when you paste the above script after <data:post.body/> ,take a Preview and Then Hit save Template.
  • That's it,now take a look on your blog post social sharing widget will dancing there :)

So What's UP

Actually this widget is the main source of many blogger to get a flood of traffic,however this widget is very easy to navigate,so it will help your readers to share your blog contents with their friends.Share your beautiful ideas with us,stay Blessed Happy Blogging :)
2013, By: Seo Master

seo Add jQuery Pop-up Facebook Like Box with Timer To Blogger 2013

Seo Master present to you:
Time To Boost Your Facebook Fan Page Likes,Now its very easy to socially force your visitors to like your Facebook Fan Page.Actually this widget has a unique feature i.e it loads very fast, New jQuery Popup Facebook Like Box along with timer is a new Blogger Widget which can help you to increase your Fan page Likes.The most beautiful thing in this widget is that you can customize it Accordingly i.e you can change the time interval of Closing or You Can also change the Text "Like us On FB" and even the text "cancel".Once You added this Widget to Blogger,it will popup when someone land to your Blog and it will Provide a cool look to the reader/visitor of Blog to socially force him for liking your Fan Page ;) 

Demo

How To Add jQuery Pop-up Facebook Like Box with Timer To Blogger

Before adding this Widget you need to install the jQuery Plugin,if jQuery Plugin is already installed on your Blog,then No worry just follow the below steps and install the widget,but if not,then Go To Blogger Dashboard >> Click On Template >> and Search for </Head> tag , now copy the below script and paste it above </head> tag.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>

  • After Installing the jQuery Plugin To Your Blog Follow the below steps
  • Go To Blogger Dashboard
  • Click On Layout
  • Now Click On Add a Gadget
  • Now a Box will Popup
  • Select HTML/JavaScript There
  • Now another Box will popup
  • Now Copy the below Script and make the specific changes and paste it into the HTML/JavaScript Box
<style type='text/css'>
#makingdifferentpopup{
position: fixed;
top:100px;
z-index:9999;
display:none;
padding:0px;
right:600px;
border:10px solid rgba(82, 82, 82, 0.7);
-webkit-background-clip: padding-box; /* for Safari */
background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
-webkit-border-radius:8px 8px 8px 8px;
-moz-border-radius:8px 8px 8px 8px;
border-radius:8px 8px 8px 8px;
width:400px;
height:360px;
overflow:hidden;
}
#makingdifferentpopup span{
font-size:20px !important;
font-weight:bold !important;
}
#makingdifferentpopup h1{
background:#6d84b4 url(http://www.matrixar.com/-rNUTIpDQ21s/T0NqE_vv6GI/AAAAAAAACps/GSoWE2n9Oy8/s1600/%255Bwww.gj37765.blogspot.com%255Dh1.png) 98% no-repeat;
border:1px solid #3b5998 !important;
color:#FFFFFF !important;
font-size:20px !important;
font-weight:700 !important;
padding:5px !important;
margin:0 !important;
font-family:'"lucida grande",tahoma,verdana,arial,sans-serif !important;
overflow:hidden !important;
}
.htmlarea{
font-size:12px !important;
font-weight:normal !important;
height:265px !important;
padding:1px !important;
background:#fff !important;
border-bottom:2px solid #ddd;
overflow:hidden !important;
}
#mdfooter{
text-align:left;
background:#F2F2F2 !important;
height:56px !important;
padding:10px 10px 10px 10px !important;
overflow:hidden !important;
}
#mdclose{
float:right;
background-color:#eee !important;
border:1px solid #ccc !important;
color:#111 !important;
font-weight:bold !important;
padding:5px 8px 5px 8px !important;
text-decoration:none !important;
display:inline-block !important;
font-family:'"lucida grande",tahoma,verdana,arial,sans-serif !important;
outline:none !important;
position:relative !important;
font-size:18px !important;
margin:1px !important;
}
#mdclose:active{
top:1px;
left:1px;
}
.grabthis{
bottom:80px;
font:8px "lucida grande",tahoma,verdana,arial,sans-serif;
position:absolute;
right:6px;
text-align:right;
z-index: 99999;
}
.grabthis a{
color: #000;
text-decoration:none;
}
.grabthis a:hover{
text-decoration:underline;
}
</style>
<script type='text/javascript'>
jQuery(document).ready(function() {
function makingdifferent_ppopup()  {
var sec = 10
var timer = setInterval(function() {
   $("#mdfooter span").text(sec--);
   if (sec == 0) {
      $("#makingdifferentpopup").fadeOut("slow");
      clearInterval(timer);
   }
},1000);
  var mdwh = jQuery(window).height();
  var mdpph = jQuery("#makingdifferentpopup").height();
  var mdfromTop = jQuery(window).scrollTop()+50;
 jQuery("#makingdifferentpopup").css({"top":mdfromTop});}
jQuery(window).fadeIn(makingdifferent_ppopup).resize(makingdifferent_ppopup)
 //alert(jQuery.cookie('sreqshown'));
 //var mdww = jQuery(window).width();
 //var mdppw = jQuery("#makingdifferentpopup").width();
 //var mdleftm = (mdww-mdppw)/2;
   var mdleftm = 500;
 //var mdwh = jQuery(window).height();
 //var mdpph = jQuery("#makingdifferentpopup").height();
 //var mdfromTop = (jQuery(window).scrollTop()+mdwh-mdpph) / 2;
 jQuery("#makingdifferentpopup").animate({opacity: "1", left: "0" , left:  mdleftm}, 0).show();
     jQuery("#mdclose").click(function() {
jQuery("#makingdifferentpopup").animate({opacity: "0", left: "-5000000"}, 1000).show();});});
</script>
<div id="makingdifferentpopup">
<h1>Join us on Facebook</h1>
<div class="htmlarea">
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fthatsblogging&amp;width=400&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23fff&amp;stream=false&amp;header=false&amp;height=250" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:400px; height:250px;" allowtransparency="true"></iframe>
<div class="grabthis">
By <a href="http://www.matrixar.com/" target="_blank">ThatsBlogging</a> / <a href="http://www.matrixar.com/" target="_blank">+Get This!</a>
</div>
</div>
<div id="mdfooter">
Please wait..<span>10</span> Seconds
<a href="#" id="mdclose" onclick="return false;">Cancel</a>
</div>
</div>
<!-- End popup -->

Changes in The Script before installing

  • Replace thatsblogging in the script with your Own Facebook Fan page username.
  • For changing the Time Interval,Change var sec = 10 with your Own Desire time.
  • If you are interested in changing the height and width of the Box Change 250 and 400 in the Script
  • For Changing The Text "Join us on Facebook" just change the text with your Own.
  • Change The Text "Cancel" with your Desire text
  • Now Copy the Script and paste it into the box 
  • Now hit Save and that's it 
  • Script Credit Purely Goes To "MakingDifferent"
So What's Up :- Adding this jQuery Popup will force your Readers to like your Fan page and as a result you can increase your Fan page Likes,Share your Beautiful Ideas with us,and if you have any Question ask us,stay Blessed ,Happy Blogging.
Add jQuery Pop-up Facebook Like Box with Timer To Blogger
 Last Reviewed by Iftikhar uddinon June 24 2013
 Rating: 5
2013, By: Seo Master

seo Add Total Posts and Comments Widget To Blogger 2013

Seo Master present to you:


Its not very impressive for Pro Bloggers,but some bloggers love to show Total Posts and Comments Total Number in Blogger.Actually this widget will Show the Total No Of Comments on your Blog Articles,it fetch the total comments and Total No of Posts in your Blog.This widget is very easy to add,you can put it any where in your Blog.But the most appropriate place for adding this widget is Header or Sidebar,all you have to do is adding a Small JavaScript Code into the Layout Section.


How To Add Total Posts and Comments Widget To Blogger

  • Go To Blogger Dashboard
  • Now Click On Layout
  • Then Click On Add a Gadget
  • A Small Box will Popup,Select HTML/JavaScript
  • And Now Copy the Below Script and Paste it over there


<script style="text/javascript">function mbhTotalCount(json) {document.write(parseInt(json.feed.openSearch$totalResults.$t,10));}</script><p style="font:13px Tahoma;">Total Posts: <script src="http://www.matrixar.com/feeds/posts/default?alt=json-in-script&callback=mbhTotalCount"></script></p><p style="font:13px Tahoma;">Total Comments: <script src="http://www.matrixar.com/feeds/comments/default?alt=json-in-script&callback=mbhTotalCount"></script></p>

Changes in the Widget Script

  • Replace "www.matrixar.com" with your Own Blog URL
  • If you are interested in Changing the Text of "Total Posts" or "Total Comments",Simply Change the Green with your Own Text.
  • You Can Also Change the Font Size and Style in the Script.
  • After changing Copy the Above Script and paste it in HTML/JavaScript Box and hit save.
  • That's it :)
So What's Up :- This is a common widget which is usually used for showing the total number of Posts and Comments on Blog.Share your Beautiful ideas with us,stay Blessed,Happy Blogging.
2013, By: Seo Master
Powered by Blogger.
Design by Dev Nasser