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 How To Add Beautiful Divider(image) Between Each Comment in Blogger 2013
Seo Master present to you:
The Comments Section of a Blog is the most important section,Actually readers ideas about the blog Contents are reflected in this Section.Keeping in view this thought you should make your Blogger Comment Section more accessible and neat.To make your Comments Section navigative you should add a divider between each comment,otherwise it just become a jumble of letters and makes the visitors flee away.So be Professional and make your Comments Outlook attractive and Stylish,now How to do,Follow the below steps.
2013, By: Seo MasterHow To Add Beautiful Divider(image) Between Each Comment in Blogger
- Go To Blogger Dashboard
- Click On Template
- Now Click On Edit HTML
- Now Search for This Tag ]]></b:skin>
- Now Copy the Below Script and just paste it above ]]></b:skin> tag
Note:- The Below Script is for New Style Comments i.e threaded comments(with reply option)
.comment-block {
background-image:url(http://www.matrixar.com/-Hjv1gf9jTdc/UYDrKFxpU_I/AAAAAAAAAfo/0vsiHYKlZM0/s1600/separater.png);
background-repeat:no-repeat;
background-position:center bottom;
padding-bottom:30px;
margin-top: -10px;
}
.comments .continue {
border-top: 0px solid $(widget.alternate.text.color);
}
Note:- The below script is for old commenting system(with no reply option)
#comments-block .comment-footer { background-image:url(http://www.matrixar.com/-Hjv1gf9jTdc/UYDrKFxpU_I/AAAAAAAAAfo/0vsiHYKlZM0/s1600/separater.png); background-repeat:no-repeat; background-position:center bottom; height: 50px; }
- For Changing the Divider image Change "http://www.matrixar.com/-Hjv1gf9jTdc/UYDrKFxpU_I/AAAAAAAAAfo/0vsiHYKlZM0/s1600/separater.png" with your Own image url.
- For changing the height of the image in Old Commenting System change the value 50.
- Increase or decrease the padding in threaded comments by changing the value of 30px.
- And Now just hit Save Template and that's it ;)
So What's up
Making Changes in Blogger Template is not easy,but it is interesting ;),make your comment style more beautiful by adding a divider image,stay Blessed Happy Blogging.
seo Add Social Sharing Buttons Widget To Blogger 2013
Seo Master present to you: 
2013, By: Seo Master
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 == "item"'> <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='"http://www.facebook.com/share.php?v=4&src=bm&u=" + data:post.url + "&t=" + data:post.title ' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow'><strong>Facebook</strong></a> </li> <li class='twitter'> <a expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url ' rel='nofollow' target='_blank'><strong>Twitter</strong></a> </li> <li class='googleplus'> <a expr:href='"https://plusone.google.com/_/+1/confirm?hl=en&url=" + data:post.url' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow' target='_blank'><strong>Google+</strong></a> </li> <li class='pinterest'> <a href='javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());' rel='nofollow' target='_blank'><strong>Pinterest</strong></a> </li> <li class='stumbleupon'> <a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' target='_blank'><strong>StumbleUpon</strong></a> </li> <li class='delicious'> <a expr:href='"http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' target='_blank'><strong>Delicious</strong></a> </li> <li class='linkedin'> <a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=&source="' rel='nofollow' target='_blank'><strong>LinkedIn</strong></a> </li> <li class='reddit'> <a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow'><strong>Reddit</strong></a> </li> <li class='technorati'> <a expr:href='"http://technorati.com/faves?add=" + 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 :)
seo How To Add Related Posts Widget With Thumbnails To Blogger 2013
Seo Master present to you:
Time to boost your blog page-views,here is incredible hack via which you can show the related posts to blog article below every Blog post,along with beautiful thumbnails.The data for related posts are fetched from Blog Labels and different posts.Applying this hack will help you to host your visitors with great luxury,as a result he will remain long time on your blog seeing different interesting related articles.
- If you want to change the Default Picture to your own or any other picture,then simply replace the Green URL With your Own image URL.
-For Displaying more than 4 posts in the widget then change the value of 4 in the script to desired no of posts.
-If you want to display this widget also in Home Page then remove the Blue script from the above script
-For Displaying more than 4 posts in the widget then change the value of 4 in the script to desired no of posts.
-If you want to display this widget also in Home Page then remove the Blue script from the above script.
2013, By: Seo Master
How To Add Related Posts Widget With Thumbnails To Blogger
- Go To Blogger Dashboard
- Click On template and Then Click On edit HTML
- Now Search for </head> Tag
- Now Copy the below script and paste it above </head> Tag
<!--Related Posts with thumbnails Scripts and Styles Start--> <!-- remove --><b:if cond='data:blog.pageType == "item"'> <style type='text/css'> #related-posts { float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px; } #related-posts h2{ font-size: 18px; letter-spacing: 2px; font-weight: bold; text-transform: none; color: #5D5D5D; font-family: Arial Narrow; margin-bottom: 0.75em; margin-top: 0em; padding-top: 0em; } #related-posts a{ border-right: 1px dotted #DDDDDD; color:#5D5D5D; } #related-posts a:hover{ color:black; background-color:#EDEDEF; } </style> <script type='text/javascript'> var defaultnoimage="http://www.matrixar.com/-PpjfsStySz0/UF91FE7rxfI/AAAAAAAACl8/092MmUHSFQ0/s1600/no_image.jpg"; var maxresults=4; var splittercolor="#DDDDDD"; var relatedpoststitle="Related Posts"; </script> <script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-big-thumbnails.js' type='text/javascript'/> <!-- remove --></b:if> <!--Related Posts with thumbnails Scripts and Styles End-->Note :-
- If you want to change the Default Picture to your own or any other picture,then simply replace the Green URL With your Own image URL.
-For Displaying more than 4 posts in the widget then change the value of 4 in the script to desired no of posts.
-If you want to display this widget also in Home Page then remove the Blue script from the above script
- Now Search for The below Script (Note The Below mentioned Code is 2 times in magazine style Blogger Templates so do paste the below Code after each.)
<div class='post-footer'>
- Now Copy the below script and paste it above <div class='post-footer'>
<!-- Related Posts with Thumbnails Code Start--> <!-- remove --><b:if cond='data:blog.pageType == "item"'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=4"' type='text/javascript'/></b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs("<data:post.url/>"); </script> </div><div style='clear:both'/> <!-- remove --></b:if> <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'> <a href='http://www.matrixar.com'><img alt='Blogger Tricks' src='http://www.matrixar.com/-K65p5zLLKQk/T3ObCINoP7I/AAAAAAAABmI/dF84-alnOu4/s1600/best+blogger+tips.png'/></a> </b:if></b:if> <!-- Related Posts with Thumbnails Code End-->Note:-
-For Displaying more than 4 posts in the widget then change the value of 4 in the script to desired no of posts.
-If you want to display this widget also in Home Page then remove the Blue script from the above script.
- Now just hit save template and that's it
So What's Up
Adding Related Posts Widget With Thumbnails To Blogger will help you to boost your Blog page-views,actually this post is originally written by HelpLogger,So Script Credit Goes to HelpLogger.If you have any question related this article,must pass comments.Stay Blessed,Happy Blogging.