Blogger Buzz

How to Use Cookies in Javascript

<div dir="ltr" style="text-align: left;" trbidi="on">
Each time we visit a website, cookies can be stored to 'remember' things that we do while browsing a page. This may happen, for example, when we visit a page where we have to login with an username and a password. In this case, after verifying that the login is correct, usually a cookie is recorded on our computer. 
 
An example would be the popular page of Google. This search engine allows users to choose how many search results they want to see on each page. Thanks to a cookie, this configuration remains unchanged for each computer, even after rebooting several sessions. Despite this, it is good to remove them from time to time because, although, some will expire being erased automatically after a while, some of them will never do so. 
<div class="ssmainhide" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihZAL5aLTMRZZmEIooUCgG0W8_UXBBcPgUuyowfrjh2VP8MOft0Dye_P51lthk6pJ5fOGg4Hl5Uf3KTqDsl4VlxnhtieQU4J5UucHAgVG1WYCVRgTLk5cLNKrySomaeCxsvQcHxOwl5Mu8/s1600/using-cookies-in-javascript.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="cookies with javascript, blogger tricks" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihZAL5aLTMRZZmEIooUCgG0W8_UXBBcPgUuyowfrjh2VP8MOft0Dye_P51lthk6pJ5fOGg4Hl5Uf3KTqDsl4VlxnhtieQU4J5UucHAgVG1WYCVRgTLk5cLNKrySomaeCxsvQcHxOwl5Mu8/s1600/using-cookies-in-javascript.png" title="How to use cookies in javascript" /></a></div>
 
Like many other things, cookies may suffer a poor use and hence their bad reputation. For instance, some websites can store and study the browsing habits of a user without their knowledge. This is why most browsers already include a system to filter them and can decide if they will provide some privacy or not. 
 
If you want to see a live example of how a cookie works, please visit this page and refresh it a few times. You should get an alert window telling you about how many times you visited the page. 
(script source: <a href="http://javascriptkit.com/script/script2/visitorinfo.shtml" rel="nofollow" style="color: blue;" target="_blank">javascriptkit.com</a>) 
 
There could be other ways to use cookies but a server could do this with JavaScript. Below we have a simple script that can be used as many times we want, even for different purposes. Basically, what the following script does is to create three functions: the first one is to set a cookie, the second one is to read it, and the last one is to erase it. We can apply it in Blogger by accessing the template HTML and add it just before the </head> tag: 
<blockquote class="tr_bq">
<script type='text/javascript'> 
//<![CDATA[ 
 
// Set cookie 
function setCookie(name, value, expires, path, domain, secure) { 
document.cookie = name + "=" + escape(value) + 
((expires == null) ? "" : "; expires=" + expires.toGMTString()) + 
((path == null) ? "" : "; path=" + path) + 
((domain == null) ? "" : "; domain=" + domain) + 
((secure == null) ? "" : "; secure"); 
} 
 
// Read cookie 
function getCookie(name){ 
var cname = name + "="; 
var dc = document.cookie; 
if (dc.length > 0) { 
begin = dc.indexOf(cname); 
if (begin != -1) { 
begin += cname.length; 
end = dc.indexOf(";", begin); 
if (end == -1) end = dc.length; 
return unescape(dc.substring(begin, end)); 
} 
} 
return null; 
} 
 
//delete cookie 
function eraseCookie (name,path,domain) { 
if (getCookie(name)) { 
document.cookie = name + "=" + 
((path == null) ? "" : "; path=" + path) + 
((domain == null) ? "" : "; domain=" + domain) + 
"; expires=Thu, 01-Jan-70 00:00:01 GMT"; 
} 
} 
 
//]]> 
</script></blockquote>
Once done, in order to set a cookie, we only need to put the name and the value in quotes when we call the function. Additionally, we will set the expiry date by getting the current Time (in milliseconds) and add the required number of minutes (in milliseconds): 
<blockquote class="tr_bq">
var expiration = new Date(); 
expiration.setTime(expiration.getTime() + 10000); //Expire after 10 seconds 
setCookie("cookiename","hello",expiration); 
}</blockquote>
The above code sets a cookie called cookiename, with the hello value and set its expiry date to 10 seconds after it has been set (10000 milliseconds = 10 seconds). If we want to restore the value of this cookie, then we should use the second function with the cookie name: 
<blockquote class="tr_bq">
var checkCookie = getCookie("cookiename");</blockquote>
By adding this code below <body>, we created a cookie with the value 'hello' which can be shown on the screen if we want to. The cookie will disappear after 10 seconds: 
<blockquote class="tr_bq">
<script type='text/javascript'> 
var expiration = new Date(); 
expiration.setTime(expiration.getTime() + 10000); 
setCookie("cookiename","hello",expiration); 
var checkCookie = getCookie("cookiename"); 
document.write(checkCookie); 
</script></blockquote>
The erase function is used in the same way as the one for reading just by clicking on the name of the cookie. The setCookie values for 'domain' and 'secure' are not utilized. Use 'domain' on the Javascript cookie if you are using it on a subdomain, where the cookie is set on the widgets subdomain, but you need it to be accessible over the whole yoursite.com domain. 
 
The combination of these three functions will allow us to handle cookies for specific purposes, as we will see in the near future.</div>

how to javascript How to Use Cookies in Javascript

Each time we visit a website, cookies can be stored to 'remember' things that we do while browsing a page. This may happen, for exa...

How to Add CSS code To Blogger using Template Designer

<div dir="ltr" style="text-align: left;" trbidi="on">
If you are having difficulties adding the CSS codes in a Blogger template, here's a short guide that will show you a more practical and fast way to add CSS (Cascading Style Sheets) so that it will be easier for you to customize your blog. 
 
Some readers have complained that when they had to add the CSS codes to install some feature in Blogger, they found it difficult to locate the ]]></b:skin> tag. So, I decided to make this quick tutorial to show you another way of adding the CSS without having to access the Blogger HTML editor. 
<div class="ssmainhide" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAIm6kGrJAYRz__MI_Xziw0iUWZtvUGrdYOgLDIqsKbtv3TXr-mpTqxhanE1ULNa4DL00hqzfAqwnkr_tMCgxBP7pLDlY7ABIf-QbSzbAG4eFFHMoMkILkaL4A5yBw86ouXyVU_TZD5eR-/s1600/blogger-template-designer-add-custom-css.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAIm6kGrJAYRz__MI_Xziw0iUWZtvUGrdYOgLDIqsKbtv3TXr-mpTqxhanE1ULNa4DL00hqzfAqwnkr_tMCgxBP7pLDlY7ABIf-QbSzbAG4eFFHMoMkILkaL4A5yBw86ouXyVU_TZD5eR-/s1600/blogger-template-designer-add-custom-css.png" /></a></div>
 
 
<h3>
Adding CSS via the Blogger Template Designer</h3>
Step 1. Log in to your <a href="http://blogger.com/" rel="nofollow" target="_blank">Blogger account</a> and select the blog that you want to customize. 
 
Step 2. From the Blogger dashboard, choose "Template" and click on the "Customize" button. 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkGolrw7WMCfX3IKzMaV7IfXUlnTCa2dTxQiys-ft5IZYWgv8wkI_aLKo2afh-bWSMmPBO6R1oJR1WZaYNthUIrvx7E_CofzzoqJt_IV8i1nHC7vFxFRA7lP50xhOBNCxaiJ4OJC6dSKHl/s1600/how-to-add-css-using-blogger-dashboard.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinQovj34p5Dr1lyjKrCM5S7cPmnFSU4y0LKEN1-rXFmwVi4_4rP_qY7cmOsc9z9_bAg6oACJ0PqvcI_siAUcvygz8tWu_A4jF0yG_FT_mx-M3yyQ8VpjjS2wvRxrEET4wzYPDBfA61hznb/s1600/BLogger+Customese.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Template Designer" border="0" height="216" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinQovj34p5Dr1lyjKrCM5S7cPmnFSU4y0LKEN1-rXFmwVi4_4rP_qY7cmOsc9z9_bAg6oACJ0PqvcI_siAUcvygz8tWu_A4jF0yG_FT_mx-M3yyQ8VpjjS2wvRxrEET4wzYPDBfA61hznb/s1600/BLogger+Customese.jpg" title="Template Designer" width="320" /></a></div>
 
Step 3. Click on the "Advanced" tab. 
 
Step 4. Now just add your CSS code inside the right field, located in the "Add CSS" tab (if you have more options, you may need to scroll down the list). Here you can add any CSS code when you want to apply a new style to your template. 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht-Am-l0ySOEvAisw73EGYpRIrba3T0XDTnPnnkMEIATnSO2uHtMMVLlA9HiJEtKPAfi6n3l0SmlyAIBY3dhbXwEIbNfRM4j_cxUmqqw-V476kJux8TwCIhszBQndWQQE4a0M0KE7fDSvU/s1600/add-css-styles-using-blogger-template-designer-advanced.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Template Designer" border="0" height="220" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht-Am-l0ySOEvAisw73EGYpRIrba3T0XDTnPnnkMEIATnSO2uHtMMVLlA9HiJEtKPAfi6n3l0SmlyAIBY3dhbXwEIbNfRM4j_cxUmqqw-V476kJux8TwCIhszBQndWQQE4a0M0KE7fDSvU/s1600/add-css-styles-using-blogger-template-designer-advanced.png" title="Template Designer" width="640" /></a></div>
 
Step 5. Once added, click on the "Apply to blog" button to save the changes. 
 
Following this method you can't edit the existing CSS styles already added in your template, which will require to access the template's HTML and make the modifications there. Here you can only add new styles and edit the existing styles added through the Template Designer panel. 
 
It is also important to mention that when adding the CSS styles, it isn't required to put the <style type="text/css"> ... </style> style tags, which normally would go above the </head> tag of the template html. Adding those tags may result in an error. 
 
If you change the template, the CSS added here will be removed. The same goes for any other additions or CSS customizations made ??through the Template HTML editor.</div>

Blog Design css how to How to Add CSS code To Blogger using Template Designer

If you are having difficulties adding the CSS codes in a Blogger template, here's a short guide that will show you a more practical and...

Understanding the Page Elements of a Blogger Layout

<div dir="ltr" style="text-align: left;" trbidi="on">
When following a tutorial to add a gadget/widget or make some customizations in a Blogger blog, some new users may not know the meaning of certain terms, and sometimes, it may be harder to locate them. As for the gadgets, usually it is required to access the blog's layout in order to add or arrange any of the page elements. 
 
