Unicornix: Blogger widget

Showing posts with label Blogger widget. Show all posts

Friday, August 10, 2012

Animated Professional CSS3 Button

Attractive Blogger CSS3 Buttons to make your Blog more and more attractive. This post will show you a tutorial how to show this awesome button in your blog.
Given there are different colors of button as well as Different size of buttons.

How to Add this Button

Login to your blogger Account
Go to template and edit HTML
Now search for <Head> (shortcut use - ctrl + f)
Paste the following CSS Code just after <Head>

<div dir="ltr" style="text-align: left;" trbidi="on">
<br />
<blockquote class="tr_bq" style="background-color: #2cea8e; background-position: 100% 100%; background-repeat: no-repeat no-repeat; border: 1px solid rgb(221, 221, 221); color: #2c7bea; font-family: 'comic sans ms', 'Arial', Arial, serif; font-size: 0.9em; font-weight: bold; margin: 0px 20px; padding: 20px 70px 20px 20px;">
<br /></blockquote>
<br class="Apple-interchange-newline" /></div>

Now save the Template.

How to use buttons

Paste the following codes of different color and size.

For Large Buttons

<a href="LINK" class="large awesome">LINK NAME</a>
<a href="LINK" class="large blue awesome">LINK NAME</a>
<a href="LINK" class="large pink awesome">LINK NAME</a>
<a href="LINK" class="large magenta awesome">LINK NAME</a>
<a href="LINK" class="large green awesome">LINK NAME</a>
<a href="LINK" class="large red awesome">LINK NAME</a>
<a href="LINK" class="large orange awesome">LINK NAME</a>
<a href="LINK" class="large yellow awesome">LINK NAME</a>

For medium Buttons

<a href="LINK" class="medium awesome">LINK NAME</a>
<a href="LINK" class="medium blue awesome">LINK NAME</a>
<a href="LINK" class="medium pink awesome">LINK NAME</a>
<a href="LINK" class="medium magenta awesome">LINK NAME</a>
<a href="LINK" class="medium green awesome">LINK NAME</a>
<a href="LINK" class="medium red awesome">LINK NAME</a>
<a href="LINK" class="medium orange awesome">LINK NAME</a>
<a href="LINK" class="medium yellow awesome">LINK NAME</a>

For small Buttons

<a href="LINK" class="small awesome">LINK NAME</a>
<a href="LINK" class="small blue awesome">LINK NAME</a>
<a href="LINK" class="small pink awesome">LINK NAME</a>
<a href="LINK" class="small magenta awesome">LINK NAME</a>
<a href="LINK" class="small green awesome">LINK NAME</a>
<a href="LINK" class="small red awesome">LINK NAME</a>
<a href="LINK" class="small orange awesome">LINK NAME</a>
<a href="LINK" class="small yellow awesome">LINK NAME</a>

Replace Link and Link Name

Sunday, July 29, 2012

ADD 3D Social Follow Smooth Icon

Social Follow Smooth Icon

This is very important for every blogger or for web development to attract their user through their layout and website design. Social Follow icons are important for three purpose- To follow your post directly to social networking sites,email or Rss , To play with them and to attract your daily visitors.

How to Add this Icons

Go to Blogger
Click on Layout
Add Gadget in your Layout
Add HTML gadget
Paste the Following code and enjoy

