आकर्षक Fully Customized 3D Images Subscribe फ़ार्म विजेट लगाएँ

मनोज जैसवाल :नमस्ते दोस्तों आज मैं आप के साथ एक प्यारा विजेट साझा करना चाहता हूँ. यह विजेट पहले से ही इस ब्लॉग पर अलग रूप प्रकाशित किया गया है, लेकिन यह विजेट.उससे भिन्न है पूरी तरह से अनुकूलित है. इस विजेट के मुख्य महत्वपूर्ण विशेषता यह ईमेल सदस्यता आप्शन के साथ अलग अलग आकर्षक पृष्ठभूमि,के साथ पेश कर रहा हूँ,यह ईमेल सदस्यता फ़ार्म के साथ आकर्षक'नया 3D Social Follow Buttons With Smooth Rotation विजेट आपके ब्लॉग या वेब साईट को सुन्दर रूप प्रदान करता है.यहाँ मै स्पस्ट कर दूँ कि यह एक ही विजेट है,बस इस विजेट क़ी तीन अलग अलग थीम प्रस्तुत कर रहा हूँ आपको जो भी थीम पसंद आये उसे ही लगाएं.इसे लगाना बेहद आसान है,इसके लिए आपको अपने टेम्पलेट में भी कोई बदलाव नहीं करना होगा.अपने ब्लॉगर खाते में लॉन्ग इन हों एड विजेट में HTML/JavaScript का चयन करें खुले बॉक्स में आप अपनी पसंद क़ी थीम के साथ सबसे नीचे दिए कोड को उस थीम के ठीक नीचे कापी कर पेस्ट कर दें.इसका लाइव डेमो आप यहाँ देख सकते हैं

मैं यहाँ तीन शैलियों प्रदान कर रहा हूँ.

Luster effect
Shiny Black
Wooden Style

HTML CODES FOR EACH STYLES

Preview :

उदाहरण के लिए, अगर आप चमकदार काले रंग का उपयोग करना चाहते हैं, तो आप अपनी शैली कोड और जो कोड मैं सबसे नीचे दिए कोड के साथ पेस्ट होगा.

luster effect

HTML CODE

<style>
#PBTsub{
width:244px;
padding:70px 10px 0px 9px;
background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF16KM7wJDrAXuvH0Gfzm7tBEjY8WSVDCx2RcV6gwPBg6cQD8oviHERts9ap2YEVXjqWtJ6bZpnR2b4sDoNgUoz8daFYgVo5xAinqfYZht11NUg-lSDlmb8BDvblFGNlcyvlQbrTXpz8M/s1600/HP-Laptop-Luster.png)no-repeat top left;
box-shadow:5px 7px 5px #ddd;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:20px;
}
p#PBT_socialicons img {
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
padding-right:10px;
}
p#PBT_socialicons img:hover {
-moz-transform: rotate(420deg);
-webkit-transform: rotate(420deg);
-o-transform: rotate(420deg);
-ms-transform: rotate(420deg);
transform: rotate(420deg);
}
PBTform.emailout{
margin:20px;
display:block;
clear:both;
padding:50px;
float:right;
}
.PBTtextbox{
background:#000 url(https://dl.dropbox.com/u/37128917/Pictures/wooden-comment-form.gif) no-repeat scroll 4px center;
padding:7px 15px 7px 40px;
color:#666;
font-weight:bold;
font-family:Georgia,Times New Roman,Trebuchet MS;
text-decoration:none;
border:1px solid #D3D3D3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 5px;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
width:145px;
height:20px;
}
.PBTbutton{
color:#666;
font-weight:bold;
text-decoration:none;
padding:6px 15px;
border:3px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-goog-ms-border-radius: 4px;
border-radius: 20px;
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%);
}
</style>

shiny black STYLE

HTML CODE

