CandyRoid: blogger widgets

Showing posts with label blogger widgets. Show all posts

Friday, 21 February 2014

Add Android Emulator Element in Your Blogger

1.Download Script Click Here

2. Go to Blogger->New Post->Paste Code in body

Demo:-

Adfly Not Working In India

Hello Guyz,

Today CandyRoid comes with a very helpful thing, which will help Indian Adfly Users.

As we all know adf.ly stop working in india because of some circumstances. It works when we use HTTPS At the place of HTTP in Domain

for eg:- Not working :- http://adf.ly/4342460/

Working :- https://adf.ly/4342460/

Add Cool Drop Down Menu in Blogger

Drop Down Navigation Menu For Blogger : You may have seen many drop-down menus but today "ThatsBlogging" will present you an incredible Drop Down menu , which is really a magnificent drop down menu.Actually it is developed by the combination of CSS with HTML . Beautiful Colors combinations are used which makes it more significant drop down menu.Actually , drop down menu makes your blog navigative and easy to expand.This drop down menu is very stylish which means your Blog Beauty will increase by adding this menu.Moreover this menu will not slow your blog loading speed.

Live DEMO

How To Add Cool Drop Down Menu in Blogger

Go To Blogger Dashboard
Click On Template
Edit HTML
Search For </header>
Copy the Below Script and Add it below the Closing Header tag ( </header>)

<div id='menubor'></div><center><ul id='menu'>
<li><a class='hmlink' href='#'>Home</a></li>
<li><a class='winlink' href='#'>Blogger Templates</a></li>
<li><a class='maclink' href='#'>Blogger Widgets</a></li>
<li><a class='andlink' href='#'>How To Tuts</a></li>
<li><a class='gamlink' href='#'>Privacy Policy</a></li>
<li><a class='seclink' href='#'>Guest Post</a></li>
<li><a class='linlink' href='#'>About</a></li>
</ul></center>
<style>
#menu li {               
 display: inline;               
 list-style: none;               
 padding: 0;           
 }                   

 #menu li a {                                 
 padding: 15px 20px 15px 20px;               
 text-decoration: none;               
  color:white;
  font-family: 'Noto Serif', serif;
-moz-box-shadow: inset 0 0 13px -2px #000;
-webkit-box-shadow: inset 0 0 13px -2px #000;
box-shadow: inset 0 0 13px -2px #000;
  font-size:18px;
  -webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
  transition: padding-bottom .666s;
-webkit-transition: padding-bottom .666s;
-moz-transition: padding-bottom .666s;
-o-transition: padding-bottom .666s;
-ms-transition: padding-bottom .666s;
  
  
}
 #menu li a:hover {                                 

  padding-bottom:20px;
}
.hmlink{
  background:#24459A;
}
.winlink{
  background-color: rgba(9,173,217,1);
}
.maclink{
  background-color: rgba(108,109,112,1);
}
  .weblink{
    background:#EEEE00;
    color:black;
  }
.andlink{
  background-color: rgba(149,191,43,1);
}
.gamlink{
  background-color: rgba(212,2,43,1);
}
.seclink{
  background-color: rgba(0,158,62,1);
}
.linlink{
  background-color: rgb(123, 82, 138);
}
#menubor{
  border-top:1px solid black;
  margin-bottom:-1px;
}
  .header-outer{
    padding-bottom:20px;
  }
</style>

Changes

For Changing the Links Replace # with your Own Links and the Anchor text with your desired text
That's it , Save Your template and have fun !
If you are interested in adding extra <li> options for that add <li><a class='desiredword' href='#'>text</a></li> between <ul> and </ul> tags.
After implementing the above step , you have to define the class in CSS for that define the class between the style container and hit save.
If you have any Question ask it freely !! Stay Blessed , Happy Blogging !

How To Create Table Of Contents in Blogger

