Showing posts with label RSS. Show all posts
Showing posts with label RSS. Show all posts

01 September, 2013

Add Spinning Social Media Icons with Email Subscribe

Add Spinning Social Media Icons with Email Subscribe

Adding an spinning widget in blogger including of social media follow us icons and email subscribe box makes your blogger more attractive. The spinning widget will rotates social media icons such as (rss feed, Facebook, Twitter, Google + and Pinterest) at 360 degrees. Spinning social media follow us icons with email subscribe now button will increase your site or blog strength according to SEO techniques. This widget will works on the socializing your website such as increasing site feed reader, increasing Facebook page likes, increasing Twitter followers, increasing Google plus 1+'s, increasing Pinterest pin it and also increase site email subscribers for your blog.

The spinning effect will makes your widget looking beautiful and attract all visitors to click on social follow us buttons. This will increase your site strength on social sites. This widget has no JavaScript included. There is only CSS and HTML are used in this widget. This widget does n't increase your site loading speed because it's fully optimized. There are many widgets you have installed on your site but you does n't see this widget on any blog. This widget is fully customizable. When you hover mouse on social media icons, they will rotate at 360 degrees and shows there original color. Just follow these steps.

Add Customization of Spinning Social Media Follow Widget!


Step 1. Log in to Blogger Dashboard, and select Layout
Step 2. Now Click on Layout and Select Add a Gadget
Step 3. Choose Add a new HTML/JavaScript Gadget
Step 4. Type 'Subscribe!' in Title (or what you want)
Step 5. Paste the following code in the empty HTML box:


