Wednesday, October 17, 2018

October 17, 2018

How to add all in one social media subscription widget for blogger 

How to add all in one social media widget to blogger blog.
Hello my friends!!
Today we discuss about How to add all in one social media widget to blogger blog.
Social medias like Facebook, twitter, G+, Pinterest, YouTube are playing one of the major role in blog traffic as well as Search Engine Optimization. Also that change the world of SEO. That social medias having a huge influence in search engine ranking. Those are the easy way to get close to your audience.

At the past web masters only get traffic from search engines, most of time they used paid traffic. But now, that situation has completely changed. Social medias driven world. So Web or blog sites are using Social media to bring lot of traffic for them. So for bloggers now it is essential to have social media profiles. It is not only enough having a social media profiles, you should have a good interaction between your blog or web site and your social media profiles. In that point adding a Social media widget to your blogger sites doing an important role.

Why is that social media important to bloggers?

1.       For increase blog traffic
2.       Help to grow your loyal community of readers/visitors.
3.       Best method to promote your blog and other products
4.       Help keep our followers in touch with blog
5.       Help enhance our SEO
6.       Get higher rank in SERPs



From one of the previous article we already discuss about How to add Subscribe Us Pop up box in Blogger. With that we only focus on how to increase our subscribers. However, that Subscribe Us box not help to boost our traffic. It helps to readers to keep in touch with our blogger. But social medias like Facebook, Twitter, G+, Pinterest and etc. will help you to bring thousands of traffics for your blogger blog. It also helps you to keep in touch with readers as well as it helps readers to keep in touch with your blogger blog via your social media profiles. So rather than the Subscribe us button or widget all of bloggers would like to add Facebook like button, Facebook share button, Facebook page like button, Twitter Follow buttons and other social media buttons. So most of social medias introducing the tools and other widgets to web masters to promote their social media profiles.

With that article today we discuss about How to bring those all social media tools into one place of your blogger blog. So with that article you can add all of your social media tools into one place including your email subscribe us button.

Ok, then let see how to add all in one social media subscription widget for blogger. It’s very easy to install and doesn’t affect blog template. That will have brought professional and attractive look for your blog template. Then let start.

How to add all in one social media subscription widget for blogger

Step 01. Go to your Blogger blog
Step 02. Go to Dashboard, then click Layout
Step 03. Click Add Widget.
Step 04. Choose HTML/Java Script
Step 05. Copy and Paste the one of code given below

Method 01
Demo


Join Our Free Newsletter
Socialized with Us







Code 

<style type="text/css">
    .twssub {
        background-color: rgb(255, 255, 255);
        width: 100%;
        height: 100%;
        border: 1px dashed #ddd;
    }  
    .twssube {
        color: rgb(255, 255, 255);
        background-color: rgb(11, 172, 227);
        padding: 10px 0;
        text-align: center;
        font: bold 15px "trebuchet MS", "Tahoma";
        width: 100%;
    }
    .twsemailform {
        width: 235px;
        margin: 10px auto;
    }
    #twsemailbox {
        background-color: #FFF;
        color: #747474;
        width: 130px;
        border: 1px solid #D8D8D8;
        padding: 7px;
        height: 18px;
        display: inline-block;
        vertical-align: top;
        box-shadow: inset 0px 0px 5px #c2c2c2;
        box-sizing: content-box;
        font-size: 13px;
    }
    #twsemailbutton {
        background-color: rgb(243, 93, 92);
        border: 1px solid rgb(215, 84, 83);
        color: rgb(255, 255, 255);
        width: 85px;
        font: bold 13px "trebuchet MS", "Tahoma";
        padding: 7px;
        text-align: center;
        cursor: pointer;
        display: inline-block;
        height: 34px;
    }
    #twsemailbutton:hover {
        background-color: #E64C4B;
        border: 1px solid #BF4A49;
    } 
    .twssignup-form {
        margin-top: 15px;
    }
    .twssocial-icons {
        overflow: hidden;
        text-align: center;
        display: block;
        margin: 20px auto;
    }
    .twssocial-icons ul {
        margin: 0px auto !important;
        text-align: center;
        padding: 0px !important;
        display: inline-block;
    }
    .twssocial-icons ul li {
        background: transparent none repeat scroll 0% 0% !important;
        border: medium none !important;
        float: left;
        list-style-type: none !important;
        padding: 0px !important;
        margin: 0px 5px !important;
    }
    .twssocial-icons ul li::before,
    .hbzsocial-icons ul li::after {
        display: none !important;
    }
    .twssocial-icons ul li a {
        background: url("http://3.bp.blogspot.com/-qXV1qRPIjHY/UbqjmHPAHzI/AAAAAAAACUE/7_sAZf8tHLY/s1600/sprite_32x32.png") no-repeat scroll 0 0;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        display: block;
        height: 34px;
        overflow: hidden;
        text-indent: -999px;
        transition: all 0.25s linear 0s;
        width: 34px;
    }  
    .twssocial-icons ul li a:hover {
        background-color: #aeaeae !important;
    }
    .twssocial-icons ul li.social-facebook a {
        background-position: -62px 1px;
        background-color: #3b5998;
    }
    .twssocial-icons ul li.social-twitter a {
        background-position: -254px 1px;
        background-color: #00aced;
    } 
    .twssocial-icons ul li.social-gplus a {
        background-position: -95px 0px;
        background-color: #dd4b39;
    }   
    .twssocial-icons ul li.social-rss a {
        background-position: -190px 0px;
        background-color: #F87E12;
    }
