Computer | Tips & Tricks: Gadgets

Showing posts with label Gadgets. Show all posts

Saturday, August 15, 2015

Auto scrolling news ticker for blogger

The Auto scrolling news ticker gadget is realy nice using for blogger because when you'll updates last post till date they are all or you have choosed post amount will be showing automatic with recent post style by marquee for example view this Demo so if you like this gadget learn from below tips how to insert to your blog

1. Open your blog account
2. Choose gadget and click on "Add a Gadget" inside Layout from left corner

3. Find "HTML/Javascript" and click on that options then will be open there a empty HTML box
4. Copy the red color whole code from below and paste it there in empty HTML box

5. Now replace it adhikarikedar as your blog link name and save it

6. Now go to your blog and refresh one more you will see there.

jquery Scroll back to top widget for blogger

This toturial is i will show you how to add jquery smooth scroll back to top button for blogger you can go direct top from blogger footer lets go see how to aad this gadget to your blog the gadget is designed with only text not by image you can see screenshot on below

1. Go to your blog account and sign in there with your email and password
2. Now go to this location "Dashboard > Templates > Edit HTML"
3. Search for </body> tag
4. Add below code just before </body> tag

5. Now save your templates and you are has been successfully done !

How to Add make stylish custom labels cloud widget ?

On this post I 'm going to share a so nice CSS labels style for your blogger. This tricks you can easily apply for your blogger blog labels widget by just adding some simple CSS codes into your blog. Blogger Tag Clouds are used to show all the categories or labels present in a blog. By default blogger comes with simple design they do not look beautiful. But we designed our labels widget like CSS buttons, which will be looking attractive more than the default blogger labels cloud widget style.

1. Sign in to your blogger and locate this options "Dashboard > Templates > Edit HTML"
2. Search for below tag in your blogger template ]]><b:sklin>
3. Then copy and paste below CSS codes above ]]><b:skin> tag

/*----- Custom Labels Cloud by online guru-----*/
.label-size
{
position:relative;
margin:0;
padding:0;
}
.label-size a
{
float:left;
height:24px;
line-height:24px;
position:relative;
font-size:12px;
margin-bottom:9px;
margin-left:20px;
background:#2aa4cf;
color:#fff;
text-decoration:none;
-moz-border-radius-bottomright:4px;
-webkit-border-bottom-right-radius:4px;
border-bottom-right-radius:4px;
-moz-border-radius-topright:4px;
-webkit-border-top-right-radius:4px;
border-top-right-radius:4px;
padding:0 10px 0 12px;
}
.label-size a:before
{
content:"";
float:left;
position:absolute;
top:0;
left:-12px;
width:0;
height:0;
border-color:transparent #0089e0 transparent transparent;
border-style:solid;
border-width:12px 12px 12px 0;
}
.label-size a:after
{
content:"";
position:absolute;
top:10px;
left:0;
float:left;
width:4px;
height:4px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
background:#fff;
-moz-box-shadow:-1px -1px 2px #004977;
-webkit-box-shadow:-1px -1px 2px #004977;
box-shadow:-1px -1px 2px #004977;
}
.label-size a:hover
{
background:#555;
}
.label-size a:hover:before
{
border-color:transparent #555 transparent transparent;
}

4. Now save your template
5. Making for custom label cloud widget to do this...
You have to go to Dashboard > Layout > Edit the "Labels" widget option and set "cloud" mode. for example see below screenshot

Now save your template and your are done ! go to your blog site and refresh one more and view your cloud label.

Add Numbered Page Navigation for Blogger

Instead of numbered page navigation blogger displays links such as home, older posts and newer posts at the bottom of each page/post. This style of navigation makes many of the bloggers annoyed and so they change the style to a numbered navigation by adding custom codes using javascript which gives numbered page navigation for Blogger blog.

How to do this
1. First log in to your blogger with your email ID and password
2. Now go to template section and click on "Edit HTML" button
3. After click on Edit HTML then click on "Format Template"

4. Press CTRL+Fto open search box and type the code ]]></b:skin> and search it there
5. Once you founded the code, paste the following codes just above ]]></b:skin>

/* Page Navigation styles by online guru */