<div class="textwidget"><style>
p#starsblogging_socialicons img {
 /* Spinning Social Icons Widget By Starsblogging.blogspot.com/ */
    -moz-transition: all 0.8s ease-in-out;
    -webkit-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
}
p#starsblogging_socialicons img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}
/* Spinning Social Icons Widget By Starsblogging.blogspot.com/ */
</style>
<center><p id='starsblogging_socialicons'>
<a href='http://feeds.feedburner.com/StarsBlogging' rel='nofollow' target='_blank'> <img alt='Click Me' onmouseout='this.src=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBkVbbIhXEfdYaSF9J0AlAhkpe18ng5LYzeSm1E0CLogjVRnToXS72kUUPgfbbvwkzkka8xWz-o960A_J92kqbG3nJoCtmRWXFqzWWTc0cD78Udv0XKqJt6dJaErosHF5yzFPjOxJvl7DA/s1600/rss-inactive.png&apos;' onmouseover='this.src=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT8uy4MJoR7FwPVvwdh5UJ5q70vJkrYSkGS2Xk4QvfnVWfwi8wpSChqAlD4O6dWHQKjIrbIOvxwMxRROacveCUroRgQ_xsSJSCqPLOyHRAEPFdN3WJOrKdNQLWN-I0CKiPd0-DFkCB2Gif/s1600/rss.png&apos;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBkVbbIhXEfdYaSF9J0AlAhkpe18ng5LYzeSm1E0CLogjVRnToXS72kUUPgfbbvwkzkka8xWz-o960A_J92kqbG3nJoCtmRWXFqzWWTc0cD78Udv0XKqJt6dJaErosHF5yzFPjOxJvl7DA/s1600/rss-inactive.png'/></a>
<a href='http://facebook.com/StarsBlogging' rel='nofollow' target='_blank'><img alt='Click Me' hieght='100' onmouseout='this.src=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYM2UexuOTrIKFjHDzOj3_UyYHsLynJv5J6qNZWy1DXNmFeIFfggBEut60Mefvk3ovc_rwBiBYLFgi_ZmSZff8bxtnNQ1IPQN47UYc0OQfnWN5atspq9VxHtwf1mfi4ZxEdY9tp6casctL/s1600/facebook-inactive.png&apos;' onmouseover='this.src=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm4IivVpuhd4bc226FLuQ1R1z9YEe7GALOkqDEdqg9kqLU7KdktBlLhj0_wG3joMl-4v1sfEGAKsCc2X0AC5xq-xaeSCUJp8HS8S0CH6vB8x49RaM3S6zKh4WzCMWOi5AT8BvTMLOEaCy2/s1600/facebook.png&apos;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYM2UexuOTrIKFjHDzOj3_UyYHsLynJv5J6qNZWy1DXNmFeIFfggBEut60Mefvk3ovc_rwBiBYLFgi_ZmSZff8bxtnNQ1IPQN47UYc0OQfnWN5atspq9VxHtwf1mfi4ZxEdY9tp6casctL/s1600/facebook-inactive.png'/></a>
<a href='http://twitter.com/StarsBlogging' rel='nofollow' target='_blank'><img alt='Click Me' onmouseout='this.src=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpa0t5M-1zR7g4NCeg4SKtwIWtK7KTwPoAI6Y86FAh9iwUUaTSiXpkILmoGF1TjCBDZ1aOSRxx-xLkI-pevPcZ6_gDUwNj24zzpuXQSySpTO4vWi2pXqYANHzWopd4VkdLYr-z_odWUk2i/s1600/twitter-inactive.png&apos;' onmouseover='this.src=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9zcm76QjRzknNi-ZLoJoQzirMAUips5H5j0Fq3lTZBeW86yBrnRD-1M9dq1X1LORJ-awi4TLgarNht0KpH24IzJVJjsYNsNzFZQaD3j7vgoG89c20cRtZFj1qBOxGc5HI_QbzpgSa6cYf/s1600/twitter.png&apos;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpa0t5M-1zR7g4NCeg4SKtwIWtK7KTwPoAI6Y86FAh9iwUUaTSiXpkILmoGF1TjCBDZ1aOSRxx-xLkI-pevPcZ6_gDUwNj24zzpuXQSySpTO4vWi2pXqYANHzWopd4VkdLYr-z_odWUk2i/s1600/twitter-inactive.png'/></a>
<a href='https://plus.google.com/110363707893612306708' rel='nofollow' target='_blank'><img alt='Click Me' hieght='160' onmouseout='this.src=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXzgWkTIIuaJDawn-6bNFp77jXuEdlLzkCiJFaMGqxfoNNiivTEHe2Q5XNhoWrPdh4vZZRQLAlA26cgmS7C0GB6S-0odqceOtCv5Lvs2Gn0oFeZvX02yy37BZ6u9VmbCdRi3N-ULgSinp2/s1600/google-plus-inactive.png&apos;' onmouseover='this.src=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVjR_49vJPctdeZV0Cc-3zgwRt1XWShZYmR8ObdsfD2MIyO_7W6Z2QUz_Gqpa4JMWBJFMyeBJSb3AgoAngP6Vy3wTkFKK1_GTx6REJ6yLIku-CUqN6xqapJDQdU2yX6w2uktQCaSWysVQx/s1600/google-plus.png&apos;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXzgWkTIIuaJDawn-6bNFp77jXuEdlLzkCiJFaMGqxfoNNiivTEHe2Q5XNhoWrPdh4vZZRQLAlA26cgmS7C0GB6S-0odqceOtCv5Lvs2Gn0oFeZvX02yy37BZ6u9VmbCdRi3N-ULgSinp2/s1600/google-plus-inactive.png'/></a>
<a href='http://pinterest.com/starsblogging/' rel='nofollow' target='_blank'><img alt='Click Me' onmouseout='this.src=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmPxo6N4YIOi5ubL2P_839TXxHDcNUwBnH_Lp0QxgLnhmcoaQ8E-aRdG2d22k37k3OGpajiKRxJzDszuc5XUPepINxxX9LnR44-vogInzWAyGJlzyU5ZAiKBVEOyY_akRIDFq6eAhZz1t0/s1600/pinterest-inactive.png&apos;' onmouseover='this.src=&apos;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifQqO3wb8p_UXpaATxrbzo6y4zuelFapy-lB3rGTBJNziIznf6kYxexGbWYJbo2LSK8F-eKdOO6xlykcyVQJ7TxtHjL0r_TuKRSH7tly6OkBzHT3jYmNIOyo6Csor4S0H2T5h0O31ftZ6w/s1600/pinterest.png&apos;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmPxo6N4YIOi5ubL2P_839TXxHDcNUwBnH_Lp0QxgLnhmcoaQ8E-aRdG2d22k37k3OGpajiKRxJzDszuc5XUPepINxxX9LnR44-vogInzWAyGJlzyU5ZAiKBVEOyY_akRIDFq6eAhZz1t0/s1600/pinterest-inactive.png'/></a></p>
</center>
<center>
<div class="starsblogging-subscribe-box-form">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=StarsBlogging" class="starsblogging-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=StarsBlogging', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="StarsBlogging" /><input name="loc" type="hidden" value="en_US" /><input class="starsblogging-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Enter your email address :)"/><input class="starsblogging-subscribe-box-email-button" title="" type="submit" value="Subscribe Now !" /></form></div>
</center>
<style type='text/css'>#starsblogging-subscribe-box{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyjHIkYhCpxDU-DHK2qVwxzXnq_HBLJ3_JzMIOePicxu5H3gbqopvKWl2P9l_1lHROwx0uZUDAgTSsGgoh7VOYLf-Cmx1aZcAsLOEGn1_6HNejTb_rFIYs3S8L29728JYjTNWPCqmYeeBR/s1600/colored-strip.png) repeat scroll 0 0 transparent;border:1px solid #aaa;border-radius:3px;padding:3px 0}.starsblogging-subscribe-box-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8GYkrVIL4dGYfYo_wiWF8QfJFchyphenhyphenJVu2MRfcAgSqDXauFHNCMR3QEXvmq1l6w8RjoQ6xiwXJ-4gNdKM-M-2aUDybfx9MJPw5hyR2CXxoCdQxuBJA7eLw1GAiE8V1Inrdf-wICkuthyoY3/s1600/bg-pattern.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:uppercase}.starsblogging-subscribe-box-form{clear:both;display:block;margin:10px 0}form.starsblogging-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto}.starsblogging-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX6Xatmr8c4dtToKPO6g1ZRP6a9Zp97Lq5_kKTRthnp-Q91zQaDG87ZqXalyXLFh0eIJVR3A3ORiCFfOVzAlcYuNduVuX_fOrM7qo2fnb8eroL8PJEdPD1jVLQO_4aMjB9pnELkGGw3Ovc/s1600/sprites.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}.starsblogging-subscribe-box-email-button{background:#09f;border:1px solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:95%}.starsblogging-subscribe-box-email-button:hover,.starsblogging-subscribe-box-email-button:focus{background:#1ca4ff}.starsblogging-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px}#footer-section{background:#f5f5f5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh27aUnTdLHbJXAKOx7RB-R8P6yGLgYthW5PaL8Aw4mJldlEbeI7rt8KwXvq9Bej7SUbxAvjN0QgJ0wn3-pxvwEJEPDHvGlTpiJr8YGwrBo96rRLPm7ZD3oCfgpMG9QTjou7M5XtkMEvMgR/s0/bg-pattern.png) repeat top left;border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%}</style>
</div>

