ब्लॉग के लिए DIY Buttons Pack अपने ब्लॉग में बटन लगायें |

Hi Friends, आज हम Blogger के लिए DIY Buttons Pack Release करने जा रहे है. जिन्हें DIY Buttons में Convert किया जा सकता है. इन Buttons के WordPress Version को Kolakube के Alex के द्वारा बनाया गया था.

इन Buttons की सबसे अच्छी बात यह है की यह सुन्दर दिखने वाली Buttons CSS3 के साथ बनायीं गयी है. जिसका मतलब है की इन बटन को कस्टमाइज करना बेहद ही आसान है.

यदि आप CSS के बारे में थोडा बहुत जानते है तो आप इन्हें आसानी से Customize कर सकतें है.

इसके WordPress Version में 30 Buttons थी लेकिन यहाँ हम आपको केवल 24 Buttons का Pack उपलब्ध करा रहे है. क्योंकि आखिर की 6 Button Web Symbols के Regular Font के साथ कार्य करती है जो की Blogger को Support नही करती है. तो यहाँ हमने आपके Blogger Blog के लिए 24 DIY Button Pack Add किया है. तो आइये देखते है की आप अपने Blogger Blog में इन Buttons को किस तरह जोड़ सकते है. 🙂  😆  🙄  😀  😛  😎 .


Apne Blogger Blog Me DIY Button Kaise Jode


अपने Blogger Blog में DIY बटन कैसे जोड़े Add DIY Buttons To Your Blog – Apne Blogger Blog Me DIY Button Kaise Jode.

CSS Code को जोड़ना.

  1. सबसे पहले Blogger Dashboard -> Template -> Edit HTML पर जाएँ |
  2. अब Warning को हटायें और Proceed बटन पर क्लिक करें.
  3. अब ]]></b:skin> Search करें.
  4. अब इस Code के ऊपर नीचे दिए गए बटन के Code को Paste करें.

Note:- इसके ऊपर उस Code को Paste करें जिस बटन का आप अपने Blog में उपयोग करना चाहतें हैं.

Blog में बटन जोड़ना.

अब नीचे दिए गए HTML Code को उस जगह पर Paste करें जहाँ आप इन Buttons को लगाना चाहतें है.

Standard Buttons


Blogger Me DIY Buttons Kaise Jode Hindi Me - Buttons Pack

Blogger Me DIY Buttons Kaise Jode Hindi Me – Buttons Pack

CSS3 Code For Standard Buttons

