OscarminiOscarmini
  • Home
  • Reviews
  • Gadgets
  • Computers
  • How Tos
  • Travel & Lifestyle
  • Phone ROMs
  • Contact us
    • Advertise
    • About Us
Facebook Twitter Instagram
  • Home
  • Reviews
  • Gadgets
  • Computers
  • How Tos
  • Travel & Lifestyle
  • Phone ROMs
  • Contact us
    • Advertise
    • About Us
Facebook Twitter Instagram
Oscarmini Oscarmini
Subscribe
  • Home
  • Reviews
  • Gadgets
  • Computers
  • How Tos
  • Travel & Lifestyle
  • Phone ROMs
  • Contact us
    • Advertise
    • About Us
OscarminiOscarmini
Home»Tip»Add All In One Social Media Widget By Mashable On Blogger

Add All In One Social Media Widget By Mashable On Blogger

Isaac FrankBy Isaac Frank4 Mins Read
Facebook Twitter WhatsApp LinkedIn Email
Share
Facebook Twitter LinkedIn WhatsApp Pinterest Email
Happy Midweek friend. Welcome today on The eTech Journal. Our Article Today will be On how to add all in one social media blogger widget.

This Widget Lets you put all your social media profile on one widget. It is powered by Mashable.

Adding This Widget wont take you more than 10 Minutes. Its soo easy to add. Just follow the steps below.

See the Photo Below For Demo

Step 1.
Goto your blogger Dashboard

Step 2.
Locate the Blog You Want To Add this widget to > Locate Layout > Add Gadget > HTML/JAVASCRIPT, Then Add The Below Code to it…

<style>
/* Social Widget */
#Etech-mashable-bar {
border: 0;
margin-bottom: 10px;
margin: 0 auto;
width:300px;
}
.fb-likebox {
background: #fff;
padding: 10px 10px 0 10px;
border: 1px solid #D8E6EB;
margin-top: -2px;
height:80px;
}
.googleplus {
background: #F5FCFE;
border-top: 1px solid #FFF;
border-bottom: 1px solid #ebebeb;
border-right: 1px solid #D8E6EB;
border-left: 1px solid #D8E6EB;
border-image: initial;
font-size: .90em;
font-family: “Arial”,”Helvetica”,sans-serif;
color: #000;
padding: 9px 11px;
line-height: 1px;}
.googleplus span {
color: #000;
font-size: 11px;
position: absolute;
display:inline-block;
margin: 9px 70px;}
.g-plusone { float: left;}
.twitter {
background: #EEF9FD;
padding: 10px;
border: 1px solid #C7DBE2;
border-top: 0;}
#mashable {
background: #EBEBEB;
border: 1px solid #CCC;
border-top: 1px solid white;
padding: 2px 8px 2px 3px;
text-align: right;
border-image: initial;}
#mashable .author-credit {}
#mashable .author-credit a {
font-size: 10px;
font-weight: bold;
text-shadow: 1px 1px white;
color: #1E598E;
text-decoration:none;}
#email-news-subscribe .email-box{
padding: 5px 10px;
font-family: “Arial”,”Helvetica”,sans-serif;
border-top: 0;
border-right: 1px solid #C7DBE2;
border-left: 1px solid #C7DBE2;
border-image: initial;
height:35px;}
#email-news-subscribe .email-box input.email{
background:#FFFFFF;
border: 1px solid #dedede;
color: #999;
padding: 7px 10px 8px 10px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius: 3px;
-ms-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
border-image: initial;
font-family: “Arial”,”Helvetica”,sans-serif;}
#email-news-subscribe .email-box input.email:focus{color:#333}
#email-news-subscribe .email-box input.subscribe{
background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FFCA00),color-stop(1,#FF9B00));
background: -moz-linear-gradient(center top,#FFCA00 0,#FF9B00 100%);
-pie-background: linear-gradient(270deg,#ffca00,#ff9b00);
font-family: “Arial”,”Helvetica”,sans-serif;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:1px solid #cc7c00;
color:white;
text-shadow:#d08d00 1px 1px 0;
padding:7px 14px;
margin-left:3px;
font-weight:bold;
font-size:12px;
cursor:pointer;
border-image: initial;}
#email-news-subscribe .email-box input.subscribe:hover{
background: #ff9b00;
background-image:-moz-linear-gradient(top,#ffda4d,#ff9b00);
background-image:-webkit-gradient(linear,left top,left bottom,from(#ffda4d),to(#ff9b00));
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);
outline:0;-moz-box-shadow:0 0 3px #999;
-webkit-box-shadow:0 0 3px #999;
box-shadow:0 0 3px #999
background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ffda4d),color-stop(1,#ff9b00));
background:-moz-linear-gradient(center top,#ffda4d 0,#ff9b00 100%);
-pie-background:linear-gradient(270deg,#ffda4d,#ff9b00);
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border:1px solid #cc7c00;
color:#FFFFFF;
text-shadow:#d08d00 1px 1px 0}
#other-social-bar {
background-color: #D8E6EB;
box-shadow: 0 1px 1px #FFFFFF inset;
padding: 0px;
font-family: “Arial”,”Helvetica”,sans-serif;
font-weight:bold;
overflow: hidden;
border: 1px solid #B6D0DA;
height:37px;
}
#other-social-bar ul {list-style: none outside none; padding-left: 4px;}
#other-social-bar .other-follow {
float: left;
color:#1E598E;
overflow: hidden;
height:20px;
padding:5px;
width: 270px;}
#other-social-bar .other-follow ul {
list-style: none outside none;
padding-left: 4px;}
#other-social-bar .other-follow ul li {
font-size: 12px;
font-weight: bold;
display:inline;
border:0;
text-shadow: 1px 1px white;}
#other-social-bar .other-follow ul li a {
font-size: 12px;
color:#1E598E;
font-weight: bold;
display:inline;
text-shadow: 1px 1px white;}
#other-social-bar .other-follow li {
font-size: 12px;
font-weight: bold;
display:inline;
border:0;
text-shadow: 1px 1px white;}
#other-social-bar .other-follow li a {
font-size: 12px;
color:#1E598E;
font-weight: bold;
display:inline;
text-shadow: 1px 1px white;}
#other-social-bar .other-follow li.my-rss {
background: url(‘http://3.bp.blogspot.com/-sR72SM_Wets/TwHZG9y4hXI/AAAAAAAAFv8/0bP2R3Qkl8c/s400/rss-16×16.png’) no-repeat transparent;
line-height: 1;
padding: 0px 3px 1px 20px;
width: 60px;
margin-bottom:0px;
margin-left:5px;}