For a better understanding, here are some basic explanations about the Page Elements located in the Layout section of a Blogger dashboard. 
 
 
<h3>
What are the Page Elements?</h3>
Page Elements is, basically, the body of our blog. To access the Page Elements, we need to click on the "Layout" option in the <a href="http://blogger.com/" rel="nofollow" target="_blank">Blogger dashboard</a>. 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-44d2y0wdqA6iWiKzSOrHfyOQuPgSSt8a162LVaWGPTdrt7UkTl1u5MMF3IwAqWudRXiyxynBQxQ1a1aC-fO1yw3XCHUIZUV5iN-oHfa1YT0CmpmTXezXMfjxoZp1yxbAzd67knRI1VNm/s1600/blogger-page-elements.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="308" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-44d2y0wdqA6iWiKzSOrHfyOQuPgSSt8a162LVaWGPTdrt7UkTl1u5MMF3IwAqWudRXiyxynBQxQ1a1aC-fO1yw3XCHUIZUV5iN-oHfa1YT0CmpmTXezXMfjxoZp1yxbAzd67knRI1VNm/s1600/blogger-page-elements.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
 
 
<h3>
Understanding the Page Elements sections</h3>
The Blogger Layout is made of "sections and elements". The sections mark certain areas of a page. Every section is represented by the tag <b:section> and has an unique "ID" that names its element which is followed by a "class" tag. Each section has some attributes and through these, we can determine the number of elements allowed in the section and if this section gives the option to add a "page element". 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUxa7c0UHy8nIlRarLA3rFQ5OHIlHzECuCcUo8G_heGKxiS0Bw7r7DSVyFi2m0D8NWb_NTEH8P_U8tJ_QDX3uc76OxqV9Pii72JPdUjIvJCQ-4Dm0PVnk6vNc7NlUto8972fNP3daFGhuV/s1600/layout-page-elements-sections-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="302" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUxa7c0UHy8nIlRarLA3rFQ5OHIlHzECuCcUo8G_heGKxiS0Bw7r7DSVyFi2m0D8NWb_NTEH8P_U8tJ_QDX3uc76OxqV9Pii72JPdUjIvJCQ-4Dm0PVnk6vNc7NlUto8972fNP3daFGhuV/s1600/layout-page-elements-sections-blogger.png" width="640" /></a></div>
 
Let's take a look to an example of the default code related to the header section found in the HTML of a Blogger template: 
<blockquote class="tr_bq">
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'> 
<-- rest of the code --> 
</b:section></blockquote>
Breaking apart the code above: 
<ol>
<li><b:section is the opening tag of the section.</li>
<li>class='header' - describes the existing group inside the "header" element </li>
<li>id='header' - identifies and specifies the header as a single element.</li>
<li>maxwidgets='1' - determines the number of elements allowed in the "header"; here we have the number of gadgets that we can include in the header section. In this example, '1' means that this section allows us to add only a gadget.</li>
<li>showaddelement='no' - the 'no' attribute means that the header will not show the "Add a gadget" link or we won't be able to move any Page Elements. To activate this option so that we can add new Page Elements (Add a gadget), we should change 'no' to 'yes'. By setting the "showaddelement" attribute to 'yes', we'll be able to arrange the elements as we like, just click on the element that you want to move and drag & drop it wherever you want.</li>
</ol>
The spaces reserved for adding elements in the existing sections are called Gadgets (or Widgets). You can easily add various Page Elements by clicking "Add a Gadget" link. This will open a pop-up window for you to pick and choose which elements should be added. Click on the Gadget's title or on the blue plus sign symbol to add it to your blog's layout. 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaLGzWusEf5PT7PiYlWwOW07Qm9D2HUPTuctEwuKp7imKsvBuvibhgEzpmBtXKeQ0TQw4n0zUYCjc47x2Bocm8vTQ3Mr9azHKA7pmBKOO5iDEUgfCALt3ZZI5xf7pXXTp512s0Fu16Qb_f/s1600/add-a-gadget-or-page-element-html-javascript-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="307" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaLGzWusEf5PT7PiYlWwOW07Qm9D2HUPTuctEwuKp7imKsvBuvibhgEzpmBtXKeQ0TQw4n0zUYCjc47x2Bocm8vTQ3Mr9azHKA7pmBKOO5iDEUgfCALt3ZZI5xf7pXXTp512s0Fu16Qb_f/s1600/add-a-gadget-or-page-element-html-javascript-blogger.png" width="640" /></a></div>
 
After you have added a page element, gadgets can be moved up, down or sideways. You can put them wherever you want. Of all the existing gadgets, the most used is the "HTML/JavaScript". Inside this gadget (widget) you can insert any code, as long as it is in the HTML or JavaScript language. 
 
Each time you decide to add a new gadget, click on the "Add a gadget" link in the area where you want to add it. For example, if you want to add a JavaScript code and want it to appear in the sidebar, you should click on the "Add a gadget" in the "sidebar" section, choose the "HTML/JavaScript" option and paste the code in there. 
 
Once you have added new gadgets (widgets), it is recommended to check the changes by clicking on the Preview button before saving anything. So, if something went wrong, you simply click on "Clear" so that everything that was not saved to return to its previous state. If the position of any Page Elements (Gadgets) has been rearranged, you will need to click on the Save arrangement button in order to see the changes.</div>

Blog Design how to Understanding the Page Elements of a Blogger Layout

When following a tutorial to add a gadget/widget or make some customizations in a Blogger blog, some new users may not know the meaning of ...

