728x90 Ad Space

Showing posts with label Widgets. Show all posts
Showing posts with label Widgets. Show all posts

Saturday, 1 February 2014

How To Use Blogger And Google+ Comments System Together In Blogger?


As You Know That Blogger Platform Is Growing Day By Day, Google Is Introducing Many New Features Along With It. Google Had Rolled Out New Google+ Comment System In Blogger To Use For Better Appearance And Traffic. The Blog Always Have Advantages And Disadvantages Of It. So, We've Discussed About Enable Google+ Comments In Blogger, This Article Is Similar To That One. When We See Advantage Side Which Is Having To You, We Always Think That Why Shouldn't We Apply It For Advantage For Us. But Every People Want That No Disadvantage Should Come In His Blogger. So Here Newbies Get Confused To What Should They Go. But We Have A Great Solution For It, That Is We Should Use Both Google+ And Blogger Comments In Blogger. Basically Or Default, The Comments System Is Blogger Comments And Then We Apply Google+ Comments If We Want But What If We Apply Both Of Them?. Yes It Is Possible In Blogger Now, We Can Apply Both. We Are Going To Discuss About It Below. So Read Carefully And Learn Below.

How This Will Work In Blogger?

So, Working Of This Comment System Is Very Simple Like That One Of The Blogger And Google+, But There Are Some Changes. If You Are Going To Comment, You Will See Two Icons, The Default Enabled Icon Will Be Blogger And If We Click On It If It Is Not Selected, Then The Blogger Comment System Will Appear, Then On The Right, There Will Be A Google+ Comment Icon And If We Click On It, The Google+ Comments Will Appear. So It Will Give You Great Advantage That The User Can Do This Comment By His Own Way. But See The Disadvantages And Advantages Carefully In The Previous Enabling Google+ Comment System In Blogger. On Thing Remember, Your Each And Every Post Must Contain Atleast One Comment To Show Google+ Comments Otherwise It Will Not Work.

How Made It?

This Is Made With Simple Javascript And CSS Language So It Will Not Affect Your Loading Speed Of Your Website. Javascript Allows To Use Blogger And Google+ Comments System While CSS Makes It Professional And Perfect For You. Remember That While Applying These Both System, Disable Your Google+ Comments In Blogger. Well, I Want To Tell The Developer Of This Comments System Is David Kutcher From BlogXPertise. But I Have Made For You Myself!.

Why To Use These Both Systems In Blogger?

So This Question Might Have Come In Your Mind That Why To Add These Both Systems Together In Blogger. But Due To It's Disadvantages, You Might No Use These System. This Will Be Fine For Every Side. You Will Not Loose Your Comments Via Adding Google+ Comments. But This Allow On Disadvantage Which Is That Spammers Can Spam Comment In Your Google+ Comments Because It Has Not Moderation Requests. Which Means That If They Found That You Have Comment Moderation In Blogger Comments, Then They Can Annoy You By Google+ Comments. But The Advantage Is That Your Blog Will Now More Google And Google+ Friendly, Which Will Allow Many Peoples To Arrive On Your Website Because Now A Days, Google+ Is Also Getting Very Popular.

Adding In Blogger

So This Is The Main Part Of Our Today's Post. I Recommend You To Backup Your Template In Case If You Stuck In This Tutorial.
  • Go To Blogger.com >> Your Blog >> Template >> Backup/Restore.
  • After Your Template Backup, Click On "Edit HTML" In The Template Tab.
  • Search For The Following Code Below:-
<b:includable id='comment_picker' var='post'>

  • After Finding The Above Code, Replace It With The Following Code. Don't Forget To Replace The Whole Code Until </b:includable>.