#other-social-bar .other-follow li.my-rss a, #other-social-bar .other-follow li.my-linkedin a, #other-social-bar .other-follow li.my-gplus a{
text-decoration:none;
}

#other-social-bar .other-follow li.my-rss a:hover, #other-social-bar .other-follow li.my-linkedin a:hover, #other-social-bar .other-follow li.my-gplus a:hover{
text-decoration:underline;
}

#other-social-bar .other-follow li.my-linkedin {
background: url(‘http://4.bp.blogspot.com/-ht4UMG88lvM/TwHZFFgc-1I/AAAAAAAAFvs/BBmINSJhUsk/s400/linkedin-16×16.png’) no-repeat transparent;
line-height: 1;
padding: 0px 3px 1px 20px;
width: 60px;
margin-bottom:0px;}
#other-social-bar .other-follow li.my-gplus {
background: url(http://4.bp.blogspot.com/-cC729VpBxrk/TwHZE71ZgoI/AAAAAAAAFvk/_UMyIgA8vj8/s400/gplus-16×16.png) no-repeat transparent;
line-height: 1;
width: 60px;
padding: 0px 3px 1px 20px;
margin-bottom:0px;}

</style>

<!–[if IE]>

<style>
#email-news-subscribe .email-box input.subscribe{
background: #FFCA00;
}
</style>

<![endif]–>

<!–begin of social widget–>
<div style=”margin-bottom: 10px;”>
<div id=”Etech-mashable-bar”>
<!– Begin Widget –>
<div class=”fb-likebox”>
<!– Facebook –> <iframe frameborder=”0″ scrolling=”no” src=”//www.facebook.com/plugins/like.php?href=http://facebook.com/etechjournal&send=false&layout=standard& width=200px&show_faces=true&action=like&colorscheme=light&

