CSS3 Social Network Buttons

In this tutorial, I'll show you how to create CSS3 social network subscribe buttons. 

Follow these steps precisely:

1. Go to your layout in Blogger dashboard.
2. Click on add new gadget
3. Locate add HTML/JavaScript code in the pop-up window.
4. Copy, Paste and save the code below into the editor that appears and save.

<style>
/* BthemesandTricks */
.socialicons{
list-style-type:none;
margin:0;
padding:0;
background: #f0f8ff;
width: 350px;
}
.socialicons li{
display:inline;
width: 60px;
height:60px;
}
.socialicons li img{
width: 50px; /* width of each image.*/
height: 50px; /* height of each image.*/
border:0;
margin-right: 4px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}
.socialicons li img:hover{
-moz-transform:scale(0.8); /*scale up image 1.8x*/
-webkit-transform:scale(0.8);
-o-transform:scale(0.8);
}</style>

<br />
<center>
<br />
<ul class="socialicons">
<li><a href="http://www.plus.google.com/#"><img src="http://icons.iconarchive.com/icons/designbolts/minimalist-social/64/Google-Plus-icon.png" title="+1 us on Google Plus" /></a></li>

<li><a href="http://www.facebook.com/#"><img src="http://icons.iconarchive.com/icons/designbolts/minimalist-social/64/Facebook-icon.png" title="Like us on Facebook" /></a></li>

<li><a href="http://www.pinterest.com/#"><img src="http://icons.iconarchive.com/icons/designbolts/minimalist-social/64/Pinterest-icon.png" title="Follow on Pinterest" /></a></li>

<li><a href="http://www.twitter/#"><img src="http://icons.iconarchive.com/icons/designbolts/minimalist-social/64/Twitter-2-icon.png" title="Follow on Twitter" /></a></li>

<li><a href="http://feeds2.feedburner.com/#"><img src="http://icons.iconarchive.com/icons/designbolts/minimalist-social/64/RSS-icon.png" title="Subscribe to our feed" /></a></li>

<li><a href="http://linkedin.com/#"><img src="http://icons.iconarchive.com/icons/designbolts/minimalist-social/64/Linkedin-icon.png" title="Connect with us on Linkedin" /></a>
</ul>
5. Change the "#" sign to your username.
6. Enjoy! 

Demo

• 
• 
• 
• 
• 
• 

Posted By Unknown2:02:00 pm

0

Continue Reading

How to Add a Subscription Box

Hello, today, I'll be sharing with you on how to add a subscription box to your website or blog. To add one follow the steps outlined below:

• Click on the Add a Gadget link in your Blogger layout.
• Select HTML & JavaScript Code from the pop-up window
• Copy the code below:

<style>

.tbisubscribe {

border: 1px solid #D3D3D3;

padding: 8px;

width: 300px;

-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

}

.tbisubscribe:hover {

-moz-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);

-webkit-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);

box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);

}

.tbimailbox {

border: 1px solid #D3D3D3;

-webkit-border-radius: 4px;

border-radius: 4px;

-moz-box-shadow: 1px 1px 1px 1px rgba(255, 172, 84, 0.4) inset;

-webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;

box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;

color: #666;

font: 14px "trebuchet ms", sans-serif;

padding: 7px 15px;

width: 160px;

-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

}

.tbimailbox:hover {

-webkit-box-shadow: none;

box-shadow: none;

-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

-ms-transition: all 0.5s ease-in-out;

-o-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

}

.tbisubmit {

font: bold 12px Tahoma, Geneva, sans-serif;

font-style: normal;

color: #ffffff;

background: #ff5714;

border: 0px solid #ffffff;

text-shadow: 0px -1px 1px #222222;

box-shadow: 2px 2px 5px #000000;

-moz-box-shadow: 2px 2px 5px #000000;

-webkit-box-shadow: 2px 2px 5px #000000;

border-radius: 10px 10px 10px 10px;

-moz-border-radius: 10px 10px 10px 10px;

-webkit-border-radius: 10px 10px 10px 10px;

padding: 8px 15px;

cursor: pointer;

margin: 0 auto;

}

.tbisubmit:active {

cursor: pointer;

position: relative;

top: 2px;

}

.tbisubmit::-moz-focus-inner {

border: 0;

padding: 0;

margin: 0;

}

</style>

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />

<div class='tbisubscribe'>

<div style='color: #666666; font-weight: bold; font: 22px Oswald, cursive; margin: 0px 0px 10px 15px;'>Get Free Updates in your Inbox</div>

<div style='margin: 10px 0 0 6px;'>

<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform'

method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=labstrike', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true'

style='margin: 0pt;' target='popupwindow'>

<input name='uri' type='hidden' value='labstrike' />

<input name='loc' type='hidden' value='en_US' />

<input class='tbimailbox' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}'

onfocus='if (this.value == "Enter your email...") {this.value = ""}'