<style>
#PBTsub{
width:280px;
padding:70px 10px 0px 9px;
background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9VAzqjA4DLpTN0CytGGWAlhiUJCWlRzxsxHaL1CF256myAJwRNGPZmwHCatBfUyZrgVlVKMb26EK_N-_wjHF46JvkkIBWrzp5rMdoeDDTAZMDlQU09t4BhNc1vOWIPg_RAy3TwTcC5hE/s1600/ws_Black_Floor_1440x900.jpg)no-repeat top left;
box-shadow:5px 7px 5px #ddd;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:20px;
}
p#PBT_socialicons img {
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
padding-right:10px;
}
p#PBT_socialicons img:hover {
-moz-transform: rotate(420deg);
-webkit-transform: rotate(420deg);
-o-transform: rotate(420deg);
-ms-transform: rotate(420deg);
transform: rotate(420deg);
}
PBTform.emailout{
margin:20px;
display:block;
clear:both;
padding:50px;
float:right;
}
.PBTtextbox{
background:#000 url(https://dl.dropbox.com/u/37128917/Pictures/wooden-comment-form.gif) no-repeat scroll 4px center;
padding:7px 15px 7px 40px;
color:#666;
font-weight:bold;
font-family:Georgia,Times New Roman,Trebuchet MS;
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;
width:145px;
height:20px;
}
.PBTbutton{
color:#666;
font-weight:bold;
text-decoration:none;
padding:6px 15px;
border:3px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-goog-ms-border-radius: 4px;
border-radius: 20px;
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%);
}
</style>

WOODEN STYLE

HTML CODE

<style>
#PBTsub{
width:280px;
padding:70px 10px 0px 9px;
background:#000 url(https://dl.dropbox.com/u/37128917/Pictures/449864_manojjaiswalpbt.jpg)no-repeat top left;
box-shadow:5px 7px 5px #ddd;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:20px;
}
p#PBT_socialicons img {
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
padding-right:10px;
}
p#PBT_socialicons img:hover {
-moz-transform: rotate(420deg);
-webkit-transform: rotate(420deg);
-o-transform: rotate(420deg);
-ms-transform: rotate(420deg);
transform: rotate(420deg);
}
PBTform.emailout{
margin:20px;
display:block;
clear:both;
padding:50px;
float:right;
}
.PBTtextbox{
background:#000 url(https://dl.dropbox.com/u/37128917/Pictures/wooden-comment-form.gif) no-repeat scroll 4px center;
padding:7px 15px 7px 40px;
color:#666;
font-weight:bold;
font-family:Georgia,Times New Roman,Trebuchet MS;
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;
width:230px;
height:20px;
}
.PBTbutton{
color:#666;
font-weight:bold;
text-decoration:none;
padding:10px 20px;
border:4px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-goog-ms-border-radius: 4px;
border-radius: 20px;
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%);
}
</style>

ऊपर कोड में मैने सिर्फ शैली कोड उपलब्ध कराया है और आप को क्या करना है.

विजेट में कोई शैली कोड पसंद करें और उस के ठीक नीचे इस कोड की प्रतिलिपि बनाएँ और चिपकाएँ.

code

<div id="PBTsub">
<center><p id="PBT_socialicons">
<a href="YOUR RSS FEED URL HERE">
<img border="0" src=" https://dl.dropbox.com/u/37128917/Pictures/manojjaiswalpbtRSS.png " /></a>
<a href="YOUR GOOGLE PLUS URL HERE">
<img border="0" src="https://dl.dropbox.com/u/37128917/Pictures/manojjaiswalpbtGP.png " /></a>
<a href="YOUR TWITTER URL HERE">
<img border="0" src="https://dl.dropbox.com/u/37128917/Pictures/manojjaiswalpbtTW.png " /></a>
<a href="YOUR FACEBOOK URL HERE">
<img border="0" src=" https://dl.dropbox.com/u/37128917/Pictures/manojjaiswalpbtFB.png " /></a></p></center>
<p style='color:#666;
font-weight:bold;
font-family:Georgia,Times New Roman,Trebuchet MS;'>Enter your Email Below To Get Quality Updates Directly Into Your Inbox FREE !!</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailout' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=YOUR FEEDBURNER ID HERE', 'popupwindow', 'scrollbars=yes,width=550,height=550');return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='YOUR FEEDBURNER URL HERE'/>
<center><input name='loc' type='hidden' value='en_US'/>
<input class='PBTtextbox' 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='PBTbutton' title='' type='submit' value='Submit'/>
</form><center>
<p style='float:upper right; color:#000; font-size:10px;'><a href="http://www.manojjaiswalpbt.blogspot.com" target="_blank"> Widget By </a></p>
</div>