How to Add Neat CSS3 Dropdown Menu in Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
Here's another simple yet amazing dropdown menu with pure CSS3 made by Andrew from <a href="http://script-tutorials.com/" rel="nofollow" style="color: blue;" target="_blank">script-tutorials.com</a> to which I have made some slight modifications so that it could easily adapt in our Blogger template. 
 
In the upper right corner of this menu we have the contact links and the social media icons for Facebook, Twitter, Google Plus and RSS feed. Below these links, we have the drop-down navigation menu and on the left side, the search form. 
To achieve better user interface and interaction, the CSS dropdown menu features sub categories that appear with a nice touch of CSS3 box-shadow, text-shadow and a cool transition once the parent link is activated by a hover. 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpDa3EEsovfbve28pQt5kgyKk1szfzub5I0WM856RS2ZIle1JqJE5ApXf0QaGY2LZX_ZQuMcMVv88mO8XXjJhmvrF30pRlW6ekciDaJIVxmEhcV1P9MI9AbnRs9y1X_oaOtfkIQ-y3bU65/s1600/create-css3-dropdown-navigation-menu-in-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="dropdown menu" border="0" height="268" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpDa3EEsovfbve28pQt5kgyKk1szfzub5I0WM856RS2ZIle1JqJE5ApXf0QaGY2LZX_ZQuMcMVv88mO8XXjJhmvrF30pRlW6ekciDaJIVxmEhcV1P9MI9AbnRs9y1X_oaOtfkIQ-y3bU65/s1600/create-css3-dropdown-navigation-menu-in-blogger.png" title="add a neat css3 dropdown menu in blogger" width="640" /></a></div>
 
Please visit this demo page to see it in action. 
 
 
<h3>
Adding the CSS dropdown navigation menu in Blogger</h3>
Step 1. Access your <a href="http://blogger.com/" rel="nofollow" style="color: blue;" target="_blank">Blogger Dashboard</a> and go to Template > click on the Edit HTML button 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVYVa22C5i1Kn6zBVvyxEsUczaaacN9xsHDVOfWL9_ch0t3hdwuHu8b6z6KLw3nKN2Gs7GjqI3DRfsSnD_bqMjtimTHp47XB3NbH31UB2D9jsOQKcObRfbYAnVXeYR3rC2v_TWXmVj3fa9/s1600/blogger_blogspot_template_edit_html_tutorial.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2PPi2VMehKn33gUz6arnSMgghenge9AHtEa-6RlusZovbucGXRkBGGnLCGmVEzsepXFEb4QzMiE_jr0phSPU55ywzjNCy28kKbYWZtiCjGiNuQ6OsoQVSD5HH5BSISgVWcEY0fWXRcA5k/s1600/edit+html.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Add Neat CSS3 Dropdown Menu" border="0" height="193" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2PPi2VMehKn33gUz6arnSMgghenge9AHtEa-6RlusZovbucGXRkBGGnLCGmVEzsepXFEb4QzMiE_jr0phSPU55ywzjNCy28kKbYWZtiCjGiNuQ6OsoQVSD5HH5BSISgVWcEY0fWXRcA5k/s1600/edit+html.jpg" title="Add Neat CSS3 Dropdown Menu" width="320" /></a></div>
 
Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the search box. Type the tag below inside the search box and hit Enter to find it. 
<blockquote class="tr_bq">
</header></blockquote>
Step 3. Just below </header> add the HTML structure: 
<blockquote class="tr_bq">
<div id='contact-links'> 
    <div id='my-links'> 
        <a href='#'>About</a> 
        <a href='#'>Contact</a> 
                <a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb4kiLL9Uqu5PPsYDY-Ssh-ldkgw2KSk6e8V_9hk1HiE8ub6-_DIJL1lWm-73VwSu2PEAa933RmmTJA6lGY6iXhDmmeAriA2Ni5EQ2HVKEU-igCb_08YbyeVy0dPHg6SzBV4ZuH6MinYmI/s1600/facebook-icon.png' title='Facebook' width='18px'/></a> 
