Follow Our Site

Cool Social Media Sharing Touch Me Widget by Beautiful Blogger Widgets

Wednesday, September 12, 2012

Add Creature Style Social Media Icons To Blogger

This is another Creature style social media icons to blogger, this Blogger Widget will change the look of your Blogger Template. This is awesome Gadget as we know social media plays an important role in online business.Every one using social media to boost there leads and sales.

In this tutorial, I have introduced creature style social media icons such as Facebook, Twitter, and you can see them floating. So let's begin with this tutorial.



Live Demo



How to Add Creature Style Social Media Icons To Blogger ?

1. Go to your Blogger Dashboard > Template > Edit Html.
2. Please Back up your Template.
3. Expand Widget Templates.
4. Search for (Ctrl + F)   ]]></b:skin>
5. Paste the following code just below it.

.flt-b2wdt{
 position: fixed;
 right: 10px;
 top: 43%;
}
.flt-b2wdt img{
 float: right;
 clear: right;
 margin: 5px;
 -webkit-transition: all .2s ease-in-out;
 -moz-transition: all .2s ease-in-out;
 -o-transition: all .2s ease-in-out;
 transition: all .2s ease-in-out;
}
.flt-b2wdt img:hover{
 -moz-transform: scale(1.2) rotate(6deg);
 -webkit-transform: scale(1.2) rotate(6deg);
 -o-transform: scale(1.2) rotate(6deg);
 -ms-transform: scale(1.2) rotate(6deg);
 transform: scale(1.2) rotate(6deg);



6. Save your blogger template.
8. Next Step Go to Blogger Dashboard >> Layout.
9. Choose "Add a Gadget".
10. Select HTML/JavaScript.
11. Copy and paste below code

<!-- Floating Creatures Social Media Icons Start-->
<div class="flt-b2wdt">
 <!-- Facebook -->
 <a href="http://www.facebook.com/USERNAME" title="Join me on Facebook" target="_blank"><img alt="Join me on Facebook" src="https://lh3.googleusercontent.com/-QaLRred01jw/ToE0l2ruGBI/AAAAAAAACvc/ydfvF-xOi_4/s800/Facebook_creatures.png" /></a>
 <!-- Twitter -->
 <a href="http://twitter.com/USERNAME" title="Follow me on Twitter" target="_blank"><img alt="Follow me on Twitter" src="https://lh3.googleusercontent.com/-HiZe1pm_Rok/ToE0l_3Wl4I/AAAAAAAACvY/ztE85o-w3Lg/s800/Fa_Twitter_creatures.png" /></a>
 <!-- RSS -->
 <a href="http://feeds.feedburner.com/USERNAME" title="Subscribe to RSS" target="_blank"><img alt="Subscribe to RSS" src="https://lh5.googleusercontent.com/-16rpSgs_Rdk/ToE0l6-gnjI/AAAAAAAACvg/pbKahocVGVg/s800/Feed_creatures.png" /></a>
 <!-- How to Install -->
 
</div>
<!-- Floating Creatures Social Media Icons End -->




Important Note

Replace USERNAME with your Feed Burner, Facebook and Twitter Username.

12. Last step save your template. Now you get Creature Style Social Media Icons for your blogger site.

If any problem occurs Contact us  :)

[Continue Reading]

Wednesday, September 5, 2012

Stylish London Creative Photography Premium Template



Live Demo

Download


This is amazing template designed by soratemplate.com . This is London creative photography template.

Features

  • Automatic Sliding
  • Small Sliding bar after Main Sliding bar
  • Thumbnail Effect on Post
  • Page Navigation on Top
  • Popular Post Widgets






[Continue Reading]

Tuesday, September 4, 2012

Awesome 3D Social Buttons with Rotating Effect for blogger

This Social buttons are awesome with nice 3D rotating effect. Full css were used in this trick, when you move your mouse cursor over each icon it rotates spin of 360 degrees an also spin back when cursor is removed. You will able to see nice hover effects on these buttons

These Social Buttons Includes

Facebook
Twitter
Google+
Pinterest
Feedburner reader count

Live Demo



How to add 3D Social Buttons with Rotating Effect for blogger?

  1.  Go to your Blogger Dashboard > Layout.
  2.  Click on the 'Add A Gadget' > HTML Javascript.
  3.  Last step copy and paste below code in HTML Javascript Gadget.

