Blogger gadgets

Saturday, December 28, 2013

Add this beautiful board to show some important notices,announcements etc. Follow the steps given below

Step 1 => Go to Layout

Step 2 => Click on Add a Gadget

step 3 => Select HTML/Javascript

Step 4 => Copy the code below and paste it

<style>
.lesson {
background: #41423F;
border: 1px solid #41423F;
box-shadow: inset 0 1px 1px #777;
color: #fff;
margin-top:30px;
padding: 0 30px;
position: relative;
width: 707px;
border-radius: 4px 4px 0 0;
}

.lesson h4 {
background: #fbdc60;
background: -moz-linear-gradient(top, #fbdc60 0%, #fad857 50%, #f6cd41 51%, #f2be2d 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbdc60), color-stop(50%,#fad857), color-stop(51%,#f6cd41), color-stop(100%,#f2be2d));
background: -webkit-linear-gradient(top, #fbdc60 0%,#fad857 50%,#f6cd41 51%,#f2be2d 100%);
background: -o-linear-gradient(top, #fbdc60 0%,#fad857 50%,#f6cd41 51%,#f2be2d 100%);
background: -ms-linear-gradient(top, #fbdc60 0%,#fad857 50%,#f6cd41 51%,#f2be2d 100%);
background: linear-gradient(to bottom, #fbdc60 0%,#fad857 50%,#f6cd41 51%,#f2be2d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbdc60', endColorstr='#f2be2d',GradientType=0 );
border: 1px solid #F2BE2D;
color: #AC5C23;
font-size: 22px;
font-weight: normal;
margin: -1em auto 1em;
padding: 10px 0;
text-shadow: 0 1px 1px #fff;
text-transform: uppercase;
text-align: center;
width: 600px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-moz-box-shadow: inset 0 0 1px #fff;
-webkit-box-shadow: inset 0 0 1px #fff;
box-shadow: inset 0 0 1px #fff;
}

.lesson:after {
background: url('http://imageshack.us/a/img440/4608/5hql.png');
bottom: -40px;
content: "";
height: 40px;
left: -3px;
position: absolute;
width: 773px;
}

</style>

<div class="lesson">
<h4>Title Of Content</h4>

<p>This gadget is provided by blogger gadgets.
For more gadgets for your blog and visit on this site http://thebloggergadget.blogspot.in/.
If you have any suggestions or doubts please comment on our site.
Hope you like this gadget and visit again.</p>

</div>

Step 5 => Save it and you are done.

Saturday, August 31, 2013

1) Go to this link : Like box link

2) Add your facebook page url and add details according to your requirements

3) Click on get code and a new window will open.

4) Copy the code and paste it where you want to place the like box on your blog.

Sunday, February 17, 2013

Want to add a beautiful widget to your blog which expands it's size when mouse reaches over it. To get this effect keep a small image in the div of id "small" and large image in the div of id "large" This type of widgets are generally used for advertisements.

1) Go to Blogger Dashboard > Design > Page/Edit Layout.

2) Add a Gadget > HTML/JavaScript.

3) Copy the code below and paste it into the window.

<html>

<script>

function on_it()

{

var a=document.getElementById('small');

var b=document.getElementById('large');

a.style.display='none';

b.style.display='inline';

}

function out_it()

{

var a=document.getElementById('small');

var b=document.getElementById('large');

a.style.display='inline';

b.style.display='none';

}

</script>

<div onmouseover="on_it()" onmouseout="out_it()">

<div id="small" style="display:inline;">

---content of the widget when mouse is not over it-----------

</div>

<div id="large" style="display:none;">

---content of the widget when mouse is over it-----------

</div>

</html>

See the example below :

Friday, December 21, 2012

We have found a beautiful sharing widget.take a look at it.

Follow the steps :

1) Go to Blogger Dashboard > Design > Page/Edit Layout.

2) Add a Gadget > HTML/JavaScript.

3) Copy the code below and paste it into the window.

<style>

.authentic-social-icons { list-style: none }

.authentic-social-icons li { display: inline-block; margin-bottom: 0; margin-right: 4px; padding-bottom: 0 !important; }

.authentic-social-icons a { -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; display: block; transition: all 0.2s ease-in-out; }

