Cool Hacking Tricks

How to make Modal Window & Popup Boxes with CSS3, Js and Jquery

2015-05-25T07:29:00.001-07:00

Modal boxes are quick operable boxes used for Advertisements, Login/Signup Forms, Contact-forms and Notifications. A modal is a utility tool for a webmaster because it can accommodate all the notifications in one place. A modal can build up by using resources such as Jquery, JavaScript, CSS and HTML.
Popup Box open in new window and loads a particular page but in this tutorial we will use modal popup means it will open in a same window. The popup boxes are used to show something in a new box or window but in this tutorial we will use these dialog boxes for displaying notifications, advertisements and various types of forms.

Demo | A Whole Modal Box Plugin Library

We are going to use CSS3’s target-events, transitions, opacity and overlay adjustment. In Javascript we will use visibility and opacity attributes. In Jquery we use .animate method.

You can download the demos and Modal Box Plugin Library from here.
Click Here to View Demo

This Modal Box Plugins Library contains 8 types of modal and popup windows. Some of them are build up by using Jquery and 2 of the modal are made up of Javascript. It also contains a Simple modal made up with Pure CSS using the Target: Event.

Adding Styles and Animations Link

Before creating a modal box you need to paste the link of CSS Files of modal box and you will also had to paste the link of Javascript/Jquery resources.
Now, let’s go to blogger and edit the template.
Search for <head> and paste the following codes below it.

<link href=”https://dl.dropboxusercontent.com/s/u2spykwmbvk91x3/dialog-box.css” type=”text/css” />
<script src=”https://dl.dropboxusercontent.com/s/zbft9v4qk4u3m72/dialog-box.js” type=”text/javascript” ></script>

After applying these codes you will be able to use our modal box.

Adding HTML Structure

Now, it’s time to add the main HTML structure to your modal box, now we are breaking this tutorial in 3 parts and we will separately discuss about three modal boxes made up with CSS, Jquery And Js.

Creating a Modal with CSS

In this modal box we will use CSS styling and HTML structure only, as we had linked the CSS file above, so we had to create only a HTML structure. We are using a div tag to hold the content in the modal. We are also giving a close button inside the div tag to close the modal.
The HTML structure will look like below-

<div class='modalDialog' id='openmodal'>
<div>
<a class='close' href='#close' title='Close'>x</a>
Your Content Here</div>
</div>

We had allotted the id openmodal to our modal box because it is simple to use and to open the modal box we will use this id as a button of modal. It will look like this-
We will use the ID just as a hook for opening our modal box and to call it we will use this markup.
To open our modal box we will use this syntax-

<a href=”#openmodal”>Open the modal</a>

Now our modal will look like this picture below-

Creating Modals with Jquery-

To create a modal with Jquery we need some Jquery elements and combine them at one place. In this modal box first we need to link up the Jquery Files in order to use their functions.
Search for <head> and paste this script below it-

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js” type=”text/javascript”></script>

Now as I had already told you that we had placed the Jquery files above, now we need to create only HTML structure. In this Jquery modal box we are using only animation like .animate function in which we send our modal box to different location when it is opened or closed.
Let’s create a HTML structure of a Jquery modal box.

<div class="layout" id="layout" style="display:none;"></div>
<div class="dialog-box" id="dialog-box">
<a class="dialog-boxclose" id="dialog-boxclose" title="Close"></a>
YOUR CONTENT HERE</div>

In this Modal dialog box we used the .animate property. When the link of modal is clicked it opens the modal box (the modal comes from upward and visible to us). We also added a close button and when it is clicked modal will go up and hide.
Now, it’s time to create a link to open the modal box. The link will be like this below-

<a href="#" id="activator">Click This Button to open the modal</a>

Now our modal will look like this image-

Creating a Modal with Pure JavaScript

In this section we will create a modal only with Javascript and CSS3. As we told you that we had already linked the javascript and css files then we will create HTML structure only. In this modal box we had used javascript function of visibility it is written as style.visible or we had used style.hidden for hiding the modal box. So let’s create a modal box using javascript and CSS3.
The HTML structure of Modal JS will be like this-

<div id="overlayer">
<div>
Your Content Here
<a onclick='overlay()' style="cursor:pointer;" id="overlayerclose">X</a>
</div>
</div>

Now your modal box is ready to use it. Let’s create a button to open the modal,

<a onclick="overlay()" style="cursor:pointer">Click here to open the modal</a>

This modal will look like-

When to use a Modal Box

Modal box can be used in many ways. After researching on this topic we had concluded that modal boxes can be used for following purposes which includes Promotions, Advertisements, Contact Form, Email Subscription forms, Notification and Login/Register forms.

Login/Register Forms-

Modal boxes are particularly useful when used for login and registration forms. It creates such a streamlined experience for the user, and can really make an impression on your visitors. It displays on the top and it is useful for login forms. The below image is a live example of Login/Resister form.

E-Mail Subscription Forms-

Yes! You can use these modal boxes for building your email through them. In case, if you don’t have any space to add your email form on that page then you can use these modals as a popup window they doesn’t take space on your page and they can be opened slightly. Modal Boxes are the best way to build your email-list and you can configure it according to you. By using Modal popups you can attract your customers in first sight on your page because “First impression is the last impression”.

Displaying Images and Videos

There is also a great benefit of using modal popups that you can use them to display your pictures. If you add images and videos on modal box then it will called a Lightbox. It allows for the user to view the content of your website without leaving the webpage.

Using Modals as a Contact-Form

You can also use modal boxes for contact form. Commonly we display contact-forms in sidebars, footers and even sometimes in pages also. But it is a great idea that you can use the modals as a contact form. Hence it portable and can be opened on any page. This image below is a great example to use modals as a contact-form.

Conclusion

There you have learned a lot of things, now you can create modals on your own using CSS3, Javascript and Jquery. You can use these modal boxes for login/registration forms, advertisements, notifications and much more. You’ve also learned why we are using only CSS on modal #1, using Jquery on Modal #2 and using javascript on modal #3, and seen some examples of how sites use modal boxes and how you can also add them to your site or designs.

Are you thinking that you can add some more stuff on these modals or you can create it by any other method? Let us know by leaving your comments below.

How To Get 1000 Likes on Facebook,Twitter,Youtube in just one day

2015-03-25T21:07:00.000-07:00

Hello friends i am back with a great , Awesome or any thing i can say tricks. It is verrry awesome. Now i will explain about it, Its name is AddMeFast . It is very awesome website. I am saying alot of this because this website allows you to grow traffic. This Site is very useful for beginners for bloggers. It is used for getting 1000 likes on facebook page in one day. Many times i searched that some peoples say that "how to get 1000 likes on facebook page in one day free" or "how to get 1000 likes on facebook photo in one day" or "how to get 1000 likes on facebook page in one day" but you know what is common in these searches, the common thing is getting likes on facebook in just one day. So , ultimately it means that ADDMEFAST enhances your profile and after some time you will get thousand of likes in facebook in just one hour or one day. So now take a coffee because now this post is going to be bit longer...

SEE This Video

Features of AddMeFast.com

So there are many features of this website few of them are listed here

At first, You will get 50 coins.
Get 1000 likes on facebook in just one day.
Get 1000 followers on twitter in one day.
Get 1000 followers on Pinterest in one day.
Get 1000 followers on Google Plus in one day.
Get 1000 followers on Vine in one day.
There is a affiliate program also in which you will get 300 points on reffering a customer.

How To Get Hits On your Site/Facebook Page/twitter/Google+

Now this matters that how we can get these hits, Don't worry i am here, i will tell you how to drive a lot of traffic on your site/pages/social-media's...

1. Go to Addmefast.com

2. Create An Account (Sign Up).

3. After confirming your account you will be redirected to a dashboard of your profile.
4. Now Click on Add A Page Button (see image below)

5. Now fill up the form and hit SAVE CHANGES (See image Below)

You can choose what you likes for e.g- Facebook Likes,Shares.

CPC- CPC is the cost means anyone who likes your photo that points will added to him.

page URL- You had to paste your page URL on that column

6. Now , you had done, Now after some times you are began to becoming popular.

How to get Points on Addmefast

Now when your points are empty then you need to earn points so that you will gain success, for earning points the Addmefast offers many ways in which you can earn points.

1. Facebook- you can earn points by following,sharing and liking others page or photo in facebook.

2. Twitter- you can earn points by following,tweeting and re-tweeting others profile in twitter.

3. Instagram- you can earn points by following and liking others profile in instagram.

4. GooglePlus - you can earn points by following,adding to circles and sharing others profile in google+

5. Youtube- you can earn points by subscribing,viewing,favoring and sharing others channel in youtube.

6. Vine- you can earn points by following and sharing others profile in vine.

So Just follow others and share/like/subscribe/add to circles/favorite/view/and many more ..and get free points.

Offer:-Must See-

it is the latest offer that if you share/like/subscribe/add to circles/favorite/view others profile/page or channel then you will get free 200 Bonus points.

How To Get Unlimited Points on ADDMEFAST

We Know that getting one by one point are very hard. But if you try this trick you will get assured millions of points. We are not using any bots or hacking it is just a simple trick.

1. You will required Mozilla Firefox installed on your PC. if you haven't , Click here to download it.

2. We will have to use iMacros Addon or Extention For Mozilla Firefox. Click here to download iMacros addon.

3. Now download Any one of the script below in which you want to get points.

Script Courtesy- http://focdownloads.blogspot.in/

Auto Facebook page Liker

Auto Twitter Follower

Auto Facebook Share

Auto Twitter Retweets
Auto Facebook Post Liker

Auto Facebook Follower

Auto Twitter Favourites

4. Now extract the downloaded script. And Copy that script.

5. Paste that script on folder-

C:\Users\<username>\Documents\iMacros\Macros\Demo-Firefox\

6. Now Run the Firefox. And Go to Addmefast , Sign in .

7. Now you see a add-on located at side of the address bar.(See image below)

8. Now click on iMacros add-on and Double Click on SCRIPTYOUDOWNLOADED.js (Script name can be different as you downloaded) A popup will be appear add here add 99999 mean max value and click on OK.

9. Now, You had done, after 1 minute Automatic Actions will be start and you will gain unlimited points after 1 or 2 hours.

Conclusion

in this tutorial i had explained every thing and also uploaded a video especially for my readers. Even if you get a problem on this process then you can watch the video for doubts clearing or you can freely ask me by commenting below. If you like this tutorial helpful then please share this.

Hide Sidebar and make a full width Page in Blogger

2015-02-24T08:15:00.000-08:00

Hello Friends, In this tutorial we will discuss in four sections or we can take four Cases. Our topic will be “how to hide a sidebar in static pages and create a full width page on blogger”. We will first take an example to show importance of hiding the sidebar and make a full width page. Suppose you had to create a 404 error page to your blog-spot blog, now you need a full width page in which you had to put your content, then what will you do? Don’t worry we will here to solve your problem. Now you had to put this syntax on blog template. We will discuss this problem by taking four cases. So First Let me clear about this tutorial.

Hide Sidebar and make a full width Page in Blogger

Why We Need To Create A Full Width Page

Uses Of Full Width Pages In Blogger-Full Width Pages are used to create a neat and clean page which is commonly called a 404 error page. Do you ever noticed that our contact page, color code generator page, error 404 page doesn't contain sidebar . Yes this is possible due to A CSS Code That i am using in my blog. Now I am going to share that codes with you. Now let's Consider Your Blog , it doesn't automatically adjust width of your pages but if you put this little code on your blog you will able to customize the whole sidebar in static pages or posts.

Advantages Of Creating Full Width Page Or Post

There Are many advantages of creating a full width page some of them are listed below-

Neat And Clean Page Or Post
Attract More and More Visitors To your Blog
You Can Hide Things Like Sidebar, Header And Footer

So There Are 4 Cases In which I will tell you how to hide
sidebar and make a full width page

Also Read:
Hide Blog Widgets In Certain Pages.
Best Time To Post On Social Media

CASE 1

In Case 1, If you want to Hide Sidebars and header only then you can use this css code.
Now Follow These Steps to hide sidebar and header.
Note- You can Apply this code to pages as well as posts.

Go To Blogger > Dashboard > Templates.
Now Click On Edit HTML.
Search For </b:template-skin> and paste this code below.

<b:if cond='data:blog.pageType == "static_page"'>
<style>
.main-inner .columns {
padding-left: 0px !important;
padding-right: 0px !important;
}
.main-inner .fauxcolumn-center-outer {
left: 0px !important;
right: 0px !important;
}
.main-inner .fauxcolumn-left-outer, .main-inner .fauxcolumn-right-outer, .main-inner .column-left-outer, .main-inner .column-right-outer {
display: none !important;
}
</style>
</b:if>

