How to add Stylish Bootstrap Buttons to Blog

Mujhe bohat sare questions ate hain ki , Ap kaise apne Blog me Buttons add karte hain? Actually ap Is blog main jo buttons dekhte hain wo is template ke sath tha . To main ap sabka help nehi kar pata tha. To ham apkeliye a kuch buttons design kiya hian Jisko ap apne blog me badi asani se use karsakte hain. Ap ko agar Coding pata hain to ap jante hi honge Bootstrap ke bare main. Agar pata nehi to  Chaliye main bata deta hu: Bootstrap ek HTML,CSS,JavaScript ka frame work hain jiske jariye bohat asani se ham log Website Design karsakte hain. In sare buttons ko hamne bootstrap ki madat se banya hian. In buttons ko use karneke liye apke blog me bootstrap ko installed hona jaruri hain. Umeed hain ki ap is post ko padh kea ap asani se apne blog me buttons ko add karsakte hain.

How to add Stylish Bootstrap Buttons to Blog

How to add Bootstrap in Blogger blog ?

Jaise ki maine apse phelehi kaha tha nki in buttons ko use karneke liye apne blog me Bootstrap installed hona jaruri hain. Is liye apko Bootstrap ko add karna padega Bootstrap Basically do tarikese add hota hain ek ap uska pura source ko apne hosting me add karsakte hain or dusra ap XDN ke jariye Bootstrap ko apne blog me add karsakte hain. But Blogspot me apko Hosting nehi milti hain isliye apko CDN hi use karna padega. Uskeliye ap niche digaye Steps ko follow kare.
(Related: Add Uniqe Search box widgets to Blogger blog)

Steps : How to add bootstrap to Blogger blog

Step 1: Go to bootstrap official website By Clicking here.

Step 2:  Copy the CDN bootstrap code.

Step 3: Go to Your Blogspot dashbord >> Template >> Edit template >>  Ab Ctrl+f  Press karke </head> Tag ko find kare or uske phele us code ko paste karde. 

Step 4: Now save the Template.

Stylish Buttons Designed for blogger

Hamne Bottstrap ke Buttons ko aur thoda style Diya hian CSS ki madat se to Agarv ap insare Styles ko use karna chate hain to ap Niche digaye CSS code ko blog me add karle Uskeliye Ap niche Digaye Steps ko follow kare:

• First of all Go to blogger dashboard  >> Template>> Edit template >>
• Find  ]]></b:skin>  Is tag se phele Niche digaye Buttons ke css code ko add karke Save par click kare.

.btn{  border-radius: 20px;  margin-bottom: 5px;  -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;}.btn:hover{border-radius: 0px;-webkit-transition:0.5s; -o-transition:0.5s; transition:0.5s
}

Add Bootstrap Buttons to blogger blog

So friends a ab ham Important step par a cheke hain ahase apko serf in shot code ko copy karke apke post me add karna hain or #  ki jaga apka link dena hain. 😃
(Related: Add Sliding Realated post Widgets to Blogspot Blog)

Bootstrap Buttons for blogger Style 1

Demo Button

<a href="#" class="btn btn-primary btn-primary"><span class="glyphicon glyphicon-eye-open"></span> Demo</a>

Download Button

<a href="#" class="btn btn-primary btn-primary"><span class="glyphicon glyphicon-download-alt"></span> Download</a>

Visit Button

<a href="#" class="btn btn-primary btn-primary"><span class="glyphicon glyphicon-new-window"></span> Visit</a>

Bootstrap Button Style 2

Demo Button

<a href="#" class="btn btn-success btn-primary"><span class="glyphicon glyphicon-eye-open"></span> Demo</a>

Download Button

<a href="#" class="btn btn-success btn-primary"><span class="glyphicon glyphicon-download-alt"></span> Download</a>

Visit Button

<a href="#" class="btn btn-success btn-primary"><span class="glyphicon glyphicon-new-window"></span> Visit</a>

Bootstrap Button Style 3

Demo Button

<a href="#" class="btn btn-danger btn-primary"><span class="glyphicon glyphicon-eye-open"></span> Demo</a>

Download Button

<a href="#" class="btn btn-danger btn-primary"><span class="glyphicon glyphicon-download-alt"></span> Download</a>

Visit Button

<a href="#" class="btn btn-danger btn-primary"><span class="glyphicon glyphicon-new-window"></span> Visit</a>

Bootstrap Button Style 4

Demo Button

<a href="#" class="btn btn-info btn-primary"><span class="glyphicon glyphicon-eye-open"></span> Demo</a>

Download Button

<a href="#" class="btn btn-info btn-primary"><span class="glyphicon glyphicon-download-alt"></span> Download</a>

Visit Button

<a href="#" class="btn btn-info btn-primary"><span class="glyphicon glyphicon-new-window"></span> Visit</a>

Bootstrap Buttons ko blog me use karneka tarika:

Sabse phele IS tutorial ke according bootstrap ko apne blog me add kare the uske bad Css code add kare.Bas template main apko itna hi karna hain. Abu par dig aye shots code ko ap apne post ya fir page main add karsakte hain.  (Related: How to add Disqus Comment system to blogger Blog)

Last Word

So friends apko a Tutorial kaisa laga Iske bare main comment main batana na bhule. Or agar apko is tutorial ko samjne me koie problem arha hain to Niche comment ke jariye poch sakte hain. 

5 Unique Custom Blogspot search box widgets

Internet pe Thousands blogs/websites hain, Apne kavi socha ki apka blog ko baki blog se kitna alag hain?Konsi chiz apke blog ko baki blog mese unique banate hain? Design ek aisa chiz hain jo sabse phele user ke samne Apke website ka Uniqueness define karta hain Or Fir apka Content dekha jata hain. Ham Bloggers hamesha apne Blog ko Baki blog se unique bana ne me tule hue hain. Aise me kuch cohta sa changes apke blog ko Dusre blog se Unique bana sakte hain. Or is ke liye  Ham apke liye 5 unique search box widgets leke aye hain Jo apke blog ko ek unique look deta hain Usike sath sath apke Impression vi increase kardeta hain.  Search box as a Search tools website me use hota hain. Dekha jaye to ap Wese Blogger ka Defult search Box widgets use karsakte hain but Jab har koie isko hi use karega to Uniqueness kaha jayega ?  Isliye dosto hamne 5 khub surat unique search box apke liye free me leke aye hain.

