Social Plugins: Stay Tuned Social Subscription Widget V 2.0

There are literally hundreds of social media sharing plugins that can display social share button for WordPress, blogger and many more are added each day. Today we have a great social subscription plugins with simple design, which we have created early, its a second version of our previous social subscription plugins with tooltip. In the updated version we have removed some CSS reset bugs and also make some addition in the plugin layout.

 

The plugin allow visitors to join social networks, such as Facebook, Twitter, Pinterest, Google Plus,  Rss Feed, Linkedin, Tumbler and the lastly on YouTube.

 

Why Social Plugin Important: A Writer Chuck Price share an article on Search engine watch before 3 months ago and said social profiles are very important for boosting your search engine ranking. Read the statement below or you can read full article about ranking, traffic and backlinks.

 

“Think about where your target audience spends their time. Is it Facebook, Twitter, pinterest? You need to be there as well. Like blog and forum communities, getting to know people via social media opens up link opportunities.”

 

So now leave the discussion and go ahead to add social plugin to your blogger blog.

before adding see live demo by clicking the live preview button below.

 

Update: Bug Fixes for alignment and added Responsive Mobile friendly width property. For the example of update you check the great tutorial written by martin wolf.

 

 

Live Preview

 

How to add it blogger

 

1. Go to Template > Edit HTML.

2. Back up your template.

3. Look for the following data tag in your Template:

 

]]></b:skin>

 

4. Paste the following code immediately above (before) it:

 

#social_profiles-wrap {
    background: rgba(255,255,255,0.3);
    width: 94%;
    height: auto;
    float: left;
    margin: 10px 0 10px 0;
    padding: 20px;
    text-align: center;
    border-radius: 4px;
    font-family: 'Open Sans Condensed', Verdana;
    border: 1px solid #f2f2f2;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-box-shadow: 1px 0px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
    -moz-box-shadow: 1px 0px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
    box-shadow: 1px 0px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
    text-decoration: none;
}

#social_profiles-wrap p {
    color: #446cb3;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    text-decoration: none !important;
}

.social_profiles {
    display: inline-block;
    padding: 5px 0;
}

ul.social_profiles {
    background: none;
    float: none;
    margin: 0 37px;
    text-decoration: none;
}

/* fix for ul li default arrow symbol*/
ul.social_profiles li {
    background: none !important;
    padding: 0!important;
}

.social_profiles li {
    display: inline;
    margin-top: 40px;
    list-style-type: none;
}

.social_profiles li a {
    display: inline-block;
    list-style-type: none;
    width: 40px;
    height: 40px;
    outline: none;
    margin-right: 7px;
    position: relative;
    vertical-align: middle;
    z-index: 3;
    text-decoration: none;
}

.social_profiles li a > :last-child {
    margin-right: 0 !important;
}

.social_profiles li .facebook {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLjlc0e3iXENhtXHHR-A5CrCMrQKJ1nszHUNOf0BThkpEegkhl8vgfBqI9FcgGgOljqaRznZ2NXMtO1cLZe7TYig2mhO40F7BqUG4M9UwmSbdwPnIFb_VZf_ZwS7R0G3p5x-ihMRWb3dqg/s1600/social_sprite.png") no-repeat;
}

.social_profiles li .twitter {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLjlc0e3iXENhtXHHR-A5CrCMrQKJ1nszHUNOf0BThkpEegkhl8vgfBqI9FcgGgOljqaRznZ2NXMtO1cLZe7TYig2mhO40F7BqUG4M9UwmSbdwPnIFb_VZf_ZwS7R0G3p5x-ihMRWb3dqg/s1600/social_sprite.png") no-repeat 0px -45px;
}

.social_profiles li .gplus {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLjlc0e3iXENhtXHHR-A5CrCMrQKJ1nszHUNOf0BThkpEegkhl8vgfBqI9FcgGgOljqaRznZ2NXMtO1cLZe7TYig2mhO40F7BqUG4M9UwmSbdwPnIFb_VZf_ZwS7R0G3p5x-ihMRWb3dqg/s1600/social_sprite.png") no-repeat 0px -90px;
}