Now Save Your Template, And Visit To your Site or a particular page you will see these changes.

CASE 2

In Case 2, If you want to Hide The Whole Contents Including Header, Sidebar, Footer, Side Columns on a Particular Post or Page then you use this code so it will hide the whole contents except body of the page.
Now Follow These Steps to hide sidebar and header.
Note- You can Apply this code to pages as well as posts.

Go To Blogger And Open a Post Or Page.
Now Click On HTML section.
Now Paste This Code Below.

<style> #sidebar-wrapper, #midsidebar-wrapper, .gapad2, .blog-pager, .post-header-line-1, .post-footer { display:none !important;} #main-wrapper { width:98%!important;} .post { width:98%!important; } </style>

Now Save Your Template, And Visit To your Site or a particular page you will see that the whole Contents is hided except post body.

Conclusion

This Tutorial is all about hiding sidebar, in case if you have any problem with this content then please give us feedback to improve more. Kindly Share Our Post To Social Sites. Have Fun :-)

The Perfect Execution To Conversion Rate Optimization

2015-02-16T06:31:00.001-08:00

Courtesy of: Quick Sprout
Now Its Your Time To Share This-
<input><a href="https://www.blogger.com/blogger.g?blogID=1493586261159969939#"><img alt="The Perfect Execution to Conversion Rate Optimization" border="0" src="http://quicksprout.wpengine.netdna-cdn.com/wp-content/uploads/2015/01/The-Perfect-Execution-to-Conversion-Rate-Optimization.jpg" title="The Perfect Execution to Conversion Rate Optimization" /></a></div>
<div>
Courtesy of: <a href="http://www.quicksprout.com/">Quick Sprout</a></div></input>

Our New Short URL

2015-02-09T09:54:00.001-08:00

Hello Friends I Just Want to share you something that we had moved on a short url by bit.ly. You know that hackintricks4u and adding the blogspot is very difficult to learn and understand. So , we had created an alternate url of our blog and i want to share it with you. So please share my short link and in return i will place your website name in front of my homepage and by that you will get thousands of visitors per months so friends let share it.

bit.ly/hackintricks

Best Time To Post On Social Media And Social Network Sites

2015-02-09T09:15:00.002-08:00

Image Credits To: Quick Sprout
Thanks To Neil Patel To Share This Great Content

Now It Is Your Time To Share This:-

<div style="clear:both">
<a href="http://www.hackintricks4u.blogspot.com"></a></div>
<div>
Courtesy of: <a href="http://www.quicksprout.com/2015/01/02/what-are-the-best-times-to-post-on-social-media/">Quick Sprout</a></div>

How To Add A Custom Scroll bar in Blogs using CSS

2015-01-08T07:48:00.000-08:00

A Scroll bar is located at the right of the browser. It is a main part of your template designing, it upgrades the look of your template or blog. So it necessary to customize it according to your blog template. This tutorial is about how we can customize the scroll bar on blogs using css. Here we need css to add a custom scroll bar on your blog.

Adding A Custom Scroll bar In Blogspot Blogs

Follow the steps below to add a custom scroll bar on your blog-

Go To Blogger>Dashboard>Template.
Select Edit HTML.
Search For </b:skin> and paste the code just above it.

/*-----Custom ScrollBar By Hackintricks4u.blogspot.com---*/
::-webkit-scrollbar{width:12px;height:8px}
::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 4px rgba(0,0,0,0.3);background:#ffffff}
::-webkit-scrollbar-thumb{background: rgba(43,22,22,0.8);-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.5)}
::-webkit-scrollbar-thumb:window-inactive{background:rgba(43,22,22,0.4)}

To change the Height And Width of scroll bar just Change The width:12px;height:8px to your desired number . For Changing The Color Of Scroll Bar just change the rgba(43,22,22,0.8) to your desired color you can choose it from our color code generator click here.
Now save your Template and Enjoy.

How To Hide The Whole Sidebar in a Certain Pages

2015-01-07T07:35:00.000-08:00

Hello friends i am back with a great blogger tutorial that is how to hide the whole sidebar from a certain page or all pages. As the heading suggests that how we can hide the sidebar contained of all widgets from all of the static pages on your blog.Note-Sidebar is a collection of all widgets arranged vertically in blogs. Generally blogger shows all the widgets on all pages but i have a code by using that you can hide the sidebar from the static pages. This code is used to hide sidebar in pages like Contact Us page or HTML Editor Pages. By hiding the whole sidebar from the static pages you can expand the post width to full size hence you will got full width space on your blog page. Now let's add this code to your Blog. but remember first see the demo of this.

Demo

How To Hide The SideBar From The Static Pages

Now Let's Add this syntax to your blog-

Go to Blogger dashboard.
Select Template option and Click Edit HTML.
In the template code search for </b:skin> and paste following code below it .

<b:if cond='data:blog.pageType == "static_page"'>
<style>
.main-inner .columns {
padding-left: 0px !important;
padding-right: 0px !important;
}
.main-inner .fauxcolumn-center-outer {
left: 0px !important;
right: 0px !important;
}
.main-inner .fauxcolumn-left-outer, .main-inner .fauxcolumn-right-outer, .main-inner .column-left-outer, .main-inner .column-right-outer {
display: none !important;
}
</style>
</b:if>

Now Save your template and see the magic , Now the sidebar will not appear in the static pages on your blog.

Remove Credits Link in Any Blogger Template- 100% Working

2015-01-01T09:06:00.000-08:00

Removing Credits From Any Template

Hello Friends , I wish you a very happy new year "2015". On occasion of Newyear's day celebration I brought a very important And Must read tutorial that is 'How to remove credits link in any blogger template' . Template makers such as Dapinder, templateism are offers their free blogge templates in form of .xml extension. but we had to put their credits links as a return . But many of the bloggers don't want that their blog readers would not follow those links , So for helping those bloggers I am here to solve this problem. So let first consider the templates of templateism.

How To Remove/Modify Credits Link From Templateism's Template

Templateism Is A Good Quality Template Maker and has about 1 million template users around the world . It is the popular template maker and maded more than 100+ templates free for blogger users. It is a professional template designing website. it provides hundreds of free templates . however to use them in our website we had to keep credits of templateism on our blog which is located at the bottom of the page. But don't worry my friends Today i am here to solve this problem That how we can remove credits link from templateism templates. So let;s begin the process of removing or modifying blog credits.

Remove Credits Link from Templateisms Blog Template

[ Backup Your Template First]
1. Go to Blogger Dashboard>Template>Edit HTML.
2. Search the code using Ctrl+F shortcut key-

//<![CDATA[

3. There are many such codes.Find something which looks like this image below

Enlarage This image Click Here

4. Select the code just below as shown in above picture and delete the whole script.

//<![CDATA[ SOME CODE HERE //]]>

5. Now Search the word mycontent and change that word like Hackintricks4uBlog.
it can be written as- <div id='my content'>
6. Now change/ remove credit link as you want .
7. Now Save the Template.

Now you have done ! Visit your blog you will see your credits not of Templateism.

How To Remove Credits Links From Any Template

Now in second section of post we will discuss on topic 'How to remove credit link from any template like MKR site, Dapinder and many more;s template. Now In this section these sites provides some different types of javascript of protecting their credit link.but don't worry i am here, These sites provides a javascript by which they protect their credit link but in this case if you remove those javascript then you will be redirected to their homepage. for e.g- If you will try to remove the credit link of dapinder then you will be redirected to their home page meant dapinder.com. So Avoiding this mistake you had to follow my steps then you will be able to modify or remove the credits link from any other template designers. I had successfully tried these tricks on my blogs such as Read All Goosebumps Blog if you visit that blog you will find that credits are of my website but it is actually designed by dapinders. Okay now focus on removing credit. When you remove the scripts you need to put additional script in absence of those scripts like when you remove the protecting credit link script you will find that the images are displaying of full size rather than it displays the thumbnail images so for preventing this you had to put additional scripts on your blog so it will recover your images thumbnail , now you are thinking that this takes a lot of time but don't worry it takes only five minutes if you follow my steps correctly. So now you understanded the terms and conditions , Now let;s begin this process-

Let's Consider That you had to remove the credit link of Dapinder.Com template then ,

Follow these steps below to remove credits links from dapindar's template-

1.Go to Blogger>Template>Edit HTML. (Note:- Backup your Template Before proceeding)
2. Search the word using Ctrl+F Shortcut key

//<![CDATA[

3. Now delete the Scripts such as shown in image below-

Delete Script 1 Enlarge image Click Here

Delete Script 2 Enlarge image Click Here

Delete Script 3 Enlarge image Click Here

The Common Thing in Script 1 and Script 3 is they have some common words like p,a,c,k,e,d you can also search this word and delete the scripts.

4. After deleting Script 1,2 and 3 proceed to next step, that is
removing or modifying the credits
just search for 'my-credits' or 'my-content' or any other word that your template uses. Now you will get result like below-

5. Finally you can change the credits link or remove the whole code of footer. if you want to change the credit link just replace their link from it like the upper image is showing to you.
6. After Modifying Credits , Save the Template, And visit your blog Now you will see your credits.

Have Fun !!!! This is New Year Gift From HT4U To my Blog Readers. Keep Reading!!!!

If you found any error ,Leave you few words if it helped you or leave you query if you did not get the right solution.I will personally help you.Or Fill our Contact form.0
if you found this article helpful then please share our blog post or leave a comment for us. Have Fun :-) !!!!

How to Show or Hide Widget on certain Pages on Blogger

2014-12-29T05:32:00.000-08:00

Show/Hide Widgets in Blog

Hello friends.. finally after two weeks i am back with a great blogger trick in which i will tell you about the ways by which you can show or hide blogger widgets from specific pages like static pages, particular post, archive pages or a certain page. By default blogger shows all the widgets on all page but by using this code you can configure that widget according to you.Today it became a major topic that how we can hide widgets from specific pages in blogger . I also got this problem when i am designing the html editor for my blog it also takes a large space to fit around that is why i need to remove or hide the widgets from that specific page. This way one day i got an idea to use this conditional attribute which is now i am going to share with you. So friends now don't take tension i am here to solve your problem. In this tutorial I will tell you about a simple trick for the blogger widgets. In this tutorial/trick we will discuss about how you can show or hide widgets from a certain pages. One of my blog reader asked me this question that ‘I want to hide widgets from a specific page’ in reply of that comment I am posting this tutorial for all blogger bogs and other platform. In this tutorial we will highlight some qualities of codes or conditional tags that are used to show or hide an element form a specific page. In this tutorial we will focus on seven conditional tags to show or hide widgets in static, archive or certain pages. So let’s begin-

How To Show or Hide A Widget/Gadget On a certain Page of Blogger?

Now Follow these steps below-

Go to Blogger Dashboard > Layout > Add a Gadget > Html/java Script.
Go to Template and Click on Edit HTML
Find the name of the widget by using CTRL+F. Let’s take a widget that name is ( Recent Posts ). After searching this name. You find a similar code like this.

<b:widget id='HTML5' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

After you find widget’s code add the following conditional tags marked with orange just below and above to hide the widget from specific pages or posts in Blogger.

To show the widget only in Homepage

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if></b:includable>
</b:widget>

To show Blogger widget only in post pages

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if></b:includable>
</b:widget>

To show the widget in a specific page

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == "URL of the page"'>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if></b:includable>
</b:widget>

Note: Replace the URL of the page with your website link .

To hide a widget only in a particular page

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url != "URL of the page"'>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if></b:includable>
</b:widget>

To show widgets only in static pages

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "static_page"'>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if></b:includable>
</b:widget>

To hide widgets in Static Pages

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if></b:includable>
</b:widget>

To show widgets only in Archive Pages

<b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "archive"'>
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if></b:includable>
</b:widget>

After adding any of these conditional tags in your desired widget, Save your Template and View your Blog.now that widget will show/hided according to you.

If you found this article helpful then please share our post and add your comments also.

CSS Color Charts For Blogger Blogs-Part 2

2014-12-25T23:17:00.000-08:00

Hello Friends I am back with a great Css color chart, previously I had posted about a table of html colors. Now I am going to post about adding this cool html color chart made by us with the help of css.It takes a lot time to create this html color chart. But now I am releasing this color chart for blogger blogs So, Have fun with this css color chart. Now follow these steps below to add this html clor chart to your blog.

Read also-

How to add this color chart to your blog-

1. Go to blogger>Template

2. Click on edit html and add the css code just above ]]></b:skin> inside your blogger template.