5 Unique Custom Blogspot search box widgets

Benefits of using search box widgets in Blog

Search box serf apke website ka design ko nehi balki wo uske jariye apke site visitors ko site ko browse karna or jyada asan ho jayega.Jo visitors apke site Regular visit karte hain wo agar kisi din kisi purana post ko search karne jaye to Ek search box unkeliye bohat kam ka hosakta hain or aise apka Visitors vi satisfied hota hain. 

Add Unique Custom Blogspot search widgets to Blogger

Agar ap apne Blog me search widgets add karna chate hain or apko design karna nehi ata hain to ap niche digaye 5 unique search widgets me se use karsakte hain.

Widgets No.1

Code for the Widgets

<style type="text/css">
<!-- Design by www.HindBlogger.in -->
#searchform {
display: inline-block;
zoom: 1; /* ie7 hack for display:inline-block */
*display: inline;
border: solid 1px #d2d2d2;
padding: 3px 5px;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
-webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
box-shadow: 0 1px 0px rgba(0,0,0,.1);
background: #f1f1f1;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
background: -moz-linear-gradient(top,  #fff,  #ededed);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */
-ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */
}
#searchform input {
font: normal 12px/100% Arial, Helvetica, sans-serif;
}
#searchform #searchfield {
background: #fff;
padding: 6px 6px 6px 8px;
width: 130px;
border: solid 1px #bcbbbb;
outline: none;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
        -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);}#searchform #searchbutton {
color: #fff;
border: solid 1px #494949;
font-size: 11px;
height: 27px;
text-shadow: 0 1px 1px rgba(0,0,0,.6);
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
background: #5f5f5f;
background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545));
background: -moz-linear-gradient(top,  #9e9e9e,  #454545);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie7 */
-ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */
}
</style>
<form id="searchform" method="get" action="/search">
<input id="searchfield" name="q" type="text" placeholder="Type here..."  onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}"/>
<input  id="searchbutton" type="submit" value="Search" /></form>

Widgets No.2

Code for the Widgets

<style>
<!-- Design by www.HindBlogger.in -->
#search-form {
background: #e1e1e1;
background: -webkit-gradient( linear,left top, left bottom, color-stop(0, rgb(243,243,243)), color-stop(1, rgb(225,225,225)));
background: -moz-linear-gradient( center top, rgb(243,243,243) 0%, rgb(225,225,225) 100%);
border-radius: 17px;
-webkit-border-radius: 17px;
-moz-border-radius: 17px;
box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.3), 0 0 2px rgba(0,0,0,.3);
}
input[type="text"]{
background: #fafafa;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(250,250,250)), color-stop(1, rgb(230,230,230)));
background: -moz-linear-gradient( center top, rgb(250,250,250) 0%, rgb(230,230,230) 100%);
border: 0;
border-bottom: 1px solid #fff;
border-right: 1px solid rgba(255,255,255,.8);
font-size: 16px;
margin: 4px;
padding: 5px;
width: 150px;
border-radius: 17px;
-webkit-border-radius: 17px;
-moz-border-radius: 17px;
box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);
-webkit-box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);
-moz-box-shadow: -1px -1px 2px rgba(0,0,0,.3), 0 0 1px rgba(0,0,0,.2);
}
input[type="text"]:focus{
outline: none;
background: #fff;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(255,255,255)), color-stop(1, rgb(235,235,235)));
background: -moz-linear-gradient( center top, rgb(255,255,255) 0%, rgb(235,235,235) 100%);
}
input[type="submit"]{
background: #44921f;
background: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgb(79,188,32)), color-stop(0.15, rgb(73,157,34)), color-stop(0.88, rgb(62,135,28)), color-stop(1, rgb(49,114,21)));
background: -moz-linear-gradient( center top, rgb(79,188,32) 0%, rgb(73,157,34) 15%, rgb(62,135,28) 88%, rgb(49,114,21) 100%);
border: 0;
color: #eee;
cursor: pointer;
float: right;
font: 10px Arial, Helvetica, sans-serif;
font-weight: bold;
height: 30px;
margin: 4px 4px 0;
text-shadow: 0 -1px 0 rgba(0,0,0,.3);
width: 60px;
outline: none;
border-radius: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.4);
-moz-box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.2);
-webkit-box-shadow: -1px -1px 1px rgba(255,255,255,.5), 1px 1px 0 rgba(0,0,0,.4);
}
input[type="submit"]:hover {
background: #4ea923;
background: -webkit-gradient( linear, left top, left bottom, color-stop(0, rgb(89,222,27)), color-stop(0.15, rgb(83,179,38)), color-stop(0.8, rgb(66,143,27)), color-stop(1, rgb(54,120,22)));
background: -moz-linear-gradient( center top, rgb(89,222,27) 0%, rgb(83,179,38) 15%, rgb(66,143,27) 80%, rgb(54,120,22) 100%);
}
input[type="submit"]:active {
background: #4ea923;
background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(89,222,27)), color-stop(0.15, rgb(83,179,38)), color-stop(0.8, rgb(66,143,27)), color-stop(1, rgb(54,120,22)));
background: -moz-linear-gradient( center bottom, rgb(89,222,27) 0%, rgb(83,179,38) 15%, rgb(66,143,27) 80%, rgb(54,120,22) 100%);
}</style>
<form id="search-form" method="get" action="/search">
  <input name="q" type="text" />
  <input type="submit" value="Search" />
</form>

Widgets No.3

Code for the Widgets

