Beautiful attractive CSS social media rotating cups on mouse hover including RSS feed count button and also email subscriber is now ready as a widget for blogger blogspot. I think that users may require some CSS hover effects to make there blog more attractive and more beautiful. This widget includes RSS feed counter for your blogger. Social media follow us buttons in cups shape such as RSS, Twitter, Facebook, Pinterest and Google Plus are ready to rotate on mouse hover. Social media plays very important role in SEO and SERP techniques. You have to create your website username and pages on these social sites to get higher rankings in Google and Alexa.
I'm trying to provide you better SEO techniques and tricks that makes your blogger become in search results and get immediate ranking in Google Page Rank and also Alexa site rankings. I suggest to you that just complete this simple 10 steps widget tutorial that will makes your blog cool and attractive. After putting social media widget on your site the visitors were forced automatically to click on follow us social buttons. So this increase your Twitter followers, Goolge Plus 1+'s, Facebook likes, RSS Feed readers and Pinterest pins with shares. This widget based on CSS, JavaScript and HTML coding.
I'm trying to provide you better SEO techniques and tricks that makes your blogger become in search results and get immediate ranking in Google Page Rank and also Alexa site rankings. I suggest to you that just complete this simple 10 steps widget tutorial that will makes your blog cool and attractive. After putting social media widget on your site the visitors were forced automatically to click on follow us social buttons. So this increase your Twitter followers, Goolge Plus 1+'s, Facebook likes, RSS Feed readers and Pinterest pins with shares. This widget based on CSS, JavaScript and HTML coding.
How to Add CSS Rotating Social Media Buttons With Email Subscribe Box and Feed Count ?
Step 1. Log in to Blogger Dashboard, and select Template
Step 2. Click on Edit HTML
Step 3. Press CTRL + F from keyboard and type </body> in find box
Step 4. Hit Enter button to navigate quickly
Step 5. Before </body> tag Paste this code
<script type='text/javascript'>
$(document).ready(function(){
$("#mdstickybar").sticky({topSpacing:0});
});
</script>
Step 6. Click on Save Template and click on back button with right of Save Template
Step 7. Now Click on Layout and Select Add a Gadget
Step 8. Choose Add a new HTML/JavaScript Gadget
Step 9. Type 'Subscribe Now!' in Title (or what you want)
Step 10. Paste the following code in the empty HTML box:
<style> ul.social{list-style:none;overflow:hidden}.social li{float:left;overflow:hidden;background:none!important;padding:0!important;margin:0 6px}.social li a{display:block;width:46px;height:58px;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgCGiXafAyLoNAm0eaUhT8n3gydsiWIKYloTvP4c1c92HcMzZz4ZWavU9pAzKDhSXHgO8JbH7_xsJERcwUpMzpA-P5AfsNj5YsnqLhBVVZlWjRn3wLz7FMLuo13d7nurw_ERf5GA4pF1M/s1600/latesthack.png") no-repeat transparent;text-indent:-99999em!important;-webkit-transition:ease-out 700ms;-moz-transition:ease-out 700ms;-o-transition:ease-out 700ms;-ms-transition:ease-out 700ms;transition:ease-out 700ms}.social li a:hover{padding:0!important;transform:rotate(360deg);-ms-transform:rotate(360deg);-moz-transform:rotate(360deg);-webkit-transform:rotate(360deg);-o-transform:rotate(360deg);-moz-transition-duration:700ms;-webkit-transition-duration:700ms;-o-transition-duration:700ms}.social li.twicon a{background-position:0 -1px;border-right:1px solid #e6e6e6}.social li.pinicon a{background-position:-47px -1px;border-right:1px solid #e6e6e6}.social li.rssicon a{background-position:-100px -1px;border-right:1px solid #e6e6e6}.social li.fbicon a{background-position:-150px -1px;;border-right: 1px solid #e6e6e6;}.social li.twicon a:hover{background-position:0 -60px;border-right:1px solid #e6e6e6}.social li.gicon a{background-position:-200px -1px}.social li.gicon a:hover{background-position:-200px -60px}.social li.pinicon a:hover{background-position:-48px -60px;border-right:1px solid #e6e6e6}.social li.rssicon a:hover{background-position:-100px -60px;border-right:1px solid #e6e6e6}.social li.fbicon a:hover{background-position:-150px -60px;border-right: 1px solid #e6e6e6;}.starsblogging-tricks{width:300px;float:left}.starsblogging-tricks .count{color:#f17c18;font-size:14px;font-weight:bold;font-family:Helvetica,Arial;height:40px;line-height:40px;vertical-align:middle;width:310px;padding:0 0 0 4px;margin:0}.starsblogging-tricks .count span.bigcount{color:#f17c18;font-size:24px;font-family:Helvetica,Arial;line-height:39px;vertical-align:middle;margin:0;padding:10px 0 0 0}.starsblogging-tricks .subicons{border-bottom:1px solid #e6e6e6;margin:0;float:left;width:300px;font-family:Helvetica,Arial;font-size:12px}.starsblogging-tricks .emailsub{border-bottom:0 solid #e6e6e6;padding:15px 0 0 0;float:left;width:100%;font-family:Helvetica,Arial}.starsblogging-tricks .emailsub .emailicon{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcl_cvkJCdPlgc1CUtIcs5lomLMTD7iEkKL_A_VC8NR3s6olXYBft5pTBksJGUCRMW6Z3tXkhBsAmkLVQAStSPUAlwBHSTYUoOLUNrnh-Z1kr13yd_LpyTHBLxQjGqH9yl35wX6fcDdwk/s400/email.png) no-repeat 0 2px;float:left;padding:0 15px 0 40px;margin:0 0 0 5px;width:300px;line-height:20px;vertical-align:middle;font-size:14px;color:#333}.emailbutton{background:#f7f8f9;background:-webkit-gradient(linear,left top,left bottom,color-stop(#f7f8f9,0),color-stop(#e9e9e9,1));background:-webkit-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:-moz-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:-o-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f8f9',endColorstr='#e9e9e9',GradientType=0);border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;padding:6px 12px;margin:0;-webkit-box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);-moz-box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);color:#888;text-shadow:0 1px 0 #fff;line-height:1.2;cursor:pointer;font-size:13px}.emailbutton:hover{background:#f1f1f1;background:-webkit-gradient(linear,left top,left bottom,color-stop(#f1f1f1,0),color-stop(#e0e0e0,1));background:-webkit-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:-moz-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:-o-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1f1f1',endColorstr='#e0e0e0',GradientType=0);text-decoration:none!important}.email{clear:both;width:100%;margin:10px 0}.emailform{position:relative;width:300px;margin:0 auto}.emailinput{width:200px;height:18px;margin:0 auto;padding:8px 40px 8px 10px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;font-family:georgia;font-style:italic;-webkit-box-shadow:1px 1px 2px #dfdfdf;-moz-box-shadow:1px 1px 2px #dfdfdf;box-shadow:1px 1px 2px #dfdfdf;font-size:14px;color:#666}.emailbutton{-webkit-border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;-moz-border-radius-topright:4px;-moz-border-radius-bottomright:4px;border-top-right-radius:4px;border-bottom-right-radius:4px;-webkit-border-top-left-radius:0;-webkit-border-bottom-left-radius:0;-moz-border-radius-topleft:0;-moz-border-radius-bottomleft:0;border-top-left-radius:0;border-bottom-left-radius:0;padding:9px;position:absolute;right:-2px;top:0;display:block;line-height:16px}.emailbutton{padding:8px!important}.emailform,.emailinput{width:98%!important;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;height:auto}</style>
<div class="starsblogging-tricks">
<div class="count">
<span class="bigcount"><a rel="nofollow" href="http://feeds.feedburner.com/FEED URL"><img
width="88" style="border:0" alt="" src="http://feeds.feedburner.com/~fc/FEED URL?bg=3493db&fg=666&anim=1" height="26"/></a></span>
Learn Pro Tricks daily </div>
<div class="subicons"><ul class="social">
<li class="rssicon"><a href="http://feeds.feedburner.com/FEED URL" rel="nofollow" target="_blank">Rss</a></li>
<li class="twicon"><a href="http://twitter.com/TWITTER URL" rel="nofollow" target="_blank">Twitter</a></li>
<li class="fbicon"><a href="http://facebook.com/FACEBOOK URL" rel="nofollow" target="_blank">FaceBook</a></li>
<li class="pinicon"><a href="https://pinterest.com/PINTEREST URL" rel="nofollow" target="_blank">Pinterest</a></li>
<li class="gicon"><a href="https://plus.google.com/Google Plus PAGE URL" rel="nofollow" target="_blank">Google +</a></li></ul></div>
<div class="emailsub"><div class="email"><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=FEED URL', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="emailform"> <input type="hidden" value="FEED URL" name="uri" /> <input type="hidden" name="loc" value="en_US" /> <input type="text" onblur="if (this.value == "") {this.value = "Enter Your email...";}" onfocus="if (this.value == "Enter your email...") {this.value = ""}" value="Enter your email..." name="email" class="emailinput" /> <input type="submit" class="emailbutton" value="Subscribe" title='' /></form></div></div>
</div>
Now Click on Save button to save and after closing of popup window, Click Save Arrangement.
Customization of Social Media CSS Rotating with Mouse Hover Buttons:
You should change all Blue capital text with your own social media username. All the blue text required to be change with your own website social media user names and pages. These are requirement according to socialize and also for better SEO technique. All social network users must be change like RSS Feed, Twitter, Facebook, Pinterest, Google Plus and Email Subscriber feed URL.
You may change Learn Pro Tricks Daily shows in pink color with your own favorite text that you want to show in widget on your blogger. I'm suggesting you to put this beautiful social media widget on top right of your blog that shall plays an important role in socializing your blog and also getting higher rankings with this socializing. You may enjoy this cool widget. Keep visiting and Keep comments.
0 comments:
Post a Comment