Breaking News
Loading...

New Design

Gallery

Post By Leable List

Recent Post

Thursday, March 14, 2013
Add a Floating Share Button Sidebar to Your Blog or Website having Facebook, Twitter, Digg, StumbleUpon etc. Icons

Add a Floating Share Button Sidebar to Your Blog or Website having Facebook, Twitter, Digg, StumbleUpon etc. Icons



Have you ever noticed the floating share bar featuring Facebook like and share button, twitter, stumble upon and other social networking site logos in the right or left side of some websites or blogs? The share bar continues to float if you scroll down or up in the page and look like it is in the same position. If you have a blogspot blog or a website, then you can also use it on your site writing a few lines of code. I have managed to get the code segment to display such share bar in my blog searching on the net. I will share the code here for your use on your website and tell you how to customize the code. After installing the code into your blog, it will start showing the share bar in the right side of the web browser window when someone accesses your blog; and it will float with the scroll movements of the viewer. The bar will contain facebook like button, twitter, Google+, StumbleUpon, Digg and Facebook share icons. If you are using a dark template for your blog, then you can use a dark share bar. For dark template, here is the code:

'sharebar' title="Interesting? Share with friends">
'sbutton' id='gb'>"box_count" show_faces="false" font="">
'sbutton' id='rt'>"http://twitter.com/share"class="twitter-share-button" data-count="vertical" >Tweet
'sbutton' id='gplusone'>"tall">
'sbutton' id='su'>
'sbutton' id='digg' style='margin-left:3px;width:48px'>"DiggThisButton DiggMedium">
'sbutton' id='fb'>"fb_share" type="box_count"href="http://www.facebook.com/sharer.php">Share


To use a light colored share bar, use the following code segment:


'sharebar' title="Interesting? Share with friends">
'sbutton' id='gb'>"box_count" show_faces="false" font="">
'sbutton' id='rt'>"http://twitter.com/share"class="twitter-share-button" data-count="vertical" >Tweet
'sbutton' id='gplusone'>"tall">
'sbutton' id='su'>
'sbutton' id='digg' style='margin-left:3px;width:48px'>"DiggThisButton DiggMedium">
'sbutton' id='fb'>"fb_share" type="box_count"href="http://www.facebook.com/sharer.php">Share





How to install the code to your blog?
To use the code in your blogspot blog, follow these steps:
Ø Login to your blogger account ant go to your blog.
Ø Go to Layout. In the sidebar layout, Click on Add a Gadget.
Ø Add a HTML/Javascript Gadget.
Ø Copy any one of the above code segment and paste it to your HTML/Javascript code gadget.
Ø Hit Save. Now click on Save Arrangements.
Ø View your blog. It must be showing the floating share buttons on your blog.
at 3 comments: Read More
Wednesday, March 13, 2013
Add Cool Photo Gallery to Blogger Blog

Add Cool Photo Gallery to Blogger Blog


In the tutorial this time I would like to highlight how to create cool photo gallery Blogged without using CSS3 and JavaScript. Yes, you did not misread, completely without javaScript. If in the previous tutorial to make image slider using javascript so this time there is no use script at all, only with pure CSS3 properties such as, user-select, box-sizing, transition, box-shadow and transform. 
In this photo gallery you can click on the image / photo to get a zooming effect and you can use the tab key on your keyboard to see the next photo.

Demo Download 




Note:Tutorial and Codes are inside the download file.
at No comments: Read More
no image

Orb Style Social Media Sharing Widget For Blogger

In  this post  i am  going to  explain   how  to   add Orb style social  sharing  buttons  to  your blog. This is  just a one widget you can find more widgets HERE  HTML,Check below demo  link.For more SOCIAL SHARING WIDGETS click here.


DEMO

Now after you saw the demo lets know how to add it to blogger.

ADD IT TO BLOGGER

  •  Log in to Blogger Dashboard > Page Element.
  • Click Add Gadget and select 'HTML/Javascript
  • Now Paste Below code.