<style>
<!-- Design by www.HindBlogger.in -->
.form-container {
height: 49px;
padding: 0;
overflow: hidden;
text-align: left;
background: #f8f8f8;
border: 1px solid #ccc;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
-moz-box-shadow: 0 4px 0 #ddd, 0 6px 8px rgba(0,0,0,.5);
-webkit-box-shadow: 0 4px 0 #ddd, 0 6px 8px rgba(0,0,0,.5);
box-shadow: 0 4px 0 #ddd, 0 6px 8px rgba(0,0,0,.5);
}
.search-field {
float: left;
width: 190px;
height: 34px;
margin: 6px 0 0 8px;
padding: 0 8px;
font-family: 'Open Sans', Arial, sans-serif;
font-size: 16px;
color: #888;
font-style: italic;
font-weight: 400;
background: #fff;
border: 1px solid #ccc;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#ffffff));
background-image: -webkit-linear-gradient(top, #f5f5f5, #ffffff);
background-image: -moz-linear-gradient(top, #f5f5f5, #ffffff);
background-image: -ms-linear-gradient(top, #f5f5f5, #ffffff);
background-image: -o-linear-gradient(top, #f5f5f5, #ffffff);
background-image: linear-gradient(top, #f5f5f5, #ffffff);
-moz-box-shadow: 0 1px 1px #e2e2e2 inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 1px #e2e2e2 inset, 0 1px 0 #fff;
box-shadow: 0 1px 1px #e2e2e2 inset, 0 1px 0 #fff;
}
.search-field:focus {
outline: 0;
color: #666;
border-color: #aaa;
-moz-box-shadow: 0 1px 1px #dadada inset;
-webkit-box-shadow: 0 1px 1px #dadada inset;
box-shadow: 0 1px 1px #dadada inset;
}
.submit-container {
float: left;
width: 50px;
height: 32px;
margin: 7px 0 0 7px;
padding: 0;
cursor: pointer;
background: #e63c0d;
border: 1px solid #d62700;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f55f15), to(#e63c0d));
background-image: -webkit-linear-gradient(top, #f55f15, #e63c0d);
background-image: -moz-linear-gradient(top, #f55f15, #e63c0d);
background-image: -ms-linear-gradient(top, #f55f15, #e63c0d);
background-image: -o-linear-gradient(top, #f55f15, #e63c0d);
background-image: linear-gradient(top, #f55f15, #e63c0d);
-moz-box-shadow: 0 1px 1px #fa8e1f inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 1px #fa8e1f inset, 0 1px 0 #fff;
box-shadow: 0 1px 1px #fa8e1f inset, 0 1px 0 #fff;
}
.submit-container:hover, .submit-container:focus {
background-image: -webkit-gradient(linear, left top, left bottom, from(#e63c0d), to(#f55f15));
background-image: -webkit-linear-gradient(top, #e63c0d, #f55f15);
background-image: -moz-linear-gradient(top, #e63c0d, #f55f15);
background-image: -ms-linear-gradient(top, #e63c0d, #f55f15);
background-image: -o-linear-gradient(top, #e63c0d, #f55f15);
background-image: linear-gradient(top, #e63c0d, #f55f15);
-moz-box-shadow: 0 1px 1px #f36215 inset, 0 1px 0 #fff;
-webkit-box-shadow: 0 1px 1px #f36215 inset, 0 1px 0 #fff;
box-shadow: 0 1px 1px #f36215 inset, 0 1px 0 #fff;
}
.submit-container:active {outline: 0;-moz-box-shadow: 0 1px 6px #e4340b inset;-webkit-box-shadow: 0 1px 6px #e4340b inset;box-shadow: 0 1px 6px #e4340b inset;}.submit {float: left;width: 60px;height: 32px;margin: 0;padding: 0;cursor: pointer;border: 0px solid #000;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB-j_00BKoxDYN2mMfWMe9tnKRszn19Wl6r2uSgarb4EDScGJJEWtsrUjxgk9wZNiXP3ZxVFH89K858_-hNKqw0eMFQ7j_NYEmgDStUgXnSphgwdfA9iV0LFEaLJRi9c0C9z0piJSml-0/s1600/magnifier.png) 20px 6px no-repeat;-moz-border-radius: 6px;-webkit-border-radius: 6px; border-radius: 6px;}</style>
<div id="search-form"><form class="form-container"  method="get" action="/search">
<input type="text" name="q" class="search-field" placeholder="Type search text here..." />
<div class="submit-container"><input type="submit" value="" class="submit" />
</div></form></div>

Widgets No.4

Code for the Widgets

<style>
<!--Design by www.HindBlogger.in -->
#search {
    -webkit-appearance: none;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    width: 24px;
    padding: 0 10px;
    height: 24px;
    font-size: 14px;
    color: #666;
    line-height: 24px;
    border: 0;
    border-radius: 50px;
    box-shadow: 0 0 0 1px rgba(0,150,200,.5), inset 0 2px 5px rgba(0,100,150,.3), 0 2px 0 rgba(255,255,255,.6);
    position: relative;
    z-index: 5;
    -webkit-transition: .3s ease;
    -moz-transition: .3s ease;
}
#search:focus {
    outline: none;
    width: 180px;
}
p.s {
    z-index: 4;
    position: relative;
    padding: 5px;
    line-height: 0;
    border-radius: 100px;
    background: #b9ecfe;
    background-image: -webkit-linear-gradient(#dbf6ff,#b9ecfe);
    background-image: -moz-linear-gradient(#dbf6ff,#b9ecfe);
    display: inline-block;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 5px rgba(0,100,150,.4);
}
p.s:hover {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 3px 2px rgba(100,200,255,.5);
}
p.s:after {
    content: '';
    display: block;
    position: absolute;
    width: 5px;
    height: 20px;
    background: #b9ecfe;
    bottom: -10px;
    right: -3px;
    border-radius: 0 0 5px 5px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    box-shadow: inset 0 -1px 0 rgbA(255,255,255,.6), -2px 2px 2px rgba(0,100,150,.4);
}
p.s:hover:after {
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.6), -2px 2px 2px 1px rgba(100,200,255,.5);
}
</style>
<form  method="get" action="/search">
<p class="s"><input name="q" id="search" type="text"></p>
</form>

Widgets No.5

Code for the Widgets

<style>
<!-- Design by www.HindBlogger.in -->
@import url(http://fonts.googleapis.com/css?family=Montserrat+Alternates);
.field {
  display:flex;
  position:realtive;
  margin:5em auto;
  flex-direction:row;
  box-shadow:
   1px 1px 0 rgb(22, 160, 133),
   2px 2px 0 rgb(22, 160, 133),
   3px 3px 0 rgb(22, 160, 133),
   4px 4px 0 rgb(22, 160, 133),
   5px 5px 0 rgb(22, 160, 133),
   6px 6px 0 rgb(22, 160, 133),
   7px 7px 0 rgb(22, 160, 133)
  ;
}
.field>input[type=text],
.field>button {
  display:block;
  font:1.2em 'Montserrat Alternates';
}
.field>input[type=text] {
  flex:1;
  padding:0.6em;
  border:0.2em solid rgb(26, 188, 156);
}
.field>button {
  padding:0.6em 0.8em;
  background-color:rgb(26, 188, 156);
  color:white;
  border:none;
}
</style>
<form method="get" action="/search">
<div class="field">
  <input type="text" name="q" id="searchterm" placeholder="what are you searching for?" />
  <button type="button" id="search">Find!</button>
</div>
 </form>
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

How to add Custom search box widgets to Blogspot blog

Step 1.  Login to your blogger account  Uske bad Layout me aye  >> “Add a gadget” Link par click kare jaha pe is widgets ko add karna cha rahe hain.

Step 2. Ab apke samne ek popup box khul jaye ga inmese “Html/Java Script” par click kare

Step 3. Paste any  Of thr above code. That’s it Guys easy na 😅.

Aur Padiye

• Blogger me Godaddy custom domain setup kaise kare
• How to Customize Blogger Scrollbar
• 5 Stylish Email Subscription Box Widgets For Blogger
• 5 Best Magazine Style Blogger Template

Last Word 

So a tha Kuch 5 unique search box widgets. Ap in sare widgets ko free use karsakte hain. Or sare code me HTML tag ke andar ek Credit diyagya  hain Jisko ap edit nakare isse apke site ka koie nuksan nehi hoga or user dekhvi nehi payega. Umeed hain ki ap in widgets ko use kar parhe hain. Agar apke man koie vi doubt ya sawal hain to niche comment karke puch sakte hain. 

Blog me Sliding related post widgets kaise add kare

Hi Bloggers,  In this Article ham sikhenge Ki kaise ap apne Blogger blog me Sliding Related post widgets ko add karsakte hain. Blogger par Is widgets ko add karke kya hota hain basically Apke har post, page par automatically Related post ka slide ajate hain Aur Iske ke jariye ap apne Blog ka views or jayada increase karsakte hain aur to aur apke blog is-se or jayda Professional  lagega. Is widgets ko takriban  sare professional Blogger use karte hain . Aur ham vi is widgets ko user kar rahehe kafi dino se. Ap is widgets ka live example dekh sakte hain hamare blog par hi. To bina time waste kiye Chaliye sikh lete hain. (Aur padiye: How to customize blogger scrollbar)

Blogger me Sliding Post widgets  add kaise and Ku kare ?

Wase to blog  me Sliding post widgets ko add karneka bohat sare Tadika hote hain. Par Is article par ham ek website ki madat se is Widgets ko add karenge Kuki mujhe Lagta hain A Sab se Asan tadika hain Is widgets ko add karneka . Main is site ke bare main batraha hu isliye ku ki Isme apke Blog ka Page slow nehi hoga. Jabki Agar ham Manually isko Java  scipt ya fir J Query ki madat   karne jaye to Hamare page speed Slow ho jata hain or Isse SEO par effect  padta hain. To ab chaliye janlete hain ki is widgets ko kaise add kare. Is widgets ko add karneke liye ap Niche digaye Steps ko follow kare.

Add Sliding Related Post Widgets to Blogger:

1. Sabse Phele Niche digaye Website par Jaye or Sign up karle.

https://www.addthis.com/register?next=/dashboard

2. Ab apko tools mese Related post wale button ko select karna hain.

3. Ab apke Samne ek new page open hoga Ahape apko Slider par click karna hain uske bad continue par click kare.

4. Ahape ap Apni Blog kee hisab se Is widgets ko customize karsakte hain. Or isko By Default vi chod sakte hain. Fir Save & Continue Button par click kare.

5. Ab Apko ek code Diya jayega ,usko copy kare

6. Ab Browser me New tab karke Blogger Dashboard me aye >> template>> edit HTML
7.Ctrl+F press karke </body> tag find kare or is Tag se pehele Us code ko Paste karde.
8. Click the Save Button. To easy na 😉.

Aur Padiye:

• Blog Content copy honese kaise roke?
• Push notification blog me kaise add kare
• Top 10 free Icons provider website to download free icons.

Last Word

So Friends A tha Blog me Sliding related post ko add karneka tadika. Umeed hain ki apko is article se help mili hogi. Is post ko ap apne baki Blogger Friends ke sath Share kare taki usevi pata chal sake ki kaise A sab hote hain. Agar Apke Man me koie sawal hain to ap niche comment karke mujse puch sakte hain. Thank you.

Push Notification/Alert Blog me Kaise add kare

Jab ap kisivi Populer blog main Jate hain to apne Aksar khayal kiya hoga ki Us Blog Pe Bich bich me Post ka Notification/Alert Ate hain. Apne kavi Socha Aisa post notification/Alert kaise ate hain? Is-tarha ka post Notification/Alert Message blog me kaise Add kare. Is-Tarha ka Post Notification/Alert  ko Push Notification bolte hain. Ap agar Apne Blog ko Successfull banana Chate ho to Push notification apke liye Faydemand hosakte hain. Maine Notice kiya hain Bohat Bade Bade Successful blog main Push Post notification Added hain. Or apko vi Apne Blog par Push post Notification Add karlena cahiye taki Apke Readers Apke Post ka Update Notification ki taraha pasake.

Push Notification/Alert Blog me Kaise add kare

Agar Apvi Apne Blog par Push Post Notification/Alert Add karna Chate hain to Is-Article ko pura read kare. Isme maine apko Push Post Notification ke bare main A-Z Bataya hain. To bina time waste kiye Chaliye Sikkhte hain.

Push Notification kya hain?

Dosto Push Notification ko Server notification vi bolte hain. A Ek Message/Alert ki tarha hain Jo Koi Website, MObile App ke Readers Ke pas Send Delivered hota hin kisi Push service provider ke jariye. Pehele a service Serf App me use hota Tha par ab a Service Savi Device main Available hain.
Or ap kisvi Plat form Ke Websites, Blogs ME Push Notification Add karsakte hain.

Blog me Push Notification Kaise Use hota hain?

Blog me Push notification Apke Blog ka Latest Postka Update Apke Blog readers tak Send karte hain.Push Notification Email Newslatter se Kafi Bhetar hain quki Ahapar Push notification Subscribe karne keliye apko apna Email nehi dena hota hain Or serf ek Click se Push Notification ka Subscribe ho jata hain. Or Visitors tak post update Real time me send ho jata hain. Push Notification Bohat hi effective hain Iske jariye apka or apka Blog Readers ke sath Connection Or jayada Stronge ho jayega.

Push Notification Work Kaise Karta hain?

Manlijiye ap Apne Blog main Push Notification/Server Notification add kiya hain. Ab apke Blog Me Koi Visitors jate hain To Unhe Sabse phele Apke blog ka Post notification ko Subscribe karna hoga or Fir Us Visitors ko Apke Latest Post ka Update Notification ke Akar main Milega. Or Push notification Ke jariye manully vi Visitors ko Notification Send karsakte hain.

Push Notification/Alert Blogger me kaise Add kare

Ji dosto Hamne Push Notification ke bare main bohat kuch jan gaye ab Apko Push Notification/Alert Bohat Interesting laga hoga, to chaliye sikhte hain push Notification ko Blog me kaise add kare.
Waise Internet par To bohat sare Push Notification Provider hain par Ham Pus Crew Ko add karenge Q ki PushCrew ek Free,User friendly,Easy to Notify Or achha Push Service Provider hain.
Push Notification/Alert ko Add karne keliye Niche Digaye Steps Follow kare:

1. Sabse phele Apko PushCrew.com pe jana Jab ap PushCrew ke website par chale jayenge tab Uske uperki Right side me. Apko sign-Up option milega ap Us Option par click karna hain.

2. Fir Jab ap Sign-up par click karenge tab apke samne ek Form open hoga Wohapar apko apna Account details dena hain. Or account details dene ke bad Create Account par click kare Fir ap PushCrew par Log-In ho jayenge.

3. Ab apko Ek PushCrew Ka ek Code Apne blog me Add karna hain. Wo code apko First PAge par hi mil jaye ga. Ap us code ko Copy karke NotePad me save karde.

4.Ab Ap apne Blogger ka dash Bord me aye>> Template par Click kare>>Edit Template par Click kare Ab ap Apne keybord se Ctrl+f karke </head> ko Search kare oR Note pad me Save kiya hua Code ko </head> Tag ke age  Paste karde or Save par Click kare. OR save kartehi apka Push service Activet ho jayega.

Push Notification/Alert ko Wordpress Blog par kaise add Kare

Jab ap PusCrew me login ho gayenge to First page pe Wordpress Ka Pluging Milega apko serf us plugin ko Istall karna hain Bas. Or apka Push notification activate ho jayega.

Blog me automatic Post ka Notification Kaise send kare

Jab apka upar diye gaye Step Pura jo jayega to apka ek or important kam reheta hain wo hai apka Blog ka rss Feed ko PushCrew ke sath Link karana ap niche Di gaye Steps ko follow karke Asanise Apne Blog ka rss Feed ko PushCrew ke sath link  karsakte hain:

1. sabse phele PusCrew me log-in karke PushCrew Dashbord me aye Fir left side me "Rss-to-Push" Ka ek option milega Woha par click kare.

2.Ab apko Apna Blog ka rss feed url dena hain or Add Rss par click karna hain. Bas Ab apke Blog Main Jab Ap New post karenge tab automatic apke post ka Notification/Alert apke blog reader ke pas Delivered  Ho gayega.

Aur Padiye:

• Disqus comment System ko Blog me kaise add kare
• Hinglish/Hindi Blog par jald Adsense kaise Approve kare
• 5 Stylish Email Subscription widgets for Blogger
• Best ever Contact form Builder for Blogger

To dosto A tha push Notification/Alert Ko Blog me Add karneka Tarika Umeed hain ki Article apko kafi pasand  ayahoga Agar apko is article se help mila to ap Is article ko Social Media me Apne Dosto ke sath share karsakte hain. Agar apke man main koievi sawal hain to ap Jarur niche comment kare Apko apke sawal ka Answer jarur milega. Or Is-tarha ki Iteresting Article ke liye Hamare Newslatter ko subscribe karke Jude rahe hamare sath Jain Hind, Bande Mataram !

Disqus Comment System Blogger me Kaise Add kare

Jayada tar blogger ka Ek Common Problem reheta hain Wo hain Comment Moderation. Miane Bohat se Blog me Dekha ki wo log achhe se  apne Comment ko Moderate nehi karpete Jayadatar Problem Ate hain jab apko Kisi comment par Double Reply karnan pade. Agar apko Blogger ki World me Jayda Impression pana hai to apko ek Achha Comment system ka sakt jarurat hain. Ku Ki comment ek Bohat Ehem Chij hota hin Blogging mian.

Disqus Comment System Blogger me Kaise Add kare

Disqus comment system Blogger main kaise add kare. Is article par apko disqus ke bare main A-Z bataaya hain ki Disqus comment system ka Blog main jarurat kya hain? Disqus Kaise Add kare Blog me etc. Disqus ke bare main Jayada bat karnese phele chaliye Jan lete hain Disqus Comment system kya hain. Or Ku disqus use kare.

What is Disqus Comment System?

Disqus Comment system ek Globally use hone wale Comment system/Comment Plugin hain jisko Ko Worldwide Bade Bade Blogger/Website use Karte hain. Wese to Disqus Comment system ka bohat sare features hain Jiase Har Comment pe Apko alag se email me Notification milega.

For example Agar Koie visitors Disqus Comment System ke Jariye Apke Blog mein Comment karte hain to Us ka Notification apko Email main mile ga or ap us comment ja Reply wahi email se karsakte hain apko apki site par jane ki Jarurat nehi. Look ke Mamle main Vi Disqus Comment
system Blogger se Bohat age hain Isme apko Related Comment ka Vi ek option miljata hain.
Maine Disqus Comment System Features ki ek List Banaya hain Dekhlijiye.

• Awesome look And Clean Designing
• SEO friendly
• SPAM free
• Ap Disqus me ki gaye Comment ko easyly Social media par share karsakte hain
• Bohat Achha Administrator Panel
• Multiple Reply option on Every Comment
• Disqus se ap Paise vi Earn karsakte hain.(Iske Bare main Ek alag sa Article Likhonga)
• Responsive
• Har Comment par alagse Email Notification
• Ap Kisivi Comment ko asani se Approve or Disapprove karsakte hain

Disqus Comment System Blogger me Kaise add kare

In my Case Mene Blog ke phele din se Disqus Ko Use kiya. Kuqi mujhe Disqus Sabse Achha Comment System Lagta hain.Umeed hain apne disqus ke bare main Bohat kuj Jangaye honge or Apko vi a Comment system Interesting laga hoga Or apvi chate hain aisa ek comment system to Chaliye Sikh lete hain Disqus comment System Kaise Blogger me Add karete hain.

Disqus Comment system Kiase blogger me Add kare?

1. Sabse phele Logon to Disqus Account. Agar apke pas Disqus account nehi hain to ap badi asani se Create karsakte hain Or ap Facebook, google+ se vi signup karsakte hain.

2. Jab apka Account Create Ho jaye ga Tab ap "I want To install Disqus on my site" Button par Click kare.

3.Ab apke Samne Create New site ka Page ayega ahapar Apna Disqus Account Details deke Create par Click kare.

4. Ab apko Apna Platform Select karna hain ap ka Blog Agar Blogger main hain to Blogger select kare.

5. Blogger Select karne ke bad apke samne new page open hoga aha par apko 1 No. option par Click karna hain.

6. Ab Finaly Step: Google apse Permission mangega apke Blog par Disqus comment system add karne ke liye. Is time pe apko Add widgets par Click karna hain. 

Fir Wapas pichle tab par ake configure par click karke hain Uske bad apka Blog ka details dijiye or Compelete Setup par click kare .Bas you r Done. Ap success fully Disqus comment system ko apne Blogger par add karna Sikh gaye.

Aur Padiye: 

• Best Contact form Builder for Blogger websites
• 5 Stylish Email Subscription Box Widgets For Blogger
• Blogger Par Advanced SEO Kaise Enable karte hain 
• Blogger par Adsense kab apply karna cahiye? 

So friends A Tha Disqus Comment system ko add karne ka Article Umees hain Apko Disqus Comment System Ki bareme Kafi kuch Jankari mila hoga. Agar apke man Main Disqus comment System ko leke Koievi Sawal hain to ap Niche comment karsakte hain. Isi tarha nke Problogging Article keliye Ap hmare Is choti si blog ko Subscribe karke Hamare Is Hind Blogger Family se Judh sakte hain. Thank u For Reading. Jain Hind, Bande Mataram !

5 Stylish Email Subscription Box Widgets For Blogger

Is article par ham apkeliye 5 Stylish Email Subscription Box Widgets Leaye hain. Isme apko lag bhag har Style ka Emial Subscription box miljayega. Wese to Ham Blogger ka Default Email Subscription Box use karsakte hain Par wo utna Stylish nehi hota Or Is-se apka Impression Kharab ho jata hain. Is liye Hamne apke liye Kuch Achha Stylish Email Subscription Box Widgets Laye hain Jo apka Blog ka Look ko Increase karega or apka Impressionvi kharab nehi hoga. Apne kaisare Populer blog main Email Subscription Box ko dekha ho ga Ham Usitha ka Email Subscription box apke liye Laye hain jo ap Badi asani se apne Blog me Add karsakte han.
Aur Padiye: Best Contact form Builder for Blogger websites

5 Stylish Email Subscription Box Widgets For Blogger

Email Subscription Box ka Blog me Jarurat kya hain?

Ji ha Dosto Email subscription Box Blog maon Bohat jaruri hain, Is-ki madat se Apka Blog or Visitors ke ander Ke Readership increase karte hain. Email Subscription ki madat se Apka blog visitors apke Blog Post ka Regular Feed/post update pasakte hain apne email mai. Email Subscription box Ki madat sain ek Community ki jasakte hain.
Aur Padiye: How to Submit Blogger Blog To Google Webmaster tool

 

The Process Of email Subscription box

Man lijiye apne Google par kuch search kiya or ap Ko koie blog pasand agaya or apko laga Ki - 'ha ye blog kam ka hain hame iska Reguler updates cahiye' To dosto is time pe ap Kaiya karenge ap Simply ap Us blog ko Subscribe karlenge taki Ap Us blog ka reguler update apne email mai Pasake.

5 Stylish Email Subscription Box Widgets For Blogger?

Ahapar Jo Email Subscription Box Widgets hain Wo sare High quality, Responsive, Lite or Fast loading hain In sab Email subscription box apke Site/Blog par koive extra Effect nehi padega(Fast Loading). Or lite hone ke waja se ap isko Asanise apne Blog main laga sakte ho.
Bina Time waste kiya Chaliye dekhlete hain 5 Best Email Subscription Box Widgets.
Aur Padiye: Blogger Par Advanced SEO Kaise Enable karte hain

 

1. Email Subscription box widgets

 A Email Subscription Box top ha Quki a Bohat hi welled tarkise Coding kiya hain. Or Very Fast loading hain.

<link href='http://fonts.googleapis.com/css?family=Open
+Sans:300italic,400italic,600italic,400,300,600,700' rel='stylesheet' type='text/css'/>
<div id='byard-emailsubsocial'>
              <div class='heading'>
               Sign Up in Seconds
              </div>
                 <p>Sign up with your email address to receive hot updates straight in your inbox.</p>
             <div class='emailsub'>
              <form action='http://feedburner.google.com/fb/a/mailverify'
method='post'target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=hindblogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
               <input type='text' name='name' placeholder='Your Name' />
               <input type='text' name='email' placeholder='Your Email' />
               <input type="hidden" value="BloggerYard" name="uri"/>
               <input type="hidden" name="loc" value="en_US"/>
                        <input value="Sign Up Now!" class="button" type="submit" />

             </form>
             </div>

<p id='credits'>Powered By : <a href='http://www.bloggeryard.com'>Blogger Yard</a></p>

             </div>

 <style type='text/css'>
     #byard-emailsubsocial {
      width: 300px;
      height: 330px;
      border: 1px solid #ddd;
        border-radius: 5px 5px 0px 0px;
     }
     #byard-emailsubsocial .heading {
padding: 15px 25px;
line-height: 35px;
font-size: 26px;
font-weight: 600;
font-family: open sans;
color: rgb(170, 170, 170);
text-align: center;
text-shadow: 0px 1px rgba(255, 255, 255, 0.75);
background: none repeat scroll 0% 0% rgb(247, 247, 247);
     }
   #byard-emailsubsocial p {
    font-family: open sans;
    font-size: 13px;
    color: rgb(170, 170, 170);
    line-height: 25px;
    padding: 10px 20px 0 20px;
    margin: 0;
   }
   #byard-emailsubsocial .emailsub {
    padding: 0px 20px 10px 20px;
   }
   #byard-emailsubsocial .emailsub input {
    color: rgb(170, 170, 170);
    padding: 10px;
    margin-top: 10px;
    font-size: 15px;
    font-family: open sans;
    width: 92%;
    border: 1px solid #ccc;
    border-bottom: 2px solid #ccc;
    border-radius: 5px;
    transition:border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
   }
   #byard-emailsubsocial .emailsub input:focus {
    border-color:#F4836A;
    outline: none;
    box-shadow: 0 0 2px 1px #F4836A;
   }
   #byard-emailsubsocial .emailsub .button {
    background: #F4836A;
    color: white!important;
    border:none;
    outline: none;
    border-bottom: 3px solid #B3614E;
    transition:background .4s linear;
    width: 90%;
    margin-right: 5%;
    margin-left: 5%;
    font-weight: 600;
    cursor:pointer;
   }
   #byard-emailsubsocial .emailsub .button:hover{
    background: #DD7761;
   }

#credits {
margin: 0 auto!important;
margin-top: -10px!important;
width: 160px;
}
     </style>

 

2. Email Subscription box widgets

<style type='text/css'>#sidebar-subscribe-box {
    background: url(http://1.bp.blogspot.com/-

IyEBRR8yOQQ/UBhYdBd23PI/AAAAAAAAFTU/aeW3JdAlrCs/s1600/colored-strip.png) repeat scroll 0 0 transparent;
    border: 1px solid #aaa;
    border-radius: 3px;
    padding: 3px 0;
}
.sidebar-subscribe-box-wrapper {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghw5UjxK-PYYN6P47elGSR5obbnqT6r78mOHBEbItAk9tl4tLbagOw90OpHohyphenhyphenSUSgfIUhP2ycBJPFVBVVFqcURGupJYpZiCXtNGGNFFweyt6kiCIA3e8ugyuvWfaTP4v62QzqHoxgK8pW/s1600/bg-

pattern.png) repeat scroll 0 0 #f7f7f7;
    color: #111;
    font-size: 14px;
    line-height: 20px;
    padding: 1px 20px 10px;
    text-align: center;
    text-transform: uppercase;
}
.sidebar-subscribe-box-form {
    clear: both;
    display: block;
    margin: 10px 0;
}
form.sidebar-subscribe-box-form {
    clear: both;
    display: block;
    margin: 10px 0 0;
    width: auto;
}
.sidebar-subscribe-box-email-field {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    background: #fff url(http://1.bp.blogspot.com/-

JMYdQsIa9WQ/UDZqxqqrTEI/AAAAAAAAFho/AocEv70U8K8/s1600/sprites.png) no-repeat 0 -27px;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #444;
    margin: 0 0 15px;
    padding: 10px 40px;
    width: 68%;
}
.sidebar-subscribe-box-email-button {
    background: #09f;
    border: 1px solid #007fff;
    box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;
    color: #fff;
    cursor: pointer;
    font-family: verdana;
    font-weight: 700;
    padding: 10px;
    text-shadow: 1px 1px 0 rgba(0,0,0,.4);
    text-transform: uppercase;
    width: 100%;
}
.sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus {
    background: #1ca4ff;
}
.sidebar-subscribe-box-email-button:active {
    -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.5) inset;
    -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.5) inset;
    box-shadow: 0 1px 4px rgba(0,0,0,0.5) inset;
    outline: 0;
}
iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table {
    width: 100%;
}
embed {
    border-radius: 3px;
    -moz-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    background: #FFF;
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    margin: 0;
    padding: 4px 4px 4px;
}
#footer-section {
    background: #f5f5f5 url(http://1.bp.blogspot.com/-

n5s9Bu0JCgg/UA_AfQ5qLkI/AAAAAAAAFMU/G9FOuh4SP7k/s0/bg-pattern.png) repeat top left;
    border-top: 1px solid #aaa;
    box-shadow: inset 0 4px 6px -3px #aaa;
    font-family: cambria;
    font-size: 14px;
    height: 100px;
    margin: 10px -30px 5px;
    padding: 0 30px;
    text-align: center;
    width: 100%;
}</style>
<div id="sidebar-subscribe-box"><div class="sidebar-subscribe-box-wrapper"><p>Subscribe to our email

newsletter & receive updates right in your inbox.
</p><div class="sidebar-subscribe-box-form"><form action="http://feedburner.google.com/fb/a/mailverify?uri=hindblogger"
class="sidebar-subscribe-box-form" method="post" onsubmit="window.open

('http://feedburner.google.com/fb/a/mailverify?uri=hindblogger',
'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="labstrike" /><input name="loc" type="hidden" value="en_US" />
<input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Enter your

email address :)"/>
<input class="sidebar-subscribe-box-email-button" title="" type="submit" value="Subscribe Now!" />

 

3. Email Subscription box widgets

<style type="text/css">
#LS-Newsletter4-Box {
    background: url(http://1.bp.blogspot.com/-

65PvPzNlUCo/UEEijEFGUdI/AAAAAAAALTI/5UGflvDEMJ8/s1600/Newsletter-5.png)no-repeat scroll center center

transparent;
    height: 299px;
    width: 408px;
}
form#LS-Newsletter4-Form {
    display: block;
    margin: 0;
    padding-left: 71px;
    padding-top: 63px;
}
form#LS-Newsletter4-Form #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 28px;
    margin-top: 37px;
    vertical-align: top;
    width: 275px;
    outline:0px;
    position: relative;
    left: -25px;
}
form#LS-Newsletter4-Form #d {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 28px;
    margin-top: 38px;
    vertical-align: top;
    width: 275px;
    outline:0px;
    position: relative;
    left: -25px;
}
form#LS-Newsletter4-Form #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 43px;
    position: relative;
    left: -36px;
    top: 25px;
    width: 144px;
    border-radius: 5px;
}

