ضافة أزرار التحميل إحترافية بتقنية CSS إلى بلوجر
بسم الله الرحمــن الرحيم
مرحبا بكم متتبعين و زوار مدونة الشامل , في هذا الموضوع من مواضيع إضافات بلوجر إحترافية سأقدم لكم أحد أجمل الإضافات التي ستطفي على مدوناتكم طابع إحترافي و هي أزرار التحميل بتقنية css3 المطورة .
إنشاء الله سأستعرض لكم 4 أشكال مختلفة من الأزرار و كل شكل يحتوي على 6 ألوان مختلفة إختر منها ما شئت أو يمكنك أن تستعملها جميعا على حسب نوع المحتوى الذي تتميز به مدونتك , مثلا إن كانت مدونتك تستعرض قةالب بلوجر أو إضافات بلوجر فستحتاج للونين الأول للتحمبل و الثاني للمعاينة . مثلا .
إذا بدون إطالة نستهل الشرح .
. الخطوة الأولى إختر النوع الذي تريد من الأشكال التي سأقدم لك ثم
إذهب إلى بلوجر- قالب - تحرير HTML و إلصق كود css للأزرار ضمن أكواد css الخاصة بمدونتك
إبحث عن هذا الكود ]]></b:skin> بالضغط على CTRL+f في صندوق الأكواد و قم بلصق كود css فوقه
. الخطوة الثانية أما أكواد HTML للأزرار فإستعملها عند كتابتك لتدوينة إنسخ الكود و ألصقه ضمن أكواد HTML للتدوينة
ثم إستبدل الكلمة الموجودة على الزر بأي كلمة تريد
الشكل الأول Standard Buttons
Red Button Orange Button Green Button
Blue Button Gray Button Dark Button
أكواد css
Blue Button Gray Button Dark Button
أكواد css
/* Standard Buttons */أكواد HTML
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 }
<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
Blue Arrow Button Gray Arrow Button Dark Arrow Button
أكود CSS
/* 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
<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>
Red Bevel Button Orange Bevel Button Green Bevel Button
Blue Bevel Button Gray Bevel Button Dark Bevel Button
أكواد CSS
/* 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
<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
Red Engraved Button Orange Engraved Button Green Bevel Button
Blue Engraved Button Gray Engraved Button Dark Engraved Button
Blue Engraved Button Gray Engraved Button Dark Engraved Button
أكواد CSS
/* 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
<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>
إلا هنا و ينتهي موضوعنا أتمنى أن تنال الإضافة إعجابكم
و تذكرو لأي إستفسار فقط إتركه في تعليق
ليست هناك تعليقات:
إرسال تعليق