type='text' value='Enter your email...' />

<input alt='' class='tbisubmit' title='' type='submit' value='Subscribe'/>

</form>

</div>

<div style='border: none; color: #666666; font: 22px Oswald, cursive; margin: 25px 0 0 5px;'>Follow us on:</div>

<div style='margin: -32px 0 0 120px;'>

<a href='FACEBOOK URL' target='_blank' title='Join us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxxebQd-JwSpti8wlnxFIOnB_f9kesZ5wD7i8zhe67b1i_YcpBH4TlLVb9nC2yWi3eEP00kbpckp55A7UksaILvg5S80S8YAmzJmm6QWpaO5I8gYg4FqcGAPIVu0Wd-4lQdUWwPdUIhr8/s1600/facebook500.png' alt='facebook'/></a>

<a href='TWITTER URL' rel='nofollow' target='_blank'

title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5DB4tY3155PXb-hn2CmHrmbG1xdnAqAZDV3C8xsWKYqhzJxbZoRNsExQoA8sURgm1Cw8DuSjjZCdGPaum6UA34QJtYzxFUHUfzqvoTdfduyRWovuZYrq9Hqet2T07i83Ja1y5jXxjxcE/s1600/twitter.png' alt='twitter'/></a>

<a href='GOOGLE+ URL' rel='nofollow' target='_blank'

title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLNbP8LQfX-ypM4NR4rddYzpVDhILEHdCSYcIM63dBBC9ELj5XtyceI-wTjQrpMe1UHKZNzP1brf1RLBBkOcLbrUHdP5EEgGCrTR76kft9e6-KIPbtdGf2ssoiSWxSZTGfQgIP1jchp54/s1600/googleplus-revised.png' alt='gplus'/></a>

<a href='PINTEREST URL' rel='nofollow' target='_blank'

title='Follow us on Pinterest'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvgDu7gr0d6oyK3kxY6MpTnihF-crU-kHZxJEzJMB2pa18b_Z37CRROU_FNzyMHsWAfSSA6Ir-x0fq1J0ua9cIBv9NjZlIGXJlKMfjg0wTah9Fol16Fq7mKyRyefWHuxDA7bNN5HF4g0E/s1600/pinterest.png' alt='pinterest'/></a>

<a href='RSS URL' rel='nofollow' target='_blank'

title='Subscribe to RSS'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib_FsvpxCpynj0yODllevzSz69gIraRlp2LiKe_cTLVTcCaDQYwc0kYfniG-Mi9TmrXKnjZrpD4ngTMjVPUDvT65bI1sdZZglFCphRdhuQVT7NQNiecElaa22IN1I-a1OBHkL9oOsnBZ0/s1600/rss.png' alt='rss'/></a>

</div>

</div>

• Paste it into a text editor such as Notepad

• Edit the Facebook, Twitter, Google+, Pinterest, and RSS url respectively to your desired url.

• Copy the code from the text editor and paste it into the HTM & JavaScript column 

• Save the changes

• Open your blog and view the results

  
 

Posted By Unknown10:47:00 pm

0

Continue Reading

How to add customized Facebook Like box to your website or blog

Hi guys, we are always here to serve you with tools and tips that will transform your blog from a boring website to an absolutely eye-catching one.
Today, we'll be sharing with you on how to create a customized Facebook Like button.
For Blogger Users
Go to your http://blogger.com
Click on Layout
Click on add new gadget
Select the Add HTML/JavaScript Gadget in the pop up window that appears
Copy the Code below and paste it into the text area
Save it
Save the current layout arrangement and click on view blog

<style type="text/css"> .facebookOuter { background-color:#FFCC00; width:250px; padding:10px 0 10px 10px; height:250px; border:1px solid #CCCCCC; } .facebookInner { height:250px; overflow:hidden; } </style> <div class="facebookOuter"> <div class="facebookInner"> <div class="fb-like-box" data-width="245" data-height="290" data-href="http://www.facebook.com/websytedesigners" data-border-color="#F4F4F4" data-show-faces="true" data-stream="false" data-header="false"> </div> </div> </div> <div id="fb-root"> </div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script>










Photo Credit: Digiday

Posted By Unknown1:05:00 pm

0

Continue Reading

Social Bookmark Widget

Today, one of the ways to increase your website or blog traffic is by sharing the word about your site on social networks. This is sometimes called Social Bookmarking. Today, I will show you how to make a simple Social Bookmarking Widget that has the Facebook Like button, the Tweet Button and RSS Subscribe Button.
Follow the steps outlined below

•  Log into Blogger
• Click on Layout
• Click on Add Gadget
• Select the HTML/JavaScript Tab
• Copy and Paste the below code in the HTML/JavaScript Opened Tab

<style type='text/css'>

#topbox{width:250px;border:4px solid #a1a1a1;background-color:#ffffff;}
#topbox:hover{border:4px solid #4e4c4c;background-color:#ffffff;}

#social1 .social2 h2.subscription { border:0; margin:0; padding:3px 0 0 55px; height:42px; font-size:14px;font-family:&quot;Segoe UI&quot;,Calibri,&quot;Myriad Pro&quot;,Myriad,&quot;Trebuchet MS&quot;,Helvetica,Arial,sans-serif;
font-weight:bold; }

