New Stylish Sidebar Subscription Box Widget For Blogger

Hello and Welcome to GetWebInfo.Com. Here on this Post you can learn that How can you add A New Stylish Sidebar Subscription Box Widget In to Your Blogger. More Subscribers mean more power to you in terms of free and instant highly targeted traffic to your every new blogger blogspot. So i came up with another version of sidebar subscription box widget for blogger which is more elegant than the previous version of this widget, just evolving by the time.



You can Customize this widget on to your own demand. This is super easy to customize and you need not to play with CSS part except changing the color codes which is super easy task, anyone can do it.


Features of This Subscription Box Widget

  1. Fully Responsive Design
  2. Super Easy to Customize the colors and text content
  3. Social Profiles Links in the bottom
  4. Use of Font Awesome icons with beautiful hover effect
  5. Made with pure CSS and HTML so it loads very fast
  6. Needs not to mention but it is stylish and Beautiful


Bonus Tip

I have included a backlunk in the bottom of subscription box and you can remove it simply from the HTML part if you wish to. Choice is yours My Blogger widgets are always neat and clean just all what you need it.

Here is we go with the Demo screen shot of our new stylish subscription box widget.



Installing Sidebar Subsription Box Widget to Blogger Template

First of all you need to add the Font Awesome icons CSS stylesheet link to out blog in case you are not using it already.

Step 01: Logged in to your blogger blog account. Now you can select your Blog> Go to Template> Click on Edit HTML and let the template code box load.

Step 02: Now click anywhere inside the template code box and press CTRL+F to open a search box inside. Now find out this opening <head> tag and just below it, paste the FontAwesome icons link given below.
<link href='http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css' rel='stylesheet'/>
Note: I have used Oswald font family in demo but i am not including it in the code below because your template may be using a different font family already. So avoid using multiple font families to maintain out blog load speed. 

Step 03: Now save your Template code and go to Layout Area of your blog. This time click on "Add a Gadget" link in the sidebar and add a HTML/JavaScript widget. Now paste the whole CSS and HTML code given below after making requiring changes given just below it.
<style>
/* ----------------------------------------------------
Sidebar Subscription Box Widget = V.2
Designed by :: https://www.getwebinfo.com
Keep These Credits Intact, Do Not Remove it
-----------------------------------------------------*/
#twist-blogger-sbox-v2 {
  padding: 0;
  padding-bottom: 5px;
  font-family: inherit;
  display: block;
  margin: 0;
  width: 100%;
  border-radius: 1px;
  border: 0;
  background: #363636;
}
#twist-blogger-sbox-v2 .main_tagline {
  padding: 0px 0px;
  line-height: 2.5em;
  font-size: 26px;
  margin: 0;
  height: 95px !important;
  overflow: hidden;
  font-weight: normal;
  color: #FFF;
  text-align: center;
  border: 0;
  background-color: #FF5959;
}
#twist-blogger-sbox-v2 .email_icon {
  display: table;
  margin: -35px auto 0px;
  font-size: 25px;
  padding: 12px;
  height: 25px;
  width: 25px;
  background-color: #363636;
  color: #FFF;
  border-radius: 50px;
  border: 10px solid #FFFFFF;
  line-height: 0;
}
#twist-blogger-sbox-v2 p {
  font-size: 15px;
  color: #F9F9F9;
  text-shadow: 0px -1px 0px #000;
  line-height: 27px;
  padding: 5px 10px 5px;
  text-align: center;
  width: 80%;
  margin: 5px auto 20px;
  border-bottom: 2px solid #6A6A6A;
  border-radius: 20px;
}
#twist-blogger-sbox-v2 .rssform {
  padding: 0;
  margin: 0 auto;
  display: block;
}
#twist-blogger-sbox-v2 .rssform input {
  padding: 8px;
  margin: 20px auto 15px;
  font-size: 13px;
  color: #000;
  text-align: center;
  display: block;
  font-family: inherit;
  font-weight: normal;
  width: 90%;
  height: 38px;
  text-transform: uppercase;
  outline: none !important;
  border: 1px solid #FFFFFF;
  border-radius: 1px;
  background-color: #FCFCFC;
  box-sizing: border-box !important;
}
#twist-blogger-sbox-v2 .rssform .button:hover {
  background: #000000;
}
#twist-blogger-sbox-v2 .rssform .button {
  background: #FF5959;
  color: white!important;
  border: 1px solid #FFFFFF;
  margin-top: 15px;
  outline: none !important;
  transition: all .3s ease-in-out;
  padding: 5px 2px !important;
  float: none;
  text-transform: uppercase;
  font-size: 18px;
  font-weight: normal;
  cursor: pointer;
}
#twist-blogger-sbox-v2 .bottom_lock_policy {
  background: url(http://4.bp.blogspot.com/-kYVqV9JYDHY/VPMC8jPKTGI/AAAAAAAAA28/zxv0TYRIZe4/s1600/Lock-twistblogger.png) no-repeat 3% -2px;
  color: #959595;
  text-align: center;
  font-size: 12px;
  margin: 0;
  padding: 3px;
  line-height: 25px;
}
#twist-blogger-sbox-v2 .bottom_lock_policy a {
  color: #959595;
  text-decoration: none !Important;
}
#twist-blogger-sbox-v2 .social_profiles {
  line-height: 1.2em;
  display: table;
  float: none;
  margin: 0px auto;
  text-align: center;
  min-width: 157px;
  padding: 5px 0px;
  border: 0;
}
#twist-blogger-sbox-v2 .social_profiles a:hover {
  color: #FFF;
  background-color: #FF5959;
  border-color: #FFF;
}
#twist-blogger-sbox-v2 .social_profiles a {
  color: #000000;
  margin: 0 5px;
  text-align: center;
  float: left;
  display: table;
  padding: 4px 5px;
  background-color: #FFFFFF;
  border-radius: 50px;
  border: 2px solid #2D2D2D;
  width: 15px;
  height: 15px;
  line-height: 0;
  font-size: 16px;
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}
#twist-blogger-sbox-v2 form {
  margin-bottom: 10px !important;
}
</style>
<div id="twist-blogger-sbox-v2">
            <div class="main_tagline">Join Our Newsletter</div><div class="email_icon"><i class="fa fa-envelope"></i></div>
                 <p>Get All The Latest Updates Delivered Straight Into Your Inbox For Free!</p>
   <div class="rssform">
            <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=GetWebInfo', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
            <input type="text" name="email" placeholder="Enter your email address...">
            <input type="hidden" value="GetWebInfo" name="uri">
            <input type="hidden" name="loc" value="en_US">
            <input value="Join Now" class="button" type="submit">
            </form>
            </div>
      <div class="bottom_lock_policy">We Respect Your Privacy | <a href="https://www.getwebinfo.com/2018/12/new-stylish-sidebar-subscription-box.html">Get This Widget</a>   </div>
   <div class="social_profiles">
   <a href="http://www.facebook.com/getwebinfo" target='_blank' rel='nofollow' title="Join on Facebook"><i class="fa fa-facebook"></i></a>
   <a href="http://www.twitter.com/getwebinfo1" target='_blank' rel='nofollow' title="Follow on Twitter"><i class="fa fa-twitter"></i></a>
   <a href="http://plus.google.com/#" target='_blank' rel='nofollow' title="Follow on Google+"><i class="fa fa-google-plus"></i></a>
   <a href="http://www.pinterst.com/#" target='_blank' rel='nofollow' title="Follow on Pinterest"><i class="fa fa-pinterest"></i></a>
   </div>
            </div>

Edit This Widget

01: Changing The Color Scheme

For changing the default color just find out this color code #FF5959 and replace it with the color code of your choice. Please note that you'll find this code three times in the above CSS so just replace it three times with same color code of your choice. Be careful with the text color too because white text may not appear properly in some colors so just change the text color too.


02: Changing Main Headlines

They are highlighted in the very beginning of above HTML code so change those all of you wish to or let them as it is.


03: Changing FeedBurner Address

this is the important step so change my feedburner address GetWebInfo which is highlighted two time in the HTML just replace mine with yours two times.