<a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8uWUO2WjDDT3o_iEijYxyWhxtEFsbqoE_AmArPpMNyU6oncjULWNHMtBinoIsIB9r-IS94jJ2idr64AUIKfd7rwmO2Jj7Zu5mibGwzIQofeqABDmRnaODaK-e3kg4ptjT8FNUU8QuM8bc/s1600/twitter.png' title='Twitter' width='18px' /></a> 
        <a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-VsIPviIXMZndIWk1Cd9WTB40QD9dIRGF08qToOpg2djh53oDbDsjDZrHZqG_paA5iz9QgjDi06qUN6NDTHRmDUu1XMKe2w0rlwAJOnNWWW4FBq7ZG6sNBO9CDhE5U2M9qwO0-mEAFBPp/s1600/google-plus-icon.png' title='Google' width='18px'/></a> 
        <a href='#'><img height='18px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglypV73GFGsn3RrUjB9k2pGW11tCYq_vEpoqkSLXLrxtOL4J8x1s-dLXzBOlMXmdgKf0YT7AeHqhYz99SqPKRSrU0xln4ZcH1bjHUR_1MWlvCtI7MILYNAdzLOBF-oLmSJJ5NALwerueSn/s1600/rss-icon.png' title='RSS Feed' width='18px'/></a> 
    </div> 
 
    <div id='menu-container'> 
        <nav id='neat-menu'> 
            <ul> 
              <li class='active'><a href='/'>Home</a></li> 
                <li><a href='#'>Dropdown</a> 
                    <ul> 
                        <li><a href='#'>Menu element 1</a></li> 
                        <li><a href='#'>Menu element 2</a></li> 
                        <li><a href='#'>Menu element 3</a></li> 
                        <li><a href='#'>Menu element 4</a></li> 
                        <li><a href='#'>Menu element 5</a></li> 
                    </ul> 
                </li> 
                <li><a href='#'>Dropdown</a> 
                    <ul> 
                        <li><a href='#'>Menu element 1</a></li> 
                        <li><a href='#'>Menu element 2</a></li> 
                        <li><a href='#'>Menu element 3</a></li> 
                        <li><a href='#'>Menu element 4</a></li> 
                        <li><a href='#'>Menu element 5</a></li> 
                    </ul> 
                </li> 
                <li><a href='#'>Dropdown</a> 
                    <ul> 
                        <li><a href='#'>Menu element 1</a></li> 
                        <li><a href='#'>Menu element 2</a></li> 
                        <li><a href='#'>Menu element 3</a></li> 
                        <li><a href='#'>Menu element 4</a></li> 
                        <li><a href='#'>Menu element 5</a></li> 
                    </ul> 
                </li> 
                <li><a href='#'>Single Menu</a></li> 
                <li><a href='#'>Single Menu</a></li> 
                <li><a href='#'>Dropdown</a> 
                    <ul> 
                        <li><a href='#'>Menu element 1</a></li> 
                        <li><a href='#'>Menu element 2</a></li> 
                        <li><a href='#'>Menu element 3</a></li> 
                        <li><a href='#'>Menu element 4</a></li> 
                        <li><a href='#'>Menu element 5</a></li> 
                    </ul> 
                </li> 
            </ul> 
        </nav> 
 
         
        <div id='menu-search'> 
          <form method='get' action='/search'> 
                <input autocomplete='off' name='q' placeholder='search...' type='text' value=''/> 
            </form> 
        </div> 
    </div> 
</div></blockquote>
Replace the # symbols with the URLs of your links and replace the texts in blue with the titles that you want to appear. To change the social media icons, add the links of your icons instead of the ones in blue. If you don't know how to upload and get the URL of an image, please read this tutorial. 
 
If you want to remove the sub categories, remove the code within the tags highlighted in yellow, including the ul tags. To remove only a menu element, remove the part that starts with <li> and ends with </li> 
 
Step 4. And now let's add the CSS styling for the menu. Search for the following piece of code: 
<blockquote class="tr_bq">
]]></b:skin></blockquote>
Just above ]]></b:skin> add this code: 
<blockquote class="tr_bq">
#contact-links { 
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); 
    margin: auto; 
    position: relative; 
    width: 100%; 
} 
#contact-links a { 
    color: #4C9FEB; 
} 
#contact-links a:hover { 
    color: #3D85C6; 
} 
#my-links { 
    float: right; 
    font-size: 12px; 
    margin: 4px 10px; 
    overflow: hidden; 
    text-shadow: 0 1px 0 #FFFFFF; 
} 
#my-links a { 
    margin-left: 7px; 
    padding-left: 8px; 
    text-decoration: none; 
} 
#my-links a:first-child { 
    border-width: 0; 
} 
#menu-container { 
    background: -webkit-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent; 
    background: -moz-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent; 
    background: linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent; 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#e9eaea',GradientType=0 ); 
    border-radius: 0 0 4px 4px; 