#social1 .social2 h2.subscription:hover {color:#1c5ef3; font-size:15px;}

#social1 .social2 h2.facebook { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPqV8rL2tp-CNy1QwFnyDmaElISbVm8w9m_3irPDlGxfredrZn39RXsVRiQs6-l4FAeGaJR_9tRZO3mTzKZ08zNrhxqfDqxVOc0mEy8Pezl-GS0Xl2CPlMa13otd7RxC5uOTFBxK8Hyeo/s1600/bloggertrix-facebook-icon.png) no-repeat top left; }

#social1 .social2 h2.twitter { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRGXXiar_VqvLxfPvPT0tV5mfPuFDsxo8eqQbkQWTNdJOiepbuEjZzF-nezgb1M9LYofgoB3GzMfnm78YEa2F2PJYLyB4ix6QRFAcgOYG_rSxqzcwGSBLS9JWj1cWJ4kqqVOqWCUiQqCY/s1600/bloggertrix-twitter-icon.png) no-repeat top left; }

#social1 .social2 h2.Rss { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1-DshzLiG_sxnVfGSr4Pj4LuE1CkiBxhFW1AfXKZTV4xOSTGN_XjYUpargywUiGJI9q-uDuLAEhvJ38Oix-VaQWQ7rThd2E5SYc7hW9qU-8-y11_PD86IkGzf2D3I5wvQvN92NeAHHiU/s1600/bloggertrix-rss-icon.png) no-repeat top left; }

#social1 .social2 .subscription a { color:#252e28; text-decoration:none; }

</style>

<div id="topbox">
<div id="social1">
<div class="social2">

<h2 class="subscription facebook"><a href="Facebook URL" target="_blank">Like On Facebook</a></h2>

<h2 class="subscription twitter"><a href="Twitter URL" target="_blank">Follow On Twitter</a></h2>

<h2 class="subscription Rss"><a href="Your Email Subscription URL" target="_blank"> Subscribe On RSS</a></h2>

</div></div>
</div>

• Replace the Red font phrase with your Facebook Page
• Replace the Blue font phrase with your Twitter name
• Replace the Pink font phrase with your Email Subscription URL or RSS URL

Posted By Unknown2:55:00 am

2

Continue Reading

Menu Building with Dynamic Hypertext Markup Language

Depending on the type of menus you're going to build, certain preparations need to be made to your web site. DHTML Menu Builder can be used to create a toolbar, or you can create menus which appear using elements that already exist on your web pages. If you're going to use a toolbar created by DHTML Menu Builder, there's no need to do any additional preparations to the pages on your web site and you may continue to the next section:
 Project Properties
Using your own text and graphics
One of the most unique features of DHTML Menu Builder is the ability to attach menus to text or graphics which you have already placed in your web pages. This feature lets you build your own custom toolbar using your favorite image editing program, and then have the menus react when the user activates an element from your toolbar. It is important to understand that the toolbar is the only element of a menu that is always visible to the user and its design should be consistent with the general layout and design of your web site. When using your own toolbar, you need to set up each hotspot in a special way so than DHTML Menu
Builder can later attach the menu groups to them. This setup is known as converting the hotspots into
null hyperlinks.
Converting your hotspots into null hyperlinks
A hotspot can be an image or just some text. To convert your hotspot into a null hyperlink, simply create a hyperlink on that element and make it point to itself; this is done by using a hash (or pound sign) character "#" as the target of the link.
Let's say this is one of the images you're going to use to display a menu.

The HTML code of the image looks like this:
<img border="0" src="images/sample_image.gif" align="middle" width="50" height="33">
After converting the image into a null hyperlink the code looks like this:
<a href="#"><img border="0" src="images/sample_image.gif" align="middle" width="50"
height="33" name="MyImage"></a>
 As you can see, by moving the mouse over the converted image, your mouse changes into a  hand indicating that the image is a link. Highlighted in dark red you can see the code that converted the image into a null hyperlink. Also note that we have added a new setting, name, to the image's code. The namesetting will allow DHTML Menu Builder identify the image and perform automatic alignment of the menus. You should give each image-based hotspot a unique name so DHTML Menu Builder can identify it.
This is all the preparation that needs to be done, so when you are ready to implement your menus into the page that contains the toolbar, everything will be ready to use the HotSpots Editor and automatically make your hotspots active and responsive to users' actions.

Posted By Unknown8:38:00 pm

2

Continue Reading