Updated: How to Install new and dynamic Social Media Fan Page buttons on Blogspot blog - If you're a blogger, then you already know that the actual Importance of the social media. Social Media helps us to gain our blog traffic and become viral on the web. But all of these are not possible, if you have not installed any social media plugin on your blog. So that is the main reason for writing this article, I'm here to help my other friend bloggers by providing them a "New Css Social Media Fan Page" plugin for their blog.
Before you add this widget on your own blog, Make sure to take a look of this widget by clicking on the below demo button.
After watching the demo of this social buttons, if you like it and want to setup it on your dashing blog, then follow the below simple steps.
How to install CSS Social Media Fan page Button?
At the first, visit to your blogger dashboard - Login
Go to the "Template" section.
Click on the "Edit Html" button.
Copy the below code and paste it just before ]]></b:skin> or </style>.
/* Fanpages */
#fanpages{padding:0;margin:0 auto 20px auto;position:relative;text-align:center;letter-spacing:1px;list-style:none;background:rgba(146, 146, 146, 0.04);border-radius:2px;}
#fanpages p{list-style:none;padding:0;margin:0 0 5px}
#fanpages a.a-fans{position:relative;clear:both;background:#67809F;color:#fff;display:inline-block;font-weight:700;width:100%;max-width:100%;font-size:22px;list-style:none;text-align:center;margin:0 auto;padding:30px 0;border-radius:4px 4px 0 0;overflow:hidden}
#fanpages a.a-fans:before{content:'Like Us';position:absolute;bottom:25px;left:0;right:0;background-size:cover;z-index:2;opacity:0;visibility:hidden;transform:scale(0.0);transition:all .3s}
#fanpages a.a-fans:hover:before{opacity:1;visibility:visible;transform:scale(1.0)}
#fanpages a.a-fans:hover{background:#39599a;color:#fff}
#fanpages a.a-fans p{color:#fff;display:inline-block}
#fanpages a.a-fans:hover p{color:#f1d657}
#fanpages a.a-fans span{font-size:13px;font-weight:normal;letter-spacing:2px;text-align:center;transition:all .3s}
#fanpages a.a-fans:hover span{opacity:0;visibility:hidden;transform:scale(0.0)}
#sosmed,#sosmed-msg{margin:0 auto;text-align:center;padding:0 5px 5px;position:relative;line-height:1.3em}
#sosmed-msg:before{content:"Like and follow social media askwithloud.com";font-weight:700;display:table;text-align:center;color:#555;font-size:15px;bottom:0;margin:10px auto}
#sosmed ul{margin:0 auto;padding:0;text-align:center;margin:0 auto;width:100%}
#sosmed ul li{display:inline-block;margin:20px 0 0;position:relative}
#sosmed ul li a{background:#67809F;display:inline-block;color:#fff;padding:5px 10px;width:100%;border-radius:3px}
#sosmed ul li a.sosmed-gp{float:left}#sosmed ul li a.sosmed-tw{float:right}
#sosmed ul li a:hover{background:#e8635f;color:#fff;}
Save your template by clicking on the Orange template button.
After that, go to the "Layout" section.
Click on "Add a gadget" option.
Select the" Html/JavaScript" from the popup menu.
Now add the below "Html" code in the "Html/JavaScript box.
<div id='fanpages'>
<a class='a-fans' href='https://www.facebook.com/your user name here' rel='nofollow' target='_blank' title=''>Like Fanpage <p>Facebook</p><span>Type Any thing here!</span></a>
<div class='clear'>
</div>
<div id='sosmed'>
<ul>
<li><a class='sosmed-gp' href='http://plus.google.com/your url here' rel='nofollow' target='_blank' title=''>Google+</a></li>
<li><a class='sosmed-tw' href='https://twitter.com/your user name here' rel='nofollow' target='_blank' title=''>Twitter</a></li>
</ul></div>
<div id='sosmed-msg'>
</div></div>
Click on the save widget button, then refresh your blog and see the magic.
Note- Replace the above highlighted text and URL with your own text or URL.
That's it! I hope you like this social media like page plugin! Stay tuned for more cool widgets! Thanks for reading +Prince Chaudhri
0 Comment to "CSS Social Media Fanpages Button For blogger"
Post a Comment