.showpageNum a {

padding: 3px 8px;

margin:0 4px;

text-decoration: none;

border:1px solid #999;

-webkit-border-radius:3px;-moz-border-radius:3px;

background: #ddd;

}

.showpageOf {

margin:0 8px 0 0;

}

.showpageNum a:hover {

border:1px solid #888;

background: #ccc;

}

.showpagePoint {

color:#fff;

text-shadow:0 1px 2px #333;

padding: 3px 8px;

margin: 2px;

font-weight: 700;

-webkit-border-radius:3px;-moz-border-radius:3px;

border:1px solid #999;

background: #666;

text-decoration: none;

}

This above code is the styling CSS and can be modified according to your blog’s design or template.
6. Now you will have to find this code </body>
7. If you find this code </body> then paste the code given below just above it.

<!– Blogger Made Simple Page Navigation code Starts by online guru–>

<script type=’text/javascript’>

var home_page=”/”;

var urlactivepage=location.href;

var postperpage=5;

var numshowpage=4;

var upPageWord =’Previous’;

var downPageWord =’Next’;

</script>

<script src=’https://kedar-adhikari.googlecode.com/svn/Navigation.js’ type=’text/javascript’></script>

<!– Page Navigation code Ends by online guru –>

8. Now finally save your blogger templates and view your blog.

How to add auto read more with thumbnails Blogger

This Automatic Read More script will summarize content and a post summary will be shown only on the main blog page (Homepage) category pages, and archive pages.

Using the Automatic Read More feature in Blogger Posts
1. First go to your blogger and log in with your user name and password
2. Now locate this options "Dashboard > Template > Edit HTML" then click on Format Template
3. Press "CTRL+F" from keyboard layout and type this code <data:post.body/> and find it there in HTML box
4. Now replace the above code with below code

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='readmore' style='float:right'><a expr:href='data:post.url'>Read More »</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>

5. Now search for the following tag
</head>
6. Just above the </head> tag add the following code

Note: you can modify above the blue code number 490, 400, 120 or 120 whatever you have choosed.

How To Add Rotating Effect Image To Your Blog

Adding different effect to your blog images is another great way of engaging your readers, probably they will stay longer on your blog if they found out that your blog images are having different effect and they might want to check more of your blog images to see the awesome effect.
Look at below demo image

So how to insert this method on your blog please see at below my instruction
1. Go to your blog and log in with your email and password
2. Now Go to your blog dashboard "Template > Edit HTML > Procced"
3. Press "CTRL+F" to find the text ]]></b:skin> and paste the following code just above it

.spinningeffect img {
/* Spinning Social Icons Widget By www.realcombiz.com */
    -moz-transition: all 0.8s ease-in-out;
    -webkit-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
}

.spinningeffect img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}

4. You can customize the spinning effect to your own satisfaction by editing the code below.

To change the rate (time taken) at which the image rotate, simple edit 0.8s

You can also change the degree at which the image rotate by editing 360deg

How to Add a Simple Search Box to Blogger

Hello world! how to Add a Simple Search box to Blogger. most of custom templates has comes with no search box, here is the simple Search box for you. just add it with a single click and enjoy!

How to add gadget in to blogger site

Today i'm going to show you about an how to add gadget in to blogger sidebar, post footer or anywhere whereever you want
What is the Blogger gadget ?
The Blogger Gadget is like Facebook Fan box, Twitter Following Box, Visiting Counter, Blogger Following Counter, Advertisement Banner and many more sample of when we are created the Code fo example see the code
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio9gMflAKVHzIbnDxbSFoSeoEgOudO51H0uoSRPh9McKX4uHB99zwrWsFAie3Q9S_LDJ4YCsrfQbLDGB0l1n2NmPfDKlQrNT4j08qKWZbraA2AUo675KYL12RGBF9WB-yhQmhgXs8zUT-G/s150-no/usertile42.jpg'/> This is also a gadget of image so follow the below instruction for more information at practicle

1. First copy the below code and go to your blogger homepage and click in to "Dashboard"

2. After that click on "Layout" and click on "Add a Gadget"

3. Now find the "HTML/Javascript" and click on that options