04: Remove The Backlink 

My Backlink to this post you can remove it or keep it.


05: Final Step 

Final step is just to remove my Social Profile links and add your own. These links are also highlighted at the bottom of HTML so replace them with yours own.

Finally Save your HTML/JavaScript widget and visit your blog to check if it is working.
If you have any issue or some thing went wrong or you can not be able to understand this method so just comment on this post i will reply you as soon as possible.

Add Custom Social Media Share Buttons To Blogger Posts

Hello and Welcome to GetWebInfo.Com. Here on this post I will tell you how you can add custom social media Share Buttons to Blogger Posts. Social Media Platforms Sites play a major role in overall success of our content. Because SEO is time to drive targeted traffic from search engines. Not to mention social signals (how many times your content has been shared on different social media sites) has an impact on your overall SEO in many ways.



Here you can learn how to add Custom Horizontal Social Share Buttons to your bloggers blog along with total shares count. You can add these buttons below the post titles or in the footer to increase the social share of your well-written content.



These social media buttons are made purely with the HTML and CSS so they do not traffic the Page load time speed at all. Even by removing the Official Social Media Share Buttons from your blog, you can load your page load time by half of the total time.

Features of These Social Media Share Buttons


  1. Fully Responsive Design
  2. Made with Pure CSS and HTML
  3. Shares Counter
  4. Integration of FontAwesome Icons
  5. 5 Social Media Share Buttons Included
  6. Super Easy to Install just Copy code from this site and Paste it to your site
  7. Beautifully Responsive Share buttons

Important Updates and Read Carefully

I Use free hosting provided for hosting PHP scripts which are liable to get the shares count of all the social media sites. There is monthly bandwidth limit and shares count script will stop working if limit is crossed.

You can upload these PHP scripts yourself if you have premium hosting. If you can't manage it yourself then you can hire me. I'll upload these scripts for you and make it working without any issue.

You can Get PHP Scripts Here = https://github.com/abeMedia/shareCount


How to Add Custom Social Media Buttons to Blogger Posts

Step 01: As usual login to your Blogger account > Select your blog> Go to Template section> click on Edit HTML and let the Template Editor load. Do not forget to save template backup before altering anything be safe.

Step 02: As you know that we are using FontAwesome icons for it so you need to install them in your blog first otherwise icons would not appear. So find out this opening <head> tag (Click inside template editor and press CTRL+F on windows or Cmd+F on Mac to open up a search box inside template editor) and just below that paste the FotnAwesome icons link given below. This is only if you are already no using them on your blog, avoid adding same codes twice.
<link href='http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.css' rel='stylesheet'/>
You also need to add Google JavaScript Libraries link to make the shares count API work. So add the link given below if you're already not using (rare case please check before adding).
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
Step 03: So now you need to add the CSS code to your template so just find out this closing </head> tag and just before this tag, Paste the whole CSS code given below as it is.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/*------------------------------------------------------------
Horizontal Social Media Share Buttons for Blogger
Designed by:: https://www.getwebinfo.com
Shares Count Code by:: http://donreach.com/social-share-count
issued under GNU GPL Licence
Icons:: FontAwesome
******** Do Not Remove These Credits ********
------------------------------------------------------------*/
.tbn_horizontal_sharebar {
    position: relative;
    background: none;
    z-index: 2;
    width: 100%;
    padding: 10px 0;
    display: inline-block;
    font-family: sans-serif;
    margin: 5px 0px;
    border-top: 1px dotted rgba(0, 0, 0, 0.05);
    border-bottom: 1px dotted rgba(0, 0, 0, 0.05);
}
.tbn_horizontal_sharebar .Share_buttons {
 display: block;
}
.tbn_horizontal_sharebar .Share_buttons .wrap {
    text-align: center;
    margin: 0 auto;
    display: inline-block;
    min-width: 41px;
}
.tbn_horizontal_sharebar .Share_buttons .wrap1 {
    display: inline-block;
    width: 31px;
    float: left;
}
.tbn_horizontal_sharebar .Share_buttons ul {
    margin: 0;
    padding: 0;
}
.tbn_horizontal_sharebar .Share_buttons ul li a, .tbn_horizontal_sharebar .Share_buttons ul li a:hover {
    color: #FFF !important;
    cursor: pointer;
    line-height: 25px;
    height: 100%;
    display: block;
    text-decoration: none;
}
.tbn_horizontal_sharebar .Share_buttons ul li {
    list-style: none;
    list-style-type: none;
    padding: 0;
    margin: 1px;
    float: left;
    width: 16%;
    max-width: 115px;
    display: inline-block;
    font-size: 13px;
    overflow: hidden;
    text-align: left;
    height: 25px;
    line-height: 25px;
    color: #fff;
    border: 1px solid rgba(0,0,0,0.04);
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}
.tbn_horizontal_sharebar .Share_buttons ul li .fa {
    color: #fff;
    font-size: 17px;
    font-weight: normal;
    font-family: FontAwesome;
    display: inline-block;
    text-align: center;
    padding: 0;
    height: 25px;
    line-height: inherit;
    width: 30px;
    background-color: rgba(0,0,0,0.1);
    border-right: 1px solid rgba(0,0,0,0.05);
}
/*--Facebook---*/
.tbn_horizontal_sharebar .Share_buttons .btn_fb {
    background: #3a579a;
}
.tbn_horizontal_sharebar .Share_buttons .btn_fb:hover {
    background: #314a83;
}
/*--Tweeter---*/
.tbn_horizontal_sharebar .Share_buttons .btn_twtr {
    background: #00abf0;
}
.tbn_horizontal_sharebar .Share_buttons .btn_twtr:hover {
    background: #0092cc;
}
/*--Google Plus---*/
.tbn_horizontal_sharebar .Share_buttons .btn_gplus {
    background: #df4a32;
}
.tbn_horizontal_sharebar .Share_buttons .btn_gplus:hover {
    background: #be3f2b;
}
/*--Pinterest---*/
.tbn_horizontal_sharebar .Share_buttons .btn_pntrst {
    background: #cd1c1f;
}
.tbn_horizontal_sharebar .Share_buttons .btn_pntrst:hover {
    background: #ae181a;
}
/*--linkedin---*/
.tbn_horizontal_sharebar .Share_buttons .btn_linkdin {
    background: #2554BF;
}
.tbn_horizontal_sharebar .Share_buttons .btn_linkdin:hover {
    background: #224EB4;
}
/*---Total Share----*/
.tbn_horizontal_sharebar .Share_buttons .share.h6 {
    font-size: 10px;
    font-weight: bold;
    text-shadow: none!important;
    text-decoration: none;
    text-align: center;
    color: #000000;
    border-top: 3px solid #FFF600 !important;
    border-bottom: 0;
    padding: 0px !important;
    padding-top: 5px!important;
    margin: 0 !important;
    line-height: 8px;
    border-radius: 75% 0;
}
.tbn_horizontal_sharebar .Share_buttons .share {
    border: none;
    margin: 0px 5px 0px 1px;
    overflow: visible !important;
    width: 95px !important;
}
.tbn_horizontal_sharebar .Share_buttons .share .count.h4 {
    font-size: 18px;
    font-weight: bold;
    text-shadow: none;
    text-decoration: none;
    font-family: sans-serif;
    text-align: center;
    color: #FF0000;
    line-height: 15px;
    margin-top: 0px;
    margin: -4px 0px 2px 0;
    min-height: 15px;
    padding: 0px;
    border: none;
}
.tbn_horizontal_sharebar .Share_buttons .btn_fb .share-btn,
.tbn_horizontal_sharebar .Share_buttons .btn_twtr .share-btn,
.tbn_horizontal_sharebar .Share_buttons .btn_gplus .share-btn,
.tbn_horizontal_sharebar .Share_buttons .btn_pntrst .share-btn,
.tbn_horizontal_sharebar .Share_buttons .btn_linkdin .share-btn {
    position: relative;
    color: #C3C3C3;
    display: inline-block;
    text-align: center;
    font-weight: bold;
    font-size: 11px;
    float: right;
    min-width: 12px;
    font-family: sans-serif;
    padding: 0px 5px;
    background-color: rgba(0,0,0,0.28);
    border-radius: 0px 0px 0px 15px;
}
 @media only screen and (max-width: 979px) {
 .tbn_horizontal_sharebar .Share_buttons .btn_linkdin {
  width: 34px;
}
.tbn_horizontal_sharebar .Share_buttons .btn_fb .share-btn,
.tbn_horizontal_sharebar .Share_buttons .btn_twtr .share-btn,
.tbn_horizontal_sharebar .Share_buttons .btn_linkdin .share-btn,
.tbn_horizontal_sharebar .Share_buttons .btn_gplus .share-btn,
.tbn_horizontal_sharebar .Share_buttons .btn_pntrst .share-btn
 {
 display: none !important;
}
}
 @media only screen and (max-width:768px) {
.tbn_horizontal_sharebar .Share_buttons ul li a, .tbn_horizontal_sharebar .Share_buttons ul li a:hover {
    color: #FFF !important;
    cursor: pointer;
    line-height: 25px;
    font-size: 11px;
    height: 100%;
    display: block;
    text-decoration: none;
}
.tbn_horizontal_sharebar .Share_buttons .wrap {
    min-width: 34px;
}
.tbn_horizontal_sharebar .Share_buttons .btn_linkdin,
.tbn_horizontal_sharebar .Share_buttons .btn_pntrst {
    width: 30px;
}
.tbn_horizontal_sharebar .Share_buttons ul li {
   margin: 1px 3px;
}
 @media only screen and (max-width:479px) {
 .tbn_horizontal_sharebar .Share_buttons .share {
    border: none;
    margin: 0px 5px 0px 1px;
    overflow: visible!important;
    width: 80px!important;
}
.tbn_horizontal_sharebar .Share_buttons ul li {
    width: 25px !important;
    margin: 2px;
    border-radius: 50px;
    border: 2px solid rgba(0, 0, 0, 0.14);
}
.tbn_horizontal_sharebar .Share_buttons .wrap {
    display: none !important;
}
.tbn_horizontal_sharebar .Share_buttons ul li .fa {
    width: 25px !important;
}
}
</style>
</b:if>
Now you are don with adding CSS part so moving on the next step.

Step 04: Now you need to add the HTML part to your template. Below i am going to provide both the ways to add these buttons either below posts titles or in the post footer so please carefully read the steps and follow accordingly.

Add Social Media Buttons Below Post Titles

If you want to add Social Media Buttons Below Post Titles so you can find out this HTML code line <div class='post-header-line-1'/> in you template and just below that paste the whole HTML part as it is. You may find the above code line tow time in to your HTML so just paste the code after the second appearance of the above code line.

Add Social Media Buttons Below Post Footer

Find out this HTML code line <div class='post-footer'> and just below that code line paste the whole HTML code as it is. If you could not being able to find out this code then try to find out this one <div class='post-footer-line post-footer-line-1'> and paste the HTML just below it. If Again the code line appears more than one time then paste the HTML after second appearance.

Here is HTML code for Social Media Share Buttons

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function () {
  var shareUrl = $("link[rel=canonical]").attr("href");
    $.getJSON('https://count.donreach.com/?url=' + encodeURIComponent(shareUrl) + "&callback=?", function (data) {
        shares = data.shares;
        $(".count").each(function (index, el) {
            service = $(el).parents(".share-btn").attr("data-service");
            count = shares[service];
            if (count > 1000) {
                count = (count / 1000).toFixed(1);
                if (count > 1000) count = (count / 1000).toFixed(1) + "M";
                else count = count + "k";
            }
            $(el).html(count);
        });
    });
});
//]]></script>
<div class='tbn_horizontal_sharebar'>
<div class='Share_buttons'>
  <ul>
  <li class='share'>
    <div class='share-btn' data-service='total'>
        <div class='count h4'></div>
        <div class='share h6'>SHARES</div>
  </div>
  </li>
  <li class='btn_fb'><a expr:href='&quot;   http://www.facebook.com/share.php?v=4&amp;   src=bm&amp;   u=&quot; + data:post.url + &quot;   &amp;   t=&quot; + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   return false;' rel='nofollow'>
