Blogger templates

Label 1

Blogroll

segt

● Wednesday, 17 April 2013



askiuvfuiwe vb

weirg ie

w oerihdfh
trujd jt rjkxj
Read more »

0 comments
Labels:

wsdefrghjk

●


askiuvfuiwe vb

weirg ie

w oerihdfh
trujd jt rjkxj
Read more »

0 comments
Labels:

Fancy CSS3 & jQuery Lavalamp Menu For Blogger

● Tuesday, 7 August 2012




I have shared two jQuery menus on HelperBlogger so far,first one was Smooth jQuery Drop Down Menu Version 1 and second one was Version 2.This time I am sharing an amazing CSS3 & jQuery lavalamp menu and as mentioned in title it works with CSS3 and jQuery.You can use this menu in 6 colors by just changing a word in the HTML code.This menu is designed by Insidesigns and I have bloggerized it to works perfectly with any blogger blog.Now lets go to the tutorial and see how to add this menu to blogger blog.


Live Menu Demo


How To Add This Menu TO Blogger?

For easy understanding I am dividing the tutorial in three parts & they are as below,
  1. Adding Scripts
  2. Adding  Styles
  3. Adding The Menu

1. Adding Scripts

  1. Go to Blogger Dashboard > Template
  2. Click on Edit HTML
  3. Hit Proceed
  4. Find below code in your template

</head>

add below code just above it,(If you have already added a jQuery library to your blog then delete the highlighted code)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://code.helperblogger.com/lavalamp-menu.js" type="text/javascript"></script>

2. Adding Styles


Now find below code,

]]></b:skin>


add below CSS code immediately before it,

/*LAVALAMP MENU BY http://www.helperblogger.com/ START*/

.lavalamp {
    position: relative;
    border: 1px solid #d6d6d6;
    background: #fff;
    padding: 15px;
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
 -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
    border-radius : 10px;
    -moz-border-radius : 10px;
    -webkit-border-radius : 10px;
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
    background : -moz-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
 height: 18px;
        font-family: calibri;
}

.magenta {
 background : rgb(190,64,120);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
 border: 1px solid #841144;
 
}

.cyan {
 background : rgb(64,181,197);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
 border: 1px solid #2f8893;
 
}

.yellow {
 background : rgb(255,199,79);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
 border: 1px solid #c08c1f;
 
}

.orange {
 background : rgb(255,133,64);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
 border: 1px solid #c04f11;
 
}

.dark {
 background : rgb(89,89,89);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
 border: 1px solid #272727;
 
}

.magenta li a , .cyan li a, .yellow li a , .orange li a, .dark li a{
 color: #fff;
 text-shadow: 0 -1px 0 rgba(0,0,0,.40);
 
}

.lavalamp a {
    text-decoration: none;
    color: #262626;
    line-height: 20px;
}

.lavalamp ul {
    margin: 0;
    padding: 0;
    z-index: 300;
    position: absolute;
}

.lavalamp ul li {
    list-style: none;
    float:left;

    text-align: center;
    }

.lavalamp ul li a {
    padding: 0 20px;
    text-align: center;
    }

.floatr {
    position: absolute;
    top: 10px;
    z-index: 50;
    width: 70px;
    height: 30px;
    border-radius : 8px;
    -moz-border-radius : 8px;
    -webkit-border-radius : 8px;
    background : rgba(0,0,0,.20);
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
}

/*LAVALAMP MENU BY http://www.helperblogger.com/ END*/


Now save your template.

3. Adding The Menu


Now come to Page Layout

  • Now come to Page Layout
  • Click on Add a Gadget (Below Header)
  • Choose HTML/JavaScript
  • Copy and paste below code inside it,

<div class="lavalamp dark">
 <ul>
  <li class="active"><a href="">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">Contacts</a></li>
  <li><a href="#">Back to Article</a></li>
  <li><<a href="#">How it Works?</a></li>
 </ul>
 <div class="floatr"></div>
