أخر المقالات
تحميل...

زر 3D بإستخدام CSS لمدونات بلوجر

زر 3D بإستخدام CSS لمدونات بلوجر

نقدم لكم زر html تم تجميله بإستخدام css يمكن إستخدامه في الكثير من الاشياء على المواقع وخصوصاً بلوجر تستطيع وضعه مثل زر للتحميل زر معاينة أو أي أشياء أخرى قد ترغب بها.

إستخدام زر بسيط وجميل أفضل من وضع صورة وإستخدامها زر لمشاهدة شيء ما من حيث الشكل والتفاعل والسرعة في المدونة
معاينة

انقر للمشاهدة!

لإضافة هذا الزر لمدونتك ادخل لوحة التحكم ثم القالب ثم أنقر على تحرير html  ثم لصق الكود التالي فوق الرمز ]]></b:skin> ثم احفظ القالب


.a_demo_two {
    background-color:#6fba26;
    padding:10px;
    position:relative;
    font-family: 'Open Sans', sans-serif;
    font-size:12px;
    text-decoration:none;
    color:#fff;
    background-image: linear-gradient(bottom, rgb(100,170,30) 0%, rgb(129,212,51) 100%);
    box-shadow: inset 0px 1px 0px #b2f17f, 0px 6px 0px #3d6f0d;
    border-radius: 5px;
}

.a_demo_two:active {
    top:7px;
    background-image: linear-gradient(bottom, rgb(100,170,30) 100%, rgb(129,212,51) 0%);
    box-shadow: inset 0px 1px 0px #b2f17f, inset 0px -1px 0px #3d6f0d;
    color: #156785;
    text-shadow: 0px 1px 1px rgba(255,255,255,0.3);
    background: rgb(44,160,202);
}
.a_demo_two::before {
    background-color:#072239;
    content:"";
    display:block;
    position:absolute;
    width:100%;
    height:100%;
    padding-left:2px;
    padding-right:2px;
    padding-bottom:4px;
    left:-2px;
    top:5px;
    z-index:-1;
    border-radius: 6px;
    box-shadow: 0px 1px 0px #fff;
}

.a_demo_two:active::before {
    top:-2px;
}

ثم إستخدام الكود التالي داخل مواضيع مدونتك من خلال النقر على زر html بجانب زر التأليف في محرر المشاركات ثم لصق الكود التالي:

<a class="a_demo_two" href="http://www.demoo.madad2.com/" rel="nofollow" target="_blank"><span style="font-size: large;"><b>انقر للمشاهدة!</b></span></a>



أو إذا لم تكن ترغب بإضافة الكود الأول فوق الرمز ]]></b:skin> يمكنك نسخ الكود التالي بالكامل ولصقه داخل محرر المواضيع في مدونتك من خلال النقر على html:


<a class="a_demo_two" href="http://www.demoo.madad2.com/" rel="nofollow" target="_blank"><span style="font-size: large;"><b>انقر للمشاهدة!</b></span></a>
<style>
.a_demo_two {
    background-color:#6fba26;
    padding:10px;
    position:relative;
    font-family: 'Open Sans', sans-serif;
    font-size:12px;
    text-decoration:none;
    color:#fff;
    background-image: linear-gradient(bottom, rgb(100,170,30) 0%, rgb(129,212,51) 100%);
    box-shadow: inset 0px 1px 0px #b2f17f, 0px 6px 0px #3d6f0d;
    border-radius: 5px;
}

.a_demo_two:active {
    top:7px;
    background-image: linear-gradient(bottom, rgb(100,170,30) 100%, rgb(129,212,51) 0%);
    box-shadow: inset 0px 1px 0px #b2f17f, inset 0px -1px 0px #3d6f0d;
    color: #156785;
    text-shadow: 0px 1px 1px rgba(255,255,255,0.3);
    background: rgb(44,160,202);
}
.a_demo_two::before {
    background-color:#072239;
    content:"";
    display:block;
    position:absolute;
    width:100%;
    height:100%;
    padding-left:2px;
    padding-right:2px;
    padding-bottom:4px;
    left:-2px;
    top:5px;
    z-index:-1;
    border-radius: 6px;
    box-shadow: 0px 1px 0px #fff;
}

.a_demo_two:active::before {
    top:-2px;
}
</style>

لاي إستفسار لا تتردد في طلب المساعدة!


4 تعليق على " زر 3D بإستخدام CSS لمدونات بلوجر "

السلام عليكم؟
كيف حالك أخي؟
لدي اضافة المتواجدون الان؟
لاتبدو بشكل صحيح؟أنظر يظهر 500 اونلاين وأنا أشك أنهم 20 هههههه؟ كيف أقوم بتصحيحها من خلال خبرتك؟
http://www.up-00.com/VeJJVpfe

جرب إضافة خاصة بمدونتك لانها قد تكون اضافة لقوالب كثيرة

اضفت الكثير من الاضافات؟ولايوجد حل أيضاآآ ينتج رقم غير قياسي يظهر لي رقم غير متوقع أبدا؟؟؟

جرب هذه الموقع http://whos.amung.us/
فهو يظهر لك عدد المتواجدين وروابط الصفحات التي وجدوا بها

تذكر قوله تعالى:
(( مَا يَلْفِظُ مِنْ قَوْلٍ إِلَّا لَدَيْهِ رَقِيبٌ عَتِيدٌ)) ‏
-----------------------------------
الان يمكنك اضافة اي مقطع فيديو الى التعليقات وايضا اضافة الصور فقط ضع رابط الصور او مقطع الفيديو في التعليقات
----------------------------------
آرائكم تسعدنا, لمتابعة التعليق حتى نرد عليك فقط ضع إشارة على إعلامي

نحن نعرض الإعلانات على الموقع للإسهام في تحسين موقعنا.

نحن لانستخدم إعلانات ضارة او مزعجة في موقعنا نأمل منكم تعطيل الاداة في الموقع حتى تتمكن من مشاهدة الإعلانات.

شكرًا لك

×