<div class="wrap1"><i class="fa fa-facebook"></i> </div>
  <div class="wrap">Share</div>
  <div class='share-btn' data-service='facebook'>
        <div class='count'/></div>
  </a>
  </li>
  <li class='btn_twtr'><a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot; via @GetWebInfo - &quot;' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=436&quot;   );   return false;' rel='nofollow'>
  <div class="wrap1"><i class='fa fa-twitter'></i></div>
  <div class="wrap">Tweet</div>
  <div class='share-btn' data-service='twitter'>
        <div class='count'/></div>
  </a>
  </li>
  <li class='btn_gplus'><a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' onclick='javascript:window.open(this.href,&quot;   &quot;   ,&quot;   menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600&quot;   );   return false;   ' rel='nofollow'>
  <div class="wrap1"><i class='fa fa-google-plus'></i></div>
  <div class="wrap">Share</div>
  <div class='share-btn' data-service='google'>
        <div class='count'/></div>
  </a>
  </li>
  <li class='btn_pntrst'><a data-pin-config='beside' expr:href='&quot;   http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;   &amp;media=&quot; + data:blog.postImageUrl + &quot;&amp;description=&quot; + data:post.title' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   return false;' rel='nofollow'>
  <div class="wrap1"><i class='fa fa-pinterest'></i></div>
  <div class="wrap">Pin</div>
  <div class='share-btn' data-service='pinterest'>
        <div class='count'/></div>
  </a>
  </li>
  <li class='btn_linkdin'><a expr:href='&quot;   http://www.linkedin.com/shareArticle?mini=true&amp;   url=&quot; + data:post.url + &quot;   &amp;   title=&quot; + data:post.title + &quot;   &amp;   summary=&amp;   source=&quot;   ' onclick='window.open(this.href,&quot;   sharer&quot;   ,&quot;   toolbar=0,status=0,width=626,height=500&quot;   );   return false;' rel='nofollow'>
  <div class="wrap1"><i class='fa fa-linkedin'></i></div>
  <div class="wrap">Share</div>
  <div class='share-btn' data-service='linkedin'>
        <div class='count'/></div>
  </a>
  </li>
  </ul>
  </div>
  </div>
</b:if>
</b:if>

Editing Parts

All you need to edit in the above HTML part is my twitter username @GetWebInfo so just replace it with you own Twitter user name and you are good to go. Now Just Save your Template code and just visit any of your blogger post to see it live.

I Hope this article is really helpful for you if you like this article so please share it to your social media accounts thanks.

How to Disable Copy Function On Blogger with CSS or JavaScript (Updated)

Hello and Welcome to GetWebInfo.Com. Here you can learn how to disable the Copy Function on Blogger with CSS or JavaScript. Most of the real bloggers on BlogSpot Platform are the problem of their blog's content being copied or duplicated by newbies who are just entering into biosphere with real efforts without money and understanding of the original content. Sometimes the content is copied by search engines in their original content rather than the actual content and it is unfair which is the real bloggers of motivation. So it is important to protect your blogger content from these content thieves and this is the post of this post. We will disable the copy function by disable the mouse right click and CTRL + A. We have the option for doing this. Via a JavaScript Code If you want to use the entire text area of blog or through CSS code if you share some code / text on your blog posts and your readers need them to copy.

Hello and Welcome to GetWebInfo.Com. Here you can learn how to disable the Copy Function on Blogger with CSS or JavaScript. Most of the real bloggers on BlogSpot Platform are the problem of their blog's content being copied or duplicated by newbies who are just entering into biosphere with real efforts without money and understanding of the original content. Sometimes the content is copied by search engines in their original content rather than the actual content and it is unfair which is the real bloggers of motivation. So it is important to protect your blogger content from these content thieves and this is the post of this post. We will disable the copy function by disable the mouse right click and CTRL + A. We have the option for doing this. Via a JavaScript Code If you want to use the entire text area of blog or through CSS code if you share some code / text on your blog posts and your readers need them to copy.


Benefit of Using CSS Code rather than JavaScript

1) When we use JavaScript code, do you know what a copy cat does? Simply disables
JavaScript code inside browser and reload the page. Then everything goes in normal
and anyone can copy the entire content.

Using CSS code we can use this theme as the user usually does not have the CSS.
However, an experienced user can simply inspecting the elements by doing it and ours
CSS code snippet then delete it in browser but this task is very far from newbies.
Experienced users rarely do that.

2) CSS codes are far better than JavaScripts as they do not lower the speed of your
Blog / website where JavaScript codes consume more time to load and create your blog

load speed very low and overall you lose visitors = money. Avoid using JavaScripts.





Disable Text Selection On Blogger With JavaScript Code

Step 01: Go To Blgger> Template> Edit Template> Backup your Template Code First

Step 02: Now Search for <head> and copy paste the JavaScript Code given below after <head> tag
<!--Disabe Copy Paste--- GetWebInfo-->
<script language='JavaScript1.2'>
function disableselect(e){
return false
}
function reEnable(){
return true
}
document.onselectstart=new Function (&quot;return false&quot;)
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}
</script>

Disable Text Selection Except Specified Codes/Text With CSS

This is the Magic code we are using on this blog because we are sharing tutorials where readers need to copy some codes we share like CSS/JavaScript/HTML etc. So on the same time we do not let readers copy our posts text area other than codes/Text we want to share. This is possible with this simple CSS code where enabled the copy paste of Text/Code we post in "Blockquotes" only. Go to Blogger> Template> Edit Template> Backup.

Now Search for ]]></b:skin> this code line and copy paste the CSS code given below before this ]]</b:skin> code line.

/*----- Disable Text Selection with CSS Code--- GetWebInfo----*/
.post blockquote {
-webkit-user-select: text !important;
-moz-user-select: text !important;
-ms-user-select: text !important;
user-select: text !important;
}
body {
-webkit-user-select: none !important;
-moz-user-select: -moz-none !important;
-ms-user-select: none !important;
user-select: none !important;
}
Important Note: In the above CSS code we have enabled the copy/selection of Text or any type of code we post using blockquotes by enabling .post blcokquote but it may not work for you if your template is using different CSS class for blockquote for etg. Our template using .post blcokquote where your template may be using .post-body blcokquote or blockquote in above CSS code. If you do not share any codes or content than just copy paste this little piece of CSS code to disable all text area on your blog.
/*----- Disable Text Selection with CSS Code--- GetWebInfo----*/
body {
-webkit-user-select: none !important;
-moz-user-select: -moz-none !important;
-ms-user-select: none !important;
user-select: none !important;
}
Note: You can add CSS codes by simply going to Template Designer>> Add Custom CSS and paste your code then Save your Template.



Let us know where these codes work for you or you are having problems with these codes? We will serve you our best. I Hope this article is really helful for you if you like this article so please share it to your Social media accounts .Thanks

How to create Drop Down Menu That can Be Styled With Template Designer

Hello and welcome to GetWebInfo.Com. Here on this post you can learn that How to create Drop Down Menu That can Be Styled With Template Designer. From a design standpoint Drop down menus are an excellent feature because they help clean up a busy layout. If structured correctly drop down menus can be great navigation tool while still being a usual and attractive design feature. 



How to create Drop Down Menu That can Be Styled With Template Designer

Here are the best method to add a layout that can be styled with your blogger template.

Step 01 Go to your Layout > Add a new HTML/JavaScript Gadget and add the following code to it.
<!-- START NAVIGATION BY GetWebInfo -->
<div id="navigationbar">
<ul id='cssnav'>
<li class="active"><a href='LINK'>Home</a></li>
<li class="sub"><a href='LINK'>CATEGORY 1</a>
<ul>
<li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 1A</a></li>
<li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 1B</a></li>
</ul>
</li>
<li class="sub"><a href='LINK'>CATEGORY 2</a>
<ul>
<li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 2A</a></li>
<li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 2B</a></li>
</ul>
</li>
<!-- ADD MORE CATEGORIES OR LINKS HERE -->
<li class="last"><a href='LINK'>Contact</a></li>
</ul>
</div>
<!-- END NAVIGATION BY GetWebInfo  -->
Add Another Dropdown Category
<li class="sub"><a href='LINK'>CATEGORY 3</a>
<ul>
<li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 3A</a></li>
<li><a href='URL LINK TO LABEL/WEBSITE/PAGE'>SUB-CATEGORY 3B</a></li>
</ul>
</li>
Add Another Link
<li><a href='LINK'>LINK-NAME</a></li>




Add The CSS to Your Blogger Blog

Add the following code to Template> Customize> Advanced> Add CSS. This will place the code above ]]></b:skin> in Template> Edit HTML. To change values via the Template Designer, Go to Template> Customize> Advance> Tabs Text and Tabs Background.

/* ----- START DROPDOWN CSS BY Getwebinfo.com ----- */
#cssnav {
border: 0px;
margin: 0px;
padding: 0px;
width: auto;
font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */
color: $(tabs.text.color); /* Template Designer - Change Text Colour */
}
#cssnav ul {
background: $(tabs.background.color); /* Template Designer - Change Menu Background */
height: 40px; /* Change Height of Menu */
list-style: none;
margin: 0px;
padding: 0px;
}
#cssnav li {
float: none;
display: inline-block;
padding: 0px;
}
#cssnav li a {
background: $(tabs.background.color); /* Template Designer - Change Menu Background */
display: block;
margin: 0px;
text-align: center;
font: $(tabs.font); /* Template Designer - Change Font Type, Size, Etc */
text-decoration: none;
}
#cssnav > ul > li > a {
color: $(tabs.text.color); /* Template Designer - Change Text Color */
}
#cssnav ul ul a {
color: $(tabs.text.color); /* Template Designer - Change Text Color */
}
#cssnav li > a:hover, #cssnav ul li:hover {
color: $(tabs.selected.text.color); /* Template Designer - Change Text Color on Hover */
background-color: $(tabs.selected.background.color); /* Template Designer - Change Font Background on Hover */
text-decoration: none;
}
#cssnav li ul {
background: $(tabs.background.color); /* Template Designer - Change Menu Background */
display: none;
height: auto;
padding: 0px;
margin: 0px;
border: 0px;
position: absolute;
width: 200px; /* Change Width Of DropDown Menu */
z-index:9999;
}
#cssnav li:hover ul {
display: block;
}
#cssnav li li {
background: $(tabs.background.color); /* Template Designer - Change Background */
display: block;
float: none;
margin: 0px;
padding: 0px;
width: 200px; /* Change Width Of DropDown Menu */
}
#cssnav li:hover li a {
background: #FFFFFF; /* Template Designer - Change Background of Link on Hover */
}
#cssnav li ul a {
display: block;
height: auto;
margin: 0px;
padding: 10px;
text-align: left;
}
#cssnav li ul a:hover, #cssnav li ul li:hover > a {
color: $(tabs.selected.text.color); /* Template Designer - Change Text Color on Hover */
background-color: $(tabs.selected.background.color); /* Template Designer - Change Background on Hover */
border: 0px;
text-decoration: none;
}
/* ----- END DROPDOWN CSS BY Getwebinfo.com ----- */

Drop Down Menu Not Visible?

Here some other tips that can be really helfull for you. If your dropdown menu is not appearing when you hover over it, there may be something blocking it. Go To Template> Edit CSS and find </b:skin>, above it add the following
.tabs-outer, .tabs .widget ul {overflow: visible;}
Header Not FUll Width?

Blogger by default has paddings and margins set up around your content. If you have set your navigation above to be 100% and there is still a small gap on either side then we can add code to overwrite that. Go to Template> Edit HTML and find </b:skin>. Add the following code above </b:skin>
.tabs-inner { padding: 0px; } .section { margin: 0px; }
This will remove the Bloggers default space around tabs. If there's still a gap that you don't want add the following above </b:skin>
.content-inner { padding: 10px 0px; }



After doing these all steps you can all don. After it you just go and check it out your blogger blog work well or not. I hope this article is really helpful for you. If you like this article so please share it on your social media accounts Thanks.

How to Automatically Resize Blogger Images to Fit Blog Post Area

Hello and Welcome to GetWebInfo.com. Here on this post you will learn about that How to Automatically Resize Blogger Images to Fit Blog Post Area. I recommend resizing your images before uploading them to your post. If you upload a huge image and use the code below to automatically resize it smaller, then the browser will your blog will be slower to load. I also advise choosing original size in the Blogger options as it won't compress or distort your image quality. There's further information about this in the FAQ at the end of the post. Keep the size your images in mind small image larger then it will look blurry, pix elated and stretched.

Hello and Welcome to GetWebInfo.com. Here on this post you will learn about that How to Automatically Resize Blogger Images to Fit Blog Post Area. I recommend resizing your images before uploading them to your post. If you upload a huge image and use the code below to automatically resize it smaller, then the browser will your blog will be slower to load.


Method 01: How to Automatically Resize Blogger Images Using CSS

Step 01: Go to Template> Edit HTML and find ]]></b/skin>, After finding this code add one of the following above it.

A) If you want all images to have a width of 600px then use the following Note that this may cause your images to appear stretched if they are smaller than the size set.
.post-body img { width:600px; height:auto; } 
B) If you want all images to be at leat 600px in width then use this cod. Note that this may cause your images to appear stretched if they are smaller than the size set.
.post-body img { min-width:600px; min-height:auto; }
C) If you want your images to be max 600px wide then use this code. This will resize larger images so they properly fit in the space. I recommend this way.
.post-body img { max-width:600px; max-height:auto; }
Then Change the width value shown in pink to a number that suits your blogs post area. If your post width area is set correctly you can also changed the value above to 100%. You can also join A,B and C although this usually isn't necessary. When uploading images make sure you are choosing Original Size to get the best possible quality.



Method 02: How to Automatically Resize Blogger Images Using CSS

Step 01: An alternative way is by using this script by Blogxpertise. This didn't work too well for me on some blog templates but others it worked fine. Add the following Script to Template>Edit HTML> and Above </head>
<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
/**
this script was written by GetWebInfo http://www.confluentforms.com
for the GetWebInfo website https://www.getwebinfo.com
any updates to this script will be posted to GetWebInfo
please leave this message and give credit where credit is due!
**/
$(document).ready(function(){
    // the dimension of your content within the columns
    var areawidth = $('#Blog1').width();
    $('.post-body').find('img').each(function(n, image){
        var image = $(image);
        var height = image.attr('height');
        var width = image.attr('width');
        var newHeight = (height/width * areawidth).toFixed(0);
        image.attr('width',areawidth).attr('height',newHeight);
        var greater = Math.max(areawidth,newHeight);
        image.attr({src : image.attr('src').replace(/s\B\d{3,4}/,'s' + greater)});
    });
});
//]]></script>
Step 02: You may then have to add the following code to Template>Edit HTML> and Above ]]></b:skin> and alter the value in Pink to move your images back in to the post area if they are overflowing the post area.
.post-body img { margin-left: -30px;} 
Or to move it right
.post-body img { margin-left: 30px;} 
I Hope this article is really helpfull for you. If you like this article so please share it to your Social media accounts thanks.

How to Install Disqus Comment on Blogger

Hello and Welcome to GetWebInfo.com. Here on this post you can learn that How to Install Disqus Comment on Blogger. DISQUS is one of the most popular commenting systems out there for blogs. It has a great design and Spam commenter's links.

How to Install Disqus Comment on Blogger


How to Install Disqus Comments on Blogger

Step 01: Sing Up to Disqus. It will ask you to provide a username, email address and password. It will then ask you your site name, your shortname A unique ID to identify your blog and to choose a category that your blog fits into.

Step 02: On the setting page in the Admin Section it will ask you to choose your platform. You can choose Blogger, WordPress, Squarespace, Tumbler and more. For this tutorial we'll choose Blogger.

Step 03: Click the Add Name to My Site which will open a new window with the add a gadget option. Select the blog you want to add it on and click Add Widget. You'll be redirected to Blogger Layout Page where you'll see the new gadget. I tend to move it under the blog gadget to keep things organized but that's not necesssary.

Step 04: On Disqus Choose your site and go to setting. Here you can change the color scheme, typeface, moderation rules, avatars and other setting for your comments.

Step 05: If you have existing comments via Blogger, you may want to transfer them in to DISQUS.
On DISQUS go to Discussion>Import. You can select the platform and import your comments. it can take up to 24 hours to import depending on how many comment you had.



Step 06: If you are switching blogging platform (For Example From Blogger to WordPress) or have changed your domain you can migrate your comments. On DISQUS go to Discussion> Tools> Start Domain Migration Wizard and follow the instructions. 

Step 07: If you are using and old Blogger Template, you will need to update a line of code. You can see those instructions Here .

Step 08: If you are using Bloggers default mobile template, you shall have to enable DISQUS for that seprately. You can check this in the template section under mobile. To enable DISQUS for Mobile templates Go To Templae> Edit HTML and Search for disqus, you'll find something similar to the following.
<b:widget id='HTML#' locked='false' title='Disqus for #' type='HTML'> ... </b:widget>
After Locked='false' add mobile= 'yes' like this
<b:widget id='HTML#' locked='false' mobile='yes' title='Disqus for #' type='HTML'> ... </b:widget>
Now in the End Save your template, if you are not using a mobile template and are showing the desktop version instead then DISQUS will be automatically enabled.

I Hope this article is really helpful for you. If you like this article so please Share it to your social media accounts thanks.





How to Install Font Awesome On Blogger to Display Icons on Blog

Hello and welcome to GetWebInfo.Com. Here on this post you can be able to learn about how can you install Font Awesome on Blogger to Display Icons on your Blog. Font Awesome offer a wide range (600+) of high quality scalable vector icons, that can be easily be used on your blog and costumed using CSS. This post will show you to add the icon font to your blogger blog and use icons with in your content.

How to Install Font Awesome On Blogger to Display Icons on Blog


Install Font Awesome to Your Blogger

Adding Font Awesome to Blogger is pretty easy. Head over to the Font Awesome Get Started Page and enter your email address. They will email you with a unique embed code that looks similar to the following.

<script src="https://use.fontawesome.com/000aaaa000.js"></script>
Now you need to copy and paste that in to your theme's head section. On Blogger go to Theme>Edit HTML and find the closing head tag </head>. Right above </head> paste the embed code from Font Awesome.



Add Font Awesome Icons to your Blogger Blog

Now that Font Awesome is installed, we can use some of icons on our blogs to display in blog posts, sidebar, navigation menu, buttons and so on. To do so we use a simple line of code in our HTML.

Visit the Font Awesome Icon Page and click on the icon you want to use. On the dedicated icon page, you'll see code that looks like this:
<i class="fa fa-icon-name" aria-hidden="true"></i>
Paste this where you want to display the icon. This could be in a post, post,page,sidebar gadget, navigation, footer or anywhere else that accepts HTML. In order to make the icon a click-able link, we can wrap it in link tags like so.

<a href="URL" title="Facebook" target="_blank" rel="nofollow"><i class="fa fa-facebook" aria-hidden="true"></i></a>
Customizing Font Awesome Icons Using CSS

You can customize the CSS and change the icon color, Size, shadows and so on. To do this, use the icons class name (like fa-twitter) or suing the general class fa to target all icons.

.fa { /* CSS Styling Goes Here */ } .fa-twitter { /* CSS Styling Goes Here */ }
There's lots of other ways to customize the icons too, check out the Example Page Here

I Hope this article is really helpful for you. If you like this article so please share it to your Social Media accounts thanks.

Stylish Email Subscription Popup widget for Blogger

Hello and Welcome to Getwebinfo. Here on this post you can be able to get a code of Stylish Email Subscription Popup widget for your Blogger. Feedburner is the only source for most of the bloggers to gain new email subscribes. So i just came up with another stylish widget for Blogger Platform and I hop you will love this widget. This time I have designed a Feedbruner Email Subscription Popup box for Blogger and its really stylish professional in looking and neat and clean widget.