.social_profiles li .pinterest {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLjlc0e3iXENhtXHHR-A5CrCMrQKJ1nszHUNOf0BThkpEegkhl8vgfBqI9FcgGgOljqaRznZ2NXMtO1cLZe7TYig2mhO40F7BqUG4M9UwmSbdwPnIFb_VZf_ZwS7R0G3p5x-ihMRWb3dqg/s1600/social_sprite.png") no-repeat 0px -135px;
}

.social_profiles li .rss {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLjlc0e3iXENhtXHHR-A5CrCMrQKJ1nszHUNOf0BThkpEegkhl8vgfBqI9FcgGgOljqaRznZ2NXMtO1cLZe7TYig2mhO40F7BqUG4M9UwmSbdwPnIFb_VZf_ZwS7R0G3p5x-ihMRWb3dqg/s1600/social_sprite.png") no-repeat 0px -180px;
}

.social_profiles li .linkedin {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLjlc0e3iXENhtXHHR-A5CrCMrQKJ1nszHUNOf0BThkpEegkhl8vgfBqI9FcgGgOljqaRznZ2NXMtO1cLZe7TYig2mhO40F7BqUG4M9UwmSbdwPnIFb_VZf_ZwS7R0G3p5x-ihMRWb3dqg/s1600/social_sprite.png") no-repeat 0px -225px;
}

.social_profiles li .tumblr {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLjlc0e3iXENhtXHHR-A5CrCMrQKJ1nszHUNOf0BThkpEegkhl8vgfBqI9FcgGgOljqaRznZ2NXMtO1cLZe7TYig2mhO40F7BqUG4M9UwmSbdwPnIFb_VZf_ZwS7R0G3p5x-ihMRWb3dqg/s1600/social_sprite.png") no-repeat 0px -270px;
}

.social_profiles li .youtube {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLjlc0e3iXENhtXHHR-A5CrCMrQKJ1nszHUNOf0BThkpEegkhl8vgfBqI9FcgGgOljqaRznZ2NXMtO1cLZe7TYig2mhO40F7BqUG4M9UwmSbdwPnIFb_VZf_ZwS7R0G3p5x-ihMRWb3dqg/s1600/social_sprite.png") no-repeat 0px -315px;
}

.social_profiles li .mail {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLjlc0e3iXENhtXHHR-A5CrCMrQKJ1nszHUNOf0BThkpEegkhl8vgfBqI9FcgGgOljqaRznZ2NXMtO1cLZe7TYig2mhO40F7BqUG4M9UwmSbdwPnIFb_VZf_ZwS7R0G3p5x-ihMRWb3dqg/s1600/social_sprite.png") no-repeat 0px -360px;
}

.social_profiles li a span {
    width: 60px;
    height: auto;
    padding: 2px;
    left: 50%;
    margin-left: -38px;
    font-family: "Open Sans Condensed", sans-serif;
    font-weight: 400;
    font-size: 12px;
    color: #fff;
    text-align: center;
    border: 5px solid #446cb3;
    background: #446cb3;
    text-indent: 0px;
    position: absolute;
    pointer-events: none;
    border-radius: 5%;
    opacity: 0;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.social_profiles li a span:before,
.social_profiles li a span:after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}

.social_profiles li a span:after {
    bottom: -15px;
    margin-top: 6px;
    margin-left: -10px;
    border-top: 10px solid #446cb3;
}

.social_profiles li a:hover span {
    opacity: 0.9;
    bottom: 50px;
}

 

Now lets go and do one more step…

 

5. Now again look for the following code in your Template:

 

<b:includable id='postQuickEdit' var='post'>

 