<div dir="ltr" style="text-align: left;" trbidi="on">
<by unicornix.blogspot.com="">
</by><br />
<div dir="ltr" style="text-align: left;" trbidi="on">
<style>
#social{border:0px solid #888; margin:0px 0px 0px 0px; padding:0px; } #social:hover {border:0px solid #ccc;cursor:pointer; } .opacity {opacity: 1;margin-left: 50px;-moz-transition: all 1s ease-out;-o-transition: all 1s ease-out;-webkit-transition: all 1s ease-out;-ms-transition: all 1s ease-out;transition: all 1s ease-out;-moz-transform: rotate(360deg);-o-transform: rotate(360deg);-webkit-transform: rotate(360deg);-ms-transform: rotate(360deg);transform: revolution(360deg);filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');zoom: 0;} .opacity:hover {opacity: 0.65;-moz-transform: rotate(0deg);-o-transform: rotate(0deg);-webkit-transform: rotate(0deg);-ms-transform: rotate(0deg);transform: rotate(0deg);filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');zoom: 0;}
</style><a href="http://feeds.feedburner.com/Unicornix" target="_blank" title="Grab Our Rss Feed"><img alt="Icon" border="0" class="opacity" height="194" id="social" img="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpOu7OgHaPp0G8KI3aE7OSq7NVRRrrONrK-AjVHlCTMbA3_yMrAjoIMCPfscghLZ2ylOlKHybYtkzzaFBf1pIEhOTyxqnlG7O52Y_cttqhAWn3KlB8b80VoAMU3rAuXhRb4OwUqHppFA/s200/rss.png" style="margin-right: 1px;" width="200" /></a><a href="https://www.facebook.com/pages/Unicornix/459475574071678" rel="nofollow" target="_blank" title="Like Our Facebook Page"><img alt="Icon" border="0" class="opacity" height="195" id="social" img="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ4g5RYFw9WMxLWsyA-FGz6g3ZFyt7fqQv3pswYtzCCIX5jCtJ9Klv-qGOHWABsyTnSEsdAzxjSa-ppzLXWgSQhnnXoWbxCI-BtA2pn0EYoD00p6CFURfv5zPvAvaXTdR0UJWkYR8t4w/s200/facebook.png" style="margin-right: 1px;" width="200" /></a><a href="http://twitter.com/Unicornixblog" rel="nofollow" target="_blank" title="Follow Our Updates On Twitter"><img alt="Icon" border="0" class="opacity" id="social" img="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4Tdw40JBshqgSSRNLzDvldkP8vK8tE4rsqXAg3buWDr9UNT4avcaYhkLMTfxmF5OjAYDdOwZ9Hz6cI0h007gqxuqHXD2A2ksQSqSIXJ7NeCgHe1Yg_HU65qu6T53aGaA_3ljvZmVw_A/s200/twitter.png" style="margin-right: 1px;" /></a></div>
</div>

http://feeds.feedburner.com/Unicornix - Change this with your Feed Link

http://twitter.com/Unicornixblog - Change this with your Twitter Username

https://www.facebook.com/pages/Unicornix/459475574071678 - Change with your acct.

Demo

Friday, July 27, 2012

Email Subscription Box with Pretty Social Media

This is a pretty good and necessary widget with email subscription form and social media Buttons. This include top Facebook,twitter and also the most important Email Subscription that attract User to sign up and get more readers. This widget will be at your every blog post. See the preview and comment for any Query.

How to Add this Beautiful Widget!

Step 1 = Go to blogger and Click on Template > Edit HTML > Proceed.

Step 2 = Search for the code given Below : (CTRL+F)

<data:post.body/>

Step 3 = Copy- Paste the code given below, below <dat.....

Step 4 = Add this Code

<style>
form.emailform{
margin:20px;
display:block;
clear:both;
}
.bttext{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkg_JYz-AVH_XV1RGwmrIvGVn48FFdDTkxd6oWLob9RnssXyAh3F2ZCz0j_3-sxLapgWJ6wyyi-4ik64iNgK6CakvTi-6BsYOXlfWhaIcw0fXCG6Ymu1JKAKuX5-_LHnPnH0J7uj5e89ov/s28/w2b-mail.png) no-repeat scroll 4px center transparent;
padding:7px 15px 7px 35px;
color:#666;
font-weight:bold;
text-decoration:none;
border:1px solid #D3D3D3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
.btbutton{
color:#666;
font-weight:bold;
text-decoration:none;
padding:6px 15px;
border:1px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-goog-ms-border-radius: 4px;
border-radius: 4px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
#doulike-outer {
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
-goog-ms-border-radius: 10px 10px 10px 10px;
border-radius: 10px;
box-shadow: 5px 5px 5px #CCCCCC;
background: none repeat scroll 0 0 transparent;
border: 1px solid #D3D3D3;
padding:10px;
margin-top:10px;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
width:520px;
}
#doulike-outer:hover{
background: none repeat scroll 0 0 #FFF;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
}
#doulike-outer td{
padding:3px 0;
}
</style>