4. In last step paste the above code in to empty box and save it gadget

Finally save the gadget and view your blog there is you will see gadget some image but that is just demo if you are interest you can make your own gadget on your blogger site as you like.

How to put floating Twitter Fan box on Blogger?

Do you use Twitter and Blogger. And do you know how to put Floating Twitter Fan Box in your Blogger. I If you don't know than follow these simple steps as given below it is very easy and simple so try it.

1.First of all Log in to your Blogger Account and Click on "Template" and then Click on "Edit HTML" and Finally Click on "Proceed".
2.Now in opened HTML Box press <kbd>Ctrl</kbd>+<kbd>F</kbd> from your keyboard at once. After that in opened search box type </Body>.
After that delete </body> and Now copy all the code given below and paste it in exchange of </Body>

After that the code that you just copy search kedargk6 there and type Twitter user name in exchagne of kedargk6 and at last click on Save Template .

How To Add CSS Mega Dropdown Menu Blogger

Mega menu's are being used extensively these days and are really useful for displaying a huge amount of content without cluttering your layout. The real credit for this menu goes to Guillaume Marty I have just fixed some CSS related conflicts that were happening due to the default Stylesheet that is Enjoy

How to do this method to your blog just follow this instruction
1. First go to you blog and locate this options "Dashboard > Layout > Add a Gadget" Then click on the Add a Gadget
2. Now Click on "HTML/Javascript" and copy the below whole code and paste it there inside empty box

<h2>Welcome !</h2>

</div>

<p>This item comes with a large range of prepared typographic stylings such as headings, lists, etc. for your blogger</p>

</div>

<h2>Browser Support</h2>

</div>

</div>

<p>This mega menu has been tested in all major browsers it is 100% working</p>

</div>

</div>

</li>

<li><a href="#" class="drop">Windows tips</a>

<h2>This is an example of a large container with 5 columns</h2>

</div>

<p class="black_box">This is a dark grey box text. Fusce in metus at enim porta lacinia vitae a arcu. Sed sed lacus nulla mollis porta quis.</p>

</div>

<p>Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.</p>

</div>

<p class="italic">This is a sample of an italic text. Consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi porta quis sit amet.</p>

</div>

<p>Curabitur euismod gravida ante nec commodo. Nunc dolor nulla, semper in ultricies vitae, vulputate porttitor neque.</p>

</div>

<p class="strong">This is a sample of a bold text. Aliquam sodales nisi nec felis hendrerit ac eleifend lectus feugiat scelerisque.</p>

</div>

<h2>Here is some content with side images</h2>

</div>

<p>Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Sed in sem mauris. Aenean a commodo mi. Praesent augue lacus.<a href="#">Read more...</a></p>

<p>Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Nunc in leo urna, eget varius metus. Aliquam sodales nisi.<a href="#">Read more...</a></p>

</div>

<p class="black_box">This is a black box, you can use it to highligh some content. Sed sed lacus nulla, et lacinia risus. Phasellus vitae sapien ac leo mollis porta quis sit amet nisi. Mauris hendrerit, metus cursus accumsan tincidunt.Quisque vestibulum nisi non nunc blandit placerat. Mauris facilisis, risus ut lobortis posuere, diam lacus congue lorem, ut condimentum ligula est vel orci. Donec interdum lacus at velit varius gravida. Nulla ipsum risus.</p>

</div>

</div>

</li>

<li><a href="#" class="drop">Internet Tips</a>

<h2>This is a heading title</h2>

</div>

<h3>Some Links</h3>

<ul>

<li><a href="#">Online Guru</a></li>

</ul>

</div>

<h3>Useful Links</h3>

<ul>

<li><a href="#">Online Guru</a></li>

</ul>

</div>

<h3>Other Stuff</h3>

<ul>

<li><a href="#">Online Guru</a></li>

</ul>

</div>

<ul>

<li><a href="#">Online Guru</a></li>

</ul>

</div>

</div>

</li>

<li class="menu_right"><a href="#" class="drop">Graphic Design</a>

<li><a href="#">Online Guru</a></li>

</ul>

</div>

</li>

<li class="menu_right"><a href="#" class="drop">Earn Money Online</a>