Create Table Of Contents in Blogger : By Creating Table of Contents in your Blog will help you to arrange your Blog Contents category wise.This Widget is specially designed for blogs which contains alot of categories , this widget will enable them to place all the categories along-with the specific posts in a page called "Table of Contents".The most interesting fact about this widget is that it will help the readers to inform that which post is "New" and which is "Old" . The word New will dance with latest posts and Old will be with Old Posts.

LIVE DEMO

How To Create Table Of Contents in Blogger

Get into Blogger Dashboard
Click On Pages
Create a Static Page
Click On HTML of the Page
Copy the below script and paste it into the Page HTML

<script src="//sites.google.com/site/blogger9dotnet/color-css/blogger9.js"></script>
<script src="/feeds/posts/summary?alt=json-in-script&max-results=1000&callback=loadtoc" type="text/javascript"></script>

Name the Page "Table Of Contents" or any thing else
Hit Publish and that's it!

So What's Up : This widget just arrange all the Blog Contents in a social way.And it helps the readers to navigate old and new posts.Stay Blessed ,Happy Blogging!

How To Put a Widget inside a Scroll Box

Maybe you have noticed in several blogs/websites that they have alot of widgets which have just ruined there blog style and space.Now to get rid of these long widgets , you can put them in a Box having a Scroll bar.Any tall widget like Blog Archive etc widgets must be placed in a Scroll box.

This will save your Blog Space and will make your blog easy and navigative for readers.Implementing this Widget will enables you to place your widget content in a Scroll box , so your readers can easily navigate blog contents.In this Scroll box , all titles will be static and can easily be accessed by your Readers.

How To Put a Widget inside a Scroll Box

Find the Widget ID You want to place it in a Scroll box

Visit Blogger Dashboard.

Click On Template
Edit HTML
Search for this Code

]]></b:skin>

Now Copy the below Script and add

it above this Script ]]></b:skin>

/* By thatsBlogging.blogspot.com START */
#WidgetIdYouWant2PlaceinScrollBox .widget-content {
height: 200px;
overflow: auto;
}
/* END */

```
Replace WidgetIdYouWant2PlaceinScrollBox  
```
with Widget ID >>Save Template and that's it!

So What's Up : If You have Any Question regarding this Tut ,
ask freely we are here to reply! Stay Blessed ,Happy Blogging!

Cool Advertise Here Text with Hover Effect

Cool Advertise Here Text with Hover Effect: Keeping Affiliate and Link Selling in view the Ad which will be placed on your site should be an attractive One.Visitors really like creativity and awesomeness of any thing in Your Web Log,it is a common problem these days that every Blogger who Place ads in his/her blog is really a dull One.In This regards,we gonna help you to add a significant Style Advertise Banner which will surely help you to get some bounty from visitors and you will get alot of chances to get advertisement from different Companies.

How To Add Cool Advertise Here Text with Hover Effect

Go To Blogger Dashboard.
Click On Layout
Click On Add a Widget at the Right Side-bar
A Box will Pops-up
Select HTML/JavaScript
Copy the Below Script and paste it over there

<style>#text{-moz-transform:rotate(-5deg);-o-transform:rotate(-5deg);-webkit-transform:rotate(-5deg);color:#FFF!important;font-family:arial;font-size:60px;font-weight:300;letter-spacing:-5.5px;line-height:45px;text-align:center;margin:20px 10px}#text a{color:#333;text-shadow:1px 1px #000, 3px 3px #EEEEEE, 5px 5px #DDDDDD, 7px 7px #AAAAAA, -1px -1px #000;text-transform:lowercase;-moz-transition:all .3s ease-in 0;-webkit-transition:all .3s ease-in 0;-o-transition:all .3s ease-in 0;-kmoz-transition:all .3s ease-in 0}#text a:hover{-moz-transition:all .3s ease-in 0;-webkit-transition:all .3s ease-in 0;-o-transition:all .3s ease-in 0;-kmoz-transition:all .3s ease-in 0;text-shadow:1px 1px #000, 3px 3px #EEEEEE, 5px 5px #DDDDDD, 7px 100px transparent, -1px -100px transparent;color:transparent}inf{color:#d2a}#text a:focus,#text a:active{color:#eee!important;-moz-transition:all 0 ease-in-out!important;-o-transition:all 0 ease-in-out!important;-kmoz-transition:all 0 ease-in-out!important;-webkit-transition:all 0 ease-in-out!important}</style><div id="text" class="rent"><a href="URL" target="blank"><blink>⇝</blink> Here is a free space.<br />Contact <inf>aⅾ??? for more information</inf><blink>⇜</blink></a></div>