<style>
/*M+Creation */
.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}
.bubblewrap li{
display:inline;
width: 60px;
height:60px;
}
.bubblewrap li img{
width: 50px; /* width of each image.*/
height: 50px; /* height of each image.*/
border:0;
margin-right: 4px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}
.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}</style>
<br />
<center>
<br />
<ul class="bubblewrap">
<li><a href="http://www.plus.google.com/UserID"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbjm6n9Hq9kj9tfXyCYCBlhxcaWS-IbCITHlGlT-X5XwgC_1P2BFBLeQp35FFMmIsXwZp67bAfjqWwQS0FJNkGFfRwnFlVogvgCnDNgPhk9hdWvbZcdBlwRl83P8ERu7ytlWBkTJmPy7g/s1600/Google.png" title="Add to Facebook" /></a></li>
<li><a href="http://www.facebook.com/marklin44"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDTcCkVsdT_UJmCuEb7JPS2LLR-enJonWakZ6h6TotfV9QCpwQVKyDBFfN95qQYTlpE-vFOpIyiaXku8RL5hfEWs6unMZEHwhRrLnl8_Vv6Jr0P6zXQMv7Gzftl_WYNL3mQqnOInCNpPo/s1600/Facebook.png" title="Add to Facebook" /></a></li>
<li><a href="http://www.stumbleupon.com/********"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidWKG_jDs48xQFR5zbDOJ3SiRFpzMOMMeRj9GWUAghE9temPzeR-d0QrrnQVh0lAJwqcaddfYHUdEqxvjaKkp4ksBUVfx9MqQiTz5m_nyeN-4raQyWecIrYCMXAXPOBKa7afhGev2Fx3g/s1600/StumbleUpon.png" title="Add to Digg" /></a></li>
<li><a href="http://www.twitter/marklin44"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSAYWzNOfZFoTMBW9kl57BKoX5-auRLOpJgEIyXdZ0iscC3n5cg2NQbYGTtObdg6kX2tuMMJqOHJPZJW3o3WRas9NKxAwKU9Wr-dDzYdZiN7w3YTToccZEnWxC8O4h0aMRhUn3kQr6b_g/s1600/Twitter.png" title="Add to Twitter" /></a></li>
<li><a href="http://feeds.feedburner.com/m-creation"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7_cx-LBlq9OaTJP6TB8FFcMI8sFlldbzNtHMsMdg5XYW5ZwGoBMoQvPv15vltr-Lo8SjZzNa6DXWUwJIWiV_c8JXbWf10XpPTPQ0dBPvtjZuNOY5_ZR8YW9_mZJghih3STSoqA75gT5s/s1600/RSS.png" title="Add RSS Feed" /></a></li>
</ul>
</center>


  • After you had pasted the code change the Red Highlighted yours.
  • Now save your HTML/Javascript'.


And Thats All
at No comments: Read More
no image

Ice Cubes Social Sharing Widget For Blogger

In this post im gonna explain  how to add Ice Cubes social   sharing  buttons  for  your blog.  This is just
widget.  you can  add  it  to  your blog easily.  I just using CSS  with  HTML.  Check   below demo  link.
You can get social media post with similar widgets.


Demo






How To Add It To Blogger




  •  Log in to blogger  Design > Page Element.
  • Click Add Gadget and select 'HTML/Javascript
  • Now Paste Below code.
<style>

/* M+Widgets  */

.bubblewrap{

list-style-type:none;

margin:0;

padding:0;

}

.bubblewrap li{

display:inline;

width: 60px;

height:60px;

}

.bubblewrap li img{

width: 50px; /* width of each image.*/

height: 50px; /* height of each image.*/

border:0;

margin-right: 4px; /*spacing between each image*/

-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */

-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */

}

.bubblewrap li img:hover{

-moz-transform:scale(1.8); /*scale up image 1.8x*/

-webkit-transform:scale(1.8);

-o-transform:scale(1.8);

}</style>

<br />

<center>

<br />

<ul class="bubblewrap">

<li><a href="http://www.linkedin.com/Username"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnint3IR1Aq8fRUPCa4B10BBStcPObUFV_ZZW5jNPWXLnb-i-cnusBFAh22oTZhhmfpK64xbhW5Air7KqgF1ZP0WavPgz1aLV7trTKoPAPj4wlCMgoy9f6ZdAH7vTO48faxbpTNDbCbOU/s1600/bloggertrix_linkedin.png" title="Add to Facebook" /></a></li>