Normally there are three instances of the tag present in your template ( post-footer, post-footer-line-1, post-footer-line-2 like this.

you just need to locate post-footer  (from top) one.

 

6. Paste the following code immediately below (after) opening post-footer div:

 

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='social_profiles-wrap'>
<p>Don&#39;t Miss Any Update, Join Us on Social Networks.</p>
<ul class='social_profiles'>
<li><a class='facebook' href='http://www.facebook.com/mybloggerstricks' target='_blank'><span>Facebook</span></a></li>
<li><a class='twitter' href='http://twitter.com/mybloggertriks' target='_blank'><span>Twitter</span></a></li>
<li><a class='gplus' href='https://plus.google.com/b/103598710564060829080' target='_blank'><span>Googl+</span></a></li>
<li><a class='pinterest' href='http://www.pinterest.com/mybloggertrickx' target='_blank'><span>Pinterest</span></a></li>
<li><a class='rss' href='http://feeds.feedburner.com/mybloggerstrick' target='_blank'><span>RSS</span></a></li>
<li><a class='linkedin' href='http://www.linkedin.com/in/mybloggertricks' target='_blank'><span>LinkedIn</span></a></li>
<li><a class='tumblr' href='http://www.thumblr.com/mybloggertricks' target='_blank'><span>Tumblr</span></a></li>
<li><a class='youtube' href='http://www.youtube.com/mybloggertricks' target='_blank'><span>Youtube</span></a></li>
</ul></div></b:if>

 

Note:- Change the links highlighted in yellow color with your social profiles links.

 

I hope you enjoyed this little effect and find it useful!.. As we state in our previous tutorial, it will only work in modern browsers that support pseudo-elements and CSS transitions. if you have question or need to change something like width, font family, color or facing issue with alignment, please let us know we try to help you on every way. lastly want to say happy blogging..!! :)

Read Article →

Best Ever Screen Capture Tools For Desktop & Scrolling Webpages

There are many of reasons you might want to take a screenshot of your desktop or an scrollable webpage. One of the most common reason is to send the image to tech support company to show a problem you're experiencing. Here's how to take a screenshot on application  or scrolling webpage. Last night i am working on a webpage and i need to take a screen shot for whole webpage to showing a offline webpage to my client, after searching i have found to interesting tools for taking a whole web page screen shot.

 

Before I start to make websites screenshot, pressing "PrtScn" key is my first choice to take snapshots since it's easy to use and requires no additional tools. However, it fails to work when I want to have a copy of the whole web page even the part that extends beyond the screen. Lucky me, I finally find this free Webpage Screenshot Tool and get the image of the web page successfully.

 

Free screen capture for online and offline

ScreenShot.net is an free online tools which is offer users take screenshots like a breeze.

An application which has integrated essential screenshot functions, extreme image editor and free cloud service for Windows and Mac users. You can create amazing screenshots with your own annotations and make one-click upload to share them efficiently. Visual communication with images has never been so easy!

Screenshot.net also offer offline application this gorgeous screen cast tool lets you easily capture and edit anything on the screen including windows, objects, menus, media files, web pages, webcam and more. A Power Screen Capture software allows you variety of modes including full screen, customized region, application window, delayed capture and scrolling window. Built-in photo editor, ability to upload photos to social media, and its $0 price tag. Also, it supports devices range from Windows PC to Surface Pro, Mac and more.

 

 

Capture any on your screen with snagit

Snagit helps users transform the level and quality of their communication with video and images. Users can capture any image and enhance it with effects or create a quick video of their computer screen. No matter what you're working on, Snagit helps you capture great looking images and videos with just a few clicks. Easily customize your screen captures with effects, or show off what's important with Snagit’s markup tools. You can also create quick videos by recording your screen.

Snagit Screen Capture software also allows you variety of modes, you are able to take screenshots for full screen, particular region, specific program window, scrolling windows, web pages and so on. Built-in photo editor, ability to upload photos to social media, and its $0 price tag. Also, it supports devices range from Windows PC to Mac and more.

 

Use Google Drive to store images or videos so they are accessible on any device at anytime. To import images or videos from Google Drive into Snagit Editor, see Import Content from Google Drive.

 

How To Import Content from Google Drive

Use Google Drive to store images or videos so they are accessible on any device at anytime.
1. In Snagit Editor, select File > Import from Google Drive.

 

2. If you have not previously logged into your Google account, the Connect with Google Drive dialog appears. Enter your email and password and click Sign in.

 

3. Click Accept in the Connect with Google Drive dialog.

 

4. The Import from Google Drive dialog appears. Click to select the image or video to import into Snagit. Shift+click to import multiple images or videos.

 

5. Click the Import button.

Snagit adds the images or videos into the tray in Snagit Editor.

 

Snagit is available under $49 Price affordable for every professional user.

Download Snagit For Windows Pcs and For Mac.

 

 

I hope this tutorial helped. If you have any questions, please feel free to share them with us. Take care :) !! How do you screenshot webpage? Any other easy ways to share with me?