</div>

  • Replace # with the links
  • Replace Home,About,Blog. etc. with your link text which you want to appear on the menu.
  • If you want to change background color of the menu then replace <div class="lavalamp dark"> with one of the code below.


<div class="lavalamp">
<div class="lavalamp magenta">
<div class="lavalamp cyan">
<div class="lavalamp yellow">
<div class="lavalamp orange">
<div class="lavalamp dark">

Finally save your widget and you are done.

I have tried my best to keep this tutorial as easy as possible,if still you are getting any single problem then feel free to share it below via comments,I will try to give reply as soon as time allows.

Peace and Blessings Buddies :)
Read more »

0 comments
Labels: , ,

Customized Nivo Slider For Blogger

● Saturday, 4 August 2012


Nivo slider is one of best slider available on the web.I have shared two versions of nivo slider on helperblogger so far,default theme of nivo slider and nivo slider with ribbon but today I am sharing a customized version of the nivo slider.In this customized version the caption and bullets are customized to make them more beautiful also as always I have kept the installation as easy as possible you have to copy and paste the code.Now lets see how to add it to blogger blog.


Live Slider Demo

How To Add This Slider To Blogger?


  1. Select the images which you want add in slider
  2. Resize them to same size
  3. Upload it and get the URL.
  4. Now go to Blogger Dashboard > Layout
  5. Click on Add a Gadget (below header)
  6. Select HTML/JavaScript
  7. Paste below code inside it,

<style>
#slider {
  position:absolute !important;
  top:50%;
  left:50%;
  width:650px;
  height:350px;
  margin-top:-175px;
  margin-left:-325px;
  -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.5), 0px 0px 20px rgba(0,0,0,.2);
  -moz-box-shadow: 0px 0px 5px rgba(0,0,0,.5), 0px 0px 20px rgba(0,0,0,.2);
  box-shadow: 0px 0px 5px rgba(0,0,0,.5), 0px 0px 20px rgba(0,0,0,.2);
 }

 .nivoSlider img {
  position:absolute;
  top:0;
  left:0;
  display:none;
 }

 .nivoSlider a {
  border:0;
  display:block;
 }

 .nivo-slice {
  display:block;
  position:absolute;
  z-index:5;
  height:100%;
 }

 .nivo-box {
  display:block;
  position:absolute;
  z-index:5;
 }

 .nivo-caption {
  position:absolute;
  left:75px;
  bottom:29px;
  width:498px;
  padding-top:13px;
  padding-bottom:13px;
  z-index:8;
  border:1px solid #000;
  border-left-color:rgba(0,0,0,.5);
  border-right-color:rgba(0,0,0,.5);
  -webkit-box-shadow: inset 0px 1px 0px rgba(255,255,255,.15), 0px 1px 3px rgba(0,0,0,.7);
  -moz-box-shadow: inset 0px 1px 0px rgba(255,255,255,.15), 0px 1px 3px rgba(0,0,0,.7);
  box-shadow: inset 0px 1px 0px rgba(255,255,255,.15), 0px 1px 3px rgba(0,0,0,.7);
  background: -webkit-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
  background: -moz-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
  background: -o-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
  background: -ms-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
  background: linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e648494c', endColorstr='#e6262728',GradientType=0 );
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
 }

 .nivo-caption p {
  margin:0;
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size:14px;
  font-weight:bold;
  color:#fff;
  text-align:center;
  text-shadow:0px -1px 0px #000;
 }

 .nivo-caption a {
  display:inline !important;
  }

 .nivo-html-caption {
  display:none;
 }

 .nivo-directionNav a {
  position:absolute;
  bottom:30px;
  z-index:9;
  cursor:pointer;
  text-indent:-9999px;
  width:45px;
  height:39px;
  background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLA9n2hX631M6aV6Vc1LFJC-GXvl3mw0cKEuIV7w_3cNR4jGTe41KAZ4NF-pBFbvyo1Wl9wIR8q6eWPvhUPxRNNAa3Gnvq3Ladx6Jgn8cqgmcjjvswFe-Zx8pHqWA6G8X_1t8SI5-Xks0/s1600/helperblogger.com-arrows.png);
  background-repeat:no-repeat;
}

 .nivo-prevNav {
  left:75px;
  background-position:0 0;
  box-shadow: 1px 0px 0px rgba(255,255,255,.2), 2px 0px 0px rgba(0,0,0,.4);
 }

 .nivo-nextNav {
  right:77px;
  background-position:-45px 0px;
  box-shadow: -1px 0px 0px rgba(255,255,255,.2), -2px 0px 0px rgba(0,0,0,.4);
 }