Stylish Email Subscription Popup widget for Blogger


Features of Email Subscription Popup Blogger Widget

It has got really good features and you need to know them so that you can alter anything later the way you like to without getting confused.


  1. Maximum width is 600px 
  2. The Subscription box is Fully Responsive 
  3. Cookies enabled and you can set any number of expiry days for cookies.
  4. Pops up in the center of window screen and remains in the center
  5. You do not boring at all
  6. Using Google font family "Oswald"
  7. You can set time delay so that popup box will appear on certain time after loading of your blog like as 20 seconds after loading of your blog
  8. Now it automatically fades out after someone clicks on "Add Me" button
  9. I Love this widget very much and i hope you can also love it



Demo Screen Shot of Email Subscription Popup Box 

Stylish Email Subscription Popup widget for Blogger


How to Add FeedBruner Email Subscription Popup Widget in to Blogger


Let's follow these steps as usual in my previous articles

Step 01: Log in to your blogger blog account 

Step 02: Go to Template Section and then click on Edit HTML button

Step 03: Now please first of all you can take a backup of your template code first before doing anything with your template code because it's always good to be on safe side. 

Step 04: First of all Installing Google Font Family and JavaScript Codes to your Blogger HTML

Step 05: Search for this opening tag <body> and past the Google font family link just after it.

<link href='http://fonts.googleapis.com/css?family=Oswald|Open+Sans:300italic,400italic,600italic,400,300,600,700' rel='stylesheet' type='text/css'/>
Step 06: Now just find out this closing tag </head> and paste these JavaScript links given below just before this closing tag.

Note: If you have previously installed my widget, Facebook Popup, Page, Like Box for Blogger then you need not to complete this step because these codes were installed in to sidebar HTML gadget then and you will be adding them twice. This time I am installing these codes into your blogger template, not in to the sidebar so you can remove them from sidebar HTML widget. Theseare the same codes so make it sure it you part.

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

Step 07: And Now this Script Add before </body>


<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// key and at least value given, set cookie...
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}
value = String(value);
return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}
// key and possibly options given, get cookie...
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
//]]>
</script>

Step 08: Now Add CSS code to your Blogger Template 

Step 09: Now find out this code ]]></b:skin> and just before this code, paste the whole CSS code given below.


/*----- Email Subscription Popup Box Coded by www.getwebinfo.com -----*/
#twist-blogger-subbox {
  display: none;
  background: rgba(0,0,0,0.5);
  width: 100%;
  height:100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index:99999999;
}
#twist-blogger-subbox .popup-box {
  padding: 0;
  margin: 0 auto;
  max-width: 600px;
  border-radius: 1px;
  border: 2px solid #F5F500;
  background: #3A3939 url('http://3.bp.blogspot.com/-7TLWGdsIYRg/VSYZtpMVpgI/AAAAAAAAA7A/eTPibGVJ4Mg/s1600/64.png');
  background-repeat: no-repeat;
  background-position: 100% 45%;
  position:relative;
  top:25%;
  z-index:0;
}
#twist-blogger-subbox .popup-box .exit-button-subbox {
  float: right;
  cursor: pointer;
  position: absolute;
  right: 0px;
  top: 0px;
  margin-top: 2px;
  margin-right: -2px;
}
#twist-blogger-subbox .popup-box .exit-button-subbox:before {
  content: "X";
  padding: 5px 8px;
  background: #FFFFFF;
  color: #000000;
  font-weight: normal;
  font-size: 12px;
  text-shadow: 0px -1px #000;
  font-family: sans-serif;
  border: 4px solid #F5F500;
  border-radius: 50px 0px 50px 50px;
}
/*--Main Headline Style - www.getwebinfo.com--*/
#twist-blogger-subbox .popup-box .tagline {
  padding: 0;
  line-height: 2em;
  font-size: 26px;
  height: 50px;
  font-weight: normal;
  font-family: "Oswald",sans-serif;
  text-shadow: 0px -1px 0px #F5F500;
  color: #3A3939;
  text-align: center;
  background: #FFFF00;
  border-right: 7px solid #F5F500;
  border-left: 7px solid #F5F500;
  border-bottom: 15px solid #3A3939;
}
/*--Paragraph Style - www.getwebinfo.com--*/
#twist-blogger-subbox .popup-box p {
  font-family: "Oswald",sans-serif;
  font-size: 15px;
  color: #EFEFEF;
  text-shadow: 1px -1px 0px #000;
  line-height: 35px;
  padding: 10px 110px 0px 20px;
  text-align: left;
  letter-spacing: 0.5px;
  margin: 0;
}
#twist-blogger-subbox .popup-box .rssform {
  padding: 15px 20px;
  margin: 15px 0px 0px 0px;
}
/*-- Button Style - www.getwebinfo.com --*/
#twist-blogger-subbox .popup-box .rssform .button {
  cursor: pointer;
  margin: 0px 0px 0px 5px;
  border: none;
  overflow: hidden;
  width: 35%;
  height: 37px;
  background-color: #FF0;
  font-size: 14px;
  font-weight: normal;
  color: #121212;
  letter-spacing: 0.5px;
  text-transform: uppercase!important;
  font-family: "Oswald";
  float: right;
}
#twist-blogger-subbox .popup-box .rssform .button:hover {
  background: #FFE800;
  padding: 7px;
  border: 1px solid #fff;
}
#twist-blogger-subbox .popup-box .rssform .email-bg {
  background: #FFE url('http://1.bp.blogspot.com/-h7L136qj408/VSYZtr7vDNI/AAAAAAAAA7E/F3W4M51n1mk/s1600/1envelope.png') no-repeat 5px 8px !important;
  padding-left: 30px;
}
#twist-blogger-subbox .popup-box .rssform input {
  padding: 8px;
  font-size: 13px;
  font-family: Oswald;
  font-weight: normal;
  display: inline-block;
  width: 60%;
  height: 37px;
  text-transform: uppercase;
  outline: none !important;
  border: none;
  border-radius: 1px;
  box-sizing: border-box !important;
}

Okay so now we are don with adding CSS code and only remaining step is to add HTML part of email subscription popup box to your Blog template.

Step 10: Now add HTML Code of Subscription Popup to your Template

Step 11: Now just find out this closing </body> tag which is at the end of your template code and paste the HTML code just before this closing tag after making required changes.


<div id='twist-blogger-subbox'>
            <div class='popup-box'>
   <div class='exit-button-subbox'></div>
            <div class='tagline'>
            Wait! Leech off my best
            </div>
                 <p>Get latest Blogger Widgets, Plugins and much more straight into your INBOX for free. Just Enter your email address, Verify and join our Newsletter!</p>
            <div class='rssform'>
            <form action='http://feedburner.google.com/fb/a/mailverify' method='post' target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=GetBloggerInfo', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
            <input type='text' class='email-bg' name='email' placeholder='Enter your email address... :)' />
            <input type="hidden" value="GetBloggerInfo" name="uri"/>
            <input type="hidden" name="loc" value="en_US"/>
            <input value="Add Me" class="button" type="submit" />
            </form>
            </div>
   </div>
   </div>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('feedburner_popup_box') != 'yes'){
$('#twist-blogger-subbox').delay(25000).fadeIn('medium');
$('.exit-button-subbox, .button').click(function(){
$('#twist-blogger-subbox').stop().fadeOut('medium');
});
}
$.cookie('feedburner_popup_box', 'yes', { path: '/', expires: 15 });
});
</script>

Changes Required : Now you need to make few changes to the above HTML 

  1. Change the Min Headline Text "Waite Leech of my best" to whatever you want.
  2. Change the Paragraph text to your own text and that is what where you describe why visitors should become subscribers.
  3. Change my Feedburner Address "GetWebInfo"  to your blog's address (twice)
  4. You can change Add Me button text to your own like as boring as Subscribe.
  5. Change the delay time which is 25 seconds by default (I made it default :p) to your own. To change it just modify the value of 25000 where 1000 value = 1 second.
  6. Set the expiry date for cookies which is 15 days by default. To change it just modify the value 15 to any number where 1 number =1 day. Now that is it!
