كود جديد يسمح لك بإعطاء زائر مدونتك كلمة ترحيبية له بشكل جميل وجذاب - تحديث

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

إليكم الكود :
قم بوضعه أخر كود في المدونة لكي يظهر بشكل آمن ولا يوجد به أية أخطاء .... قبل الوسم

</body>

<style type='text/css'>
.desc {
background: rgb(138, 43, 225);
padding: 5px;
clear: both;
border-radius: 0 13 13 0;
width: 260;
direction: rtl;
font-family: DroidNaskh-Bold;
padding-bottom: 2px;
float: left;
color: #fff;
font-size: small;
}
.select {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.3);
padding: 5px;
clear: both;
border-radius: 0 13 0 0;
width: 150;
direction: rtl;
font-size: 19;
font-family: DroidNaskh-Bold;
border-bottom: 3px solid;
float: left;
}
.select img {float: right; margin: 0 0 0 4; width: 24px; height: 24px; cursor: pointer;}
.desc img {float: right; margin: 0 0 0 4; width: 24px; height: 24px; cursor: pointer;}
.desc a {color: black; text-decoration: none; cursor: pointer;}
</style>
<div class='leftmen' style='     width: 270px;     float: left;     clear: both;     position: fixed; '>
<div class='select'>مرحبا&#1611;<img onmouseup='document.getElementById(&apos;div1&apos;).style.display=&apos;block&apos;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdcUAciysWWHRsXpMDKD2o96wDJBsBrzWF5jIKxWcHxDkCyBWm-P2fcOYu_4rvO_UEpL6onS2FfDT6Yfq4XUT53V9zL0aVWzUnG6kzvhmkoJrs5rxromAuc8T_FPCRz7op3I9z_7NdHQ/s24/plus.png'/></div>
<div class='desc' id='div1'>
<img onmouseup='document.getElementById(&apos;div1&apos;).style.display=&apos;none&apos;' src='http://www.picturesnew.com/media/images/x-picture.png'/>
مرحبا&#1611; بكم في مدونتنا <a expr:href='data:blog.homepageUrl'><data:blog.title/></a> &#1548; يمكنكم متابعنا أول بأول عبر صفحتنا ! إضغط على <iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fabuiyad007&amp;width&amp;layout=button&amp;action=like&amp;show_faces=false&amp;share=false&amp;height=35&amp;appId=1473709949507201' style='border:none; overflow:hidden; width: 55; height: 21;'/>
</div></div>

بالطبع في الإضافة خط جديد .. لإضافته بالمدونة إبحث عن الكود :

<b:skin><![CDATA[

ثم أضف بعدها مباشرةً هذا الكود :

@font-face {

font-family: 'DroidNaskh-Bold';

src: url('http://jaser.net23.net/webfont/fonts/DroidNaskh-Bold.eot');

src: url('http://jaser.net23.net/webfont/fonts/DroidNaskh-Bold.eot?') format('embedded-opentype'),

url('http://jaser.net23.net/webfont/fonts/DroidNaskh-Bold.woff') format('woff'),

url('http://jaser.net23.net/webfont/fonts/DroidNaskh-Bold.ttf') format('truetype'); 

}

إذا كانت هناك أي مشاكل بالكود أحب تشاركوني تعليقاتكم في أي وقت سأجيب عليها فوراً .
في النهاية أحب أن أشكركم على حسن قراءتكم لموضوعي هذا على هذه المدونة الجميلة .
ملحوظة : أرجو عدم نقل التدوينة هذه إلا بكتابة اسم المصدر المأخوذ منه .. وشكراً
تحديث: لاحظت مؤخراً أن صورة علامة الـ(x) لم تعد موجود وتم مسحها من على الانترنت فقمت برفعها في استضافتي الخاصة .. يرجى تبديل رابط هذه الصورة القديمة بهذا الرابط الجديد http://ameerup.esy.es/uploads/images/x-logo.png

هل أعجبك الموضوع ؟