</style>
<div id="LS-Newsletter4-Box">
    <form id="LS-Newsletter4-Form" action="#" method="post">
        <input id="d" name="name" value="Enter Your Name"
        onfocus='if (this.value == "Enter Your Name") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Enter Your Name";}'/>
        <input type="email" id="s" name="email" value="Enter Your E-Mail"
        onfocus='if (this.value == "Enter Your E-Mail") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Enter Your E-Mail";}'/>
        <input type="image" src="http://3.bp.blogspot.com/-D4DL8TMRtd0/UCuQt-

AVn3I/AAAAAAAAJz8/K1sjzXIxyQk/s1600/blank.gif" id="sbutton"/>
    </form>
</div>

 

4. Email Subscription box widgets

<style>
#responsiveness {
padding: 15px 25px 20px;
line-height: 35px;
text-align: center;
background: none repeat scroll 0% 0% #1E1E1E;
margin: -15px;
border-radius: 3px;
}
#responsiveness h5 {
font-size: 17px;
font-weight: 700;
font-family: 'PT Sans',sans-serif;
color: #FFF;
padding: 0px;
text-transform: uppercase;
line-height: 1.2;
margin: 10px 0px 15px;
letter-spacing: 0.01em;
text-align: left;
}
input.placer {
color: #333;
padding: 15px;
font-size: 14px;
font-family: PT Sans,sans-serif;
border: 1px solid #EEE;
transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
margin: 10px auto 0px;
border-radius: 3px;
width: 89%;
}
input.button {
background-color: #BA1A00;
color: #FFF;
font-weight: 400;
cursor: pointer;
border-radius: 4px;
text-transform: uppercase;
font-family: PT Sans,serif;
padding: 10px 15px;
border: medium none;
font-size: 16px;
width: 100%;
margin: 15px auto 0px;
}
input.button:hover{
background: #FFF;
color: #333;
}
</style>
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/>
<div id='responsiveness'>
<p style=" line-height:0px; font-size:7px; font-weight:bold; text-align:right"><a style="color:#D3D3D3;" href="http://www.hindblogger.com">widgets</a></p>
<h5>Hume Email Par Subscribe Kare</h5><form action='http://feedburner.google.com/fb/a/mailverify' method='post'target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=hindblogger', 'popupwindow', 'scrollbars=yes,width=550,height=550');return true">
<input  class="placer" type='text'  name='email' placeholder='enter your name' />
<input  class="placer" type='text'  name='email' placeholder='enter your email id' />
<input type="hidden" value="supportmeindia" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input value="Subscribe Now" class="button" type="submit" />
</form>
</div>

 