Read Article →

Add CSS3 & HTML5 Email Subscription Widget To Blogger Blog

After a long we are back again with a beautiful subscription box, If you aren’t building a email subscription widget, you’re missing significant opportunities to capture leads, build community, and create a sustainable way to communicate with those who are interested in what you have to say (and/or sell). Your subscriber is like diamond and it’s a resource you must develop, nurture and grow. It doesn’t matter what type of business or nonprofit work you are in or how big or small you are. You need to build your email subscription. But simply putting a newsletter sign-up form on your site isn’t the most effective thing you can do.  It’s also about how you place it on your site, what tactics you use to drive subscribers and it’s a LOT about content… what you share and how you communicate with your email subscription list so that you provide them value. So today we sharing with you a subscription widget with elegant design we have used image for background and also use HTML5 required attribute and some eye caching CSS3 effects we hope you may like it.

 

What our subscription widget is going to look like. See image below.

 

 

Live Preview

 

Little brief about HTML5

We will use HTML5's new required tag. Right now, different browsers will do different things when a form using HTML5 elements is submitted. When the form is submitted, most browsers will prevent the form from being submitted and will display a "hint" to the user, marking the first field that is required and has no value.

 

HTML5 validation works according to the type attribute that is set within the form fields. For years HTML only supported a handful of type attributes, such as type="text"  but with HTML5 there are a over a dozen new input types including email and url which we are going to use in our form.

 

add it to blogger blog

 

1. Go to Template > Edit HTML.

2. Back up your template.

3. Look for the following data tag in your Template.

 

]]></b:skin>

 

4. Paste the following code immediately above (before) it:

 

#subs_wrapper {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7xTs2_VzRZmYCxMaRMNOllPN_wNBipCrYVC-fb1GNi6BHqEmtzTLTSKYSXurhfgLE8dhOsXvC5DC2npu4QtT5VyaYfBqspPhyVvOQfWDccNWvaGjhVC-1LxPWZWEM2qCS8mW-h9AOVzQt/s1600/Subcription_bg.png) no-repeat;
    width: 300px;
    height: 250px;
    padding: 10px 10px;
    margin: 5px;
}

#subs_wrapper p {
    font-family: Tahoma, Geneva, sans-serif;
    margin-top: 60px;
    color: yellow;
    text-align: center;
    margin-right: 20px;
}

.subs_form input {
    height: 27px;
    font-size: 15px
    font-family:'Open Sans', sans-serif;
    font-size: 14px;
    border: 1px solid #26beaf;
    width: 238px;
    margin: inherit;
    padding: 6px;
    float:;
}

.subs_form input {
    margin: 2px;
}

.subs_form input {
    border: 1px solid #aaa;
    box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
    border-radius: 3px;
    padding-right: 30px;
    -moz-transition: padding .25s;
    -webkit-transition: padding .25s;
    -o-transition: padding .25s;
    transition: padding .25s;
}

.subs_form input:focus {
    background: #fff;
    border: 1px solid #fff;
    box-shadow: 0 0 3px #aaa;
}

*:focus {
    outline: none;
}

:-moz-placeholder {
    color: blue;
}

.emailinput {
    color: #666;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-style: italic;
}

::-webkit-input-placeholder {
    color: blue;
}

::-webkit-validation-bubble-message {
    padding: 1em;
    margin-left: -40px;
}