<h2>Lists in Boxes</h2>

</div>

<li><a href="#">Online Guru</a></li>

</ul>

</div>

<li><a href="#">Online Guru</a></li>

</ul>

</div>

<li><a href="#">Online Guru</a></li>

</ul>

</div>

<h2>Here are some image examples</h2>

</div>

<p>Maecenas eget eros lorem, nec pellentesque lacus. Aenean dui orci, rhoncus sit amet tristique eu, tristique sed odio. Praesent ut interdum elit. Maecenas imperdiet, nibh vitae rutrum vulputate, lorem sem condimentum.<a href="#">Read more...</a></p>

<p>Aliquam elementum felis quis felis consequat scelerisque. Fusce sed lectus at arcu mollis accumsan at nec nisi. Aliquam pretium mollis fringilla. Vestibulum tempor facilisis malesuada. <a href="#">Read more...</a></p>

</div>

</div>

</li>

</div>

body, ul, li {

font-size:14px;

font-family:Arial, Helvetica, sans-serif;

line-height:21px;

text-align:left;

}

/* Navigation Bar */

#menu {

list-style:none;

width:940px;

margin:30px auto 0px auto;

height:43px;

padding:0px 20px 0px 20px;

/* Rounded Corners */

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

border-radius: 10px;

/* Background color and gradients */

background: #014464;

background: -moz-linear-gradient(top, #0272a7, #013953);

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));

199

/* Borders */

border: 1px solid #002232;

-moz-box-shadow:inset 0px 0px 1px #edf9ff;

-webkit-box-shadow:inset 0px 0px 1px #edf9ff;

box-shadow:inset 0px 0px 1px #edf9ff;

}

#menu li {

float:left;

text-align:center;

position:relative;

padding: 4px 10px 4px 10px;

margin-right:30px;

margin-top:7px;

border:none;

}

#menu li:hover {

border: 1px solid #777777;

padding: 4px 9px 4px 9px;

/* Background color and gradients */

background: #F4F4F4;

background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));

/* Rounded corners */

-moz-border-radius: 5px 5px 0px 0px;

-webkit-border-radius: 5px 5px 0px 0px;

border-radius: 5px 5px 0px 0px;

}

#menu li a {

font-family:Arial, Helvetica, sans-serif;

font-size:14px;

color: #EEEEEE;

display:block;

outline:0;

text-decoration:none;

text-shadow: 1px 1px 1px #000;

}

#menu li:hover a {

color:#161616;

text-shadow: 1px 1px 1px #FFFFFF;

}

#menu li .drop {

padding-right:21px;

background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTDrD2sYpQZBwD3gmuWyO7G4exaxf9BR6vSf9MsKPyXY47cY8KZjykxLrGlJlbFLo-rgy4Iwef7iKufEBRTI4FTCxjz0QCNXb1hoYDAwYlOHUxNVduqw85zQ5_glJ_iPkpc81PW2HvKk1I/s1600/drop.png") no-repeat right 8px;

}

#menu li:hover .drop {

}

/* Drop Down */

.dropdown_1column,

.dropdown_2columns,

.dropdown_3columns,

.dropdown_4columns,

.dropdown_5columns {

margin:4px auto;

float:left;

position:absolute !important;

left:-999em; /* Hides the drop down */

text-align:left;

padding:10px 5px 10px 5px;

border:1px solid #777777;

border-top:none;

/* Gradient background */

background:#F4F4F4;

background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));

/* Rounded Corners */

-moz-border-radius: 0px 5px 5px 5px;

-webkit-border-radius: 0px 5px 5px 5px;

border-radius: 0px 5px 5px 5px;

}

.dropdown_1column {width: 140px;}

.dropdown_2columns {width: 280px;}

.dropdown_3columns {width: 420px;}

.dropdown_4columns {width: 560px;}

.dropdown_5columns {width: 700px;}

#menu li:hover .dropdown_1column,

#menu li:hover .dropdown_2columns,

#menu li:hover .dropdown_3columns,

#menu li:hover .dropdown_4columns,

#menu li:hover .dropdown_5columns {

left:-1px ;

z-index:444 !important;

top:auto;

}

/* Columns */