</style>  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://www.code.helperblogger.com/jquery.nivo.slider.js"></script>
<script type="text/javascript">
    $(window).load(function () {
        $('.nivoSlider').nivoSlider({
            effect: 'sliceDown',
            directionNavHide: false,
            captionOpacity: 1,
            controlNav: false
        });
    });
</script>

<div id="slider" class="nivoSlider">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy2Cj9n0PpB8F00FnzxsJodufwfLBe2Z1QDLRHpoPcxYXlL0JwisHSChyphenhyphenbJU5vKHRLDxcMF4ywCpquy04iXc7kGRuNdbXRkCU7de5SE14TwM4iavXrruLiu4GewhG4hUPfTDiChSYqjlc/s1600/helperblogger.com-5.png"
    alt="Slider Image 1" title="This Is An Example Of A Caption">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQB5LNTvPwNnNQyKVUwYyd5-113g1OxkPg7FRj7JFLmyTYZZ9Sc2GoJTEnDHKm4XXMf9b-H11xVCUq1GFFafudxDaP2JQ-9Ni1i0IQR849wf_hKAkNna4OXePBxX-_kxo8OWHbl-3WMaA/s1600/helperblogger.com-4.png"
    alt="Slider Image 2" title="You Can Add  Anything Here">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXWZr2j6lMwzAT614OPvDkfz5ONqmTR7j9I97jtk0Pu6lrLhXSTrt0UpWIrs0cqnmSlposikqW8bufzruCYEHbk3okGtYT7Vt0cfWhIRDWxoX7zyGxwaQ8CcADKwFpzSvHNtXXwMKR0yk/s1600/helperblogger.com-3.png"
    alt="Slider Image 2" title="Like Image Description">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHZhExvVZfdh22gAir_HzXqSHwzWyuZ3l59Trbe87Ejb2XMBZzaWyMvLKMQu2z48JdCv2J0fVE-JcPRzhy9qja6hxq9eizqqMl-eZSBz_e2xUV_-zbeA2aOzqwxbVmrp3EptCEmGK9tvw/s1600/helperblogger.com-2.png"
    alt="Slider Image 2" title="Image Info">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiskhqnLPhSyquhLgW02UmdrhCPCQ-MSXngNcdG2iLXxdHx2pEHDEO7Tj7_CG_WiTJW5zVBnUeaaECKti13v6Y4xOzao4AohOLU3f8geEHl_CKNFro6YQr9AOflCpSiD87qIoqGc0gL7Nw/s1600/helperblogger.com-1.png"
    alt="Slider Image 2" title="And Other Things">
</div>


     - Slider Width And Height

Adjust the width and height of slider as per your images width and height


     - Image URL

Replace all highlighted image URL's with your own images URL.

     - Image Caption

Here you can add your image caption

     - jQuery Library

If you have already added a jQuery library to your blog then remove the highlighted color.

Finally save your widget and you are done.

I have kept the installation 1 step and as easy as possible.If still you are getting a single problem then feel to ask it to me.I will try to give reply as soon as time allows.The credits for customizations goes to webdesign.tutsplus and helperblogger.
Read more »