<li><a href="http://www.facebook.com/********"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJmvuAhXVwzEG1Rnt834przaAhJJhPc6ZvsVhXflPRHEH6LeerfPj6NAfDS3wtXWtuW_uquOU0qhzQadsMAYXEkOEhx2ls0yyxxkCJ5kyt3oGZdX-hT7Qw5pBSjtWk5qiCD4YVVzRjso8/s1600/bloggertrix_facebook.png" title="Add to Facebook" /></a></li>

<li><a href="http://www.stumbleupon.com/username"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwiZi-tjtdLBJy-miFN7kb0llfcAAQ_vn_nfJ6JFs1nmxQHydr2ccn2CoFtfQrrjLuXTv8sFdsOtiwUpBmF5edjApnd4D1lxVY958bMjwDkc8tTG7bIyuvzgFg0ZiDXkrLnLc0uhqVgo8/s1600/bloggertrix_stumbleupon.png" title="Add to Digg" /></a></li>

<li><a href="http://www.twitter/********"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-hY0HIRlsmKVV9OK0u4xKPe-Wjy78IStKzvE4q6ACa4dKwdtTASuzaP2A-NhJnDo2ogQsQ3H0GhdzgnFdTWzqF1MbzQWNOY4AtoFLxT0WFH3fC2906lQdLm7jjfydNtYkykDombc1gQU/s1600/bloggertrix_twitter.png" title="Add to Twitter" /></a></li>

<li><a href="http://feeds2.feedburner.com/********"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlOFjeCHozo68-JJ56fmL5ttQpsabDz_c59OmxkEZSzvmCUkEZE-AnkmfrQ3Nfaj7MurD2owiISPGG82XNQPWNUO-Vn0bA3hn72bUu4e0SwGQX28a8gPVOkhqRAAuYDeZ8SxaDPrOpTPE/s1600/bloggertrix_RSS.png" title="Add RSS Feed" /></a></li>

</ul>

</center>
After paste above code

* Replace the RED Text with yours.

  • Now save your HTML/Javascript'.
And Thats All I Hope You Like This Widget
at No comments: Read More
Attractive Social Sharing Widget For Blogger

Attractive Social Sharing Widget For Blogger

In this post i am going to explain how to add slide hover social sharing buttons for your blog. This is just widget. you can add it to your blog easily. I just using Css3 with HTML. Check below demo link. You can get social media post with similar widgets here.



Demo







View Demo


Add It To Blogger

1. Log in to blogger  Design > Page Element.

2. Click Add Gadget and select 'HTML/Javascript

3.Now Paste Below code.

