رسالة ترحيبية للتهنئة بمناسبة شهر رمضان الكريم

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

معاينة

الان دعونا نبدأ بأضافة هذه الرسالة للقالب 

◄نسجل في بلوجر      
◄قالب ◄تحريرHTML
◄البحث(CTRL+F)  
عن الوسم التالي ]]></b:skin> نضيف الكود التالي فوقه مباشرة

#welcomebox {position:fixed;top:5%;left:50%;width:70%;margin-left:-35%;z-index:1000000;text-align:center;}
#welcomebox p{color:#fff;font-size:150%;line-height:1.6em;margin:-5px 0 50px;}
.welcomeclose {background:#bbb;color:#111;border-radius:3px;padding:4px 10px;text-align:center;margin:0 auto;cursor:pointer;display:inline;}
.welcomeclose:hover {background-color:#aaa}
#welcomeoverlay {position:fixed !important;position:absolute; z-index:999999;top:0px;right:0px;bottom:0px;left:0px;background:#005629 url(http://1.bp.blogspot.com/-19vOQibfxVQ/U6f5ZZfFtdI/AAAAAAAAdIA/-3kB-n9pUkA/s1600/Wallpaper.jpg) no-repeat top center;}

ملاحظة /يمكنك تغير الخلفية باي خلفية تريد لكن احرص على ان تكون الابعاد كبيرة ولكن لا يتجاوز حجمها ال100KB حتى لا تؤثر على تحميل المدونة نفسها

◄الان سنقوم بأضافة الرسالة لتظهر في الصفحة الرئيسية 

  ◄لتظهر الرسالة في الصفحة الرئيسية  نبحث عن الكود التالي

<b:if cond='data:blog.url == data:blog.homepageUrl'> 

ونضيف  الكود التالي تحته(أسفله) مباشرة

<div id='welcomeoverlay'/>
<div id='welcomebox'>
    <p>&#8220;أهلا رمضان&#8221;<br/>
     نحن في ادارة المدونة نبارك لكم الشهر الفضيل<br/>
&quot;نسال الله ان يتقبل صيامكم وعبادتكم ,<br/>
اللهم لا تحرمنا ان نكون من عتقائك من النار في هذا الشهر الفضيل ..آمين.&quot;</p>
    <div class='welcomeclose' onclick='document.getElementById(&quot;welcomebox&quot;).style.display=&quot;none&quot;;welcomeoverlay.style.display=&quot;none&quot;;'>أكمل القراءة &#8594;</div>
  </div>

 ... يمكنك تغير الكلام الموجه بالرسالة باي كلام تريد

من فضلك اضغظ لايك لمشاهدة لينك التحميل