September 2013 ~ Spice Up Your Blog

Tuesday, September 10, 2013

Mini Social Icons With CSS And Image Sprite Flip Effect

Just last week I published the pop out effect social icons.In a comment on that post Ger asked "Can you write a tutorial for the icons you have in the footer of this page ? The ones that turn color on hover !".The icons he refers to are a neat set of simple icons with a flip color effect and they are a popular option on many of the top websites and blogs.I only added them to the footer in the last site update and had not planned on a tutorial but ask and you shall receive.

So like the pop out icons these use simple CSS to create the effect but this time we also use a sprite instead of individual images.This makes the flip smooth and adds less load time to your blog.I have tutorials for adding them to your sidebar on bothWordpress and Blogger but you could add them to your blog footer or even in a menu.

The icons are for Facebook, Twitter, Google+, Rss Feed, Pinterest, Skype, Vimeo, Dribbble, Flickr, LinkedIn and Youtube.But as I did in the footer you can remove the icons you don't want displayed.

Live Demo :

This is a live demo so you can hover to see the effect.

Adding The Mini Flip Social Icons To Blogger

Step 1) In The New Blogger Dashboard Click The Drop Down For Your Blog > Choose Layout > Click Add A Gadget > Choose HTML/Javascript > Paste In The Code as shown in the video below :

Code :

<ul class="spicesocialwidget">
<li class="facebook">
<a rel="nofollow" href="http://www.facebook.com/" target="_blank" title="facebook">
</a></li>
<li class="googleplus">
<a rel="nofollow" href="https://plus.google.com/" target="_blank" title="googleplus">
</a></li>
<li class="pinterest">
<a rel="nofollow" href="http://pinterest.com/" target="_blank" title="pinterest">
</a></li>
<li class="twitter">
<a rel="nofollow" href="http://twitter.com/" target="_blank" title="twitter">
</a></li>
<li class="rss">
<a rel="nofollow" href="http://feedburner.com/" target="_blank" title="rss">
</a></li>
<li class="skype">
<a rel="nofollow" href="http://www.skype.com/" target="_blank" title="Skype">
</a></li>
<li class="vimeo">
<a rel="nofollow" href="http://www.vimeo.com/" target="_blank" title="vimeo">
</a></li>
<li class="dribbble">
<a rel="nofollow" href="http://www.dribbble.com/" target="_blank" title="dribble">
</a></li>
<li class="flickr">
<a rel="nofollow" href="http://www.flickr.com/" target="_blank" title="flickr">
</a></li>
<li class="linkedin">
<a rel="nofollow" href="http://www.linkedin.com/" target="_blank" title="linkedin">
</a></li>
<li class="youtube">
<a rel="nofollow" href="http://www.youtube.com/" target="_blank" title="youtube">
</a></li>
</ul>
<style>
ul.spicesocialwidget {float:right;}
ul.spicesocialwidget li {float:left;list-style: none outside none;border:none;}
ul.spicesocialwidget li a{background-color:transparent;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPJkdWRSZF7NMQldK3yGo577s0x0C3_wUZSwJO4HVhZKSUlAWq70Ou3CO4k96STeyr1hoUQp_zU2RlbV4IPRu24FzBq7cHzGHlu9mPDwb2wlE6cewYcY6bUHveufl-5jbggIU2pq8lmmeB/s1600/spice-social-gadget-sprite.png');background-repeat:no-repeat;background-size:auto 96px;border:0 none;color:white;direction:ltr;display:block; height:32px;overflow:hidden;text-align:left;text-decoration:none;text-indent:-999em;transition:all 0.2s ease 0s;width:32px}
.ie7 ul.spicesocialwidget li a, .ie8 ul.spicesocialwidget li a{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPJkdWRSZF7NMQldK3yGo577s0x0C3_wUZSwJO4HVhZKSUlAWq70Ou3CO4k96STeyr1hoUQp_zU2RlbV4IPRu24FzBq7cHzGHlu9mPDwb2wlE6cewYcY6bUHveufl-5jbggIU2pq8lmmeB/s1600/spice-social-gadget-sprite.png' )}
ul.spicesocialwidget li.facebook a{ background-position:0 0}
ul.spicesocialwidget li.flickr a{ background-position:-32px 0}
ul.spicesocialwidget li.dribbble a{ background-position:-64px 0}
ul.spicesocialwidget li.googleplus a{ background-position:-96px 0}
ul.spicesocialwidget li.linkedin a{ background-position:-128px 0}
ul.spicesocialwidget li.pinterest a{ background-position:-160px 0}
ul.spicesocialwidget li.rss a{ background-position:-192px 0}
ul.spicesocialwidget li.skype a{ background-position:-224px 0}
ul.spicesocialwidget li.twitter a{ background-position:-256px 0}
ul.spicesocialwidget li.vimeo a{ background-position:-288px 0}
ul.spicesocialwidget li.youtube a{ background-position:-320px 0}
ul.spicesocialwidget li.facebook a:hover, #sidebar ul.spicesocialwidget li.facebook a:hover{ background-position:0 -32px}
ul.spicesocialwidget li.flickr a:hover, #sidebar ul.spicesocialwidget li.flickr a:hover{ background-position:-32px -32px}
ul.spicesocialwidget li.dribbble a:hover, #sidebar ul.spicesocialwidget li.dribbble a:hover{ background-position:-64px -32px}
ul.spicesocialwidget li.googleplus a:hover, #sidebar ul.spicesocialwidget li.googleplus a:hover{ background-position:-96px -32px}
ul.spicesocialwidget li.linkedin a:hover, #sidebar ul.spicesocialwidget li.linkedin a:hover{ background-position:-128px -32px}
ul.spicesocialwidget li.pinterest a:hover, #sidebar ul.spicesocialwidget li.pinterest a:hover{ background-position:-160px -32px}
ul.spicesocialwidget li.rss a:hover, #sidebar ul.spicesocialwidget li.rss a:hover{ background-position:-192px -32px}
ul.spicesocialwidget li.skype a:hover, #sidebar ul.spicesocialwidget li.skype a:hover{ background-position:-224px -32px}
ul.spicesocialwidget li.twitter a:hover, #sidebar ul.spicesocialwidget li.twitter a:hover{ background-position:-256px -32px}
ul.spicesocialwidget li.vimeo a:hover, #sidebar ul.spicesocialwidget li.vimeo a:hover{ background-position:-288px -32px}
ul.spicesocialwidget li.youtube a:hover, #sidebar ul.spicesocialwidget li.youtube a:hover{ background-position:-320px -32px}
</style>

Note Change the links in yellow with links to your social profiles.

Adding The Mini Flip Social Icons To Wordpress

1) In Your Wordpress Dashboard Click 'Apperance' > 'Widgets' > Add A text Widget to your sidebar and paste in the code as shown in the video below :

Code :

<ul class="spicesocialwidget">
<li class="facebook">
<a rel="nofollow" href="http://www.facebook.com/" target="_blank" title="facebook">
</a></li>
<li class="googleplus">
<a rel="nofollow" href="https://plus.google.com/" target="_blank" title="googleplus">
</a></li>
<li class="pinterest">
<a rel="nofollow" href="http://pinterest.com/" target="_blank" title="pinterest">
</a></li>
<li class="twitter">
<a rel="nofollow" href="http://twitter.com/" target="_blank" title="twitter">
</a></li>
<li class="rss">
<a rel="nofollow" href="http://feedburner.com/" target="_blank" title="rss">
</a></li>
<li class="skype">
<a rel="nofollow" href="http://www.skype.com/" target="_blank" title="Skype">
</a></li>
<li class="vimeo">
<a rel="nofollow" href="http://www.vimeo.com/" target="_blank" title="vimeo">
</a></li>
<li class="dribbble">
<a rel="nofollow" href="http://www.dribbble.com/" target="_blank" title="dribble">
</a></li>
<li class="flickr">
<a rel="nofollow" href="http://www.flickr.com/" target="_blank" title="flickr">
</a></li>
<li class="linkedin">
<a rel="nofollow" href="http://www.linkedin.com/" target="_blank" title="linkedin">
</a></li>
<li class="youtube">
<a rel="nofollow" href="http://www.youtube.com/" target="_blank" title="youtube">
</a></li>
</ul>
<style>
ul.spicesocialwidget {float:right;}
ul.spicesocialwidget li {float:left;list-style: none outside none;border:none;}
ul.spicesocialwidget li a{background-color:transparent;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPJkdWRSZF7NMQldK3yGo577s0x0C3_wUZSwJO4HVhZKSUlAWq70Ou3CO4k96STeyr1hoUQp_zU2RlbV4IPRu24FzBq7cHzGHlu9mPDwb2wlE6cewYcY6bUHveufl-5jbggIU2pq8lmmeB/s1600/spice-social-gadget-sprite.png');background-repeat:no-repeat;background-size:auto 96px;border:0 none;color:white;direction:ltr;display:block; height:32px;overflow:hidden;text-align:left;text-decoration:none;text-indent:-999em;transition:all 0.2s ease 0s;width:32px}
.ie7 ul.spicesocialwidget li a, .ie8 ul.spicesocialwidget li a{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPJkdWRSZF7NMQldK3yGo577s0x0C3_wUZSwJO4HVhZKSUlAWq70Ou3CO4k96STeyr1hoUQp_zU2RlbV4IPRu24FzBq7cHzGHlu9mPDwb2wlE6cewYcY6bUHveufl-5jbggIU2pq8lmmeB/s1600/spice-social-gadget-sprite.png' )}
ul.spicesocialwidget li.facebook a{ background-position:0 0}
ul.spicesocialwidget li.flickr a{ background-position:-32px 0}
ul.spicesocialwidget li.dribbble a{ background-position:-64px 0}
ul.spicesocialwidget li.googleplus a{ background-position:-96px 0}
ul.spicesocialwidget li.linkedin a{ background-position:-128px 0}
ul.spicesocialwidget li.pinterest a{ background-position:-160px 0}
ul.spicesocialwidget li.rss a{ background-position:-192px 0}
ul.spicesocialwidget li.skype a{ background-position:-224px 0}
ul.spicesocialwidget li.twitter a{ background-position:-256px 0}
ul.spicesocialwidget li.vimeo a{ background-position:-288px 0}
ul.spicesocialwidget li.youtube a{ background-position:-320px 0}
ul.spicesocialwidget li.facebook a:hover, #sidebar ul.spicesocialwidget li.facebook a:hover{ background-position:0 -32px}
ul.spicesocialwidget li.flickr a:hover, #sidebar ul.spicesocialwidget li.flickr a:hover{ background-position:-32px -32px}
ul.spicesocialwidget li.dribbble a:hover, #sidebar ul.spicesocialwidget li.dribbble a:hover{ background-position:-64px -32px}
ul.spicesocialwidget li.googleplus a:hover, #sidebar ul.spicesocialwidget li.googleplus a:hover{ background-position:-96px -32px}
ul.spicesocialwidget li.linkedin a:hover, #sidebar ul.spicesocialwidget li.linkedin a:hover{ background-position:-128px -32px}
ul.spicesocialwidget li.pinterest a:hover, #sidebar ul.spicesocialwidget li.pinterest a:hover{ background-position:-160px -32px}
ul.spicesocialwidget li.rss a:hover, #sidebar ul.spicesocialwidget li.rss a:hover{ background-position:-192px -32px}
ul.spicesocialwidget li.skype a:hover, #sidebar ul.spicesocialwidget li.skype a:hover{ background-position:-224px -32px}
ul.spicesocialwidget li.twitter a:hover, #sidebar ul.spicesocialwidget li.twitter a:hover{ background-position:-256px -32px}
ul.spicesocialwidget li.vimeo a:hover, #sidebar ul.spicesocialwidget li.vimeo a:hover{ background-position:-288px -32px}
ul.spicesocialwidget li.youtube a:hover, #sidebar ul.spicesocialwidget li.youtube a:hover{ background-position:-320px -32px}
</style>

Note : Change the links in yellow with links to your social profiles.

And that's it, thanks for your comment Ger I hope you like the icons and use them on your blog.

Drop your comments and questions below.

Top 10 Mistakes Beginner Bloggers Make With Social Media

Guest Post - Our host is Chad Goulde, here Chad takes a fresh look at some of the Social Media Mistakes bloggers make be making.See How To Become a guest author on Spice Up Your Blog.

Today, there are so many social media sites, which all operate completely different from one another. For beginners, choosing the right one for your blog marketing can be very confusing. What’s even more confusing for beginners is figuring out how to use these various social media networks effectively.

Social Media Mistakes for Beginners to Avoid

There are some pretty common mistakes that social media beginners tend to make. Avoiding them from the beginning could help save you time, money and frustration in the long-run. Plus, your networking efforts will start to reap great results right from the start. Here are 10 common mistakes beginners should avoid when using social media as a marketing tool:

1) Using Facebook Only

When people think of social media, the first site that usually comes to mind is Facebook. Yet, this is not the only network that can effectively help market your site or blog. When it comes to business networking, you need to utilize other networks where your target audience can be found. Play around with Google+,Pinterest, LinkedIn, Twitter, MySpace and YouTube as well. That’s the best way to determine which platforms are best for your industry and reaching your target market.

2) Trying to Use Too Many Social Networks

Although you should concentrate on more than just Facebook, you don’t want to use too many social media sites at once. Why? Because it’s impossible to be engaging with too many audiences at ones. At some point, some of your networks will begin to suffer, along with the content you share, post and tweet. Determine which 1-2 others to concentrate on. Then, focus on quality, not quantity when posting.

3) Your Website and Blog Have No Social Media Icons

Your audience want a simple, on-click method for joining your social networks, as well as sharing your content. Add social media buttons/icons to give them this in very prominent, easy-to-spot areas on your website and blog.

4) You Only Share Your Own Content

Only savvy, established, famous bloggers can do this without bringing down their popularity. Beginners are in the process of building their online presence, trying to get noticed and increase social media network members. Sharing relevant content from other industry leaders is a very effective way to provide your target audience with even more valuable content and resources they can actually use.

5) You Simply Refuse to #FollowBack

If you never make an effort to follow people who are already following you, many will simply leave your network altogether. Although this is not a social rule set in stone, it is considered to be social media etiquette when trying to build your networks on social media sites.

6) You Confuse a Personal Profile with a Business Profile

Just about all of the most popular social networks have separate versions for business and personal profiles. Facebook and Google+ require you to have personal profiles before setting up your business profiles. Twitter and Pinterest business profiles can be established without personal profiles. No matter which platform you choose to use for social media marketing, make sure that you’re using a business profile, not your personal one.

7) You’re Don’t Engage Your Audience

Social media marketing is all about networking with your target audience, as well as engaging them. One of your goals should be to interact with your audience to create interest in your brand and solutions. This will encourage them to visit your blog for more valuable industry insight, follow it and share your content with their social media networks.

