Awesome expertbloggertricks Subscription Widget for blogger expert blogging tricks tips

This post is about how to add a Subscription Box like our expertblogger . Subscription box contains Facebook, Twitter, RSS Feed, e-mail subscription. This widget is based on a wooden theme. Facebook, Twitter, RSS Feed links are shown as Natural Wooden Sticky Boards. In this tutorial i am adding a new e-mail subscription box with wooden theme.

Demo is in the Right of this Blog

Subscription box with Fully Wooden Theme

Go to Blogger Dashboard
Go to Layout
Select Add a Gadget
You can type title any
And Copy the following code in the content.

Demo of Fully Wooden Theme

Important: If you don't want Mouse over effect of Images in the Subscription box, please delete the RED highlighted code,. If you want then leave it there.

img.beintouch:hover {

background: none repeat scroll 0 0 #D6D6D6;

border-radius: 16px 16px 16px 16px;

box-shadow: 0 0 10px #565656;

}

/* Delete to Here*/
.emailtext {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjza84W2f5C5pqmxf-4murzAAywYFpRRS1T-zT8KdXrKh4e3jmbZYMFxBdP7tUGgksWZHHizHes0Tp33FjJa_kkrmu8nEPYIH5o5mzy81G3QwJiV9116E-gvNe_XwuSEWVyIxeV0CSWSzQ/s1600/mailbox.png") no-repeat scroll 4px center transparent;
    border: 1px solid #7E4E27;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 1px 1px 4px #7E4E27 inset;
    color: #444444;
    font-weight: bold;
    margin-left: 2px;
    padding: 7px 15px 7px 35px;
    text-decoration: none;
    width: 176px;
}
.ebutton {
    background: -moz-linear-gradient(-45deg, #3C1F0E 0%, #D28A47 30%, #F9E183 30%, #D28A47 55%, #3C1F0E 100%) repeat scroll 0 0 transparent;
    border: 1px solid #D3D3D3;
    border-radius: 4px 4px 4px 4px;
    color: #FFFFFF;
    cursor: pointer;
    font-weight: bold;
    margin-left: -18px;
    margin-top: 5px;
    padding: 6px 15px;
    text-decoration: none;
    text-shadow: 1px 1px 0 #000000;
}
</style>
<table align="center" width="317px" cellspacing="0px" cellpadding="1px"><tbody><tr><td><a target="_blank" rel="nofollow" href="https://www.facebook.com/Experttricks"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfAuNFnnync6ujDG4TCM5UTzD3-XbEN46ksWfB8bR3kVGutpxyRpG8_CBeYCwoUPVJFjq7cC0MkL2Qxvq4yAAPOq-eQUomhFyTFG-5EC_BaZy2RYv0NmfbJ7IHggUr550HyLt5iv5ruRM/s1600/woden+board+facebook_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="https://twitter.com/albinthomaz" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqPENyNQvyQG9GMZ8Gml_WH_lmZ6OWYsd8zdoujgCCquiKzK3CQBJ5wbPB9eNzhKkQDstRY8QVnAEsVb7x5nFJn6r7g8HWwMPMoHu6ObnRU0D0m6u767Q7QmEv-qmuenDFcjwJWy2DLk4/s1600/woden+board+twitter_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://feeds.feedburner.com/PerfectBloggingTricksTipsByExperts" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGS2aBSX-7ruz8xYPHAh8nswMBJs4YvbtpSvGptwnET_BU_ceZQj7ZCYN_PXFnm7gbzA3aa4qsFU7n6KdTldzAk1N4AY_7LdVYu4XLfhp3gxbKTZGb7rcCAn39fG4uZvEcfutrRVH3MlM/s1600/woden+board+RSS1_netoops.png" class="beintouch" /></a><a href="http://expertbloggertricks.blogspot.com"></a></td></tr></tbody></table>
<div>Get Latest Tips via e-mail</div>
<form target="popupwindow" style="margin: 0pt;" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=PerfectBloggingTricksTipsByExperts', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" method="post" class="emailform" action="http://feedburner.google.com/fb/a/mailverify">
<input type="hidden" value="BloggerTricks" name="uri" />
<input type="hidden" value="en_US" name="loc" />
<input type="text" value="Enter your email..." onfocus="if (this.value == "Enter your email...") {this.value = ""}" onblur="if (this.value == "") {this.value = "Enter your email...";}" name="email" class="emailtext" />
<input type="submit" value="Subscribe" title="" class="ebutton" alt="" />
</form>

Change the BLUE highlighted code with FACEBOOK PAGE URL, TWTTER, FEED URL, FEED ID respectively.

Subscription box with Default Basic Wooden theme

Go to Layout
Select Add a Gadget

Important: If you don't want Mouse over effect of Images in the Subscription box, please delete the RED highlighted code,. If you want then leave it there.

img.beintouch:hover {

background: none repeat scroll 0 0 #D6D6D6;

border-radius: 16px 16px 16px 16px;

box-shadow: 0 0 10px #565656;

}

/* Delete to Here*/

.emailtext {

}

.ebutton {

}

</style>
<table align="center" width="317px" cellspacing="0px" cellpadding="1px"><tbody><tr><td><a target="_blank" rel="nofollow" href="https://www.facebook.com/Experttricks"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfAuNFnnync6ujDG4TCM5UTzD3-XbEN46ksWfB8bR3kVGutpxyRpG8_CBeYCwoUPVJFjq7cC0MkL2Qxvq4yAAPOq-eQUomhFyTFG-5EC_BaZy2RYv0NmfbJ7IHggUr550HyLt5iv5ruRM/s1600/woden+board+facebook_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://twitter.com/albinthomaz" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqPENyNQvyQG9GMZ8Gml_WH_lmZ6OWYsd8zdoujgCCquiKzK3CQBJ5wbPB9eNzhKkQDstRY8QVnAEsVb7x5nFJn6r7g8HWwMPMoHu6ObnRU0D0m6u767Q7QmEv-qmuenDFcjwJWy2DLk4/s1600/woden+board+twitter_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://feeds.feedburner.com/PerfectBloggingTricksTipsByExperts" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGS2aBSX-7ruz8xYPHAh8nswMBJs4YvbtpSvGptwnET_BU_ceZQj7ZCYN_PXFnm7gbzA3aa4qsFU7n6KdTldzAk1N4AY_7LdVYu4XLfhp3gxbKTZGb7rcCAn39fG4uZvEcfutrRVH3MlM/s1600/woden+board+RSS1_netoops.png" class="beintouch" /></a><a href="http://expertbloggertricks.blogspot.com"></a></td></tr></tbody></table>
<div>Get Latest Tips via e-mail</div>
<form target="popupwindow" style="margin: 0pt;" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=PerfectBloggingTricksTipsByExperts', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" method="post" class="emailform" action="http://feedburner.google.com/fb/a/mailverify">
<input type="hidden" value="BloggerTricks" name="uri" />
<input type="hidden" value="en_US" name="loc" />
<input type="text" value="Enter your email..." onfocus="if (this.value == "Enter your email...") {this.value = ""}" onblur="if (this.value == "") {this.value = "Enter your email...";}" name="email" class="emailtext" />
<input type="submit" value="Subscribe" title="" class="ebutton" alt="" />
</form>

Change the BLUE highlighted code with FACEBOOK PAGE URL, TWTTER, FEED URL, FEED ID respectively.

I think this widget helps you, Please share and like...