How to Change Text Select Highlight Color on Blogger Blog

You Can easily Change Text Select Highlight Colour By Adding A Small Css Code To Your Blogger Template..This can ensure that when users highlight text on your blog, it matches your blog’s theme, and may also look professional at the same time.

Follow These Simple Steps :

• Sign in To Your Blogger Account and Select Blog That You Want To ADD This Widget then goto
• Template Tab >> Edit HTML
• Then Add The Below Code Below or After </head> (Want help to find Click Here)

<style type='text/css'>
 ::selection {background:#00624b;color:#ffffff;}
 ::-moz-selection{background:#00624b;color:#ffffff;}
</style>

• Then Save Your Template
• You Can Change The Selecting Colour By Replacing #00624b with Code Of Your Colour

Try Our Html Colour Code Generator Nbt Colour Codes

Read More

How to Change Your Blog ScrollBar

Change Your Blog's Scroll Bar Which Gives Good View Of Your Blog

You Can see Changed Scroll Bar On Right Side Of My Blog

Steps To Add This To Your Blog

• Go To Blogger >> Template >> Backup Your Template
• Click Edit HTML >> Search For ]]></b:skin>  (Want help to find Click Here)

• Now Paste The Following code Above/Before ]]></b:skin>

/* Webkit override Scrollbar with CSS3 By NBT */
::-webkit-scrollbar {
width: 12px; height:8px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.3);
background:#fff;
}
::-webkit-scrollbar-thumb {
background: rgb(62,201,187);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgb(62,201,187);

If You Want To Customise The Colour Then  change rgb(62,201,187) as your Desired Colour
You Can Also Change Width And Height by Changing 12px and 8px

Please write comments about this tutorial or tell me any faults which you found while creating and publishing. I will always there to help you....

Read More

Add Sticky CSS Flocting Bar For Blogger

Add Sticky Css Floting Bar To Your Blogger Blog Which attracts more No of Visitors To Your Blog...Your Blog Look Beautiful And Greate.To Add Follow The Below Steps













1 . First Go To Blogger.com > Your Blog > Template

2 . Click On  Backup and Backup Your Template

3 . Now Click On Edit HTML

• Search for ]]></b:skin>   (Want help to find code Click Here)
• And Paste The Below Css Code Before/Above It  

/* NBT Notification bar */
#nbtbarWrap{
display: none;
margin: 0;
padding: 0;
position: fixed;
margin-top: -41px;
z-index: 999999;
width: 100%;
height: 41px;
}
#nbtbar {
width: 100%;
height: 28px;
margin: 0px;
padding-top: 7px;
text-align: center;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);  background: url(http://4.bp.blogspot.com/-zgw_M3ndUbM/UjL3FsR0p9I/AAAAAAAAAiI/jKETrYxgHaA/s1600/nbtbarback.png);
position: relative;
box-shadow: 1px 2px 9px #666666;
z-index: 9998;
text-decoration: none;
color: #eeeeee;
font-family: arial,sans-serif;
font-size: 13px;
font-weight: bold;
text-shadow: 1px 1px 4px rgb(0, 0, 0);
border-bottom: 2px solid #cccccc;
}
#nbtbar a{
text-decoration: none;
color: #fff;
font-family: arial,sans-serif;
font-size: 13px;
font-weight: bold;
text-shadow: 1px 1px 1px #000;
outline: none;
}
#nbtbar a:hover{
text-decoration: underline;
}
#nbtbarWrap #closenbtbar{
display: block;
position: absolute;
top: 0;
right: 23px;
height: 40px;
width: 21px;
background: url(http://4.bp.blogspot.com/-EKBTBdOMsx8/UjK8Zm_D5SI/AAAAAAAAAh4/AG2TDLGGZ_k/s1600/NBT-light.png) no-repeat 0 center;
cursor: pointer;
}
#nbtbarWrap #closenbtbar:hover{
background-position: -21px 50%;
}
#nbtbarWrap.bottomPosition #closenbtbar{
background-position: right 50%;
}
#nbtbarWrap.bottomPosition #closenbtbar:hover{
background-position: -42px 50%;
}
#nbtbarWrap #opennbtbar{
display: block;
position: absolute;
top: -6px;
right: 15px;
padding: 0 7px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);  background: url(http://4.bp.blogspot.com/-zgw_M3ndUbM/UjL3FsR0p9I/AAAAAAAAAiI/jKETrYxgHaA/s1600/nbtbarback.png);
border-left: 2px solid #dddddd;
border-right: 2px solid #dddddd;
border-bottom: 2px solid #dddddd;
cursor: pointer;
z-index: 1;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
box-shadow: 1px 2px 9px #333333;
}
#nbtbarWrap #opennbtbar span{
display: block;
width: 21px;
height: 34px;
background: url(http://4.bp.blogspot.com/-EKBTBdOMsx8/UjK8Zm_D5SI/AAAAAAAAAh4/AG2TDLGGZ_k/s1600/NBT-light.png) no-repeat right 50%;
}

Now ADD The Below Code After The <body>  or <body

<div class='opennbtbar' id='nbtbarWrap' style='display: block; margin-top: 0px;'>
<div id='nbtbar'>
<strong><font color='#84DC04'>Trending: </font></strong><a href='http://newblogger-tricks.blogspot.in/2013/09/add-sticky-css-floating-bar-for-blogger.html'>Get This Notification Bar!</a> |
    <strong><font color='#FFFF00'>Most Popular: </font></strong><a href='http://newblogger-tricks.blogspot.in/2013/09/how-to-remove-powered-by-blogger.html'>Remove "powered by blogger" Attribution!</a>
<span id='closenbtbar'/></div><span id='opennbtbar' style='top: -6px;'><span/></span></div> <br/> <br/>

• Replace   ULR's  With Your Ulr Of The Post
•   Replace Get This Widget , Remove "powered by blogger" Attribution  with Your Post Title

Now Finally Add This Code Below/After <head> Imp

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

<script src='https://newbloggertricks.googlecode.com/svn/NBT-notificationBar.js' type='text/javascript'/>

Go To Your Blog And Check The Widget


Note: This widget is created by NewBloggerTricks. Don't forgot to link back if you want to share this tutorial

Read More