<b:includable id='comment_picker' var='post'>
  <b:if cond='data:post.forceIframeComments'>
    <b:include data='post' name='iframe_comments'/>
    <b:if cond='data:post.showThreadedComments'>
      <b:include data='post' name='threaded_comments'/>
      <b:include data='post' name='comments'/>
    <b:if cond='data:post.commentSource == 1'>
      <b:include data='post' name='iframe_comments'/>
      <b:if cond='data:post.showThreadedComments'>
        <b:include data='post' name='threaded_comments'/>
        <b:include data='post' name='threaded_comments'/>

  • After Replacing The Above Code, Let's Find For Another Code Below:-

<b:includable id='threaded_comments' var='post'>

  • Replace The Following Code Again With The Code Below:-

  <b:includable id='threaded_comments' var='post'>
  <div id='com-header'>
<h6>Comment With:</h6> <img class='com-on' id='com-norm' src='https://lh3.googleusercontent.com/-nfrkoUYsV-E/UXVi6W7CI8I/AAAAAAAAILo/uCS3thePKXU/s50/blogger_on.png' title='view Blogger comments'/><h6> ← OR → </h6> <image id='com-gplus' src='http://lh6.googleusercontent.com/-wnTb7SHAGEE/UXVi6xoHXAI/AAAAAAAAILY/6vx5Em5w8MI/s50/plus_off.png' title='view Google+ comments'/><h6>The Choice is Yours!</h6>
<div id='copyrigtsbt'><a href='http://bloggingtutorials2.blogspot.com/2014/02/how-to-use-blogger-and-google-comments_1.html'>Get This Widget</a></div>
<div id='comment-zone'>
  <div class='comments' id='comments'>
    <a name='comments'/>
    <div class='comments-content'>
      <b:if cond='data:post.embedCommentForm'>
        <b:include data='post' name='threaded_comment_js'/>
      <div id='comment-holder'>
    <p class='comment-footer'>
      <b:if cond='data:post.allowNewComments'>
        <b:include data='post' name='threaded-comment-form'/>
    <b:if cond='data:showCmtPopup'>
      <div id='comment-popup'>
        <iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
    <div id='backlinks-container'>
    <div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
       <b:if cond='data:post.showBacklinks'>
         <b:include data='post' name='backlinks'/>
  <div id='gcontainer'><div id='gcomments'/></div>
<script src='http://apis.google.com/js/plusone.js'/>
<script src='https://googledrive.com/host/0B3Ztl1RRz6W7NWNHalYzOWh5MzQ'/>
#gcontainer {
#com-norm,#com-gplus {
padding:0 5px;
#com-header {
border: 1px solid #d2d2d2;
padding: 10px;
float: left;
width: 650px;
margin-bottom: 20px;
background: #f5f5f5;
#com-header h6{
font-size: 20px;
text-transform: uppercase;
font-weight: bold;
float: left;
padding-top: 15px;
margin: 0px;
margin-right: 7px;
margin-left: 7px;
#copyrigtsbt {
float: right;
margin-top: 20px;
border-top: 1px solid #d2d2d2;
margin-right: -10px;
padding-right: 10px;
padding-top: 5px;
padding-left: 10px;
border-left: 1px solid #d2d2d2;
padding-bottom: 5px;
margin-bottom: -10px;
background: #fff;
#copyrigtsbt a {

  • Finally Click On "Save Template".

Facing Problem?

Guys, If You Found This Error While Saving Template "The widget with id "Blog1" cannot contain element: "#text". A widget can only contain b:includable elements.", Then See The Last Line Of The Above Code, There Will Be Written Like This "See More - http://bloggingtutorials2.blogspot.com/blablablabla", Then Remove This Code From The Last Line And Then Save Your Template.

So Friends That Was The Tutorial For You To Use Blogger And Google+ Comments System In Blogger. I Hope You Will Like This Post. If You Are Facing Problem In Adding The Code Above, Then Ask In Comments, Because Comments Are Always Appreciated; Comments Are Always Helpful. Share This Post With Your Friends And Blogger Fellows And On Social Networks. Also Subscribe Us Now To Receive Hot Updates From Us Straight In Your Inbox. Get In Touch With Us. Happy Blogging!.