Click Save and after closing pop widget dialog box, Click Save Arrangement to save all settings.

Customization of Spinning Social Media Follow Widget


Just replace all pink bold text links with your own blog. All the pink color replacements are necessary for replacing all text links. This change will required to be changed because it demands to change with your blogger social links.

  • http://feeds.feedburner.com/RSS Feed URL
  • http://facebook.com/Facebook Page URL
  • http://twitter.com/Twitter Profile URL
  • https://plus.google.com/GOOGLE + PAGE URL
  • http://pinterest.com/Pinterest URL/

All these above demands to be change is required for change with your own links. After the above customization you must do something more to make this widget your own.

  • "http://feedburner.google.com/fb/a/mailverify?uri=RSS FEED NAME"
  • 'http://feedburner.google.com/fb/a/mailverify?uri=RSS FEED NAME'
  • input name="uri" type="hidden" value="RSS FEED NAME"
These above changes will also required like previous links. This change will makes email subscribe box with your own blog name. If you don't change these, your email readers can't be increased.

After changing all the pink links, if you think to change the red bold text then these are ready for change.

  • placeholder="Enter your email address :)"/>
  • type="submit" value="Subscribe Now !" />
  • transform:uppercase;width:95%
The above changes are not necessary because they are extra changes that makes:
  1. text line inside email box change
  2. that changes email button text, you can write Submit Now etc.
  3. That will changes the width of email subscribe box increase or decrease