Note: Now First of all Visit  your blog and be the first to see it live. It must be working fine if you did not miss any step. The process is little long but well worth the time. 

If you have any issue with this widget so please leave comment i'll give you answer as soon as possible.

How to Customize The Blogger Label Gadget

Hello and Welcome to GetWebInfo.Com. Here you can learn how to customize your blogger theme label widget. The blogger label gadget is not pretty. And tag clouds are old school. And ugly. Especially the default styles with the different sized fonts. It just ends up a big blog words that your readers ignore. But having a organized section of links to your blog categories in your sidebar is a great way to keep your old content alive and relevant. And to keep your readers reading!

So let's learn how to customize the blogger label gadget!






Why you Should Use a Blogger Label Gadget


Many of my customers skip the Blogger Labels Gadget. They do this for a couple of reasons.

The first reason is because their label (Categories) are out of control. The time when I've seen so far is 729 labels on one blog. That would be a big mess in the sidebar (though, you can only select your widget in just few labels, but later on that).

729 blog Labels / Categories. That's just not right.

The other reason is that the Blogger Label gadget is not just very attractive on many templates. So, I wanted to share a template on the gadgets of how to edit the styles of quick tutorials to make it look more modern.

I'm going to share 4 different design options to customize the Blogger Label Gadget for you to choose from.

In future tutorials, I'll also be sharing a quick and easy way to add a customized menu to the sidebar and how to add image category buttons to Blogger the easy way. Some bloggers may be harder than it needs to be.

So, let's go. Let's customize!


What we will be working with


Blogger Label Cloud Style Widget





Blogger List Style Label Widget                             

We will work on these two types of label widget style. Here i am post some new style of label view widget that can be really help full and put perfect impression to your blogger reader. But because we are customizing one of the native Blogger gadgets, this code will work on pretty much any template. As long as your template designer does not use too much! Important tags in their CSS, that is.

Note: This code does not work with the latest Blogger.com default themes (Contempo, Soho, Emporio, Notable). Their code is dramatically different from most of the classic and premium Blogger.com themes.

 I have actually stripped out all the label styling so we are starting from the default. The Blogger Label Gadget has 2 style options: list and cloud. Here's what the default styles look like on the Phoebe template.

What we will be Creating

I have designed 4 styles for you to play with. This is all done with a bit of CSS you can add directly to your template or the "Add CSS" window in the Template Designer. Make suer you gra ll the code for your chosen still from the code window.


Here are the Four (4) style of Blogger Label Widgets style.



                     Style 01                                                                                          Style 02




                           Style 03                                                                                            Style 04


Style 01 The Minimalist


The code for this template is a simple, list-style list of text labels in the center (instead of left aligned).

You can also add a little white space between the links and specify their color and hover colors for some more control.

Note: When editing code, make sure you edit the code in a plain text editor program like Text Edit or Note Pad.

Copy and paste code code encrypted Anto-European code code was in "Number of keys" box in template designer (tha> customism> number whiskey).

Style 01 Code

/* STYLE 1 - Custom Blogger Labels Gadget Styles by GetWebInfo.Com */
.Label ul {
text-align: center;    /* center aligns text in sidebar */
}
.Label ul li {
margin: 7px 0;    /* Adds space above and below each link. Change the 7 to adjust your spacing */
}
.Label ul li a {
color: #272727;    /* Link Color */
font-family: "Open Sans";     /* Link Font */
text-transform: uppercase;    /* Link case. Options are uppercase, lowercase, none, capitalize. */
font-style: normal;    /* Font Style. Options are normal and italics. */
font-weight: normal;    /* Font weight. Options include: light, normal, bold, */
letter-spacing: 1px;    /* Space between letters */
font-size: 12px;   /* Font Size. */
}
.Label ul li a:hover {
color: #C39F76;   /* Link hover color */
}





Style 02  Give Me Some Color

Again Copy and paste the text directly in to your page template from Theme> Edit HTML. Make sure you place it in the CSS section of the template.

Or To Take the easy way and go to Theme> Customize> Add CSS. Copy and paste the code then click the Applying to blog button.


Style 02 Code 

/* STYLE 2 - Custom Blogger Labels Gadget Styles by GetWebInfo.Com */
.Label ul li a {
    display: block;
    width: 100%;
    text-align: center;    /* center aligns text in sidebar */
    margin: 7px 0;    /* White space between links */
    padding: 12px 0;    /* Padding for colored background */
color: #272727;    /* Link Color */
    background-color: #f3f3f3;    /* Background Color */
font-family: "Open Sans";     /* Link Font */
text-transform: uppercase;    /* Link case. Options are uppercase, lowercase, none, capitalize. */
font-style: normal;    /* Font Style. Options are normal and italics. */
font-weight: normal;    /* Font weight. Options include: light, normal, bold, */
letter-spacing: 1px;    /* Space between letters */
font-size: 12px;   /* Font Size. */
}
.Label ul li a:hover {
color: #ffffff;   /* Link hover color */
    background-color: #C39F76;    /* Background Color */
}


Style 03 Lets Get Fancy

Again Copy and paste the text directly in to your page template from Theme> Edit HTML. Make sure you place it in the CSS section of the template.

Or To Take the easy way and go to Theme> Customize> Add CSS. Copy and paste the code then click the Applying to blog button.


This setup requires that you have FontAwesome icons installed on your blog. All of our Blogger have this already, so if you are using a Georgia Lou Studios Blogger template or you know your blog already has FontAwesome installed, skip the next step.

Install FontAwsome

Add the Following code to your text template just above the </head> tag.

<link HREF='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' REL='stylesheet'/>


Style 03 Code

/* STYLE 4 - Custom Blogger Labels Gadget Styles by GetWebInfo.Com */
.Label ul li {
    display: inline-block;
    width: calc(50% - 5px);
    box-sizing: border-box;
    float: left;
}
.Label ul li:nth-child(odd) {
    margin-right: 10px;
}
.Label ul li a:before {
   display: block;
   text-align: center;
   margin-bottom: 8px;
   font-family:'FontAwesome';
   font-size: 18px;   /* Icon size */
}
.Label ul li a {
    box-sizing: border-box;
    display: block;
    width: 100%;
    text-align: center;    /* center aligns text in sidebar */
    margin: 5px 0;    /* White space between links */
    padding: 20px 10px;    /* Padding for colored background */
font-family: "Open Sans";     /* Link Font */
text-transform: uppercase;    /* Link case. Options are uppercase, lowercase, none, capitalize. */
font-style: normal;    /* Font Style. Options are normal and italics. */
font-weight: normal;    /* Font weight. Options include: light, normal, bold, */
letter-spacing: 1px;    /* Space between letters */
font-size: 12px;   /* Font Size. */
color: #ffffff;    /* Link Color */
    background-color: #e7b99f;    /* Background Color */
}
.Label ul li a:hover {
color: #ffffff;    /* Link Hover Color */
    background-color: #272727;    /* Background Hover Color */
}
/* ICON CODES */
/* First Icon */
.Label ul li:nth-child(6n+1) a:before {
content:"\f1fc";
}
/* Second Icon */
.Label ul li:nth-child(6n+2) a:before {
content:"\f0b1";
}
/* Third Icon */
.Label ul li:nth-child(6n+3) a:before {
content:"\f03e";
}
/* Fourth Icon */
.Label ul li:nth-child(6n+4) a:before {
content:"\f040";
}
/* Fifth Icon */
.Label ul li:nth-child(6n+5) a:before {
content:"\f1ea ";
}
/* Sixth Icon */
.Label ul li:nth-child(6n+6) a:before {
content:"\f030";
}



Style 04 Ombre or Color Gradient

Again Copy and paste the text directly in to your page template from Theme> Edit HTML. Make sure you place it in the CSS section of the template.

Or To Take the easy way and go to Theme> Customize> Add CSS. Copy and paste the code then click the Applying to blog button.


Style 04 Code