.ht4u_over { border: 1px dotted #fff; background: #8899ff; }

.ht4u_out { border: 0px; }

3. Now add the code below in the edit html section of your posts-

<center> <table cellspacing="2" cellpadding="4" width="551" border="0"><tbody> <tr> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="89" bgcolor="#ffffff"><font color="#004000">#FFFFFF</font> </td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="89" bgcolor="#ffffcc"><font color="#004000">#FFFFCC</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#ffff99"><font color="#004000">#FFFF99</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#ffff66"><font color="#004000">#FFFF66</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#ffff33"><font color="#004000">#FFFF33</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="96" bgcolor="#ffff00"><font color="#004000">#FFFF00</font></td> </tr> <tr> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="89" bgcolor="#ffccff"><font color="#004000">#FFCCFF</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="89" bgcolor="#ffcccc"><font color="#004000">#FFCCCC</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#ffcc99"><font color="#004000">#FFCC99</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#ffcc66"><font color="#004000">#FFCC66</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#ffcc33"><font color="#004000">#FFCC33</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="96" bgcolor="#ffcc00"><font color="#004000">#FFCC00</font></td> </tr> <tr> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="90" bgcolor="#ff99ff"><font color="#004000">#FF99FF</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="88" bgcolor="#ff99cc"><font color="#004000">#FF99CC</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#ff9999"><font color="#004000">#FF9999</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#ff9966"><font color="#004000">#FF9966</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#ff9933"><font color="#004000">#FF9933</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="96" bgcolor="#ff9900"><font color="#004000">#FF9900</font></td> </tr> <tr> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="90" bgcolor="#ff66ff"><font color="#ffffff">#FF66FF</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="88" bgcolor="#ff66cc"><font color="#ffffff">#FF66CC</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#ff6699"><font color="#ffffff">#FF6699</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#ff6666"><font color="#ffffff">#FF6666</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#ff6633"><font color="#ffffff">#FF6633</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="96" bgcolor="#ff6600"><font color="#ffffff">#FF6600</font></td> </tr> <tr> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="90" bgcolor="#ff33ff"><font color="#ffffff">#FF33FF</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="88" bgcolor="#ff33cc"><font color="#ffffff">#FF33CC</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#ff3399"><font color="#ffffff">#FF3399</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#ff3366"><font color="#ffffff">#FF3366</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#ff3333"><font color="#ffffff">#FF3333</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="96" bgcolor="#ff3300"><font color="#ffffff">#FF3300</font></td> </tr> <tr> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="90" bgcolor="#ff00ff"><font color="#ffffff">#FF00FF</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="88" bgcolor="#ff00cc"><font color="#ffffff">#FF00CC</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#ff0099"><font color="#ffffff">#FF0099</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#ff0066"><font color="#ffffff">#FF0066</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#ff0033"><font color="#ffffff">#FF0033</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="96" bgcolor="#ff0000"><font color="#ffffff">#FF0000</font></td> </tr> </tbody></table> </center> <p></p> <center> <table cellspacing="2" cellpadding="4" width="551" border="0"><tbody> <tr> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="89" bgcolor="#ccffff"><font color="#004000">#CCFFFF</font> </td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="89" bgcolor="#ccffcc"><font color="#004000">#CCFFCC</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#ccff99"><font color="#004000">#CCFF99</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#ccff66"><font color="#004000">#CCFF66</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#ccff33"><font color="#004000">#CCFF33</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="96" bgcolor="#ccff00"><font color="#004000">#CCFF00</font></td> </tr> <tr> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="89" bgcolor="#ccccff"><font color="#004000">#CCCCFF</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="89" bgcolor="#cccccc"><font color="#004000">#CCCCCC</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#cccc99"><font color="#004000">#CCCC99</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#cccc66"><font color="#004000">#CCCC66</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#cccc33"><font color="#004000">#CCCC33</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="96" bgcolor="#cccc00"><font color="#004000">#CCCC00</font></td> </tr> <tr> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="90" bgcolor="#cc99ff"><font color="#004000">#CC99FF</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="88" bgcolor="#cc99cc"><font color="#004000">#CC99CC</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#cc9999"><font color="#004000">#CC9999</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#cc9966"><font color="#004000">#CC9966</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#cc9933"><font color="#004000">#CC9933</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="96" bgcolor="#cc9900"><font color="#004000">#CC9900</font></td> </tr> <tr> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="90" bgcolor="#cc66ff"><font color="#ffffff">#CC66FF</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="88" bgcolor="#cc66cc"><font color="#ffffff">#CC66CC</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#cc6699"><font color="#ffffff">#CC6699</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#cc6666"><font color="#ffffff">#CC6666</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#cc6633"><font color="#ffffff">#CC6633</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="96" bgcolor="#cc6600"><font color="#ffffff">#CC6600</font></td> </tr> <tr> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="90" bgcolor="#cc33ff"><font color="#ffffff">#CC33FF</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="88" bgcolor="#cc33cc"><font color="#ffffff">#CC33CC</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#cc3399"><font color="#ffffff">#CC3399</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#cc3366"><font color="#ffffff">#CC3366</font></td> <td onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#cc3333"><font color="#ffffff">#CC3333</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="96" bgcolor="#cc3300"><font color="#ffffff">#CC3300</font></td> </tr> <tr> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="90" bgcolor="#cc00ff"><font color="#ffffff">#CC00FF</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="88" bgcolor="#cc00cc"><font color="#ffffff">#CC00CC</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#cc0099"><font color="#ffffff">#CC0099</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#cc0066"><font color="#ffffff">#CC0066</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#cc0033"><font color="#ffffff">#CC0033</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="96" bgcolor="#cc0000"><font color="#ffffff">#CC0000</font></td> </tr> </tbody></table> </center><center> </center><center> <table cellspacing="2" cellpadding="4" width="551" border="0"><tbody> <tr> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="91" bgcolor="#99ffff"><font color="#004000">#99FFFF</font> </td> <td onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="89" bgcolor="#99ffcc"><font color="#004000">#99FFCC</font></td> <td onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#99ff99"><font color="#004000">#99FF99</font></td> <td onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="86" bgcolor="#99ff66"><font color="#004000">#99FF66</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="86" bgcolor="#99ff33"><font color="#004000">#99FF33</font></td> <td onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="96" bgcolor="#99ff00"><font color="#004000">#99FF00</font></td> </tr> <tr> <td onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="89" bgcolor="#99ccff"><font color="#004000">#99CCFF</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="89" bgcolor="#99cccc"><font color="#004000">#99CCCC</font></td> <td onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#99cc99"><font color="#004000">#99CC99</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#99cc66"><font color="#004000">#99CC66</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#99cc33"><font color="#004000">#99CC33</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="96" bgcolor="#99cc00"><font color="#004000">#99CC00</font></td> </tr> <tr> <td onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="90" bgcolor="#9999ff"><font color="#004000">#9999FF</font></td> <td onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="88" bgcolor="#9999cc"><font color="#004000">#9999CC</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#999999"><font color="#004000">#999999</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#999966"><font color="#004000">#999966</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#999933"><font color="#004000">#999933</font></td> <td onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="96" bgcolor="#999900"><font color="#004000">#999900</font></td> </tr> <tr> <td onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="90" bgcolor="#9966ff"><font color="#ffffff">#9966FF</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="88" bgcolor="#9966cc"><font color="#ffffff">#9966CC</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#996699"><font color="#ffffff">#996699</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#996666"><font color="#ffffff">#996666</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#999933"><font color="#ffffff">#999933</font></td> <td onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="96" bgcolor="#999900"><font color="#ffffff">#999900</font></td> </tr> <tr> <td onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="90" bgcolor="#9933ff"><font color="#ffffff">#9933FF</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="88" bgcolor="#9933cc"><font color="#ffffff">#9933CC</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#993399"><font color="#ffffff">#993399</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#993366"><font color="#ffffff">#993366</font></td> <td onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#993333"><font color="#ffffff">#993333</font></td> <td onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="96" bgcolor="#993300"><font color="#ffffff">#993300</font></td> </tr> <tr> <td onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="90" bgcolor="#9900ff"><font color="#ffffff">#9900FF</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="88" bgcolor="#9900cc"><font color="#ffffff">#9900CC</font></td> <td onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#990099"><font color="#ffffff">#990099</font></td> <td onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#990066"><font color="#ffffff">#990066</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#990033"><font color="#ffffff">#990033</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="96" bgcolor="#990000"><font color="#ffffff">#990000</font></td> </tr> </tbody></table> </center> <p><tt></tt></p> <center> <table cellspacing="2" cellpadding="4" width="551" border="0"><tbody> <tr> <td onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="91" bgcolor="#66ffff"><font color="#004000">#66FFFF</font> </td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="89" bgcolor="#66ffcc"><font color="#004000">#66FFCC</font></td> <td onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#66ff99"><font color="#004000">#66FF99</font></td> <td onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="86" bgcolor="#66ff66"><font color="#004000">#66FF66</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="86" bgcolor="#66ff33"><font color="#004000">#66FF33</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="96" bgcolor="#66ff00"><font color="#004000">#66FF00</font></td> </tr> <tr> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="89" bgcolor="#66ccff"><font color="#004000">#66CCFF</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="89" bgcolor="#66cccc"><font color="#004000">#66CCCC</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#66cc99"><font color="#004000">#66CC99</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#66cc66"><font color="#004000">#66CC66</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#66cc33"><font color="#004000">#66CC33</font></td> <td onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="96" bgcolor="#66cc00"><font color="#004000">#66CC00</font></td> </tr> <tr> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="90" bgcolor="#6699ff"><font color="#004000">#6699FF</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="88" bgcolor="#6699cc"><font color="#004000">#6699CC</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#669999"><font color="#004000">#669999</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#669966"><font color="#004000">#669966</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#669933"><font color="#004000">#669933</font></td> <td onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="96" bgcolor="#669900"><font color="#004000">#669900</font></td> </tr> <tr> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="90" bgcolor="#6666ff"><font color="#ffffff">#6666FF</font> </td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="88" bgcolor="#6666cc"><font color="#ffffff">#6666CC</font> </td> <td onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#666699"><font color="#ffffff">#666699</font> </td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#666666"><font color="#ffffff">#666666</font> </td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#666633"><font color="#ffffff">#666633</font> </td> <td onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="96" bgcolor="#666600"><font color="#ffffff">#666600</font> </td> </tr> <tr> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="90" bgcolor="#6633ff"><font color="#ffffff">#6633FF</font> </td> <td onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="88" bgcolor="#6633cc"><font color="#ffffff">#6633CC</font> </td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#663399"><font color="#ffffff">#663399</font> </td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#663366"><font color="#ffffff">#663366</font> </td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#663333"><font color="#ffffff">#663333</font> </td> <td onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="96" bgcolor="#663300"><font color="#ffffff">#663300</font> </td> </tr> <tr> <td onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="90" bgcolor="#6600ff"><font color="#ffffff">#6600FF</font> </td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="88" bgcolor="#6600cc"><font color="#ffffff">#6600CC</font> </td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#660099"><font color="#ffffff">#660099</font> </td> <td onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#660066"><font color="#ffffff">#660066</font> </td> <td onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#660033"><font color="#ffffff">#660033</font> </td> <td onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="96" bgcolor="#660000"><font color="#ffffff">#660000</font> </td> </tr> </tbody></table> </center> <p><font color="#ffffff"></font></p> <center> <table cellspacing="2" cellpadding="4" width="551" border="0"><tbody> <tr> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="91" bgcolor="#33ffff"><font color="#004000">#33FFFF</font> </td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="89" bgcolor="#33ffcc"><font color="#004000">#33FFCC</font></td> <td onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#33ff99"><font color="#004000">#33FF99</font></td> <td onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="86" bgcolor="#33ff66"><font color="#004000">#33FF66</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="86" bgcolor="#33ff33"><font color="#004000">#33FF33</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="96" bgcolor="#33ff00"><font color="#004000">#33FF00</font></td> </tr> <tr> <td onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="89" bgcolor="#03ccf0"><font color="#004000">#33CCFF</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="89" bgcolor="#33cccc"><font color="#004000">#33CCCC</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#33cc99"><font color="#004000">#33CC99</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#33cc66"><font color="#004000">#33CC66</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#33cc33"><font color="#004000">#33CC33</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="96" bgcolor="#33cc00"><font color="#004000">#33CC00</font></td> </tr> <tr> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="90" bgcolor="#3399ff"><font color="#004000">#3399FF</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="88" bgcolor="#3399cc"><font color="#004000">#3399CC</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#339999"><font color="#004000">#339999</font></td> <td onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#339966"><font color="#004000">#339966</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#339933"><font color="#004000">#339933</font></td> <td onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="96" bgcolor="#339900"><font color="#004000">#339900</font></td> </tr> <tr> <td onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="90" bgcolor="#3366ff"><font color="#ffffff">#3366FF</font> </td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="88" bgcolor="#3366cc"><font color="#ffffff">#3366CC</font> </td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#336699"><font color="#ffffff">#336699</font> </td> <td onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#336666"><font color="#ffffff">#336666</font> </td> <td onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#336633"><font color="#ffffff">#336633</font> </td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="96" bgcolor="#336600"><font color="#ffffff">#336600</font> </td> </tr> <tr> <td onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="90" bgcolor="#3333ff"><font color="#ffffff">#3333FF</font> </td> <td onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="88" bgcolor="#3333cc"><font color="#ffffff">#3333CC</font> </td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#333399"><font color="#ffffff">#333399</font> </td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#333366"><font color="#ffffff">#333366</font> </td> <td onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#333333"><font color="#ffffff">#333333</font> </td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="96" bgcolor="#333300"><font color="#ffffff">#333300</font> </td> </tr> <tr> <td onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="90" bgcolor="#3300ff"><font color="#ffffff">#3300FF</font> </td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="88" bgcolor="#3300cc"><font color="#ffffff">#3300CC</font> </td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#330099"><font color="#ffffff">#330099</font> </td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#330066"><font color="#ffffff">#330066</font> </td> <td onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#330033"><font color="#ffffff">#330033</font> </td> <td onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="96" bgcolor="#330000"><font color="#ffffff">#330000</font> </td> </tr> </tbody></table> </center> <p></p> <center> <table cellspacing="2" cellpadding="4" width="551" border="0"><tbody> <tr> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="91" bgcolor="#00ffff"><font color="#004000">#00FFFF</font> </td> <td onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="89" bgcolor="#00ffcc"><font color="#004000">#00FFCC</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#00ff99"><font color="#004000">#00FF99</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="86" bgcolor="#00ff66"><font color="#004000">#00FF66</font></td> <td onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="86" bgcolor="#00ff33"><font color="#004000">#00FF33</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="96" bgcolor="#00ff00"><font color="#004000">#00FF00</font></td> </tr> <tr> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="89" bgcolor="#00ccff"><font color="#004000">#00CCFF</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="89" bgcolor="#00cccc"><font color="#004000">#00CCCC</font></td> <td onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#00cc99"><font color="#004000">#00CC99</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#00cc66"><font color="#004000">#00CC66</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#00cc33"><font color="#004000">#00CC33</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="96" bgcolor="#00cc00"><font color="#004000">#00CC00</font></td> </tr> <tr> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="90" bgcolor="#0099ff"><font color="#004000">#0099FF</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="88" bgcolor="#0099cc"><font color="#004000">#0099CC</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#009999"><font color="#004000">#009999</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#009966"><font color="#004000">#009966</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#009933"><font color="#004000">#009933</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="96" bgcolor="#009900"><font color="#004000">#009900</font></td> </tr> <tr> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="90" bgcolor="#0066ff"><font color="#ffffff">#0066FF</font> </td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="88" bgcolor="#0066cc"><font color="#ffffff">#0066CC</font> </td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#006699"><font color="#ffffff">#006699</font> </td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#006666"><font color="#ffffff">#006666</font> </td> <td onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#006633"><font color="#ffffff">#006633</font> </td> <td onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="96" bgcolor="#006600"><font color="#ffffff">#006600</font> </td> </tr> <tr> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="90" bgcolor="#0033ff"><font color="#ffffff">#0033FF</font></td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="88" bgcolor="#0033cc"><font color="#ffffff">#0033CC</font></td> <td onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#003399"><font color="#ffffff">#003399</font> </td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#003366"><font color="#ffffff">#003366</font> </td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#003333"><font color="#ffffff">#003333</font> </td> <td onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="96" bgcolor="#003300"><font color="#ffffff">#003300</font> </td> </tr> <tr> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="90" bgcolor="#0000ff"><font color="#ffffff">#0000FF</font> </td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="88" bgcolor="#0000cc"><font color="#ffffff">#0000CC</font> </td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#000099"><font color="#ffffff">#000099</font> </td> <td onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#000066"><font color="#ffffff">#000066</font> </td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="87" bgcolor="#000033"><font color="#ffffff">#000033</font> </td> <td class="ht4u_out" onmouseover="this.className='ht4u_over';" onmouseout="this.className='ht4u_out';" valign="top" width="96" bgcolor="#000000"><font color="#ffffff">#000000</font> </td> </tr> </tbody></table> </center>

Have fun with this great css chart, kindly bookmark us or share our page.

Releasing Color Table For Blogger

2014-12-25T20:14:00.001-08:00

Hello Friends I am back with a great web tutorial that is useful for beginners of bloggers. Did you see this color table below, Yes I am talking about it this is a color table in which the html codes of colors are given. The interesting thing in this html color table is that you can find all of the colors here in a single table. This is very attractive and good look table created by me. This table contains html code of 132 colors, yes this is true, it contain 132 html codes of color which is very huge amount of code for a beginner of blogging. These codes are used to style a document or a text. For e.g. To change the color of font we had to type this syntax with a color code- <font color=’#FFFFFF’></font> . So now you understanded the value of these color code , Now you can choose any color from table below . Don’t Forgot to bookmark us by pressing Ctrl+D.

CSS Color Table

Color Name	HTML Code	Color
AliceBlue	#F0F8FF
AntiqueWhite	#FAEBD7
Aqua	#00FFFF
Aquamarine	#7FFFD4
Azure	#F0FFFF
Beige	#F5F5DC
Bisque	#FFE4C4
Black	#000000
BlanchedAlmond	#FFEBCD
Blue	#0000FF
BlueViolet	#8A2BE2
Brown	#A52A2A
BurlyWood	#DEB887
CadetBlue	#5F9EA0
Chartreuse	#7FFF00
Chocolate	#D2691E
Coral	#FF7F50
CornflowerBlue	#6495ED
Cornsilk	#FFF8DC
Crimson	#DC143C
Cyan	#00FFFF
DarkBlue	#00008B
DarkCyan	#008B8B
DarkGoldenRod	#B8860B
DarkGray	#A9A9A9
DarkGreen	#006400
DarkKhaki	#BDB76B
DarkMagenta	#8B008B
DarkOliveGreen	#556B2F
DarkOrange	#FF8C00
DarkOrchid	#9932CC
DarkRed	#8B0000
DarkSalmon	#E9967A
DarkSeaGreen	#8FBC8F
DarkSlateBlue	#483D8B
DarkSlateGray	#2F4F4F
DarkTurquoise	#00CED1
DarkViolet	#9400D3
DeepPink	#FF1493
DeepSkyBlue	#00BFFF
DimGray	#696969
DodgerBlue	#1E90FF
FireBrick	#B22222
FloralWhite	#FFFAF0
ForestGreen	#228B22
Fuchsia	#FF00FF
Gainsboro	#DCDCDC
GhostWhite	#F8F8FF
Gold	#FFD700
GoldenRod	#DAA520
Gray	#808080
Green	#008000
GreenYellow	#ADFF2F
HoneyDew	#F0FFF0
HotPink	#FF69B4
IndianRed	#CD5C5C
Indigo	#4B0082
Ivory	#FFFFF0
Khaki	#F0E68C
Lavender	#E6E6FA
LavenderBlush	#FFF0F5
LawnGreen	#7CFC00
LemonChiffon	#FFFACD
LightBlue	#ADD8E6
LightCoral	#F08080
LightCyan	#E0FFFF
LightGoldenRodYellow	#FAFAD2
LightGray	#D3D3D3
LightGreen	#90EE90
LightPink	#FFB6C1
LightSalmon	#FFA07A
LightSeaGreen	#20B2AA
LightSkyBlue	#87CEFA
LightSlateGray	#778899
LightSteelBlue	#B0C4DE
LightYellow	#FFFFE0
Lime	#00FF00
LimeGreen	#32CD32
Linen	#FAF0E6
Magenta	#FF00FF
Maroon	#800000
MediumAquaMarine	#66CDAA
MediumBlue	#0000CD
MediumOrchid	#BA55D3
MediumPurple	#9370DB
MediumSeaGreen	#3CB371
MediumSlateBlue	#7B68EE
MediumSpringGreen	#00FA9A
MediumTurquoise	#48D1CC
MediumVioletRed	#C71585
MidnightBlue	#191970
MintCream	#F5FFFA
MistyRose	#FFE4E1
Moccasin	#FFE4B5
NavajoWhite	#FFDEAD
Navy	#000080
OldLace	#FDF5E6
Olive	#808000
OliveDrab	#6B8E23
Orange	#FFA500
OrangeRed	#FF4500
Orchid	#DA70D6
PaleGoldenRod	#EEE8AA
PaleGreen	#98FB98
PaleTurquoise	#AFEEEE
PaleVioletRed	#DB7093
PapayaWhip	#FFEFD5
PeachPuff	#FFDAB9
Peru	#CD853F
Pink	#FFC0CB
Plum	#DDA0DD
PowderBlue	#B0E0E6
Purple	#800080
Red	#FF0000
RosyBrown	#BC8F8F
RoyalBlue	#4169E1
SaddleBrown	#8B4513
Salmon	#FA8072
SandyBrown	#F4A460
SeaGreen	#2E8B57
SeaShell	#FFF5EE
Sienna	#A0522D
Silver	#C0C0C0
SkyBlue	#87CEEB
SlateBlue	#6A5ACD
SlateGray	#708090
Snow	#FFFAFA
SpringGreen	#00FF7F
SteelBlue	#4682B4
Tan	#D2B48C
Teal	#008080
Thistle	#D8BFD8
Tomato	#FF6347
Turquoise	#40E0D0
Violet	#EE82EE
Wheat	#F5DEB3
White	#FFFFFF
WhiteSmoke	#F5F5F5
Yellow	#FFFF00
YellowGreen	#9ACD32

How To Create A Stunning Image Slide Show For Blogger

2014-12-25T20:08:00.000-08:00

Hello Friends , I am back with a great and stunning image slide show for blogger blogs, this is a collection of images that we generally call it a slideshow, I got an idea about creating this idea on discussion on Stackoverflow.com . There I read some jquery tutorials and css tricks, after sometime I had created this stunning image slide show. The main feature of this slideshow is that you can customize it according to you and I had used very less css codes in creating this slideshow widget, otherwise it is a great widget for blogger blogs. So let’s start to customize it and I hope that you would like this slideshow widget.

Must Read also-

How To Add Jquery SlideShow To Blogger Templates?

Follow these steps below to install a stunning image slide show to your blogger blog, well I tried my best and I hope that it would work fine in your blog.

Go To Blogger > layout
Choose Add a Page Element
Then choose HTML/JavaScript widget
Inside the widget paste the code below,

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://s3slider-original.googlecode.com/svn/trunk/s3Slider.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
   $('#HT4U-slider').s3Slider({
      timeOut: 3000
   });
});
</script>
<style>
#HT4U-slider {
   width: 590px; /* Keep it 20px-40PX greater than ACTUAL Image size */
   height: 335px;
   position: relative;
   overflow: hidden;
   margin-left: 0;
}
#HT4U-sliderContent {
   width: 590px;
   position: absolute;
   top: 0;
   margin-left: 0;
}
.HT4U-sliderImage {
   float: left;
   position: relative;
   display: none; top: 0;
   border:1px solid #ddd;
}
.HT4U-sliderImage span {
position: absolute;
    font: 10px/15px sans-serif,Arial, Helvetica;
    padding: 10px 10px;
    background-color: #000;
    color: #fff;
    filter:'alpha(opacity=70)';
    -moz-opacity: .5;
    -khtml-opacity: .5;
    opacity: .5;
    text-align:justify;
}
.HT4U-sliderImage span a {
text-decoration:underline;
color:#FE6602;
}
.clear {
   clear: both;
}
.top {
    top: 0;
    left: 0;
    width: 570px !important;
    height: 70px;
}
.bottom {
    bottom: 0;
    left: 0;
    width: 570px !important;
    height:90px;
}
.left {
    left: 0;
    top: 0;
    width: 110px !important;
    height: 335px;
}
.right {
    right: 0;
    bottom: 0;
    width: 80px !important;
    height: 319px;
}
</style>
<div id="HT4U-slider">
<ul id="HT4U-sliderContent">
<li class="HT4U-sliderImage">
<img src="URL OF IMAGE" />
<span class="right"><h3>HEADING-1 GOES HERE</h3>DESCRIPTION GOES HERE</span>
</li>
<li class="HT4U-sliderImage">
<img src="URL OF IMAGE" />
<span class="left"><h3>HEADING-2 GOES HERE</h3>DESCRIPTION GOES HERE</span>
</li>
<li class="HT4U-sliderImage">
<img src="URL OF IMAGE" />
<span class="top"><h3>HEADING-3 GOES HERE</h3>DESCRIPTION GOES HERE</span>
</li>
<li class="HT4U-sliderImage">
<img src="URL OF IMAGE" />
<span class="bottom"><h3>HEADING-4 GOES HERE</h3>DESCRIPTION GOES HERE</span>
</li>
<li class="HT4U-sliderImage">
<img src="URL OF IMAGE" />
<span class="bottom"><h3>HEADING-5 GOES HERE</h3>DESCRIPTION GOES HERE</span>
</li>
<div class="clear HT4U-sliderImage"></div> </ul>
</div>
<br/>