Note: Change "URL" to the link of the Page where you want to redirect the visitors when they click the ad.Now Just hit Save and that's it ! Ask any Question freely ;) We are here to Solve Your Problems,Happy Blogging!

Cool Advertise Here Text with Hover Effect
Last Reviewed by Iftikhar on July 31 2013
Rating: 4.5

Special Multilevel DropDown Menu With Fading and Easing Effects...

Before In My Blog I have Posted 2 or More Multilevel and Simple Drop Down Menu..So today I am Here with One More Multilevel Drop Down Menu.. Its With Fading and Easing Effect..

By Looking at this above Preview you may also want to take a look at live demo also.. Yeah!! You can take a look at live demo also below :)

Live Demo

So you can also now add it to your blog..

How to Add To your Blog/Site..

Login to your "Blogger Account" and Go to your Blog "Dashboard"...
Now Go to "Layout Section" from your "Dashboard"...
Now Click On "Add Gadget" and Select "HTML/Java Script"...
Now Copy and Paste the Below Given Set of Codes in it...

Add The Title As you wish and Click Save!!!!!!!!

That's it all Done...

Customization:

Now Replace Links Text Highlighted in Color RED with your Link and PINK With your Category Name..

Useful Note:

You can Also Edit this Widget like Width,Colour etc using HTML Editor of our Blog : HTML Editor..
You can Use Hexadecimal Color Code Generator of our Blog to Replace Colors : HexaDecimal Color Code Generator..

Important Note:

You Can Comment If any Problem Persist.. or Need Help With This Widget..
Any Query or Help Related to this or any other related to Blogger Feel Free to Contact Us..
Within 24 to 48 hours we will get your back the answer for your Question.. .

I hope you all liked and Enjoyed the post..

Join our Facebook Fan Page .:candyroid Tech:.

and

Subscribe for More Latest Updates..

With Regard's

Manjunath.G..

Simple but Dynamic Social Profiles Widget with Subscription Box...

This Widget is not our own creation but I am sharing it as it looks simple and works superb.. I have also added it to my blog/site.. So you may also add it to your blog/site by using this post...

So let's begin..

Once take a look at live Demo.. Live Demo

How to Add this to blogger..

Login to your "Blogger Account" and Go to your Blog "Dashboard"...
Now Go to "Layout Section" from your "Dashboard"...
Now Click On "Add Gadget" and Select "HTML/Java Script"...
Now Copy and Paste the Below Given Set of Codes in it...

Add The Title As you wish and Click Save!!!!!!!!

That's it all Done...

Customization:

Now Replace Links Text Highlighted in Color Facebook,Twitter,Google+,RSS with your Link and candyroid Tech With your Feed Name..

Useful Note:

You can Also Edit this Widget like Width,Colour etc using HTML Editor of our Blog : HTML Editor..
You can Use Hexadecimal Color Code Generator of our Blog to Replace Colors : HexaDecimal Color Code Generator..

Important Note:

You Can Comment If any Problem Persist.. or Need Help With This Widget..
Any Query or Help Related to this or any other related to Blogger Feel Free to Contact Us..
Within 24 to 48 hours we will get your back the answer for your Question.. .

Add New Google+ Follow Badge of your Profile,Page or Community to your Blog/Website ...

Recently I have posted about the Introduction of New Google+ Follow Button by Google on its 2nd year Anniversary of Google+.. i.e., "Google rolls out a new Google+ Follow button for sites and new badges for Communities, Pages, and Profiles ..." so i have mentioned at the end of above mentioned post that I'm gonna post a widget of Google+ Follow Button.. Hence today I will show how to do it..