<style>
#BT_social {width: 260px;margin: 5px 20px;padding:5px;}#BT_social li {cursor: pointer;height: 48px;position: relative;list-style-type: none;}#BT_social .icon {background: #D91E76 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOgpLoRPETOYKMzyruPDzX0s-5O8jW0lkgp7kq46VSsyMOebZftXXRpzLYUIlrr8C-aQJ7bPCh6782YkwsnDq8qGDnNK0GOlOkJgyEBBUtsLiVdWK9zTCHfKAsnZEpw0SA31S1AzBcwV0/s1600/Social_Button.png') 0 0 no-repeat;background-color: rgba(217, 30, 118, .42);border-radius: 30px;display: block;color: #0033CC;float:none;height: 48px;line-height: 48px;margin: 5px 0;position: relative;text-align: left;text-indent: 90px;text-shadow: #333 0 1px 0;white-space: nowrap;width: 48px;z-index: 5;-webkit-transition: width .25s ease-in-out, background-color .25s ease-in-out;-moz-transition: width .25s ease-in-out, background-color .25s ease-in-out;-o-transition: width .25s ease-in-out, background-color .25s ease-in-out;transition: width .25s ease-in-out, background-color .25s ease-in-out;-webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;-moz-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;-o-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;text-decoration: none;}
#BT_social span:hover {visibility: hidden;}
#BT_social span {display: block;top: 15px;position: absolute;left: 90px;}
#BT_social .icon {color: #fafafa;overflow: hidden;}
#BT_social .fb {background-color: rgba(45, 118, 185, .42);background-position: 0 -190px;}
#BT_social .twit {background-color: rgba(0, 161, 223, .42);background-position: 0 -238px;}
#BT_social .google {background-color: rgba(167, 0, 0, .42);background-position: 0 -286px;}
#BT_social .rss {background-color: rgba(204, 0, 0, .42);background-position: 0 -333px;}
#BT_social li:hover .icon {width: 250px;}
#BT_social li:hover .icon {background-color: #d91e76;}
#BT_social li:hover .fb {background-color: #2d76b9;background-position: 0 2px;}
#BT_social li:hover .twit {background-color: #00A1DF;background-position: 0 -46px;}
#BT_social li:hover .google {background-color: #A70000;background-position: 0 -94px;}
#BT_social li:hover .rss {background-color: #EC5601;background-position: 0 -142px;}
#BT_social .icon:active {bottom: -2px;-webkit-box-shadow: none;-moz-box-shadow: none;-o-box-shadow: none;}
</style>
<br />
<ul id="BT_social">
<li><a class="icon fb" href="http://www.facebook.com/marklin44">Like us on Facebook</a>Like us on Facebook </li>
<li><a class="icon twit" href="https://twitter.com/marklin44">Follow us on Twitter</a>Follow us on Twitter </li>
<li><a class="icon google" href="https://plus.google.com/UserId">Follow us on Google+</a>Follow us on Google+ </li>
<li><a class="icon rss" href="http://www.feedburner.com/m-creation">Subscribe via RSS</a>Subscribe via RSS </li>
</ul>

After paste above code
*Replace marklin44 with your facebook username
*Replace marklin44  with your  twitter Username
*Replace UserId with Googleplus
*Replace m-creation with feedburner username

4. Now save your HTML/Javascript'.

    You are done...
at No comments: Read More
Blue Elegant Feedburner Subscription Box For Blogger

Blue Elegant Feedburner Subscription Box For Blogger


You might say feedburner is dying but till then we got to make the most out of it.Email Subscriptions are a great way to increase traffic.We can post on our blogs and with the help of feedburner our loyal readers can stay connected to those readers. Todays world is a numbers world , more the subscribers more the traffic you get..The default feedburner box is very boring and least appealing.Hence we tweaked and are putting forth this elegant looking box.



Features 


  • Elegant background color
  • Embossed Heading
  • Use of real cool email icon
  • Attractive color combination 

Demo:

Not Available Yet.

Adding It in Blogger 


  1. Go to blogger 
  2. Navigate to Layout and Add a gadget 
  3. Paste this code below 

 <!--ELEGANT SUBSCRIBE BOX STARTS -->
<center>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=FeedID', 'popupwindow', 'scrollbars=yes,width=70%,height=520');return true" class="login">
 <h1>SUBSCRIBE TODAY</h1>
<img src="http://png.findicons.com/files/icons/2198/dark_glass/128/mail_appt.png" alt="Smiley face" align="LEFT" height="48" width="48" /> <center><font size="3" color="white"><span style="line-height:25px">&nbsp;Sign up and receive our free Newsletter &nbsp;</span></font></center><br/>
 <input type="hidden" value="FeedID" name="uri" />
 <input type="email" name="email" class="login-input" placeholder="Email Address" autofocus />
 <input type="hidden" name="loc" value="en_US" />
 <input type="submit" value="Subscribe" class="login-submit" />
