أزرار تحميل ومعاينة قوالب البلوجر شكل احترافي

مـرحـبـا بـكـم فـي مـوضـوع جـديـد تـحـت عـنـوان : أزرار تـحـمـيـل ومـعـايـنـة قـوالـب الـبـلـوجـر شـكـل احـتـرافـي

معاينة

مراحل تركيب الإضافة

1. ادخل إلى لوحة تحكم المدونة في بلوجر
2. اختر قالب المدونة التي تود تطبيق الشرح فيها
3. اضغط على تحرير HTML
4. ابحث عن الوسم ]]></b:skin> و اضف الكود التالي قبله مباشرة



.ui.button { cursor: pointer; display: inline-block; vertical-align: middle; min-height: 1em; outline: none; border: none; background-color: #F0F0F0; color: #808080; margin: 0; padding: .8em 1.5em; font-family: droid arabic kufi; font-size: 1rem; text-transform: uppercase; line-height: 1; font-style: normal; text-align: center; text-decoration: none; border-radius: .25em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}
.ui.buttons .active.button,.ui.active.button { background-color: #EAEAEA; background-image: none; -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.05) inset !important; box-shadow: 0 0 0 1px rgba(0,0,0,0.05) inset !important; color: rgba(0,0,0,0.7);}
.ui.button:not(.loading):hover { background-image: -webkit-gradient(linear,top left,bottom left,from(rgba(0,0,0,0)),to(rgba(0,0,0,0.08))); background-image: -webkit-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.08)); background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.08)); color: rgba(0,0,0,0.7);}
.ui.button.active:hover { background-image: none;}
.ui.button:hover .icon,.ui.button.hover .icon { opacity: .85;}
.ui.button:not(.loading):active,.ui.active.button:not(.loading):active { background-color: #F1F1F1; color: rgba(0,0,0,0.7); -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.05) inset !important; box-shadow: 0 0 0 1px rgba(0,0,0,0.05) inset !important;}
.ui.buttons .or { position: relative; float: left; width: .3em; height: 1.1em; z-index: 3;}
.ui.buttons .or:before { position: absolute; top: 50%; left: 50%; content: 'or'; background-color: #5a5a5a; margin-top: -.1em; margin-left: -.9em; width: 1.9em; height: 1.9em; line-height: 1.95; color: #fff; font-style: normal; font-weight: normal; text-align: center; border-radius: 500px; -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,0.1); box-shadow: 0 0 0 1px rgba(0,0,0,0.1); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}
.ui.buttons .or:after { position: absolute; top: 0; left: 0; content: ' '; width: .3em; height: 1.9em; background-color: transparent; border-top: .5em solid #5a5a5a; border-bottom: .9em solid #5a5a5a;}
.ui.positive.buttons .button,.ui.positive.button { background-color: #F9BB4A !important; color: #FFFFFF;}
.ui.positive.buttons .button:hover,.ui.positive.button:hover,.ui.positive.buttons .active.button,.ui.positive.button.active { background-color: #F7A130 !important; color: #FFFFFF;}
.ui.positive.buttons .button:active,.ui.positive.button:active { background-color: #FFBC64 !important; color: #FFFFFF;}
.ui.buttons { display: inline-block; vertical-align: middle; border-bottom: 2px solid #CFCFCF; border-radius: 5px;}
.ui.buttons:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;}
.ui.buttons .button:first-child { border-left: none;}
.ui.buttons .button { float: left; border-radius: 0;}
.ui.buttons .button:first-child { margin-left: 0; border-top-left-radius: .25em; border-bottom-left-radius: .25em;}
.ui.buttons .button:last-child { border-top-right-radius: .25em; border-bottom-right-radius: .25em;}
.ui.button a { text-decoration: none; color: #fff;}
.ui.buttons .button:first-child a { color: #444;}

5. كود ازرار التحميل ضعها في HTML



<center>
<div class="ui buttons"><div class="ui button">
<a title="معاينة القالب" href="your link" target="_blank">معاينة القالب</a></div>
<div class="or"></div>
<div class="ui positive button"><a title="تحميل القالب" href="www.teqniweb.com" target="_blank">تحميل القالب</a></div>
</div>
</div>
</center>

مـــلاحظة :

• هذا الكود يجعل الاضافة بالمنتصف </center>
• ان أردت تــغـيــيــرهـا اخــذفـه.
• وضع الروابط بدل رابط موقع التقنية (www.teqniweb.com)

إشترك في قناتنا على اليوتيوب لتتوصلو بجديد حلقاتنا التقنية
سبحان الله، والحمدلله، ولا إله إلا الله، والله أكبر
إذا أعجبك الموضوع فلماذا تبخل علينا بالردود المشجعة ؟!