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

seo How To Add 5 Star Rating Widget To Blogger 2013

Seo Master present to you:

Getting positive feedback from visitors and blog readers enable you to get fame.The Stronger your feedback is the more your blog visitors will be happy.5 Start Rating Widget is an awesome source of getting feedback and Positive response from your readers,this widget show 5 stars at the top or below the blog post,where one can rate your blog article.This Widget also show the total number of views of the article along with the number of votes.You can rate an article by Selecting and Clicking the 5 stars at Once.Actually this Blog has no effect on Blog Loading Speed.

How To Add 5 Star Rating Widget To Blogger


  • First of all Go To Blogger Dashboard
  • Then Click On Template >> Edit HTML
  • Now search for </head> tag
  • After Finding the Head Tag Copy the below Script and paste it just above it or before it.

<link type="text/css" rel="stylesheet" href="http://static.graddit.com/css/graddit.css" />

  • After Implementing the above steps search for this Code <data:post.body/> 
  • Now Copy the Below Code and paste it just above/below <data:post.body/>


<b:if cond='data:blog.pageType != &quot;static_page&quot;'><div expr:id='"labels_" + data:post.id' style='display: none; visibility: hidden;'><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><data:label.name/>,</b:loop></b:if></div>Rate this posting: <div expr:id='data:post.id' class='ffbs_rate'>{[[&#39;&lt;img src=&quot;http://static.graddit.com/img/star.png&quot;/&gt;&#39;]]}</div><div expr:id='&quot;ffbs_stats_&quot; + data:post.id' class='ffbs_stats'></div><script type='text/javascript' expr:src='&quot;http://www.graddit.com/rate/eng/5/&quot; + data:post.id + &quot;?id=&quot; + data:post.id + &quot;&amp;stats=ffbs_stats_&quot; + data:post.id + &quot;&amp;labels=labels_&quot; + data:post.id + &quot;&amp;info=info-&quot; + data:post.id + &quot;&amp;info_delay=2&amp;url=&quot; + data:post.url + &quot;&amp;class_star=ffbs_star_img&amp;class_star_set=ffbs_star_img_set&amp;class_star_vote=ffbs_star_img_vote&amp;views=yes&amp;votes=yes&amp;average=yes&quot;'></script></b:if>

  • Hit Save Template and that's it 

Important to Note

This Widget Provide two option i.e you want to show it before Blog Post or below Blog Post,Actually i will prefer the below section because when readers read your article at the end they decide how was the article.So for adding it Below the Blog Posts Copy the Above Script and paste it below <data:post.body/>,and if you are interested in showing it above the Blog post so do the above steps and paste the copied script above <data:post.body/>.
-If you are using Magazine Style Blogger Template or Responsive Blogger Template,then you have to Copy the above Script and paste it below/above <data:post.body/> as many times as it is in the Template HTML.

So What's Up:- This Widget can impress your blog readers but if you have a good feedback,however it doesn't slow down the blog loading speed,Stay Blessed,Happy Blogging.
2013, By: Seo Master

seo Add Go/Scroll To Top Button To Blogger 2013

Seo Master present to you:
Professional Blogs have a flood of Comments,reading these comments one can slip into the bottom,then scrolling to Top via mouse or pad is lil bit boring,in this regard we can solve this Problem by using jQuery in Blogger.Adding Go To Top or Scroll to Top Button will help your visitors to easily navigate the Blog Content,Specially when there is alot of Contents or users comments.These Buttons have beautiful fade in and out Effect,it float in the blog and when one click the upper button it slides to the top of blog,and if one click the bottom button it floats to the bottom of the blog.
Just Scroll below and see ;)


How To Add Go To Top and Go To Bottom Buttons To Blogger

  • A Box Will Pop,Select HTML/JavaScript
  • Now Copy the below Script and paste it into the Box
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" > /*********************************************** * Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit Project Page at http://www.dynamicdrive.com for full source code ***********************************************/ var scrolltotop={ //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top). setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]}, controlHTML: '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7dxONU7s1G8dfySBSCoXbI0GqCBQ-MXeTLFVdSP609pl6yNcjNYKyTnRA7sDTcvVMt4nBrNC0vb4Sl5sklP_AZknUA7BxEbLysjX96yCGoGiH2Pd9F7sJC6nAVdZjWpk4CerzXJEZyoI/h120/scroll-to-top.png" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol" controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links state: {isvisible:false, shouldvisible:false}, scrollup:function(){ if (!this.cssfixedsupport) //if control is positioned using JavaScript this.$control.css({opacity:0}) //hide control immediately after clicking it var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto) if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists dest=jQuery('#'+dest).offset().top else dest=0 this.$body.animate({scrollTop: dest}, this.setting.scrollduration); }, keepfixed:function(){ var $window=jQuery(window) var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety this.$control.css({left:controlx+'px', top:controly+'px'}) }, togglecontrol:function(){ var scrolltop=jQuery(window).scrollTop() if (!this.cssfixedsupport) this.keepfixed() this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false if (this.state.shouldvisible && !this.state.isvisible){ this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0]) this.state.isvisible=true } else if (this.state.shouldvisible==false && this.state.isvisible){ this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1]) this.state.isvisible=false } }, init:function(){ jQuery(document).ready(function($){ var mainobj=scrolltotop var iebrws=document.all mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body') mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>') .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'}) .attr({title:'Scroll Back to Top'}) .click(function(){mainobj.scrollup(); return false}) .appendTo('body') if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text mainobj.togglecontrol() $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){ mainobj.scrollup() return false }) $(window).bind('scroll resize', function(e){ mainobj.togglecontrol() }) }) } } scrolltotop.init() </script>

  • Now Click On Save and that's it.
So What's Up:- This is just an extra Widget for Blog,many Bloggers search for this,therefore i add it into my tutorials,this widget has no effect on Blog Loading Speed,Drop your Comments Below,Stay Blessed,Happy Blogging.
2013, By: Seo Master

seo Spraying animated subscription buttons for blogger v.1 2013

Seo Master present to you:
spraying animated subscription buttons blogger
Spraying jQuery animated subscription buttons widget is an awesome widget for blogger.This animated subscription buttons created by Redeyeoperations and i modified it by adding some additional features.This widget works best in Mozilla Firefox..
I created a widget generator for you with some important options.




 
To view demo of this widget please click on following link

Features

  • 5 subscription buttons
  • jQuery Animation
  • Effective CSS3 Animation
  • Color Selectable base button
View Demo
Step 1: Add jQuery plugin (if your blog have a jquery plugin,ignore this step)
  • Go to Template->Edit HTML [A dialog box appears click Proceed]
  • Copy and paste the below code <head> and save it
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>



    2013, By: Seo Master

    seo How To Add Multi Tabbed Navigation Widget To Blogger 2013

    Seo Master present to you:

    The Multi Tabbed Navigation Widget enables you to Group all the Blog Gadgets in a single container,which can easily be selected via tabs.The main benefit of this widget is to save the Space of your blog,and you will get rid of scattered gadgets,however it also helps you to navigate the blog gadgets easily.Any one can see blog gadgets in a single container just by Clicking the Tab of the specific Gadget.There are several ways of creating tab-views for blogger like jQuery, or with the help of tools,or any script.

    How To Add Tabbed Navigation Widget To Blogger



    • Now Expand the Style Section of the Template,just by Clicking the arrow near <b:skin> ... </b:skin> at line 14.
    • Now Search for this Tag ]]></b:skin>
    • Now just above ]]></b:skin> tag add the below script
    /* ThatsBlogging Tabview for Blogger
    ----------------------------------------------- */
    .tabviewcont{
    margin:15px 0;
    padding:0;
    clear:both;
    }
    .tabviewnav {
    margin: 0 0 0 14px;
    padding:3px 0; /* If you are using a Blogger Template change 0 with 15px */
    font-size:12px; /* Font size of text inside tabs */
    font-weight:bold;
    }
    .tabviewnav li {
    list-style:none;
    margin:0;
    display:inline;
    }
    .tabviewnav li a {
    padding:3px 6px;
    margin-right:1px;
    background:#F6F6F6; /* The background color of the tabs */
    border-radius:5px 5px 0 0;
    -moz-border-radius:5px 5px 0 0;
    -webkit-border-radius:5px 5px 0 0;
    text-decoration:none;
    color:#222222;
    }
    .tabviewnav li a:hover {
    color:#222222;
    background:#EBEBEB; /* Background color of the tab on mouseover */
    text-decoration:none;
    }
    .tabviewnav li.tabviewactive a,
    .tabviewnav li.tabviewactive a:hover {
    background:#EBEBEB; /* Background color of the active tab */
    color:#222222;
    }
    .tabviewcont .tabviewtab {
    padding:5px;
    border:1px solid #EEEEEE; /* Border around the container */
    background:#fff; /* The background color of the gadget */
    }
    .tabviewcont .tabviewtab h2,
    .tabviewcont .tabviewtabhide {
    display:none;
    }
    .tabviewtab .widget-content ul{
    list-style:none;
    margin:0 0 10px 0;
    padding:0;
    }
    .tabviewtab .widget-content li {
    border-bottom:1px solid #ccc;
    margin:0 5px;
    padding:2px 0 5px 0;
    }



    • Now find </head> Tag
    • Now Copy The Below Script and paste it above </head> Tag
    <script type='text/javascript'>
    // Tabview for grouping gadgets
    //<![CDATA[
    document.write('<style type="text/css">.tabview{display:none;}<\/style>');function tabviewObj(argsObj){var arg;this.div=null;this.classMain="tabview";this.classMainLive="tabviewcont";this.classTab="tabviewtab";this.classTabDefault="tabviewtabdefault";this.classNav="tabviewnav";this.classTabHide="tabviewtabhide";this.classNavActive="tabviewactive";this.titleElements=['h2','h3','h4','h5','h6'];this.titleElementsStripHTML=true;this.removeTitle=true;this.addLinkId=false;this.linkIdFormat='<tabviewid>nav<tabnumberone>';for(arg in argsObj){this[arg]=argsObj[arg]}this.REclassMain=new RegExp('\\b'+this.classMain+'\\b','gi');this.REclassMainLive=new RegExp('\\b'+this.classMainLive+'\\b','gi');this.REclassTab=new RegExp('\\b'+this.classTab+'\\b','gi');this.REclassTabDefault=new RegExp('\\b'+this.classTabDefault+'\\b','gi');this.REclassTabHide=new RegExp('\\b'+this.classTabHide+'\\b','gi');this.tabs=new Array();if(this.div){this.init(this.div);this.div=null}}tabviewObj.prototype.init=function(e){var childNodes,i,i2,t,defaultTab=0,DOM_ul,DOM_li,DOM_a,aId,headingElement;if(!document.getElementsByTagName){return false}if(e.id){this.id=e.id}this.tabs.length=0;childNodes=e.childNodes;for(i=0;i<childNodes.length;i++){if(childNodes[i].className&&childNodes[i].className.match(this.REclassTab)){t=new Object();t.div=childNodes[i];this.tabs[this.tabs.length]=t;if(childNodes[i].className.match(this.REclassTabDefault)){defaultTab=this.tabs.length-1}}}DOM_ul=document.createElement("ul");DOM_ul.className=this.classNav;for(i=0;i<this.tabs.length;i++){t=this.tabs[i];t.headingText=t.div.title;if(this.removeTitle){t.div.title=''}if(!t.headingText){for(i2=0;i2<this.titleElements.length;i2++){headingElement=t.div.getElementsByTagName(this.titleElements[i2])[0];if(headingElement){t.headingText=headingElement.innerHTML;if(this.titleElementsStripHTML){t.headingText.replace(/<br>/gi," ");t.headingText=t.headingText.replace(/<[^>]+>/g,"")}break}}}if(!t.headingText){t.headingText=i+1}DOM_li=document.createElement("li");t.li=DOM_li;DOM_a=document.createElement("a");DOM_a.appendChild(document.createTextNode(t.headingText));DOM_a.href="javascript:void(null);";DOM_a.title=t.headingText;DOM_a.onclick=this.navClick;DOM_a.tabview=this;DOM_a.tabviewIndex=i;if(this.addLinkId&&this.linkIdFormat){aId=this.linkIdFormat;aId=aId.replace(/<tabviewid>/gi,this.id);aId=aId.replace(/<tabnumberzero>/gi,i);aId=aId.replace(/<tabnumberone>/gi,i+1);aId=aId.replace(/<tabtitle>/gi,t.headingText.replace(/[^a-zA-Z0-9\-]/gi,''));DOM_a.id=aId}DOM_li.appendChild(DOM_a);DOM_ul.appendChild(DOM_li)}e.insertBefore(DOM_ul,e.firstChild);e.className=e.className.replace(this.REclassMain,this.classMainLive);this.tabShow(defaultTab);if(typeof this.onLoad=='function'){this.onLoad({tabview:this})}return this};tabviewObj.prototype.navClick=function(event){var rVal,a,self,tabviewIndex,onClickArgs;a=this;if(!a.tabview){return false}self=a.tabview;tabviewIndex=a.tabviewIndex;a.blur();if(typeof self.onClick=='function'){onClickArgs={'tabview':self,'index':tabviewIndex,'event':event};if(!event){onClickArgs.event=window.event}rVal=self.onClick(onClickArgs);if(rVal===false){return false}}self.tabShow(tabviewIndex);return false};tabviewObj.prototype.tabHideAll=function(){var i;for(i=0;i<this.tabs.length;i++){this.tabHide(i)}};tabviewObj.prototype.tabHide=function(tabviewIndex){var div;if(!this.tabs[tabviewIndex]){return false}div=this.tabs[tabviewIndex].div;if(!div.className.match(this.REclassTabHide)){div.className+=' '+this.classTabHide}this.navClearActive(tabviewIndex);return this};tabviewObj.prototype.tabShow=function(tabviewIndex){var div;if(!this.tabs[tabviewIndex]){return false}this.tabHideAll();div=this.tabs[tabviewIndex].div;div.className=div.className.replace(this.REclassTabHide,'');this.navSetActive(tabviewIndex);if(typeof this.onTabDisplay=='function'){this.onTabDisplay({'tabview':this,'index':tabviewIndex})}return this};tabviewObj.prototype.navSetActive=function(tabviewIndex){this.tabs[tabviewIndex].li.className=this.classNavActive;return this};tabviewObj.prototype.navClearActive=function(tabviewIndex){this.tabs[tabviewIndex].li.className='';return this};function tabviewAutomatic(tabviewArgs){var tempObj,divs,i;if(!tabviewArgs){tabviewArgs={}}tempObj=new tabviewObj(tabviewArgs);divs=document.getElementsByTagName("div");for(i=0;i<divs.length;i++){if(divs[i].className&&divs[i].className.match(tempObj.REclassMain)){tabviewArgs.div=divs[i];divs[i].tabview=new tabviewObj(tabviewArgs)}}return this}function tabviewAutomaticOnLoad(tabviewArgs){var oldOnLoad;if(!tabviewArgs){tabviewArgs={}}oldOnLoad=window.onload;if(typeof window.onload!='function'){window.onload=function(){tabviewAutomatic(tabviewArgs)}}else{window.onload=function(){oldOnLoad();tabviewAutomatic(tabviewArgs)}}}if(typeof tabviewOptions=='undefined'){tabviewAutomaticOnLoad()}else{if(!tabviewOptions['manualStartup']){tabviewAutomaticOnLoad(tabviewOptions)}}
    //]]>
    </script>
    • Now Search for <div class='column-right-inner'> or <div id='sidebar-wrapper'> (it will look like the below screenshot)
    • Now Paste The Following Script Just above this Script <div class='column-right-inner'>
    <div class='tabview'> 
    <b:section class='tabviewtab' id='Tab1' maxwidgets='1'/>
    <b:section class='tabviewtab' id='Tab2' maxwidgets='1'/>  
    <b:section class='tabviewtab' id='Tab3' maxwidgets='1'/> 
    </div>
    •  And That's it,Now Go To Layout Section,you will see there 3 New Areas for adding Gadgets.

    Changes and Implementation 

    If you want to add any Gadget to the list of single Container,just Click On Add a Gadget,and Drag the Gadget to that section.Now if you are interested in adding more Tabs,then follow the below steps.
    • In the Above last one step we have highlighted </div> ,now if you want to add new tab just add the below script before </div> Tag,and that's it.
    <b:section class='tabviewtab' id='Tab4' maxwidgets='1'/>


    • Note : If you are adding new tab,then use different ID for each tab,e.g for tab 6 use "Tab6" in the script.
    • Next Important Point is that if your Template sidebar is too short they don't add long and high width Gadget to this Widget.
    • ! important ! : This Widget may slow your Blog Loading Speed, because this widget is lil bit heavy.
    • Note:- If your Blog Sidebars is too short it will not work perfect,either it will just show title or nothing 
    So What's Up :- How Was the Widget?You will Like it to Add into your Blog?Share your Beautiful ideas with us.Stay Blessed,Happy Blogging. 

    2013, By: Seo Master
    Powered by Blogger.