These above changes will makes some different with this genuine widget. I sure you should enjoy this cool and beautiful widget. This widget should increase your social followers and likes automatically.
Remember to keep comments, Enjoy !


22 August, 2013

Add Elegant Style Social Media Follow Buttons

Add Elegant Style Social Media Follow Buttons

Social media plays an important role in according to SEO and SERP roles. Adding elegant stylish social media follow us buttons plays very impressive role to make your blog stylish and looking cool. Adding simple and beautiful widgets makes your blogger more attractive. Every beginner and professional blogger user wants to have something better and something different than others. Today I decided to tell you about an simple and effective follow us social media buttons that is used by all PR5 and PR6 websites. This beautiful widget can makes your site attractive without adding too much load on your site.

Just remember if you want to increase your social media followers or reader then it is required to add cool and attractive social media follow us button in your blogger. This widget includes all popular and mostly used social media buttons such as RSS Feed, Twitter, Facebook, YouTube and Google Plus. I assured you that this widget will increase your social media follows if you have something readable on your blogger. This widget allows you to customize it with your own desires and place anywhere in the blogger screen area. This widget depends on both CSS and HTML coding tags. It has no JavaScript included so you can say that there is no more load increased after adding this CSS3 and HTML widget.

How to Add Elegant Style Social Media Follow Buttons ?



Step 1. Log in to Blogger Dashboard, and select Template
Step 2. Click on Edit HTML
Step 3. Press CTRL+F from keyboard and paste </b:skin> in find box and then press enter
Step 4. Now add this CSS code before </b:skin> tag

