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

Loading...

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

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.

  1. XML Sitemap
  2. 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.
sitemap

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&amp;alt=json-in-script&amp;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
Powered by Blogger.
Design by Dev Nasser