</form>
<br/>
</center>
<div align="right">
<a href="#" class="tt">Get This<span class="tooltip"><span class="top"></span><span class="middle">Premium Widget provided by {M+WIDGET}</span><span class="bottom"></span></span></a></div>
<!--CODE STYLING BY CSS WAve-->
<style>
a.tt{
    position:relative;
    z-index:24;
    color:#3CA3FF;
 font-weight:bold;
    text-decoration:none;
}
a.tt span{ display: none; }
a.tt:hover{ z-index:25; color: #aaaaff; background:;}
a.tt:hover span.tooltip{
    display:block;
    position:absolute;
    top:0px; left:0;
 padding: 15px 0 0 0;
 width:200px;
 color: #993300;
    text-align: center;
 filter: alpha(opacity:90);
 KHTMLOpacity: 0.90;
 MozOpacity: 0.90;
 opacity: 0.90;
}
a.tt:hover span.top{
 display: block;
 padding: 30px 8px 0;
    background: url(bubble.gif) no-repeat;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
 display: block;
 padding: 0 8px;
 }
a.tt:hover span.bottom{
 display: block;
 padding:3px 8px 10px;
 color: #548912;
}
::-moz-focus-inner {
  padding: 0;
  border: 0;
}
:-moz-placeholder {
color: #bcc0c8 !important;
}
::-webkit-input-placeholder {
color: #bcc0c8;
}
:-ms-input-placeholder {
color: #bcc0c8 !important;
}
.input {
  font: 12px/20px "Lucida Grande", Verdana, sans-serif;
  color: #404040;
background: #ebc9a2;
}
.input {
  font-family: inherit;
  font-size: 12px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.login {
  padding: 18px 20px;
  width: 80%;
  background: #3f65b7;
  background-clip: padding-box;
  border: 1px solid #172b4e;
  border-bottom-color: #142647;
  border-radius: 5px;
  background-image: -webkit-radial-gradient(cover, #437dd6, #3960a6);
  background-image: -moz-radial-gradient(cover, #437dd6, #3960a6);
  background-image: -o-radial-gradient(cover, #437dd6, #3960a6);
  background-image: radial-gradient(cover, #437dd6, #3960a6);
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5);
}
.login > h1 {
  margin-bottom: 20px;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
color: #fff;
        text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
}
.login-input {
  display: block;
  width: 90%;
  height: 37px;
  margin-bottom: 20px;
  padding: 0 9px;
  color: white;
  text-shadow: 0 1px black;
  background: #2b3e5d;
  border: 1px solid #15243b;
  border-top-color: #0d1827;
  border-radius: 4px;
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2);
}
.login-input:focus {
  outline: 0;
  background-color: #32486d;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(255, 255, 255, 0.6);
}
.lt-ie9 .login-input {
  line-height: 35px;
}
.login-submit {
  display: block;
  width: 100%;
  height: 37px;
  margin-bottom: 15px;
  font-size: 14px;
  font-weight: bold;
  color: #294779;
  text-align: center;
  text-shadow: 0 1px rgba(255, 255, 255, 0.3);
background: #adcbfa;
  background-clip: padding-box;
  border: 1px solid #284473;
  border-bottom-color: #223b66;
  border-radius: 4px;
  cursor: pointer;
background-image: -webkit-linear-gradient(top, #d0e1fe, #96b8ed);
background-image: -moz-linear-gradient(top, #d0e1fe, #96b8ed);
background-image: -o-linear-gradient(top, #d0e1fe, #96b8ed);
background-image: linear-gradient(to bottom, #d0e1fe, #96b8ed);
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 7px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 7px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.15);
}
.login-submit:active {
background: #a4c2f3;
  -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.1);
}
.login-help {
  text-align: center;
}
.login-help > a {
  font-size: 11px;
color: #d4deef;
  text-decoration: none;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
}
.login-help > a:hover {
  text-decoration: underline;
}
</style>
<!--ELEGANT SUBSCRIBE BOX ENDS -->

  • Change FeedID (x2) to your feedburner name 
You can change the font size of SUBSCRIBE TODAY if the widget does not fit ,by changing 24px.

FROM THE EDITORS DESK 

This box was originally posted by  Alex Colt of CSS Wave.It was meant to be a a login box but we modified it for a bloggers cause and here's the result.Hope you like it and will implement in your blog.
Cheers :) 
at No comments: Read More
Subscribe to: Posts (Atom)

Main Post

Quick Message
Press Esc to close

Send Quick Massage

Name

Email *

Message *

Copyright © 2013 Web Master Design All Right Reserved
Back To Top