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://3.bp.blogspot.com/-zLPNKOT3mPw/WH2_U29KH5I/AAAAAAAAAGo/DKYLnpAKtV8NdtjUaFnill_ytfCVzEgNACLcB/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. 

Blogger me Godaddy custom domain setup kaise kare

Hello Bloggers kaise hain ap sab? Jaise Jaise internet ka uses bad rahehe wase wase Internet meain Websites/Blogs vi badte jarahe hain . Aise me agar ap blogging me career bana na chate hain to apko Jo sabse peheli bat , Ek blog Cahiye Or uske bad Apko Chaiye ek Blog Ka name ya fir Ap domain Kehe sakte hain. Ek domain ek blog ka Phechan hota hain. Agar ap Ek achha Blog banana Cahate hain or Avi vi ap Ek Sub domain use karte hain to ap ka Impression audience ke samne Low hojata hain. So guys Aj is Article ki madhyam se janenge ki Kaise ap Blogger me godaddy custom domain Setup karsakte hain.

Blogger me Godaddy custom domain setup kaise kare

What is a Custom Domain?

Jab Ap Blogger me Blog banate hain to Uske sath apko ek aisa (domain.blogspot.com) domain blogspot domain Diya Jata hain jo ki Free main hota hain. Ek Custom domain wo hota hain Jis ko Ap buy karte ho kisi Domain Provider se(Godaddy) Jaise HindBlogger.in ek Custom domain hain.

Full Guide to Setup a Godaddy  Custom domain  to Blogger

First of all  ap Godaddy se ek Domain Buy karligiye ( Jo ki bohat asan hota hain).

Setting up Godaddy Custom Domain

Step 1. Login to your Blogger account

Step 2. Apna Blog select kijiye then Settings uske bad Basics par click kare. 

Step 3.  Ab Publishing Section ke niche “Setup a 3rd party URL for your blog” par click kare.

Step  4. Ab Blog address section me apna Domain enter kare www. Prefix ke sath. Agar apka domain hain hindblogger.in to ap enter kare www.hindblogger .in . Then apko Save me Click kardena hain. Ahapar apke samne ek Error (error:12) ayega or apko apna Domain authority verify keliye bola jayega. Op apko two code diya jayega Jisko apko copy karke Notepad me save karlena hain.

Step 5. Avi ap Browser me new tab me Godaddy ke site me jaye or Loging kare or top me apne user name par click kare then Manage my Domain par click kare.

Step 6. Ahapar apke samne Apke sare Godaddy  Registered custom domains  ajayega . Jisko apne blog me add karna chate hain uspe click kare.

Step 7. Ab Apko DNS Zone File  me Click karke Add Record par click karna hain.

Step 8. Aha pe apko Sabse phele Dropdown mese Cname Select karna hain. Then www host name digiye and apko Step 4 me jo ap www ke bad jo code tha usko point to field me enter karna hain then add another par click kardena hian.

Step 9.  Aha pevi apko cName select karna hain or step 4 me dusre columns me jo first code hain usko Host name ki jagha Paste kard or Jo dusra code hain usko Point to ke jagha paste karke finish karde.

Last Step A bap Blogger ke us Tab me wapas aye (Jis tab ne ham Step 4 complete kiya tha).  Redirect wale check box me tick karke Save wale button par click kare. So easy na 😉

Aur padiye

• How to Customize Blogger Scrollbar
• 9 Killer tips to Improve Google page ranking
• Blog me Sliding related post widgets kaise add kare
• Hinglish/Hindi Blogger me Jaldi Adsense Approve kaise kare

Last word

So friends is tutorial me Itnahi Umeed hain ki Ap Blogspot Domains ko Setup karna Sikh chuke hain . Or agar apke man me koie vi doubt wa fir sawal hain to ap niche comment karke puch sakte hain. Or Jude rahe hamare sath,Happy Blogging 😃.

Top 5 Stylish Fashion Blogger Templates

Jaise jaise Internet ka uses increase ho raha hain, Waise waise hi Internet main blog/websites ka number vi Teji se Increase ho raha hain Or log Bohat sare categories main  Apna site/Blog bana rahe hain. Jisme se Ek Teji se Badte hua Category hain Fashion Blog. Aiseme agar ap  ek newbie  fashion blogger hain to apkeliye us Ek achha Fashion  Template Dhund pana bohat muskil sabit ho sakta hian. Is-Liye Apkeliyte hamne Internet se Top 5  Stylish Fashion blogger Template leke ayah u. To bina time waste kiye chaliye Nagar Dal te hain Templates ke upar.

Top 5 Stylish Fashion Blogger Templates