/* STYLE 4 - Custom Blogger Labels Gadget Styles by GetWebInfo.Com */
.Label ul li a {
  box-sizing: border-box;
display: block;
width: 100%;
text-align: center;    /* center aligns text in sidebar */
margin: 7px 0;    /* White space between links */
padding: 12px 10px;    /* Padding for colored background */
font-family: "Open Sans";     /* Link Font */
text-transform: uppercase;    /* Link case. Options are uppercase, lowercase, none, capitalize. */
font-style: normal;    /* Font Style. Options are normal and italics. */
font-weight: normal;    /* Font weight. Options include: light, normal, bold, */
letter-spacing: 1px;    /* Space between letters */
font-size: 12px;   /* Font Size. */
}
/* LABEL COLORS */
/* First Label Colors */
.Label ul li:nth-child(6n+1) a {
color: #272727;    /* Link Color */
    background-color: #b0a8a6;    /* Background Color */
}
/* Second Label Colors */
.Label ul li:nth-child(6n+2) a {
color: #272727;    /* Link Color */
    background-color: #c3c5c4;    /* Background Color */
}
/* Third Label Colors */
.Label ul li:nth-child(6n+3) a {
color: #272727;    /* Link Color */
    background-color: #e5d7ca;    /* Background Color */
}
/* Fourth Label Colors */
.Label ul li:nth-child(6n+4) a {
color: #272727;    /* Link Color */
    background-color: #e0e1e6;    /* Background Color */
}
/* Fifth Label Colors */
.Label ul li:nth-child(6n+5) a {
color: #272727;    /* Link Color */
    background-color: #f0ede4;    /* Background Color */
}
/* Sixth Label Colors */
.Label ul li:nth-child(6n+6) a {
color: #272727;    /* Link Color */
    background-color: #f5f6f1;    /* Background Color */
}
/* HOVER COLORS */
/* First Label Hover Colors */
.Label ul li:nth-child(6n+1) a:hover {
color: #ffffff;    /* Link Hover Color */
    background-color: #272727;    /* Background Hover Color */
}
/* Second Label Hover Colors */
.Label ul li:nth-child(6n+2) a:hover {
color: #ffffff;    /* Link Hover Color */
    background-color: #272727;    /* Background Hover Color */
}
/* Third Label Hover Colors */
.Label ul li:nth-child(6n+3) a:hover {
color: #ffffff;    /* Link Hover Color */
    background-color: #272727;    /* Background Hover Color */
}
/* Fourth Label Colors */
.Label ul li:nth-child(6n+4) a:hover {
color: #ffffff;    /* Link Hover Color */
    background-color: #272727;    /* Background Hover Color */
}
/* Fifth Label Hover Colors */
.Label ul li:nth-child(6n+5) a:hover {
color: #ffffff;    /* Link Hover Color */
    background-color: #272727;    /* Background Hover Color */
}
/* Sixth Label Hover Colors */
.Label ul li:nth-child(6n+6) a:hover {
color: #ffffff;    /* Link Hover Color */
    background-color: #272727;    /* Background Hover Color */
}

Here are the four label style blogger codes only for you.

To find More Icon Codes 

  1. Visit the FontAwsome site http://fontawesome.io/icons/
  2. Use the search box to find an icon that fits your needs
  3. Under the search results, click on the icon you want to use to open the icon details
  4. Under the big picture of the icon you will see a unicode symbol for the icon for Example: f030

  5. Copy this code in to the content setting for your icon. Leave the quotes and backslash(\) intact.


Bonus Style Label Widget

If you want to get really fancy, you can combine styles 3 & 4 with varying colors and icons.


Bonus Style Code 

/* Bonus Style - Custom Blogger Labels Gadget Styles by Georgia Lou Studios */
.Label ul li {
        display: inline-block;
        width: calc(50% - 5px);
        box-sizing: border-box;
        float: left;
}
.Label ul li:nth-child(odd) {
        margin-right: 10px;
}
.Label ul li a:before {
       display: block;
       text-align: center;
       margin-bottom: 8px;
       font-family:'FontAwesome';
       font-size: 18px;   /* Icon size */
}
.Label ul li a {
        box-sizing: border-box;
        display: block;
        width: 100%;
        text-align: center;    /* center aligns text in sidebar */
        margin: 5px 0;    /* White space between links */
        padding: 20px 10px;    /* Padding for colored background */
font-family: "Open Sans";     /* Link Font */
text-transform: uppercase;    /* Link case. Options are uppercase, lowercase, none, capitalize. */
font-style: normal;    /* Font Style. Options are normal and italics. */
font-weight: normal;    /* Font weight. Options include: light, normal, bold, */
letter-spacing: 1px;    /* Space between letters */
font-size: 12px;   /* Font Size. */
}
/* ICON CODES */
/* First Icon */
.Label ul li:nth-child(6n+1) a:before {
content:"\f1fc";
}
/* Second Icon */
.Label ul li:nth-child(6n+2) a:before {
content:"\f0b1";
}
/* Third Icon */
.Label ul li:nth-child(6n+3) a:before {
content:"\f03e";
}
/* Fourth Icon */
.Label ul li:nth-child(6n+4) a:before {
content:"\f040";
}
/* Fifth Icon */
.Label ul li:nth-child(6n+5) a:before {
content:"\f1ea ";
}
/* Sixth Icon */
.Label ul li:nth-child(6n+6) a:before {
content:"\f030";
}
/* LABEL COLORS */
/* First Label Colors */
.Label ul li:nth-child(6n+1) a {
color: #ffffff;    /* Link Color */
    background-color: #e7b99f;    /* Background Color */
}
/* Second Label Colors */
.Label ul li:nth-child(6n+2) a {
color: #ffffff;    /* Link Color */
    background-color: #e7b99f;    /* Background Color */
}
/* Third Label Colors */
.Label ul li:nth-child(6n+3) a {
color: #ffffff;    /* Link Color */
    background-color: #e7b99f;    /* Background Color */
}
/* Fourth Label Colors */
.Label ul li:nth-child(6n+4) a {
color: #ffffff;    /* Link Color */
    background-color: #e7b99f;    /* Background Color */
}
/* Fifth Label Colors */
.Label ul li:nth-child(6n+5) a {
color: #ffffff;    /* Link Color */
    background-color: #e7b99f;    /* Background Color */
}
/* Sixth Label Colors */
.Label ul li:nth-child(6n+6) a {
color: #ffffff;    /* Link Color */
    background-color: #e7b99f;    /* Background Color */
}
/* HOVER COLORS */
/* First Label Colors */
.Label ul li:nth-child(6n+1) a:hover {
color: #ffffff;    /* Link Hover Color */
    background-color: #272727;    /* Background Hover Color */
}
/* Second Label Colors */
.Label ul li:nth-child(6n+2) a:hover {
color: #ffffff;    /* Link Hover Color */
    background-color: #272727;    /* Background Hover Color */
}
/* Third Label Colors */
.Label ul li:nth-child(6n+3) a:hover {
color: #ffffff;    /* Link Hover Color */
    background-color: #272727;    /* Background Hover Color */
}
/* Fourth Label Colors */
.Label ul li:nth-child(6n+4) a:hover {
color: #ffffff;    /* Link Hover Color */
    background-color: #272727;    /* Background Hover Color */
}
/* Fifth Label Colors */
.Label ul li:nth-child(6n+5) a:hover {
color: #ffffff;    /* Link Hover Color */
    background-color: #272727;    /* Background Hover Color */
}
/* Sixth Label Colors */
.Label ul li:nth-child(6n+6) a:hover {
color: #ffffff;    /* Link Hover Color */
    background-color: #272727;    /* Background Hover Color */
}


Bonus Style Tips: Select the Labels to show in Your Widget

 And now a bonus tips for you. Learn how to trim the labels in your labels widget.

Step 01: Go to the Layout page on your Blogger Dashboard

Step 02: Find your labels gadget and click the Edit link.


Step 03: Under the Show option select Selected Labels

Step 04: Click the edit link that appears

Step 05: A list of all your Labels will appear in the bottom of the window

Step 06: Uncheck any labels you would like to Hide in the widget 


Step 07: Now just Click the Save button to save your settings

Final Words

I hope this article is really help full for your if you like this article so please share it o your social media accounts thanks for reading.