font&height=100px&appId=234513819928295″ style=”border: none; overflow: hidden;”></iframe> </div>
<div class=”googleplus”>
<!– Google –> Recommend us
<div class=”g-plusone” data-size=”medium”>
</div>
<script src=”https://apis.google.com/js/plusone.js” type=”text/javascript”></script> </div>
<div class=”twitter”>
<!– Twitter –> <iframe class=”twitter-follow-button” frameborder=”0″ scrolling=”no” src=”http://platform.twitter.com/widgets/follow_button.html#_=1319978796351&

align=&button=blue&id=twitter_tweet_button_0&

lang=en&link_color=&screen_name=don4mula&show_count=&

show_screen_name=&text_color=” style=”height: 20px; width: 300px;” title=””></iframe> </div>
<div id=”email-news-subscribe”>
<!– Email Subscribe –>
<div class=”email-box” style=”background: #EDF4FF;”>

<form action=”http://feedburner.google.com/fb/a/mailverify” method=”post” onsubmit=”window.open(‘http://feedburner.google.com/fb/a/mailverify?uri=etecvilla‘, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520’);return true” target=”popupwindow”>
<input class=”email” id=”email” name=”email” onblur=”if(this.value==”)this.value=this.defaultValue;” onfocus=”if(this.value==this.defaultValue)this.value=”;” style=”font-size: 12px; width: 150px;” type=”text” value=”Enter Your Email here..” />
<input name=”uri” type=”hidden” value=”etecvilla” />
<input name=”loc” type=”hidden” value=”en_US” />
<input class=”subscribe” name=”commit” type=”submit” value=”Subscribe” /> </form>

</div>
</div>
<div id=”other-social-bar”>
<!– Other Social Bar –>
<ul class=”other-follow”>
<li class=”my-rss”> <a href=”http://feeds.feedburner.com/etecvilla” rel=”nofollow” target=”_blank” title=”RSS”>RSS Feed</a> </li>
<li class=”my-linkedin”> <a href=”#” rel=”author” target=”_blank” title=”linkedin”>linkedin</a> </li>
<li class=”my-gplus”> <a href=”https://plus.google.com/u/0/107825977061205403033” rel=”author” target=”_blank” title=”Google Plus”>Google Plus</a> </li>
</ul>
</div>
<div arial=”” helvetica=”” id=”mashable” sans-serif=”” style=”background: #EBEBEB; border-image: initial; border-top: 1px solid white; border: 1px solid #CCC; font-size: 10px; padding: 1px 8px 1px 3px; text-align: right;”>
<span class=”author-credit” style=”font-family: Arial, Helvetica, sans-serif;”><a href=”http://www.etechvilla.com/2013/08/add-all-in-one-social-media-widget-by.html”>Social Network Widget</a></span></div>
</div>

<!– End Widget –> </div>
<!–end of Etech social widget–>

After Pasting The above code in the Gadget Box, Edit The Texts in Black Background To Your own details. Save It. And View Your Blog.

#Conclusion: Over To You Boss!!! What do you think About this Post?? Do you have further clearifications? Feedbacks? Suggestions? Or Inquiry? Why Not Use The comment Box To Communicate With Us? We will be Happy If you Do.

blogger Blogger Widgets
Share. Facebook Twitter Pinterest LinkedIn Tumblr Email
Isaac Frank
  • Website

I'm a writer, blogger, tech enthusiast and simply a Geek!

Related Posts

How To Delete a Blog From Your Blogger Dashboard

March 3, 2015

How To Merge 2 or More Blogger Blogs – Multiple Blogs into 1

March 2, 2015

How To Embed & Resize A Youtube Video In Your Blog Post

February 11, 2015
Add A Comment

Comments are closed.

Latest Posts

Healthtracka Raises $1.5 Million for African Expansion

June 27, 2022

Tiwa Savage Becomes Tecno’s First Female Brand Ambassador

June 27, 2022

Telegram Hits 700 Million Monthly Users and Launches Premium Subscription

June 27, 2022

5 Best Cleaning Gadgets For Your Home In 2022

June 23, 2022
Oscarmini
Facebook Twitter Instagram YouTube
© 2022 Oscarmini Co. Designed by illBytes.

Type above and press Enter to search. Press Esc to cancel.