There is no doubt that this widget would add a new life to your website, and it would magnetize users to follow you on different social platforms. Though, it has awe-inspiring features, but we have listed the few key features below.
- It is extremely lightweight, and it would not affect your site speed.
- Use compact (12K, 3.2M) or full (12.000, 3.200.000) numbers.
- Reorder and incapacitate any of these networks which are suitable for your site.
- Full support for all foremost browsers i.e. Firefox, Internet explorer, Chrome, and etc.
How To Install All in One Social Subscription Box in Blogger?
Steps mentioned below are extremely straightforward and would soak 5 minutes to complete the integration. Remember: This widget would work on any platform that supports HTML. Therefore, we can also use it on WordPress, Jhoomla and etc.
Go to Blogger.com >> Template >> Edit HTML >> Proceed.
In the template search for ]]></b:skin> and just above it Paste the Following CSS Coding. There is no need to do any modification in the coding because it is universal and would automatically fit your layout. After pasting the CSS coding, Save your template and proceed to the next step.
/*
* MyBloggerLab.com All in one Social Subscription Box
* --------------------------------------------------------*/
div.socialbox-mbl,
div.socialbox-mbl ul,
div.socialbox-mbl ul li,
div.socialbox-mbl ul li p,
div.socialbox-mbl ul li img,
div.socialbox-mbl ul li p span,
div.socialbox-mbl ul li a{
background: none;
border: none;
font-style: normal;
font-weight: normal;
margin: 0;
padding: 0;
}
div.socialbox-mbl ul,
div.socialbox-mbl ul li{
list-style: none;
}
div.socialbox-mbl ul li a,
div.socialbox-mbl ul li img{
display: inline;
width: auto;
}
div.socialbox-mbl ul li a.socialbox-button{
text-align: center;
}
div.socialbox-mbl.mbl-classic{
color: #768a96;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
div.socialbox-mbl.mbl-classic ul{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTmSi2klIRGic08JMXLfQu-Xpg3g2u1vWs4HLHk_RJu9emkpbRQVeY2D5rPjuc9ftlo6X0xQAGoRMu-pm3qArLQ7OdB7AYpbLOuHKUtENs3GZZqgK4SfKN87re6wKkjTKSv9WkO_ya1kw/s1600/classic- background.png) repeat;
border: 1px solid #d8dcdf !important;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0px 2px 4px #dfe4e7;
-moz-box-shadow: 0px 2px 4px #dfe4e7;
box-shadow: 0px 2px 4px #dfe4e7;
margin: 0 !important;
padding: 0;
}
div.socialbox-mbl.mbl-classic ul li{
background-image: none;
border-bottom: 1px solid #d8dcdf;
height: 40px;
overflow: hidden;
padding: 19px 9px 0 9px;
}
div.socialbox-mbl.mbl-classic ul li:last-child{
border-bottom: none;
}
div.socialbox-mbl.mbl-classic ul li img{
border: none;
margin-right: 10px;
float: left;
}
div.socialbox-mbl.mbl-classic ul li p{
display: inline;
position: relative;
top : -3px;
}
div.socialbox-mbl.mbl-classic ul li p span{
color: #425763;
font-weight: bold;
}
div.socialbox-mbl.mbl-classic ul li a.socialbox-button{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5o1XJ_42cIQhDSJk2qAvbS9FgdYnhN97kbdQ_KxKe6yRCh0Mgi2anTf08XDYYX1XjE0nw9cFrsp6ItmloWd3-BMPKy3QBkXxmX3iZDCWMKSMHns-SZfX4pBmAIgpwzICJb6Grqjvohdk/s1600/classic- button.png) no-repeat;
border: 1px solid #d8dcdf;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
color: #425763;
float: right;
font-size: 11px;
font-weight: bold;
line-height: 11px;
padding: 6px 10px;
position: relative;
text-decoration: none;
text-transform: uppercase;
top: -4px;
}
div.socialbox-mbl.mbl-classic ul li a.socialbox-button:hover{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5o1XJ_42cIQhDSJk2qAvbS9FgdYnhN97kbdQ_KxKe6yRCh0Mgi2anTf08XDYYX1XjE0nw9cFrsp6ItmloWd3-BMPKy3QBkXxmX3iZDCWMKSMHns-SZfX4pBmAIgpwzICJb6Grqjvohdk/s1600/classic- button.png) 0 -27px no-repeat;
}
div.socialbox-mbl.mbl-classic ul li a.socialbox-button:active{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5o1XJ_42cIQhDSJk2qAvbS9FgdYnhN97kbdQ_KxKe6yRCh0Mgi2anTf08XDYYX1XjE0nw9cFrsp6ItmloWd3-BMPKy3QBkXxmX3iZDCWMKSMHns-SZfX4pBmAIgpwzICJb6Grqjvohdk/s1600/classic- button.png) 0 -54px no-repeat;
}
How To Add All in One Social Subscription Box in Blogger?
Go to Blogger >> Layout >> Add a Gadget.
From the List Select Add HTML/JavaScript and in the Text Box paste the following HTML Coding. To Reduce the widget of the Social Box Replace 300px according to your desire needs.
<!-- E-ideamart.blogspot.com All in one Social Subscription Box --><div class="socialbox-mbl mbl-classic" style="width: 300px !important"><ul><li><a href="http://www.facebook.com/Eideamart" title="Like on Facebook" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikabQ1Pc9jNeZ0O5LiJcPfKiiD-FAmGeBFOjfXJXhjwUAWJ7JZvyPoCl1OOWdHbW3VwJKXTfZcpsgqbwVLz3Mig_l0fNjtt1TmZ5kst7DWgEyTyaKqg-JDd6PJWTYi7_awyJJ-UC1DITw/s1600/faceboo k_16.png" alt="Facebook" /></a><p><span>3500</span> Fans</p><a href="http://www.facebook.com/eideamart" class="socialbox-button" rel="nofollow" title="Like on Facebook" target="_blank">Like</a></li><li><a href="http://twitter.com/saadahmads" title="Follow on Twitter" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRGDA5RAK3EP3p8AQHEEtFzPhehSul84GTQS2igNNlCfnvjMz-0kQvoe7nDqAoAVl_vI_J2ZCwvJEZyjkETu6hX1zqS_8yMp4pf9Xb1Zl5FcxwZR7bnL6tvu_4PyIY2sqhYOwE88yFaGc/s1600/twitter .png" alt="Twitter" /></a><p><span>3000</span> Followers</p><a href="http://twitter.com/saadahmads" class="socialbox-button" rel="nofollow" title="Follow on Twitter" target="_blank" >Follow</a></li><li><a href="#" title="Subscribe to Youtube Channel" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMowbiBsrssA3Zi1arQ7OIAUzg7wt0v4rtH4sbjgDdSq8oh5Mitxx8BUE_XV2T3w4qx7g3JTHQEoX_xXCm4ifFqmILyxBpPAXNHb_CEP1cIKeFxoCsjJOVuLY_3F3dzfsC3FtwjKHrABM/s1600/youtube _16.png" alt="YouTube" /></a><p><span>400</span> Subscribers</p><a href="#" rel="nofollow" class="socialbox-button" title="Subscribe to Youtube Channel" target="_blank" >Subscribe</a></li><li><a href="http://pinterest.com/----------" title="Follow on Pinterest" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIisq1FaVx2UJqBCopmGkg18b5wVKOmecusD72kIg1pERu43jhq42NDddmzLMk-cJyhEjFJV5LexrPt72lDt9_0qV-Kzl1sW3yXOjE0LEgHoJ53UPfHkFdWAF2X-h9PgVRAIJ4o7GgS30/s1600/Pintere stmbl.png" alt="Pinterest" /></a><p><span>200</span> Followers</p><a href="http://pinterest.com/---------" rel="nofollow" class="socialbox-butto n" title="Follow on Pinterest" target="_blank" >Follow</a></li><li><a href="https://plus.google.com/u/0/101845370194687634858" title="Follow on Google+" rel="nofollow" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNTvHavG_jigNzdxzDzWGgjiYobRLEyUTCSKz5nd1Qhhu9ad29g_LgiNg63EtV53hiKmWP1u1qJxhEoYecIVF9yQsZn0M-k2T74NOUTdQgtWeK-oiM6i7IkAkl76onaWU3E-7ZmrHXiIc/s1600/Googlep lusmbl.png" alt="Google+" /></a><p><span>1000</span> Followers</p><a href="https://plus.google.com/u/0/101845370194687634858" rel="nofollow" clas s="socialbox-button" title="Follow on Google+" target="_blank" >Follow</a></li></ul></div><!-- End -->
All Done: After customizing the Gadget according to your desire needs, just Save the Gadget. Now go and check your site, we are sure it would not let you down. Feel free to leave your comments and suggestions would be more than welcomed.
0 comments:
Post a Comment