<style>
#social a:hover {
background-color: transparent;opacity:0.7;
}
#social img {
-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;
}
#social img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
</style>
<center>
<div id="social"><a title="Grab Our Rss Feed" href="YOUR-FEED-URL-HERE" target="_blank"><img border="0" src="http://3.bp.blogspot.com/-JJAnjTFe4mQ/UA6_gexOboI/AAAAAAAAH8w/pUVfxnjRUM4/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a><a rel="nofollow" title="Get Free Updates Via Email" href="YOUR-EMAIL-RSS-URL-HERE" target="_blank"><img border="0" src="http://4.bp.blogspot.com/-1BWe2ZnJHas/UA6_hrD6_GI/AAAAAAAAH80/exs4JwDuyhY/s1600/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon"/></a><a rel="nofollow" title="Like Our Facebook Page" href="YOUR-FACEBOOK-PAGE-URL-HERE" target="_blank"><img border="0" src="http://4.bp.blogspot.com/-dkmDM3RXcoE/UA6_d28wCyI/AAAAAAAAH8Y/9E3PI3lXueM/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"/></a><a rel="nofollow" title="Follow Our Updates On Twitter" href="YOUR-TWITTER-URL-HERE" target="_blank"><img border="0" src="http://3.bp.blogspot.com/-TrNf8cdHE6w/UA6_iRAUK_I/AAAAAAAAH88/Jo7RAX207xo/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a><a title="Follow Us On Google+" rel="nofollow" href="YOUR-GOOGLE-PLUS-URL-HERE" target="_blank"><img style="margin-right:1px;" src="http://2.bp.blogspot.com/-VeOVFTKCvHw/UA6_em6-aOI/AAAAAAAAH8c/Uu4blSzFwLk/s1600/GOOGLE-PLUS-48x48.png"/></a><a title="Follow Our Pins" rel="nofollow" href="YOUR-PINTEREST-URL-HERE" target="_blank"><img style="margin-right:1px;" src="http://4.bp.blogspot.com/-uSSbLLRLSIE/UA6_fTHiLrI/AAAAAAAAH8k/OxlFAJozvX8/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a></div>
<br/>
<a href="YOUR-FEEDBURNER-URL-HERE" target="_blank"><img alt="Beautiful Blogger Widgets" src="http://feeds.feedburner.com/~fc/beautifulbloggerwidgets?bg=ff9933&fg=000000&anim=1" style="border:0" /></a>
</center>


Note: Replace following with your URL

YOUR-FEED-URL-HERE
YOUR-EMAIL-RSS-URL-HERE
YOUR-FACEBOOK-PAGE-URL-HERE
YOUR-TWITTER-URL-HERE
YOUR-GOOGLE-PLUS-URL-HERE
YOUR-PINTEREST-URL-HERE
YOUR-FEEDBURNER-URL-HERE

If any problems occurs please Comment
[Continue Reading]

Saturday, September 1, 2012

How to Add Meta Tags to Blogger Step by Step

What are Meta tags?

Meta tags are the small piece of HTML code which is found inside a webpage and that specific code describe the information about that webpage or site.

Importance of Meta tags

There is a lot of theory regarding using meta tags, some says meta tags used for data about who made each page. Meta tags plays important role in search engine algorithm, these tags are vital part of the site body which is visible to search engine crawlers but your users can’t see that code. By using meta tags you can tell search engines what your site is for,you can target your primary keywords for your SERP system.

  • Go to Dashboard>>Edit HTML
  • Press Control+F and find code
  • Copy following code and add after tag

<meta content='Your Site Description' name='description'/>
<meta content='Your Keywords' name='keywords'/>





That’s it

[Continue Reading]

Saturday, August 25, 2012

Getting Started with Blogspot step by step tutorials.

Blogspot is famous blogger platform in which you can make free blog with .Blogspot domain.Blogger now redirected to a country-specific domain suppose if lives in India domain will be .in or if you in Australia domain will be .com.

Following are steps to create Blogger Account

Step 1

  1. Go to www.blogger.com
  2. Create free account
  3. follow all sign up process
  4. Select template design
  5. Thats is you can start posting your contents now.   

Step 2 Video tutorial

[Continue Reading]
Powered By Blogger · Designed By Seo Blogger Templates