How To Customize The Slideshow Code?

Simply replace URL OF IMAGE with the Image link and replace bolded black texts with your preferred headings and descriptions. You can play around how the slider appears. If you want the slider to appear from bottom then change the class to bottom if you want the slider to appear from right then change it to right and so on. If you wish you can set all sliders to bottom or top or to any position you wish.

If you want to slow down the speed with which the slider come and go then set timeOut: 3000 to a higher value like 4000 or 5000.

The default size of all images that I have used in this tutorial is having a width=550px and height=335px. So take images of equal size and then play around the sizes width: 590px and height: 335px You can note that the width size i.e (590px) is greater than the actual image size of 550px. You will have to keep the width 20-40px greater than the actual image size so that the image may perfectly fit into the slide. You can play with this part and all other parts using our Magic tool i.e

HT4U HTML Editor

How To Add More Images Or Remove an Image From the Slider?

To add an extra image just above this slideshow bar-

add this code,

<span class="bottom"><h3>HEADING GOES HERE</h3>DESCRIPTION GOES HERE</span>

</li>

Finally you have learned how to add a image slide show with help of css in blogger. Now try it on your blog and kindly bookmark our website for reading more interesting blogger tutorials. Kindly Share this page.

Create A Expand/Collapse Comment Box For Blog With JQuery

2014-12-14T01:33:00.000-08:00

Hello Friends , I am back with a great blogger widget that is how you can create a expandable and collapsible comment box with the help of JQuery. The blogger comment section is still irritate some users if your comment box is not special, so if you want that your users will gave you a good feedback on you blog by commenting then use this widget.. This widget will help you to create a beautiful expandable and collapsible huge button that will display comment form by sliding down smoothly when triggered and hide it when clicked again. I will use the JQuery to create this button. It is good widget for you because it supports all type of browsers

Take A Look Over Our Other Blogger Widgets-

How To Install This Widget On Blogger?

Follow These Steps below To Add A Collapsable/Expandable Comment Box System-

1. Go To Blogger and Sign In.

2. Now go to Template>Edit HTML. (Note:- Backup Your Template Before Proceeding)

3. Search For - (Note:- Use Ctrl+F to open search box)

<head>

4. Now Paste This Code below <head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

$(".toggle_container").hide();

$("h3.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("slow");
});

});
</script>

5. Again Search For-

]]></b:skin>

6. Now Paste This Code Just Above ]]></b:skin>.

/*----- Expandable/Collapsable Comment System by www.Hackintricks4u.blogspot.com ----*/
h3.trigger {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuWwte6NmaGno6jimY8D_J5JzEN4NWEhkuDsrrq8kM7Viydy1AaOXcuEVOzeLHGXXBlObohH_KwcHnMkq2Qph0j7BKVFsTq4PBkFEgm-NiqzO7vPNOEENmroDsWQTHehxEDQ3hfxj0TC8/s1600/comment-boxbg.png) no-repeat;
height: 44px;
line-height: 46px;
width: 518px; border-radius:4px;
font-family:Arial;
font-size: 1.4em;
font-weight: bold;
text-align:left;
color:#A1A1A1;
float: left;
cursor:pointer;
box-shadow: #333 0px 1px 3px;
padding:0 0 0 50px;
margin:10px 0px 10px 10px;
}
h3.active {
background-position: bottom left;
color:#ddd;
}
.toggle_container {
padding-left:10px;
overflow: hidden;
clear: both;
}

To change the width of the button just edit: 518px
To change the color, font size, font type of the text "Click here to add Comment" edit the highlighted part of the code.

7. Now Search For

<b:includable id='comment-form' var='post'>

8. Paste This Code Just Below It.

<h3 class='trigger'>Click Here To add Comment</h3>
<div class='toggle_container'>
<div class='block'>

9. And just above </b:includable> paste this code-

<p style=' line-height:0px; font-family:Arial; font-size:8px; font-weight:bold; text-align:right;'><a href='http://www.hackintricks4u.blogspot.com/' style='color:#CAC8C8;'><i>HT4U Widgets</i></a></p>
</div></div>

10. Now Save the Template and See Your Blog Post . Now you will find a change in your comment box And from now your visitors will love to comment on your blog.

Need Help

As reading this article suggest that it is not harder to understand or apply this widget to your blog, but , in case if you think that it is harder or you have any problem with it then please tell us by commenting below or by filling our contact form. And if you like this article then please share it.

If you don’t want to get into a serious problem in editing a template then tell it to us (submit a request to us by commenting below) we will try to solve it for you absolutely free. This is a limited offer by hackintricks4u.blogspot.com to get their free services.

How to display Guest Author Box automatically in Blogger

2014-12-13T22:12:00.000-08:00

Guest Posting is very useful when you are busy in any outside work or you don’t have time to post on your blog, that time the guest bloggers are main author and admin of your blog. Google provides the best blogging experience when it is comes to easy and comfort of user. Hence blogger is user friendly. In wordpress there is a plugin of guest author box therefore we had to do nothing on wordpress. But in blogger we had to set up a code of guest author box and then maintain it. Usually we or blog admin maintain author box by two methods, one is manually in which when a guest blogger writes a post then we had to maintain the author box regularly, and after some time of maintaining it start to become a ‘headache ‘ . So usually professional blogger takes the second method that is automatically displaying guest author box when a guest author posts a content on your blog. So friends, In this tutorial I will discuss and tell you about how to display guest author box automatically. So lets begin this tutorial-

Must Read- How to Create a Guest Author Box In Blogger.

Automatic or Manual What Do You Like?

At first I am asking you a question that what would you like automatic or manual display of guest author box? Surely , you was thinking that automatic is a best way but…. But how to create it or how to make a function so that it would display automatically author box in your blog. But don’t take tension I am here to solve your problem. Yes… I got a solution of this problem after researching and hardworking of continuously 3 days. Now I found a way so that the guest author box will display automatically when the guest blogger post anything on your blog.

Inviting or Adding Guest Author

How to add a guest author on your blog? Get sucked by this question, if yes then read this article in which I would tell you about how you can add or invite a guest author to write post for your blog. So, to add or invite a guest author go to Dashboard>Settings>Basics>Permissions, and there you got a box in which you had to type the email of guest author. After some time your invitation had been sent to guest author and when he accepts your invitation he will able to post articles in a separate dashboard and with full control on your blog. You can add 100 authors in a single blog which means that your blog will be authorize to full control by 100 people or team members.

Add a Guest Author Box Manually

To add guest author box manually you need just his/her Name, Picture, 2 line about him/her and this article that I had posted below.

How To Add A Guest Author Box Below Posts

Add a Guest Author Box Automatically

Just follow these steps below and add a author box on your blog in few minutes. 1. Go to Blogger>Dashboard>Templates.

2. In templates click on Edit HTML button and wait for some time.

3. Now search for ]]></b:skin> and paste the following code just above it.

/*Automatic Author Box by HT4U*/
.about-author {
width : 98%;
overflow : hidden;
margin:10px 0px;
border:0px;
}
.about-author img {
width:70px;
padding:3px;
border:1px solid #ddd;
margin:0px 5px 0px 0px;
}
.about-author h3{
font-family:verdana !important;
font-size:18px !important;
margin:9px 0px !important;
color:#666666 !important;
border-bottom:2px solid #666 !important;
border-top:0px !important;
}
.about-author p {
margin:0px;
text-align:justify;
color:#666;
}

Note-In This CSS Code you can edit color of about author. Just change #666666 to your desired color.

4. Now search for data:post.body and paste the following code below it.

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.author == "TYPE HERE AUTHOR NAME"'>
<div class='about-author'>
<h3>About Author:</h3>
<img align='left' src='IMAGE LINK OF PICTURE OF AUTHOR'/>
<p>WRITE HERE AUTHOR BIO </p>
<p>Follow him @ <a href='BLOG LINK' target='_blank'>BLOG NAME</a> | <a href='FACEBOOK LINK' rel='nofollow' target='_blank'>Facebook</a></p>
</div>
</b:if></b:if>

5. Now replace the Bolded parts of code with co-author name and links.

6. Finally Save the template.

Now visit your blog and see the posts by co-author of blog, you will see a box appear on bottom which displays the description about author. You can even create an author box for yourself by simply replacing the AUTHOR NAME, profile pic and bio to that of yours.

Need Help From Us?

Add A Simple Back To Top Button In Blog

2014-11-29T08:49:00.002-08:00

Hello friends , In this tutorial we will discuss about adding a simple back to top button to a blog. Back to top buttons are also known as 'Scroll to Top' buttons. Did you know why are the back to top buttons are used? don't know.. okay let me explain, when you read a long post about 2000 words you need to scroll down rapidly to go upward this takes a lot of time to go up while this , the back to top buttons are used , in a single click you reach to the top of the page and you don't need to scroll up again. So many of websites providing a scroll to top button, but why would you choose our button? No answer.... Okay i will tell you , in case you copy the script of go to top button from other website , they link their website to your blog, so , indirectly it means that they are taking a lot of time and they link to your website means they are creating backlink from your blog. So by using our Script you doesnot have to do something and this script is very light in weight and take very less time to load web page. And comparing from other buttons our buttons are very special made from photoshop and they are easy to instrall on your blog . So after reading this.. You are ready to create a Custom or simple Back To Top Button for Your Blog. So lets begin-

How To Create A Custom Back To Top Button On Your Blog

Follow these Steps below to add a custom back to top button-

1. Go to Blogger , and sign in.

2. Go to Dashboard>Layout>Add A Gadget.

3. In the Gadget List Select the HTML JavaScript Gadget.

4. Now paste the following Script in that gadget-