0 comments
Labels: ,

Social Bookmarking Widget With Tooltips For Blogger

● Monday, 23 July 2012


Social bookmarking widget is need of every blogger thats why you see such gadgets almost on every blog.Social bookmarking widgets helps you to boost traffic on your blog.Today I am sharing an amazing social bookmarking widget which comes with beautiful animated tooltips,when any user hovers on the social icons the tooltip comes out also it applies a opacity effect to these social icons,this effect increase beauty of this widget.Credit for this widget goes to Shareaholic.Now lets see hoe to add it to your blog,also see the demo at the bottom of this post.

How To Add This Widget To Blogger?

I have created a blogger widget generator form for this widget.Follow below simple steps to add this widget to your blog.

  1. You must login to your blogger account first.
  2. Click on below Add to Blogger button
  3. Now you will redirect to blogger add widget page
  4. Choose your blog and add click on Add Widget button
  5. Drag the widget at the bottom of your page layout
  6. Finally click on Save Arrangements button and you are done.




Note - This widget will appear on post pages only,if you want to show this widget at the bottom of every post on your homepage then remove first line (<b:if cond='data:blog.pageType == "item"'>) and last line(</b:if> from the code.




Read more »

0 comments
Labels: , ,

How To Host Files Using Googlecode And Subversion?

● Wednesday, 11 July 2012


Googlecode is a free platform to host your Open Source Projects and Files.There are many websites in the world of internet which allows you to host your HTML files or pages for free,but you must choose googlecode subversion over them because googlecode provides you unlimited storage(4069 MB,it is too large for your HTML,CSS,JS and other files) and unlimited bandwidth,it is the biggest problem of other sites,when you exceeds their bandwidth,you will get their message in place of your file or page,it is so irritating and annoying thing for our readers.If you want to know more about Google Code then read this page.Now without waiting  anymore let's go to the tutorial.

How To Host Files Using GC. And Subversion?

For easy understandings I am dividing this tutorial in three parts and they are as below,

  1. Creating a new project at googlecode
  2. Downloading and Configuring the SVN client
  3. Uploading files using your SVN client.

Part 1 : Creating A New Project At Googlecode


Before starting you must login to your googlecode account,if you have not created till then go to code.google.com and register/login with your google account.After login follow below steps to create a new project.

  • Go to Googlecode Project Hosting and click on Create a new project,Now you will redirect to the create new project page.
  • Fill the below fields like I have filled un below image and make sure that you have selected "Subversion" as Version Control system.


  • Once you click on Create Project button you will redirect to the another page.Now click on Source tab.


  • On this page you will find a URL like below,copy that URL and paste it into your notepad.

https://helperforblogger.googlecode.com/svn/trunk/ helperforblogger

Click On Image To Enlarge

  • Now click on googlecode.com password link,copy your password and paste it into notepad.

Now you have done all the steps which are necessary to upload files to googlecode.Now lets see how to upload files to googlecode using subversion

Part 2 : Downloading And Configuring SVN Client


We will upload files using Subversion client.We will use TortoiseSVN as our subversion client.Folloe below simple steps to upload files using subversion client.


  • Go to TortoiseSVN
  • Download by selecting your system type (32bit or 64bit)
  • Install it
  • Now open your main screen (desktop) 
  • Right Click and navigate to Tortoise SVN > Settings


  • Click On Edit Button


  • Now a text document file will open which holds all the records for the mime-type of the files to be uploaded.At the end of the text document hit enter,copy and paste the below code and save it.



[miscellany]
enable-auto-props = yes

[auto-props]
# Scriptish formats
*.bat        = svn:eol-style=native; svn:keywords=Id; svn-mine-type=text/plain
*.bsh        = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/x-beanshell
*.cgi        = svn:eol-style=native; svn:keywords=Id; svn-mine-type=text/plain
*.cmd        = svn:eol-style=native; svn:keywords=Id; svn-mine-type=text/plain
*.js         = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/javascript
*.php        = svn:eol-style=native; svn:keywords=Id Rev Date; svn:mime-type=text/x-php
*.pl         = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/x-perl; svn:executable
*.pm         = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/x-perl
*.py         = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/x-python; svn:executable
*.sh         = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/x-sh; svn:executable

# Image formats
*.bmp        = svn:mime-type=image/bmp
*.gif        = svn:mime-type=image/gif
*.ico        = svn:mime-type=image/ico
*.jpeg       = svn:mime-type=image/jpeg
*.jpg        = svn:mime-type=image/jpeg
*.png        = svn:mime-type=image/png
*.tif        = svn:mime-type=image/tiff
*.tiff       = svn:mime-type=image/tiff

# Data formats
*.pdf        = svn:mime-type=application/pdf
*.avi        = svn:mime-type=video/avi
*.doc        = svn:mime-type=application/msword
*.eps        = svn:mime-type=application/postscript
*.gz         = svn:mime-type=application/gzip
*.mov        = svn:mime-type=video/quicktime
*.mp3        = svn:mime-type=audio/mpeg
*.ppt        = svn:mime-type=application/vnd.ms-powerpoint
*.ps         = svn:mime-type=application/postscript
*.psd        = svn:mime-type=application/photoshop
*.rtf        = svn:mime-type=text/rtf
*.swf        = svn:mime-type=application/x-shockwave-flash
*.tgz        = svn:mime-type=application/gzip
*.wav        = svn:mime-type=audio/wav
*.xls        = svn:mime-type=application/vnd.ms-excel
*.zip        = svn:mime-type=application/zip

# Text formats
.htaccess    = svn:mime-type=text/plain
*.css        = svn:mime-type=text/css
*.dtd        = svn:mime-type=text/xml
*.html       = svn:mime-type=text/html
*.ini        = svn:mime-type=text/plain
*.sql        = svn:mime-type=text/x-sql
*.txt        = svn:mime-type=text/plain
*.xhtml      = svn:mime-type=text/xhtml+xml
*.xml        = svn:mime-type=text/xml
*.xsd        = svn:mime-type=text/xml
*.xsl        = svn:mime-type=text/xml
*.xslt       = svn:mime-type=text/xml
*.xul        = svn:mime-type=text/xul
*.yml        = svn:mime-type=text/plain
CHANGES      = svn:mime-type=text/plain
COPYING      = svn:mime-type=text/plain
INSTALL      = svn:mime-type=text/plain
Makefile*    = svn:mime-type=text/plain
README       = svn:mime-type=text/plain
TODO         = svn:mime-type=text/plain

# Code formats
*.c          = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain
*.cpp        = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain
*.h          = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain
*.java       = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain
*.as         = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain
*.mxml       = svn:eol-style=native; svn:keywords=Id; svn:mime-type=text/plain

Now we have successfully configured TortoiseSVN,now lets see hoe to upload the files using this client.

Part 3 :Uploading The Files Using SVN Client

Open the folder containing your files.Right click anywhere in folder and navigate to TortoiseSVN > Repo-browser.


  • A small window will open.Here you have to put the URL which we have noted down in first part,Enter the URL and hit Ok button.

  • Now it will ask you to enter username and password.Enter your google email as your username and enter the password which we have noted down in first part.Finally click Ok button.
  • Now a window will open.Just drag the files into that window and wait until the file names includes in that window.
  • When your file uploaded click on the file name and note down the the URL of your file.


  • In file URL just remove s from https:// and make it http://
  • Open the link using Browser.

All Done ! That is all about hosting files to Googlecode using Subversion,I hope this tutorial helped you.By using this method you can host your css,js,html and other files for your blogger blog.Also if you are facing any little problem then feel free to share it with me :)

