Here is the second subscription box after the Mashable Widget from MBT, well thanks to Bloggeryard for their thoughtful creativity. It was actually intended for Blogger but it makes no difference inserting to your Weebly Template. I made few modifications to keep all elements aligned in the center and this time we need to link an external CSS because pasting the raw code (very long) to your template is bit uncomfortable.
1. First, you need to read the following posts.
Weebly Tricks #2 -Adjusting and Removing Sidebar (for blog side bar)
2. Since its your site, you need to understand hosting your own CSS file just in case our server is down. To do this, save the CSS file below by right clicking on it and choose "save link as". You don't have to rename it.
byard.css
3. Upload the byard.css to your template by going to Design > Edit HTML/CSS > Add new file. Save your template.
4. Now got to your site <head> (<head> tips here) and paste the following code:
<link href="http://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" type="text/css" />
<link href='//fonts.googleapis.com/css?family=Source Sans Pro:200,200italic,300,300italic,regular,italic,600,600italic,700,700italic,900,900italic&subset=latin' rel='stylesheet' type='text/css'/>
<link rel="stylesheet" type="text/css" href="http://myweeblytricksdemo.weebly.com/files/theme/byard.css">
<link href='//fonts.googleapis.com/css?family=Source Sans Pro:200,200italic,300,300italic,regular,italic,600,600italic,700,700italic,900,900italic&subset=latin' rel='stylesheet' type='text/css'/>
<link rel="stylesheet" type="text/css" href="http://myweeblytricksdemo.weebly.com/files/theme/byard.css">
You need to change the red marked text with your own site address. This is to point the CSS file you've just uploaded from the second step.
5. Here comes the HTML which you need to paste on your chosen page via "embed code" element.
<div id="byardouter">
<div id='byard-socialsub'>
<div class='byard-socialsub-title'>
Get In Touch With Us
</div>
<div id='byard-socialsub-icons'>
<ul class="byard-socialsub-icons">
<li>
<a href="http://www.facebook.com/BloggerYard">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvjPAeP9IP6mqh6uMgWQdyr_yTR1jcYZ8T1M5XXsQW2LvRBGfISJqL0oYptKxMYg6v0BnajD3JzmH2CWS-_sGFSzoqrp6lf2ZuXWg1JHTrmqAmSOAhtj1gw5c8WJ4c3M_aMFEUS362S9s/s64/blueprint-social-03.png" title="Add to Facebook" />
</a>
</li>
<li>
<a href="https://plus.google.com/101996924620264617682">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwL0qWbiNv75ZplRj42mTBPMcqjFJGgAeLRkKyj2IFw0iq9RvPEH2EgdxNgXUuEtEjGaa3s0I-YNJuDUrRw3jaL5dOZH43kOf5MFAbCnelM6SjovugkHwOwVgnbR2lhlx_UoGIbJEKlWY/s64/blueprint-social-04.png" title="Google plus" />
</a>
</li>
<li>
<a href="http://www.twitter.com/BloggerYard">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYugAHHl8n67_dmJ0cYdguuzybskrGf6h_JmwgcAkvcf5ypDdWLIzbr94FSndMinVyPWwhuOkUS7nHKuylVcuxKrItcntOxt3VZwZsOec7yrBYu4M4hmE0JuIJnF_RMooRKbPIRuvRg38/s64/blueprint-social-01.png" title="Add to Twitter" />
</a>
</li>
<li>
<a href="http://feeds2.feedburner.com/BloggerYard">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLbN5m6PAt84SRNtEcGFut5bJLJtOmKfwZohjrdLjXePf5HRxPEh5w0K4_ViCoAkPNTi1X4Xyg-HXmptN5ZUFOCnCr2U4kPmmgxWUCA3hyiZFto6HhuKyu1Ieex-CeHkSTJibmG1RQtUM/s64/blueprint-social-10.png" title="Add RSS Feed" />
</a>
</li>
</ul>
</div>
<div class='byard-socialemailsub'>
<p style='font-size:14px;font-family:Source Sans Pro;padding-bottom:10px;'>
Sign Up For Free To Get Blogging Tips, Blogger Resources, Search Engine Optimization Tips, Templates and Widgets Straight In Inbox.
</p>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=BloggerYard' class='byard-subsbox-form' method='post' target='_new'>
<input class='byard-socialemailsubname' name='name' placeholder='Your Name' type='text'/>
<input class='byard-socialemailsubemail' name='email' placeholder='Your Email Address' type='text'/>
<input class='byard-socialemailsubbutton' type='submit' value='Sign Up!'/>
</form>
</div>
</div>
</div>
<div id='byard-socialsub'>
<div class='byard-socialsub-title'>
Get In Touch With Us
</div>
<div id='byard-socialsub-icons'>
<ul class="byard-socialsub-icons">
<li>
<a href="http://www.facebook.com/BloggerYard">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvjPAeP9IP6mqh6uMgWQdyr_yTR1jcYZ8T1M5XXsQW2LvRBGfISJqL0oYptKxMYg6v0BnajD3JzmH2CWS-_sGFSzoqrp6lf2ZuXWg1JHTrmqAmSOAhtj1gw5c8WJ4c3M_aMFEUS362S9s/s64/blueprint-social-03.png" title="Add to Facebook" />
</a>
</li>
<li>
<a href="https://plus.google.com/101996924620264617682">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwL0qWbiNv75ZplRj42mTBPMcqjFJGgAeLRkKyj2IFw0iq9RvPEH2EgdxNgXUuEtEjGaa3s0I-YNJuDUrRw3jaL5dOZH43kOf5MFAbCnelM6SjovugkHwOwVgnbR2lhlx_UoGIbJEKlWY/s64/blueprint-social-04.png" title="Google plus" />
</a>
</li>
<li>
<a href="http://www.twitter.com/BloggerYard">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYugAHHl8n67_dmJ0cYdguuzybskrGf6h_JmwgcAkvcf5ypDdWLIzbr94FSndMinVyPWwhuOkUS7nHKuylVcuxKrItcntOxt3VZwZsOec7yrBYu4M4hmE0JuIJnF_RMooRKbPIRuvRg38/s64/blueprint-social-01.png" title="Add to Twitter" />
</a>
</li>
<li>
<a href="http://feeds2.feedburner.com/BloggerYard">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLbN5m6PAt84SRNtEcGFut5bJLJtOmKfwZohjrdLjXePf5HRxPEh5w0K4_ViCoAkPNTi1X4Xyg-HXmptN5ZUFOCnCr2U4kPmmgxWUCA3hyiZFto6HhuKyu1Ieex-CeHkSTJibmG1RQtUM/s64/blueprint-social-10.png" title="Add RSS Feed" />
</a>
</li>
</ul>
</div>
<div class='byard-socialemailsub'>
<p style='font-size:14px;font-family:Source Sans Pro;padding-bottom:10px;'>
Sign Up For Free To Get Blogging Tips, Blogger Resources, Search Engine Optimization Tips, Templates and Widgets Straight In Inbox.
</p>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=BloggerYard' class='byard-subsbox-form' method='post' target='_new'>
<input class='byard-socialemailsubname' name='name' placeholder='Your Name' type='text'/>
<input class='byard-socialemailsubemail' name='email' placeholder='Your Email Address' type='text'/>
<input class='byard-socialemailsubbutton' type='submit' value='Sign Up!'/>
</form>
</div>
</div>
</div>
Make changes to these values:
Red Text for your widget's title.
Green Text are your social network names/ Ids.
Yellow Text for your custom message.
Blue one for your FeedBurner name.
If you're planning to add this widget on blog sidebar, note that the widget width is 300px so your sidebar width should be around 315px, check how to edit it on the first step.
Save your work and publish your site! Any questions please comment below . Don't forget to visit the script source found at the demo page!
0 comments: