Unicornix: Blogging

Showing posts with label Blogging. 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.

Sunday, July 22, 2012

Disable Right Click from your Blog

Do you feel that someone is copying your content,images etc. in which you spend a lot time to make?
If the answer is yes, Then you are at the right post.
This tutorial show you how to disable right click on your Blog.
After this tutorial your content and every thing will be safe from your blog no one will dare to copy or inspect anything and it is a must trick for every blogger.
Read carefully every step and comment for any query. We support 24/7.

Step = 1 Go to your Blog

Step = 2 Go to layout and then Add Gadget

Step = 3 Add HTML/ Java and then paste the following code :

<script type="text/javascript">
var omitformtags=["input", "textarea", "select"]
omitformtags=omitformtags.join("|")
function disableselect(e){
if (omitformtags.indexOf(e.target.tagName.toLowerCase())==-1)
return false
}
function reEnable(){
return true
}
if (typeof document.onselectstart!="undefined")
document.onselectstart=new Function ("return false")
else{
document.onmousedown=disableselect
document.onmouseup=reEnable
}
</script>

Save the Gadget and that's it. If you like it ! then comment and Share

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

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

Wednesday, June 27, 2012

4 Top Reason Why People got Fail In Blogging Own Experience

Blogging is not an easy task, Every blogger face problems, some just give up and other make it their plus points.
I Want to share some major problems face by so many

bloggers. I Hope it will really help you ,read it carefully and enjoy.

1. Not Consistent

Yeah its true, i have seen some good blogger who can blog good and really they were blogging good but they don't know much about Consistency. They just blog once a week and feel like some one is forcing them to blog. I will Suggest you not to blog to just complete your Formalities.
When you start blogging its pretty much exciting, you blog good stuff first and care too much about your Traffic but after some days you just ignore your schedule and Start another work.

2. Change Blog design too often

Every blogger Like to have a good template and Layout and because of this they too often change the template or design so many times.
I Personally faced this common problem, Everyday I Search lots of templates and waste too much of time to design it. We often add too many of widgets for fancy looks it also creates unlike by Visitors and they just Leave your blog.
Remember this ''too'' cost much

3. Unsatisfied with traffic

Seriously it really hurt when you get to know that only few people are visiting your really good post where you should get top. But it doesn't matter when you post good content it will get good support and you should not worry about this problem. Keep Blogging and who know you maybe listed on top blogger.
Don't keep checking your stats all day and submit blogs in thousands of directory. It makes your blog slow and also change Search engine results.

4. Copy Content or edited content

Like I mentioned above don't blog just to complete formalities. Some time situation comes when we don't have any content to post and we just copy paste or edit some lines and images.

This really effect your blog , Never post any copy content or even don't start your every post with same line.

Attract your visitor with some cool contents and Design and also take care these 4 Blogging failure.

I Hope you like it i will request you to kindly be a member and subscribe comment in our blog

How to Show HTML, Javascript code in blog

This is a very important topic for all bloggers, When i started blogging i don't know such stuff.
Whenever i try to post any tutorial to show HTML codes it get generated and really i searched so many times in google, Then after some months i get to know this important trick. Read the tutorial and if you like it then comment and share.

Go to Blogger Account
Template->Edit HTML [Click Proceed]
Press Ctrl + F and find the following code

]]></b:skin>

Now Paste the following code after it

pre
{
background:#efefef;
border:1px solid #A6B0BF;
font-size:120%;
line-height:100%;
overflow:auto;
padding:10px;
color:#000000 }
pre:hover {
border:1px solid #efefef;
}
code {
font-size:120%;
text-align:left;
margin:0;padding:0;
color: #000000;}
.clear { clear:both;
overflow:hidden;
}

Now you are done just remember to type code in following Format

<pre>YOUR CODE </pre>

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!

Sunday, July 22, 2012

Disable Right Click from your Blog

Tuesday, July 17, 2012

Stylish Sliding Menu Widget

Sunday, July 15, 2012

Social Bookmarking Widget - Unicornix

Monday, July 2, 2012

Insert Unique text-area by Unicornix

Wednesday, June 27, 2012

4 Top Reason Why People got Fail In Blogging Own Experience

How to Show HTML, Javascript code in blog

Get Free Email Updates

Join Us

Category

Popular Posts

Blog Archive