So lets begin.. Basically Follow below steps to add gadget to your blog..

First Go to "Blogger" and Go to Blog "Dashboard"..
Now go to "Layout Section" From your "Dashboard"..
Now Click on "Add gadget" and Select "HTML/Java Script" from the List..
Now copy the Below set of codes and paste it..
Give the Title As you like..

Profile Code:

Live Demo:

<div class="g-person" data-width="251" data-href="https://plus.google.com/102010470664399562190" data-rel="author"></div>

<script type="text/javascript">
(function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

Community Code:

Live Demo:

<div class="g-community" data-width="251" data-href="https://plus.google.com/113121168842535305114?3" data-showtagline="false" data-showphoto="false"></div>

<script type="text/javascript">
(function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

Removed Description and Profile Image of Community.. because it will look good now..

Page Code:

Live Demo :

<div class="g-page" data-width="250" data-href="//plus.google.com/113121168842535305114" data-rel="publisher"></div>

<script type="text/javascript">
(function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

That's it All Dine!!

Customization:

Now Change The link highlighted in RED with appropriate Profile , Page or Community link..
If you want to adjust the width the change the value highlighted in BLUE..

Awasome 3D Transaction Social Widget on Mosue Hover Version 2..!!!

Hi Guys Today I am here with one more CSS3 3D Transaction Widget.. Its The Modification or Let's say before Version of the "Awesome 3D Transaction Social Widget on Mosue Hover..!!!" ..

Take A look at it..How it Looks.. Live Demo

So If you are New To My Blog you can have a look at my Previous Post Similar to this @

Awesome 3D Transaction Social Widget on Mosue Hover..!!!

So before Lets Begin as Usuall

How To Add This Widget This your Blog:

Login to your "Blogger Account" and Go to your Blog "Dashboard"...
Now Go to "Layout Section" from your "Dashboard"...
Now Click On "Add Gadget" and Select "HTML/Java Script"...
Now Copy and Paste the Below Given Set of Codes in it...

Add The Title As you wish and Click Save!!!!!!!!

That's it all Done...

Customization:

Now Replace Links Text Highlighted in Color Facebook,Twitter,Google+ with your Link..

Useful Note:

You can Also Edit this Widget like Width,Colour etc using HTML Editor of our Blog : HTML Editor..
You can Use Hexadecimal Color Code Generator of our Blog to Replace Colors : HexaDecimal Color Code Generator..

Important Note:

You Can Comment If any Problem Persist.. or Need Help With This Widget..
Any Query or Help Related to this or any other related to Blogger Feel Free to Contact Us..
Within 24 to 48 hours we will get your back the answer for your Question.. .

I hope you all liked and Enjoyed the post..

Join our Facebook Fan Page .:candyroid Tech:.

and

Subscribe for More Latest Updates..

With Regard's

Manjunath.G..

Awasome 3D Transaction Social Widget on Mosue Hover..!!!

Hi guys after a long time ..May be a month I am once again back with New and Effective CSS3 Widgets !!!.. This is also one of the Widget which Join's the Category of "My Own Creation" ..

I am Very Much Exited to post or share this Widget.. Because this is my most favourite widget with awasome css3 transactions effect..Thanks to "Codrops" for sharing CSS3 Hover Effect Tutorials ..Which Inspited me to make this widget...

Take A look at it..How it Looks.. Live Demo

This Widget has Two Versions.. One is colored and other is Non-Colored Version. Only with color code this two varies.. You can also change the Colors According to your Wish or Your Template..You can use our Blog's "HTML Modifier or Editor" to edit HTML and CSS and for Color Codes you can try Our Blog's "Hexadecimal Color Code Generator"...

OK!! Let's Begin as Usual..

How To Add This Widget This your Blog:

Login to your "Blogger Account" and Go to your Blog "Dashboard"...
Now Go to "Layout Section" from your "Dashboard"...
Now Click On "Add Gadget" and Select "HTML/Java Script"...
Now Copy and Paste the Below Given Set of Codes in it...

Add The Title As you wish and Click Save!!!!!!!!

That's it all Done...

Customization:

Now Replace Links Text Highlighted in Color Facebook,Twitter,Google+ with your Link..

Useful Note:

You can Also Edit this Widget like Width,Colour etc using HTML Editor of our Blog : HTML Editor..
You can Use Hexadecimal Color Code Generator of our Blog to Replace Colors : HexaDecimal Color Code Generator..

Important Note:

You Can Comment If any Problem Persist.. or Need Help With This Widget..
Any Query or Help Related to this or any other related to Blogger Feel Free to Contact Us..
Within 24 to 48 hours we will get your back the answer for your Question.. .

I hope you all liked and Enjoyed the post..

Join our Facebook Fan Page .:candyroid Tech:.

and

Subscribe for More Latest Updates..

With Regard's

Manjunath.G..

Simple but Cool & Awesome CSS3 Social Profile Widget with Zooming and Shrinking Effect ..

Today I am Adding One More Widget For "My Own Creation Group or Category".. As you all know I have 3 Widgets of My Own Creation in Before Posts.. So Today Let Me Share My Fourth Widget ..Its Simple Widget Made Using "CSS3" Effects..

Animated Preview :

Also See : How to Create Animated GIF Like Previewing Below..

This Widget Is Made Using the Concept Of Combined CSS3 Tutorials of Different Sites.. Thanks to them..

Live Demo ? :

Facebook
Like Us on Facebook

Twitter
Follow Us on Twitter

Google+
Add Us on Google+

RSS
Subscribe Us on RSS

So Now Lets get Started !!!

How to add this Widget to your Blog..

First Go to "Blogger" >> Then Go to your Blog "Dashboard"..
Now Click on Layout Section in the Left Side of your Blog "Dashboard"..
Now click on "Add Gadget" ..
You will get Many Options ..Scroll Down And Click on to "HTML/Java Script"..
Now Paste The Below Code in it..

Now click save..That's it ..all Done!!

Customization :

Now Replace Links Text Highlighted in Color Facebook,Twitter,Google+,RSS with your Link..

Useful Note:

Update !!!!!!!! Made the CSS Code Shorter by Adding Link..
You can Also Edit this Widget like Width,Colour etc using HTML Editor of our Blog : HTML Editor..
You can Use Hexadecimal Color Code Generator of our Blog to Replace Colors : HexaDecimal Color Code Generator..

Important Note:

You Can Comment If any Problem Persist.. or Need Help With This Widget..
Also in Some Templates it may not be perfect.. In that Case Contact me..

I hope you have found this post helpful..

Don't forget to Subscribe , Comment and Share this post..

With Regard's ,

Manjunath.G..

.:candyroid Tech:.

Friday, 21 February 2014

Add Android Emulator Element in Your Blogger

Thursday, 20 February 2014

Adfly Not Working In India

Friday, 11 October 2013

How To Add Cool Drop Down Menu in Blogger

Changes

Tuesday, 3 September 2013

How To Create Table Of Contents in Blogger

Thursday, 22 August 2013

How To Put a Widget inside a Scroll Box

Tuesday, 30 July 2013

How To Add Cool Advertise Here Text with Hover Effect

Friday, 5 July 2013

How to Add To your Blog/Site..

Customization:

Useful Note:

Important Note:

Monday, 1 July 2013

How to Add this to blogger..

Customization:

Useful Note:

Important Note:

Sunday, 30 June 2013

Profile Code:

Live Demo:

Community Code:

Live Demo:

Page Code:

Live Demo :

Customization:

Wednesday, 26 June 2013

Saturday, 22 June 2013

Friday, 10 May 2013

Facebook

Like Us on Facebook

Twitter

Follow Us on Twitter

Google+

Add Us on Google+

RSS

Subscribe Us on RSS