Spider Blogging - The Ultimate Blogging Solution

Home
Blogger

How To Create Most UseFul Social Widgets in Blogger | Spider Blogging

Create Beautiful Social Widgets in Blogger and store all your visitors in Social Media and Stay Connected With them.

 Hello Guys Welcome to Spider Blogging , In this Post I will Share Some Useful Blogger Widgets , From that you can increase your followers in Social Media like Facebook, Telegram , etc...


How To Create Most UseFul Social Widgets in Blogger | Spider Bloging
How To Create Most Usefull Social Widgets in Blogger 


I can hardly say these widgets are useful Social widgets 2021. Every blogger knows that we can't add any widgets or plugins like WordPress. We have to need to add any blogger widgets or plugins manually.

Some people are always looking for beautiful and essential Social widgets for his/her blog. So Today in this post am Sharing 5 Social Media Widgets. I hope that these blogger widgets are may helpful for you and its absolutely free widgets.

Before starting this tutorial, please take a backup of your template for safety

Resposive Join Us Telegram Widget

Join US Telegram is Responsive Widget made by the editing of some code from jago desian, Its look is very attractive and cool.

Go to Blogger Dashboard > Template > Edit HTML and past below code before </style>
/*Telegram Widget by Spider Blogging*/
.penawaran1{position:relative;display:flex;align-items:center;width:100%;background-color:#fefefe;margin:15px 0 0;padding:12px 15px;border:1px solid #ebeced;border-radius:3px;color:#161617;overflow:hidden}
.penawaran1 .penawaran1-img{width:50px;height:50px}
.penawaran1 .penawaran1-img span{display:flex;align-items:center;justify-content:center;height:100%;background-color:#ebeced;border-radius:8px;color:#505050;font-weight:700;font-size:28px}
.penawaran1 .penawaran1-content{width:calc(100% - 50px);padding-right:15px}
.penawaran1 .penawaran1-content .title{display:block;font-weight:700;font-size:12px;margin:0}
.penawaran1 .penawaran1-content .desc{display:block;font-size:11px;margin-top:2px;color:#505050}
.penawaran1.fletro{border:0;background-color:#CFEDEB;box-shadow:0 4px 18px 0 rgba(9,32,76,.035);justify-content:space-between;padding:0;overflow:visible}
.penawaran1.fletro .penawaran1-content{width:calc(100% - 100px);padding:15px 10px 15px 15px}
.penawaran1.fletro .penawaran1-img{width:100px;height:auto;flex-shrink:0}
.penawaran1.fletro .penawaran1-img img{position:absolute;bottom:0;right:0;max-width:110px}
.penawaran1.discount:after{content:&#39;Join&#39;;font-weight:700;font-size:12px;display:flex;align-items:center;justify-content:flex-end;width:55px;height:25px;padding-right:10px;background-color:#fdd929;border-radius:80px 0 0 0;color:#505050;position:absolute;bottom:0;right:0}
.dark-mode .penawaran1{color:#161617}
.night-mode .penawaran1{color:#f7f7f7;background-color:#202442; border: 1px solid #edeef0}
.night-mode .penawaran1 .penawaran1-img span{background-color:#003366}

Now Save Template.

Go to Layout > Add a gadget > HTML/Javascript and past below code.
<a class='penawaran1 discount dis-31' href='https://telegram.me/SpiderBlogging' target='_blank'>
<div class='penawaran1-content'>
<span class='title'>Join our Telegram Channel</span>
<span class='desc'>To Get Latest Notification!</span>
</div>
<div class='penawaran1-img'><span><svg enable-background='new 0 0 24 24' height='512' viewbox='0 0 24 24' width='512' xmlns='http://www.w3.org/2000/svg'><path d='m9.417 15.181-.397 5.584c.568 0 .814-.244 1.109-.537l2.663-2.545 5.518 4.041c1.012.564 1.725.267 1.998-.931l3.622-16.972.001-.001c.321-1.496-.541-2.081-1.527-1.714l-21.29 8.151c-1.453.564-1.431 1.374-.247 1.741l5.443 1.693 12.643-7.911c.595-.394 1.136-.176.691.218z' fill='#039be5'/></svg></span></div>
</a>



Popup Facebook Like Box Widget.

Pop up Facebook like box is the most trending widget nowadays. Popup Facebook like box widget for blogger may increase your blog traffic. Targeted visitors are the most important of any blog. Retention blog visitors more and more important.


Targeted visitors are most important of any blog. Retention blog visitors more and more important. If you want to increase your facebook like then should promote your page in your blog with your blog's users. Then you will get more like from your users who visit your blog. Adding the pop up like box is most essential for get more like. So today i am gonna to share a tutorial about pop up facebook like box for blogger.

Go to Blogger Dashboard > Template > Edit HTML and past below code before </style>
/* CSS Popup Like box by www.spiderblogging.in */
.mspopup{position:fixed;top:0;left:0;right:0;bottom:0;z-index:90000;background:rgba(0,0,0,.6);overflow-x:hidden;overflow-y:auto;display:none}
.mspopup-container{background:#fff url(http://i.imgur.com/2twQjiN.gif) no-repeat 50% 50%;padding:0;font-size:14px;height:236px;position:fixed;top:50%;left:50%;z-index:90001;-webkit-box-shadow:0 0 15px 0 rgba(50,50,50,0.8);transform:translateY(-50%) translateX(-50%)}
.mspopup .mspopup-close{position:absolute;top:9px;right:20px;font-weight:700;font-family:Verdana;font-size:18px;cursor:pointer;color:#fff}
.mspopup .mspopup-close:hover{color:#535353}
.mspopup .mspopup-header{font-size:20px;padding:10px;text-align:center;color:#fff;font-family:Open Sans;background-color:#3B5998;text-shadow:1px 2px 4px #838383}
.mspopup .mspopup-header p{font-size:10px;padding:0;margin:0;font-weight:400;text-transform:initial}
.mspopup .mspopup-content{padding:10px 20px}

Now paste below code before </body>  tag 


 <script src='https://cdn.rawgit.com/msdesign92/ms-design/master/mspopup.js' type='text/javascript'/>
<script type='text/javascript'>
  $(&#39;#popup-box&#39;).mspopup({
  &#39;autoOpen&#39;: true
});
        </script>

Now Save Template.

 Step3: Go to Layout > Add a gadget > HTML/Javascript and past below code.
<div id="popup-box" class="mspopup">
  <div class="mspopup-container">
      <div class="mspopup-header">
          <div class="mspopup-close" data-dismiss="mspopup">x</div>
         Like us and Join with our community
<p> Get our all latest update from our facebook page, Its free and speedy</p>
      </div>
<div class="mspopup-content">
     <div class="fb-page" data-href="https://www.facebook.com/spiderblogging.rtml" data-width="400" data-height="300" data-small-header="true" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="true" data-show-posts="false"><div class="fb-xfbml-parse-ignore"></div></div>
      </div>
  </div>
</div>


Note: Change spiderblogging.rtml with your facebook page username.

Nicer Social icons Widget

This is an easiest way to promote your social media links with your targeted users. If you make widget in top with these social icons, then a user see these social icons easily. If you can connect your targeted users with your social links, like: Facebook, Twitter, Google plus then you should easily increase your visitors.



Now Go to Blogger Dashboard > Template > Edit HTML and past the below CSS Code before </style>
 .icon {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  margin: 4px;
  width: 92px;
  height: 96px;
  font-size: 0;
  text-indent: -9999px;
  background-color: #404040;
}

.icon-border {
  position: relative;
}

.icon-border::before,
.icon-border::after {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: &quot;&quot;;
}

.icon-border::before {
  z-index: 1;
  -webkit-transition: box-shadow 0.3s;
          transition: box-shadow 0.3s;
}

.icon-border::after {
  z-index: 2;
  background: url(&quot;http://i.imgur.com/gOZiqfy.png&quot;);
  background-image: url(&quot;http://callmenick.com/_development/icons-css3-transitions/img/icons4.svg&quot;), none;
}

/* facebook */
.icon-border.facebook::before {
  box-shadow: inset 0 0 0 48px #3b5998;
}

.icon-border.facebook:hover::before {
  box-shadow: inset 0 0 0 4px #3b5998;
}

.icon-border.facebook::after {
  background-position: 0 0;
}

/* twitter */
.icon-border.twitter::before {
  box-shadow: inset 0 0 0 48px #4099ff;
}

.icon-border.twitter:hover::before {
  box-shadow: inset 0 0 0 4px #4099ff;
}

.icon-border.twitter::after {
  background-position: -96px 0;
}

/* google plus */
.icon-border.googleplus::before {
  box-shadow: inset 0 0 0 48px #d34836;
}

.icon-border.googleplus:hover::before {
  box-shadow: inset 0 0 0 4px #d34836;
}

.icon-border.googleplus::after {
  background-position: -192px 0;
}


Now Save Template.

After that, Go to Layout> Add a gadget > HTML/Javascript past below code and edit all # tag with your social links.
<a href="#" class="icon icon-border facebook">facebook</a>
<a href="#" class="icon icon-border twitter">twitter</a>
<a href="#" class="icon icon-border googleplus">google+</a>
Reference: http://callmenick.com/post/nicer-icon-hover-effects-with-css3-transitions

Social icons with text counter



This is a beautiful and responsive fontawesome social media icons for blogspot blogger. By using this fontawesome social icon you can add Facebook, Twitter, Pinterest, Instagram, Google Plus, Linkedin, Flickr and Vine social icons on blogger sidebar. In this widget most interesting thing is, you can add social counter with your own like facebook like, twitter followers, pinterest people, instagram followers, google plus people, linkedin fans, flickr followers and vine people.




To add this widget on your blog firstly go to Blogger Dashboard > Template > Edit HTML and find past below CSS Code before </style> tag.

 /*================= CSS Social Icons Widget by spiderblogging =====================*/
.widget_social_apps{margin-left:-.5%;margin-right:-.5%}.widget_social_apps:before,.widget_social_apps:after{content:&quot; &quot;;display:table}.widget_social_apps:after{clear:both}.widget_social_apps .app_social{margin:0 .5% .5%;width:24%;float:left;text-align:center;background-color:#111;-webkit-transition:all .2s;-moz-transition:all .2s;-o-transition:all .2s;transition:all .2s}.widget_social_apps .app_social.facebook{background-color:#3e64ad}.widget_social_apps .app_social.twitter{background-color:#58ccff}.widget_social_apps .app_social.pinterest{background-color:#de010d}.widget_social_apps .app_social.instagram{background-color:#125688}.widget_social_apps .app_social.google{background-color:#dd4b39}.widget_social_apps .app_social.linkedin{background-color:#007bb6}.widget_social_apps .app_social.flickr{background-color:#ff0084}.widget_social_apps .app_social.vine{background-color:#00bf8f}.widget_social_apps .app_social:hover{background-color:#111}.widget_social_apps .app_social a{display:block;color:#fff;padding:15px 5px}.widget_social_apps .app_social span{display:block}.widget_social_apps .app_social span.app_icon i{font-size:24px;margin-bottom:5px}.widget_social_apps .app_social span.app_count{font-weight:700;line-height:16px}.widget_social_apps .app_social span.app_type{font-size:14px;line-height:16px}


Save Template.

Now go to Layout > Add a gadget > HTML/Javascript and below HTML and Save widget.
 <div class="widget_social_apps">
<div class="app_social facebook">
<a href="https://www.facebook.com/" target="_blank">
<span class="app_icon"><i class="fa fa-facebook"></i></span>
<span class="app_count">7845</span> <span class="app_type">Fans</span> </a></div>
<div class="app_social twitter">
<a href="https://www.twitter.com/" target="_blank">
<span class="app_icon"><i class="fa fa-twitter"></i></span>
<span class="app_count">32</span>
<span class="app_type">Followers</span>
</a></div>
<div class="app_social pinterest">
<a href="https://www.pinterest.com/" target="_blank">
<span class="app_icon"><i class="fa fa-pinterest"></i></span>
<span class="app_count">4774</span> <span class="app_type">People</span> </a></div>
<div class="app_social instagram">
<a href="https://www.instagram.com/" target="_blank">
<span class="app_icon"><i class="fa fa-instagram"></i></span>
<span class="app_count">65684</span> <span class="app_type">Followers</span> </a></div>
<div class="app_social google">
<a href="https://www.google.com/" target="_blank">
<span class="app_icon"><i class="fa fa-google-plus"></i></span>
<span class="app_count">65684</span> <span class="app_type">People</span> </a></div>
<div class="app_social linkedin">
<a href="https://www.linkedin.com/" target="_blank">
<span class="app_icon"><i class="fa fa-linkedin"></i></span>
<span class="app_count">65684</span> <span class="app_type">Fans</span> </a></div>
<div class="app_social flickr">
<a href="https://www.flickr.com/" target="_blank">
<span class="app_icon"><i class="fa fa-flickr"></i></span>
<span class="app_count">44</span>
<span class="app_type">Followers</span>
</a></div>
<div class="app_social vine">
<a href="https://www.vine.com/" target="_blank">
<span class="app_icon"><i class="fa fa-vine"></i></span> <span class="app_count">574</span> <span class="app_type">People</span> </a></div>
</div>

Customization: 
USER_Name:  Its your social media links. Change all USER_Name with your social media links.
app_count: This is social media counter. Change all count number with your own social count.


Simple Social Media Icons with hover effect

This is a simple one line social icons widget for blogger that first time used on our magazine blogger template. If you looking for a simple css and hover effect social networks icon for website of blog, then this widget is for you. This widget also created using font awesome icons and css. In this widget you can display 4 icon and these are, Facebook icon, Twitter icon, Pinterest icon and Google plus icon. 


To add this widget on your blog firstly go to Blogger Dashboard > Template > Edit HTML and find past below CSS Code before </style> tag.
 .widget_social_apps{margin-left:-.5%;margin-right:-.5%}.widget_social_apps:before,.widget_social_apps:after{content:&quot; &quot;;display:table}.widget_social_apps:after{clear:both}.widget_social_apps .app_social{margin:0 .5% .5%;width:24%;float:left;text-align:center;background-color:#111;-webkit-transition:all .2s;-moz-transition:all .2s;-o-transition:all .2s;transition:all .2s}.widget_social_apps .app_social.facebook{background-color:#3e64ad}.widget_social_apps .app_social.twitter{background-color:#58ccff}.widget_social_apps .app_social.pinterest{background-color:#de010d}.widget_social_apps .app_social.instagram{background-color:#125688}.widget_social_apps .app_social.google{background-color:#dd4b39}.widget_social_apps .app_social.linkedin{background-color:#007bb6}.widget_social_apps .app_social.flickr{background-color:#ff0084}.widget_social_apps .app_social.vine{background-color:#00bf8f}.widget_social_apps .app_social:hover{background-color:#111}.widget_social_apps .app_social a{display:block;color:#fff!important;padding:15px 5px}.widget_social_apps .app_social span{display:block}.widget_social_apps .app_social span.app_icon i{font-size:24px;margin-bottom:5px}.widget_social_apps .app_social span.app_count{font-weight:700;line-height:16px}.widget_social_apps .app_social span.app_type{font-size:14px;line-height:16px}

Save Template.

Now go to Layout > Add a gadget > HTML/Javascript and below HTML and Save widget.
 <div class="widget_social_apps">
<div class="
facebook">
<a href="https://www.facebook.com/USER_NAME" target="_blank">
<span class="app_icon"><i class="fa fa-facebook"></i></span>
</a></div>
<div class="app_social twitter">
<a href="https://www.twitter.com/USER_NAME" target="_blank">
<span class="app_icon"><i class="fa fa-twitter"></i></span>
</a></div>
<div class="app_social pinterest">
<a href="https://www.pinterest.com/USER_NAME" target="_blank">
<span class="app_icon"><i class="fa fa-pinterest"></i></span>
</a></div>
<div class="app_social google">
<a href="https://www.google.com/USER_NAME" target="_blank">
<span class="app_icon"><i class="fa fa-google-plus"></i></span>
</a></div>
</div>

Customization:
Change all USER_NAME with your own social media links.

Animated Social Share Button with CSS

Animated Social Share Button For Blogger with CSS - is a share button that is make your blog more attractive. If you search for share button on internet, then you found many results like Adthis, Share This, Simple Share button, Addtoany etc share button for blogger. Those are mostly helpful and workable.


Go to blogger dashboard > Template > Edit HTML and find </style>
Copy and past below CSS Code before </style>
 /* Share Button */
.post-footer{margin-top:30px;}
.share-post, .multiauthor-box {margin-bottom:50px;}
.share-post ul {padding:0;margin:0;text-align:center;}
.share-post li{list-style:none;display:inline-block;margin-right:10px;padding:0;font-weight:700;text-transform:uppercase}
.share-post li:first-child {font-size:16px;color:#22a1c4;}
.share-post li a{display:block;text-align:center;}
.share-post span{display:none;}
.share-post li a i{display:block;color:#fff;width:40px;height:40px;line-height:40px;font-size:18px;border-radius:40px;font-weight:normal;transition:all .3s;}
.share-post{margin-bottom:30px;border-top:1px solid #eff0f0;border-bottom:1px solid #eff0f0;line-height:52px;min-height:52px;margin-left:-30px;margin-right:-30px}
.share-post li a i.fa.fa-facebook{background:#3b5998;border:1px solid transparent;}
.share-post li a i.fa.fa-twitter{background:#19bfe5;border:1px solid transparent;}
.share-post li a i.fa.fa-google-plus{background:#d64136;border:1px solid transparent;}
.share-post li a i.fa.fa-linkedin{background:#006699;border:1px solid transparent;}
.share-post li a i.fa.fa-pinterest{background:#cb2027;border:1px solid transparent;}
.share-post li a i.fa.fa-facebook:hover{background:#fff;color:#3b5998;border:1px solid #4666aa;}
.share-post li a i.fa.fa-twitter:hover{background:#fff;color:#19bfe5;border:1px solid #2acef4;}
.share-post li a i.fa.fa-google-plus:hover{background:#fff;color:#d64136;border:1px solid #e95247;}
.share-post li a i.fa.fa-linkedin:hover{background:#fff;color:#006699;border:1px solid #017ab6;}
.share-post li a i.fa.fa-pinterest:hover{background:#fff;color:#cb2027;border:1px solid #e33239;}


Now Put the below code where you want to show your share buttons. Basically you should put the share buttons are after <data:post.body/> sections.
<div class='share-post'>
<ul class='entry-share-list clearfix'>
<li>Share This</li>
<li class='facebook_share'>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-facebook'/> </a>
</li>
<li class='twitter_share'>
<a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a>
</li>
<li class='google_share'>
<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a>
</li>
<li class='linkedin_share'>
<a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-linkedin'/></a>
</li>
<li><a expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description=&quot; + data:post.snippet' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow'><i class='fa fa-pinterest'/></a></li>
</ul>
</div>

Now save the template and see the result.

Note that, Font-awesome must be added in your template. Otherwise social icons are may not shown. If not added then copy the below script and past before </head> tag.
<script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,700,300");loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css");
//]]>
</script>

Hope You liked above widgets , If You Getting Any Error feel free to mention it in Comment Box. Thank You.
Code source: Internet & msd blog