Saturday, 25 January 2014

How To Add Header Email Subscription Box Widget In Blogger


Previously We've Discussed About How To Add Newsletter Email Subscription Box In Blogger, Now This Tutorial Is Also Like That, But In This, We Will Add Subscription Box (Widget) On The Header Of Your Blog Which Will Also Increase Your Traffic And Will Take Your Visitors Attention To Subscribe. This Widget Is Best To Used Because It Will Increase Your Subscribers And This Will Improve Your Traffic Rapidly. You Can Give Them Message To Subscribe To Get Latest News. I Have Shared Header Subscription Widget Because It Will Give You A Lot Of Chances To Subscribe Because When Your Visitor Visits Your Website, They Will First See Your Subscribe Box. Even You Can See That We Have Also Added In Your Header So You Can Subscribe Easily. Installing Widget In Blogger Is Always A Simple Method As Only A Few Simple Codes Have To Copied And Pasted.

Header Email Subscription Box

So This Is Also A Clean And Simple Widget Email Subscription Box. This Widget Is Divided Into Two Portions. The First Portion Is The Paragraph With An Image On The Left, And The Second Portion Is On Right Side With A Large Email Box With "Submit" Button On The End-Right Side Of The Widget. I Have Kept Only One Input Which Is "Email Address" Because The "Name" Input Is Not So Essential Because The Feedburner Doesn't Accept The Names Of The User. Heading And A Little Message Is Also Added On The Left Side Of The Widget As I Described. This Widget Will Help You In Increasing Your Email Subscribers Because This Will Be Implemented In Your Header Which Will Be The Max Attention By Your Visitors.


