Showing posts with label Designing. Show all posts
Showing posts with label Designing. Show all posts

Blogger Post Me Stylish HTML CSS Coding Box Add Kare For Good Looking

Blog website me coding box Kaise add Kare.
Hello dear blogger Blog Post Me Without code box ke ap "HTML CSS JavaScript" code past karte hain to kitna bora lagta hai total post ki looking change kar deta hai,

Use se better ye nahi ke hum "blogger post me stylish coding box add" kar ke apne visters ko aur zyada extracted kar sakte hain, use vister ko code copy karna bhi aasan hota hai.








Bloggr post main coding box kyu add kare? Iske kya benefit hain?

Blog website me HTML CSS HTML JavaScript coding box add karne ke benefit main ap ko btati hun ap khud hi samajh Jao ge,
  1. Agar aap ke blog par 100% useful contents hain to aap ko zroor coding box add karna chaye uski waja bhi sune.
  2. Aap ke usfull contents copy hone lag jate hain mean koi aur blogger copy kar ke apne blog par past karta hai ap ko maloom ho jata hai to ap contents copies hona site se disabled kar dete hain.
  3.  to aap ki kisi widget post me kisi vister ko code copy karna ho to vister widget code copy kaise karega ?
  4. Jab code copy nahi hoga to aapka vister gya :)
  5. Wo kisi aur website se apna kaam chala le ga isi waja se coding box blogger post me add karna zaroori hota hai, vister ko coding box se HTML CSS widget copy karna aasan hota hai, so plz aap bhi agar success hona chahte hain to mere Sab steps ko follow kare aur din ba din oper badhte jaye, 


To aao dekhte hain hum blogger ki post main "stylish HTML CSS coding bo kaise add kare" ?


Blogger post me stylish HTML, CSS JavaScript, Coding box Kaise Add Kare



Stylish post coding box demo #1



Code ( 1 )
//* Bloggerdsense post code *// .code { overflow:auto;width:503px;height:200px; font-family: "Consolas", "Courier New", Courier, mono, serif; color:#848176; margin : 15px 35px 15px 15px; padding : 10px 10px 10px 35px; clear : both; list-style-type : none; background : #000000 ; border : 1px solid #000000; border-left:20px solid #ccc; -webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border--moz-border-radius: 23px 20px 20px 20px;border-radius: 23px 20px 20px } .code:hover{ color:#FEF9BF; border : 1px solid #000; border-left:20px solid #ccc; -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3); -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, .3); box-shadow: 0px 0px 10px rgba(0, 0, 0, .3); box-shadow: 10px 10px 5px #888888; }



Stylish post coding box demo #2


Coding-box-for-blogger-post


Code ( 2 )


//* stylish coding box by bloggerdsense *// .code { background:#f5f8fa; background-repeat:no-repeat; border: solid #5C7B90; border-width: 1px 1px 1px 20px; color: #000000; font: 13px 'Courier New', Courier, monospace; line-height: 16px; margin: 10px 0 10px 10px; max-height: 200px; min-height: 16px; overflow: auto; padding: 28px 10px 10px; width: 90%; } .code:hover { background-repeat:no-repeat; } #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;} .blog-pager {background: none;} .displaypageNum a,.showpage a,.pagecurrent{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#404042;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);} .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#EC8D04;text-decoration:none;color: #fff;} #blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color: #000;} .showpageOf{display:none!important} #blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);} body { background-color: #FFFFFF }

Step #1
In main se Jo demo pic aap ko pasand ati hai uski coding copy Karen aur

]]></b:skin>
Ke oper past kar de.

Blogger post me stylish code bo kaise add kare

Step #2 
Ab ap ne jis post me HTML CSS code past karna hai WO post select kare aur compose to HTML select kare ab jahan ap ne code show karna hai waha likhe

<div class"code">
Apna code yaha beach me past kare
</div>


Add coding box in blogger


Ab back compose pe select kare aur preview kar dekh sakte hain code box show ho raha hai scrolling post publish karne ke bad karega. Same aise hi aap blogger ki har post coding box add kar sakte hain.




Agar ap ko lagta hai ye post bhut helpfully hai to plz social media par other friends ke sath zroor share kare aur apna feed back dena na bhole kyun ke next articles mein dil laga kam kron gi.














Facebook like box widget blogger blog par kaise lagaye



Facebook like box widget for blogger facebook all world se no 1 social site hai Facebook par daily milion peoples login hote hain Facebook page like likes bhi badge gain Facebook like box widget se. website par traffic badhne ke lite Facebook bhut VIP zarya hai. Agar aap bhi Facebook use karte hain to Facebook par blog website ki promotion kar ke "blog ki traffic banaye"




How-to"add-facebook-like-box





Ham sab jante hai ki social media site Facebook ek aisi website hai jo bahut kam samay me popular ho gayi hai, Is par per day karodo user online rahte hai. Isiliye ham sab Bloggers ke liye bahut hi achha platform hai jis par ham free me apne blog ya website ka promotion kar sakte hai, jisse hame website ke liye achha traffic bhi milta hai. Facebook par apne blog ke liye ek page banate hai jisse hamare blog ki popularity badhti hai jo ki bilkul free banaya jata hai.



Facebook like box gadget blog website par kyu lagaye

Blog website par Facebook like box add karne se aap ko bhut benefit mile ge. Apne blog me facebook like box lagana bahut jaruri hai kyonki isse aapke facebook fan page ke likes and site ke subscriber increase hote hai, Ab aap soch rahe honge ki isse subscriber ka kya sambandh hai.

to me aapko batana chahunagi ki jab koi aapke Fb page ko like karta hai to vo aapke page ka subscriber ban jata hai matlab jab aap apne blog par koi new post publish karte hai aur use apne Facebook page par promotion share karte hai to vo post un subscriber tak automatically pahunch jati hai aur vo use padhne ke liye click karte hai to aapke blog par aa jate hai jisse aapke blog ka traffic increase hota hai.





Bloggerdsense demo fb fan page

Blog par Facebook like box kaise lagaye? Fb like box widget for blogger