8) You Think All Your Fans and Followers See All Your Posts

Let’s break down how your post views actually work. Say your Facebook business page has 2,000 fans. You publish a new post on your business page. Only about 10%, or 200 of your fans will actually see your post in their individual timelines. All of the other popular social networks have very similar rules. Want to increase your posts’ reach? You’ll need to pay for advertising?

9) Your Posts Don’t Contain Interesting, Relevant Image

Images help to break up text, making your posts more pleasing to the eyes. According to social media marketing studies, these posts get more pins, G+s, likes, tweets and shares than those without images. So, include quality images in your social media posts when possible.Pictures also help get shares on Pinterest.

10) You Don’t Utilize #HashTags

Hashtags make it easier for people to follow social media discussions about particular topics. For example, let’s say you’re posting NBA Finals updates. Using the hashtag #NBAFinals in your posts will ensure that people searching for this info can find it quickly and easily. All they have to do is conduct social media searches using the hashtag, and related posts will automatically appear in results.

What do you think ? Add your comments below.

Optimize your Blog Performance to use of Auto Read More Script : Blogger

What is Auto Read More Script?

Mainly Auto Read More Script use for create blog post summary with thumbnail.Expandable post or popularly known as “read more” is a feature that make your blog shows only a part of your posts on index pages i.e. home, labels and archive pages. At the end of each preview there will be a link to the post page, usually attached to the phrase “read more”.

