How To Add Subscribe Box to Blogger/Website ~ SBSEdition

In this tutorials,I will explain to you how create a Subscribe Box with Feedburner Email subscription,Feed subscription and Social networking buttons(Digg,Twitter,Facebook,Stumbleupon,Delicious).You can easily add or remove social buttons to this widget and setup your email subscription.If you like to add this widget to your blog or a website,then follow the steps given below.

1.Log in to your dashboard--> Design- ->Page Elements.

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the code given below and click save.

<style type="text/css">
#subscribe-box {
 overflow: hidden;
 margin: 10px 0 0 0;
 }

#subscribe-box a.subscribe-sec {
 display: inline-block;
 display: -moz-inline-stack;
 width: 40px;
 padding-top: 38px;
 zoom: 1;
 }

#subscribe-box a.subscribe-sec:hover {
 color: #660000;
 }
</style>

<form action="http://feedburner.google.com/fb/a/mailverify" style="border:1px solid #ccc;padding:3px;" target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Get Notified When We Update !!!</p><p><input style="width:180px" name="email" type="text" value="Enter your email address:" onclick="this.value=&#39;&#39;;" /><input value="FEEDBURNER-ID" name="uri" type="hidden" /><input value="en_US" name="loc" type="hidden" /><input value="Subscribe" type="submit" /></p>

<p><div id="subscribe-box">
<a title="Delicious" href="http://delicious.com/DELICIOUS-USERNAME" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuYNn56MA75X-PFo0m81PMB1LfBY75tWyFQuXe2rOmRauHfxAH99dTKPaK63DfpggSC_HYirTisCdGA6cyY-rbpmwirDgNLKCf4eQqMoKMKQvWV5hw52JD46AJVUQH7qsKx5DWP0fD83aQ/s1600/delicious.png) center top no-repeat"></a>
<a title="Twitter" href="http://twitter.com/TWITTER-USERNAME" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJi_gpQ-BklQ1nUdXXbvhM39JXg5wAoNC2yUHFQiN0Rt_abuOjt1UnU2OH5u0ME_H2-m_mQ5UCBRdJ5W4AvHIrPyf6xNoIgzkqBaD0XkXxou72lnf5B-lXqGHZVCrjUzz6xHUh5kB6Z6y6/s1600/twitter.png) center top no-repeat"></a>
<a title="Digg" href="http://digg.com/users/DIGG-USERNAME" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf3JDJ2oM_Wu-g2nJNdik6DlhVUNOWzXtLRN5i6rHKN7x9DWLesmYbnbdUmP9BHVVVBaOrjhscBLyL-az5NiaE9qhzv2QGqM3mNl8CXbYhE3zEIL5y71lNKy7hW_PfBXHi-BkAR5cL1xYy/s1600/digg.png) center top no-repeat"></a>
<a title="Facebook" href="http://www.facebook.com/FACEBOOK-USERNAME" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJr_a-dFCMgG72LzLY1zPNh6vksyuunlB2YKzg-1tvl9cTQrEd11ZT-hATJY5DfQ39SCQzrNbP4kskYa2rmJnqUxV35ecSaDPftqLMS7Q8LdxvK_Ina-3cR2yDGJFSk65L6n6TV4GprfNb/s1600/facebook.png) center top no-repeat"></a>
<a title="Stumbleupon" href="http://www.stumbleupon.com/stumbler/STUMBLEUPON-USERNAME" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUo6rZU4E2HdP3bNBcAv274TCodRrd5OW9r3jFZRCvwAwPhbrY-VPmiVwR1p0vOmFXgqc0RgrtnO7Uos-td7HfSURFK-A1oIeSt_9qo5XCblYG2E9EwEo-4AaKbrcdGVXGXiCCaCQPU44h/s1600/stumbleupon.png) center top no-repeat"></a>
<a title="RSS Feed" href="http://feeds.feedburner.com/FEEDBURNER-ID" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpl0xxOjF-TAiER8jdMH9H3PK1CdLzeHowkFcpKZFxNESESPFFPOGLJGW0LIxe9befRwWRjWIE_oWEuKAsvyWH15KUi6fjdT4rvNzdYpEDGZoFE3byGeseiW5wobfdqPnRuF-azEjZqGiv/s1600/rss.png) center top no-repeat"></a>
</div></p>