<script type="text/javascript" >
var scrolltotop={
//startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
//scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjFlZJNTksLZVjpzHMinCaOWp1KN88BV-dri5FKGZv_gO57xEqpQjE3nfa1DTVoD3MrXdyjvAp0rsv1vlrd4FK0i6BIZVmU8GpxGCDRBsPbK6IqNjJmZA0toUG_gPHF9So1nyBChItx_Sk/s1600/back-to-top.png" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
state: {isvisible:false, shouldvisible:false},
scrollup:function(){
if (!this.cssfixedsupport) //if control is positioned using JavaScript
this.$control.css({opacity:0}) //hide control immediately after clicking it
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
dest=jQuery('#'+dest).offset().top
else
dest=0
this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
},
keepfixed:function(){
var $window=jQuery(window)
var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
this.$control.css({left:controlx+'px', top:controly+'px'})
},
togglecontrol:function(){
var scrolltop=jQuery(window).scrollTop()
if (!this.cssfixedsupport)
this.keepfixed()
this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
if (this.state.shouldvisible && !this.state.isvisible){
this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
this.state.isvisible=true
}
else if (this.state.shouldvisible==false && this.state.isvisible){
this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
this.state.isvisible=false
}
},

init:function(){
jQuery(document).ready(function($){
var mainobj=scrolltotop
var iebrws=document.all
mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
mainobj.$control=$('<div id="topcontrol" style="z-index:9999;">'+mainobj.controlHTML+'</div>')
.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
.attr({title:'Scroll Back to Top'})
.click(function(){mainobj.scrollup(); return false})
.appendTo('body')
if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}
scrolltotop.init()
</script>

5. You Can Change The Back To Top Image by replacing the highlighted URL .
Here Are Some Buttons Use Their URL.

Or You Can Download Our Back To Top Button Pack

Click Here Password- ht4u

6. After Choosing your desired image Hit on Save button.

7. Now you are done , Now visit your site again, the back to top button has been added on your blog.

Okay ,, Have Fun.

Need Help

I think that i had described this post very carefully and userfriendly , but in case you have any problem with it or the script is not working on your blog then you can inform us by commenting below or fill our contact form.

Releasing HTML Encoder For Blogs

2014-11-29T07:00:00.000-08:00

Hello Friends , Now i am going to release a html encoder for blogs. You might have seen many users easily commenting HTML and Javascript but when you try to do same yo end up getting an error. This is not your fault, blogger does not allow you to directly post html and javascript. You will need to encode this code to post without getting any error. Sometime you will also need to encode your adsense code to be placed inside your template. Below is HTML Encoder which will allow you to encode your html and javascript code. Some of the characters that it converts are listed below.lets begin-

'<' becomes '<'
'>' becomes '>'
'"' (double quote) becomes '"'
''' (single quote) becomes '''
'&' becomes '&

Convert Your HTML And JavaScript Code Here

Releasing Color Code Generator For Blogs

2014-11-29T06:47:00.001-08:00

Hello friends , you are thinking that it is a tutorial but it isn't. Today I am going to release a 'code' , means a code for generating "color code". Many of the blogger , i mean beginners who doesn't know how to customize colors or they don't know the name of colors in html, they can use my color code generator and use it for generating color code, this is the best thing for them . So in this post i am going to introduce with the color code generator created by us , we are hardworking from many days to generate a color code generator and today i got the code of generating and now i am going to publish it , so you can also use this code generating software of colors in html.So let's begin'

There Is Another Color HTML Code Generator Click Here To Go There

Here You Can Generate a HTML Code Of A Color

How to add a social media sharing widget to blogger blogs

2014-11-29T06:28:00.001-08:00

Hello friends, Today ,in this tutorial I will present a new way to create a sharing widget with social media contained of facebook, twitter ,Google+ ,rss feed and many more buttons to share posts. This social media sharing widget also contained of a search box also. This sharing widgets lets a visitors to share your post on facebook, add you on Google plus, follow you in twitter , subscribe your rss feed, like your facebook page and search your blog. This widget is extracted from a template by me and I make it a user friendly widget and more helpful to you.

Also read- How to submit a sitemap to Google.

Create a Simple Welcome Bar for your Blog.

Make a social media sharing widget for blog-

Follow these steps below to add this sharing widget to your blog

1. Go to Blogger > Dashboard.

2. from dashboard click on template.

3. First backup your template and then click on edit html.

4. Now search for ]]></b:skin> and paste the following code.

/* -------------SOCIAL SHARE WIDGET BY HT4U-------------------- */
#search{width:350px; border:1px solid #E0DFD9;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvyRmHhiowUniJ3EhdwEgSqLEVSc6GDZsfiIoSVLvyG3G6HYzD-HBNNDR3UJpyZubBQt4ynKDO1d_kTuyZLeIOPwE1QsfFH-owVOAliq5xvYvVJnWj4sSyrx5iOawg5B7bIdWMkki0B-Y/s1600/search-bg.png) left top repeat-x;height:32px;padding:0;text-align:left;overflow:hidden}
#search #s{width:80%; background:none;color:#3F3F3F;border:0;padding:4px;margin:3px 0 0 12px;float:left}
#search .search-image{border:0;vertical-align:top;float:right;margin:8px 4px 0 2px}
#search-wrap{padding:15px 0}
.topsearch #search{margin-top:0;margin-bottom:10px}
.social-connect-widget{background:#FFF;border:1px solid #E7E6DE;padding:10px}
.social-connect-widget:hover{border:1px solid #CBCBC2;background:#F5F4EF}
.social-connect-widget a{text-decoration:none;font-weight:bold;font-family:Arial,Helvetica,Sans-serif;color:#4B4D4E}
.social-connect-widget a:hover{text-decoration:underline;color:#F77C04}
.social-connect-widget img{vertical-align:middle;margin-right:5px}

Note- You can change the width of the search box

You can change the width of search input area.

4. Then Search for <div id='sidebar-wrapper'>-

Note: In this part most of you will face problems as the coding for each template differ. If you Could not find this code then do not panic and simply post your Blog URL in the comments.

5. Now Paste the following code just below it,

<div class='topsearch'>
<div class='clerfix' id='search'>
    <form action='/search' id='searchform' method='get'>
        <input id='s' name='q' onblur='if (this.value == "") {this.value = "Search here...";}' onfocus='if (this.value == "Search here...") {this.value = ""}' type='text' value='Search here...'/>
        <input class='search-image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn1T2qZP0KVM2BDcMJglaOLjDzLgPLja2tD613vebpNbu5FmHd_uVa767NBMk11QxRy7xQsmv70ZSKwI4YjRK4YGYaHMft5UOQmEWiRvymo3wlyW1iqseP0vhMx3lF6IKWIf0V3aDt_RU/s1600/search.png' title='Search' type='image'/>
    </form>
</div>
</div>
<div style='clear:both;'/>
<div class='social-connect-widget' style='margin-top:0px;margin-bottom:10px;'>
<a expr:href='data:blog.homepageUrl + "feeds/posts/default"'><img alt='RSS Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Sd-DIsLHm6H9g-BD9skIUVCXTy_NTVUNpv6TZNsysrigYRpT3aHeOKrGJ4vL16W_1qGrgFPkOmUrY8ABczdLTQ9dcHf5q1v0YLGKU-LoxNlZRTLPUCpgxbyuHtWHv49wW_Nf1zCE4Gvg/s1600/social-connect-rss.png' title='RSS Feed'/></a><a expr:href='data:blog.homepageUrl + "feeds/posts/default"'>Subscribe to our RSS Feeds!</a>
</div>
<div class='social-connect-widget' style='margin-bottom:10px;'>
<a href='http://twitter.com/USERNAME'><img alt='Follow Us on Twitter!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikyCZUFhfXw3xnmxlmtK9VyaFR6oNhvhak6PYGOWmsGNIQHtIwJcJFxsqOJgePQrDjmqf68e6PxwEuf5jasBwLJI5RxNB3Da5oqglZ9NbW32OHTqZuG3sgQYa32wLzjC5SE2ZUuwmKgXhS/s1600/social-connect-twitter.png' title='Follow Us on Twitter!'/></a><a href='http://twitter.com/USERNAME'>Follow Us on Twitter!</a>
</div>
<div class='social-connect-widget' style='margin-bottom:10px;'>
<a href='http://facebook.com/USERNAME'><img alt='Be Our Fan!' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX5VmeewNGpCxm772fyfX3Db0Ev2Z3QQcbyMbBHczWEO_ih1aYbGF2ObNswet27S2r3_S7jTxUkxKoBoyvRPeiCLatkKjm5MFTFQ8hU9p_PwpVuzl3rWSj_q7w2IHngOUh_wAdlnwk9vE7/s1600/social-connect-facebook.png' title='Be Our Fan'/></a><a href='http://facebook.com/USERNAME'>Follow us on Facebook!</a>
</div>
<div style='clear:both;'/>
<div class='addthis_toolbox'>
<div class='custom_images'>
<a class='addthis_button_twitter'><img alt='Twitter' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitd3fXTt2MtT9XdZfc-kPj8uxvwFpOzwmMF2W9XKC0aLM6JjrxoGWdTO6ZSk2RJtQZVQBAflQiI8Zcs0HtHAQNmZ2lVlonWKaMG4GcXREXNuI6HKumDVuWfI0xHujPVWZZ3jvQ1sOSIm0/s1600/twitter.png' width='32'/></a>
<a class='addthis_button_delicious'><img alt='Delicious' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY86guwHYdTvEKw5_36XbRCDycxuCBJTO3lNM_53SPF3QwY92tTefv26fLA8QX-ydWBRLLWyIeoKimkSzlJuG20P7zxLmviRCXNrbmBzOqfkVtGAEWdk76lSPzxIsHnmsFLenqyrXF1Fc/s1600/delicious.png' width='32'/></a>
<a class='addthis_button_facebook'><img alt='Facebook' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5xtDhcoPNvAnlv4NTuA296J6nkEaYInXlobqGLSype7by-2F1sSQKM7IhiC87R9gj3dVhzVUWx4NpYMTzAWqgZ0PALXxz1KATOGfY5fu2Htd0gILIV3pxfHX6ZLkq16rhIWBlhWXEo1s/s1600/facebook.png' width='32'/></a>
<a class='addthis_button_digg'><img alt='Digg' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRoivPrAHvtJPUn7Z0tPKv82W3U0AJBAk36N_ZMBsvWYyJ96AL0EphYupEJiHoMQ6NxHcJuHxLrY5QAiRW-dOo12Z0vtvufAsBHYsR6MLPT71-joM17lE_6WtKUObrknP_dodFYedTy3Q/s1600/digg.png' width='32'/></a>
<a class='addthis_button_stumbleupon'><img alt='Stumbleupon' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhg7XR4l05_PhEuwjvQm230Rs_sgYG70Qev2HqhSzI75OzXKW7a2T8NUEEyGWtQrmNpIpLWdgPqd4kT_xZ_IbJsXlTxuMSirvCbUOEp_1dT3bXOUzB6qEizRjmptFlGSc-8MIc0oF_SjpU/s1600/stumbleupon.png' width='32'/></a>
<a class='addthis_button_favorites'><img alt='Favorites' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1yEAVv1_4KFSEPKCXC25AX8qV1nqavRJYtCTL1di9s0AqYv8aAAOdcu-Y_8aNL8VPJU7ZBMYQa1wZ3Hr8X0FTvL95h9KM1WVFS2CTak8-jTyzzUJAcH5V54K6DE5Paa1HTepEm82bx3I/s1600/favorites.png' width='32'/></a>
<a class='addthis_button_more'><img alt='More' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6I-ql_cVquJV1Au2Zy9wHHSL0M5T0I0AKlZQ5oP-iTYf50zI4tDHpSyoSr1EiOjq0YFx4bPVVr_ED0csGerWenpH9qpKNaINb838cgUdPQjyq8DRzEnrU95s9xWxwFi4ilD8d6FNrgXU/s1600/more.png' width='32'/></a>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
</div>
<div style='clear:both;'/>

6. Change your usernames with-

FACEBOOK USERNAME=”your username”

TWITTER USERNAME=”your username”

RSS FEED URL=”your rss feed url”

7. Now save the Blog template. Now a box will be appear of social sharing buttons on your blog.

And I hope that you would like this social media sharing widget. Keep reading my posts-

· How to Install Whatsapp in PC with Blue stacks.

Need Help-

How to Add a Syntax Highlighter to a Blogger Blog

2014-11-29T02:43:00.000-08:00

Most of the blogger use the blockquotes means a <blockquote> tag to highlight or show specially in quotes form on a web page. Tricks bloggers use this blockquote tags to add the codes of tricks or widgets and therefore needs a neat and clean blockquote for their blog. Most bloggers use the standard blockquoteto share tutorials based on scripts and codes with their visitors but Alex Gorbatchev has created an amazing fully functional Highlighter that neatly displays web technologies such as HTML, CSS, JavaScript, Php, Python, Sql, xml etc. The codes are displayed line by line number wise. It also provides the user with options to Print the code, copy it to clip board or to see the code Source. So lets begin and try to understand that how can we apply a syntax highlighter on a blogger blog.

Must Read- 20 awesome CSS blockquote styles

Add a Syntax Highlighter to a Blog-

Follow these steps below to apply a syntax highlighter on your blog-

1. Go to Blogger>Dashboard>Template.

2. In template click on Edit HTML option and proceed.

3. Search for ]]></b:skin> and paste the following code just below it.

<!—HT4U SYNTAX HIGHLIGHTER STARTS-->
<link href='http://alexgorbatchev.com/pub/sh/2.1.382/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/2.1.382/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shYouBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPerl.js' type='text/javascript'/>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.382/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
<!—HT4U SYNTAX HIGHLIGHTER ENDS-->

4. Save the template. You are done , by applying this script the syntax highlighter is enabled on your blog.

How to use the Syntax Highlighter?

Whenever you want to put a code on quotations or block quoted then add this code below to enable the syntax highlighter on your blog. Or simply enclose the code between these lines.

<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">
ADD THE PARSED OR BLOCKQUOTE CODE HERE</pre>

I have combined all brushes into one making it easier for newbie to implement the tutorial.

Note: Do not add the code directly because you will get error in Blogger Editor, instead first parse the code using the Parser Tool provided by us.

Replace ADD THE PARSED OR BLOCKQUOTE CODE HERE with the parsed/encoded code and publish your post to the see the magic.

Final Words-

This syntax code is not used by all famous blogger but if you think that it is a great think then you can apply it on your blog but remember that this is a waste of your time , I am not saying that you can’t add this syntax highlighter to your blog but you are just adding these scripts may cause any slow loading of pages, So as a Author , my advice is that if you really want this syntax highlighter or it is necessary to your blog then you keep it. Otherwise it is waste of your time.

I have made this code simpler as it is possible so it is requested to readers that they please leave a reply to us so we think that they are appreciating our hard work on creating/adding this trick.

Need Help-

Why You Should Use Blogger - Explained With Reasons

2014-11-22T06:25:00.000-08:00

Blogger is a social platform of blogging , where everyone get a chance to express their views , thoughts and articles to the world.In this many of these websites provides you this blogging service by adding their links like .blogspot , .wordpress, .tumblr and .edublog are some websites which offers to to create your own blog. In This race of providing blogging to everyone the word comes at first is only 'blogger' and only 'blogger' . This Blogger site is very popular for creating a free blog and have more than 400 million active user , before 2007 it has only 2.25 lack users but now it became very popular base for blogging. Sometimes , blog users asks me why to choose blogger or why i should use blogger i answered them that blogger is a basic platform of blogging having a support of such great things like- widget support, template customisation and many more .The main reasons for why blogger (.blogspot urls) are very popular because it is very user friendly and many other reasons we had pointed about them below. Now we had collected a lot of information about why is the blogger is best in blogging platform.

Why you should use Blogger ?

A free Blogging platform-

The main reason for popularity of blogger is that a blogger is a free blogging platform which allows a user to create his/her own blog and registering a free domain in the world of web. In returns the blogger puts his .blogspot after your desire url . .blogspot is a mark of google that it is a blog offered by blogger. A blogger is a open source platform , simply means a free of cost platform. Think of it , other website owners had to pay a lot of money for hosting a domain , securing it, maintaining cost , attending professionals and validating it and most important problem is of 'time' which you had to pay it a lot if you had a website means a .com. On the other hand blogger is free of cost allow to create a free blog and you don't need those things that i had listed above. So finally in this case i had to say that a 'blogger' is a most suitable for you.

Any Type Of Template Supported At Blogger-

Yes it is true that you can apply any type of template on your blog either it is SEO responsive or a professional template . Blogger offers you to edit or configure your template according to your theme. In fact blogger offers you a large number of templates or we can say that is has a wide variety of templates designed by them. Blogger also supports templates designed by other websites or peoples , to add that template on your blog you just need a .xml extension file because blogger supports template in .xml format.Check out templates made by our website.

Must check our template gallery :- Blogger Templates -

Widget Collection Or Support-

As we knew that the blogger supports the widgets that are added in sidebars, upper or lower corners , they are used to attract the visitor to your site. Hence, Blogger also offers you his big collection of widgets in their gallery. Sometimes if you need an external or different widget blogger offers an HTML and JavaScript supported widget which allows you to add your own widget on your blog. So if you are interested in this widget section then please check or make a closer look to our widgets also which help your website to look healthy-

User Friendly Blogger-

Blogger is the most user friendly platform than others like from wordpress,tumblr etc. Hence to write or configure your blog you doesn't need any professional skill because blogger made it simple and user friendly. The blogger made all the items simpler , From dashboard to setting panel all the items are arranged and made simpler by blogger.This thing is very useful for beginners or who had just started blogging. The blogger user needs his all of his things in one place that the blogger provides.So finally i want to say that 'blogger is user friendly!!!! yes this is correct'.

Limitations of Blogger-

When you creates a .blogspot you have not need to spent a bit of money. but in this case after sometime you will found a lot of limitations in blogger. Somethings like posts and comments there is no limit of creation, but in some things there is limit in blogger. these things we will discuss here-

Number Of Blog-

Here the number of blog you can create with a single account is bit more than other accounts . Means you can create 100 blogs with a single account in a blogger. So there is a limit of creating a blog in a blogger .

Number of Posts-

Fortunately,There Is A Good Thing in a blogger that you can create unlimited posts in blogger. However this is good for those blogger users who posts every day , and all the posts were saved in their dashboard means in their account, they can also be deleted manually. So there is no limit of post creation in blogger.

Account Restriction-

Blogger ban an account if the blog user violating or not following the terms and condition of blogger. Blogger doesn't sent you an email about banning an account, they can ban your blog or account on any time if you don't follow their terms and conditions. So it is very harder or less chance to recover your account back. Thus, Blogger had its own strict rules and regulations.

Number Of Comments-

Fortunately, There is no limit of comments in blogger. Hence anyone could comment many times and there is no limit for comments.A Post can have unlimited comments. It depends on you whether you show the comments or hide them from your posts, but the pre-existing comments would be remained saved in your account. You can enable the comments anytime you like.

Team Membership-

The blogger offers limit of member per blog. means ,You can add 100 members in a single blog.

Image Hosting and Size -

The blogger Hosts 1 GB picture per blog , so for a single image there is no limit of uploading images. You get 1 GB space for uploading images in blogger. When you upload images through mobiles or tablets remember that at once you can upload only 250 kb picture.

Length And Size Of Posts-

There are no such limitations for the length of the individual posts. However, if your posts are too long then they might exceed the page Size Limits.

Number Of Labels-

In Blogger you can create 5000 new labels per blog. And add 20 labels in per post.

Number Of Pages-

Blogger offers you to create 20 pages . So there is limit of creating page in blogger. But don't take tension in next chapter i will tell you about how you can create more than 20 pages in blogger.

Final Words-

I would recommend you to use the free blogger platform. So if you like this article then please left a reply for us. or share our blog.

How to Create A Simple CSS Sticky Notification Bar

2014-11-19T05:04:00.000-08:00

Hello Friends In this tutorial i will tell you about how you can create a simple style sticky notification bar. A stick navigation bar is used to highlight or show the trending content of your website. Sticky Notification bar is the best way to highlight the latest topics or updates of any blog .It sits on the top of blog and display latest and popular stories of blog and attracts blog visitors to check out the popular articles of a blog without any headache.It also helps in increasing page views of the blog.Welcome bar is widely used by bloggers to provide their special offers or updates on the top of the website.This sticky bar is used to show updates or important news or information, hence you can place it either in top of blog or bottom of blog.. It is work likes an ad of your blog. A welcome bar helps your visitors to go some other or special link or as its name suggest it is widely used for welcoming your visitors on your blog.

Must Read :- Make A Sticky Welcome Bar For Blogger

Features of CSS Sticky Notification Bar-

Awesome CSS styled bar.
Stylish In Look. and Attractive Design
Small in size, small javascript codes.
Easy to customize according to your blog theme.
Doesn't slow down load time of blog.
User Friendly and easy integration to blogs.
Easy to put it on your blog.

How to Add A CSS Sticky Notification Bar To Your Blog ?

Go to Blogger Dashboard.
Now select Template.
Click on Edit HTML and proceed.
Now Search for </body> .
Now paste the following code above </body>.

/**Begin-HT4U-Notification Bar code**/
<style>
#HT4Uwcsticky-container {
height:46px;
width:100%;
position:fixed;
z-index:99999;
top: 0px;
left:0px;
background:#222222;
-moz-border-radius:5px;
-webkit-border-radius:5px;
color:#ffffff;
border-bottom:solid 2px green;
-moz-box-shadow:5px 5px 5px #333333;
-web-kit-box-shadow: 5px 5px 5px #333333;
-goog-ms-box-shadow: 5px 5px 5px #333333;
box-shadow:3px 2px 4px green;
}
#HT4Uwc-stickylinks
{
color:green;
font:14px verdana;
margin-top:12px;
margin-left:20px;
text-decoration:none;
}
#HT4Uwc-stickylinks a
{
font:14px verdana;
color:#ffffff;
text-decoration:none;
}
#HT4Uwcstickyclose
{
float:right;
margin-top:15px;
margin-right:20px;
}
#HT4Uwcstickyclose a
{
color:#ffffff;
text-decoration:none;
font:14px verdana;
padding:3px;
background:red;
border-radius:10px;
}
#HT4Uwcsticky-main
{float:left;
}
</style>
<script language='JavaScript'>
function closesticky() {
document.getElementById("HT4Uwcsticky-container").style.visibility = "hidden";
}
</script>
<div id='HT4Uwcsticky-container'>
<div id="HT4Uwcsticky-main">
<p id='HT4Uwc-stickylinks'> Popular Topics:<a href='Paste Your Link Here'> Title Of Content</a> | <a href='Paste Your Link Here'>Title Of Content</a></p>
</div>
<div id="HT4Uwcstickyclose">
<a href="javascript:closesticky();" >X</a>
</div>
</div>

6. Now edit the Bold Texts And Save the Blogger Template. And now a sticky css styled welcome, navigation bar will be appear on your blog or website.

Final Words-

If you have any problem by applying this code then please tell us by commenting below or fill our contact form. If you like or find this article helpful then please -

Comment, share on facebook , circle us on google plus, subscribe to our mailing list.

Make A Sticky Welcome Bar For Blog /Website

2014-11-14T09:44:00.001-08:00

Hi friends in this tutorial I will tell you about how to create a welcome a bar for your blog. Welcome bar is widely used by bloggers to provide their special offers or updates on the top of the website.This sticky bar is used to show updates or important news or information, hence you can place it either in top of blog or bottom of blog.. It is work likes an ad of your blog. A welcome bar helps your visitors to go some other or special link or as its name suggest it is widely used for welcoming your visitors on your blog, Some special websites like addthis.com offers you to add a welcome bar to your blog with a special link or whatever you want to show a link, but sometimes that welcome bar did not work or does not appears when visitors come to your website. I also had this problem so I decided to make a great and sticky welcome bar for a blog, In this sticky welcome bar i used various codes and java scripts and used css styles to make it stylish, but you can also change it according to the theme of your blog.So let's begin-

...................................................................................................................................................................

How to add a CSS Sticky Welcome Bar In Blog With Hide Button ?

...................................................................................................................................................................

Follow these easy Steps To Add A Sticky Welcome Bar Like This-

1. Go To Blogger

2. Now go to Dashboard>Template.

3. Select Edit HTML. (Recommended: Backup Your Template before performing any function)

4.Now Search For-

]]></b:skin>

5.Now just above bskin paste the following code-

#ht4u_bar{
background:#333 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUcQtjBVwFLNyZDX8pHjFv8HHVWS6XMbiTePYzbdYyumMkVJpkBYjADMOYzS8wKw9ZyE_oq7CvAC2xSG3rJqH71HlcB-v24TooMfowlld4a9kvuJ8RwqXq_PDD8aDiVyyDPyQigbOX3HI/s400/stickybar.png') repeat-x;
width:100%;
margin:0 auto;
text-align:center;
padding:0px 0;
border-bottom: 1px solid #888888;
-moz-box-shadow: #666666 0px 1px 3px;
-webkit-box-shadow: #666666 0px 1px 3px;
box-shadow: #666666 0px 1px 3px;
z-index: 999;
height: 28px; position:fixed;
line-height: 1.85em;
vertical-align: baseline;
letter-spacing: 1px;
color:#fff;
font-size:13px;
font-weight:bold;
font-family: arial,"Helvetica",sans-serif;
}
#ht4u_bar a{
text-decoration:underline;
color:#E2E504;
}
#ht4u_bar a:hover{
text-decoration:none;
}
#ht4u_bar p {margin:0; list-style:none;}
#ht4u_bar img {vertical-align: middle;
margin-right: 6px;}

6.Now search for-

</head>

7.Paste the following Javascript code just above it-

<script type='text/javascript'>
//<![CDATA[
var ht4u_arr = new Array();
var ht4u_clear = new Array();
function ht4uFloat(ht4u) {
ht4u_arr[ht4u_arr.length] = this;
var ht4upointer = eval(ht4u_arr.length-1);
this.pagetop = 0;
this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
this.ht4usrc = document.all? document.all[ht4u] : document.getElementById(ht4u);
this.ht4usrc.height = this.ht4usrc.offsetHeight;
this.ht4uheight = this.cmode.clientHeight;
this.ht4uoffset = ht4uGetOffsetY(ht4u_arr[mbtpointer]);
var ht4ubar = 'ht4u_clear['+ht4upointer+'] = setInterval("ht4uFloatInit(ht4u_arr['+ht4upointer+'])",1);';
ht4ubar = ht4ubar;
eval(ht4ubar);
}
function ht4uGetOffsetY(mbt) {
var mtaTotOffset = parseInt(ht4u.ht4usrc.offsetTop);
var parentOffset = ht4u.ht4usrc.offsetParent;
while ( parentOffset != null ) {
mbtTotOffset += parentOffset.offsetTop;
parentOffset = parentOffset.offsetParent;
}
return ht4uTotOffset;
}
function ht4uFloatInit(ht4u) {
ht4u.pagetop = ht4u.cmode.scrollTop;
ht4u.ht4usrc.style.top = ht4u.pagetop - ht4u.ht4uoffset + "px";
}
function closeTopAds() {
document.getElementById("ht4u_bar").style.visibility = "hidden";
}
//]]>
</script>

8. Now finally search for <body> and paste this code just below it.