.twstw{
    text-align: center;
  }
</style>
<div class="twssub">
    <div class="twssube">Join Our Free Newsletter</div>
    <div class='twssignup-form'>
        <div class='twsemailform'>
            <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=Your Blog uri &apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'> <input name='uri' type='hidden' value='Your Blog uri' /> <input name='loc' type='hidden' value='en_US' /> <input id='twsemailbox' name='email' required='' type='text' placeholder='Your Email address' /> <input id='twsemailbutton' title='' type='submit' value='Join Us' /> </form>
        </div>
        <div class="twssube"> Socialized with Us</div>
        <div class="twssocial-icons">
            <ul>
                <li class="social-facebook"><a href="Your Facebook URL" target="_blank" title="Facebook">Facebook</a></li>
                <li class="social-twitter"><a href="Your Twitter URL" target="_blank" title="Twitter">Twitter</a></li>
                <li class="social-gplus"><a href="Your Google+ URL" target="_blank" title="Google+">Google+</a></li>
                <li class="social-pinterest"><a href="Your Pinterest URL" target="_blank" title="Pinterest">Pinterest</a></li>
                <li class="social-rss"><a href=" Your RSS URL " target="_blank" title="RSS">RSS</a></li>
            </ul>
        </div>
        <div style="width: 230px; margin: 0px auto;">
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = 'https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v3.1';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-page"data-href="Your Facebook URL"data-hide-cover="false"data-show-facepile="true"></div>
</div>
<div class="twstw">
<a href="Your Twitter URL" class="twitter-follow-button">Follow @Twitter Username </a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
           </div>
     </div>
</div>

Method 02.
Demo

Sign Up for Email Updates
Socialized with Us





Code