Peace And Blessings Buddies :)
Read more »

0 comments
Labels:

Beautiful CSS3 Buttons For Blogger

● Tuesday, 10 July 2012


After sharing bon bon buttons for blogger this time we are sharing another cool CSS3 buttons set.This button set contains buttons of 6 different colors (pink,green,blue,red,orange and yellow) and 2 sizes (large and medium).It is designed by papermashup and I have reshared it on helperblogger for my readers.You can add these buttons in 2 steps into your blog,also the usage of the buttons are damn easy.Now lets go to the the tutorial and see how to add them and use them.

Live Buttons Demo ↓



How To Add These Buttons To Blogger?

First we will add CSS code and then we will see the HTML part i.e. how to use them.

  1. Go to Blogger Dashboard > Template
  2. Click on Edit HTML
  3. Hit Proceed button
  4. Find below code in your template

]]></b:skin>


add below code just above it,

.button, .button:visited {
 background: #222 url(http://helperblogger.googlecode.com/svn/overlay.png) repeat-x;
 display: inline-block;
 padding: 5px 10px 6px;
 color: #fff;
 text-decoration: none;
 -moz-border-radius: 6px;
 -webkit-border-radius: 6px;
 -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
 -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
 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;
 font-family: calibri;
}

.button:hover {
 background-color: #111;
 color: #fff;
}

