Showing posts with label Subscribe. Show all posts
Showing posts with label Subscribe. Show all posts

07 March, 2016

How To Add or Embed YouTube Video in Blogger Blog Post

YouTube is now very popular among the world in every field. Every thing in the world you want to search and find it, You should search it on YouTube.com and watch your required video. Blogger is being support the iframe tags in blogger to embed/add/insert YouTube videos directly in blogger blogspot post.

A very small method has make the your post complete with support of YouTube videos. The user post a game and provide a download link on blogger blog post then this is required to embed a YouTube trailer of that game in blogger blogspot post. So the users can easily find there requirements and the type of game that the user want. This is a better SEO technique for blog users.

There are two methods for adding an YouTube video in blogger blog post.
1. Embed

<embed height="345" src="http://www.youtube.com/v/ES01L4xjSXE" type="application/x-shockwave-flash" width="420"></embed>


2. Iframe

<iframe allowfullscreen="" frameborder="0" height="345" src="http://www.youtube.com/embed/ES01L4xjSXE?feature=player_embedded" width="420"></iframe>



Replace your video url with these red bold text and add one of these codes into your blogger blog post.

How to add:
  • Login to http://www.blogger.com/home
  • Click the blog you want to post
  • Click on New Post
  • Then before adding the embed or iframe code, just click on HTML button and then paste your favorite video embed code in it.

  • Now click on Compose button to preview your video
  • After adding and editing click publish to successfully embedding the video.

Start Video Calling to Facebook Friends From Skype


Skype and Facebook starts there integration in Video Calling feature on 17 November 2012. Now the users are able to see there Facebook Friends on Skype Messenger and Start video calling to them when they are online. Skype integrates Facebook account into Skype messenger so the user can access to there Facebook account and see there Facebook friends in Skype.

First install Skype messenger in your windows, Sign in to Skype Messenger then locate the blue button like star at the right side of the Skype window and click this button. A tab is appears you must select Connect from Facebook to add Facebook account in Skype messenger.


After you adding your Facebook account your friends from Facebook are shown in Skype friends list. Select drop down button and choose which you want to shows your friends in the list. When you choose Facebook then all the friends of Facebook are shown in the list and the online friends have a green circle at the right side of there name.
Click on friends name and in the right side window choose call to have a video call to the Facebook friends.

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 !


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!


13 August, 2013

Add CSS Rotating Social Media Buttons With Email Subscribe Box and Feed Count

Add CSS Rotating Social Media Buttons With Email Subscribe Box and Feed Count

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.

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&amp;fg=666&amp;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 == &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="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.

11 March, 2013

Add Attractive Email Subscription Box in Blog

The email subscribers are the plus point in SEO for bloggers. The strength of a website or blog is depends on the social sharing and email subscribers. The email subscribers can be increased easily with adding an attractive email subscriber for on blog. The email subscriber form includes CSS effects that force the users to enter their email address and submit as a feed reader. This form can be easily add anywhere of the blogger template. The user can paste 'subscribe via email form' to the blogger sidebar or below ant post. This form will force the users to subscribe on your blog.

How To Add Subscribe via Email Form to Blogger?

  1. Sign in to Blogger.com
  2. Goto Layout
  3. Choose Add a Gadget (At Sidebar or below Blog Post)
  4. Choose HTML/JavaScript
  5. Write any word in Title of this widget (Recommended: Subscribe Us)
  6. Paste the following code in it,

<style>
.starsblogging-email{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGTpIM2V3POie_awf05wSUnV0UrXlwhJSrvOv5Qkb5bY4zxozK4YBW57K5trTQYIzYKPeJf6B1fmA2Mgyy2UtJ7kHATeAX5BqF80N1TurhNpbw5GZdbSz6rQ2JOiIpk5jS_CDFAZ2PpfOl/s1600/icon_mail1.png) no-repeat 0px 1px;
width:250px;
padding:0px 0px 0 65px;
float:left;
font: bold 16px 'Trebuchet MS', Trebuchet, Arial,Verdana, Sans-serif;
margin: 0px 0 10px 0;
color:#686B6C;
}
.starsblogging-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:3px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:3px;
font:12px sans-serif;
}
.starsblogging-emailsubmit:hover{
background:#E98313;
}
.textarea{
padding:2px;
margin:6px 2px 6px 2px;
background:#f9f9f9;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;
width:130px;
color:#666;}
</style>
<div class="starsblogging-email">
Subscribe via Email <form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=StarsBlogging', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;email address here&quot;;}" onfocus="if (this.value == &quot;email address here&quot;) {this.value = &quot;&quot;;}" value="email address here" type="text" />
<input type="hidden" value="StarsBlogging" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="starsblogging-emailsubmit" value="Submit" type="submit" />
</form>
</div>

Now make these changes,


  • Now replace Subscribe via Email bold text with your desired text that will attract users to enter email and submit as a feed reader.
  • Just replace StarsBlogging text at 2 places with your own feedburner user name. Every blog has its own feedburner link. You can get this feedburner username from opening http://feedburner.google.com/fb/a/home. After opening this site click on Feed you want to get user name. Click edit feed details... at top right. and see your feedburner URL at Feed Address: http://feeds.feedburner.com/XXXXX.

Save your widget, Save your blog and view your blog to see it showcasing live.! :)
That’s All!