اضافة رساله تنبيه لمدونات بلوجر بلغة الماتيريال ديزاين

اضافة رساله تنبيه لمدونات بلوجر بلغة الماتيريال ديزاين

شرح التركيب

أول أبحث عن هذا الوسم]]></b:skin>ثم وقم بوضع الكود التالى فوقه.

/* Material Design Dialog Box wdbloog.blogspot.com/ */
a.waves-light.close-sf{font-size:14px;color:#fff}
.blanternotif,.matilampu{visibility:hidden;opacity:0}
.blanternotif{background:#fff;position:fixed;padding:25px;top:15%;transition:all .3s ease-in-out;max-width:450px;left:35%;z-index:99;border-radius:4px;box-shadow:0 9px 46px 8px rgba(0,0,0,.14),0 11px 15px -7px rgba(0,0,0,.12),0 24px 38px 3px rgba(0,0,0,.2)}
.blanternotif button{border:none;position:absolute;margin-top:17px;right:30px;cursor:pointer;background:#e8e8e8;padding-left:7px;outline:0}
a.waves-light.close-sf{background:#3949ab;margin-top:15px;display:inline-block;padding:10px 13px;border-radius:3px;box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);float:right;text-transform:uppercase}
.matilampu{position:fixed;top:0;background:rgba(0,0,0,.59);left:0;right:0;bottom:0;margin:0;z-index:97;transition:all .4s ease-in-out}
.blantertitle{margin-bottom:15px}
.blanternotif.aktif,.matilampu.aktif{visibility:visible;opacity:1}
.blanternotif.aktif{top:20%}
.icx{position:absolute;top:10px;left:10px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAfP8PmQoIuU0fMsVT9GmRi3VfacxwhWH97_Z31VQHhORzWwvF_p4ckOBEtS26qmf-gVWMnu5gXKIDkTyZP1bppzEv-Dy5XI9tL5MwhGDLaIqhx392oEZYjA0GzhI2GjRVlUGuLsPKB_Y/s1600/mdclose.png)no-repeat;background-size:15px;margin:10px 8px;width:15px;height:15px}
.notiftext{font-size:14px;line-height:1.5}
a.shownotif {background: #3949ab;margin-top: 15px;display: inline-block;padding: 10px 13px;border-radius: 3px;box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);float: right;text-transform: uppercase;color: #fff;}
@media screen and (max-width:768px){.blanternotif{left:10%;right:10%}}

الأن أبحث عن الوسم</body>ثم قم وضع الكود التالى فوقه

<div class='blanternotif'>
<div class='blantertitle'>تنبية</div>
<div class='notiftext'>
هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى</div>
<a class='waves-effect waves-light close-sf' href='javascript:;' title='Done'>حسنا</a>
<a class='waves-effect icx close-sf' href='javascript:;'></a>
</div>
<div class='matilampu'></div>
<script type='text/javascript'>
$(document).ready(function(){$(".close-sf").click(function(){$(".blanternotif,.matilampu").removeClass("aktif")})}),$(document).ready(function(){$(".shownotif").click(function(){$(".blanternotif,.matilampu").toggleClass("aktif")})});
</script>

الأن ما اخر كود وهو خاص بمكان ظهور الزر الحاصة بالإضافة وسوف يكون عليك وضعه فى المكان الذى تريده فى مدونتك.

<li><a class='shownotif' href='javascript:;' title='تنبيه'>تنبيه</a></li>

بعد ذلك سوف يكون عليك تغيير العبارات فى الأكواد السابق بما تريده وبعدها قم بحفظ القالب ومبروك عليك الاضافة الجديد فى مدونتك.

هذا كل شئ فى موضوع اليوم بالتوفيق للجميع وأنتظرونا بكل جديد بأذن الله على المدونة ، لا تنس مشاركة الموضوع حتى يتسفيد غيرك وأى مشكلة تجدها تضعها فى تعليق .

المصدر عالم المدون