5. Email Subscription box widgets

<div class="subscribe_outer"> <div class="subscribe_wrapper"> <p>Subscribe our Newsletter and receive Free Updates and Tutorials right in your Inbox.</p> <div id="btntEmailsub"> <form class="btntEmailform" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=hindblogger', 'popupwindow', 'scrollbars=yes,width=300,height=520');return true" method="post" action="http://feedburner.google.com/fb/a/mailverify"> <input type="hidden" value="The-Area51" name="uri" /> <input type="hidden" value="en_US" name="loc" /> <input class="emailText" 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" /> <input class="emailButton" type="submit" value="Signup Now!" title="" /> </form> </div> </div> <style> body { color: #000000; font-family: Georgia,"Times New Roman",Times,serif; } body { color: #000000; font-family: Georgia,"Times New Roman",Times,serif; } .sidebar .subscribe_wrapper h5 { color: #888888; } .sidebar h5 { color: #888888; font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif; font-size: 20px; font-weight: normal; padding: 0px 0 10px; } h5, h6 { letter-spacing: 2px; text-transform: uppercase; } .sidebar .subscribe_wrapper h5 { color: #000000; } .sidebar h5 { color: #000000; font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif; font-size: 20px; font-weight: normal; padding: 4px 0 10px; } h5, h6 { letter-spacing: 2px; text-transform: uppercase; } .subscribe_wrapper { color: #000000; font-size: 20px; line-height: 20px; padding: 38px 50px 18px 38px; } .emailButton { background: -moz-linear-gradient(center top , #ffffff 0%, #249334 100%) repeat scroll 0 0 transparent; border: 1 none; border-radius: 4px 4px 4px 4px; color: #333333; cursor: pointer; font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif; font-weight: bold; padding: 10px 40px; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4); width: 100%; } .emailText { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/btnt-custom-theme/email.png") no-repeat scroll 10px center #FFFFFF; border: 2 none; border-radius: 4px 4px 4px 4px; box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); color: #444444; margin: 0 0 15px; padding: 10px 40px; text-decoration: none; width: 60%; } input, textarea { font-family: Georgia,"Times New Roman",Times,serif; } .subscribe_wrapper { color: #000000; font-size: 16px; line-height: 20px; } .post-body .emailButton { width: 300px; } .emailButton { background: -moz-linear-gradient(center top , #30A146 0%, #249334 100%) repeat scroll 0 0 transparent; border: 0 none; border-radius: 4px 4px 4px 4px; color: #FFFFFF; cursor: pointer; font-family: "Droid Sans","Lucida Grande",Tahoma,sans-serif; font-weight: bold; padding: 10px 40px; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4); width: 100%; } </style>

Blogger pe Email Subscription Box kaise Add kare?

Ap Bina Template ko Edit kiye badi asanise in Widgets ko Ane pblog main Add karsakte h.
Apko Serf ahase Code copy karke Direct apne blog ke Dashboard>>layout>>Add a gadget>>HTML/Java Script Par click karke paste karde Apka Stylish Email Subscription Box Show ho jayega.

Code Copy karneke bad Red Highlighted ko Ap apna Feed url se Badal de

A tha 5 Best Stylish Email Subscription Box Widgets.Umeed hain In sare widgets apko pasand ayi hogi agar pasand aye to jarur Share kare Or Is-Trha ke Widgets ke liye Hamare blog ko Subscribe kare. Agar apke man Koie Sawal ho to ap niche Comment mian bataye.