Note:-
Ham jab Apke liye Blogger Templates leke ate hain usko ham pehele Khud test karte hain or fir Uska code, layouts, Features, Page Loading Speed ko dekhte hain . Or Jo Jo templates Hamare Test Main Pass Hota hain ham serf Wo sare Template apkeliye leke ate hain.

1. ChicMag Fashion Blogger Template

Demo Download

Short Descriptions

Chic Mag Ek Bohat Hi achaa Light Blogger Template hain. Istemplate Ka page Speed kafi Achhi hain baki Fashion Template ki hisab se. Is Template me apko Niche digaye Features milta hain.

Features

• Fully Responsive Design 
• Fully SEO Optimized 
• Mobile Friendly Design 
• New - Mega Menu
• Support Youtube thumbnail
• Advance Search Engine Optimization
• Random posts
• Multiple comment system
• Ads Ready
• Auto Author Image
• Newsletter Subscription
• Custom Error 404 Page
• Professional admin layout, help you easy work with blog layout.

2. Rosemary Blogger Template

Demo Download

Short Descriptions

Rosemy Ek Bohat Achaa Fashion Blogger Template hain Isme apko Featured Slider Milta hain. Aur Bohat Clean Layouts hain Jis-se apko Is Template ko Customize Karneme Asani Hongi.

Features

• Fully Responsive Design
• Advance Search Engine Optimization
• Pin it button on images
• Threaded Comment
• Recent Post By Label
• Ads Ready
• Auto Author Image
• Newsletter Subscription
• Custom Error 404 Page
• Minimalist style
• Compatible with major browsers (IE8+,Mozilla,Chrome,Safari)
• Professional admin layout, help you easy work with blog layout.

3. Modern Sidebar Blogger Template

Demo Download

Short Descriptions

Modern Sidebar White Full Clean Blogger Template hain Isme Apko Post Slider,About us,Social Buttons ki Tarha Unique Widgets Milta hain.

Features

• Responsive Design
• SEO Ready
• 2 Slider Styles Layout/ Homepage (With & WIthout Sidebar) Styles
• Featured Slider Styles
• Fully Customizable( Font Style, Color Options & Homepage Style)
• Youtube, Vine, Facebook, Instagram Embed Option
• New Advanced MegaMenu with Dropdown Animation
• Fixed Navigation Menu
• Smooth Scrolling
• Pinterest Widget
• New Instagram Slider for footer and sidebar

4. CockTail Blogger Template

Demo Download

Short descriptions

Sora Template Ka Banya hua Is Template me Apko Responsive design Dekhne ko Milta hain Or iske sath sath a Template Bohat Hi Fast Loading Hain. Sora Templates Basically Bohat User Friendly templates Create karta hain. Aur is Template mevi apko Wo User Friendly Inter fess Dekhneko milega.

Features

• Responsivee   
• SEO Friendly
• Google Testing Tool Validator   
• Mobile Friendly  
• Custom 404 Page  
• Fast Loading    
• Beauty Template   
• Social Buttons   
• Slider   
• 3 Columns Footer   
• Ads Ready   
• Drop Down Menu   
• Clean Layout   
• Simple Design   
• Browser Compatibility   

5. Rose Blog Blogger Template

Demo Download

Short Descriptions

Sabse Last me ata Hain Hamare Rose Blog Fashion blogger Template. Isko Banaya hian Sora Template Ne. Is-Template ka Design Bohat Minimal hain Aur Bohat Simple Design hain Joki bohat Achhi bat hain.

Features

• Responsive  
• SEO Friendly  
• Google Testing Tool Validator  
• Mobile Friendly  
• Custom 404 Page  
• Fast Loading 
• Minimal
• Fashion
• Rosy
• Ads Ready
• Clean Layout
• Simple Design
• Drop Down Menu
• Social Sharing
• HTML5 & CSS3
• Browser Compatibility

Read More

• Top 5 Best Magazine Style Blogger Templates
• 5 Best SEO Friendly Blogger Templates
• Top 10 Best Blogger Templates of 2016

Last Word

So friends A tha Top 5 stylish Blogger Templates. Umeed hain ki is Article se apko Help mili hongi.

Agar Ap Ko Sach me Help Mila to Ap Is Article ko Apne Dosto Ke sath Share Karsakte hain. Aur Agar Apke Man Koie Sawal hain To Ap Jarur Comment Karke Hamse puch sakte hain. Thank You ;) Wish You Happy blogging 😃

9 Killer tips to Improve Google page ranking

Agar ap Apne blog me organic traffic Leana chate hain to Aise me apko apke site ka SEO thik tarha se karna padta hain or SEO ranking ka ek bohat important part hain Google rank increase karna. Isse Kya hota hain , Apke post par Search engine se Jyada traffic ane lagta hain. Or Apke Blog stable ho jata hain. To aiseme apke liye a ek bada Challenge ajata hain ki ap Apne blog ka Google page rank kaise improve kare?. To ap is article me bataye hue 9 tips ko follow kare or apne Site ka page rank/google rank  Increase kare. (Rec: Blogger Par Advanced SEO kaise enable kare)