Why should you use this script?
It's optimize your blog performance.
Increase SEO [Search Engine Optimization].
Decrease page Load time.

How it's work and features?

It's automatically set first image of your blog post and create summary from your post (according to set no. of word in your auto read more script ).
Float your image left or right both.
Add default thumbnail image when posts don’t have any images.
Option to turn off auto readmore for some first posts.
Option to turn on/off auto readmore for homepage and label page.

How to install Auto Read More Script-

First go to Blogger Dash Board>>Template>>Edit HTML
After find the </head> tag and paste the below code before </head> tag.

<script type="text/javascript">var summaryConf = { showImage: true, imgFloat: 'left', imgWidth: 120, imgHeight: 90, defaultThumb: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh1lYJCmEPC2kyNS6tueZ6ItKgUnzW6Ppk4SPfcOerCEGuWAETk__3TNLQCJ0fhT79DNsH59p0g5yFPvKb7rDmYN1G1zCBpgoY_y3tpDJYZmoDwOjs3gsAdzJHDBlA5nZEcOlU_ZsmHciw/s1600/no+thumbnail+available+.png', words: 65, wordsNoImg: 80, skip: 0, showHome: true, showLabel: true};</script><script type="text/javascript" src="https://googledrive.com/host/0Bx4EcEKX-gK0NzRVeXlNdEh6N2M"></script>

After that , find this below tag/line in your Blog Template code.

<data:post.body/>

Replace with:

<span expr:id='data:post.id'><data:post.body/></span> <b:if cond='data:blog.pageType == "index"'> <script type='text/javascript'>summary("<data:post.id/>")</script><b:else/> <b:if cond='data:blog.pageType =="archive"'> <script type='text/javascript'>summary("<data:post.id/>")</script> </b:if></b:if>

Save All and exit. See the blog - Read More Script Work Perfectly or Not.

How to customize these options-

The options are very easy to change. It’s declared in the first part of script above. These are their meanings:

showImage: do you want to show thumbnail? If yes, set it true, if no, set it false.

imgFloat: there are 3 values of this option: 'left' – float thumbnail to the left, 'right' – float thumbnail to the right and 'no' – no thumbnail float. Note the quotes around values.

imgWidth and imgHeight: thumbnail size.

defaultThumb: default thumbnail URL, used when posts don’t have any images.

words và wordsNoImg: number of words shown in summary when have thumnail and no thumbnail.

skip: skip some first posts, don’t apply auto readmore for them. If this option is set to 0, all posts are applied auto readmore.

showHome and showLabel: allow or not auto readmore for homepage and label page. true is allowed, false is not.

Adjust these options to fit your blog and enjoy!

Conventional read more vs. auto read more-

Conventional read more	Auto read more with thumbnail
Uses HTML	Javascript
Need to insert code in post.	Post is untouched.
Length of each snippet can be customized.	Length can be changed, but it affects all posts.
Read More is applied only to posts with the code added.	Read More applied to all posts, no exception.
No thumbnail. To show picture, you must place the picture inside the snippet (at the beginning of post).	The first picture in each post will be used as a thumbnail. You can also choose not to show thumbnail.
The code loads full post but only shows the snippet.	Only loads the snippet.

We hope all of you enjoy this post and share it. Please drop your valuable comment.

Monday, September 9, 2013

Professional Social Sidebar Widget for Blogger and Website 2013

Many people think that Blogger lacks in all of the extra goodies you can add to other platforms like WordPress, but it simply isn't true. By using widgets you can customize your blog as much as you like by just adding little snippets of code to the sidebars.

Today I'm publish a Professional Social Sidebar Widget for Blogger. It's very attractive and beautiful social widget. This social connect widget position at sidebar and include slide out connect social options.Let's see the demo and check out tutorial :

Live Demo

How to add Professional Social Sidebar Widget on Blogger

First go to Blogger Homepage - Blogger Login Page and Select More Option as seen below screenshots.

Then after select Layout Option and Go to add widget HTML/JAVASCRIPT. Select the given below code and paste between blank place on widget option & save it.

<div id='social-sidebar'>
<ul>
<li>
<a class='entypo-twitter' href='https://twitter.com/digitalhubinc' target='_blank'>
<span>Twitter</span>
</a>
</li>
<li>
<a class='entypo-gplus' href='http://dribbble.com/digitalhubinc' target='_blank'>
<span>google+</span>
</a>
</li>
<li>
<a class='entypo-tumblr' href='http://www.tumblr.net/digitalhubinc' target='_blank'>
<span>tumblr</span>
</a>
</li>
<li>
<a class='entypo-facebook' href='http://www.facebook.net/digitalhubinc' target='_blank'>
<span>facebook</span>
</a>
</li>
<li>
<a class='entypo-rss' href='http://feeds.feedburner.com/digitalhubinc' target='_blank'>
<span>feedburner</span>
</a>
</li>
</ul>
</div>
<style type='text/css'>
/*<![CDATA[*/
@charset "utf-8";
/* CSS Document */
/* ---------- ENTYPO ---------- *//* ---------- Digital Hub Inc : http://www.digitalhubinc.com/---------- */
/* ---------- http://weloveiconfonts.com/ ---------- */
@import url(http://weloveiconfonts.com/api/?family=entypo);
[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
}
/* ---------- GENERAL ---------- */
#social-sidebar a { text-decoration: none; }
#social-sidebar ul {
list-style: none;
margin: 0;
padding: 0;
}
/* ---------- Social Sidebar ---------- */
#social-sidebar {
left: 0;
margin-top: -75px; /* (li * a:width) / -2 */
position: fixed;
top: 50%;
}
#social-sidebar ul li:first-child a { border-radius: 0 5px 0 0; }
#social-sidebar ul li:last-child a { border-radius: 0 0 5px 0; }
#social-sidebar ul li a {
background: #121212;
color: #fff;
display: block;
height: 50px;
font-size: 18px;
line-height: 50px;
position: relative;
text-align: center;
width: 50px;
}
#social-sidebar ul li a:hover span {
left: 130%;
opacity: 1;
}
#social-sidebar ul li a span {
border-radius: 3px;
line-height: 24px;
left: -100%;
margin-top: -16px;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
padding: 4px 8px;
position: absolute;
-webkit-transition: opacity .3s, left .4s;
-moz-transition: opacity .3s, left .4s;
-ms-transition: opacity .3s, left .4s;
-o-transition: opacity .3s, left .4s;
transition: opacity .3s, left .4s;
top: 50%;
z-index: -1;
}
#social-sidebar ul li a span:before {
content: "";
display: block;
height: 8px;
left: -4px;
margin-top: -4px;
position: absolute;
top: 50%;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
width: 8px;
z-index: -2;
}
#social-sidebar ul li a[class*="twitter"]:hover,
#social-sidebar ul li a[class*="twitter"] span,
#social-sidebar ul li a[class*="twitter"] span:before { background: #6CDFEA; }
#social-sidebar ul li a[class*="gplus"]:hover,
#social-sidebar ul li a[class*="gplus"] span,
#social-sidebar ul li a[class*="gplus"] span:before { background: #E34429; }
#social-sidebar ul li a[class*="tumblr"]:hover,
#social-sidebar ul li a[class*="tumblr"] span,
#social-sidebar ul li a[class*="tumblr"] span:before { background: #1769ff; }
#social-sidebar ul li a[class*="facebook"]:hover,
#social-sidebar ul li a[class*="facebook"] span,
#social-sidebar ul li a[class*="facebook"] span:before { background: #234999; }
#social-sidebar ul li a[class*="rss"]:hover,
#social-sidebar ul li a[class*="rss"] span,
#social-sidebar ul li a[class*="rss"] span:before { background: #f57b05; }
/*]]>*/
</style>