<b:if cond='data:blog.pageType == "item"'>
<div id="doulike-outer">
<div id="doulike">
<span style="font-style: italic; font-size: 30px; font-family: Droid Serif, serif; verdana; color:#008E00;">Do you Like this Article?</span><table width="100%">
<tbody>
<tr>
<td align='left'>
<p style='color:#666; font-family: Droid Serif, serif; verdana; margin:0px 0px 5px 0px; '>Get Free Email Updates Daily!</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=Unicornix', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='blogspot/xagsz'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='bttext' name='email' onblur='if (this.value == "") {this.value = "Enter your email...";}' onfocus='if (this.value == "Enter your email...") {this.value = ""}' type='text' value='Enter your email...'/>
<input alt='' class='btbutton' title='' type='submit' value='Submit'/>
</form>
</td>
<td><p style='color:#666; margin:0px 0px 5px 0px; '>Follow us!</p>
<a href='http://feeds.feedburner.com/Unicornix' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxGGGOGPl7nTm4BW-UTJFsjr6dQ40UyYQZN1-pzLVMCxfAISu4ITJVXD9oEWJVkmYj5ojuoTL1gluQzMmbqvovBL2FRSKRhV7mPdqTllpOYslvSqnSpuVFP7_my-F7ZUDZ9Cw0EE_nKG6a/s40/w2bRSS+.png'/></a>
<a href='http://twitter.com/Unicornixblog' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_zImYebfn2vhZ10yyCYhoxXl6BrbLW9Y5V8duflWJFlhn_itXYThNU6INb24P6TvN71kenc5jkzozPSeMYwTV-t1g4MFcxiu-fjDQWOcn9C5Zy0Xh_y3tPv9GZMQNbhZ2MQOK2OBf2eh_/s40/w2bTwitter.png'/></a>
<a href='https://www.facebook.com/Unicornix' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGrUF45J1VUHJDhTTocqobp1hpFDoY4c6xJVGWLW5YnOxnOWm8x4fGaQDTDt4QrNee0fXqAvcchT22qyqwPMrWSMg3RVrpxCDHMDtPZCBxZ5SMNLX1pDCk8Gl-lP3Z_E-yZlxPfkcEONKb/s40/w2bFaceBook.png'/></a>
</td>
</tr>
</tbody></table></div></div>
</b:if>

Remove Unicornix with your Feed, Twitter and Facebook Usernam.

Tuesday, July 17, 2012

Stylish Sliding Menu Widget

Widgets are the heart of Blogs and Sites. To attract your User your blog should have classic and elegant widgets. Today in our Blogging section we are posting a new Classic Sliding Menu widget to make your blog more stylish.

Live Demo

How to add this in your Blog

Go to your Blogger Account
Click on Layout
Now Add a Gadget
Select HTML/JAVA
Now copy - paste the Following Below Code

<div dir="ltr" style="text-align: left;" trbidi="on">
<style text-type="CSS">
#bmenu{position:fixed;center:5px;center:5px;background-color:#5ACEFF;border-radius:10px;-moz-border-radius:10px;border:3px solid #000000;width:202px;height:20px;color:#FF0606;transition:all .5s ease-in;-moz-transition:all .5s ease-in;-webkit-transition:all .5s ease-in;-o-transition:all .5s ease-in;z-index:3;overflow:hidden;padding:9px 15px 10px;}
#bmenu h3{margin:0;padding:0;text-align:center;cursor:pointer;}
#bmenu ul{border-radius:10px;-moz-border-radius:10px;border:2px solid #FFf;background-color:#40AADF;margin:15px 0;padding:0 15px;}
#bmenu li{list-style:none;margin:0 0 5px;padding:0;} #bmenu li a{color:#000;text-decoration:none;font-size:20px;}
#bmenu li a:hover{color:#fff;}
#bmenu:hover{z-index:5;height:175px;
</style>
<br />
<div id="bmenu">
<h3>

<span style="color: white;">menu</span></h3>
<ul>
<li><span style="color: #0d4067;"><b><a href="http://www.unicornix.blogspot.com/" target="_blank">Unicornix-1</a></b></span></li>
<li><span style="color: #0d4067;"><b>Unicornix-2</b></span>
</li>
<li><span style="color: #0d4067;"><b>Unicornix-3</b></span>
</li>
<li><span style="color: #0d4067;"><b>Unicornix-4</b></span>
</li>
<li><span style="color: #0d4067;"><b>Unicornix-5</b></span></li>
</ul>
</div>
</div>

To change the Menu Name change it from the code
Change the link adress to your link also to add more links in different menu copy paste this <a href="http://www.unicornix.blogspot.com/" target="_blank"
Change Unicornix to Your menu name