</form>

Note : Remember to REPLACE,

FEEDBURNER-ID with your feedburner ID.
DELICIOUS-USERNAME with your delicious username.
TWITTER-USERNAME with your twitter username.
FACEBOOK-USERNAME with your facebook username.
STUMBLEUPON-USERNAME with your stumbleupon username.

Look at the example given below.

<style type="text/css">
#subscribe-box {
 overflow: hidden;
 margin: 10px 0 0 0;
 }

#subscribe-box a.subscribe-sec {
 display: inline-block;
 display: -moz-inline-stack;
 width: 40px;
 padding-top: 38px;
 zoom: 1;
 }

#subscribe-box a.subscribe-sec:hover {
 color: #660000;
 }
</style>

<form action="http://feedburner.google.com/fb/a/mailverify" style="border:1px solid #ccc;padding:3px;" target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/WyNa', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Get Notified When We Update !!!</p><p><input style="width:180px" name="email" type="text" value="Enter your email address:" onclick="this.value=&#39;&#39;;" /><input value="blogspot/WyNa" name="uri" type="hidden" /><input value="en_US" name="loc" type="hidden" /><input value="Subscribe" type="submit" /></p>

<p><div id="subscribe-box">
<a title="Delicious" href="http://delicious.com/wam8387" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuYNn56MA75X-PFo0m81PMB1LfBY75tWyFQuXe2rOmRauHfxAH99dTKPaK63DfpggSC_HYirTisCdGA6cyY-rbpmwirDgNLKCf4eQqMoKMKQvWV5hw52JD46AJVUQH7qsKx5DWP0fD83aQ/s1600/delicious.png) center top no-repeat"></a>
<a title="Twitter" href="http://twitter.com/btipandtrick" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJi_gpQ-BklQ1nUdXXbvhM39JXg5wAoNC2yUHFQiN0Rt_abuOjt1UnU2OH5u0ME_H2-m_mQ5UCBRdJ5W4AvHIrPyf6xNoIgzkqBaD0XkXxou72lnf5B-lXqGHZVCrjUzz6xHUh5kB6Z6y6/s1600/twitter.png) center top no-repeat"></a>
<a title="Digg" href="http://digg.com/users/wam8387" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf3JDJ2oM_Wu-g2nJNdik6DlhVUNOWzXtLRN5i6rHKN7x9DWLesmYbnbdUmP9BHVVVBaOrjhscBLyL-az5NiaE9qhzv2QGqM3mNl8CXbYhE3zEIL5y71lNKy7hW_PfBXHi-BkAR5cL1xYy/s1600/digg.png) center top no-repeat"></a>
<a title="Facebook" href="http://www.facebook.com/btipandtrick" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJr_a-dFCMgG72LzLY1zPNh6vksyuunlB2YKzg-1tvl9cTQrEd11ZT-hATJY5DfQ39SCQzrNbP4kskYa2rmJnqUxV35ecSaDPftqLMS7Q8LdxvK_Ina-3cR2yDGJFSk65L6n6TV4GprfNb/s1600/facebook.png) center top no-repeat"></a>
<a title="Stumbleupon" href="http://www.stumbleupon.com/stumbler/wam83879" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUo6rZU4E2HdP3bNBcAv274TCodRrd5OW9r3jFZRCvwAwPhbrY-VPmiVwR1p0vOmFXgqc0RgrtnO7Uos-td7HfSURFK-A1oIeSt_9qo5XCblYG2E9EwEo-4AaKbrcdGVXGXiCCaCQPU44h/s1600/stumbleupon.png) center top no-repeat"></a>
<a title="RSS Feed" href="http://feeds.feedburner.com/blogspot/WyNa" class="subscribe-sec" style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpl0xxOjF-TAiER8jdMH9H3PK1CdLzeHowkFcpKZFxNESESPFFPOGLJGW0LIxe9befRwWRjWIE_oWEuKAsvyWH15KUi6fjdT4rvNzdYpEDGZoFE3byGeseiW5wobfdqPnRuF-azEjZqGiv/s1600/rss.png) center top no-repeat"></a>
</div></p>

</form>

You are done.

SBSEdition

Monday, May 23, 2011

How To Add Subscribe Box to Blogger/Website

0 comments:

Post a Comment

Popular Posts

Categories

Blog Archive

About Me