MatrixAdapt | Logiciel de gestion d'Entreprise, Création et référencement des sites web

seo How To Add Each Blog Post in Separate box 2013

Seo Master present to you:

Add Each Blog Post in Separate box:-In many Blogger Templates you may have seen that there is not a separate box for every Post,but each post is completely shown as in Dynamic Blogger Templates.Here we will show you How to Add Each Post in a Separate Beautiful Box along-with many Color Schemes.Actually this hack can be applied by using CSS ,Applying this hack each post will be shown in a separate box and when ones hover mouse it will change the Border Color and When Again Hover it will automatically again change the Color.Now How to do it,Let me Elaborate it in some easy steps.

How To Add Each Blog Post in Separate box

Go To Blogger.com
Sign in There and Go To Blogger Dashboard
There Click on Template
Then Click On Customize
After that Click On Advanced Option
And Then Select CSS(i.e Add CSS)
Now Copy the below Code and paste it over there.

.post {
background:#FFFFFF;
border: 2px solid #000000;
padding-right:7px;
padding-left:7px;
}
.post:hover {
border: 2px solid #FF0000;
}
.post:active {
border: 2px solid #0004FF;
}

That's it

Customization :- If You are interested in Changing the background Color then Replace #FFFFFF with Your Own Color Code.And If you want to change the Border Color then Change #000000 #FF0000 #0004FF to Your Desired Color Code

How To Add Each Blog Post In Separate box
Last Reviewed by The Gameron October 29 2013
Rating: 4.5

2013, By: Seo Master

seo Easy Way To Create Sitemap For Blogger 2013

Seo Master present to you:

Sitemap is a list of pages Of a Blog or Website which enables the Search Engine Crawlers to crawl the blog/website pages.Actually there are two types of Sitemap.

XML Sitemap
HTML Sitemap

XML Sitemap is actually a structured format which a user can't see i.e it may be in the coding of Template or hidden. But the bonus point of this Sitemap is they tell the search Engines for crawling the web pages while on the other side HTML Site-Map are specially designed for the users to enable them to find content on your Blog/website,this visitors and Search Engine Bots find the pages of such Site-mapped blog.

How To Create Sitemap For Blogger

All you have to do is making a new page in your Blog
After Creating a Page Click On The Pages
And Then Click On The Page you have Created
Now There will be two Option at the left-most side i.e Compose/HTML
Simply Click On HTML
Now Copy the Below Script and paste it there

<div dir="ltr" style="text-align: left;" trbidi="on">
<script src="http://yourjavascript.com/18113981113/bukarahasiablog-toc.js"></script><script src="http://www.matrixar.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
</div>

Change "http://www.matrixar.com" with your Blog Name!
Now Save The Pages Section
And That's it.

So What's Up:- Adding Sitemap to Blog which certainly enable the Search Engine Crawlers to crawl your Blog Contents as a result you may get high rank and traffic,Share your beautiful ideas with us,Stay Blessed,Happy Bloggging!

Easy Way To Create Sitemap For Blogger
Last Reviewed by Iftikhar on June 15 2013
Rating: 5

2013, By: Seo Master

seo Add Divider(line) Between Posts in Blogger 2013

Seo Master present to you:

Another interesting Hack for Blogger is How To Add Divider Between The Blogger Posts?Adding Divider between the posts is nothing else it will just add an image which will clarify the posts i.e One can easily navigate any post.Actually by default Blogger template has a Line which divides the post but isn't that Looking Bore? Of Course its Boring then don't waste your time,this is the time to make your Blog Creative and Attractive.

First Of all you have to find a Picture which you want to use as a divider e.g in Our Case we have the below image which we will use to add divider b/w the Posts.

You can host your Divider image in any hosting such as tinpic or Photo Bucket etc.

How To Add Divider(line) Between Posts in Blogger

Go To Blogger Dashboard >> Template >> Edit HTML
Search for this Code