Save the Gadget and enjoy. For any query comment below. If you like the post Kindly Share it.

Sunday, July 15, 2012

Social Bookmarking Widget - Unicornix

Add this Retro Style Social Bookmarking widget on your blog/website and attract Audience to Like, Tweet, Plus your posts.
In blogging it is very Much important to attract your audience and to engage them at social networking sites. Add this widget and enjoy.

Go to you blog
click on Layout
Now click Add Gadget
Select Add HTML/JAVA
Now copy following code and Save it

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="Facebook Page URL" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaI_TkECKhQOSzFgZ7ZYLL5J9jmkB9RGETVK6a49a1b3_4mmss8g2e39bFLPdOufr-hkdzytAtDLFkLiD_T-zqrIUA2fA1fxxDtLMQWn6xoLWwuGGQMu05BsODOYk17hrCv586jYwIcg/s200/facebook+icon.png" width="200" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.twitter.com/Twitter Username" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk45tPzNvyqSj751ZUgWzFNVfuKsODTQfQLSBWhUwFr9RH66NMQvo1XhTKuc5iMgQs1f0a3oLF-u47uN2GAcBmkYQ_YR_aklTogH-bXDT2cC0d1JtXeIf7BR-CXC7FdBq2Z3o6wmRYrg/s200/google+icon.png" width="200" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="Google Plus URL" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDYrHsIey-IcYWzP3yb5sXeILsKaZaGvf2rsgEnW-xxyU43EupTorJSlaGNtakrwxXIenkH6kwl6J5HDwedzKCsgPC3nE9-hBY9ncHF-1pYiWYDqntOgDFtlIb0S5ewO7mxqWKprSzFQ/s200/twitter+icon.png" width="200" /></a></div>
<br /></div>

Change ''Google Plus URL''to you Google Plus page/profile

Change ''Twitter Username'' to your Twitter Username. i.e. Twitter/Unicornixblog.

Change ''Facebook URL'' to your Facebook page/profile URL

Wednesday, July 11, 2012

Awesome Falling Leaf Style Social Bookmarking Widget

Social Bookmarking icons are essential for every blog and website, they helps us to share our post easily by our Audience. Since only good looking and stylish widgets are attractive and force user to share your posts. Here is a stylish and the most attractive widget for your site.

How to add this Social Bookmarking widget :

Login to your Blogger account
Select your blog if you have more than one.
Now go to your template
Click on Edit HTML
Tick on the expand widget
Now click ctrl+f and search For

<data:post.body/>

Now after finding the code Paste the given below code after <data:post.body/>





<div style='clear:both; '>

<div style='width:65px; float:left;'>

<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMe6ldniHbaWXwt_q-LKX8JKdpfYd7TzReL6BSdDkPyxfa6vbyCkHMoIMiCrz6pjl8HgHcyRbePt3kEwVTGtUU0LwPjPJSSbjjNae4ZoBHJABvTNh9EoKNsDu1HWFAr774iAv36owX_NwG/' style='padding:0;margin:0;border:none;'/></a>

</div>

<div style='width:65px; float:left;'>

<a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Delicious' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTn66DafNnyId6mIwTtJHFEmD6uS9RSizFJO_qgORhfBQ3srBsIDM_4JSDZUDPX6eIWbj0fwp7jtI_IxyoFAXzneacl5_gcZ6eEU1a0aWSfaBi2vqZcGRU0GLzaJ1XFfkt9F1YbHiHPukX/' style='padding:0;margin:0;border:none;'/></a>

</div>

<div style='width:65px; float:left;'>

<a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Technorati' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHnqb1YslrzBp_RZAN_TLaKaEhSRFMc260uNb_g7f9W4UcpeYmRbMCmPLOV0gz05Nwkvk0lm1ge2RapvoPJN5OOf1Q-DWeZ9nfwYST1_yazR5zcoz5xaoKgQuH0Hpr2hnVM1UYqB7Bo0kj/' style='padding:0;margin:0;border:none;'/></a>

</div>

<div style='width:65px; float:left;'>

<a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw_KqAjsWHWiAaaIivrAmgLByYu-uI4xlLfVCsKLY1eBQLLtRqHmfNtmAfeDVNlNdpXrtR2YXMAGfEGktX3AyhWmx4ZIX1x972UPyMZuwARD_XpMBaKZJN-dtu4xey7JxbZYVwHZrsBoee/' style='padding:0;margin:0;border:none;'/></a>

