Création des Logiciels de gestion d'Entreprise, Création et référencement des sites web, Réseaux et Maintenance, Conception
seo Beautiful Simple Blogger Email Subscription Box 2013
Seo Master present to you: 
Emails are best source for getting traffic or visitors for blog.And also a well source of creating a good readership. I am sharing a Beautiful Simple Blogger Email Subscription Box which can be added below of every post.This email subscription box is very simple with wooden brick background and hover effect.
See Demo
Step No 2
Instructions:
2013, By: Seo Master
Beautiful Simple Blogger Email Subscription Box
Emails are best source for getting traffic or visitors for blog.And also a well source of creating a good readership. I am sharing a Beautiful Simple Blogger Email Subscription Box which can be added below of every post.This email subscription box is very simple with wooden brick background and hover effect.
See Demo
Beautiful Simple Blogger Email Subscription Widget
Step No 1
- Go to your blogger account.
- Go to Template ==>Edit HTML
- Now Search ]]></b:skin>
- And paste below code above it.
/***** Subscribe widget from http://www.www.matrixar.com start*****/
.subscribe_outer4 { background: url("http://us.cdn3.123rf.com/168nwm/markusgann/markusgann1009/markusgann100900025/7697081-an-image-of-a-beautiful-old-wood-background-seamless-texture.jpg") repeat scroll 0 0 transparent; margin: 0 -10px; padding: 5px 0; }.subscribe_wrapper4 { background: url("http://us.cdn3.123rf.com/168nwm/markusgann/markusgann1009/markusgann100900025/7697081-an-image-of-a-beautiful-old-wood-background-seamless-texture.jpg") repeat scroll 0 0 #333333; padding: 38px 50px 18px 38px; color: #fff; text-shadow: 0px 2px 3px #666;font-size: 16px; font-weight:bold; line-height: 20px; text-align:justify; }#avdhootEmailsub4 { display: block; clear: both; margin: 10px 0; }.emailText4 { background: url("http://i1314.photobucket.com/albums/t576/trickycafe/email_zpsba22e644.png") no-repeat scroll 10px center #fff; padding: 10px 40px; color: #444; margin: 0 0 15px; width: 70%; text-decoration: none; border: 1px solid #D3D3D3; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; border: 0; box-shadow: inset 0 0 3px rgba(0, 0, 0, .05); -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, .05); -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, .05); }.emailButton4 { background: #000000; background: linear-gradient(top, #000000 0%, #0c0c08 100%); background: -moz-linear-gradient(top, #000000 0%, #0c0c08 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #0c0c08)); background: -webkit-linear-gradient(top, #000000 0%, #0c0c08 100%); border: 0; color: #fff; cursor: pointer; padding: 10px 40px; text-shadow: 1px 1px 0 rgba(0, 0, 0, .4); font-weight:bold; width: 100%; font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }.emailButton4:hover { background: #b50b42; background: linear-gradient(top, #b50b42 0%, #cd0c4b 100%); background: -moz-linear-gradient(top, #b50b42 0%, #cd0c4b 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b50b42), color-stop(100%, #cd0c4b)); background: -webkit-linear-gradient(top, #b50b42 0%, #cd0c4b 100%); }
/***** Subscribe widget from http://www.www.matrixar.com end*****/
Step No 2
- Now Go to Layout ==> Add a Html/Java script gadget.
- Then Add the following code.
/***** Subscribe widget from http://www.www.matrixar.com start*****/<div class="subscribe_outer4"><div class="subscribe_wrapper4"><h2><center><font size='5' color='white'>Subscribe Us</font></center></h2><hr width="100%" />
<p><font size='4'>Get New Articles Straight To Your Inbox By Submitting Your Email ID Below</font></p><br/><div id="avdhootEmailsub4"><form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=YOURID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="YOURID" /><input name="loc" type="hidden" value="en_US" /><input class="emailText4" name="email" onblur="if (this.value == "") {this.value = "Enter your email...";}" onfocus="if (this.value == "Enter your email...") {this.value = ""}" type="text" value="Enter your email..." /><br/><br/><input class="emailButton4" border='3' title="F4U ONLINE COURSES" type="submit" value="Subcribe Now" size='50px' /></form></div></div></div>/***** Subscribe widget from http://www.www.matrixar.com end*****/
Instructions:
- If you want to change the color of 'Subscribe Us',kindly change yellow color code
- If you want to change the text written in box change the green color text.
- You can insert your feed burner id in the place of 'YOURID'
- You can insert your desired title in the place of F4U ONLINE COURSES
Note:
If you find any problem related to our topic 'Beautiful Simple Blogger Email Subscription Box' then feel free to comment or contact us.
seo Beautiful Announcement Widget For Blogspot Blogger Blogs 2013
Seo Master present to you: 
F4U release a useful blogger widget with scrolling headline links. When you hover the mouse cursor on the links the scrolling of links stop and pause and you can easily read the headlines. These headlines can be your blog or site updates, announcement or links to your featured posts or something else. You can use it in many ways. I found this script on dynamic drive and then customize these code with some more colors and images and effects to make it completely compatible with blogger blogs or site.
It is several steps ahead of marquee effect because this widget uses some JavaScript to bring the dynamic effect. It is only a one-step installation process.
Please see the widget demo first,
</script>
2013, By: Seo Master
Beautiful Announcement Widget For Blogspot Blogger Blogs
F4U release a useful blogger widget with scrolling headline links. When you hover the mouse cursor on the links the scrolling of links stop and pause and you can easily read the headlines. These headlines can be your blog or site updates, announcement or links to your featured posts or something else. You can use it in many ways. I found this script on dynamic drive and then customize these code with some more colors and images and effects to make it completely compatible with blogger blogs or site.
It is several steps ahead of marquee effect because this widget uses some JavaScript to bring the dynamic effect. It is only a one-step installation process.
Please see the widget demo first,
Add Announcement Widget to your Blog
1. Go To Blogger > Design
2. Choose HTML/JavaScript Widget from Layout
3. Paste the Below code inside it,
/* Announcement Widget by www.matrixar.com start*/src='https://santosh143.googlecode.com/svn/aaa'>
<style type="text/css">
#pscroller2{
background:url(http://www.matrixar.com/-bMBExt07B5o/UZMgyKsRTXI/AAAAAAAAZss/w6W_qz8NFxg/s320/updates1.gif) no-repeat top left;
width: 440px;
height: 20px;
border: 2px solid #ddd;
padding: 3px 3px 3px 40px;
margin:10px 0;
}
#pscroller2 a{
text-decoration: none;
color:black;
}
#pscroller2 a:hover{
text-decoration: underline;
}
.someclass{
}
</style>
<script type="text/javascript">
var pausecontent2=new Array()
pausecontent2[0]='<a href="#">HEADLINE </a>'
pausecontent2[1]='<a href="#">HEADLINE </a>'
pausecontent2[2]='<a href="#">HEADLINE </a>'
pausecontent2[3]='<a href="#">HEADLINE </a>' </script>
</script>
<script type="text/javascript">
//new pausescroller(name_of_message_array, CSS_ID, CSS_classname, pause_in_miliseconds)
new pausescroller(pausecontent2, "pscroller2", "someclass", 1000)
</script>
<script type="text/javascript">
/* Announcement Widget by www.matrixar.com end*/
- If you want to increase the scroller width or height then edit width: 440px; and height:20px;
- Replace HEADLINE with anything you want to write as notice,announcement and updates or anything else. Write text description you want to show.
- Replace # with headline page url. On clicking this link the visitors will be able to see the headline page. If you don't like to link your Headlines then delete # next to each HEADLINE .
Note:
If you find and problem regarding 'Beautiful Announcement Widget For Blogspot Blogger Blogs' then feel free to comment or contact us.
seo Horizontal menu with sub-tabs in two columns for Blogger 2013
Seo Master present to you: This is a very nice horizontal menu in which its sub-tabs are displayed in two columns and is also made with CSS, without any scripts.
The "advantage" so to speak, is that the sub-tabs when arranged in two columns are not very long, so it will be neat and less space along. You can see an example here:
You can add or delete as many of the main tabs as you need, just make sure to copy the entire code for the main tab for each additional tab you want:
STEP 4: The final step is to Save the Template and you are done!
Visit your blog to see a beautiful navigation menu just below header.
If you have any questions or need help, leave a comment below.2013, By: Seo Master
Adding A Horizontal Menu With Sub Tabs in Two Columns To Blogger
STEP 1: In Blogger, go to your "Layout" and on the "Page Elements" section.- Click on the "Add a Gadget" link just under your header image
- From the Gadget's List, select "HTML/JavaScript" option.
<div id='menucol'>Customize your main tabs by changing the Tab Titles to whatever you want. Include a URL for each one if you want it to be 'clickable'. If not, you can just put a # sign where it says http://YOUR URL HERE.com
<div id='topwrapper'>
<ul id='top'>
<li><a href='http://YOUR URL HERE.com'>Tab 1 Title Here</a></li>
<li><a href='http://YOUR URL HERE.com'>Tab 2 Title Here</a></li>
<li><a class='submenucol' href='#'>Tab 3 Title Here</a>
<ul>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.1</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.2</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.3</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.4</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.5</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.6</a></li>
</ul>
</li>
<li><a class='submenucol' href='#'>Tab 4 Title Here</a>
<ul>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.1</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.2</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.3</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.4</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.5</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.6</a></li>
</ul>
</li>
<li><a class='submenucol' href='#'>Tab 5 Title Here</a>
<ul>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.1</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.2</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.3</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.4</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.5</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.6</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.7</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.8</a></li>
</ul>
</li>
<li><a href='http://YOUR URL HERE.com'>Tab 6 Title Here</a></li>
</ul>
<br class='clearit'/>
</div>
</div>
You can add or delete as many of the main tabs as you need, just make sure to copy the entire code for the main tab for each additional tab you want:
<li><a href='http://YOUR URL HERE.com'>Tab 7 Title Here</a>STEP 3: Now let's go a step further and add the CSS style in our Template
<ul>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 7.1</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 7.2</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 7.3</a></li>
</ul>
</li>
- Go to Template > Edit HTML
- Click on the sideways arrow next to <b:skin>...</b:skin>
- Then click anywhere inside the code area and search - using CTRL + F keys - for the ]]></b:skin> tag and just above ]]></b:skin> add this code:
/* Horizontal menu with 2 columns
----------------------------------------------- */
#menucol {
width:940px;
height:37px;
background-image: -moz-linear-gradient(top, #666666, #000000);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #666666), color-stop(1.0, #000000));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#666666,endColorStr=#000000);
border-bottom:1px solid #666666;
border-top:1px solid #666666;
margin:0 auto;padding:0 auto;
overflow:hidden;
}
#topwrapper {
width:940px;
height:40px;
margin:0 auto;
padding:0 auto;
}
.clearit {
clear: both;
height: 0;
line-height: 0.0;
font-size: 0;
}
#top {
width:100%;
}
#top, #top ul {
padding: 0;
margin: 0;
list-style: none;
}
#top a {
border-right:1px solid #333333;
text-align:left;
display: block;
text-decoration: none;
padding:10px 12px 11px;
font:bold 14px Arial;
text-transform:none;
color:#eee;
}
#top a:hover {
background:#000000;
color:#F6F6F6;
}
#top a.submenucol {
background-image: url(http://www.matrixar.com/-TkveEnZCoIw/Uat7PEv8kBI/AAAAAAAADsY/iqVPPTJzvUs/s1600/arrow_white.gif);
background-repeat: no-repeat;
padding: 10px 24px 11px 12px;
background-position: right center;
}
#top li {
float: left;
position: relative;
}
#top li {
position: static !important;
width: auto;
}
#top li ul, #top ul li {
width:300px;
}
#top ul li a {
text-align:left;
padding: 6px 15px;
font-size:13px;
font-weight:normal;
text-transform:none;
font-family:Arial, sans-serif;
border:none;
}
#top li ul {
z-index:100;
position: absolute;
display: none;
background-color:#F1F1F1;
margin-left:-80px;
padding:10px 0;
border-radius: 0px 0px 6px 6px;
box-shadow:0 2px 2px rgba(0,0,0,0.6);
filter:alpha(opacity=87);
opacity:.87;
}
#top li ul li {
width:150px;
float:left;
margin:0;
padding:0;
}
#top li:hover ul, #top li.hvr ul {
display: block;
}
#top li:hover ul a, #top li.hvr ul a {
color:#333;
background-color:transparent;
text-decoration:none;
}
#top ul a:hover {
text-decoration:underline!important;
color:#444444 !important;
}
- Now find (CTRL + F) this line:
/* Tabs
- It will also have some little lines beneath:
/* Tabs
----------------------------------------------- */
- And just below these little lines, delete the code below until you reach at:
/* Columns
----------------------------------------------- */
- Instead of the code that you have removed, add this one:
#crosscol ul {z-index: 200; padding:0 !important;}
#crosscol li:hover {position:relative;}
#crosscol ul li {padding:0 !important;}
.tabs-outer {z-index:1;}
.tabs-inner {padding: 0 0px;}
See this screenshot for more info:
Visit your blog to see a beautiful navigation menu just below header.
If you have any questions or need help, leave a comment below.2013, By: Seo Master
seo How to add “Email Subscription Form” to Blogger Blogspot 2013
Seo Master present to you: 
When you are providing useful information in your blog, then many times some readers will need to get the latest updates from your blog. For that purpose, you need an Email Subscription Form in your blog, so that the interested visitors can easily get the latest updates.
To add email or Feed Subscription Form to your blogger blog (blogspot) is very easy.
Just follow the next steps:
1. Log in to Blogger, then go to Layout > click on "Add a Gadget" link:
2. From the pop-up window, scroll down and click on the "HTML/JavaScript" gadget:
3. Paste the following code inside the empty box:
Settings
4. Now Save your widget and check your blog. Enjoy!
2013, By: Seo Master
To add email or Feed Subscription Form to your blogger blog (blogspot) is very easy.
Just follow the next steps:
1. Log in to Blogger, then go to Layout > click on "Add a Gadget" link:
2. From the pop-up window, scroll down and click on the "HTML/JavaScript" gadget:
3. Paste the following code inside the empty box:
<style>
.hl-email{
background:url(http://www.matrixar.com/-u3UaeUufpmI/T8lFuelsg8I/AAAAAAAACQY/tOWbHsgTYKc/s1600/mail.png) no-repeat 0px 12px ;
width:300px;
padding:10px 0 0 55px;
float:left;
font-size:1.4em;
font-weight:bold;
margin:0 0 10px 0;
color:#686B6C;
}
.hl-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:3px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:12px sans-serif;
}
.hl-emailsubmit:hover{
background:#E98313;
}
.textarea{
padding:2px;
margin:6px 2px 6px 2px;
background:#f9f9f9;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;
width:130px;
color:#666;}
</style>
<div class="hl-email">
Subscribe via Email <form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=helplogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == "") {this.value = "Enter email address here";}" onfocus="if (this.value == "Enter email address here") {this.value = "";}" value="Enter email address here" type="text" />
<input type="hidden" value="helplogger" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="hl-emailsubmit" value="Submit" type="submit" />
</form>
</div>
Settings
- Replace the url address in green to change the email icon
- Increase/Decrease the 130 width value for a wider text area
- Replace http://feedburner.google.com/fb/a/mailverify?uri=helplogger with your Feedburner Email Feed link. You can get it by visiting your feedburner account then navigate to Publicize and then to Email Subscriptions.
- Replace helplogger with your feed title. It appears at the end of your feed link. In my case it is http://feedburner.google.com/fb/a/mailverify?uri=helplogger
4. Now Save your widget and check your blog. Enjoy!
2013, By: Seo Master