border:1px solid rgba(0,0,0,0.1); 
    box-shadow: -1px 1px 0 rgba(255, 255, 255, 0.8) inset; 
    clear: both; 
    height: 46px; 
    padding-top: 1px; 
} 
#neat-menu { 
    float: left; 
} 
#neat-menu a { 
    text-decoration: none; 
} 
#neat-menu ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 
#neat-menu > ul > li { 
    float: left; 
    padding-bottom: 12px; 
} 
#neat-menu ul li a { 
    box-shadow: -1px 0 0 rgba(255, 255, 255, 0.8) inset, 1px 0 0 rgba(255, 255, 255, 0.8) inset; 
    border-color: #D1D1D1; 
    border-image: none; 
    border-style: solid; 
    border-width: 0 1px 0 0; 
    color: #333333; 
    display: block; 
    font-size: 14px; 
    height: 25px; 
    line-height: 25px; 
    padding: 11px 15px 10px; 
    text-shadow: 0 1px 0 #FFFFFF; 
} 
#neat-menu ul li a:hover { 
background: -webkit-linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent; 
    background: -moz-linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent; 
    background: linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent; 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#e9eaea',GradientType=0 ); 
} 
#neat-menu > ul > li.active > a { 
    background: -webkit-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent; 
    background: -moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent; 
    background: linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent; 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 ); 
    border-bottom: 1px solid #2D81CC; 
    border-top: 1px solid #4791D6; 
    box-shadow: -1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset; 
    color: #FFFFFF; 
    margin: -1px 0 -1px -1px; 
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); 
} 
#neat-menu > ul > li.active > a:hover { 
    background: -webkit-linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent; 
    background: -moz-linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent; 
    background: linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent; 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499FEE', endColorstr='#3F96E5',GradientType=0 ); 
} 
#neat-menu > ul > li:first-child > a { 
    border-radius: 0 0 0 5px; 
} 
#neat-menu ul ul { 
    background: -webkit-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent; 
    background: -moz-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent; 
    background: linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent; 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F7F7F7', endColorstr='#F4F4F4',GradientType=0 ); 
    border-radius: 5px 5px 5px 5px; 
    border: 1px solid rgba(0, 0, 0, 0.1); 
    box-shadow: 0 1px 0 #FFFFFF inset; 
    height: 0; 
    margin-top: 1px; 
    opacity: 0; 
    overflow: hidden; 
    width: 240px; 
    padding: 0; 
    position: absolute; 
    visibility: hidden; 
    z-index: 1; 
    -webkit-transition: all .5s; 
    -moz-transition: all .5s; 
    -ms-transition: all .5s; 
    -o-transition: all .5s; 
    transition: all .5s; 
} 
#neat-menu ul li:hover ul  { 
    margin-top: 0\2; 
    height: auto; 
    opacity: 1; 
    visibility: visible; 
} 
#neat-menu ul ul a { 
    border-right-width: 0; 
    border-top: 1px solid #D1D1D1; 
    box-shadow: 0 1px 0 #FFFFFF inset; 
    color: #444444; 
    height: 24px; 
    line-height: 24px; 
    padding: 7px 12px; 
    text-shadow: 0 1px 0 #FFFFFF; 
} 
#neat-menu ul ul a:hover { 
background: -webkit-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent; 
    background: -moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent; 
    background: linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent; 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 ); 
    border-top: 1px solid #4791D6; 
    box-shadow: -1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset; 
    color: #FFFFFF; 
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); 
} 
#neat-menu ul ul li:first-child a { 
    border-top-width: 0; 
} 
#menu-search { 
    margin:8px 10px 0 0; 
    float: right; 
} 
#menu-search form { 
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNOo4QAw6xx7xekQGf3wCOel2SJZD5MfoBuSwKZwT2IloB5_aVXajt3xxsM35y3ooKzyNcJJ1lZJoMebM2XvHeXEIgUWU9yzbLaVcL_eV23djV_EcwwG8G3dAE4_bUFqyFc5lRnMbTX-1B/s1600/menu-search.gif") no-repeat scroll 5% 50% transparent; 
    border: 1px solid #CCCCCC; 
    border-radius: 3px 3px 3px 3px; 
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05) inset, 0 1px 0 #FFFFFF; 
    height: 26px; 
    padding: 0 25px; 
    position: relative; 
    width: 130px; 
} 
#menu-search form:hover { 
    background-color: #F9F9F9; 
} 
#menu-search form input { 
    color: #999999; 
    font-size: 13px; 
    height: 26px; 
    text-shadow: 0 1px 0 #FFFFFF; 
    background: none repeat scroll 0 0 transparent; 
    border: medium none; 
    float: left; 
    outline: medium none; 
    padding: 0; 
    width: 100%; 
} 
#menu-search form input.placeholder, #menu-search form input:-moz-placeholder { 
    color: #C4C4C4; 
}</blockquote>
Step 5. Click on the Save template button to save the changes... and you're done! ;) 
 
I hope you like this CSS3 dropdown menu and if you enjoyed this tutorial, please share and subscribe.</div>

menus navigation menu How to Add Neat CSS3 Dropdown Menu in Blogger

Here's another simple yet amazing dropdown menu with pure CSS3 made by Andrew from script-tutorials.com to which I have made some slig...

Share blog posts in social medias using Sharethis

<div dir="ltr" style="text-align: left;" trbidi="on">
In my opinion, AddThis is the most complete social sharing service allowing to share your posts in more than 270 different social networks. I use the AddThis widget, so if you would like to see a live demo, please scroll down to the buttom of this post to see the AddThis sharing buttons. 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7zLFvtsUe1PHwyEcFevyxNMXB2h0sRMkRhEWR3gV5CGlvSbgw5cYSa0voi_BgcbxgvI1kOupaWyY8bOlG5Jkw0nVlmXySDpqnnjDa3SrlK0MssInaTrB1v5EaG6waF_P1_LTcOO11ca_P/s1600/addthis-share-buttons-for-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="201" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7zLFvtsUe1PHwyEcFevyxNMXB2h0sRMkRhEWR3gV5CGlvSbgw5cYSa0voi_BgcbxgvI1kOupaWyY8bOlG5Jkw0nVlmXySDpqnnjDa3SrlK0MssInaTrB1v5EaG6waF_P1_LTcOO11ca_P/s1600/addthis-share-buttons-for-blogger.png" width="320" /></a></div>
 
This tutorial will show you how to register and add this feature on your blog and you will get to know some of the customization options of these buttons. So let's get started! 
 
 
<h3>
Getting the AddThis share buttons code</h3>
Step 1. Visit the <a href="https://www.addthis.com/get/sharing" rel="nofollow" style="color: blue;" target="_blank">https://www.addthis.com/get/sharing</a> page. 
Step 2. To get the sharing buttons and to access the AddThis sharing stats to find out how many people shared your post by using the AddThis feature, click on the "Create account" button. 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC45autfEhuFkdA2edJnCQwUrBaZcNmtbHGb0faJ-pWT2f_4QfpaSBj8PTdlYVLnJJbRTNX0iqxYwYClVsZAap-bUEreVwQi4PVnyM4BKCjPt391iUE1487IIpVDRONBYSsIxJ6FNegidE/s1600/how-to-create-addthis-account.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="create addthis account" border="0" height="228" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC45autfEhuFkdA2edJnCQwUrBaZcNmtbHGb0faJ-pWT2f_4QfpaSBj8PTdlYVLnJJbRTNX0iqxYwYClVsZAap-bUEreVwQi4PVnyM4BKCjPt391iUE1487IIpVDRONBYSsIxJ6FNegidE/s1600/how-to-create-addthis-account.png" title="share blog posts in social medias using Sharethis" width="400" /></a></div>
 
The site will ask you to make a small registration. Fill out the information to register. It's quick, simple and it's free. To finish the registration, click on the Register button. 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsrAxhvJi6-wj32cRu6bQZSeYVD5s9QpYVuxXXOl6P1CforF-GoGFH8e5Eh3N1PW1UDKflnHlaLo61as79A4gTXt2WMbt-CF6tUFzJ-AbTwnk4KDtllOHnicvSr9jMF8NFjMA-pte0rxbT/s1600/register-addthis-for-sharing-buttons.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="register addthis" border="0" height="290" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsrAxhvJi6-wj32cRu6bQZSeYVD5s9QpYVuxXXOl6P1CforF-GoGFH8e5Eh3N1PW1UDKflnHlaLo61as79A4gTXt2WMbt-CF6tUFzJ-AbTwnk4KDtllOHnicvSr9jMF8NFjMA-pte0rxbT/s1600/register-addthis-for-sharing-buttons.png" title="share blog posts in social medias using Sharethis" width="320" /></a></div>
 
Step 3. After you've been logged in, right below the "Get sharing buttons for", choose the "A website" option. 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB5NZzuQHARxpN7LYqPS4tKuAMgAOCxCAHHEZThbrnj6W1afwSWBhXruECL0vyr4H6vXKNlxwThLc2IYCqE0cbP5QtzriCtQGz1VJxLYJcNifQk7JkD5NDLGCyIi0kOFapKXmB6ZLSq9bk/s1600/sharing-buttons-blogger-style-addthis.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="addthis share buttons" border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB5NZzuQHARxpN7LYqPS4tKuAMgAOCxCAHHEZThbrnj6W1afwSWBhXruECL0vyr4H6vXKNlxwThLc2IYCqE0cbP5QtzriCtQGz1VJxLYJcNifQk7JkD5NDLGCyIi0kOFapKXmB6ZLSq9bk/s1600/sharing-buttons-blogger-style-addthis.png" title="Share blog posts in social medias using Sharethis" width="251" /></a></div>
 
Step 4. In the "Select style" section, choose the buttons style that you think would look the best on your site/blog. Please note that on the right side you can see a preview of these buttons. 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisfdwneCS7DUUBT_ANwsbvudbJNc3VQq5A_9EBd5XcBYA7J02hm8plMsS72hj04DVvt912beWCvpZyAE-xv3pVrFnEfEEPPjf-0Q8zevUlph8Xnms2uB1ioKGH2ZA2-N97Z2HO6dM_qm72/s1600/addthis-social-buttons-preview.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="addthis sharing buttons " border="0" height="155" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisfdwneCS7DUUBT_ANwsbvudbJNc3VQq5A_9EBd5XcBYA7J02hm8plMsS72hj04DVvt912beWCvpZyAE-xv3pVrFnEfEEPPjf-0Q8zevUlph8Xnms2uB1ioKGH2ZA2-N97Z2HO6dM_qm72/s1600/addthis-social-buttons-preview.png" title="share blog posts in social medias using Sharethis" width="400" /></a></div>
 
Step 5. After you have chosen the style, the site will provide a code - click on the "Grab it" button to copy it. 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5pEQTiseQ6HZTCRHKiTbF4nfru5aCLVF5uHS7ovyyrvhgko0pWhdBVSuSiTa7ReUu5jc6On3tbm8AfrUpW8DXielHhoWYirHNmeYohP3-YYlMskGWoQiXQ1VNIwYGOj95vBei3SDMwW9f/s1600/grab-it-addthis-social-sharing-buttons-for-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="addthis code" border="0" height="326" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5pEQTiseQ6HZTCRHKiTbF4nfru5aCLVF5uHS7ovyyrvhgko0pWhdBVSuSiTa7ReUu5jc6On3tbm8AfrUpW8DXielHhoWYirHNmeYohP3-YYlMskGWoQiXQ1VNIwYGOj95vBei3SDMwW9f/s1600/grab-it-addthis-social-sharing-buttons-for-blogger.png" title="Share blog posts in social medias using Sharethis" width="400" /></a></div>
 
The code provided will look like this: 
<blockquote class="tr_bq">
 
<div class="addthis_toolbox addthis_default_style "> 
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a> 
<a class="addthis_button_tweet"></a> 
<a class="addthis_button_pinterest_pinit" pi:pinit:layout="horizontal"></a> 
<a class="addthis_counter addthis_pill_style"></a> 
</div> 
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script> 
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-XXXXXXXXXXX"></script> 
</blockquote>
 
