WELCOME TO EHOST.COM.NP

Friday, September 26, 2014

Social Plugins: Stay Tuned Social Subscription Widget V 2.0

ads space

Plugin Preview 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:

]]>

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/AVvXsEgP_fdXqE-fG8sFm3sKkXxhCF5nlAX2Q76T0Ynm-xTVdQpO3AY9NuzOd-XsfZBpb0oPihaAn6MPHIfg5AdEVbQ9E0Dz9-pb2YkRO8x9vk9ZQcJS-m3UjTofX8meuXPfcDkKK5HGGJo_1Qpr/s1600/social_sprite.png") no-repeat;
}

.social_profiles li .twitter {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP_fdXqE-fG8sFm3sKkXxhCF5nlAX2Q76T0Ynm-xTVdQpO3AY9NuzOd-XsfZBpb0oPihaAn6MPHIfg5AdEVbQ9E0Dz9-pb2YkRO8x9vk9ZQcJS-m3UjTofX8meuXPfcDkKK5HGGJo_1Qpr/s1600/social_sprite.png") no-repeat 0px -45px;
}

.social_profiles li .gplus {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP_fdXqE-fG8sFm3sKkXxhCF5nlAX2Q76T0Ynm-xTVdQpO3AY9NuzOd-XsfZBpb0oPihaAn6MPHIfg5AdEVbQ9E0Dz9-pb2YkRO8x9vk9ZQcJS-m3UjTofX8meuXPfcDkKK5HGGJo_1Qpr/s1600/social_sprite.png") no-repeat 0px -90px;
}

.social_profiles li .pinterest {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP_fdXqE-fG8sFm3sKkXxhCF5nlAX2Q76T0Ynm-xTVdQpO3AY9NuzOd-XsfZBpb0oPihaAn6MPHIfg5AdEVbQ9E0Dz9-pb2YkRO8x9vk9ZQcJS-m3UjTofX8meuXPfcDkKK5HGGJo_1Qpr/s1600/social_sprite.png") no-repeat 0px -135px;
}

.social_profiles li .rss {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP_fdXqE-fG8sFm3sKkXxhCF5nlAX2Q76T0Ynm-xTVdQpO3AY9NuzOd-XsfZBpb0oPihaAn6MPHIfg5AdEVbQ9E0Dz9-pb2YkRO8x9vk9ZQcJS-m3UjTofX8meuXPfcDkKK5HGGJo_1Qpr/s1600/social_sprite.png") no-repeat 0px -180px;
}

.social_profiles li .linkedin {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP_fdXqE-fG8sFm3sKkXxhCF5nlAX2Q76T0Ynm-xTVdQpO3AY9NuzOd-XsfZBpb0oPihaAn6MPHIfg5AdEVbQ9E0Dz9-pb2YkRO8x9vk9ZQcJS-m3UjTofX8meuXPfcDkKK5HGGJo_1Qpr/s1600/social_sprite.png") no-repeat 0px -225px;
}

.social_profiles li .tumblr {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP_fdXqE-fG8sFm3sKkXxhCF5nlAX2Q76T0Ynm-xTVdQpO3AY9NuzOd-XsfZBpb0oPihaAn6MPHIfg5AdEVbQ9E0Dz9-pb2YkRO8x9vk9ZQcJS-m3UjTofX8meuXPfcDkKK5HGGJo_1Qpr/s1600/social_sprite.png") no-repeat 0px -270px;
}

.social_profiles li .youtube {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP_fdXqE-fG8sFm3sKkXxhCF5nlAX2Q76T0Ynm-xTVdQpO3AY9NuzOd-XsfZBpb0oPihaAn6MPHIfg5AdEVbQ9E0Dz9-pb2YkRO8x9vk9ZQcJS-m3UjTofX8meuXPfcDkKK5HGGJo_1Qpr/s1600/social_sprite.png") no-repeat 0px -315px;
}

.social_profiles li .mail {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP_fdXqE-fG8sFm3sKkXxhCF5nlAX2Q76T0Ynm-xTVdQpO3AY9NuzOd-XsfZBpb0oPihaAn6MPHIfg5AdEVbQ9E0Dz9-pb2YkRO8x9vk9ZQcJS-m3UjTofX8meuXPfcDkKK5HGGJo_1Qpr/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:

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:


Don't Miss Any Update, Join Us on Social Networks.


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..!! :)

ads space
ADS SPACE

0 comments:

Post a Comment

Categories

Article How-to All Posts WordPress Android Web design Blogger Plugins CSS Google JQuery Plugins Programming Reviews Web Hosting Blogger Blogging Blogging Tips Tricks Web Development Facebook Git Internet Make Money Online Social Plugins Tips Tips and Tricks Tools Tutorials Windows WordPress Plugins Blogging Tips and Tricks Freebies GSM Google Analytics HTML How To's JavaScript Plugin Development S.E.O SEO SMS SmartPhone Social Media Tips amp; Tricks Top-Most Updates Webmaster Tools Whatsapp Applications Apps Blogger Basics Documentary Downloads Entertainment Gadgets Games Gmail Google AdSense Guest Post IPhone Make Money Blogging SVN Security Softwares Web Hosting Tips and Tricks Wordpress Tips Wordpress Tips and Tricks hostgator iOS Advertising Networks Advertising Technology Affiliates Antivirus Audience amp; Traffic Biography Blog post Blog post Blogger Blogger Errors Blogger Tips Blogger Tools Blogger Widget Blogosphere Bogger Widgets CSS selectors CSS symbols CSS3 Computer amp; Internet Content Writing Coupon Codes Data amp; Analytics Deleted blog Design DoubleClick for Publishers Email and newsletter marketting Email marketing Excel Tips Excel Tips and Tricks Facebook Tricks Feed Feedburner Feedburner subscribers Font Fun GitHub Giveaways Gmail primary inbox Gmail tabs Google sign-in Guides HTML amp; CSS HTML5 Infographics Inspirational Instagram Internet Marketing Internet Tips amp; Tricks Job Listings Knowledge Life Hacks Lists Make-Money Monetization amp; Conversion Monetize Navigation Online Marketing Other PHP Tutorials Passport Publishing amp; Content Quotes RSS Sidebar Smartphones Social Networking Status Tech Tech Blog Technology Telegram Themes UI / UX User Psychology amp; Research VB.Net Web Tools Web browser Widget Windows Tips Windows-10 ad viewability admin notice blogging tools bluehost cherry-pick clone cors custom scrollbar customizer dismissible notices duplicate post feed title git branch git clone gpg gpg2 hybridauth iPad icon font notice responsive wordpress theme same origin policy scrollbar signed git commit smartsvn theme customizer vcs wordpress theme wordpress themes

Blog Archive