How to Create Custom Webkit Scrollbar in Blogger Blog

Would you like to upgrade the Scroll bar of your site? Parchment bar shows up at the right half of the screen and, it permits clients to span down the page at whatever point they drag there mouse up or down the page. To give an easy to understand experience to your guests, it is fundamental to have a Smooth Scroll bar. On the other hand, there is probably Custom Scroll bar does the employment liberally, yet it is not great. Few days back, our peruser educated us about the brilliant Webkit Scrollbars that he has seen on distinctive sites. Besides, he additionally asked for us to create a comparable one. Thus, in this article we will figure out How to Create Customize Webkit Scrollbar in Blogger Blog? Please take a look at my scrollbar for a live a demo.

Instructions to Add Webkit Scrollbar in Blogger Platform? 

In all honesty, there is no intricacy in this excercise on the grounds that we should do nothing more than to embed a CSS to our topic, and it would do the employment easily. To introduce Webkit Scrollbar in your blogger format consider the accompanying directions.

Step 1. Go To Blogger.com >> Templates >>EDIT HTML >> Proceed.
Step 2. Now in the theme Search for ]]></b:skin> and above it Paste the Following CSS Coding.

/* --- Bloggingtipsandtrix CUSTOM WEBKIT SCROLLBAR IN BLOGGER BLOG --- */
::-webkit-scrollbar {
background:#ddd;
width:10px;
}
::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
background-image: -webkit-linear-gradient(top, #158aee 20%, #158aee 60%);
}
::-webkit-scrollbar-thumb:hover {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
background-image: -webkit-linear-gradient(top, #168eca 20%, #168eca 60%);
}
::-webkit-scrollbar-track {
}

Short Customization:

Replace #ddd to change the background of your scrollbar. You can use our color code generator.
Then replace #158aee with the color that you want to see in the scrollbar and the hexadecimal
168eca for its hover effect.
Step 3. After doing all the customization just press the Save button. Now Visit your site and we are sure it wouldn’t let you down. By using the same technique, we can customize many elements of a website. We will soon release their tutorial too so stay tuned with BTAT

How To Add DISQUS Comment System in Blogger Blog?

The base of Blogger commenting skeleton is extremely smooth and sufficient for many individuals, yet what would happen on the off chance that it is must for your readers to unite with your webpage however some social regions like Facebook, Twitter, Google + to make a comment. For that, a site administrator needs to present an overabundance of Plugins or imagine a scenario in which I Say extra effort and persevering work.

Why not try it out to Disqus?

Disqus is a yet an exchange commenting system which is sufficiently versatile to help blend with other social networking sites such as Facebook, Twitter, Google, Open URL, and visitors can even login through their individual Disqus account where all our discussions are recorded. Something else which achieves a detectable change, than whatever other commenting schema, it has a  solid functionalities.

There is a straightforward technique for joining Disqus in Blogger. We have to just enroll an alternate record over Disqus and by Widget going along with it will override all the old/past comments. Consequently, Disqus would be presented successfully.

Enlisting a New Account over Disqus: 

Possibly the least difficult bit of the whole excercise is to select your new record. Just head to Disqus.com and register a free record for your site. Remember to check your character however email affirmation.

Installing Disqus Widget (Plugin) in Blogger:

After selecting "Blogger" as your platform, another page will be opened. From there, the process will get a bit complex. This establishment comprises of two steps: the first one is to include/add the Disqus Widget in Blogger and second to import old comments.

Step 1. Adding Widget:: Now on the page there will be two options. Just Select Add "Your Site Name" to my blogger site and a new window will pop'd out which will allow us to install the widget in our blog respectively.

Step 2. From the list select your blog and press the blue "Add Widget" button. It will successfully install Disqus commenting system in your site.

Step 3. Importing Comments:  In order to import your old comments from previous platform just go to Tools > Import and proceed to the next step.

Step 4. On reaching Import menu there will be two options, but we have to select "Import comments from Blogger" so that it imports all those comments which are previously published on the site.

Step 5. After selecting "Import Comments", it will take you to a new page where it will ask for accessing your blog's data. Just give it the permission by pressing "Grant Access" button.

Step 6. After granting the permission, go back to the Import >> Tools Page. Now you will be able to see a new option there i.e. "Choose a blog to import from" which will allow you to import comments from your blog. From the list select a blog to import comments. Once, the blog is selected press the "Import" button.

Congratulations, Disqus is successfully integrated into your Blogger enabled website. All the old comments will be processed one by one and would be available on your site once the Disqus team finishes reviewing it.

Some other delightful advantages of utilizing Disqus is that it permits us to produce a conventional measure of income by demonstrating a few notices inside remarks. Some substantial associations dependably incline toward it in light of the fact that it helps a group to become as well as gives dependability and client fulfillment. All an all, it is an absolute necessity have remark framework.

How to Add Disqus Recent Comments Widget to Blogger

Today, all of us will discover a straightforward and valuable course about how to provide a nice-looking and fast-loading Disqus Recent Remarks widget using a Blogger blog. Widgets including these types of make it possible for followers know about the actual interactions happening pictures blog, and if you're rather active, this results in an excellent feeling. This widget showcased is usually well-scripted plus the JavaScript is usually organised in Disqus to be able to slow up the weight moment with your blog. And so why don't we discover ways to create this to widget.
See live demo:  How to Add Disqus Recent Comments Widget to Blogger

Adding Disqus Recent Comments Widget to Blogger

You can add this widget code inside any text/html block inside your blog.
Step 1. Go to Blogger >> Layout
Step 2. Click on Add a Gadget
Step 3. Choose the HTML/JavaScript widget

Step 4. Now add it anywhere you like on your blog
Step 5. Now copy and paste the following code inside the HTML/JS widget.

<div id="RecentComments" class="dsq-widget">
<script type="text/javascript" src="http://bloggingtipsandtrix.disqus.com/recent_comments_widget.js?num_items=5&hide_mods=0&hide_avatars=0&avatar_size=32&excerpt_length=50"></script>
</div>

Step 6.  Click Save

Customization:

The code above contains a URL. You need to change the text in bold with your own domain name (yourdomain.disqus.com).
After the ? in the URL, you can see a bunch of parameters. These are used to customize the functionality of the widget. Here is a brief description for each of them.
num_items - Number of comments to show in the widget
hide_mods - Hide moderators' comments (1 for hidden, 0 for disabled)
hide_avatars - Hide display images (1 for hidden, 0 for shown)
avatar_size - Avatar size in pixels (32 by default)
excerpt_length - Character-length of the excerpt (1000 by default)

Adding CSS

.dsq-widget ul.dsq-widget-list {
 padding: 0;
 margin: 0;
 text-align: left;
}
img.dsq-widget-avatar {
 width: 32px;
 height: 32px;
 border: 0px;
 margin: 0px;
 padding: 0px 3px 3px 0px;
 float: left;
}
p.dsq-widget-meta {
 clear: both;
 font-size: 80%;
 padding: 0;
 margin: 0;
}
li.dsq-widget-item {
 margin: 15px 0;
 list-style-type: none;
 clear: both;
}
span.dsq-widget-clout {
 padding: 0 2px;
 background-color: #ff7300;
 color: #fff;
}
a.dsq-widget-user {font-weight: bold;}
a.dsq-widget-thread {font-weight: bold;}
table.dsq-widget-horiz td {padding-right: 15px;}
.dsq-widget-comment p {display: inline;}

Enjoy your day buddies!!!

How to Uninstall Deep Freeze In my Computer

Here is the very simple steps to uninstall the software Deep Freeze. We will divide this steps into two ways. First, it must first be disabled (put deep freeze software in a thawed state  and then  second, it must be uninstalled.

To Disable (thawed state) Deep Freeze:

Step 1. Hold down the shift key and double-click on the Deep Freeze icon. Alternatively, you can press Crtl-Alt-Shift-F6. You should now see a password dialog.
Step 2. Enter your password and click OK. If you have not yet entered a password you should be able to click OK without entering anything. You should now see a dialog with boot options.
Step 3. Select "Boot thawed" and click OK. This will disable Deep Freeze on the next reboot.
Reboot your machine. After the machine reboots you are ready to uninstall Deep Freeze.

To Uninstall Deep Freeze:

Step 1. Locate the installation file you used to install Deep Freeze to this machine. By default the name of this file is called "DF5Std.exe" for versions 5.X and "DF6Std.exe" for versions 6.X.
Step 2. Run the installation file (DF5Std.exe or DF6Std.exe).
Step 3. Select the option to "Uninstall"

Note: The software should uninstall and reboot the machine. When the machine reboots, Deep Freeze should be uninstalled.
If you are licensed for deep freeze 'standard' and have forgotten your password, you can email technical support at "support@faronics.com" for further information.

If you are running the 'evaluation' version of Deep Freeze and have forgotten the password, restart the computer and enter the system BIOS settings. Advance the clock by at least 60 days and then restart, this will disable the software.
After the system has started, run the Deep Freeze installation program to uninstall Deep Freeze.
After the computer reboots, re-enter the BIOS and reset the clock to the current date.
You can then re-install Deep Freeze after restarting.

(All 60-Day evaluations stop functioning after 60 Days.
Once the software has expired it can be uninstalled.)

Uninstalling Deep Freeze Via Control Panel

Step 1. Go to Control Panel >>  Add/Remove Programs.
Step 2.  From there select  Deep freeze  program . There will be two options there, Change/Remove. Step 3. Click remove. The program should uninstalled.

How To Use Deep Freeze To Protect Your Computer Against Illegal Activities

One way of protecting your  computer is through using Deep Freeze Standard software. This is very popular among people (businessmen) in the internet cafe. Deep Freeze Standard is a software for protecting the computer by freezing all the hard drives or the whole computer system. In this article I would like to share you how to install Deep Freeze Standard on your computer in the most effective way.

Read also:

How To Delete Autorun Virus In Flash/Usb Drive
How To Recover Files From Your Infected Flash/USB Drive

Deep Freeze Standard is developed to comprehensively protect the computer as well as components in hard drives from losing data or external manipulations to modify these data.

Right after the utility is activated, all the settings as well as applications which are installed previously will be kept intact. Other programs and softwares which are activated after Deep Freeze Standard has been enabled will disappear completely after you shut down your computer. So, if you have some updates to install in you computer, it is advisable to uninstall first this program and install it back after your  important updates like virus protection.

What are the benefits from installing Deep Freeze Standard?

Protect the system and internal components of hard drives.
Recover the initial stages after the computer’s startup.
Customize freezing modes for one or multiple hard drives.
Protect settings with passwords.

System requirements

- Install Deep Freeze Standard on computers using Windows operating systems with all versions such as Windows 2000, Windows XP, Windows Vista and Windows 7/8.

INSTRUCTIONS TO INSTALL DEEP FREEZE STANDARD

Step 1: Open folder containing Deep Freeze Standard setup file, select DFStd.exe file (or if this software has not been available on your computer, you can download the latest version of Deep Freeze Standard here).

Step 2: A window will be displayed along with necessary information about the developer as well as Deep Freeze Standard software.
Click Next to proceed.

Step 3: The next window will contain the terms that the developer requires you to agree to proceed installing Deep Freeze Standard.

Select I accept the terms... to agree with these terms.

Click Next to proceed.

Step 4: Tick Use Evaluation to accept the trial. If you use the copyright code of the developer, you open License Key section and input the copyright code to use the copyright.

Click Next

Step 5: The Frozen Drives Configuration window will display all the available hard drives on the computer, select the hard drives that you want to freeze.

Click Next.

Step 6: Click Install to start installing Deep Freeze Standard .

Right after the installation finishes, your computer will be rebooted automatically; therefore, don’t be too surprised when your computer automatically shut down!


Wish you the best in your blogging career!

How To Make Drop Down Menu Tabs By using CSS3

Internet is already flooded with blogging tutorials that talks on making menu tabs through using css3 which makes the whole thing impressive and beautiful. I will show you the same tutorial but I will make it a little bit different since  I will add a very small and simple trick that is, make the home tab to be highlighted as you open your blog  pages. It is  cool and professional type of menu tabs for your blog. Without much words to say, let us go with the process!
See the live demo for " Drop Down Menu Tabs With CSS3".

Read Also: How To Add Fancy CSS3 & JQuery Lavalamp Menu For Blogger

Making Drop Down Down Menu Through  CSS3

Step 1. Go to Blogger Dashboard >> Lay out
Step 2. Click  Add  a Gadget >> HTML/Javascript
Step 3. Paste the code below inside the blank page or space

<style>
/*------ CSS3 Drop Down Menu By BTAT (http://bloggingtipsandtrix.blogspot.com)---------*/
#btat-menu, #btat-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#btat-menu :first-child > a {
background-image: -webkit-gradient(linear, left top, left bottom, from(#168eca), to(#fff));
-moz-border-radius: 4px 0px 0px 4px;
-webkit-border-radius: 6px;
border-radius: 4px 0px 0px 4px;
-moz-box-shadow: 0 1px 1px #777;
-webkit-box-shadow: 0 1px 1px #777;
box-shadow: 0 1px 1px #777;
}
#btat-menu {
width: 560px;
height:38px;
margin: 60px auto;
border: 0px solid #222;
background-color: #111;
background-image: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background-image: -webkit-linear-gradient(#444, #111);
background-image: -o-linear-gradient(#444, #111);
background-image: -ms-linear-gradient(#444, #111);
background-image: linear-gradient(#444, #111);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 1px 1px #777;
-webkit-box-shadow: 0 1px 1px #777;
box-shadow: 0 1px 1px #777;
}
#btat-menu:before,
#btat-menu:after {
content: "";
display: table;
}
#btat-menu:after {
clear: both;
}
#btat-menu {
zoom:1;
}
#btat-menu li {
float: left;
border-right: 0px solid #158aee;
-moz-box-shadow: 1px 0 0 #444;
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
position: relative;
}
#btat-menu a {
float: left;
padding: 12px 30px;
color: #999;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#btat-menu li:hover > a {
color: #fafafa;
background-image: -webkit-gradient(linear, left top, left bottom, from(#168eca), to(#fff));
}
*html #btat-menu li a:hover { /* IE6 only */
color: #fafafa;
}
#btat-menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 9999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 -1px rgba(255,255,255,.3);
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#btat-menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#btat-menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#btat-menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#btat-menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#btat-menu ul a {
padding: 10px;
height:15px;
width: 130px;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#btat-menu ul a:hover {
background-image: -webkit-gradient(linear, left top, left bottom, from(#168eca), to(#fff));
}
#btat-menu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
background-image: -webkit-gradient(linear, left top, left bottom, from(#168eca), to(#fff));
}
#btat-menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #168eca;
}
#btat-menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
#btat-menu ul li:first-child a:hover:after {
border-bottom-color: #168eca;
}
#btat-menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#btat-menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
height:10px;
}
</style>
<br />
<ul id="btat-menu">
<li><a href="#">Home</a></li>
<li>
<a href="#">Categories</a>
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">Graphic design</a></li>
<li><a href="#">Development tools</a></li>
<li><a href="#">Web design</a></li>
</ul>
</li>
<li><a href="#">Work</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>

Replace the "#" sign with your own link and the bolded words (Home, Categories, css, graphic design etc. )with your own title.

Step 4. Save and you're done!

Recommended for you:

Horizontal Drop Down Menu With Sub-Tabs In Two Columns In Blogger
How To Create A Drop Down Menu To Blogger/Blogspot
Create Multi Level Drop Down Menu In Blogger

If you have  more questions regarding its customizations just contact me through this link and I will try my very  best to help you.

Thanks buddies and Peace OUT!!!