<div id='ht4u_bar'>THERE WRITE YOUR TEXT OR MESSAGE
<span style='padding:0px; float:right'>
<img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgpQu8Gqx9WRjS91jpSpEIWSjAN0Zxk4Z8dtKM9qNu7tjXd3KS-p7dCKm7aOyqKiXuDnumSEPIMiHYcbLCIpAiLnNTvurkPBv9DJP9P1IINGikNTu86XxQb4FbGGXPDatx7UqCUMxHXAE/s400/cancel.png' style='cursor:hand;cursor:pointer;'/></span></div> //**hackintricks4u.blogspot.com**/
<br/><br/>

Now Change the color , text type , and any other thing according to your blog template.
Finally save the HTML code , Now A Sticky Welcome Bar will be appear in your website.

<div class="alignleft">
<script type='text/javascript'>
amzn_assoc_ad_type = 'banner';
amzn_assoc_tracking_id = 'coohactriandt-20';
amzn_assoc_region = 'US';
amzn_assoc_marketplace = 'amazon';
amzn_assoc_placement = 'assoc_banner_placement_default';
amzn_assoc_linkid = 'RKEST76CTWC3UAYQ';
amzn_assoc_campaigns = 'countbf';
amzn_assoc_p = '12';
amzn_assoc_banner_type = 'promotions';
amzn_assoc_banner_id = '1YBZEC8N4E8KAC6C7VR2';
amzn_assoc_width = '300';
amzn_assoc_height = '250';
</script>
<script src='//z-na.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&Operation=GetScript&ID=OneJS&WS=1'></script>
</div>

20 Awesome CSS Styled Bockquotes For Blogger

2014-11-12T06:08:00.000-08:00

A blockquote is used for highlighting a special paragraph or showing it in a special background. A blockquote is also used to show a special message or special quotes or tips by the blog author. A blockquote is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation. A blockquote is used to seperate a desire test or message from the main articles in website.We can say that different types of websites or blogs uses different types of blockquotes. For a tricks and tips blog it is used to highlight the codes of tricks. In this tutorial i will taught you about how to customize a css style blogger blockquote to match your blog style or template. Here are the collection of 20 best CSS Blockquotes for your blog or blogger. So lets get started-

How to Customize CSS Blockquotes Styles-

To customize CSS Blockquotes for blogger go to-

1. Blogger>Template>Edit HTML.

3. For some blogger template that code might look like below.

.post-body blockquote { //Some Code }
OR.post blockquote{ //Some Code }

4. Now delete the whole .post blockquote{here are text}.
5. Now paste any code of the following CSS blockquote styles in place of .post blockquote.

20 Best CSS Blockquotes For Blogger /Website-

blockquote style 1

.post blockquote {
margin: 0 20px;
padding: 10px 20px 25px 20px;
border-left: 5px solid #fce27c;
background-color: #f6ebc1;
}

blockquote style 2

.post blockquote {
font: 14px/22px normal helvetica, sans-serif;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 50px;
padding-left: 15px;
border-left: 3px solid lightblue;
}

blockquote style 3

.post blockquote {
margin: 0 20px;
padding: 10px 20px 25px 20px;
border-left: 5px solid #fce27c;
background-color: #f6ebc1;
}

blockquote style 4

.post blockquote {
background-color: transparent;
border-top: 3px double #DC143C;
border-bottom: 3px double #DC143C;
padding: 5px;
font-style: oblique;
font-size: 1em;
margin-left: 5%;
margin-right: 5%;
}

blockquote style 5

.post blockquote {
border: 2px solid rgb(255, 204, 0);
padding: 8px 10px;
font-size: 120%;
color: black;
font-weight: bold;
background-color: rgb(255, 255, 153);
border-radius:20px 20px 0 20px;
}

blockquote style 6

.post blockquote {
margin : 0 20px;
padding: 10px 20px 25px 20px;
background : #9FCFFF;
color : #484848;
border: 5px dotted #fff;
}

blockquote style 7

.post blockquote {
background-color: white; color: #845424;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLQme-GkBBtjAhjcNp_HSBvPPxmcpc8mCYI6x_ViPQeYIrfyWDfbRyx1D8CE0faD8uRudhjddn7mAdxO3w8_YxWqdsMwYowrAlPern3EZ8X8h19ZMrk4VnmryQXoei7B1iVd6gfo58iAs/s1600/Orange.gif);
background-position: 0% 10px;
background-repeat: no-repeat repeat;
border-width: 2px;
margin: 0px 20px;
min-height: 30px;
padding: 20px 20px 10px 45px;
vertical-align: baseline;
}

blockquote style 8

.post blockquote {
background: #484B52 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyYZmGa6PQq8C6K2BpDdDMLN9s1ELRcf3a2_tRvHRWICXIkoNlYmtjPnydBQEJ_CY2EVvXxmVaoPG3YjDnZUAAmhdbiuKSpY1sA8KA_GDbDY3mVKZ9powM3SbwHo4Tjf4ERT_0-CnFUSE/s1600/green-black-side.gif) ;
background-repeat:repeat-y;
margin: 0 20px;
padding: 20px 20px 20px 50px;
color:#C7CACF;
font: normal 0.9em Helvetica, verdana, serif, Georgia, "Times New Roman";
}

blockquote style 9

.post blockquote {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA-epq4cA78oFM92yZNnGsCszcnuM8N1-XlkeLNKTJivB4k9FUjuchXukBBGiLLnCRYeVWahWxDd-brE4gIH1RCIfLo2vMveSYm76IwBFKnYKiZeV5w5yHbCa4G7JxXFP_OQNHhHTBxDg/s1600/blockquote.png) no-repeat scroll 0px 0px transparent;
border: medium none;
margin: 5px 5px 50px;
padding: 25px 30px 5px 70px;
color: rgb(153, 153, 153);
font-style: italic;
}

blockquote style 10

.post blockquote {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTUtnz39f5xVBX0zoulBjxwTF64_AplHfhLzUqGl_7bT6M7QwDM_1ViqhbgnZWH4lbKEMq1A3RGe0uQxfv-ePBIo0gEqrdae5oQjhokSIj5cA6lDhyphenhyphenf5c9dlGEepcN2_vE8qFl1zFZIJ8/s1600/note.png) repeat-y scroll 0 0 transparent;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 0 3px #808080 inset, 0 0 1px #FFFFFF;
-moz-box-shadow: 0 0 3px #808080 inset, 0 0 1px #FFFFFF;
-ms-box-shadow: 0 0 3px #808080 inset, 0 0 1px #FFFFFF;
-o-box-shadow: 0 0 3px #808080 inset, 0 0 1px #FFFFFF;
box-shadow: 0 0 3px #808080 inset, 0 0 1px #FFFFFF;
margin: 10px 13px;
padding: 21px 45px 14px;
line-height: 1.65em;
font-famliy:georgia,sarif;
font-size:13px;
}

blockquote style 11

blockquote.style1 {
font: 14px/20px italic Times, serif;
padding: 8px;
background-color: #faebbc;
border-top: 1px solid #e1cc89;
border-bottom: 1px solid #e1cc89;
margin: 5px;
background-image: url(images/openquote1.gif);
background-position: top left;
background-repeat: no-repeat;
text-indent: 23px;
}
blockquote.style1 span {
display: block;
background-image: url(images/closequote1.gif);
background-repeat: no-repeat;
background-position: bottom right;
}

blockquote style 12

blockquote.style2 {
font: 14px/22px normal helvetica, sans-serif;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 50px;
padding-left: 15px;
border-left: 3px solid #ccc;
}

blockquote style 13

blockquote.style3 {
font: 18px/30px normal Tahoma, sans-serif;
padding-top: 22px;
margin: 5px;
background-image: url(images/openquote3.gif);
background-position: top left;
background-repeat: no-repeat;
text-indent: 65px;
}
blockquote.style3 span {
display: block;
background-image: url(images/closequote3.gif);
background-repeat: no-repeat;
background-position: bottom right;
}

blockquote style 14

blockquote.style4 {
font: 14px/20px italic Times, serif;
padding-left: 70px;
padding-top: 18px;
padding-bottom: 18px;
padding-right: 10px;
background-color: #dadada;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin: 5px;
background-image: url(images/openquote4.gif);
background-position: middle left;
background-repeat: no-repeat;
text-indent: 23px;
}

blockquote style 15

blockquote.style5 {
font: 12px/18px normal "Courier New", sans-serif;
padding-left: 70px;
padding-top: 2px;
padding-bottom: 2px;
background-color: #000;
color: white;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin: 5px;
background-image: url(images/openquote5.gif);
background-position: middle left;
background-repeat: no-repeat;
text-indent: 23px;
}
blockquote.style5 div {
padding-right: 50px;
display: block;
background-image: url(images/closequote5.gif);
background-repeat: no-repeat;
background-position: bottom right;
}

blockquote style 16

.post blockquote {
background: #B9DFF1;
margin: 0 10px;
padding: 20px;
color:#333;
border-radius:15px;
font: bold 0.9em "Comic Sans MS", verdana;
/**hackintricks4u.blogspot.com**/
line-height: 1.6em;
box-shadow: 4px 4px 10px #e3e3e3;
}

blockquote style 17

.post blockquote { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1jfqOSbgbwp-zDj29Rau4mlHwkcL7W-CIiyalC-y8asNu7fC32iY6sPV9k2gyeHcdQ282xPE8snav-KlpQ8Wm-o76MqGitvsXWZg6PxaTEl_ycILaumPbZALXjCk23FLNAajw5FPDVtk/s1600/paper1.png) repeat-y scroll 0 0 transparent;
/**hackintricks4u.blogspot.com**/
border-radius: 5px;
margin: 10px;
padding: 20px 10px 15px 50;
line-height: 1.6em;
font-family:'Fondamento', cursive, sans-serif;
font-size:15px;
}

blockquote style 18

.post blockquote {
font: normal Tahoma, sans-serif;
line-height:1.6em;
font-size:18px;
padding:10px;
padding-top: 24px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVPCGsp3JRXMKlUbEjaOlBbT_vLLfjFAb4a7MDzj4K3bFEaVlXDNZOZQVyQtbjCfM1dH-4KCQuK_nAdXdloabtSmxJufefjda7JcsBw1P-UwAvd93bvogqDKgHkKo1Zd0eQQ2FrQCYMB0/s1600/examplequote.gif);
/**hackintricks4u.blogspot.com**/
background-position: top left;
background-repeat: no-repeat;
text-indent: 65px;
}

blockquote style 19

.post blockquote {
background: #81c136;
margin: 0 12px;
padding: 18px;
border-radius:20px;
font: bold 1em 'Freckle Face', cursive;
/**hackintricks4u.blogspot.com**/
color: #384924;
line-height: 1.6em;
box-shadow: 5px 5px 12px #e3e3e3;
}

blockquote style 20

.post blockquote {
background: white;
margin: 0 10px;
padding: 20px;
color:#999;
font-family:cursive, sans-serif;
/**hackintricks4u.blogspot.com**/
line-height: 1.6em;
border-left:2px dashed #ce6100;
border-right:2px dashed #ce6100;
}

How To Install WhatsApp On PC Without Bluestacks

2014-11-06T04:25:00.001-08:00

Hello Friends In this tutorial i will explain you about how you can install Whats app on Pc with using blue-stacks android emulator.As we know that Bluestacks and Whatsapp both are trending application today, so by using bluestacks we can install whatsapp on your pc.

Whatsapp is a widely used communication messenger with 417 Million Users In world and about 30 Million Users in India. Whatsapp messenger is released for Android, Blackberry, Symbian And Windows Phone Platforms. Whatsapp comes with outstanding features like Sending Voice, File , Videos, images etc and sound recording feature. There are thousands of stickers emotions in the whatsapp. That is why it is popular among us. WhatsApp Messenger is a cross-platform mobile messaging app which allows you to exchange messages without having to pay for SMS.

Blue-stacks Is an app player or we can say an android emulator. Through it we can install a lot of android applications, software , and games in the .apk extension. Blue stacks enable us to install directly from Google play store or we can also install .apk extension files through it. BlueStacks App Player lets you run your favorite mobile apps fast and fullscreen on PC or Mac.
BlueStacks App Player is a great tool for allowing you to run your favorite mobile apps/games in fullscreen in your browser using a PC or Mac.

...................................................................................................................................................................
How To Install Whatsapp On PC Using Bluestacks ? ...................................................................................................................................................................
Follow these steps below to install whatsapp on your pc using bluestacks.

1. First Go to Bluestacks.com and download Bluestacks on your PC.
2. Now Install the Bluestacks Player , After sometime a homescreen will be appear like this-

3. Now search for whatsapp.
4. Now click on Whatsapp and Install It.
5. Finally Your Whatsapp has been installed and now you can use it.