Création des Logiciels de gestion d'Entreprise, Création et référencement des sites web, Réseaux et Maintenance, Conception
seo Add Horizontal Menu Bar in Blogger 2013
Seo Master present to you: 
2013, By: Seo Master
Making Your Blog Simple and navigative grow the love of readers and visitors.Actually the Horizontal Menu Bar is an awesome bar which can be placed at the top of Blog or below header Section,which will certainly helps the readers to easily navigate,contact,and explore your blog contents.In this regards,here is a cool Horizontal menu bar (Black Style) which can make your blog navigative and friendly.
How To Add Horizontal Menu Bar in Blogger
- Go To Blogger Dashboard
- Now Click on Template and then Edit HTML
- Now Search for ]]></b:skin>
- Copy and paste the below script above ]]></b:skin>
#Wrapper_Nav{background:#111; height:35px;}
.Top_Menu{margin:0 auto; width:960px}
.Menu a{color:#fff; display:block; padding:4px 7px;text-decoration:none}
.Menu a:hover{background:#f4f4f4; color:#333; display:block}
.Menu ul{list-style:none; margin:5px 0}
.Menu li{float:left; height:25px}
.Menu{float:left; height:35px; width:960px}
- Now Search for <body>
- Now Copy The Below Script and add it below <body> tag
<div id="Wrapper_Nav">
<div class="Top_Menu">
<nav class="Menu">
<ul>
<li><a href="#">Home Tab</a></li>
<li><a href="#" rel="author">About You Text</a></li>
<li><a href="#">Contact Text</a></li>
<li><a href="#">Forum Site</a></li>
<li><a href="#">Advertise Money</a></li>
<li><a href="#">Guest Post</a></li>
<li><a href="#">Text</a></li>
<li><a href="#">Privacy Policy Of Your Blog</a></li>
<li><a href="#">Disclaimer Text</a></li>
</ul>
</nav>
</div>
</div>
- Replace # with the specific links you want to redirect,also change the text to your desired text.
- Note :- If you are interested in adding more menus,simply add "<li><a href="#">Text</a></li> b/w <ul> and </ul>
- Save Your Template
- That's it !
So What's Up:- Actually this menu bar will make your Blog navigative to the readers,they can explore your blog contents easily by clicking the labels,Share your ideas with us,stay Blessed,Happy Blogging !
seo Add Social Sharing icons To Blogger Header 2013
Seo Master present to you:
Its old but Old is Gold,Adding Social Media icons in the Top Right Corner of the Blog will help you to improve your Blog Social Status.These icons will activate when someone hover over them,these icons include Facebook,Twitter,and Google+ Share Buttons along with blog feeds option. Actually I got the idea of this article from the below Question.
2013, By: Seo MasterQuestion:-I don't Like Social Sharing icons in the sidebar,i want to put add these social media icons in Blogger Header,How i will put that?
How To Add Social Sharing icons To Blogger Header
- Go To Blogger Dashboard
- Click On Template
- Edit HTML
- Now We have to expand the style,For Expanding the style Find <b:skin>...</b:skin> in the template coding and immediately click the small arrow left to <b:skin>...</b:skin>
- After expanding the style search for this tag ]]></b:skin>
- Now Copy and Paste the below Code just above ]]></b:skin> tag
/* Social icons By www.matrixar.com
----------------------------------------------- */
#social-icons {
margin-bottom:10px;
height:50px;
width:100%;
display:block;
clear:both;
}
.social-media-icons {
display:table
}
.social-media-icons ul {
text-align:right;
padding:5px 5px 0 0
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
.social-media-icons ul {
margin-bottom:0;
padding:0;
float:right;
}
.social-media-icons li.media_icon {
margin-left:6px;
padding-left:0 !important;
background:none !important;
display:inline;
float:left;
}
.social-media-icons li:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(-360deg);
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
- And Now Search for the below Line in the Template Coding
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
- Now Copy the below Script and add it above this Line <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
- Code is below
<div class='social-media-icons' id='social-icons'>
<ul>
<li class='media_icon'><a href='http://facebook.com/RoseNbushes'><img border='0' src='http://www.matrixar.com/-hJlnVDP-uXk/UaKErpYECEI/AAAAAAAADhA/DA59rR8trrA/s1600/Facebook.png'/></a></li>
<li class='media_icon'><a href='http://twitter.com/#!/thatsblogging'><img border='0' src='http://www.matrixar.com/-x7YZ7aKIxM8/UaKErq0FZlI/AAAAAAAADhE/3zNd_IFPT8g/s1600/Twitter.png'/></a></li>
<li class='media_icon'><a href='https://plus.google.com/g+idgoeshere/about'><img border='0' src='http://www.matrixar.com/-DNSrkD8pl14/UaKEsW_JdfI/AAAAAAAADhU/S0jGIdQuO4M/s1600/googleplus.png'/></a></li>
<li class='media_icon'><a href='http://BlogName/feeds/posts/default'><img border='0' src='http://www.matrixar.com/-H3nOjhn9wk8/UaKErtM0_mI/AAAAAAAADg8/vJ8tEgRcl5M/s1600/RSS.png'/></a></li>
</ul></div>
Changes in Coding
- Replace "rosenbushes" with your Facebook Username
- Replace "ThatsBlogging" with your Twitter Username
- Replace "G+idgoeshere" with your Google+ ID
- Replace "BlogName" with your Blog Link
- And Replace all the Green Links with the icons url if you want to add new.
- Finally hit Save the Template and enjoy Social Sharing Icons On Your Blog Header.
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.
-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
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 != "static_page"'><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'>{[['<img src="http://static.graddit.com/img/star.png"/>']]}</div><div expr:id='"ffbs_stats_" + data:post.id' class='ffbs_stats'></div><script type='text/javascript' expr:src='"http://www.graddit.com/rate/eng/5/" + data:post.id + "?id=" + data:post.id + "&stats=ffbs_stats_" + data:post.id + "&labels=labels_" + data:post.id + "&info=info-" + data:post.id + "&info_delay=2&url=" + data:post.url + "&class_star=ffbs_star_img&class_star_set=ffbs_star_img_set&class_star_vote=ffbs_star_img_vote&views=yes&votes=yes&average=yes"'></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.
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.
2013, By: Seo Master
Just Scroll below and see ;)
How To Add Go To Top and Go To Bottom Buttons To Blogger
- Go to Blogger Dashboard
- Click On Layout and Then Click On Add a Gadget
- 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.