This way they not only stay in touch with their users, but also it provides a quick and easy way to promote your posts or products. People won’t visit your website that often as they use their social media accounts.
We also want a minimalist, simple and catches the eye, but awesome social media subscription widget and finally we are done..!! The widget originally made by dynamic drive, we have just customized version of it and i hope you really like it's awesome look. This widget is simply a copy-paste tool that can be installed within seconds. So lets start the tutorial you can also see the demo by clicking on the below preview button.
Check Also
Add It to blogger
Step. 1
- Go to Template > Edit HTML and click anywhere inside the HTML editor.
Press Ctrl+F (Cmd+F in Mac), and a search box should appear in the upper right corner of the editor. - Type or paste the following code in search box and hit enter.
</b:skin>
Add the following CSS Code in the b:skin section of your template.
ul.flatflipbuttons{
position:fixed;
padding:0 0 3px 0;
bottom: 22%;
margin-left:0px;
float:left;
list-style:none;
-webkit-perspective: 10000px; /* larger the value, the less pronounced the 3D effect */
-moz-perspective: 10000px;
perspective: 10000px;
}ul.flatflipbuttons li{
margin:0;
display: block;
width: 25px; /* dimensions of buttons. */
height: 25px;
margin-bottom: 39px; /* spacing between buttons */
background: transparent;
text-transform: uppercase;
text-align: center;
}ul.flatflipbuttons li a{
display:table;
font: bold 36px Arial; /* font size, pertains to icon fonts specifically */
width: 100%;
height: 100%;
color: black;
background: transparent;
text-decoration: none;
outline: none;
-webkit-transition:all 300ms ease-out; /* CSS3 transition. */
-moz-transition:all 300ms ease-out;
transition:all 300ms ease-out;
}ul.flatflipbuttons li a span{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
-webkit-transition: all 300ms ease-out; /* CSS3 transition. */
-moz-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}ul.flatflipbuttons li a img{ /* CSS for image if defined inside button */
border-width: 0;
vertical-align: middle;
}ul.flatflipbuttons li:hover a{
-webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
background: transparent; /* bgcolor of button onMouseover*/
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}ul.flatflipbuttons li:hover a span{
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg); /* flip horizontally 180deg*/
transform: rotateY(180deg);
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
transition-delay: 0.2s;
}
Step. 2
- Go to Template > Edit HTML and click anywhere inside the HTML editor.
Press Ctrl+F (Cmd+F in Mac), and a search box should appear in the upper right corner of the editor. - Type or paste the following code in search box and hit enter.
</body>
- and paste the follwing code before/above "</body>"
<ul class='flatflipbuttons second'>
<li><a href='https://www.facebook.com/mybloggerstricks'><span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXe-Bbzoi7qo_QCOO5nN2arCXyrC0p8g_JwFqnPpEthTO2BPB8e3d7gonmpWc8jwbBAx9x-r9hQ6U4smUqS3Y5WihPN1Ujx_2pqoa4sXOe3kNnS1FFC9htYssT8k4TKSah1PY41jdFCv53/s1600/facebook.png'/></span></a></li>
<li><a href='http://twitter.com/mybloggertriks'><span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg5Db-zwzkHWNdEBDS6nFPit7qJrU9d23IMimznSP5_G2gvSN0_fIzjaEcpNdfuNIUeG-UxYGEKKRPkpor8qKKsO1g4gnkndlnzi6G-GP1XPCcv1q52ynReVW_9z9_r6ZDosZZYO8N9u2a/s1600/twitter.png'/></span></a></li>
<li><a href='https://plus.google.com/b/103598710564060829080'><span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXoG3x3EXi6hgOD-e01-in8xnrchCFjzC6im_tsCs3e3jHCZwwVyVZZLCuCV49GLb7tZW-WoPK7cMSqsA5_B2NkZbjUtZYw87o-sat3zavjM-3EmD-5A1Ch0R8U-mdnLdi2I6FtYCzzCRP/s1600/googleplus.png'/></span></a></li>
<li><a href='http://www.pinterest.com/mybloggertrickx'><span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh1Tv9aRRdGEyU0jUrxEjWCH8yIH9VsiivZQgl0L9KZOFDiSUuhTkhybiDYxeZKF8j7h4ghO4WJvT1XsR3aAKyn7CEg9W88XrN3aQAtP1RxtSm-P5VgK0QPh9UQS8780LURpQgPSZ-8TFE/s1600/pinterest.png'/></span></a></li>
<li><a href='http://feeds.feedburner.com/mybloggerstrick'><span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg096yfzywrQFhhWV9Z3O1mSIkE2H1oIpWZh6x409pXUS1fDL2O7wuAGjDsYt2_OIKQoDDfWTIcpZaOBQN51-Y6kWSEOpFijKhCWh8M4_9dZHrrLeTH6X5RGBE4r8Qt8-5rByWcxs3t3D9-/s1600/rss.png'/></span></a></li>
<li><a href='http://www.youtube.com/user'><span><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6m1te-OM74SsYVF5orsjKEmRFWV6GrUr8pwQIsiaJBN4DzbBGaty35mtvE9rOC7qwGb5qSrc7gklsobUDxx7zuikBBaDzOb_Jm-5jJffywA2lSw5J9IlTE7926_PHMixaHXa3e63z_0MM/s1600/youtube.png'/></span></a></li></ul>
Customization
- Replace the highlighted links in yellow with your own social profile links.
- Preview before saving.
- If everything is working fine then click on save button and you are done..!!
I hope your readers find this widget useful and this may further help in engaging your readers more on your blog and in building rich traffic. Do let me know if you needed any help.
For more updates Stay tuned! blessings buddies. :)
Image Credit:- Freephotos.net
Author - Katherine Smithson is a budding copywriter who is trying to pave her way through the blogging realm. Through 