كيفية اضافة ازرار تحميل ومعاينة فى مدونة بلوجر بشكل احترافى تركيب ازرار المعاينة والتحميل بشكل احترافي فى بلوجر لمساعدة على اضافة ازرار جذابة فى المحتوي الخاص بك كيفية جعل زر Demo و تحميل واجهة مستوية فى درس اليوم سوف نتعلم تركيب ازرار المعاينة والتحميل وتركيب مع أضافة ايقونة الخط للجميع المدونين المهتمين بالبرامج والافلام وتصميم القوالب وعمل زر تحميل تجريبي وهكذا تابع معايا
- نتوجه الى القالب ونبحث عن الكود التالي ]]></b:skin>
- وبعدها اضف الكود التالي فوقه
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300); .boxy { font-family: “Open Sans”; font-weight: 400; font-size: 1.5em; color: rgba(255, 255, 255, 0); display: inline-block; cursor: pointer; text-decoration: none; padding: 0.6em 1.6em; margin: 0.6em; border-style: solid; border-width: 1px; transition: all 0.2s ease; border-image: linear-gradient(155deg, #fb83fa 0%, #31bcb8 100%) 1 round; background: linear-gradient(155deg, #fb83fa 0%, #31bcb8 100%); background-clip: text; -webkit-background-clip: text; } .boxy:hover { box-shadow: 0 0 0px 1px rgba(255, 255, 255, 0.5), 2px 2px 6px rgba(49, 188, 184, 0.4), -2px -2px 6px rgba(251, 131, 250, 0.4); } .boxy:hover { color: rgba(255, 255, 255, 0.1); text-shadow: 0 0 1px rgba(255, 255, 255, 0.4); } .boxy.red { border-image: linear-gradient(155deg, #fc5c3c 0%, #ffb638 100%) 1 round; background: linear-gradient(155deg, #fc5c3c 0%, #ffb638 100%); background-clip: text; -webkit-background-clip: text; } .boxy.red:hover { box-shadow: 0 0 0px 1px rgba(255, 255, 255, 0.5), 2px 2px 6px rgba(255, 182, 56, 0.4), -2px -2px 6px rgba(252, 92, 60, 0.4); } .boxy.green { border-image: linear-gradient(155deg, #06e5de 0%, #AAFFA9 100%) 1 round; background: linear-gradient(155deg, #06e5de 0%, #AAFFA9 100%); background-clip: text; -webkit-background-clip: text; } .boxy.green:hover { box-shadow: 0 0 0px 1px rgba(255, 255, 255, 0.5), 2px 2px 6px rgba(170, 255, 169, 0.4), -2px -2px 6px rgba(6, 229, 222, 0.4); } .boxy.la { text-transform: uppercase; font-weight: 300; letter-spacing: 0.05em; font-size: 3em; padding: 0.3em; border-width: 2px; display: block; width: 70%; margin: 0.6em auto; border-image: linear-gradient(155deg, #F0C27B 0%, #ad1ba3 100%) 1 round; background: linear-gradient(155deg, #F0C27B 0%, #ad1ba3 100%); background-clip: text; -webkit-background-clip: text; } .boxy.la:hover { box-shadow: 0 0 0px 1px rgba(255, 255, 255, 0.5), 2px 2px 6px rgba(173, 27, 163, 0.4), -2px -2px 6px rgba(240, 194, 123, 0.4); } p { color: rgba(255, 255, 255, 0.7); margin: 30px; }
- قم بحفظ القالب وهذا هو كود html اضفه بداخل المشاركة في تبويب html
<a class=”boxy” href=”#”> للتحميل </a> <a class=”boxy red” href=”#”> للمعاينة </a> <a class=”boxy green” href=”#”> للتحميل </a>
كيفية اضافة ازرار تحميل ومعاينة فى مدونة بلوجر بشكل احترافى تركيب ازرار المعاينة والتحميل بشكل احترافي فى بلوجر لمساعدة على اضافة ازرار جذابة فى المحتوي الخاص بك كيفية جعل زر Demo و تحميل واجهة مستوية فى درس اليوم سوف نتعلم تركيب ازرار المعاينة والتحميل وتركيب مع أضافة ايقونة الخط للجميع المدونين المهتمين بالبرامج والافلام وتصميم القوالب وعمل زر تحميل تجريبي وهكذا تابع معايا
- نتوجه الى القالب ونبحث عن الكود التالي ]]></b:skin>
- وبعدها اضف الكود التالي فوقه
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300); .boxy { font-family: “Open Sans”; font-weight: 400; font-size: 1.5em; color: rgba(255, 255, 255, 0); display: inline-block; cursor: pointer; text-decoration: none; padding: 0.6em 1.6em; margin: 0.6em; border-style: solid; border-width: 1px; transition: all 0.2s ease; border-image: linear-gradient(155deg, #fb83fa 0%, #31bcb8 100%) 1 round; background: linear-gradient(155deg, #fb83fa 0%, #31bcb8 100%); background-clip: text; -webkit-background-clip: text; } .boxy:hover { box-shadow: 0 0 0px 1px rgba(255, 255, 255, 0.5), 2px 2px 6px rgba(49, 188, 184, 0.4), -2px -2px 6px rgba(251, 131, 250, 0.4); } .boxy:hover { color: rgba(255, 255, 255, 0.1); text-shadow: 0 0 1px rgba(255, 255, 255, 0.4); } .boxy.red { border-image: linear-gradient(155deg, #fc5c3c 0%, #ffb638 100%) 1 round; background: linear-gradient(155deg, #fc5c3c 0%, #ffb638 100%); background-clip: text; -webkit-background-clip: text; } .boxy.red:hover { box-shadow: 0 0 0px 1px rgba(255, 255, 255, 0.5), 2px 2px 6px rgba(255, 182, 56, 0.4), -2px -2px 6px rgba(252, 92, 60, 0.4); } .boxy.green { border-image: linear-gradient(155deg, #06e5de 0%, #AAFFA9 100%) 1 round; background: linear-gradient(155deg, #06e5de 0%, #AAFFA9 100%); background-clip: text; -webkit-background-clip: text; } .boxy.green:hover { box-shadow: 0 0 0px 1px rgba(255, 255, 255, 0.5), 2px 2px 6px rgba(170, 255, 169, 0.4), -2px -2px 6px rgba(6, 229, 222, 0.4); } .boxy.la { text-transform: uppercase; font-weight: 300; letter-spacing: 0.05em; font-size: 3em; padding: 0.3em; border-width: 2px; display: block; width: 70%; margin: 0.6em auto; border-image: linear-gradient(155deg, #F0C27B 0%, #ad1ba3 100%) 1 round; background: linear-gradient(155deg, #F0C27B 0%, #ad1ba3 100%); background-clip: text; -webkit-background-clip: text; } .boxy.la:hover { box-shadow: 0 0 0px 1px rgba(255, 255, 255, 0.5), 2px 2px 6px rgba(173, 27, 163, 0.4), -2px -2px 6px rgba(240, 194, 123, 0.4); } p { color: rgba(255, 255, 255, 0.7); margin: 30px; }
- قم بحفظ القالب وهذا هو كود html اضفه بداخل المشاركة في تبويب html
<a class=”boxy” href=”#”> للتحميل </a> <a class=”boxy red” href=”#”> للمعاينة </a> <a class=”boxy green” href=”#”> للتحميل </a>