<style type="text/css">
.twsub {
        background-color: rgb(255, 255, 255);
        width: 100%;
        height: 100%;
        border: 1px dashed #ddd;
}
.twsube {
        color: rgb(255, 255, 255);
        background-color: rgb(11, 172, 227);
        padding: 10px 0;
        text-align: center;
        font: bold 15px "trebuchet MS", "Tahoma";
        width: 100%;
}
.twsignup-form {
background: transparent url("https://1.bp.blogspot.com/-Y_e_B9KzB-c/Vr6fNXna_BI/AAAAAAAAALo/dk3TFDW2-4I/s1600/Email-bg.jpg") no-repeat scroll center center / 250px 150px;
    height: 150px;
    width: 250px;
    margin: 10px auto 60px auto;
    border: 1px dashed #ddd;
    background-color: rgb(255, 255, 255);
}
.twform-inner p {
    text-align: center;
    color: #fff;
    padding: 10px;
    font: bold 18px "trebuchet MS","Tahoma";
}
.twemailform {
    margin: 120px auto 5px;
    width: 215px;
}
#twemailbox {
    background: #FEFEFE none repeat scroll 0% 0%;
    border: medium none;
    font: 12px/12px "HelveticaNeue",Helvetica,Arial,sans-serif;
    margin-right: 5px;
    box-shadow: 0px 0px 4px rgb(207, 207, 207) inset, 1px 1px 1px rgb(186, 186, 186);
    padding: 7px;
    box-sizing: content-box;
    height: 12px;
    vertical-align: top;
    display: inline-block;
}
#twemailbutton {
    background: transparent linear-gradient(to bottom, rgb(202, 48, 40) 0%, rgb(235, 88, 78) 100%) repeat scroll 0% 0%;
    box-shadow: 0px 0px 2px rgb(182, 37, 32) inset;
    border: medium none;
    color: #FFF;
    cursor: pointer;
    font: 13px/13px "HelveticaNeue",Helvetica,Arial,sans-serif;
    padding: 6px;
    border-radius: 5px;
    height: 27px;
    display: inline-block;
}
#twemailbutton:hover {
    background: transparent linear-gradient(to bottom, #CA3028 0%, #B72420 100%) repeat scroll 0% 0%;
}
.twsocial-icons {
    margin: 20px 0 0;
    overflow: hidden;
    display: block;
    text-align: center;
}
.twsocial-icons ul {
    display: inline-block;
    margin: 0 auto !important;
    text-align: center;
    padding: 0px
}
.twsocial-icons ul li {
    background: transparent !important;
    border: none !important;
    float: left;
    list-style-type: none !important;
    margin: 0 4px 10px !important;
    padding: 0 !important;
}
.twsocial-icons ul li::before,
.twsocial-icons ul li::after {
    display: none !important;
}
.twsocial-icons ul li a, .hbzsocial-icons ul li a:hover {
    background: url("http://3.bp.blogspot.com/-qXV1qRPIjHY/UbqjmHPAHzI/AAAAAAAACUE/7_sAZf8tHLY/s1600/sprite_32x32.png") no-repeat scroll 0 0;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    display: block;
    height: 38px;
    overflow: hidden;
    text-indent: -999px;
    transition: all 0.25s linear 0s; width: 38px;
}
.twsocial-icons ul li.social-facebook a {
    background-color: #3b5998;
    background-position: -60px 3px;
}
.twsocial-icons ul li.social-twitter a {
    background-color: #00aced;
    background-position: -253px 3px;
}
.twsocial-icons ul li.social-gplus a {
    background-color: #dd4b39;
    background-position: -93px 3px;
}
.twsocial-icons ul li.social-pinterest a {
    background-color: #cb2027;
    background-position: -157px 3px;
}
.twsocial-icons ul li.social-rss a {
    background-color: #F87E12;
    background-position: -189px 3px;
}
.twsocial-icons ul li a:hover {
    background-color: #333;
}
.twtw{
    text-align: center;
</style>
<div class="twsub">
 <div class='twsignup-form'>
  <div class='twform-inner'>
   <p>Sign Up for Email Updates</p>
  </div>
  <div class='twemailform'>
   <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=Your Blog uri &apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
    <input name='uri' type='hidden' value='Your Blog uri'/>
    <input name='loc' type='hidden' value='en_US'/>
    <input id='twemailbox' name='email' required='' type='text' placeholder='Enter your email...'/>
    <input id='twemailbutton' title='' type='submit' value='Sign up'/>
   </form>
  </div>
 </div>
 <div class="twsube"> Socialized with Us</div>
        <div class="twsocial-icons">
            <ul>
                <li class="social-facebook"><a href="Your Facebook URL" target="_blank" title="Facebook">Facebook</a></li>
                <li class="social-twitter"><a href="Your Twitter URL" target="_blank" title="Twitter">Twitter</a></li>
                <li class="social-gplus"><a href="Your Google+ URL" target="_blank" title="Google+">Google+</a></li>
                 <li class="social-pinterest"><a href="Your Pinterest URL" target="_blank" title="Pinterest">Pinterest</a></li>
                <li class="social-rss"><a href=" Your RSS URL " target="_blank" title="RSS">RSS</a></li>
            </ul>
        </div>
        <div style="width: 230px; margin: 0px auto;">
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = 'https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v3.1';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-page"data-href="Your FaceBook URL"data-hide-cover="false"data-show-facepile="true"></div>
 </div>
 <div class="twtw">
  <a href="Your Twitter URL" class="twitter-follow-button">Follow @Twitter User name</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
           </div>
        </div>
</div>


**You have to do some Customization before save it
Replace Your Blog uri   with your your Feedburner ID.

Replace Your Facebook URL with Your Facebook page URL
Replace Your Twitter URL with your twitter URL
Replace Your Google+ URL With your Google+ URL
Replace Your Pinterest URL with your Pinterest URL
Replace Your RSS URL with your RSS URL
Replace Twitter User name with your twitter user name

In blue color highlighted area included Facebook Page plugin codes, you can customize and replace it after doing some modifications to your official Facebook page plugin as you wish. Visit here
You can customize your twitter button from here and guide lines from here.

           Step 06. After doing changes, click save button and place that widget where you want it to be appear. (Side bar, Footer)

Now your visitors will be able to Subscribe and follow your blog easily by using that All in one social media subscription widget for blogger. 

That’s all. You are done it. Now enjoy All in one social media subscription widget for blogger and Enjoy your blogging
If you have any issue about All in one social media subscription widget for blogger, please comment below.



For more reading THEWONDERSPOT

........................................................................................................................................................................................................................
EMoneySpot  -  Earn with us..........................................................................................>>>
........................................................................................................................................................................................................................

 How to earn money online.......................................................................................>>>


 
Improve organic SEO rankings while EARN MONEY (0.05/0.10$) per view.......>>>

How to add all in one social media widget to blogger...................>>>

How to take screenshots in windows 10 : Different Methods?................................>>>

Free Bandwidth Monitoring Tools For windows PC?.............................................>>>

Abnormally high internet bandwidth usage, c-0001.c-msedge.net of window 10....................>>> 

How to Speed up Internet connection on Windows 10..............................................................>>>

How to Disable Automatic Updates in Microsoft Office 2016?.................................................>>>

How to Disable Automatic Updates in Microsoft Office 2016?..................................................>>>

How to Block Windows 10 "Spying"? ........................................................................................>>>

How to start a Blog?.....................................................................................................................>>>

How to Choose the Best Blogging Platform, advantages & disadvantage.................................>>>

How to make your blog SEO friendly?........................................................................................>>>


All in one SEO pack for Blogger blog.........................................................................................>>>

Thank you for reading.
Good Luck.

Don’t forgot to Subscribe us to get latest news letters and give your feedback in below comment section ;-) ;-)

0 comments:

Post a Comment

Thank you for visit us.
Give your feedback. Don't worry. Your email is safe with us.
Subscribe us to get latest news letters.

amazon

 
Copyright © The WonderSpot All Right Reserved
Powered by Blogger