.StarsBlogging-Social span{float:left;display:inline;margin-right:8px}
.StarsBlogging-Social span a:hover{-webkit-opacity:1;-moz-opacity:1;opacity:1}
.StarsBlogging-Social span a{display:block;width:32px;height:32px;text-indent:-9999px;background-color:none;background:transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuI44kRnlnzBp85NkctQTg197-uIANSdwAr_XRBBZSrDEAzBXLzaZxUgIZbH9eUeURSCr-UAjlBp7AJmUuMzChrIPXN3PQW5Nf3OKFjWkkVA-gKBgNWzZguumlFYqDwv4cOQqEwyAvw6k/s164/SlidingSocial.png") 0 0 no-repeat;-xwebkit-opacity:.7;-xmoz-opacity:.7;xopacity:.7;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;-ms-transition:all .2s ease;-o-transition:all .2s ease;transition:all .2s ease}
#iconTwitter{background-position:-33px -33px}
#iconTwitter:hover{background-position:-33px 0}
#iconFacebook{background-position:-66px -33px}
#iconFacebook:hover{background-position:-66px 0}
#iconRSS{background-position:0 -33px}
#iconRSS:hover{background-position:0 0}
#iconYouTube{background-position:-99px -33px}
#iconYouTube:hover{background-position:-99px 0}
#iconGooglePlus{background-position:-132px -33px}
#iconGooglePlus:hover{background-position:-132px 0}

After that click on Save Template.

Step 5. Now Click on Layout and Select Add a Gadget
Step 6. Choose Add a new HTML/JavaScript Gadget
Step 7. Type 'Follow Us' in Title (or what you want)
Step 8. Paste the following code in the empty HTML box:

<div class="StarsBlogging-Social">
<span><a title="RSS Feed" href="http://feeds.feedburner.com/StarsBlogging" target="_blank" id="iconRSS"></a></span>
<span><a title="Twitter" href="http://twitter.com/StarsBlogging" target="_blank" id="iconTwitter"></a></span>
<span><a title="Facebook Page" href="http://www.facebook.com/pages/Starsblogging/324532194302709" target="_blank" id="iconFacebook"></a></span>
<span><a title="Google Plus" href="https://plus.google.com/110363707893612306708/posts" target="_blank" id="iconGooglePlus"></a></span>
<span><a title="YouTube Channel" href="https://www.youtube.com/user/xxxx" target="_blank" id="iconYouTube"></a></span>
</div>
Now Click Save button exists at the bottom of the pop widget screen. After adding just move your Follow us widget to anywhere you want to display to your readers. I recommend you to add this at the top right or left of your sidebar. It impacts an special role to increase your blogger rankings. It will also increase your social media followers such as RSS Feed readers, Twitter Followers, Facebook page likes, Google Plus 1+'s and YouTube subscribers. After moving this widget to top right of blogger sidebar just click on Save Arrangement to save your settings.

Customization of Elegant Style Social Media Follow Buttons


  • http://feeds.feedburner.com/RSS Feed URL
  • http://twitter.com/TWITTER URL
  • http://www.facebook.com/FACEBOOK PAGE URL
  • https://plus.google.com/GOOGLE + PAGE URL/posts
  • https://www.youtube.com/user/YOUTUBE CHANNEL

You must do some changes in this stylish widget to make it your own. Just simple replace all the BOLD text with your own page or profile links and then save it own your desires. This will increase your profile or site followers. Every link will opens in new tab without closing your website.

Just complete all the 8 simple steps to add this simple and stylish widget in your blogger or site. Social widget have some special effects when you move your mouse cursor or hover on social media pictures. these all will move from top to bottom. This will clears the opacity of these social media pictures and visitor will force automatically to click on it and follow your site as your permanent reader.

Enjoy this cool widget. Keep visiting and Keep comments.

20 August, 2013

Add CSS Social Media Follow Us Buttons with Hover Effect

Add CSS Social Media Follow Us Buttons with Hover Effect
Today I'll tell you cool blogger trick of subscribe now widget. It called as how to add CSS social media follows us buttons with hover effect on mouse over. This blogger widget includes RSS, Twitter, Facebook, Google Plus and YouTube hover social media buttons on mouse hover. It has also twitter follow button, Google plus 1+ button, RSS feed count button and nice CSS email subscribe box. Subscribe Now widget includes HTML and CSS coding tags that will make your site as professional blogger. You can easily paste this widget on your blogger blog sidebar (left or right). Just copy this code and do the necessary changes in it before saving this widget.

In previous post I've told you about How To Add CSS Rotating Social Media Buttons With Email Subscribe Box And Feed Count. After success of this social media follow us button with rotating effect. I decided to tell my visitors about this nice and cool widget. I recommend you to add this widget on your blogger sidebar at the top of right or left side. It should increase your site strength on social media and email subscribers.

How to add CSS social media follow us buttons with hover effect ?

Step 1. Log in to Blogger Dashboard
Step 2. Now Click on Layout and Select Add a Gadget
Step 3. Choose Add a new HTML/JavaScript Gadget
Step 4. Type 'Subscribe Now!' in Title (or what you want)
Step 5. Paste the following code in the empty HTML box:
<style>
.Subscribe-Starsblogging h6{
background:URL(http://4.bp.blogspot.com/-koRv-wLVoJ4/UDReC1-KqnI/AAAAAAAAAxc/q3-D0_cGK6o/s1600/Subscribe+More+Blog+Tools.png) no-repeat;height:50px;
margin:0px 0 0px 0;
padding:0px 20px 0px 0px;
font-size:0px;
font-family:Sans-serif, Arial, Helvetica;
font-weight:bold;
text-transform:uppercase;
color:#ffffff;
text-shadow:0 1px 0 #fff;
}
ul.social { list-style: none; margin: 10px; overflow: hidden;
}
.social li { float: left; background: none !important; padding: 0 !important; margin: 0 4px;
}
.social li a { display: block; width: 50px; height: 40px; background: url("http://4.bp.blogspot.com/-gANW8x7jzug/UGnr7YEermI/AAAAAAAABDY/pN1opxmSfwY/s1600/Subscribe+More+Blog+Tools+Social+Icons.png") no-repeat transparent; text-indent: -99999em !important;
-webkit-transition: ease-in 0.15s all; -moz-transition: ease-in 0.15s all; -o-transition: ease-in 0.15s all; -ms-transition: ease-in 0.15s all; transition: ease-in 0.15s all;
}
.social li a:hover { padding: 0 !important;
}
.social li.rssicon a { background-position: 0 0;
border-right: 1px solid #e6e6e6;
}
.social li.twicon a { background-position: -50px 0;
border-right: 1px solid #e6e6e6;
}
.social li.fbicon a { background-position: -100px 0;
border-right: 1px solid #e6e6e6;
}
.social li.gicon a { background-position: -150px 0;
border-right: 1px solid #e6e6e6;
}
.social li.yticon a { background-position: -200px 0;
}
.social li.rssicon a:hover { background-position: 0 -50px;
border-right: 1px solid #e6e6e6;
}
.social li.twicon a:hover { background-position: -50px -50px;
border-right: 1px solid #e6e6e6;
}
.social li.fbicon a:hover { background-position: -100px -50px;
border-right: 1px solid #e6e6e6;
}
.social li.gicon a:hover { background-position: -150px -50px;
border-right: 1px solid #e6e6e6;
}
.social li.yticon a:hover { background-position: -200px -50px;
}
.Subscribe-Starsblogging{
width: 300px;
float: left;
}
.Subscribe-Starsblogging .count{
color:#F17C18;
font-size: 14px;
font-weight: bold;
font-family: Helvetica, Arial;
height: 30px;
line-height: 30px;
vertical-align: middle;
width: 310px;
padding: 0 0px 0 4px;
margin:0;
}  
.Subscribe-Starsblogging .count span.bigcount{
color:#F17C18;
font-size: 24px;
font-family: Helvetica, Arial;
line-height: 39px;
vertical-align: middle;
margin:0px;
padding:10px 0px 0px 0;
}  
.Subscribe-Starsblogging .subicons{
border-bottom: 1px solid #e6e6e6;
margin: 0px 0 0px 0;
float: left;
width: 300px;
font-family: Helvetica, Arial; font-size: 12px;
}  
.Subscribe-Starsblogging .emailsub{
border-bottom: 0px solid #e6e6e6;
padding: 5px 0 0px 0;
float: left;
width: 100%;
font-family: Helvetica, Arial;
}  
.Subscribe-Starsblogging .emailsub .emailicon{
background: url(http://1.bp.blogspot.com/-bv4Z3wxrQtc/UDReA7sQF8I/AAAAAAAAAxQ/CCeIAalllEc/s1600/Subscribe+More+Blog+Tools+Email.png) no-repeat 0 2px;
float: left;
padding: 0px 15px 10px 40px;
margin: 0 0 0 5px;
width: 300px;  line-height: 20px;
vertical-align: middle;
font-size: 14px;
color: #111;
}
.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:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-topleft:0px;
-moz-border-radius-bottomleft:0px;border-top-left-radius:0px;
border-bottom-left-radius:0px;
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;
}


.invite-friends-link a {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhprZeTbR6vI5CsRPG5ODyk78SylRxc75HWLZoerj4WbFzp6L2xOV127cRahgeKBd5E9pBNuXVZZBoejz7oqrtL-_ONIf0ayf4zdgFpDix1U1H-s0HjFmthq5iDZQBnnVQTOc8uYUMBmZYJ/s1600/facebook.png) left no-repeat;
padding-left: 30px;
line-height: 30px;
font-size: 16px;
font-weight: bold;
color: #3b5998;
display: block;
}
</style>
<p style="display:none;">Email Subscription box by<a href="http://Starsblogging.blogspot.com/">Muhammad Noman Khalid</a></p>
<div class="Subscribe-Starsblogging">
<h6 class='title'>Subscribe Now!</h6>
<div class="count">
<span class="bigcount">
<a href="http://feeds.feedburner.com/FEED URL"><img src="http://feeds.feedburner.com/~fc/FEED URL?bg=F17C18&amp;fg=444444&amp;anim=1" height="26" width="88" style="border:0" alt="" /></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="gicon">
<a href="https://plus.google.com/G+ Page URL" rel="nofollow" target="_blank">Google+</a></li>
<li class="yticon">
<a href="http://www.youtube.com/user/YouTube URL" rel="nofollow" target="_blank">YouTube</a></li>
</ul>
</div>
<br style="clear:both;" />
<div style="width:300px; border-bottom:1px solid #e6e6e6; margin:8px 5px 0px 0px; padding-bottom:5px;">
<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone" data-size="medium" data-annotation="inline" data-width="280" data-href="www.SITE URL.com"></div>
<!-- Place this tag after the last +1 button tag. -->
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
</div>
<div style="width:300px; border-bottom:1px solid #e6e6e6; margin:8px 5px 0px 0px; padding-bottom:5px;">
<iframe data-twttr-rendered="true" title="Twitter Follow Button" style="width: 266px; height: 20px;" class="twitter-follow-button" src="http://platform.twitter.com/widgets/follow_button.1347008535.html#_=1351358237637&amp;id=twitter-widget-0&amp;lang=en&amp;screen_name=TWITTER URL&amp;show_count=true&amp;show_screen_name=true&amp;size=m" allowtransparency="true" frameborder="0" scrolling="no"></iframe>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
</div>
<div class="emailsub">
<div class="emailicon">
<p style=" width:240px;
color:#111;
font-size: 13px;
font-weight: normal;
font-family: Helvetica, Arial;
padding:0;
margin:0;
">Receive Quality Tutorials Straight in your Inbox   by submitting your Email ID below.</p>
</div>  
<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 == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" value="Enter your email..." name="email" class="emailinput" /> <input type="submit" class="emailbutton" value="Submit" title='' /></form></div></div></div>
</div>

Customization of CSS social media follow us buttons !

Replace All RED BOLD text with your own URL's or USER NAMES. You should add your social media links in RSS Feed, Twitter, Facebook, Google Plus, YouTube and email subscribe form. This will makes this widget only for you. Just make changes as I told you. It will takes only 5 minutes or less to make changes and save this social media widget on your blogger blogspot.

The red bold's are necessary that you must change or add your social URL's with the required fields.
The blue bold's are not necessary but if you want to change that text with your own then replace it with your favorite text to do it.

After making the required changes, just save your widget to make it working. Click on SAVE button to close this popup widget window and after click save arrangement at top right of blogger layout. If you want to move your subscribe now widget to any other place, then move with mouse click on its title in blogger layout page. Drag it where you want to show this to your visitors and save arrangement.

I recommend you to add because it will increase your site strength on social media. So your Google page rank, Alexa rank, Bing and Moz site rankings will automatically upgraded after your appearance on web. This widget is most working widget then any other widget to make your site or blog socialize.
Thanks for Keep Visiting and don't forget for comment!


29 March, 2013

Add Social Media Follow us Widget Buttons with Hover Effect to Blogger

Add-Social-Media-Follow-us-Buttons-with-Hover-Effect-Blogger

Social media has growing up day by day and its creating a wide connection between students, families, colleagues and co-workers. This will create a special relation between every field of world that connects with internet. Social media sites are increasing day by day but their are some popular social media sites like Facebook, Google Plus, Twitter, YouTube, Linked In, RSS Feed, Flicker, Digg, Stumble Upon and Pinterest. These social media sites having million of thousands of active users that are still connecting with each other every time.
social-media-buttons

The active and offline users are the plus point for bloggers to increase their pageviews and adsense earning with sharing the posts of tips and tricks and share professional tutorials with them. So they see your posts on their timeline. They will force to click and see the description of the headlines. These social media users may Like, Tweet, Follow, 1+ and subscribe for your blog to stay updates at their home. There is Social follow us with CSS3 hover widget also posted a few days ago.

How to Add Social Media Follow us Widget Buttons with Hover Effect to Blogger

<style>
.toptop {
filter:alpha(opacity=30);
-moz-opacity:0.3;
opacity: 0.3;
}
.toptop:hover {
filter:alpha(opacity=90);
-moz-opacity:0.9;
opacity: 0.9;
}
</style>

<div class='StarsBlogging-Follow'>
<ul><div style='float:center;text-align:right;padding:0px;padding-
right:0px;margin-top:-3px'>
<a class='toptop' href='http://twitter.com/StarsBlogging'><img alt='Twitter'
height='30' src='http://2.bp.blogspot.com/-
fgv4ILBTgPw/UQhUIsjtq2I/AAAAAAAABIc/ZFj81cuAkHo/s000/twitter-icon.png'
width='30'/></a>
<a class='toptop'
href='https://www.facebook.com/pages/Starsblogging/324532194302709'><img
alt='Facebook' height='30' src='http://2.bp.blogspot.com/-
N10LSw5mpHk/UQhUJKSVkkI/AAAAAAAABIk/dk1iA9tjmzY/s000/facebook-icon.png'
width='30'/></a>
<a class='toptop' href='http://feeds.feedburner.com/StarsBlogging'><img
alt='Feedburner' height='30' src='http://3.bp.blogspot.com/-
kxaAmna3YYI/UQhUJne2jgI/AAAAAAAABIs/3TtY_Olj828/s000/rss-icon.png'
width='30'/></a>
<a class='toptop' href='https://plus.google.com/110363707893612306708'><img
alt='Google +1' height='30' src='http://2.bp.blogspot.com/-
iEaJmXNJi00/UQhUJziVtrI/AAAAAAAABI0/W_tHrgIR9wY/s000/gplus-icon.png'
width='30'/></a>
<a class='toptop' href='http://youtube.com/YOUR_USERNAME'><img alt='youtube'
height='30' src='http://1.bp.blogspot.com/-
xfbrlrDRtcE/UQhUKXGREwI/AAAAAAAABI8/SNPnqG8UdTY/s000/youtube-icon.png'
width='30'/></a>
<a class='toptop' href='http://flickr.com/YOUR_USERNAME'><img alt='flickr'
height='30' src='http://2.bp.blogspot.com/-
cmplB1EqoSI/UQhUNeK9ZQI/AAAAAAAABJE/KV0_jTmw_sQ/s000/flickr-icon.png'
width='30'/></a>
</div></ul>
</div>

Customization of Social Media Follow us Widget in Blogger


  • Change all the Red color links with your own blogger links to assure the widget is yours.
  • You can easily changes the dimensions of every picture with changing the highlighted in Pink color width and height with your own choice.
  • You can easily add or remove a picture with link. You can add or delete from <a class='toptop' to </a> tag.
  • Just add a new link, create a picture of your desired social website like pinterest. Add a new link, upload the picture and just replace or create a new link.