button.submit {
    background-color: #68b12f;
    background: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(#50911e));
    background: -webkit-linear-gradient(top, #68b12f, #50911e);
    background: -moz-linear-gradient(top, #68b12f, #50911e);
    background: -ms-linear-gradient(top, #68b12f, #50911e);
    background: -o-linear-gradient(top, #68b12f, #50911e);
    background: linear-gradient(top, #68b12f, #50911e);
    border: 1px solid #509111;
    border-bottom: 1px solid #5b992b;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    box-shadow: inset 0 1px 0 0 #9fd574;
    -webkit-box-shadow: 0 1px 0 0 #9fd574 inset;
    -moz-box-shadow: 0 1px 0 0 #9fd574 inset;
    -ms-box-shadow: 0 1px 0 0 #9fd574 inset;
    -o-box-shadow: 0 1px 0 0 #9fd574 inset;
    color: white;
    font-weight: bold;
    padding: 10px 96px;
    text-align: center;
    text-shadow: 0 -1px 0 #396715;
    list-style-type: none;
}

button.submit:hover {
    opacity: .85;
    cursor: pointer;
}

button.submit:active {
    border: 1px solid #20911e;
}

 

Now lets go and do one more step…

 

5. Now again look for the following data tag in your Template.

 

<div class='post-footer'>

 

Normally there are three instances of the tag present in your template ( post-footer, post-footer-line-1, post-footer-line-2 like this. Locate the post-footer (from top) one. 

 

6. Paste the following code immediately below (after) it:

 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<div  id="subs_wrapper" style='float:left;'>
<p> Get Latest Updates To Your Inbox..!</p>
<form class="subs_form" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=mybloggerstrick', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" method="post" action="http://feedburner.google.com/fb/a/mailverify">

  <input type="hidden" value="My Blogger Tricks" name="uri">
    <input type="hidden" value="en_US" name="loc">
    <input class="emailinput" type="email" value="Enter Your Email..." onfocus="if (this.value == &quot;Enter Your Email...&quot;) {this.value = &quot;&quot;}" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter Your Email...&quot;;}" name="email" required />
<button class="submit" type="submit">Submit Form
</button><br/>

<p style="color: #999; text-align:center; font-size: 10px; padding: 10px; margin: 20px 20px; text-decoration:none;">We Always Respect Your Privacy.</p>
</form>
</div>

</b:if>
</b:if>

 

Widget alignment

• Change the value of float property:
  Align right: set it to right;
  Align left: set it to left;

Note:- Must change mybloggertricks highlighted in yellow with your feedburner username..

Now click on save button and View your blog. The widget should appear on post pages.

I hope this tutorial helped. If you have any questions, please feel free to share them with us. Take care :)

Read Article →

(Info-Graphic) - Online Shopping Is Becoming Popular Day By Day

This is a Guest Post by Peter Sauer
Online Shopping is a technique of buying or even advertising and marketing by means of electronic medium. This is a kind of E-commerce website that allows consumers to get offerings specifically from the retailer over the internet using web browsers.

Glimpse of Online Shopping:

An English entrepreneur Michael Aldrich invented the concept of Online Shopping in 1979. He associated a modified domestic Television set to a real-time transaction processing computer by means of a domestic telephone line.

This methodology empowers closed corporate information systems to be opened to ‘outside’ correspondents not just for transaction processing but also for e-messaging and information retrieval and dissemination, known as e-business.

In 1990, Tim Berners- Lee created the first World Wide Web server and browser and in 1991, opened for commercial use. Due to resulting technological innovations came forth in 1994, online banking, launching Pizza Hut, Netscape’s SSL v2 encryption standard for secure information exchange, and Intershop’s first online shopping system were unveiled. Immediately after, in 1995, Amazon.com and eBay were initiated.

 Statistics show that online shopping trend is growing exponentially.

1. In 2012, Asia-Pacific increased their International sales over 30% giving them over $433 billion in revenue and created a difference of $69billion from the U.S. revenue of $364.66 billion.
2. It is estimated that in year 2014, Asia-Pacific will build its revenue by another 30%.
3. Industry experts state that in US, online retail sales will increase as much as 57% till 2018.

Increasing online retailers has transformed the shopping style of a human being.

Why Online shopping is becoming popular now?

• 1. Convenience
• 2. Infinite choices
• 3. Cheaper
• 4. Privacy in purchasing
• 5. Customer review
• 6. Experts review
• 7. Shipping facility
• 8. Return policy
• 9. Various Online Payment methods 
• 10. Cash On delivery facility
• 11. Customer service

Big Players of Online Marketing: Amazon.com, eBay, etsy.com, GroupOn, Alibaba.com, reebok.com, Pizza Hut, nike.com, WalMart, BestBuy.

We have seen lots of benefits of Online shopping over traditional shopping. So Keep Enjoying Online shopping and Save your Money and Effort. For learning more, scroll down to infographic. Click on the image for large veiw.

Peter Sauer is a Founder of Online Product Mall live in Miami, Florida, USA. The Online Product Mall is a online business that He started a few months back and would like to make it big, You can also find him on Facebook

Read Article →