.post { margin:.5em 0 1.5em; border-bottom:1px dotted $bordercolor; padding-bottom:1.5em; }

Now Replace the Above Code with The Below Script and if you are interested in Changing the divider image just change the URL and Do This Step

.post {
background: url(http://i36.tinypic.com/xqid55.jpg);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:3.6em;
}

Replace the Red URL mentioned with your Own Divider image url
If you want to Change "Padding-Bottom" increase or decrease the value in Black Bold Script

2nd Method For Adding Divider Between Posts in Blogger

If The Above Method is not working in your Template,then you have to use this method which is very easy !

Go To Blogger Dashboard
Click on Template
Edit HTML
Now Search for the below Script

<div class='post-footer-line post-footer-line-3'/>

Now Copy the below Script and Add it below the above Script

<center><img height='30' src='divider image url'/></center>

Tip:- If you want to increase the Divider height Change 30 to the Desired value,and Add Divider image url in the script and that's it!

So What's Up:- This was an awesome trick,it is ideal for bloggers to add this divider image between the posts.It will help their visitors to easily navigate the blogging contents.Share your ideas with us , stay Blessed Happy Blogging!

2013, By: Seo Master

seo Stylish Sliding Up Image Description Widget For Blogger 2013

Seo Master present to you:

We Got a new Widget i.e Stylish Sliding Up Image Description Widget For Blogger.Let's Play with this widget,this widget enable us to add description below image but How? Its not a unique to add description Below image ? Of-course but in this widget the description will be shown when One hover the mouse over the image and the description will be clearly seen.Does it make Sense,its looking Sound Good.With the help of CSS and HTML this widget can be added easily to Blog.

DEMO

How to Add Stylish Sliding Up Image Description Widget To Blogger

Visit Blogger.com
Go To Dashboard
Now Click On Layout
And Then Click On Add a Gadget
A Box will Pop-up
Select HTML/JavaScript
Now Copy the below Script and made the Necessary changes which is mentioned clearly
Paste it there and that's it !

<style>.image-box { width:280px;height:280px;overflow:hidden;background-color:white; border:1px solid #ccc;float:left;margin:1px 1px; font:normal normal 12px/1.4 Segoe,"Segoe UI",Arial,Sans-Serif; color:#333;}.image-container,.image-details {height:280px;border:5px solid white;background-color:#ffc; transition:margin-top .4s ease-out .4s;}.image-container img { width:280px;height:280px;padding:0 0;margin:0 0;border:none;outline:none;max-width:none; max-height:none; background-color:black;}.image-details h4,.image-details p { margin:0 0 .2em;padding:0 0;height:70px;}.image-details h4 { font-size:120%;height:auto;}.image-details .details { padding:10px 12px;overflow:hidden;}
.image-details .more { color:white;text-decoration:none;display:block; text-align:center;font-weight:bold;background-color:#f9a;height:26px;line-height:26px;margin:10px 0 0;}
.image-box:hover {border-color:#bbb; width:280px; height:280px;}.image-box:hover .image-container {margin-top:-160px}.image-details .more:hover {background-color:black}</style>
<div class="image-box-wrapper" id="image-box-wrapper"> <div class="image-box"> <div class="image-container"> <img width="280" height="280" src="http://www.matrixar.com/-F2yD2BXCAJk/Ua3z1l53o2I/AAAAAAAAAnA/gPBN6hrMeOg/s640/a.aaa-Face-painted-by-hand.jpg" alt="Just"> </div> <div class="image-details"> <div class="details"> <h4>Lorem Ipsum</h4> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy..</p> <p><a class="more" href="Blog Post Link ">See More</a></p> </div> </div> </div>
<div style="clear:both;"></div>
</div>

Save it and You are Done !
Stay Blessed Happy BlogginG!

2013, By: Seo Master

seo Add Horizontal Menu Bar in Blogger 2013

Seo Master present to you:

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 !

2013, By: Seo Master

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.

How 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.

2013, By: Seo Master

seo Add Social Sharing Buttons Widget To Blogger 2013

Seo Master present to you:

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.

Live Demo

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 :)

2013, By: Seo Master

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.

Live Demo

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

<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'/> </b:if>

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'>

<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'/> </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>

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.

2013, By: Seo Master

seo How To Add Facebook Comment Box To Blogger 2013

Seo Master present to you:

Adding Facebook Comment Box To Blogger Blogs is very Old trick,but recently one of our Blog visitors asked for this Comment Box.In this regard here is a Facebook Comment Box,Actually there are many users who don't have Blogger Accounts,therefore they can comment on your blog articles via Facebook Comments Box.Now time to install Facebook Comment Box To Blogger,its installation is very simple,you may have seen many articles in which first you have to create an App in Facebook after that many steps are required,but this article is not as difficult as other articles.

Live Demo

How To Add Facebook Comment Box To Blogger

For installing this widget to Blogger,you just have to copy a code and then add it to Blogger layout Section,follow the below steps.

Go To Blogger.com
Sign in there
And Now Click On Layout
After that Click On Add a Gadget
A Box will Popup Select "HTML/JavaScript"
Now Copy the Below Script and Paste it into the Box

<script>(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
<div class="fb-comments" data-href="http://thatsblogginglab2.blogspot.com/" data-num-posts="10" data-width="500"></div>

Place the Widget/Gadget Below "Blog Posts" Section ( as shown Below )

Changes in the Script Before pasting to HTML/JavaScript Box

Before Pasting Script to HTML/JavaScript Box,must change/replace "http://thatsblogginglab2.blogspot.com/" with your Blog URL/Address,then Just click on save and that's it.

So What's Up:- Did You Like This Comment Box?Is it useful For Blogger Blogs?How was the Tutorial? Share your Awesome ideas with us.Stay Blessed,Happy Blogging.

How To Add Facebook Comment Box To Blogger
Last Reviewed by Iftikhar uddinon June 24 2013
Rating: 5

2013, By: Seo Master

seo Recent Comments Widget With Avatars For Blogger 2013

Seo Master present to you:

Recent Comments Widget with Avatars is another awesome style Comments widget,which shows the latest comments of the visitors along with round Avatars.It also shows a lil bit summary of the commenter. Actually we have posted an article which is Beautiful Recent Comments Widget For Blogger , that widget is also awesome,but the main problem with that widget is that is not showing Avatar or Profile Picture with Comments,However This Widget will show a beautiful Profile Picture or Avatar along with name and Comments.This Widget is usually placed at the footer of the blog,however you can place it in sidebar or any where in your blog.

How To Add Recent Comments Widget With Avatars To Blogger

Go To Blogger Dashboard >> Then Click On layout >> And Then Click On Add a gadget

Now a Box will popup,select HTML/JavaScript

Now Copy the below Code/Script and add it into the HTML/JavaScript Box.

<style type="text/css"> ul.w2b_recent_comments { list-style: none; margin: 0; padding: 0; } .w2b_recent_comments li { background: none !important; margin: 0 0 6px !important; padding: 0 0 6px 0 !important; display: block; clear: both; overflow: hidden; list-style: none; } .w2b_recent_comments li .avatarImage { padding: 3px; background: #fefefe; -webkit-box-shadow: 0 1px 1px #ccc; -moz-box-shadow: 0 1px 1px #ccc; box-shadow: 0 1px 1px #ccc; float: left; margin: 0 6px 0 0; position: relative; overflow: hidden; } .avatarRound { -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; } .w2b_recent_comments li img { padding: 0px; position: relative; overflow: hidden; display: block; } .w2b_recent_comments li span { margin-top: 4px; color: #666; display: block; font-size: 12px; font-style: italic; line-height: 1.4; } </style> <script type="text/javascript"> //<![CDATA[ // Recent Comments Settings var numComments = 6, showAvatar = true, avatarSize = 60, roundAvatar = true, characters = 40, showMorelink = false, moreLinktext = "More »", defaultAvatar = "http://www.gravatar.com/avatar/?d=mm", hideCredits = true; //]]> </script> <script type="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/w2b recent comments with avatars.js"></script> <script type="text/javascript" src="http://Blog-URL.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=6"></script>

Changes in Code Before pasting into HTML/JavaScript Box

#1) Replace/Change Blog-URL with your Own Blog URL (e.g www.matrixar.com)

#2) Replace 6 in the Code with the number of comments you want to show on the widget.

#3) If you are interested in changing the anonymous avatar, then replace "http://www.gravatar.com/avatar/?d=mm" with your own image URL.

#4) If you want to change the Avatar Size,Replace 60 with your own desired value.

#5) Now Copy the edited Code and paste in the HTML/JavaScript Box and that's it.

So What's Up:- Recent Comments Widget With Avatars is really a cute widget,i hope you liked it,must pass your views,and ask any question free.Stay Blessed,Have a nice Day,Happy Blogging.

The Code Credit Goes to @Helplogger and Harish(Way2Blogging)

2013, By: Seo Master

seo How To Remove Attribution Gadget From Blogger 2013

Seo Master present to you:

No one want this shit on his/her blog.Actually this is a gadget which is in the Footer of the template,usually looks like this "Powered By Blogger".If you ever have tried to remove this gadget from a blog,it will say the gadget is locked,means you can,t remove this gadget from Blogger Blogs.So Now if you want to unlock this gadget and want to remove,here is a trick via which we can easily remove this Gadget from any Blog.

How To Remove Attribution Gadget From Blogger

Now let's apply this trick,this trick will unlock the attribution Gadget then you can easily remove from your blog.Follow the below steps for Removing Powered By Blogger from Blogger.

Go To Blogger Dashboard
Now Click On Template and Then Click On Edit HTML

Now Check the small Box "Expand widgets Templates"

Now Search for The Below Code (CTRL+F)

<b:widget id='Attribution1' locked='true' title='' type='Attribution'>

Now Replace/Change the "True" with "False"
Now Just take a preview and hit save Template.

The Attribution Gadget is unlocked now time to remove the gadget,so let's learn how to remove this Gadget from blogger layout .

Steps for Removing Attribution Gadget

Visit Blogger Dashboard
And Click On Layout
Now Search for Attribution Gadget in layout.

Now Click On Edit
Now a Box will popup as shown below >> Click On Remove and that's it

So What's Up:- Do You Like Attribution Gadget on Your Blog? Are you Hell Bore of this Gadget?How Was the Trick?Share your ideas with us,and feel free to ask any Question,we are here to answer you.Stay Blessed,Happy Blogging.

2013, By: Seo Master

seo How To SEO Optimize Blog Titles For Higher Search Results 2013

Seo Master present to you:

image Source

This is what we called Blogger Title Swapping.If you are interested in getting a flood of traffic to your blog,and want to Optimize Blog Titles for Higher Search Results,then you are at the right place.We will show you How To SEO Optimize Your Blog Titles for Higher Search Results.You may have observed that whenever you visit a blog,in browsers title bar you will notice the Blog name(for example ThatsBlogging) and after that you will see the post Title.It will look like the below picture.

But after Swapping it will look like the below picture.

You will think that what is its Bonus Point?The benefit of Applying this trick is that your Blog Title will appear clearly in Google Search results.And according to my experience visitors search for the specific Post not for Blog Title or anything else.So by applying this trick visitors will easily navigate your Blog articles and contents.

How To SEO Optimize Blog Titles For Higher Search Results

Go To Blogger Dashboard.
Then Click on Template
Now Click On Edit HTML
Proceed it >> and Click on expand widgets template ( i.e Check the Small Box)
Now Search for the Below Code

<title><data:blog.pageTitle/></title>

It will look like the below picture

Now Replace the above Code with the below Script

<b:if cond='data:blog.pageType == "item"'> <title><data:blog.pageName/> |<data:blog.title/></title> <b:else/> <title><data:blog.pageTitle/></title> </b:if>

After replacing it will look like the below picture

Now Check for Preview,if it works that's it you are done.

So What's Up:- Applying this trick will surely help you to boost blog traffic,your blog will be at the top of Google Search Results.Now time to apply this trick,so just Open your Blogger Account and do it :)

2013, By: Seo Master

seo Add AdSense Ads To Blogger Header 2013

Seo Master present to you:

You want to Earn more money?You want to increase your AdSense revenue?If yes then you are at the right place.Here we have found an awesome way via which you can add your Google Adsense Ads To Blogger Header.Previously we have shared an article about "How To Add Adsense inside Blogger Posts".But here we have a new way which will help you to boost your AdSense Earning.This trick can be done by adjusting/modifying header of the template to give you the option of adding 2 or more widgets in the header zone.

How To Add AdSense Ads To Blogger Header

Adding Adsense in Blogger Header Above Title is very easy,you just have to edit your blog template and after that you have to change the header widgets option i.e how many widgets you want to display on Header Area.

Go To Blogger.com >> Click On Template >> Edit HTML and Proceed it
Now Search for the below Code/Script(by Pressing CTRL+F)

<div class='region-inner header-inner'>

If you haven't found the above try finding the below Script

<div id='header-wrapper'>

Now when you found any one of the above Codes,immediately below you will find the below Script/Code

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Replace the above Code with the below Code/Script or just change the green values

<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>

Now take a preview and hit save template,that's it.

How To Add Adsense ad unit Above The Blogger Header

Go To Blogger Dashboard
Click On Layout
And Now You will see an option of adding new widget in the header as shown

Now Just add AdSense ad from the Box,and wait for 5 minutes,Adsense Ads will dance on the blog header.

So What's Up:- Adding Google Adsense To Blogger Header is a new way to boost AdSense Revenue.You can place any type of ad unit (that's your choice).I Hope you will must like this trick.If you have any question,feel free to ask.Stay Blessed,Happy Blogging.

2013, By: Seo Master

seo Wikipedia Search Box Widget For Blogger 2013

Seo Master present to you:

image Source

I just get bore of search boxes,you may have seen many search boxes,but recently Blogger has introduce a Beautiful Wikipedia Search Box for Blogs.Actually this Search Box will help the visitors to easily search any related contents or any idea in his/her mind.This search box is actually the Wikipedia Search Box,and as we all know that Wikipedia is an ocean of Knowledge,so One can get alot of knowledge.This search box will help your blog visitors to easily search Wikipedia articles without leaving your blog/website.I will suggest this widget for informative blogs or blog related to knowledge etc .However you can add this widget any where in the blog.

How To Add Wikipedia Search Box Widget To Blogger

Adding Wikipedia Search Box is very easy,you have to add a widget from Blog Layout Section and that's it so let's see how to do this.

Sign in to your blogger account
Now Click On layout
Now Click On Add a Gadget/Widget
A Box will pop up
Now take a look at the right most side
Click On more Gadgets Option
Now You will see many widgets but the Wikipedia Search Box will be at the top ( As Shown below)

Now Just Click on the + Sign and that's it,your widget has successfully added.
Now Take a look on your blog you will see Wikipedia search Box.
Now If you type something for search it will seems as below picture

So What's Up:- Did you Like this Widget?How is its Look on Blog?It will help you visitors to Search Easily?Share your beautiful ideas with us :) Stay Blessed , Happy Blogging.

2013, By: Seo Master

seo Top 5 Killer Tips To increase Blog Traffic 2013

Seo Master present to you:

Is Your blog traffic low?Do You want a flood of traffic to your Blog? Of course Yes,this is the major issue of all bloggers,they want to increase their website/blog traffic,they work hard but still they get only 100-200 page-views daily.Its actually due to some wrong steps,if you are one of that worried bloggers,then don,t worry you are at the right place.Here i will share some killer tips which will surely help you to boost up your blog traffic.Actually there are many method via which you can easily increase your Blog traffic but that traffic is still not sufficient,because hardly you can reach up to 500-100 page views.There are also some paid method i.e you have to pay for getting traffic,but that is not good for your blog/website.Paid traffic can harm your AdSense Earning and website reputation.So here is some killer tips which will surely enhance your Blog Traffic and Rank.

Top 5 Killer Tips To increase Blog Traffic

Increasing traffic is not the game of kids,but we are going to share some killer tips which will helps the newbies to increase their blog traffic along with high Page Rank.

As we all know very well,that social networks such as Twitter,Facebook,Pinterest etc are the most popular and high rank networks.So i will suggest you to never underestimate Social Networking websites.Always be in touch with your friends,followers and fans.You can make pages in Facebook,but remember many People have created some shit pages which is just for wasting time,but you will never do that,make a beautiful professional look page and after creating publish your blog contents there.By doing this i can guarantee that you will get huge traffic to your blog/websites.Next thing which is most common use pinterest for pinning your contents,according to bloggers in 2013 the pinterest is the most sophisticated source of getting unique visitors.Like wise twitter can now help you to boost your traffic i.e tweet your articles/blog contents with your fans and followers.In short Social Networking websites helps the Bloggers to get a huge amount of traffic to their blogs/websites.
Now let's strong the base of your blog/website by building back links.The Question arise is that How to Build Backlinks? So let me explain it.You can get backlinks to your blog/website by many ways,but the most common way every blogger is using is called commenting.Commenting is a process via which we share our ideas, thoughts and experience with other People.Bloggers also do comments on different contents such as blogging niche websites/blogs or any other tech blogs.By doing this you can get backlink by simply adding your blog/website link in comment box(remember never spam on Professional Blogs some time it can harm your website/blog) so be cooperative and social.Pass comments in a beautiful way to impress the admin and at last add your blog link.You can also create back links by writing articles,reviews and other information on directory websites which allow you to post for free.As a result of back-linking your blog will start getting organic traffic from Google and other Search engines and your blog/website page rank will increase quickly.
Another interesting and beautiful way to get traffic to your blog/website is from Forums.Sign up to the forums related to your blog niche.There you will get alot of opportunities to share your views.Users can ask you Questions,and you will have to answer them.So while answering them you can refer them to read your blog article.
Use Simple and Clean Blogger Template,you may have seen many blog which takes too much time to load. Therefore when some one visit that blog,he will never try to look back at that blog due to its loading speed.Actually the world is too much busy,no one wants to lose his/her time.Therefore i humbly request you that if you want traffic don,t install a boring template with many JavaScript widgets.Simplicity its self is beauty,according to this quote always be simple and creative,never add bullshit JavaScript widgets it slow down your blog speed.By doing this i guarantee you will get a flood of traffic to your blog/website.
The last and most important tip is How To Write an Awesome Article to impress your Blog Visitors?So read the below tips for writing an awesome article.

Always write according to your blog Niche.
Never Copy the post,be original,don,t try to be copycat.
Always write 300+ article(Remember the post doesn't depends upon the length but the thing is How You write,Write little but impressive and awesome article).
Always be unique,don,t copy other bloggers style,You are different so challenge the world and become a Pro.
Use images in Article,also do SEO(Search Engine Optimization)for images.

So What's up: All the above tips was in my mind if you have any idea,tips,and advice feel free to share with us :)

2013, By: Seo Master

seo Display Profile Picture in Google Search Results 2013

Seo Master present to you:

Google can now easily display your Profile Picture and Name in Search results next to your Blog Contents.Actually This Picture and name comes from your Google+ Account.This Picture represent true Authorship of Your Contents on Search Results.According to my experience Profile Picture in Google Search Result is naturally attracted to visitors,so a flood of traffic will start to your blog.Now Let's learn how To implement this in Blogger.

How To Display Profile Picture in Google Search Results

Now If you are interested to show your Profile Picture in Google Search Result,here is some steps,follow these and easily get your Profile Picture in Google Search Results.Actually all you need is the below 3 things.

A Blog or Website
A Google+ Account
And an About me page in your Blog.

If You already have did the above 3 steps then follow the below easy steps.

Add the below script/Code on your blog any where i.e at sidebar or footer .

<a href="https://profiles.google.com/HerePasteYourG+ID"rel="author">My Profile</a>

Don,t change the script just change HerePasteYourG+ID with your own Google+ ID.You can get your Google+ Profile ID by visiting your Profile as shown below in the picture.

Now next step is go to your About me page and add the below link any where in about me page.

<a href="https://plus.google.com/YourG+ ID"
rel="me" target="_blank">G+ Profile</a>

Replace YourG+ ID with your G+ ID , however you can also change G+ Profile to any text you want.

Now You have to link your Website/Blog to Contributor Section.
Visit Your Google+ Account>>Edit Profile>>Add your website/blog link to the "Contributor to" List as shown below.

Not the last and most important thing is uploading a Profile Picture to Google+ Account,Actually this Profile picture will comes in any search results.So upload an awesome Photo,Remember if your Picture is 160px by 160px ir will look great.And now just save your Profile.That's it.
Now Time for Checking.Either its working or nope? So for Checking visit the Google Rich Snippet Tool and enter your blog/website URL and hit preview .Now if its working perfect it will show the result as shown below in the Picture.

That's it,if its not working with you read the below Tips.

Some Extra Tips

If You did the Above Steps correctly and Google is still not Showing Your Profile Picture in the Search Results,so try the below steps.

Complete your Author Page i.e About me with all required data and a picture(the Picture should be Google+ Account Profile Picture).
Make sure that you have added correct name similar to your Google+ Account.
The main step is your Google+ Profile should be complete.
And one another thing i personally observed that you must add some circles.

So What's Up:- Displaying Picture in Google Search result makes me more professional and visitors will be surely attracted by your Profile Picture if it is Awesome :D and if you have uploaded Ghost Picture then :D , stay blessed , Happy Blogging .

2013, By: Seo Master

Design by Dev Nasser

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

How To Add Each Blog Post in Separate box

How To Create Sitemap For Blogger

How To Add Divider(line) Between Posts in Blogger

2nd Method For Adding Divider Between Posts in Blogger

How to Add Stylish Sliding Up Image Description Widget To Blogger

How To Add Horizontal Menu Bar in Blogger

How To Add Beautiful Divider(image) Between Each Comment in Blogger

So What's up

How To Add Social Sharing Buttons Widget To Blogger

So What's UP

How To Add Related Posts Widget With Thumbnails To Blogger

So What's Up

How To Add Facebook Comment Box To Blogger

Changes in the Script Before pasting to HTML/JavaScript Box

How To Add Recent Comments Widget With Avatars To Blogger

Changes in Code Before pasting into HTML/JavaScript Box

How To Remove Attribution Gadget From Blogger

Steps for Removing Attribution Gadget

How To SEO Optimize Blog Titles For Higher Search Results

How To Add AdSense Ads To Blogger Header

How To Add Adsense ad unit Above The Blogger Header

How To Add Wikipedia Search Box Widget To Blogger

Top 5 Killer Tips To increase Blog Traffic

How To Display Profile Picture in Google Search Results

Some Extra Tips

Labels

Blog Arşivi