Google Page rank kya hain? 

Page rank basically google ka Algorithm hain jo apke site ke  ek Individual page me kitna quality Dofollow , Nofollow link hain or  apka content  search quires se kitna close/Match hain wo dekhte hain  aur Us Hisab se 0-10 ke andar ek ranking deta hain. 

(Recommended : SEO kya hain? SEO ke bareme Sabkuch jane)

9 Killer Tips to Improve Google page ranking:

1. Post Relevant content 

Page rank improve karneka a sabse Asan but Effective tip  hain. To hamesha Ahi kousius kare ki apke sare post apke blog ka niche wise ho. (Rec:Blogger Blog keliye Sitemap kaise Create kare)

2. Submit site to Web Directories

Page rank Increase karneka ek aur Effective tips hain ki ap apne blog ko High PR waleweb directories me submit kare  Is-se apke Site ko Quality Back link milega jis-se apke Page Rank Improve hoga. Niche Main Kuch High PR wale web directories ka list de raha hu.

• DMOZ
• Best of the Web (BOTW)
• Ezine Articles
• ArticlesBase

3. Post Regularly

Apko Apne Page Rank Improve karne keliye must apko regular post karna padega. Is-se Search engine ke crawler Apke Post ko jaldi Crawl karega. Kousis kare ki din me agar possible ho to 1 post jarur kare warna Weekly kare. Is-se apke site ka overall rank increase hoga.

4. Improve Writing Quality

Agar apke blog posts well Writhed, Unique, informative  honge to Usko Visitors jayda Like karenge or Usko Share karenge Jise Apke Blog ka backlinking me bohat help hosakta hain.

5. Submit article to high PR article Submitting site

Article submitting se Apke Hare k post ka Alag se Individually Link banjate hain. Or a Karnese apke blog me jayad Traffic ayega.  Maine Niche kuch High PR Website mention kiya jahape ap article submit karsakte hain.

• Hub Pages
• Newsvine
• Zimbio
• Letsbefamous
• Isnare

6. Link exchange

Link Exchange Ek bohat hi purana technique  hain but Avi vi A bohat Effective Tadika mana jata hain. Apko bas Apke Blog se relevant blog find karna hain or Uske Admin se bat (Appeal) kareke link exchange kare.Agar ap koi high rank wale website ke sath link exchange karte hain to Automatically apke  Content rank hone lagega.

7. Social Bookmarking

Aj ke dino me social media par billions of log online rehete hain Is-se ap ko Apne Blog Traffic or Page rank increase karneme Badi Madat milega.

• Pinterest 
• Facebook
• Twitter
• Google Plus
• Reddit 
• Stumble Upon 
• Digg 
• Delicious 

8. Make video for post

Mene Bohat se Popular blogger se suna hain Ki post ke andar video honese us post ko Complete mana jata hain aur us post ko Search engine vi Like karta hain. Or Is-se Blog post Search engine main Rank Karta hain. 

9. Update Existing posts

Always update existing posts,  Is-se apke Blog  Search Result me Rank barkarar rahega.

Main apko aur Details me Samjhata hu. (Rec: Blog me Sliding Related post widgets kaise add kare)

Manlijiye apke Kisi post Search engine par first result par hain. Bat 2-3 month  bad aisa hota hain Apka wo post search result me first nehi reheta, dhire dhire Wo post down hojata hain. Kuki Us topic par Dusre log Post likh te hain is-se search engine ko lagta hain ki apka post kafi Purani ho chuki hain to apke post ka Rank Decrease hota hain. Aiseme ap agar apke Post ko regular update karte hai to Searchengine ko lagega ki a to updated post hain Or Is-se apke Page rank Barkarar reheta hain. 

Summery 

Is post par maine Apse kuch  9 tips Share kiya jis-se ap apni blog ki page rank ko improve karsakte hain. Basically Page Rank Apke Blog ke Backlink par sabse jyada Depend karte hain Uske bad apke Blog content, Inter Linking, Meta Tags Wagera Dekha jata hain. Bas ap Regularly post kare Or uapar Mention ki gaye 9 tips ko follow kare. Or Result apke samne ajayega.

Last Word 

So Friends ye tha 9 Tips jisse ap Blog  Page rank ko increase karsakte hain. Umeed hain ki is Article se apko kafi help mili hongi. Agar apko a post helpful laga to ap Is post ko jarur apne friends ke sath share kare taki wo log vi jansake Is-ke bare main. Aur agar apke man me koie Sawal hain to ap Niche comment me mujh se Puch sakte hain. Thank you 😃

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.