Blog par Facebook like box add karne ke liye blog select kare jis par lagana hai blogger dashboard par aye.





  • How to add stylish coding box widget in blogger below every article.



    1. Blog layout par click kare,
    2. Side bar me add a gadget par press kare,
    3. New window me HTML jave script par press kare,
    4. Title : yahan fb fan page ka title enter kar,
    5. Niche se code copy kar ke khali space par past kar de,
    6. Save par click kar de.
    add-facebook-like-box-widget-in-blogger

    Friends ap ka Facebook like box add ho chuka hai enjoy plz don't forged to like my fb fan Page


    Responsive Social Share Buttons Blogger: Add Below Every Posts in hindi/Urdu



    Social Shared Button widget for blogger: Aad below every post, blog ki har Post ke niche Responsive Social Share Button widget kaise add kare ya lagaye. Social share Button blogger website me aad karne ka bhut fayda hair, is par click kar ke peoples aap ki posts articles ko share kar ke apne other friends tak ponchate hain, ye shares Button widget for blogger website me lagane se aap ke blog par social sites se unlimited traffic aye Gi aap ke blog me page view ka azafa hoga hoga. Email subscription box widget se bhi bhut ziyada traffic drive hoti agar aap he abhi tak email subscribe box widget blogger blog me add nahi kiya to ye article read kar ke blog websites me stylish email subscribe box widget lagaye, Blogger blog me stylish email subscribe box widget kaise lagaye har post ke niche.  Kiya aap ne bhi responsive fast loading custom social sites share Button widget add Karne hain har post ke niche to aap is article ko end tak read Kare .


    Responsive-social-share-button-widget-for-bloggeru



    Fast Loading Responsible Social share buttons Blogger Blog Ki har Post ke niche kaise lagaye. ?

    1. Responsive social share buttons widget blogger blog me Add karne ke liye Sab se pehle apne blog ke dashboard par jaye.
    2. Template  Par press kare .
    3. Edit HTML par click kare.
    4. Ab Template editor box me kahin bhi click kare , phir keyboard ki help se CTRL F press kare right side me in search box open hoga.
    5. Is search box me <head/> tag enter Kare ke keyboard se Enter button dabaye head tag aapke samne ajaye ga.
    6. Ye niche se code copy kare aur <head/> tag ke oper past kar de.


    <link href='http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.css' rel='stylesheet'/> <script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>

    Add-social-share-button-widget-in-blogger


    Adding The CSS Code Of Social share buttons.

    Ab same step 1 wala process Kare search box me  “<b:skin>” likh Kare search Kare so agar <b:skin> tag na mile to aap  “]]></b:skin>” tag ko search Karle. Niche se code copy Kare and ]]></b:skin>” ke oper past Karde.

    CSS Code.
    /* CSS Share Button ----------------------------------------------- */ .tlp_post_sharebar {background:none;position:relative;z-index:2;width:100%;display:inline-block;margin:5px 0px;padding:10px 0;font-family:sans-serif;border-bottom:1px dotted rgba(0, 0, 0, 0.05);border-top:1px dotted rgba(0, 0, 0, 0.05);} .tlp_post_sharebar .tlp_Share_buttons {display:block;} .tlp_post_sharebar .tlp_Share_buttons .wrap {display:inline-block;textualism textual ITN 9:center;min-width:41px;margin:0 auto;} .tlp_Post_sharebar .tlp_Share_buttons .wrap1 {float:left;display:inline-block;width:31px;} .tlp_post_sharebar .tlp_Share_buttons ul {margin:0;padding:0;} .tlp_post_sharebar .tlp_Share_buttons ul li a, .tlp_post_sharebar .tlp_Share_buttons ul li a:hover {display:block;text-decoration:none;color:#FFF !important;cursor:pointer;height:100%;line-height:25px;} .tlp_post_sharebar .tlp_Share_buttons ul li {float:left;list-style:none;list-style-type:none;margin:1px;padding:0;width:16%;max-width:115px;display:inline-block;overflow:hidden;font-size:13px;line-height:25px;text-align:left;height:25px;color:#fff;border: 1px solid rgba(0,0,0,0.04);-webkit-transition: all 0.4s ease-in-out;-moz-transition: all 0.4s ease-in-out;-ms-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;} .tlp_post_sharebar .tlp_Share_buttons ul li .fa {font-family:FontAwesome;font-weight:normal;background-color:rgba(0,0,0,0.1);color:#fff;font-size:17px;display:inline-block;text-align:center;padding:0;width:30px;height:25px;line-height:inherit;border-right:1px solid rgba(0,0,0,0.05);} .tlp_post_sharebar .tlp_Share_buttons .button_fb {background:#3a579a;} .tlp_post_sharebar .tlp_Share_buttons .button_fb:hover {background:#314a83;} .tlp_post_sharebar .tlp_Share_buttons .button_twtr {background:#00abf0;} .tlp_post_sharebar .tlp_Share_buttons .button_twtr:hover {background:#0092cc;} .tlp_post_sharebar .tlp_Share_buttons .button_gplus {background:#df4a32;} .tlp_post_sharebar .tlp_Share_buttons .button_gplus:hover {background:#be3f2b;} .tlp_post_sharebar .tlp_Share_buttons .button_pntrst {background:#cd1c1f;} .tlp_post_sharebar .tlp_Share_buttons .button_pntrst:hover {background:#ae181a;} .tlp_post_sharebar .tlp_Share_buttons .button_linkdin {background:#2554BF;} .tlp_post_sharebar .tlp_Share_buttons .button_linkdin:hover {background:#224EB4;} .tlp_post_sharebar .tlp_Share_buttons .share.h6 {font-size:14px;font-weight:bold;text-shadow:none!important;text-decoration:none;text-align:center;color:#333;margin-top:3px;} .tlp_post_sharebar .tlp_Share_buttons .share {border:none;margin:0px 5px 0px 1px;overflow:visible !important;width:95px !important;} .tlp_post_sharebar .tlp_Share_buttons .button_fb .share-buttons,.tlp_post_sharebar .tlp_Share_buttons .button_twtr .share-buttons,.tlp_post_sharebar .tlp_Share_buttons .button_gplus .share-buttons,.tlp_post_sharebar .tlp_Share_buttons .button_pntrst .share-buttons,.tlp_post_sharebar .tlp_Share_buttons .button_linkdin .share-buttons {position:relative;color:#C3C3C3;display:inline-block;text-align:center;font-weight:bold;font-size:11px;float:right;min-width:12px;font-family:sans-serif;padding:0px 5px;background-color:rgba(0,0,0,0.28);border-radius:0px 0px 0px 15px;} @media only screen and (min-width:260px) and (max-width:989px){ .button_pntrst,.button_linkdin{display:none !important}}

    Social-share-button-widget

    So, You have successfully added the CSS for your new social share button for blogger which will be shown after all of your blogger posts. Now let’s add the HTML code.

     Adding The HTML Of Social Share Button.

    Ab Ctrl f press Kar ke search box me ye code searching Kare<div class=’post-footer’>”. Agar ye na mile to ap ye search karle  <div class=’post-footer-line post-footer-line-1′> ye niche wala HTML code copy Kare aur us code ke oper past Kare de.


    Social-sharing-button-widget-for-blogger



    HTML Code.
    <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='tlp_post_sharebar'> <div class='tlp_Share_buttons'> <ul> <li class='share'> <div class='share-buttons' data-service='total'> <div class='share h6'> SHARE : </div> </div> </li> <li class='button_fb'> <a expr:href='&quot; http://www.facebook.com/share.php?v=4&amp; src=bm&amp; u=&quot; + data:post.url + &quot; &amp; t=&quot; + data:post.title' onclick='window.open(this.href,&quot; sharer&quot; ,&quot; toolbar=0,status=0,width=626,height=436&quot; ); return false;' rel='nofollow'> <div class='wrap1'> <i class='fa fa-facebook'/> </div> <div class='wrap'> Share </div> <div class='share-buttons' data-service='facebook'> </div> </a> </li> <li class='button_twtr'> <a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;text=&quot; + data:post.title + &quot; via @Blog_Ornate - &quot;' onclick='window.open(this.href,&quot; sharer&quot; ,&quot; toolbar=0,status=0,width=626,height=436&quot; ); return false;' rel='nofollow'> <div class='wrap1'> <i class='fa fa-twitter'/> </div> <div class='wrap'> Tweet </div> <div class='share-buttons' data-service='twitter'> </div> </a> </li> <li class='button_gplus'> <a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' onclick='javascript:window.open(this.href,&quot; &quot; ,&quot; menubar=no,toolbar=no,resizbutton_le=yes,scrollbars=yes,height=600,width=600&quot; ); return false; ' rel='nofollow'> <div class='wrap1'> <i class='fa fa-google-plus'/> </div> <div class='wrap'> Share </div> <div class='share-buttons' data-service='google'> </div> </a> </li> <li class='button_pntrst'> <a data-pin-config='beside' expr:href='&quot; http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot; &amp;media=&quot; + data:blog.postImageUrl + &quot;&amp;description=&quot; + data:post.title' onclick='window.open(this.href,&quot; sharer&quot; ,&quot; toolbar=0,status=0,width=626,height=500&quot; ); return false;' rel='nofollow'> <div class='wrap1'> <i class='fa fa-pinterest'/> </div> <div class='wrap'> Pin It </div> <div class='share-buttons' data-service='pinterest'> </div> </a> </li> <li class='button_linkdin'> <a expr:href='&quot; http://www.linkedin.com/shareArticle?mini=true&amp; url=&quot; + data:post.url + &quot; &amp; title=&quot; + data:post.title + &quot; &amp; summary=&amp; source=&quot; ' onclick='window.open(this.href,&quot; sharer&quot; ,&quot; toolbar=0,status=0,width=626,height=500&quot; ); return false;' rel='nofollow'> <div class='wrap1'> <i class='fa fa-linkedin'/> </div> <div class='wrap'> Share </div> <div class='share-buttons' data-service='linkedin'> </div> </a> </li> </ul> </div> </div> </b:if>
    If you have followed my instruction correctly then these social share buttons should works perfectly for your blogger blog. If you are having any problem to add these share buttons on your blog then please let me know by leaving a comment.
    As I have told you before that social media is very important to your blogging success so I will highly recommend to add social sharing buttons to your blog and let your readers share your content. If you like this article then please share it.
    Don't Miss :






    Facebook (Popup Like Box Blogger) Blog Me kaise add kare








    Facebook popup like box widget for blogger blog me Facebook popup like box kaise add kare Facebook k Useful awesome pop-up like box k bare main mei aj ap ko btaun gi k hum fb popup like box gadget blogger blog website par kaise "lagaye" Any person ko information hai ke Facebook popular social networking site hai, Jis par visitor unlimited time spend karte hai. Newbie blogger apna new blog website banate hai to unke liye apne blog par traffic increase karna bahut important hota hai. Facebook ek aisa tarika hai jisse asani se kisi bhi blog par traffic badhaya ja sakta hai.



    Responsive-facebook-popup-like-box-for-blogger



    Live demo

    Apne baht sari website blog dekhe honge jab article reading ke liye blog ko open karte hai to us me some seconds ke bad ek (facebook popup like box open hota hai). Ye bahut hi achha tarika hota hai Facebook fan likes increase and friends se facebook par contact karne ka.



    Facebook popup like box blogger blog me add karne ke kiya benefit hain?


    Blog website par Facebook like box add karne se hame unlimited benefit mile ge. Apnea blog me Facebook like box Laguna baht jarory hain kyon ki isse aapke facebook fan page ke likes and site ke subscriber increase hote hai, Ab aap soch rahe honge ki isse subscriber ka kya sambandh hai.

    to me aapko batana chahunagi ki jab koi aapke Fb page ko like karta hai to vo aapke page ka subscriber ban jata hai matlab jab aap apne blog par koi new post publish karte hai aur use apne Facebook page par promotion share karte hai to vo post un subscriber tak automatically paunch jati hai or use Read karne ke liye click karte hai to aapke blog par a jate hai Jesse aapke blog ka traffic increase hota hai.








    Facebook Popup Like Box Blogger me kaise lagaye


    1. Go to blogger dashboard "Layout" par press kare,
    2. Side bar me Add a gadget par click kare,
    3. Widgets me se HTML java script par click kare,
    4. Popup window me title name de example, my fans page , connect with Facebook etc 
    5. Yaha niche "popup like box ki coding copy kar ke " past" kar de

    Ap k blog me Facebook popup like box blog main add ho chuka hai enjoy now  kaisi lagi ap ko ye post comments me zeror bataye ga aur social site par share kare.

    Also read:
    Sticky Facebook like box widget for blogger

    Stylish coding box woget for blogger

    stylish email subscribe widget for blogger.

    CSS HTML coding box for blogger post











    5 Beautiful Email Widget Blogger Blog Me Subscribe Box Kaise Lagaye



    Email-subscribe-box-widgets-for-blogger


    5 Stylish Email Subscribe box widget for Blogger: blog me feedburner email subscription box Kaise lagaye Kaise Add kare blog me subscribe box Kaise Lagaye, blogger me beautiful email subscribe box widget kaise use kare "feedburner" ki help se unlimited Email subscribers se traffic drive ki ja Sakti hai, 5 Beautiful Stylish email. Subscribe box widget add kar ke subscribers se traffic drive kare. Blog me subscribe widget add karne ka simple tarika mai aapko meri pichli post Blog Me Email Subscribe Widget Kaise Add Kare me bta chukhi hu. aaj is post me aapko kuch stylies subscribe widget ki coding bta rahi hu. aapko jo pasand aaye wo widget add kar sakte ho.





    Blog me subscribe widget kyu jaruri hai. iske bare me to aap jan hi gaye honge. agar aapko nahi pata to upar di gayi post pad le. ab mai post ko lamba na karte huye direct subscribe widgets ke code bta rahi hu.



    Top 5 Beautiful Custom Email Subscription Box Widget for blogger.

    Ye 5 Subscribe code mai bta rahi hu. ye sab fast loading hai. jisse aapke blog ke loading speed time par koi fark nahi padega. ya fir aap ek bar sabko try karke dekh sakte ho. aapko jo acha lage wohi subscribe widget apne blog me add kare.

    Niche diye gaye sabhi code aap direct blog ke layout par ja kar widget me HTML jave script add kar sakte ho.


    1. Very Fast Loading Subscribe Widget

    mujhe ye subscribe widget sabse acha lagta hai. kyuki ye meri blog ki theme (template) se related hai or customized stylish beautiful fast loading widget hai.


    Stylish-email-subscription-box-widget-blogger

    <style type="text/css">
    .hbzsub {
        background-color: rgb(87, 98, 105);
        width: 100%;
        height: 100%;
        padding: 5px;
        box-shadow: 0px 0px 5px rgb(87, 98, 105);
    }
    
    .hbzform-inner {
        text-align: center;
        color: rgb(255, 255, 255);
        font: bold 16px "trebuchet MS","Tahoma";
    }
    
    .hbzemailform {
        width: 240px;
        margin: 10px auto;
    }
    
    #hbzemailbox {
        background-color: #798187;
        color: #FFF;
        width: 208px;
        border: 1px solid #697780;
        padding: 15px;
        text-align: center;
        height: 18px;
        box-sizing: content-box;
    }
    
    #hbzemailbutton {
        background-color: rgb(243, 93, 92);
        border: 1px solid rgb(215, 84, 83);
        color: rgb(255, 255, 255);
        width: 240px;
        font: bold 16px "trebuchet MS","Tahoma";
        padding: 15px;
        text-align: center;
        height: 50px;
        margin: 10px auto;
        cursor: pointer;
    }
    
    #hbzemailbutton:hover {
        background-color: #E64C4B;
        border: 1px solid #BF4A49;
    }
    
    .hbzsignup-form {
        margin-top: 15px;
    }
    
    .hbzsocial-icons {
        overflow: hidden;
        text-align: center;
        border-bottom: 1px solid rgb(133, 133, 133);
        width: 230px;
        display: block;
        margin: 20px auto;
    }
    
    .hbzsocial-icons ul {
        margin: 0px auto !important;
        text-align: center;
        padding: 0px !important;
        display: inline-block;
    }
    
    .hbzsocial-icons ul li {
        background: transparent none repeat scroll 0% 0% !important;
        border: medium none !important;
        float: left;
        list-style-type: none !important;
        padding: 0px !important;
        margin: 0px 2px !important;
    }
    
    .hbzsocial-icons ul li::before,
    .hbzsocial-icons ul li::after {
        display: none !important;
    }
    
    .hbzsocial-icons ul li a, .hbzsocial-icons ul li a:hover {
        background: url("http://3.bp.blogspot.com/-qXV1qRPIjHY/UbqjmHPAHzI/AAAAAAAACUE/7_sAZf8tHLY/s1600/sprite_32x32.png") no-repeat scroll 0 0;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        display: block;
        height: 34px;
        overflow: hidden;
        text-indent: -999px;
        transition: all 0.25s linear 0s;
        width: 34px;
    }
    
    .hbzsocial-icons ul li.social-facebook a {
        background-position: -62px 1px;
    }
    
    .hbzsocial-icons ul li.social-facebook a:hover {
        background-color: #3b5998; 
    }
    
    .hbzsocial-icons ul li.social-twitter a {
        background-position: -254px 1px;
    }
    
    .hbzsocial-icons ul li.social-twitter a:hover {
        background-color: #00aced; 
    }
    
    .hbzsocial-icons ul li.social-gplus a {
        background-position: -95px 0px;
    }
    
    .hbzsocial-icons ul li.social-gplus a:hover {
        background-color: #dd4b39; 
    }
    
    .hbzsocial-icons ul li.social-pinterest a {
        background-position: -159px 1px;
    }
    
    .hbzsocial-icons ul li.social-pinterest a:hover {
        background-color: #cb2027; 
    }
    
    .hbzsocial-icons ul li.social-rss a {
        background-position: -190px 0px;
    }
    
    .hbzsocial-icons ul li.social-rss a:hover {
        background-color: #F87E12; 
    }
    
    </style>
    
    <div class="hbzsub">
    
    <div class="hbzsocial-icons">
      <ul>
       <li class="social-facebook"><a href="https://m.facebook.com/bloggerdsense" target="_blank" title="Facebook">Facebook</a></li>
       <li class="social-twitter"><a href="https://www.twitter.com/bloggerdsense" target="_blank" title="Twitter">Twitter</a></li>
       <li class="social-gplus"><a href="https//www.BloggerAdSense.com" target="_blank" title="Google+">Google+</a></li>
       <li class="social-pinterest"><a href="https://www.Pinterest.com/BloggerAdSense" target="_blank" title="Pinterest">Pinterest</a></li>
       <li class="social-rss"><a href="http://feeds.feedburner.com/bloggeradsense/zEvv" target="_blank" title="RSS">RSS</a></li>
      </ul>
     </div>
    
     <div class='hbzsignup-form'>
      <div class='hbzform-inner'>
       <h4>bloggeradsense</h4>
      </div>
      <div class='hbzemailform'>
       <form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=http://feeds.feedburner.com/bloggeradsense/zEvv&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
        <input name='uri' type='hidden' value='www.BloggerAdSense.com'/>
        <input name='loc' type='hidden' value='en_US'/>
        <input id='hbzemailbox' name='email' required='' type='text' placeholder='Your Email'/>
        <input id='hbzemailbutton' title='' type='submit' value='Subscribe'/>
       </form>
      </div>
     </div>
    </div>
    Customization:

    code #1 .

    1.    Social Facebook : ix red url ki jaga apne Facebook page ka link enter Kare .
    2. Tarah Jo Jo red colour ke URLs in ki jaga apne "social Sites" ke URL enter Kare.


    2Subscription-box-widget-for-blogger



    Code no #2 .


    <style type="text/css">
    .hbzsignup-form {
        background: transparent url("https://1.bp.blogspot.com/-Y_e_B9KzB-c/Vr6fNXna_BI/AAAAAAAAALo/dk3TFDW2-4I/s1600/Email-bg.jpg") no-repeat scroll center center / 250px 150px;
        height: 150px;
        width: 250px;
        margin: 10px auto 60px auto;
    }
    
    .hbzform-inner p {
        text-align: center;
        color: #fff;
        padding: 10px;
        font: bold 18px "trebuchet MS","Tahoma";
    }
    
    .hbzemailform {
        margin: 120px auto 5px;
        width: 215px;
    }
    
    #hbzemailbox {
        background: #FEFEFE none repeat scroll 0% 0%;
        border: medium none;
        font: 12px/12px "HelveticaNeue",Helvetica,Arial,sans-serif;
        margin-right: 5px;
        box-shadow: 0px 0px 4px rgb(207, 207, 207) inset, 1px 1px 1px rgb(186, 186, 186);
        padding: 7px;
        box-sizing: content-box;
        height: 12px;
        vertical-align: top;
        display: inline-block;
    }
    #hbzemailbutton {
        background: transparent linear-gradient(to bottom, rgb(202, 48, 40) 0%, rgb(235, 88, 78) 100%) repeat scroll 0% 0%;
        box-shadow: 0px 0px 2px rgb(182, 37, 32) inset;
        border: medium none;
        color: #FFF;
        cursor: pointer;
        font: 13px/13px "HelveticaNeue",Helvetica,Arial,sans-serif;
        padding: 6px;
        border-radius: 5px;
        height: 27px;
        display: inline-block;
    }
    
    #hbzemailbutton:hover {
        background: transparent linear-gradient(to bottom, #CA3028 0%, #B72420 100%) repeat scroll 0% 0%;
    }
    
    .hbzsocial-icons {
        margin: 20px 0 0;
        overflow: hidden;
        display: block;
        text-align: center;
    }
    
    .hbzsocial-icons ul {
        display: inline-block;
        margin: 0 auto !important;
        text-align: center;
        padding: 0px
    }
    
    .hbzsocial-icons ul li {
        background: transparent !important;
        border: none !important;
        float: left;
        list-style-type: none !important;
        margin: 0 4px 10px !important;
        padding: 0 !important;
    }
    
    .hbzsocial-icons ul li::before,
    .hbzsocial-icons ul li::after {
        display: none !important;
    }
    
    .hbzsocial-icons ul li a, .hbzsocial-icons ul li a:hover {
        background: url("http://3.bp.blogspot.com/-qXV1qRPIjHY/UbqjmHPAHzI/AAAAAAAACUE/7_sAZf8tHLY/s1600/sprite_32x32.png") no-repeat scroll 0 0;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        display: block;
        height: 38px;
        overflow: hidden;
        text-indent: -999px;
        transition: all 0.25s linear 0s; width: 38px;
    }
    
    .hbzsocial-icons ul li.social-facebook a {
        background-color: #3b5998;
        background-position: -60px 3px;
    }
    
    .hbzsocial-icons ul li.social-twitter a {
        background-color: #00aced;
        background-position: -253px 3px;
    }
    
    .hbzsocial-icons ul li.social-gplus a {
        background-color: #dd4b39;
        background-position: -93px 3px;
    }
    
    .hbzsocial-icons ul li.social-pinterest a {
        background-color: #cb2027;
        background-position: -157px 3px;
    }
    
    .hbzsocial-icons ul li.social-rss a {
        background-color: #F87E12;
        background-position: -189px 3px;
    }
    .hbzsocial-icons ul li a:hover {
        background-color: #333; 
    }
    
    .hbzsocial-like {
        display: block;
        text-align: center;
    }
    
    .hbzsocial-like tbody, .hbzsocial-like tbody tr {
        display: block;
    }
    
    .hbzfb-likes {
        display: inline-block;
        padding-bottom: 15px;
        margin-right: 5px;
    }
    
    .hbztw-follow {
        display: inline
    }
    
    </style>
    
    <div>
     <div class='hbzsignup-form'>
      <div class='hbzform-inner'>
       <p>Sign Up for Email Updates</p>
      </div>
      <div class='hbzemailform'>
       <form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=[Your Blog uri]&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
        <input name='uri' type='hidden' value='[Your Blog uri]'/>
        <input name='loc' type='hidden' value='en_US'/>
        <input id='hbzemailbox' name='email' required='' type='text' placeholder='Enter your email...'/>
        <input id='hbzemailbutton' title='' type='submit' value='Sign up'/>
       </form>
      </div>
     </div>
    
     <div class="hbzsocial-icons">
      <ul>
       <li class="social-facebook"><a href="[Fb url]" target="_blank" title="Facebook">Facebook</a></li>
       <li class="social-twitter"><a href="[Twitter url]" target="_blank" title="Twitter">Twitter</a></li>
       <li class="social-gplus"><a href="[Google+ url]" target="_blank" title="Google+">Google+</a></li>
       <li class="social-pinterest"><a href="[Pinterest url]" target="_blank" title="Pinterest">Pinterest</a></li>
       <li class="social-rss"><a href="[RSS url]" target="_blank" title="RSS">RSS</a></li>
      </ul>
     </div>
    
     <table class='hbzsocial-like'>
      <tbody>
       <tr>
        <td class='hbzfb-likes'>
         <div id="fb-root">
         </div>
         <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
         </script>
         <div class="fb-like" data-href="[Fb url]" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false">
         </div>
        </td>
        <td class='hbztw-follow'>
         <a href="[Twitter url]" class="twitter-follow-button" data-show-count="true" data-show-screen-name="false" data-dnt="true">Follow @[Twitter Username]</a>
         <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
         </script>
        </td>
       </tr>
      <tbody>
     </table>
    </div> 


    Stylish Email newsletter subscription box widget with Social Buttons.


    ( #3) .  
    Email-subscribers-box-widget-for-blogger


    Code #3 .


    <style type="text/css">
    .hbzsub {
        background-color: #1E293B;
        width: 100%;
        height: 100%;
        box-shadow: 0px 0px 10px rgb(30, 41, 59);
    }
    
    .hbzemailform {
        width: 239px;
        margin: 10px auto;
    }
    
    .hbzform-inner h4 {
        color: rgb(255, 255, 255);
        text-align: center;
        padding: 10px;
        font: bold 18px/40px "trebuchet MS","Tahoma";
    }
    
    #hbzemailbox {
        background-color: #FFF;
        border: 1px solid #FFF;
        border-radius: 7px 0px 0px 7px;
        height: 20px;
        padding: 6px;
        box-sizing: content-box;
    }
    
    #hbzemailbutton {
        background-color: #F0553B;
        border: 1px solid #F0553B;
        color: #FFF;
        height: 34px;
        border-radius: 0px 7px 7px 0px;
        margin-left: -4px;
        font-weight: 600;
        cursor: pointer;
    }
    
    #hbzemailbutton:hover {
        background-color: #1E293B;
        border: 1px solid #FFF;
        box-shadow: 0 0 5px #ddd;
    }
    
    .hbzsocial-like {
        background: transparent url("https://3.bp.blogspot.com/-2hqsqwGQg2M/VsCLsiFb2sI/AAAAAAAAAMY/7jkBsN8tVIg/s1600/Facebook-twitter-rectangle.png") no-repeat scroll center center / 250px 157px;
        width: 250px;
        height: 120px;
        margin: 10px auto;
    }
    
    .hbzfb-likes {
        margin-top: 90px;
        margin-left: 20px;
        position: absolute;
        display: block;
        box-shadow: 0px 0px 10px rgba(9, 42, 87, 0.73);
    }
    
    .hbztw-follow {
        display: block;
        margin-left: 152px;
        position: absolute;
        margin-top: 89px;
        box-shadow: 0 0 10px rgba(2, 81, 173, 0.59);
        height: 20px;
    }
    </style>
    
    <div class="hbzsub">
     <div class='hbzsignup-form'>
      <div class='hbzform-inner'>
       <h4>Get Posts In Your Inbox</h4>
      </div>
      <div class='hbzemailform'>
       <form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=[Your Blog uri]&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
        <input name='uri' type='hidden' value='[Your Blog uri]'/>
        <input name='loc' type='hidden' value='en_US'/>
        <input id='hbzemailbox' name='email' required='' type='text' placeholder='Enter Your Email Here...'/>
        <input id='hbzemailbutton' title='' type='submit' value='Subscribe'/>
       </form>
      </div>
     </div>
    <table class='hbzsocial-like'>
      <tbody>
       <tr>
        <td class='hbzfb-likes'>
         <div id="fb-root">
         </div>
         <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
         </script>
         <div class="fb-like" data-href="[Fb url]" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false">
         </div>
        </td>
        <td class='hbztw-follow'>
         <a href="[Twitter url]" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false" data-dnt="true">Follow @[Twitter Username]</a>
         <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
         </script>
        </td>
       </tr>
      </tbody>
     </table>
    </div> 



    Beautiful fast loading widget for blogger:

    ( #4 ) .  
    Faceboo-and-email-subscribe-box-widget


    Code #4. 
    <
    
    
    style type="text/css">
        .hbzsub {
            background-color: rgb(255, 255, 255);
            width: 100%;
            height: 100%;
            border: 1px dashed #ddd;
        }
        
        .hbzsube {
            color: rgb(255, 255, 255);
            background-color: rgb(11, 172, 227);
            padding: 10px 0;
            text-align: center;
            font: bold 15px "trebuchet MS", "Tahoma";
            width: 100%;
        }
        
        .hbzemailform {
            width: 235px;
            margin: 10px auto;
        }
        
        #hbzemailbox {
            background-color: #FFF;
            color: #747474;
            width: 130px;
            border: 1px solid #D8D8D8;
            padding: 7px;
            height: 18px;
            display: inline-block;
            vertical-align: top;
            box-shadow: inset 0px 0px 5px #c2c2c2;
            box-sizing: content-box;
            font-size: 13px;
        }
        
        #hbzemailbutton {
            background-color: rgb(243, 93, 92);
            border: 1px solid rgb(215, 84, 83);
            color: rgb(255, 255, 255);
            width: 85px;
            font: bold 13px "trebuchet MS", "Tahoma";
            padding: 7px;
            text-align: center;
            cursor: pointer;
            display: inline-block;
            height: 34px;
        }
        
        #hbzemailbutton:hover {
            background-color: #E64C4B;
            border: 1px solid #BF4A49;
        }
        
        .hbzsignup-form {
            margin-top: 15px;
        }
        
        .hbzsocial-icons {
            overflow: hidden;
            text-align: center;
            display: block;
            margin: 20px auto;
        }
        
        .hbzsocial-icons ul {
            margin: 0px auto !important;
            text-align: center;
            padding: 0px !important;
            display: inline-block;
        }
        
        .hbzsocial-icons ul li {
            background: transparent none repeat scroll 0% 0% !important;
            border: medium none !important;
            float: left;
            list-style-type: none !important;
            padding: 0px !important;
            margin: 0px 5px !important;
        }
        
        .hbzsocial-icons ul li::before,
        .hbzsocial-icons ul li::after {
            display: none !important;
        }
       
        .hbzsocial-icons ul li a {
            background: url("http://3.bp.blogspot.com/-qXV1qRPIjHY/UbqjmHPAHzI/AAAAAAAACUE/7_sAZf8tHLY/s1600/sprite_32x32.png") no-repeat scroll 0 0;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            display: block;
            height: 34px;
            overflow: hidden;
            text-indent: -999px;
            transition: all 0.25s linear 0s;
            width: 34px;
        }
        
        .hbzsocial-icons ul li a:hover {
            background-color: #aeaeae !important;
        }
        
        .hbzsocial-icons ul li.social-facebook a {
            background-position: -62px 1px;
            background-color: #3b5998;
        }
        
        .hbzsocial-icons ul li.social-twitter a {
            background-position: -254px 1px;
            background-color: #00aced;
        }
        
        .hbzsocial-icons ul li.social-gplus a {
            background-position: -95px 0px;
            background-color: #dd4b39;
        }
        
        .hbzsocial-icons ul li.social-pinterest a {
            background-position: -159px 1px;
            background-color: #cb2027;
        }
        
        .hbzsocial-icons ul li.social-rss a {
            background-position: -190px 0px;
            background-color: #F87E12;
        }
    </style>
    <div class="hbzsub">
        <div class="hbzsube">Join Our Free Newsletter</div>
        <div class='hbzsignup-form'>
            <div class='hbzemailform'>
                <form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=[Your Blog uri]&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'> <input name='uri' type='hidden' value='[Your Blog uri]' /> <input name='loc' type='hidden' value='en_US' /> <input id='hbzemailbox' name='email' required='' type='text' placeholder='Your Email address' /> <input id='hbzemailbutton' title='' type='submit' value='Join Us' /> </form>
            </div>
            <div class="hbzsube">Sociliaze with Us</div>
            <div class="hbzsocial-icons">
                <ul>
                    <li class="social-facebook"><a href="[Fb url]" target="_blank" title="Facebook">Facebook</a></li>
                    <li class="social-twitter"><a href="[Twitter url]" target="_blank" title="Twitter">Twitter</a></li>
                    <li class="social-gplus"><a href="[Google+ url]" target="_blank" title="Google+">Google+</a></li>
                    <li class="social-pinterest"><a href="[Pinterest url]" target="_blank" title="Pinterest">Pinterest</a></li>
                    <li class="social-rss"><a href="[RSS url]" target="_blank" title="RSS">RSS</a></li>
                </ul>
            </div>
            <div style="width: 230px; margin: 0px auto;">
                <div id="fb-root"></div>
                <script>
                    (function(d, s, id) {
                        var js, fjs = d.getElementsByTagName(s)[0];
                        if (d.getElementById(id)) return;
                        js = d.createElement(s);
                        js.id = id;
                        js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.6";
                        fjs.parentNode.insertBefore(js, fjs);
                    }(document, 'script', 'facebook-jssdk'));
                </script>
                <div class="fb-page" data-href="[Fb url]" data-width="230" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-hide-cover="true" data-show-facepile="true">
                    <div class="fb-xfbml-parse-ignore">
                        <blockquote cite="[Fb url]"><a href="[Fb url]">[Fb Page Name]</a></blockquote>
                    </div>
    
    
    
                </div>
            </div>
        </div>
    <As;/div>




    Responsible Email newsletter subscription box widget for blogger :



    ( #5 ) . 
    Stylish-customized-email-subscribe-box-widgets



    Code #5 .

    <style>
    #ig-subscription-optin {margin: 0px;padding: 10px;background: #2A6DA9;
    background: -moz-linear-gradient(top, #5AE, #036);background: -webkit-gradient(linear, left top, left bottom, from(#5AE), to(#036));height: auto!important;color: white !important;padding: 20px 15px !important;
    text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif !important;margin: 10px;margin: 0px;padding: 10px;
    margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif;padding: 5px;border: none;}#ig-subscription-optin p {margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif;
    padding: 5px;border: none;}#ig-subscription-optin input.name {
    background: white url(https://3.bp.blogspot.com/-Jl2lcnXe42Y/UOb49YMFH8I/AAAAAAAAAiA/hOnOANR83gc/s1600/subscribe-name.png) no-repeat center right;}
    #ig-subscription-optin input[type="text"] {border: 1px solid #111 !important;
    font-size: 15px !important;margin-bottom: 10px !important;padding: 8px 28px 8px 10px !important;width: 80% !important;height: auto !important;}
    #ig-subscription-optin input.email {background: white url(https://2.bp.blogspot.com/-dcien5QLnB8/UOb4N7eNU1I/AAAAAAAAAhw/NxzO8UXjgG4/s1600/subscribe-email.png) no-repeat center right;}#ig-subscription-optin input {
    font-family: Georgia, Times, "Times New Roman", serif;border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;box-shadow: 0 2px 2px #111;-moz-box-shadow: 0 2px 2px #111;-webkit-box-shadow: 0 2px 2px #111;margin: 0px;padding: 0px;}#ig-subscription-optin h3 {margin-top: 10px !important;margin-bottom: 8px !important;margin-left: 10px !important;margin-right: 10px !important;
    font-weight: bold !important;line-height: 26px !important;letter-spacing: normal;
    text-transform: none;text-decoration: none;
    text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif;
    border: none;padding: 0px !important;float: none;}input:hover[type="submit"] {
    background-color: #0094D2;border: 1px solid #0094D2;color: white;text-decoration: none;}input[type="submit"] {background-color: #00A7ED;border: 1px solid #0094D2;
    color: white;cursor: pointer;font-family: 'Droid Sans', sans-serif !important;font-size: 13px;font-weight: normal;padding: 5px;text-decoration: none;}input {
    color: #333;font-family: 'Droid Sans', sans-serif;}#ig-subscription-optin input[type="submit"] {background: #960E17 url(https://2.bp.blogspot.com/-nmlWGnTX5y4/UOb44zqKGBI/AAAAAAAAAh4/Aaa-E2D0Umk/s1600/subscribe-red.png) repeat-x top;border: 1px solid #111 !important;color: white;cursor: pointer !important;font-size: 18px !important;font-weight: bold !important;
    padding: 6px 0 !important;text-shadow: -1px -1px #3A060A !important;width: 90% !important;height: auto !important;line-height: 24px !important;}
    #ig-subscription-optin input[type="submit"]:hover {color: #FFA5A5;} .credit p{ font-size: 10px;}
    </style>
    <center>
    <div align="center" id="BloggerdSense-Subscribe-wrapper">
    <div id="ig-subscription-optin" style="border: 3px solid #000000; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55AAEE', endColorstr='#003366',GradientType=0 ); width: 264px">
    <form action="https://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=bloggerdsense', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">

    <input class="name" id="bloggerdsense_Subscriber_name" name="name" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" type="text" value="Apka Naam" /><br />

    <input class="email" id="BloggerdSense_Subscriber_email" name="from" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" style="width: 130px;" type="text" value="Email Address" /><br />
    <div class="separator" style="clear: both; text-align: center;">
    </div>

    Stylish beautiful email newsletter subscribe box widget blogger blog me kaise lagaye?


    1. First go to blogger dashboard.
    2. Click on sidebar a layout option.
    3. Press on Add widgets
    4. Click on HTML JavaScript. 
    5. Chose and copy email subscribe box widget from BloggerAdSense .
    6. Enter title Subscribe Now then Past .
    7. Us ke bad save par click Kare aur save arrangement par press Kare. Done.


    Don't miss.




    10 clean ways to make your blog design shine







    There are a spread of ways to personalize your weblog so it does not appear to be a fashionable template. You may hire a blog clothier for a whole weblog makeover or you may tweak a blog template to make simple however extraordinarily effective design changes. Don't worry if you're technically challenged and not at ease editing html or css code. Blog designers provide the simple layout modifications indexed underneath at a good deal decrease person prices than a totally custom designed weblog layout costs. Use a unfastened or top rate theme and use the short blog design tricks under to make your weblog stand out from the group!




    10-clean-ways-to-make-your-blog-design-shine




    Blog header


    Your blog header is displayed at the pinnacle of your weblog and is the maximum distinguished part of your weblog. It immediately communicates what your weblog is about, so it need to be nicely-designed. Blog headers can include textual content, pics, or both.


    Blog history

    The historical past of a weblog presentations whilst the content columns don't fill a visitor's full pc display display. Commonly, the background may be seen flanking the theme content columns (the posts column and sidebars). You may select any color for your weblog's background or add an photograph to your history.



    Blog colours

    You could exchange a diffusion of weblog colours to create a consistent, branded look. As an example, select a colour palette of two-three colorings and change your blog's name text, link text, background, and other factors to use best those colours.



    Blog fonts

    A weblog filled with dozens of different fonts appears sloppy and creates the impression that the blogger does not care an awful lot about the person experience. Select two number one fonts to your blog and use the ones fonts (and bold and italic variations) on your title and frame text in the course of your weblog.

    Weblog post dividers

    What's in among the weblog posts to your blog's domestic page or archive pages? Is there just a bit of white space? Perhaps there's a unmarried black line that stretches across the column? A brief trick to make your weblog look higher and precise is to apply a custom put up divider. Submit dividers may be custom designed truly by converting the coloration of the rule among them or you can insert an photo as your post divider.

    Weblog post signature

    Many bloggers want to sign their posts via placing a custom signature photograph. This simple image can upload character and uniqueness in your blog.

    Weblog favicon

    A favicon is the tiny image that appears to the left of a url for your internet browser's navigation toolbar or next to website titles on your browser's bookmarks list. Favicons help to brand your blog and make it appear greater credible than blogs that use the frequent clean piece of paper favicon.

    Sidebar titles
    Remember to dress up the widget titles to your weblog's sidebar. Exchange the color and font to match the rest of your blog in addition to the character you want to present your blog.


    Social media icons

    There are lots of unfastened social media icons available that you could add to your blog (most often in the sidebar) to no longer most effective invite your target market to connect with you throughout the social web, but additionally to feature some persona on your blog. From easy shape icons to fall icons, there are creative icons to be had to add some pizzazz on your blog.


    Weblog navigation menu

    Your blog's pinnacle navigation menu may be a easy bar with links or it can be a loose-flowing organization of links that match your blog's header design. The selection is yours, but this sort of weblog design customization is simply one greater way to make your weblog stand out from the gang.

    Feature Post Widget Blogger Blog Me Kaise Add Kare Jane








    Featured Post Widget For Blogger "blogger blog me Featured Post widget kaise add kare ya lagaye'' ye main aapko iss post me batane wali hun. Friends blogger me Popular Post widget , related post widget bhut kam ke hote hai agar aap ye gadgets blogger blog me add nahi karte to bhut se log jo aapki acchi or famous post padhna chahate hai padh nahi pate jisse aapke blog ke page-view kam ho jate hai. Issliye aapko apne blog me sabhi useful VIP widget add karne chahaiye. Isse aapke blog par pageview badhenge or aapke blog ki search ranking increase ho gi.




    Featured-post-widget-for-blogger





    Blogger Blog Me Feature Post Widget Add karne Ke Benefits, And Reason. ?

    Blogger me feature post widget add karne ka tarika niche batao gi, kuch (benefit) bhi me aap ko batati hun agar aap blogger hai or aapke blog par 40 posts hai and aapki un fourteen posts me se 1 sabse acchi post hai or aap chahate hai vo sabse alag dikhe to aap Featured Post Widget ka use kar sakte hai issme aap apni 1 post ko sidebar, footer ya banner kahi bhi dikha sakte hai. Featured post me aap image ke sath kuch line title dikha sakte hai ya agar aap bina image ya photo ke Featured Post dikhana chhate hai to bhi asani se dikha sakte hai.


    Also read : Popular Post Widget Blog Me Kaise Add Kare, popular post widget for blogger.


    Blogger blog post publish karne ke bad permalink url change kaise kare.


    Facebook popup like box blogger blog me kaise lagaye.



     Featured Post ko blog me add karna issliye important hai kyoki agar aap apne blog ke pageview increase karna chahate hai to ye best way hai aap yaha par apni us post ko dikha sakte hai jisspar aapke sabse jayda pageview huye ya aap apni esi bhi post dikha sakte hai jispar kam pageview huye. Aap Featured Post ko sidebar ya footer me add kar sakte hai. Agar aap footer (sabse niche) me Featured Post add karte hai to sabhi log use asani se dekh sakte hai and use read bhi kar sakte hai.









    Featured Post Widget Blogger Blog Me Kaise Add Kare .

    Feature post widget blog me kaise add karte hain yahan ab me aap ko full guide karon gi ap bs follow kare aur work start, 

    Step 1. Sab se pehle blogger gmail ID se login kare phir blogger dashboard par aye.


    1. Layout par click kare,
    2. Add a gadget par click kare,
    3. Ab ye sab gadget me se featured post widget dekhe and use feature post widget par hi press kare.


    How-to-add-featured-post-widget-blogger

    Step 2. Jaise hi aap featured post gadget par press Karen. ge next samne popup window open ho gi ya bhi hum ne kuch setting karni hai










    1. Post title: yaha already feature post name se title diya hota hota hai so agar use change bhi karna chaho to kar sakte hain,
    2. Show post title: yahan check press karne se only post tiltle show hoga,
    3. Show text snippet: is ko aap aise hi rehne de jaise pehle se hai,
    4. Show image: important option yahan aap chahe to post title ke sath post image show kar sakte hain hain me suggest karon gi aap only title hi rakhe blog loading speed par asar nahi padega,
    5. Posts: yahan aap jo jo post feature post me show karna chahte hain un par click kare agar kuch posts yahan aap ko nazar nahi arahi to aap labels par press kar ke selection kar sakte hai,
    6. last Save : sab settings thek se check karne ke bad save button par click kar ke feature post widget save kar le, ab save arrangement par click kare .