</div>

<div style='width:65px; float:left;'>

<a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Digg' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkQc1DRBMkTB15bVRIkuPGAEVFG_e4POpcJ3Gug1enaRzfy9n0a3htEHgOn4ykw9lpmZPyBdtGVICnAwCFwJNL6yBNUOsZSeZAAFTxCKVNqFKfDDL40_uTm_R8hnAb5wv2OmsXZvPShvuQ/' style='padding:0;margin:0;border:none;'/></a>

</div>

<div style='width:65px; float:left;'>

<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1sGiDQD-HSKOU888VaGG7VXoQ5Fc37AZR3JjaGMpWv9sZi2W1ZPIYCHqZkNSV-XGU-G0xiHXwr1R_0Nawx9M10X7cTp0wdRPBjA0ddtI9_hptXqTBe1_2jm6fr7Rr_lDLC3oiUyaz5o7z/' style='padding:0;margin:0;border:none;'/></a>

</div>

<div style='width:65px; float:left;'>

<a expr:href='&quot;http://reddit.com/submit?&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Reddit' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwH4HEZ-yr7xqjK6aPp0oX3FkQhyphenhyphenznijyV0mLt-zt7bGLXy5ZFZ4vHtJKPbtPEvW6KB9lb1xXXNZQDuGyPxSMaDU18kDQaneQ2tYONIK1w_Riy21vSgH-fpovrd88o3Cq6ohweCnsO4aDy/' style='padding:0;margin:0;border:none;'/></a>

</div>

<div style='width:65px; float:left;'>

<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' rel='external nofollow' target='_blank'><img alt='Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE8VWXZNbt6eOr0a2Kch-QuUBbNC2t_XPgsjoXbpm98Ps0UU4sp5dzVmhhLJ46SvPqi15A66Z1HqVAzJESd48ZFbnwNwppm6qnTRFxuSXbGv3qHtsXlx2ZvAErO2MC7UZs-otJFty-XBfI/' style='padding:0;margin:0;border:none;'/></a>

</div>

</div>

And that's it Enjoy and impress your visitor don't forget to share , comment and stumbleupon

Saturday, July 7, 2012

So.cl Sharing Button Widget

As we already posted about so.cl (Social) the New Social networking and its dominance over social networking so denoting this we are posting new post about So.cl Button for your website and Blogger.
Do not edit it, just copy the code and paste it where you want to show the Button.

Share on So.cl

The button Preview

<div dir="ltr" style="text-align: left;" trbidi="on"><a href="javascript:((function(){if (window.location.protocol != 'http:' && window.location.protocol != 'https:') {alert('this page cannot be shared.');return;}if (window.location.href.match(/^http:\/\/www.so.cl\//i)) {alert('use this button on web pages outside so.cl');return;}var url='http://www.so.cl/#/search?v=results&bk=1.0&q='+encodeURIComponent(window.location.href);window.open(url);})())" id="bookmarkletButton" style="background-image: -webkit-linear-gradient(top, rgb(4, 122, 243) 0%, rgb(3, 79, 158) 100%); border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; border: 1px solid rgb(4, 109, 218); color: white; cursor: pointer; font-family: 'Segoe UI', Arial, Helvetica, sans-serif; font: inherit; margin: 0px; padding: 4px 8px; text-align: center; text-decoration: none; vertical-align: baseline;"><span style="font-family: Arial, Helvetica, sans-serif;">Share on So.cl</span></a></div>

For any query comment below we are 24/7 supporting team. Thanks.

Monday, July 2, 2012

Insert Unique text-area by Unicornix

In this post showing an easy tutorial how to add custom Text area.
Easy and attractive for your visitors, follow the simple steps and make your blog more attractive.

Go to your Blog
Click on template
Click on Edit HTML
Click Proceed
Find this code ]]></b:skin>
Choose any style from below scripts and add it above ]]></b:skin>
Save your template.

Style 1

Style 2

Style 3

Style 4

When posting add this code and then post :

< textarea>

Type what you want to post...

</textarea>

For any Query comment below 24/7 help :D

Tuesday, June 26, 2012

Protect All Images of your Blog jquery Magic

Here is an important and necessary trick for every blogger for how to protect their Blogger Image with a Transparent covered on it.