.authentic-social-icons a img { -khtml-opacity: 0.8; -moz-opacity: 0.8; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; opacity: 0.8; transition: all 0.2s ease-in-out; }

.authentic-social-icons a:hover img { -khtml-opacity: 1.0; -moz-opacity: 1.0; opacity: 1.0; }

</style>

<div>

<ul class='authentic-social-icons'>

<li><a href='http://www.twitter.com' title='twitter'><img alt='Twitter' src='http://imageshack.us/a/img21/9523/twitterdkl.png'/></a></li>

<li><a href='http://www.facebook.com' title='facebook'><img alt='Facebook' src='http://imageshack.us/a/img9/5918/facebookrx.png'/></a></li>

<li><a href='http://www.tumblr.com' title='tumblr'><img alt='Tumblr' src='http://imageshack.us/a/img834/5818/tumblra.png'/></a></li>

<li><a href='http://www.youtube.com' title='youtube'><img alt='YouTube' src='http://imageshack.us/a/img20/7506/youtubeuz.png'/></a></li>

<li><a href='http://www.vimeo.com' title='vimeo'><img alt='Vimeo' src='http://imageshack.us/a/img545/560/vimeoo.png'/></a></li>

<li><a href='http://www.linkedin.com' title='linkedin'><img alt='LinkedIn' src='http://imageshack.us/a/img593/7302/linkedinr.png'/></a></li>

<li><a href='http://www.behance.com' title='behance'><img alt='Behance' src='http://imageshack.us/a/img208/2595/behance.png'/></a></li>

<li><a href='http://themeforest.net' title='envato'><img alt='Envato' src='http://imageshack.us/a/img706/5674/envato.png'/></a></li>

<li><a href='http://www.icloud.com' title='icloud'><img alt='iCloud' src='http://imageshack.us/a/img542/7850/icloudg.png'/></a></li>

<li><a href='http://www.evernote.com' title='evernote'><img alt='Evernote' src='http://imageshack.us/a/img547/2351/evernotew.png'/></a></li>

<li><a href='http://www.gowalla.com' title='gowalla'><img alt='Gowalla' src='http://imageshack.us/a/img23/2404/gowalla.png'/></a></li>

<li><a href='http://www.paypal.com' title='paypal'><img alt='Paypal' src='http://imageshack.us/a/img268/3229/paypalvq.png'/></a></li>

<li><a href='http://www.pinterest.com' title='pinterest'><img alt='Pinterest' src='http://imageshack.us/a/img252/67/pintereste.png'/></a></li>

<li><a href='http://www.quora.com' title='quora'><img alt='Quora' src='http://imageshack.us/a/img339/6161/quora.png'/></a></li>

<li><a href='http://www.google.com' title='google'><img alt='Google' src='http://imageshack.us/a/img560/455/googlezy.png'/></a></li>

<li><a href='http://plus.google.com' title='googleplus'><img alt='Googleplus' src='http://imageshack.us/a/img819/9585/googleplusv.png'/></a></li>

<li><a href='http://www.github.com' title='github'><img alt='Github' src='http://imageshack.us/a/img525/6620/github.png'/></a></li>

<li><a href='http://www.forrst.com' title='forrst'><img alt='Forrst' src='http://imageshack.us/a/img689/4084/forrst.png'/></a></li>

<li><a href='http://dribbble.com/authentic' title='dribbble'><img alt='Dribbble' src='http://imageshack.us/a/img703/5047/dribbble.png'/></a></li>

<li><a href='http://www.flickr.com' title='flickr'><img alt='Flickr' src='http://imageshack.us/a/img19/6151/flickrtc.png'/></a></li>

<li><a href='http://www.wordpress.com' title='wordpress'><img alt='WordPress' src='http://imageshack.us/a/img593/9753/wordpressh.png'/></a></li>

<li><a expr:href='data:blog.homepageUrl + "feeds/posts/default"' title='rss'><img alt='RSS' src='http://imageshack.us/a/img145/2669/rssi.png'/></a></li>

<li><a href='http://www.stumbleupon.com' title='stumbelupon'><img alt='Stumbleupon' src='http://imageshack.us/a/img826/8025/stumbleuponb.png'/></a></li>

</ul>

</div>

5) Click on save

Sunday, July 1, 2012

Today I am going to tell you about a great site which makes sharing button for us.You can design sharing button according to your choice. To create your sharing gadget you need to go their website. Click on the following button to go to the link and then follow the below steps:

1)After going to the link you will find the following screen. Select where you want to install this gadget.i.e.on website or WordPress or blogger or on any other services.After selecting,click on NEXT: Step 2. Pick a Style

2) After clicking you will find the below screen. Select the style of sharing gadget you want.There are total 8 styles are available. Every style is cool,isn't it?So select it and click on
'NEXT: Step 3. Customize '.

3) After completion of two steps you find a window according to your choices in previous two steps.It will either install the gadget or give you the code.If you want the code for the gadget,in 1st step select website.If you like my posts please comment.

Friday, June 15, 2012

Finally friends.I designed the transparent dock for the blogger. It's a very Stylish gadget for blog's.This gadget remains on the page even user scroll the page.So now add this gadget to your blog. Follow the steps.

1) Go to Blogger Dashboard > Design > Page/Edit Layout.

2) Add a Gadget > HTML/JavaScript.

3) Copy the code below and paste it into the window.

<html>

<style>

#kilko{position:relative;left:500px;top:-510px;height:100px;width:400px;border-radius:10px;margin:20px;background:transparent;-webkit-box-shadow:0 0 1em hsla(0, 0%, 0%, 1.0);-moz-box-shadow:0 0 1em hsla(0, 0%, 0%, 1.0);box-shadow:0 0 1em hsla(0, 0%, 0%, 1.0);}

#floating_corner_blogger {

position:fixed;_position:absolute;bottom:0px; left:0px;background:transparent;

clip:inherit;

_top:expression(document.documentElement.scrollTop+

document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

body{height:3000px;width:1400px;background-image:url('file:///C:/Users/Public/Pictures/Sample%20Pictures/Penguins.jpg')}

</style>

<body>

<div id="floating_corner_blogger">

<div id="kilko">

<a href="">

<img src="http://userlogos.org/files/logos/shniggysaurus/fb.png" height="90"width="120"></img>

</a>

<a href="">

<img src="http://72psd.com/wp-content/themes/classic/images/upload/twitter.png" height="90"width="120"></img>

</a>

<a href="">

<img src="http://png-3.findicons.com/files//icons/1066/orb/128/blogger.png" height="90"width="120"></img>

</a>

</div>

</body>

</html>

4) By chnaging #kilko properties you can change the size and appearance of the aqua dock.

5) Save it and you have done.

If you want any help or like this post please comment.

Today i will tell you how to make simple image slideshow to your blog.

1) Go in Layout tab in your blogger.
2) Click on the Add a Gadget. Select Html/JavaScript gadget from the opened window.
3) Add the below code in the content field of the gadget.

<html>
<head>
<script type="text/javascript">

</script>
</head>
<body>
<img src="startimg_url" name="slide" width="400" height="400" />
<script>

</script>
</body>
</html>

4)Replace your image url with img1_url, img2_url and img3_url. Change the startimg_url with the url of the image which will start the slideshow.

5)click on save and you have done it.

6)This given code is basically for only three images.If you want to add images do the following steps.

i)let's say you want to add 2 more images to your slideshow.
then just below this line image3.src="image3_url" paste the following code:

var image4=new Image()

image4.src="image4_url"

var image5=new Image()

image5.src="image5_url"

ii) now find this line " if (step<3) ".Change the value marked in the red to 5.this value is equal to the no. of images in your slideshow. now save it and you finish.

7) Do you want to change the speed of your slideshow ? Find this line

setTimeout("slideit()",1000)

the value in green color represents the time period between the change of images.this time period is in milliseconds. Here 1000 represents 1 second. If you increase the value then your slideshow will become faster.

8) Now if you want to change the dimensions of your slideshow then find this line.

<img src="startimg_url" name="slide" width="400" height="400" />

change the value in blue colour according to your need.

9) An example of this slideshow is below :

Saturday, December 28, 2013

Add beautiful board to the blog

Saturday, August 31, 2013

How to add Facebook like box

Sunday, February 17, 2013

How to add a beautiful sidebar widget to your blog

Friday, December 21, 2012

Social networking gadget

Sunday, July 1, 2012

Add a ShareThis sharing buttons to your blog

Friday, June 15, 2012

Add Transparent dock to your blog

How to add an image slideshow in your blog