Now that you have selected and set up your AddThis sharing buttons, it is recommended to add them in the footer of your posts... 
 
 
<h3>
Adding the AddThis sharing buttons on Blogger</h3>
Step 1. Access your <a href="http://blogger.com/" rel="nofollow" style="color: blue;" target="_blank">Blogger Dashboard</a> and go to Template, then click on the Edit HTML button on the right: 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVYVa22C5i1Kn6zBVvyxEsUczaaacN9xsHDVOfWL9_ch0t3hdwuHu8b6z6KLw3nKN2Gs7GjqI3DRfsSnD_bqMjtimTHp47XB3NbH31UB2D9jsOQKcObRfbYAnVXeYR3rC2v_TWXmVj3fa9/s1600/blogger_blogspot_template_edit_html_tutorial.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2PPi2VMehKn33gUz6arnSMgghenge9AHtEa-6RlusZovbucGXRkBGGnLCGmVEzsepXFEb4QzMiE_jr0phSPU55ywzjNCy28kKbYWZtiCjGiNuQ6OsoQVSD5HH5BSISgVWcEY0fWXRcA5k/s1600/edit+html.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Blogger Template Edit HTML" border="0" height="193" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2PPi2VMehKn33gUz6arnSMgghenge9AHtEa-6RlusZovbucGXRkBGGnLCGmVEzsepXFEb4QzMiE_jr0phSPU55ywzjNCy28kKbYWZtiCjGiNuQ6OsoQVSD5HH5BSISgVWcEY0fWXRcA5k/s1600/edit+html.jpg" title="Share blog posts in social medias using Sharethis" width="320" /></a></div>
 
Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the search box. 
 
Step 3. Type the following line inside the search box and hit Enter to find it: 
<blockquote class="tr_bq">
<div class='post-footer'> </blockquote>
Step 4. Just above this line, add the code for the AddThis social sharing buttons. 
 
Note: If you want to add at the beginning of your posts, add the code below the second <div class='post-header'> 
 
 
<h3>
Adding more buttons</h3>
To add more buttons, simply choose the button for that social network and add the code just above the </div> tag (see step 5 above). 
 
Some examples: 
<blockquote class="tr_bq">
<a class="addthis_button_linkedin"></a> /* linkedin button */ 
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a> /*gplus button */ 
<a class="addthis_button_digg"></a> /* digg button */ 
<a class="addthis_button_stumbleupon"></a> /* stumbleupon button */ 
<a class="addthis_button_print"></a> /* print button */</blockquote>
 
 
<h3>
CSS3 AddThis Share Buttons </h3>
You can add just a single button, so that when the reader hover over it, a menu will open with the options of social networks to share the post. 
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilr4t0U_ncRepo-YGjhBSpsXpajxpwI4cdJVM90Vka6iWfhmIV_JBP6TEhFckZlEvWpebvBHtKC_AHRNj7ObFCk6gj9DNSyEnm2BVYtPHihZ8r3xvZJ6EloyyMeBPY2Mj3eRSgjW1mX5rj/s1600/css3-addthis-share-buttons.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="css3 share buttons, addthis" border="0" height="121" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilr4t0U_ncRepo-YGjhBSpsXpajxpwI4cdJVM90Vka6iWfhmIV_JBP6TEhFckZlEvWpebvBHtKC_AHRNj7ObFCk6gj9DNSyEnm2BVYtPHihZ8r3xvZJ6EloyyMeBPY2Mj3eRSgjW1mX5rj/s1600/css3-addthis-share-buttons.png" title="CSS3 AddThis Share Buttons " width="400" /></a></div>
 
Visit <a href="http://www.addthis.com/pages/gallery-demo-css3-buttons" rel="nofollow" style="color: blue;">this page</a> for a demo. 
 
Step 1. Go to Template > click on the Edit HTML button > press the CTRL + F keys and search for the <div class='post-footer'> line. Just above this line, paste the following code: 
<blockquote class="tr_bq">
<style type='text/css'> 
.addthis_share_btn a, .addthis_share_btn a:visited { 
background: #FF5C00; /* background color of the button */ 
display: inline-block; 
padding: 6px 12px; 
font-family: arial,helvetica,lucida,verdana,sans-serif; 
font-size: 12px; 
line-height: 1em; 
color: #fff; 
text-decoration: none; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); 
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); 
border-radius: 5px; 
box-shadow: 0 1px 3px rgba(0,0,0,0.5); 
text-shadow: 0 -1px 1px rgba(0,0,0,0.25); 
border-bottom: 1px solid rgba(0,0,0,0.25); 
position: relative; 
cursor: pointer; 
} 
.addthis_share_btn a:hover { 
background: #D45500; /* background color on mouse hover */ 
color: #fff; 
} 
.addthis_share_btn a:active { top: 1px; } 
 
.addthis_share_btn a span, .addthis_share_btn:visited a span { 
background: url(http://www.addthis.com/cms-content/images/gallery/icon-addthis.gif) no-repeat left; 
padding: 1px 0 1px 18px; 
} 
</style> 
 
<div class='addthis_toolbox addthis_share_btn'> 
<a class='addthis_button_compact' href='http://addthis.com/bookmark.php'> 
Share</a> 
</div> 
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/> 
</blockquote>
Customization 
 
- To change the color of the button according to the colors of your template, modify the color value in red. 
- If you want to change the "Share" text, replace the text in blue. 
 
Step 2. Save the changes by clicking on the Save template button and you're done! </div>

social media social media plugins Widgets Share blog posts in social medias using Sharethis

In my opinion, AddThis is the most complete social sharing service allowing to share your posts in more than 270 different social networks....