.button:active {
 top: 1px;
}

.small.button, .small.button:visited {
 font-size: 11px
}

.button, .button:visited,
.medium.button, .medium.button:visited {
 font-size: 13px;
 font-weight: bold;
 line-height: 1;
 text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
}

.medium.button, .medium.button:visited {
 font-size: 14px;
 padding: 8px 14px 9px;
}

.large.button, .large.button:visited {
 font-size: 34px;
 padding: 8px 14px 9px;
}

.pink.button, .magenta.button:visited {
 background-color: #e22092;
}

.pink.button:hover {
 background-color: #c81e82;
}

.green.button, .green.button:visited {
 background-color: #91bd09;
}

.green.button:hover {
 background-color: #749a02;
}

.red.button, .red.button:visited {
 background-color: #e62727;
}

.red.button:hover {
 background-color: #cf2525;
}

.orange.button, .orange.button:visited {
 background-color: #ff5c00;
}

.orange.button:hover {
 background-color: #d45500;
}

.blue.button, .blue.button:visited {
 background-color: #2981e4;
}

.blue.button:hover {
 background-color: #2575cf;
}

.yellow.button, .yellow.button:visited {
 background-color: #ffb515;
}

.yellow.button:hover {
 background-color: #fc9200;
}


Save your template.

Now you have added the styles of buttons into your blog,lets see how to use them.

How To Use These Buttons?


These buttons are very easy to use,below I am giving HTML Code of all types of button.Follow below simple steps to use them while writing posts,


  1. While editing post click on Edit HTML tab
  2. Choose your button code below and paste it
  3. Replace links and link names with yours,


1. HTML Code Large Buttons - 

<center><a href="LINK HERE" class="large button pink" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="large button blue" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="large button green" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="large button orange" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="large button red" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="large button yellow" >LINK TEXT HERE</a></center>


2. HTML Code Medium Buttons - 


<center><a href="LINK HERE" class="medium button pink" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="medium button blue" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="medium button green" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="medium button orange" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="medium button red" >LINK TEXT HERE</a></center>

<center><a href="LINK HERE" class="medium button yellow" >LINK TEXT HERE</a></center>

  • Replace LINK HERE with link URL
  • Replace LINK TEXT HERE with the text which you want to appear on the button.

Hope you have enjoyed this buttons :) Good Day :)
Read more »

0 comments
Labels:
Subscribe to: Comments (Atom)

ShareThis

Join Us

Label 4

 
Its Dustbin © 2012 Powered by Pace-Gen Technologies Kundapura | Design by V Gautham Navada