Show Mobile Navigation
,

Add a Black Mini-Mag Social Subscription Widget in Blogger

Hemant Verma - 11:22 PM
Hello frnds, We are doing awesome here hope you all also doing awesome in your life. Do also one thing with awesomeness that install Widget Generator's Widgets in your blogs :) and make your blog like a pro.
We are here with a new widget the widget is very simply and not unique but some where very simple and very effective that must be increase your social fans and also might be increase your popularity in blogging world.

This widget is simply made by the CSS and HTML and there would be no problem to install it in blogger.

Black Mini Mag Widget


Install Black Mini-Mag Widget

Follow below steps carefully to add it successfully.
  • Login to Blogger > Dashboard
  • Click on Drop Down Menu and select Layout
  • Add a HTML/JavaScript Gadget
  • Paste below code in it.
<style type="text/css">
.wg-roumash{
padding:10px;
margin:auto;
width: 100%;
height:60px;
}

.wg-roubbb{
background: #000;
}

.wg-roubbb{
width:44px;
height:44px;
border-radius:10000px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
cursor:pointer;
float:left;
margin-right:5px;
}
.wg-roubbb:hover{
background:#ddd;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
.wg-roubbb img{
padding-top:5px;padding-left:5px;
}

#wg-mashmini {
width:100%;
margin:auto;
padding:0px;
}

.wg-mashmnbx {
background-color:#000;
border:1px solid #fff;
border-top:1px solid #fff;
overflow:hidden;
padding:12px 16px;
}

.wg-mashmnbx form {
width:100%;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
border:0;
}

.wg-mashmnbx input.emailu {
float:left;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
border:0;
color:#999;
width:100%;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
font-size:13px;
padding:7px 10px 8px;
}

.wg-mashmnbx input.submitu {
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
color:#000;
font-weight:700;
font-size:12px;
float:right;
cursor:pointer;
padding:7px 14px;
}

.wg-mashmnbx input.submitu:hover {
text-decoration:none;
}

.wg-bttnwht {
border:1px solid #fff;
text-shadow:1px 1px 0 #fff;
background-color:#fff;
}

.wg-bttnwht:hover {
background-color:#DCDCDC;
}
</style>

<div class='wg-roumash'>
<div class='wg-roubbb'><a href='http://www.facebook.com/#' target='_blank'><img border='0' src='http://1.bp.blogspot.com/-H38kJ5PSU-k/Uin2qt9WW0I/AAAAAAAAAP8/W5Wmpt42xwY/s1600/facebook.png'/></a></div>

<div class='wg-roubbb'><a href='http://www.twitter.com/#' target='_blank'><img border='0' src='http://2.bp.blogspot.com/-B3UXsAyQbdw/Uin2scG5PKI/AAAAAAAAAQU/zcSj3UljGCw/s1600/twitter.png'/></a></div>

<div class='wg-roubbb'><a href='http://www.plus.google.com/#' target='_blank'><img border='0' src='http://3.bp.blogspot.com/--Pp4ZjOu4Ew/Uin2qgGT5zI/AAAAAAAAAP4/sMX3HGgzctE/s1600/google+.png'/></a></div>

<div class='wg-roubbb'><a href='http://www.youtube.com/#' target='_blank'><img border='0' src='http://3.bp.blogspot.com/-2KJ18EdFkdM/Uin2sS-cP1I/AAAAAAAAAQQ/7Vv8-WQWRQo/s1600/youtube.png'/></a></div>
<div class='wg-roubbb'><a href='http://www.youtube.com/#' target='_blank'><img border='0' src='http://2.bp.blogspot.com/-aVX-dCRSr-A/Uin2qzynvOI/AAAAAAAAAQI/l-Mn8lg6sPs/s1600/rss.png'/></a></div>
</div>

    <div id="wg-mashmini">

    <div class="wg-mashmnbx">
        <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=#', 'popupwindow', 'scrollbars=yes,width=550,height=520'); return true" target="popupwindow">
        <table width="100%">
            <tr>
            <td>
                <input class="emailu" name="email" placeholder="Enter your email" type="text"/>
            </td>
            <td width="64px">
                <input class="submitu wg-bttnwht" type="submit" value="Subscribe"/>
            </td>
            </tr>
        </table>
        <input name="uri" type="hidden" value="#"/>
        <input name="loc" type="hidden" value="en_US"/>
        </form>
    </div>
 
    </div>



  • Now, Save Your Widget.

Make Changes....!


Do some changes before save your widget.

  • Replace # with the usernames of all social networks.

2 comments:

  1. finally got this post. thanks dude to provide us cool widgets

    ReplyDelete
  2. hey in my blog this widget has been repeating for six times please fix this

    ReplyDelete

You may use these HTML tags and attributes: <a href="" title=""> </a> <b> </b><strong> </strong>

 



Make Your Blog Like a Pro
About | Contact | Affiliates | Privacy Policy | TOS