حصريا : طريقة إضافة صناديق الإقتباس بشكل زجاجي

معاينة اضغط للمعاينة

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

1. توجه إلى تجرير html في القالب
2. ثم إضغط على CTRL +F
3. و إبحث على ]]></b:skin>
4. و لصق هذا الكود فوقه مباشرة

.alert-message{
position:relative;display:block;background-color:#f7f8fa;padding:20px;margin:15px 0;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;color:#39484d;text-align: center;
}
.alert-message p{
margin:0!important;padding:0;line-height:22px;font-size:13px;color:#39484d
}
.alert-message span{
font-size:14px!important
}
.alert-message i{
font-size:22px;text-align:left;display:inline-block;position:absolute;right:0;top:0;padding:20px;opacity:0.8;
}
.alert-message.success{
    background: #00acd6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5ne_Kn5CA-_j1n0zq4bpJ_25KGNCYw-tVU2KYlWoF7Tv2ISBJsy7WE77OoKuItzxUn9BTn9JIIPS-I04nnaNMJt5GKSpDTcpzHNZvbGvOaCpYH_OIn4Rjc00S-OycOcUmsE2U6gKS5V3c/w938-h350-no/header-6.png) repeat-y right;
    color: #fff;
}
.alert-message.success a,.alert-message.success span{
color:#fff
}
.alert-message.alert {
    background: #0073b7 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5ne_Kn5CA-_j1n0zq4bpJ_25KGNCYw-tVU2KYlWoF7Tv2ISBJsy7WE77OoKuItzxUn9BTn9JIIPS-I04nnaNMJt5GKSpDTcpzHNZvbGvOaCpYH_OIn4Rjc00S-OycOcUmsE2U6gKS5V3c/w938-h350-no/header-6.png) repeat-y right;
    color: #fff;
}
.alert-message.alert a,.alert-message.alert span{
color:#fff
}
.alert-message.warning {
    background: #efa666 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5ne_Kn5CA-_j1n0zq4bpJ_25KGNCYw-tVU2KYlWoF7Tv2ISBJsy7WE77OoKuItzxUn9BTn9JIIPS-I04nnaNMJt5GKSpDTcpzHNZvbGvOaCpYH_OIn4Rjc00S-OycOcUmsE2U6gKS5V3c/w938-h350-no/header-6.png') repeat-y right;
    color: #fff;
}
.alert-message.warning a,.alert-message.warning span{
color:#fff
}
.alert-message.error{
    background: #f56c7e url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5ne_Kn5CA-_j1n0zq4bpJ_25KGNCYw-tVU2KYlWoF7Tv2ISBJsy7WE77OoKuItzxUn9BTn9JIIPS-I04nnaNMJt5GKSpDTcpzHNZvbGvOaCpYH_OIn4Rjc00S-OycOcUmsE2U6gKS5V3c/w938-h350-no/header-6.png) !important;
    color: #fff;
}
.alert-message.error a,.alert-message.error span{
color:#fff
}
.alert-message.happy{
background: #FA8734 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5ne_Kn5CA-_j1n0zq4bpJ_25KGNCYw-tVU2KYlWoF7Tv2ISBJsy7WE77OoKuItzxUn9BTn9JIIPS-I04nnaNMJt5GKSpDTcpzHNZvbGvOaCpYH_OIn4Rjc00S-OycOcUmsE2U6gKS5V3c/w938-h350-no/header-6.png') repeat-y right;
    color: #fff;
}
.alert-message.happy a,.alert-message.happy span{
color:#fff
}
.alert-message.link a,.alert-message.link span{
color:#fff
}
.alert-message.link{
    background: #F44242 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5ne_Kn5CA-_j1n0zq4bpJ_25KGNCYw-tVU2KYlWoF7Tv2ISBJsy7WE77OoKuItzxUn9BTn9JIIPS-I04nnaNMJt5GKSpDTcpzHNZvbGvOaCpYH_OIn4Rjc00S-OycOcUmsE2U6gKS5V3c/w938-h350-no/header-6.png) repeat-y right;
    color: #fff;
}
.alert-message.hi a,.alert-message.hi span{
color:#fff
}
.alert-message.hi{
    background: #57DF69 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5ne_Kn5CA-_j1n0zq4bpJ_25KGNCYw-tVU2KYlWoF7Tv2ISBJsy7WE77OoKuItzxUn9BTn9JIIPS-I04nnaNMJt5GKSpDTcpzHNZvbGvOaCpYH_OIn4Rjc00S-OycOcUmsE2U6gKS5V3c/w938-h350-no/header-6.png') repeat-y right;
    color: #fff;
} 

1. قم بتحرير الموضوع المراد إضافة به الصناديق
2. إنتقل لتبويبة HTML
3. و ضع الكود المناسب

<div class="alert-message success"> مثال : مرحباً. أنا قالب الإبداع بتصميمي الشبكي، أعرض محتواك بأبهى حلة وأناقة <i class="fa fa-check-circle"></i> </div> 

<div class="alert-message alert"> مثال : مرحباً. أنا قالب الإبداع بتصميمي الشبكي، أعرض محتواك بأبهى حلة وأناقة <i class="fa fa-info-circle"></i> </div>  

<div class="alert-message warning"> مثال : مرحباً. أنا قالب الإبداع بتصميمي الشبكي، أعرض محتواك بأبهى حلة وأناقة <i class="fa fa-exclamation-triangle"></i> </div> 

 <div class="alert-message error"> مثال : مرحباً. أنا قالب الإبداع بتصميمي الشبكي، أعرض محتواك بأبهى حلة وأناقة <i class="fa fa-exclamation-circle"></i> </div> 

<div class="alert-message happy"> مثال : مرحباً. أنا قالب الإبداع بتصميمي الشبكي، أعرض محتواك بأبهى حلة وأناقة <i class="fa fa-bell-o"></i> </div>  

<div class="alert-message link"> مثال : مرحباً. أنا قالب الإبداع بتصميمي الشبكي، أعرض محتواك بأبهى حلة وأناقة <i class="fa fa-link"></i> </div>  

<div class="alert-message hi"> مثال : مرحباً. أنا قالب الإبداع بتصميمي الشبكي، أعرض محتواك بأبهى حلة وأناقة <i class="fa fa-quote-right"></i> </div> 

شارك الموضوع إذا أعجبك :