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

Loading...

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 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 Awesome NetOopsblog Subscription Widget for blogger 2013

Seo Master present to you:
NetOopsblog Subscription box Blogger
This post is about how to add a Subscription Box like our NetOops blog. Subscription box contains Facebook, Twitter, RSS Feed, e-mail subscription. This widget is based on a wooden theme. Facebook, Twitter, RSS Feed links are shown as Natural Wooden Sticky Boards. In this tutorial i am adding a new e-mail subscription box with wooden theme.




 
Demo is in the Right of this Blog

What's inside this article??

Subscription box with Fully Wooden Theme

  • Go to Blogger Dashboard
  • Go to Layout 
  • Select Add a Gadget
  • You can type title any
  • And Copy the following code in the content.
Demo of Fully Wooden Theme

 Important: If you don't want Mouse over effect of Images in the Subscription box, please delete the RED highlighted code,. If you want then leave it there.
    <style type="text/css">
     /* Delete form Here*/ 
    img.beintouch:hover {
        background: none repeat scroll 0 0 #D6D6D6;
        border-radius: 16px 16px 16px 16px;
        box-shadow: 0 0 10px #565656;
    }
    /* Delete to Here*/
    .emailtext {
        background: url("http://www.matrixar.com/-j-CXUeGodJI/T0H9qpD6cjI/AAAAAAAAAI8/uuryDfQYWVI/s1600/mailbox.png") no-repeat scroll 4px center transparent;
        border: 1px solid #7E4E27;
        border-radius: 4px 4px 4px 4px;
        box-shadow: 1px 1px 4px #7E4E27 inset;
        color: #444444;
        font-weight: bold;
        margin-left: 2px;
        padding: 7px 15px 7px 35px;
        text-decoration: none;
        width: 176px;
    }
    .ebutton {
        background: -moz-linear-gradient(-45deg, #3C1F0E 0%, #D28A47 30%, #F9E183 30%, #D28A47 55%, #3C1F0E 100%) repeat scroll 0 0 transparent;
        border: 1px solid #D3D3D3;
        border-radius: 4px 4px 4px 4px;
        color: #FFFFFF;
        cursor: pointer;
        font-weight: bold;
        margin-left: -18px;
        margin-top: 5px;
        padding: 6px 15px;
        text-decoration: none;
        text-shadow: 1px 1px 0 #000000;
    }
    </style>
    <table align="center" width="317px" cellspacing="0px" cellpadding="1px"><tbody><tr><td><a target="_blank" rel="nofollow" href="http://www.facebook.com/pages/NetOops-Blog/159796530791611"><img src="http://www.matrixar.com/-qMRqkcoAT0s/Tz06uOJ0WII/AAAAAAAAAHY/gLqbjiBuBfc/s1600/woden+board+facebook_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://twitter.com/netoopsblog/" rel="nofollow"><img src="http://www.matrixar.com/-xHxTM5SAVtI/Tz06umVlBnI/AAAAAAAAAHg/3X1VY6Qx3v0/s1600/woden+board+twitter_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://feeds.feedburner.com/NetOopsBloggerTricks" rel="nofollow"><img src="http://www.matrixar.com/-G76Bnw5v0yc/Tz06tYscrpI/AAAAAAAAAHQ/pSk4w-sEHYA/s1600/woden+board+RSS1_netoops.png" class="beintouch" /></a><a href="http://www.matrixar.com"></a></td></tr></tbody></table>
    <div>Get Latest Tips via e-mail</div>
    <form target="popupwindow" style="margin: 0pt;" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=netoopsbloggertricks', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" method="post" class="emailform" action="http://feedburner.google.com/fb/a/mailverify">
    <input type="hidden" value="NetOopsBloggerTricks" name="uri" />
    <input type="hidden" value="en_US" name="loc" />
    <input type="text" value="Enter your email..." onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" name="email" class="emailtext" />
    <input type="submit" value="Subscribe" title="" class="ebutton" alt="" />
    </form>


    Change the BLUE highlighted code with FACEBOOK PAGE URL, TWTTER, FEED URL, FEED ID respectively.

    Subscription box with Default Basic Wooden theme

    • Go to Layout 
    • Select Add a Gadget
     Important: If you don't want Mouse over effect of Images in the Subscription box, please delete the RED highlighted code,. If you want then leave it there.
    <style type="text/css">
     /* Delete form Here*/ 
    img.beintouch:hover {
        background: none repeat scroll 0 0 #D6D6D6;
        border-radius: 16px 16px 16px 16px;
        box-shadow: 0 0 10px #565656;
    }
    /* Delete to Here*/
    </style>
    <table align="center" width="317px" cellspacing="0px" cellpadding="1px"><tbody><tr><td><a target="_blank" rel="nofollow" href="http://www.facebook.com/pages/NetOops-Blog/159796530791611"><img src="http://www.matrixar.com/-qMRqkcoAT0s/Tz06uOJ0WII/AAAAAAAAAHY/gLqbjiBuBfc/s1600/woden+board+facebook_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://twitter.com/netoopsblog/" rel="nofollow"><img src="http://www.matrixar.com/-xHxTM5SAVtI/Tz06umVlBnI/AAAAAAAAAHg/3X1VY6Qx3v0/s1600/woden+board+twitter_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://feeds.feedburner.com/NetOopsBloggerTricks" rel="nofollow"><img src="http://www.matrixar.com/-G76Bnw5v0yc/Tz06tYscrpI/AAAAAAAAAHQ/pSk4w-sEHYA/s1600/woden+board+RSS1_netoops.png" class="beintouch" /></a><a href="http://www.matrixar.com"></a></td></tr></tbody></table>
    <div>Get Latest Tips via e-mail</div>
    <form target="popupwindow" style="margin: 0pt;" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=netoopsbloggertricks', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" method="post" class="emailform" action="http://feedburner.google.com/fb/a/mailverify">
    <input type="hidden" value="NetOopsBloggerTricks" name="uri" />
    <input type="hidden" value="en_US" name="loc" />
    <input type="text" value="Enter your email..." onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" name="email" class="emailtext" />
    <input type="submit" value="Subscribe" title="" class="ebutton" alt="" />
    </form>


    Change the BLUE highlighted code with FACEBOOK PAGE URL, TWTTER, FEED URL, FEED ID respectively.

    I think this widget helps you, Please share and like...
    2013, By: Seo Master

    seo 15+ Smooth Jquery Scroll to Top widget generator for Blogger v.1 2013

    Seo Master present to you:
    jquery scroll to top widget generator blogger
    Jquery scrolling to top buttons help visitors to jump to top of page with smooth automatic scrolling.So the user/visitor of your blog can go to top of page with a single click.This smooth jquery scrolling makes your blog impressive.
    I created a Blogger widget generator for ease of use.Create your favorite scroll to top Button with a single click.





    To view demo look at right-bottom of this blog or Click on the following link
    View Demo


    I think you liked this generator,Check out our other awesome widget generators here.
    Don't forget to say thanks at least for appreciating us..  Also expect more form us.. thanks..
    2013, By: Seo Master
    Powered by Blogger.
    Design by Dev Nasser