.col_1,

.col_2,

.col_3,

.col_4,

.col_5 {

display:inline;

float: left;

position: relative;

margin-left: 5px;

margin-right: 5px;

}

.col_1 {width:130px;}

.col_2 {width:270px;}

.col_3 {width:410px;}

.col_4 {width:550px;}

.col_5 {width:690px;}

/* Right alignment */

#menu .menu_right {

float:right !important;

margin-right:0px;

}

#menu li .align_right {

/* Rounded Corners */

-moz-border-radius: 5px 0px 5px 5px;

-webkit-border-radius: 5px 0px 5px 5px;

border-radius: 5px 0px 5px 5px;

}

#menu li:hover .align_right {

left:auto;

right:-1px;

top:auto;

}

/* Drop Down Content Stylings */

#menu p, #menu h2, #menu h3, #menu div li {

font-family:Arial, Helvetica, sans-serif;

line-height:21px;

font-size:12px;

text-align:left;

text-shadow: 1px 1px 1px #FFFFFF;

}

#menu h2 {

font-size:21px;

font-weight:400;

letter-spacing:-1px;

margin:7px 0 14px 0;

padding-bottom:14px;

border-bottom:1px solid #666666;

}

#menu h3 {

font-size:14px;

margin:7px 0 14px 0;

padding-bottom:7px;

border-bottom:1px solid #888888;

}

#menu p {

line-height:18px;

margin:0 0 10px 0;

}

#menu li:hover div a {

font-size:12px;

color:#015b86;

}

#menu li:hover div a:hover {

color:#029feb;

}

.strong {

font-weight:bold;

}

.italic {

font-style:italic;

}

.imgshadow {

background:#FFFFFF;

padding:4px;

border:1px solid #777777;

margin-top:5px;

-moz-box-shadow:0px 0px 5px #666666;

-webkit-box-shadow:0px 0px 5px #666666;

box-shadow:0px 0px 5px #666666;

}

.img_left { /* Image sticks to the left */

width:auto;

float:left;

margin:5px 15px 5px 5px;

}

#menu li .black_box {

background-color:#333333;

color: #eeeeee;

text-shadow: 1px 1px 1px #000;

padding:4px 6px 4px 6px;

/* Rounded Corners */

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

border-radius: 5px;

/* Shadow */

-webkit-box-shadow:inset 0 0 3px #000000;

-moz-box-shadow:inset 0 0 3px #000000;

box-shadow:inset 0 0 3px #000000;

}

#menu li ul {

list-style:none;

padding:0;

margin:0 0 12px 0;

}

#menu li ul li {

font-size:12px;

line-height:24px;

position:relative;

text-shadow: 1px 1px 1px #ffffff;

padding:0;

margin:0;

float:none

text-align:left;

width:130px;

}

#menu li ul li:hover {

background:none;

border:none;

padding:0;

margin:0;

}

#menu li .greybox li {

background:#F4F4F4;

border:1px solid #bbbbbb;

margin:0px 0px 4px 0px;

padding:4px 6px 4px 6px;

width:116px;

/* Rounded Corners */

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

border-radius: 5px;

}

#menu li .greybox li:hover {

background:#ffffff;

border:1px solid #aaaaaa;

padding:4px 6px 4px 6px;

margin:0px 0px 4px 0px;

}

.tabs-inner .widget li a {

padding: 1px ;

display:block !important;

border: 1px solid transparent !important ;

}

</style>

3. Now Replace the all highlight color with your own Link, Title and Text

4. after finished finally save the gadget you are Done!

Computer | Tips & Tricks

Spirits THEME

What's hot?

Saturday, August 15, 2015

Auto scrolling news ticker for blogger

jquery Scroll back to top widget for blogger

How to Add make stylish custom labels cloud widget ?

Add Numbered Page Navigation for Blogger

How to add auto read more with thumbnails Blogger

How To Add Rotating Effect Image To Your Blog

How to Add a Simple Search Box to Blogger

How to add gadget in to blogger site

How to put floating Twitter Fan box on Blogger?

How To Add CSS Mega Dropdown Menu Blogger

Search Here

Popular Posts

Fan Page

About Me

Navigation