Step 1: Add jQuery plugin (if your blog have a jquery plugin,ignore this step)

Go to Template->Edit HTML [A dialog box appears click Proceed]
Copy and paste the below code <head> and save it

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

Go to Blogger Account
Template->Edit HTML [Click Proceed]
Copy the code above </head>

Protect Only First Image In Every Post

<script type='text/javascript'>
//<![CDATA[
$(function(){
$(".post-body img:nth-child(1)").after("<img src=\"http:\/\/2.bp.blogspot.com\/-lQW7QlMoz10\/T8yL_5IPF6I\/AAAAAAAAAQU\/5R8ngq17xzw\/s1600\/transparent.png\" alt=\"NetOopsblog protected image\" style=\"margin-left: -212px; opacity: 0; position: relative; top: 0;\" \/>");
});
//]]>
</script>

Protect All Images In Every Post

<script type='text/javascript'>
//<![CDATA[
$(function(){
$(".post-body img").after("<img src=\"http:\/\/2.bp.blogspot.com\/-lQW7QlMoz10\/T8yL_5IPF6I\/AAAAAAAAAQU\/5R8ngq17xzw\/s1600\/transparent.png\" alt=\"NetOopsblog protected image\" style=\"margin-left: -212px; opacity: 0; position: relative; top: 0;\" \/>");
});
//]]>
</script>

Saturday, June 23, 2012

Floating Vertical Share bar

You must have seen the floating vertical share bar on many popular blogs and must have thought about adding it to your blogspot blog as well. AddThis has made this very simple. Its a fairly simple process and after you add this vertically floating share bar to your blog, you will also check how many times people shared your content with their analytics service which they offer for free! The share bar is available in different sizes and you can also customize it so that it blends perfectly with your blog.

Before you add the vertical floating bar to your blog, you have to create an account on AddThis which will help you in tracking the content that is being shared and other useful information. Once you create your account, just remember your profile id as it will be necessary while adding the code to your blog. Now visit the Floating Vertical Bar page where you will see the code along with a demo of the floating vertical bar and also its features.

If you want a different style of floating vertical bar, then visit the link shared above and select the one that you like. But if you want the normal one then copy the code that is shown below.

<div class="addthis_bar addthis_bar_vertical addthis_bar_large" style="top:50px;left:50px;"> <div class="addthis_toolbox addthis_default_style"> <span><a class="addthis_button_facebook_like" fb:like:layout="box_count"></a></span> <span><a class="addthis_button_tweet" tw:count="vertical"></a></span> <span><a class="addthis_button_google_plusone" g:plusone:size="tall"></a></span> <span><a class="addthis_counter"></a></span> </div> </div>

Once you have copied this code, visit the Layout section of your blog and click on Add a gadget and select a HTML/Javascript gadget and paste the code. Now click on Save button.

Next you need to visit the Layout section from the blogger dashboard and select Edit HTML and then choose the Proceed option. Search </head> in the template and paste the following code just above </head> .

<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=[YOUR PROFILE ID HERE]"></script>

Once you have added your profile id to the code, click on Save template and now you can refresh your blog and see the AddThis Vertical Floating Share Bar on your blogger blog.

Designed by Unicornix

Pages

Friday, August 10, 2012

Animated Professional CSS3 Button

How to Add this Button

How to use buttons

For Large Buttons

For medium Buttons

For small Buttons

Sunday, July 29, 2012

ADD 3D Social Follow Smooth Icon

Social Follow Smooth Icon

How to Add this Icons

Demo

Friday, July 27, 2012

Email Subscription Box with Pretty Social Media

How to Add this Beautiful Widget!

Tuesday, July 17, 2012

Stylish Sliding Menu Widget

Sunday, July 15, 2012

Social Bookmarking Widget - Unicornix

Wednesday, July 11, 2012

Awesome Falling Leaf Style Social Bookmarking Widget

How to add this Social Bookmarking widget :

Saturday, July 7, 2012

So.cl Sharing Button Widget

Monday, July 2, 2012

Insert Unique text-area by Unicornix

Tuesday, June 26, 2012

Protect All Images of your Blog jquery Magic

Protect Only First Image In Every Post

Protect All Images In Every Post

Saturday, June 23, 2012

Floating Vertical Share bar

Get Free Email Updates

Join Us

Category

Popular Posts

Blog Archive