The Instructions Of Adding Any Widget To Blogger Is Not So Difficult, This Widget Also Contains Some Codes Which Have To Be Pasted In Your Widget Area Or In Your Template. Just Follow The Simple Steps Below:-
  • Go To Blogger>> Your Blog >> Layout >> Add A Gagdet.
  • Choose "HTML/Javascript" In The Header Section (Below Header And Above Blog Posts".
  • Paste The Following Code Inside HTML/Javascript.
<style type='text/css'>
/* Header Subscription Box By Blogging Tutorials --------------------------------- */
#headsubbox{background:#fff url('http://1.bp.blogspot.com/-MEUPvDxSseg/UjbAJaVr9QI/AAAAAAAAINg/-dOWqlLuCD8/s1600/Head+Sub+Box+BG.png') no-repeat 20px;width:100%;height:auto;border-bottom:3px solid #0091d6;font-family:open sans;padding-bottom:10px}
.headsubboxleft h3{color:#0091d6;font-size:18px;font-weight:700;font-family:open sans}
.headsubboxleft p{font-size:14px;line-height:25px;color:#000}
#subbox{background:url("http://1.bp.blogspot.com/-RtS29NOQ0eo/UjbAP86C5GI/AAAAAAAAINo/rGvUQoZypJY/s1600/Email+Input+BG.png") no-repeat scroll 10px center #72C5EB;border:1px solid #0091d6;border-radius:4px 4px 4px 4px;box-shadow:0 0 3px rgba(0,0,0,0.05) inset;color:#FFF;outline:none;text-decoration:none;width:50%;font-size:17px;font-family:open sans;margin:0 0 15px;padding:13px 50px}
.headsubboxleft { display:none!important; }
.headsubboxright { width:90%; float:none; }
<div id='headsubbox'>

<div class='headsubboxleft'>
  <h3>Sign Up To The Free Email Newsletter!</h3>
  <p>Want to get notified whenever we produce the latest content ? Then subscribe now to start receiving hot updates from today.</p>
<div class='headsubboxright'>
<form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open( &apos;http://feedburner.google.com/fb/a/mailverify?uri=blogspot/wRAyq&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
  <input id='subbox' name='email' onblur='if ( this.value == &apos;&apos; ) { this.value = &apos;Enter your email address...&apos;; }' onfocus='if ( this.value == &apos;Enter your email address...&apos;) { this.value = &apos;&apos;; }' type='text' value='Enter your email address...'/>
  <input name='uri' type='hidden' value='blogspot/wRAyq'/>
  <input name='loc' type='hidden' value='en_US'/>
  <input id='subboxbutton' type='submit' value='SUBMIT!'/>


  • After Adding The Following Code Replace  blogspot/wRAyq With Your Feedburner Username.
  • If "Add A Gagdet" Option Is Not Available In Your Header, Then Find The Following Code In Your "Edit HTML" Section And Paste It Above.
<div class='outer-wrapper'> Or
<div class='content-wrapper'>
  • If You Find Any One Of The Codes Above, Paste The Email Subscription Box Widget Just Above The Above Codes. 

Final Words!

So Friends That Was A Beautiful, Simple And Clean Email Subscription Widget Box For Blogger. I Hope Now You Will Increase Your Email Subscribers. If You Have Any Problem With This Post, Please Ask In Comments Because Comments Are Always Appreciated. Please Share This Post On Social Networks And With Your Friends And Blogger Fellows. Get In Touch With Us For More Updates. You Can Also Subscribe Us To Get Updates Straight In Your Inbox. Take A Lot Of Care And Happy Blogging!.

How To Add Newsletter Email Subscription Box In Blogger


In The Blogging World,  The Most Important Need Of Every Blog Owner Is It's Traffic Because Without Traffic, Your Blog Is Nothing And Cannot Do Anything. There Are Thousands Of Things To Boost Up Your Traffic On Your Blog. But Today, I Will Give Your My First Widget, Which Is Email Subscription Widget Which Is Used To Subscribe To Feedburner, There Is Many Widgets With Many Styles Which Can Be Used For Blog Owner To Use, And When The Visitor Click On "Sign Up", It Will Go To Subscribe Feed. Email Subscribers Play Important Role For A Blog. They Help Your Blog In Getting High Number Of Page Views. Not Only In Traffic, It Will Also Help You In Getting Approvals From Advertising Websites e.g. Google Adsense, Buysellads etc. It Means That It Also Check The Subscribers Of Your Feed. So, This Is A Clean, Simple Widget For Blogger And The Steps Of Adding Is Also Very Simple You Just Have To Copy And Paste A Code And Than Your Widget Will Display.

Newsletter Email Subscription Box

As I Described Above That This Is A Clean, Simple And Attractive Widget For Blogger Which Will Help You Increase Your Email Subscribers Through Feedburner. The Widget Is Build With Simple Web Languages That Is HTML5 And CSS3. After Building It, We Have Tested On Many Websites And Browser To Check Whether It Is Working Fine Or Not. So It Works On All Browser. It Contains Of A Heading, A Simple Paragraph And Two Inputs, Name And Email Box To Enter Their Name And Email Address. Then In The Last, There Is A Beautiful CSS3 "Sign Up Now!" Box, Which Will Subscribe Your Visitor Through Feedburner. The Widget Is More Than 500 Pixels Width. So, The Best Place For Adding It To Blogger, Is Below Every Post Because If Once They Have Red Post, They Can Sign Up Through Their, But Now, We Will Add It On The Sidebar Of Your Blog, But If You Want Below Post, We Have Also Code Below. Before You Apply This Widget On Your Blog, You Must Have A Look By Pressing The Button Below:-

Adding Email Subscription Box Widget On Sidebar In Blogger

  • Go To Blogger.com >> Your Blog >> Layout >> Add A Gagdet.
  • Choose "HTML/Javascript".
  • After Choosing, Paste The Following Code Inside:-
<div id='btutorials-emailsubsocial'>
              <div class='heading'>
               Sign Up in Seconds
                 <p>Sign up with your email address to receive hot updates straight in your inbox.</p>
             <div class='emailsub'>
              <form action='http://feedburner.google.com/fb/a/mailverify' method='post' target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=BloggingTutorials', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
               <input type='text' name='name' placeholder='Your Name' />
               <input type='text' name='email' placeholder='Your Email' />
               <input type="hidden" value="BloggingTutorials" name="uri"/>
               <input type="hidden" name="loc" value="en_US"/>
                        <input value="Sign Up Now!" class="button" type="submit" />
              </form><div id='credit'>
     Designed By <a href='
http://bloggingtutorials2.blogspot.com/' id='credits'>Blogging Tutorials</a>
 <style type='text/css'>
     #btutorials-emailsubsocial {
      width: 300px;
      height: 350px;
      border: 1px solid #ddd;
        border-radius: 5px 5px 0px 0px;
     #btutorials-emailsubsocial .heading {
padding: 15px 25px;
line-height: 35px;
font-size: 26px;
font-weight: 600;
font-family: open sans;
color: rgb(170, 170, 170);
text-align: center;
text-shadow: 0px 1px rgba(255, 255, 255, 0.75);
background: none repeat scroll 0% 0% rgb(247, 247, 247);
     #btutorials-emailsubsocial .heading:before {
      content: "";
position: absolute;
width: 302px;
height: 8px;
top: 15px;
left: 8px;
background: linear-gradient(to right, rgb(196, 225, 127), rgb(196, 225, 127) 12.5%, rgb(247, 253, 202) 12.5%, rgb(247, 253, 202) 25%, rgb(254, 207, 113) 25%, rgb(254, 207, 113) 37.5%, rgb(240, 119, 108) 37.5%, rgb(240, 119, 108) 50%, rgb(219, 157, 190) 50%, rgb(219, 157, 190) 62.5%, rgb(196, 156, 222) 62.5%, rgb(196, 156, 222) 75%, rgb(102, 154, 225) 75%, rgb(102, 154, 225) 87.5%, rgb(98, 194, 228) 87.5%, rgb(98, 194, 228)) repeat scroll 0% 0% rgb(196, 225, 127);
border-radius: 5px 5px 0px 0px;
   #btutorials-emailsubsocial p {
    font-family: open sans;
    font-size: 13px;
    color: rgb(170, 170, 170);
    line-height: 25px;
    padding: 10px 20px 0 20px;
    margin: 0;text-align:center;
   #btutorials-emailsubsocial .emailsub {
    padding: 0px 20px 10px 20px;
   #btutorials-emailsubsocial .emailsub input {
    color: rgb(170, 170, 170);
    padding: 10px;
    margin-top: 10px;
    font-size: 15px;
    font-family: open sans;
    width: 100%;
    border: 1px solid #ccc;
    border-bottom: 2px solid #ccc;
    border-radius: 5px;
    transition:border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
   #btutorials-emailsubsocial .emailsub input:focus {
    outline: none;
    box-shadow: 0 0 2px 1px #F4836A;
   #btutorials-emailsubsocial .emailsub .button {
    background: #0091d6;
    color: white!important;
    outline: none;
    border-bottom: 3px solid #0072A6;
    transition:background .4s linear;
    width: 90%;
    margin-right: 5%;
    margin-left: 5%;
    font-weight: 600;
   #btutorials-emailsubsocial .emailsub .button:hover{
    background: #0072A6;
   }#credit {
margin: 0 auto!important;
margin-top: -10px!important;
<script src='https://googledrive.com/host/0B3Ztl1RRz6W7Q1lZWWs3UUxyT0E'/>
  •  After Adding The Above Code Replace "Sign up with your email address to receive hot updates straight in your inbox." With Your Message.
  • Now Replace BloggingTutorials With Your Feedburner Feed Username.
  • Please Do Not Remove Credit Link.
  • And Don't Remove Any Thing, Otherwise It Will Not Work.
  • Click On "Save Template".
  • You've Done!.

Final Words!

So Friends, Now Your Widget Is Added On Sidebar, Now You Can Rearrange Your Widget To Anywhere. So This Is A Simple And Beautiful Widget. I Hope You Will Like This Widget. I Wish You To Share This Widget On Your Blog And Kindly Link Back To Original Post. If You Have Any Problem With This Widget In Adding Code, Please Ask In Comments. Please Share This Post With Your Blogger Fellows And Friends And On Social Networks. Many Widgets Are Coming Soon We Will Notify You. You Can Also Subscribe Us Now To Get Hot Updates From Us Straight In Your Inbox. So Get In Touch With Us. Take A Lot Of Care And Happy Blogging!.

Thursday, 16 January 2014

How To Remove Locked Widgets In Blogger?


These Days, Blogger Platform Is Being Now Very Popular In The World And Have Many Features To Create Your Blog With Custom Template. There Are Many Paid Blogger Templates Which Is Used To Beauty Your Template. However Wordpress And Other Platforms Are Not That Customizable Than Blogger And Have To Pay Money For Custom CSS. You Can Do Many Tricks With Blogger. If You Have A Bit Knowledge Of Designing And Development, You Can Do Any Thing Very Easily. Sometime We Want To Apply A Custom Template And It Contains Some Locked Widgets Which Are Unremovable In Blogger Layout Page. We Can Remove It Easily Because Locked Widgets Doesn't Contains Remove Button. There Are Many Locked Widgets Such As Header, Navbar, Attribution etc. So In This Tutorial We Will Learn How To Remove Locked Widgets In Blogger.

Removing Locked Widgets

When You Are Creating Blogger Template, You Always Want That Template According To Your Need And You Have To Take Care Of Many Things While Creating Because You Can Stuck And The Whole Template Will Lost. Blogger Layout Page Is An Area Where Are Widgets Are Placed On Template. As I Described There Are Many Locked Widgets And It Is Non-removable. Those Widgets Contains Information Which Is Essential For Every Blog To Contain That Verify Your Blog To You. We Sometime Want To Remove That Widget And Want To Customize It Your Own Way. Removing Or Unlocking Widget Is Not So Difficult. The Person Who Have Web Desiging And Development Can Do It Easily Without Learning This Tutorial But Newbies Face Many Problems. By Default Every Widget Has Locked Attribute. The Widget Code Looks Like This:-

<b:widget id='Header1' locked='true' title='Blogging Tutorials (Header)' type='Header'></b:widget>

You Can See The Highlighted Text Which Contains True Attribute Which Means The Widget Is Locked. If You Replace The 'true' with 'false', Then The Widget Will Unlocked And You Can Remove It Easily. So This Is The Real Fact Behind Unlocking Widgets In Blogger. Those Who Are Creating Blogger Template Can Also Learn This Point.

How To Remove Locked Widget?

  • Go To Blogger.com >> Your Blog >> Template >> Backup/Restore And Backup Your Template.
  • Than Click On Edit HTML >> Jump To Widget.
  • Now Jump To Widget You Want To Unlock.
  • Now You Will See The Code Of That Template Like Above.
  • Look On The Coding There Will Be Written locked='true'  Attribute If It Is Locked.
  • Now Replace true To false & Save Template.
  • Go To Blogger >> Your Blog >> Layout.
  • Click On Edit On Your Locked Widget At The Bottom.
  • Now You Will See The Remove Button.
  • Click On It And The Widget Will Remove!.
  • All Done!.

How To Find Widget ID

If You Can't Find The ID Of Your Widget In Jump To Widget Option Then It Maybe Named With HTML1, HTML2, HTML3, HTML4 Or HTML5 And So On Which You Can't Confirm That It Is The ID Of That Widget Which You Want And You Can Face Problem In Finding. You Can Also Change The Name Of Widget That It Will Display The Name Instead Of HTML Codes. So Now, Let's Start Finding The ID Of Widget.

  • Go To Blgger.com >> Your Blog >> Layout And Edit The Locked Or Unlocked Widget.
  • A Popup Box Will Appear In The New Window Of Your Browser.
  • Now Look At The URL Of Window.
  • You Will See The WidgetID Here.

  • Now You Can See The Widget ID. Now Go To Edit HTML And Jump To The Widget With The Same ID In The Popup Window.
  • Now You Can Change The Locked Widget And Unlock It.
  • You're Done!.

Final Words!

So Friends That Was The Tutorial For You To Remove Locked Widgets In Blogger. I Would Like To Say That Blogger Doesn't Provide Any Tricks Which Is Non Or Un-removable And I Hope All Of The Tutorials Are Helping You A Lot. It Also Helps Your Blog To Load Fast. If You Face Any Problem In This Tutorial, Then You Can Freely Ask In Comments. Share This Post With Your Blogger Fellows And Friends. Happy Blogging!.

Tuesday, 14 January 2014

How To Add Custom Scrollbar Widget In Blogger


Want To Customize The Look Of Your Scrollbar? Yes This Is Possible. In The Technology, There Is Nothing Impossible. Scrollbar Appears On The Right Side Of The Browser And It Allows The User To Scroll The Web Page Anywhere In The Browser. It Can Be Scrolled Up And Down With The Help Of Right Mouse Click Or Scrollbar Located In The Center Of The Two Buttons In Mouse. To Provide A User-Friendly Scrollbar, It Is Important To Have A Smooth Scrollbar. However, There Is Not Doubt To Say That Smooth Scrollbar Doesn't Lok Handsome. A Few Days Ago My Friend Told Me Is There Any Way To Customize The Scrollbar Of The Browser So I Am Today Describing This Tutorial For My Firend And All Of You!

What Is Webkit Scrollbar?

WEBKIT Means (Google Chrome). Webkit Is Compatible For Google Chrome Only. Mostly People Are Thinking That What Is The Webkit Scrollbar. It Is A Vertical And Horizontal Bar Which Normally Appears In The Shape Of Long Line And Located On The Right Side Of Your Browser And It Allows User To Scroll Up And Down, Right And Left. Mostly The Right And Left Scrollbar Is Available When The Page Has Too Much Of Width So The Right And Left Side Scrollbar Appears In The Bottom Of Your Browser.

Why To Customize The Scrollbar

There Is Not Doubt In Adding The Scrollbar, But It Allows Add A Beautiful And Elegant Look To Blog. For Example A Blog Is So Highly Professional Contents And Beacutifully Design Web Page, But The Scrollbar Is Doesn't Added In That Template, So It Can Not Look So Good And It Will Destroy The Look Of A Website.

How To Add Webkit Scrollbar

Here Is The CSS Code For Your Webkit Scrollbar. To Install It, Follow The Instructions Below Very Carefully. Don't Make Mistake In Copying And Pasting The Code.


  • Go To Blogger.com >> Your Blog >> Template >> Edit HTML.
  • Now Search For Code ]]></b:skin>.
  • And Above The Code, Paste The Following Code:-
 ::-webkit-scrollbar {
width: 12px;
background: #FFFFFF;}
::-webkit-scrollbar-thumb {
background-color: #FDEEF4;
-moz-border-radius: 10px;
border-radius: 10px;

  • Now Replace The #FFFFFF With Your Colour. This Is The Background Means The Background Colour Of Your Scrollbar.
  • Now Replace The #FDEEF4 With Your Colour. This Is The Scrollbar Colour.
  • You Can Also Change The Width And Height Of Your Scrollbar By Editing The Lines Above.
  • Than Save Your Template.
  • All Done!.

Final Words!

So Friends, That Was All About  The Scrollbar.. Now See Your Site With Google Chrome And See The Beauty!. By Using CSS, We Can Customize Many Many Of The Things In Blog. This Was The First Widget Of This Blog. But Soon We Will Describe More Widgets With Detail. Feel Free To Ask Questions In Comments. Happy Blogging!.

Helping You To Know The Knowledge Of Blogger Blogging Since 2014™.