/* Standard Buttons */
a.standard { border: 1px solid rgba(0, 0, 0, .2); color: #fff; display: inline-block; padding: .5em .8em; text-decoration: none; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }

.standard.red { background: #c60000; background: linear-gradient(top, #c60000 0%, #b20000 100%); background: -moz-linear-gradient(top, #c60000 0%, #b20000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c60000), color-stop(100%, #b20000)); background: -webkit-linear-gradient(top, #c60000 0%, #b20000 100%); }

.standard.orange { background: #f99015; background: linear-gradient(top, #f99015 0%, #f76c0f 100%); background: -moz-linear-gradient(top, #f99015 0%, #f76c0f 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f99015), color-stop(100%,#f76c0f)); background: -webkit-linear-gradient(top, #f99015 0%,#f76c0f 100%); }

.standard.green { background: #30a146; background: linear-gradient(top, #30a146 0%, #249334 100%); background: -moz-linear-gradient(top, #30a146 0%, #249334 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #30a146), color-stop(100%, #249334)); background: -webkit-linear-gradient(top, #30a146 0%, #249334 100%); }

.standard.blue { background: #16a4c8; background: linear-gradient(top, #16a4c8 0%, #1086b6 100%); background: -moz-linear-gradient(top, #16a4c8 0%, #1086b6 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #16a4c8), color-stop(100%, #1086b6)); background: -webkit-linear-gradient(top, #16a4c8 0%, #1086b6 100%); }

.standard.gray { background: #c2c2c2; background: linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); background: -moz-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c2c2c2), color-stop(100%, #aeaeae)); background: -webkit-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); }

.standard.dark { background: #464646; background: linear-gradient(top, #464646 0%, #343434 100%); background: -moz-linear-gradient(top, #464646 0%, #343434 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #464646), color-stop(100%, #343434)); background: -webkit-linear-gradient(top, #464646 0%, #343434 100%); }

a.standard:hover { color: #fff; opacity: .5 }

HTML Code For Standard Buttons

<a href=”http://www.YOUR-LINK-HERE.com/” class=”standard red”>Red Button</a>

<a href=”http://www.YOUR-LINK-HERE.com/” class=”standard orange”>Orange Button</a>

<a href=”http://www.YOUR-LINK-HERE.com/” class=”standard green”>Green Button</a>

<a href=”http://www.YOUR-LINK-HERE.com/” class=”standard blue”>Blue Button</a>

<a href=”http://www.YOUR-LINK-HERE.com/” class=”standard gray”>Gray Button</a>

<a href=”http://www.YOUR-LINK-HERE.com/” class=”standard dark”>Dark Button</a>

Arrow Buttons


Blogger Me DIY Buttons Kaise Jode Hindi Me - Buttons Pack

Blogger Me DIY Buttons Kaise Jode Hindi Me – Buttons Pack

CSS3 Code For Arrow Buttons

/* Arrow Buttons */
a.arrow { background: url(http://i44.tinypic.com/6tmsu8.png) repeat-x top; border: 4px solid rgba(0, 0, 0, .1); color: #fff; display: inline-block; font-size: 1.1em; font-weight: bold; padding: .6em 1.2em; text-decoration: none; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; }
a.arrow.red { background-color: #b20000 }
a.arrow.orange { background-color: #f76c0f }
a.arrow.green { background-color: #248334 }
a.arrow.blue { background-color: #1086b6 }
a.arrow.gray { background-color: #aeaeae }
a.arrow.dark { background-color: #343434 }
a.arrow:hover { color: #fff; opacity: .5 }

HTML Code For Arrow Buttons

<a class=”arrow red” href=”http://www.YOUR-LINK-HERE.com/”>Red Arrow Button</a>

<a class=”arrow orange” href=”http://www.YOUR-LINK-HERE.com/”>Orange Arrow Button</a>

<a class=”arrow green” href=”http://www.YOUR-LINK-HERE.com/”>Green Arrow Button</a>

<a class=”arrow blue” href=”http://www.YOUR-LINK-HERE.com/”>Blue Arrow Button</a>

<a class=”arrow gray” href=”http://www.YOUR-LINK-HERE.com/”>Gray Arrow Button</a>

<a class=”arrow dark” href=”http://www.YOUR-LINK-HERE.com/”>Dark Arrow Button</a>

Bevel Buttons


Blogger Me DIY Buttons Kaise Jode Hindi Me - Buttons Pack

Blogger Me DIY Buttons Kaise Jode Hindi Me – Buttons Pack

CSS3 Code For Bevel Buttons

/* Bevel Buttons */
a.bevel { border-color: rgba(255, 255, 255, .2) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, .1) rgba(255, 255, 255, 0.2); border-style: solid; border-width: 3px; color: #fff; display: inline-block; padding: .5em .8em; text-decoration: none; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; }
a.bevel.red { background: #b20000 }
a.bevel { background: #f76c0f }
a.bevel.green { background: #248334 }
a.bevel.blue { background: #1086b6 }
a.bevel.gray { background: #aeaeae }
a.bevel.dark { background: #343434 }
.bevel:hover { color: #fff; opacity: .5 }

HTML Code For Bevel Buttons

<a class=”bevel red” href=”http://www.YOUR-LINK-HERE.com/”>Red Bevel Button</a>

<a class=”bevel orange” href=”http://www.YOUR-LINK-HERE.com/”>Orange Bevel Button</a>

<a class=”bevel green” href=”http://www.YOUR-LINK-HERE.com/”>Green Bevel Button</a>

<a class=”bevel blue” href=”http://www.YOUR-LINK-HERE.com/”>Blue Bevel Button</a>

<a class=”bevel gray” href=”http://www.YOUR-LINK-HERE.com/”>Gray Bevel Button</a>

<a class=”bevel dark” href=”http://www.YOUR-LINK-HERE.com/”>Dark Bevel Button</a>

Engraved Buttons


 

Blogger Me DIY Buttons Kaise Jode Hindi Me - Buttons Pack

Blogger Me DIY Buttons Kaise Jode Hindi Me – Buttons Pack

CSS3 Code For Engraved Buttons

/* Engraved Buttons */
.engraved { background: rgba(0, 0, 0, .08); display: inline-block; padding: 5px; border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; }
.engraved a { color: #fff; border: 1px solid rgba(0, 0, 0, .3); display: inline-block; padding: .6em 1.2em; position: relative; text-decoration: none; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }

.engraved a.red { background: #c60000; background: linear-gradient(top, #c60000 0%, #b20000 100%); background: -moz-linear-gradient(top, #c60000 0%, #b20000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c60000), color-stop(100%, #b20000)); background: -webkit-linear-gradient(top, #c60000 0%, #b20000 100%); }

.engraved a.orange { background: #f99015; background: linear-gradient(top, #f99015 0%, #f76c0f 100%); background: -moz-linear-gradient(top, #f99015 0%, #f76c0f 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f99015), color-stop(100%,#f76c0f)); background: -webkit-linear-gradient(top, #f99015 0%,#f76c0f 100%); }

.engraved a.green { background: #30a146; background: linear-gradient(top, #30a146 0%, #249334 100%); background: -moz-linear-gradient(top, #30a146 0%, #249334 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #30a146), color-stop(100%, #249334)); background: -webkit-linear-gradient(top, #30a146 0%, #249334 100%); }

.engraved a.blue { background: #16a4c8; background: linear-gradient(top, #16a4c8 0%, #1086b6 100%); background: -moz-linear-gradient(top, #16a4c8 0%, #1086b6 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #16a4c8), color-stop(100%, #1086b6)); background: -webkit-linear-gradient(top, #16a4c8 0%, #1086b6 100%); }

.engraved a.gray { background: #c2c2c2; background: linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); background: -moz-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c2c2c2), color-stop(100%, #aeaeae)); background: -webkit-linear-gradient(top, #c2c2c2 0%, #aeaeae 100%); }

.engraved a.dark { background: #464646; background: linear-gradient(top, #464646 0%, #343434 100%); background: -moz-linear-gradient(top, #464646 0%, #343434 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #464646), color-stop(100%, #343434)); background: -webkit-linear-gradient(top, #464646 0%, #343434 100%); }

.engraved a:hover, .engraved:hover { color: #fff; opacity: .5 }

HTML Code For Engraved Buttons

<span class=”engraved”><a class=”red” href=”http://www.YOUR-LINK-HERE.com/”>Red Engraved Button</a></span>

<span class=”engraved”><a class=”orange” href=”http://www.YOUR-LINK-HERE.com/”>Orange Engraved Button</a></span>

<span class=”engraved”><a class=”green” href=”http://www.YOUR-LINK-HERE.com/”>Green Bevel Button</a></span>

<span class=”engraved”><a class=”blue” href=”http://www.YOUR-LINK-HERE.com/”>Blue Engraved Button</a></span>

<span class=”engraved”><a class=”gray” href=”http://www.YOUR-LINK-HERE.com/”>Gray Engraved Button</a></span>

<span class=”engraved”><a class=”dark” href=”http://www.YOUR-LINK-HERE.com/”>Dark Engraved Button</a></span>

आशा है की आपको यह Post पसंद आएगी अगर आपको किसी भी प्रकार की परेशानी आये तो हमें जरूर बताये हम जल्द से जल्द आपकी परेशानी हल करने की कोशिश करेंगे.

13 Comments

  1. ASHOK SAINI Mar 20, 2016
    • Lalit Banjara Mar 20, 2016
  2. Hindi Tuts Zone Mar 21, 2016
  3. this website May 27, 2016
  4. this website May 30, 2016
  5. Dr. Steve Chan Jun 3, 2016
  6. Online Hindi gk Jun 6, 2016
  7. phone spy Jun 7, 2016
  8. hoverboard Jun 10, 2016
  9. this website Jun 27, 2016
  10. this website Jul 7, 2016

Leave a Reply

CommentLuv badge