Archive for 2015

إنشاء حساب على Gmail وفتح مدونتك على منصة بلوجر

أضف تعليق
هذا هو الدرس الأول العملي في طريقك لتصبح مدون محترف وهو بداية دورة (كيف تبدأ)
في هذا الموضوع سنشرح طريقة فتح حساب على بريد جوجل الإلكتروني Gmail وإنشاء مدونتك الأولى على منصة بلوجر Blogger
لكن قبل أن نبدأ أريد منك شيئين
الأول أن تخلص نيتك لله أن تكون مدونتك شئ قيم يفيد ويقدم للناس ماده محترمه قيمه تفيد ولا تضر ولا تستغلها فيما يغضب الله
الثاني مش فاكره دلوقتي إذا إفتكرته هبقى أقولك عليه
أريد ان أذكر نبذه في البداية عن بريد جوجل Gmail
هذا البريد هو كنز في حد ذاته فهو مفتاح سحري لكثير من المشكلات على الإنترنت وفي دروسنا القادمة سنتعرف على بعض ما يفعله هذا العجيب لكن سريعا جي ميل هو الأكثر امانا ولا عجب فهو برعاية جوجل Google
يمكن لجي ميل ان يعطيك مخزن دائم للصور عن طريق موقع بيكاسا Picasa
أو مخزن للفديو فهو طبعا مفتاحك لعالم يوتيوب Youtube
وطبعا مدونتك على بلوجر والكثير والكثير
وكما يقول المثل اللى أنا ألفته وانا بكتب الموضوع
* من يقول انه يملك بريد إلكتروني ولم يكن لديه جي ميل فهو لم يعرف معنى كلمة بريد إلكتروني

طريقة عمل صفحة "أتصل بنا" في بلوجر بأستخدام أدوات بلوجر

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

من خلال هذا الشرح المبسط سنتعلم افضل طريقة لأستغلال مميزات تلك الأداة، وفي البداية سنجاوب علي سؤال ما هي صفحات بلوجر؟ هي عبارة عن صفحات ثابته تستطيع المدونة الواحدة امتلاك 20 واحدة منها فقط ومن امثلها (أتصل بنا، من نحن، سياسية الخصوصية) وغيرها أذاً كيف نقوم بتجهيز صفحة أتصل بنا؟

في البداية سنقوم بالدخول لمنطقة الأدوات الخاصة بمدونتك، قم بالضغط علي زر "أضافة أداة جديدة" ومن ثم أضغط علي المزيد من الادوات وقم بأضافة اداة نموذج الأتصال، ولست بحاجة لأضافتها اذا كانت مضافة بالفعل لمدونتك.

في الخطوة التالية وبعد التأكد من ظهور نموذج الأتصال في مدونتك قم بالدخول منطقة القالب الخاصة بك ومن ثم اضغط علي تعديل HTML وقم بالبحث عن الكود التالي <head>وقم بأضافة الكود التالي اسفل منه مباشرة 


 <style>
#ContactForm1 {display: none;}
</style>

بعد القيام بتلك العملية ستجد ان نموذج الأتصال قد اختفي من مدونتك الأن قم بالدخول لمنطقة الصفحات في مدونتك وقم بأضافة صفحة جديدة "فارغة" أعطي للصفحة عنوان ما وليكن "أتصل بنا" و في نفس الصفحة قم بالدخول لمنطقة تعديل الاكواد المعروفة ب "HTML" ثم قم بمسح جميع الاكواد بها وقم بلصق الاكواد التالية بها مباشرة 


 <!-- contact us page by bloggeram.com -->
<div class="bloggeram-contact-page">
<p>هنا قم بكتابة رسالة توضحية للزائر</p>
<center>
<div class="contact-us-page">
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
<p>
</p>
<span class="contact-us-text">الاسم</span>
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" autocomplete="off">
<p>
</p>
<span class="contact-us-text">بريد إلكتروني <span style="font-weight: bolder;">*</span></span>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="">
<p>
</p>
<span class="contact-us-text">رسالة <span style="font-weight: bolder;">*</span></span>
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<p>
</p>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="إرسال">
<p>
</p>
<div style="text-align: center; max-width: 222px; width: 100%">
<p class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</p>
<p class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</p>
</div>
</form>
</div>
</div>
</div>
<br />
<p>تأكد من ظهور "تم أرسال رسالتلك"</p>
</center>

</div>


<link href='//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/earlyaccess/droidarabickufi.css' rel='stylesheet' type='text/css'/>

<style>

.bloggeram-contact-page {
direction: rtl;
text-align: center;
}

.contact-us-page {
width:98%; max-width:400px;
}

.contact-us-text {
float: right;
}

.contact-form-button, .contact-form-button-submit, #ContactForm1_contact-form-submit {
font-family: 'Droid Arabic Kufi';
color: #fff;
background: #111;
border-color: #111;
width: 95%;
height: 45px;
font-size: 1.1em;
}


.contact-form-name, .contact-form-email, .contact-form-email-message {
max-width: none !important;
width: 95% !important;
min-height: 40px !important;
font-family: 'Droid Arabic Kufi' !important;
}
.contact-form-email:hover, .contact-form-name:hover, .contact-form-email-message:hover {
box-shadow: none;
}
.contact-form-email:focus, .contact-form-name:focus, .contact-form-email-message:focus {
box-shadow: none;
outline: none;
}



.contact-form-widget {
width: inherit;
max-width: none !important;
padding: 10px 12px 5px 0px;
font-size: .90em;
}

#ContactForm1_contact-form-submit {
font-family: 'Droid Arabic Kufi', Voces;
color: #fff;
background: #111;
border-color: #111;
width: 95%;
height: 45px;
font-size: 1.1em;
}
#ContactForm1_contact-form-submit:hover {
background: #FFA200;
border: #FFA200;
}

</style>

الأن قم بالدخول لصفحتك ستجد انها اصبحت جاهزة للعمل بشكل جيد، يمكنك أيضاً أضافة رسالة توضحية في بداية النموذج، ثم قم بتجربتها ستجدها تعمل بشكل جيد.

ملوحظة: لا تقوم بأزالة الاداة الخاصة بنموذج المشاركة الموجودة في الادوات بدونها لن تعمل الاداة

كيف تقوم بتخصيص شكل أداة التسميات في بلوجر

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

لتقوم بتخصص شكل هذة الأداة تحتاج إلي تخصيص كود css لهذة القيمة Label li لذا قم بالبحث عن هذا الوسم ]]></b:skin> وقم بأضافة الكود التالي فوق منه مباشرة

.Label li {
background: #EE8A1D !important;
border-radius: 3px 3px 3px 3px !important;
float: right !important;
font-size: 17px !important;
list-style: none outside none !important;
margin: 2px !important;
padding: 10px 10px !important;
transition: all 0.3s ease 0s !important;
}
.Label li:hover {
background: #111 !important;
}


كيف تقوم بتخصيص هذا الكود


لتقوم بتخصيص هذا الكود تحتاج لفهم كل جزء منه والعمل الذي يقوم به.

اللون: يمكنك تغير كود اللون EE8A1D باللون الذي تريده فهو يعطي خلفية باللون الأصفر للتسمية اما كود اللون الأخر 111 يعطي اللون الأسود للتسمية عندما يمر بها الماوس

الخط: يتطلب الخط تغير القيمة17px التي تتبع font-size بحجم الخط الذي تريده

اتجاه التسميات: وهذة القيمة التي توجها float اما يمينا او يساراً كما تريد وهي باللغة العربية تحتاج right كما هي موجودة

الأبعاد: ويمكنك من خلاص هذة القيمة padding التحكم في بعد او قرب الكلمة من جوانب الخلفية

الماسافات بين التسمية والاخري: وهي مسؤل عنها margin

زاويا الجوانب الأربعة: ويتحكم فيها border-radius وحيث يمكنك زيادة القيمة لكل زاوية من الزوايا الأربعة

تحميل قالب Bloom المعرب قالب بلوجر احترافي

أضف تعليق
تحميل قالب / استايل بلوجر Bloom المعرب ~ قالب بلوجر احترافي بمعني الكلمة

قالب / استايل Bloom / استايل بلوجر رمادي وأزرق سماوي بخصائص احترافية جدا مناسب للمدونات الصحية والتقنية ... بعمود للإضافات على اليسار وبدون أعمدة فوتر.

لتعديل أو حذف السلايدر :
ابحث في تحرير HTML (بعد تعليم توسيع قوالب عناصر واجهة المستخدم) عن الكود التالي وغير ما يناسبنك :
كود:

<div class='wpn_border'> <div id='featured'> <div id='mygallery'> <div class='imageElement'><h2>عنوان الموضوع الأول</h2><p/> <a class='open' href='http://www.bloggerexp.com/' title='تابع القراءة'/> <img class='full' src='https://lh3.googleuser*******.com/-i-UlU7-tEog/T7S1qFoNKeI/AAAAAAAAAUM/j6D1EBH1Q5U/s586/free-willy.jpg'/> <img class='thumbnail'/></div> <div class='imageElement'><h2>عنوان الموضوع الثاني</h2><p/> <a class='open' href='http://www.bloggerexp.com/' title='تابع القراءة'/> <img class='full' src='https://lh4.googleuser*******.com/-dd5xXQYGSB0/T7S1k5sjHPI/AAAAAAAAATA/tB1JlqXqhoI/s586/earth.jpg'/> <img class='thumbnail'/></div> <div class='imageElement'><h2>عنوان الموضوع الثالث</h2><p/> <a class='open' href='http://www.bloggerexp.com/' title='تابع القراءة'/> <img class='full' src='https://lh3.googleuser*******.com/-S94whHfug0I/T7S1sPaB1UI/AAAAAAAAAUw/tITMpBM_BVM/s586/santas.jpg'/> <img class='thumbnail'/></div> <div class='imageElement'><h2>عنوان الموضوع الرابع</h2><p/> <a class='open' href='http://www.bloggerexp.com/' title='تابع القراءة'/> <img class='full' src='https://lh6.googleuser*******.com/-6Iw3lOh0E34/T7S1qJdwK-I/AAAAAAAAAUQ/jShM1zithA0/s586/island.jpg'/> <img class='thumbnail'/></div> <div class='imageElement'><h2>عنوان الموضوع الخامس</h2><p/> <a class='open' href='http://www.bloggerexp.com/' title='تابع القراءة'/> <img class='full' src='https://lh6.googleuser*******.com/-hwxNl7XSblY/T7S1qA4crmI/AAAAAAAAAUU/I5uGDv-erGA/s586/australia.jpg'/> <img class='thumbnail'/></div> </div></div></div> 

غير كل ما عُلِمَ ب:

الأزرق إلى رابط الموضوع
الأحمر إلى رابط الصورة
الأخضر إلى عنوان الموضوع
 
لتعديل القائمة الرئيسية الأولى :
 
ابحث في تحرير HTML (بعد تعليم توسيع قوالب عناصر واجهة المستخدم) عن الكود التالي وغير ما يناسبنك :
كود:
<ul class='wpn_menu' id='menu'> <li><a href='http://www.bloggerexp.com'>الرئيسية</a></li> <li><a href='http://www.bloggerexp.com'>معهد خبراء بلوجر</a></li> <li><a href='http://www.bloggerexp.com'>بلوجر</a> <ul class='children'> <li><a href='http://www.bloggerexp.com/forumdisplay.php?f=5'>قوالب بلوجر</a></li> <li><a href='http://www.bloggerexp.com/forumdisplay.php?f=7'>تعريب قوالب بلوجر</a></li> <li><a href='http://www.bloggerexp.com/forumdisplay.php?f=10'>إضافات بلوجر</a></li> <li><a href='http://www.bloggerexp.com/forumdisplay.php?f=11'>دروس بلوجر</a></li> </ul> </li> <li><a href='http://www.bloggerexp.com/sendmessage.php'>أعلن على معهد خبراء بلوجر</a></li> </ul> 
 
لتعديل القائمة الرئيسية الثانية :
ابحث في تحرير HTML (بعد تعليم توسيع قوالب عناصر واجهة المستخدم) عن الكود التالي وغير ما يناسبنك :
كود:
<ul class='wpn_submenu' id='submenu'> <li><a href='http://www.bloggerexp.com'>الرئيسية</a></li> <li><a href='http://www.bloggerexp.com'>معهد خبراء بلوجر</a></li> <li><a href='http://www.bloggerexp.com'>بلوجر</a> <ul class='children'> <li><a href='http://www.bloggerexp.com/forumdisplay.php?f=5'>قوالب بلوجر</a></li> <li><a href='http://www.bloggerexp.com/forumdisplay.php?f=7'>تعريب قوالب بلوجر</a></li> <li><a href='http://www.bloggerexp.com/forumdisplay.php?f=10'>إضافات بلوجر</a></li> <li><a href='http://www.bloggerexp.com/forumdisplay.php?f=11'>دروس بلوجر</a></li> </ul> </li> <li><a href='http://www.bloggerexp.com/sendmessage.php'>راسلنا</a></li> </ul> 
 
لإضافة مواضيع في أداة اخترنا لكم :

من عناصر الصفحة (التخطيط) ستجد ثلاث أدوات عناوينها كالتالي (Highlight 1,Highlight 2,Highlight 3) قم بتحرير كل واحدة على حدة بالشكل الآتي :
  1. العنوان : اتركه كما هو
  2. تسمية توضيحية : اكتب عنوان الموضوع
  3. وصل : الصق رابط الموضوع
  4. صورة : يمكنك رفع الصورة من جهازك في الخانة الأولى أو اكتف بلصق رابط صورة الموضوع في الخانة الثانية
باسوورد فك الضغط : www.bloggerexp.com

سكربت مصحف التجويد الملون الفلاشي نسخة HTML

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

فهرس كامل للسور، فهرس كامل للأجزاء، فهرس كامل لمواضيع القرآن الكريم وبعض المحتويات الأخرى الهامة.
.
صورة من المصحف:



 يُشرفني ان اضع بين ايديكم هدية عظيمة, وهي القرآن الكريم الملون الفلاشي

وهي عبارة عن سكربت لعرض القرآن الكريم الملون الفلاشي في موقعك او مدونتك او الفيس بوك او تويتر إلخ.

 لتجربة سكربت القرآن الكريم الملون الفلاشي من الرابط التالي: اضغط هنا
.
طريقة التحميل والتشغيل:
بعد تنزيل الملف المضغوط MUSHAF-ALTAGWEED-COLORED-FLASH, قم بفك الضغط عنه, سينتج مجلد

MUSHAF ALTAGWEED COLORED FLASH, قم برفعه على موقعك وتشغيل الملف index.html ..
للذين لا يوجد لديهم منتدى او مدونة:

يمكن رفع الملفات على موقع DropBox ووضعه في مجلد Public واخذ رابط الملف index.html ووضعه في توقيعك او الفيس بوك او تويتر إلخ.
.

رابط تحميل سكربت القرآن الكريم الملون الفلاشي بحجم 68 MB من الرالط المباشر التالي: اضغط هنا

.
حقوق الطبع والنشر لكل مسلم, ولا تنسوني من دعواتكم يا اخواني.
.
اللهم إن هذا العمل خالصاً لوجهك الكريم * اللهم أرزق من قام بهذا العمل ووالديه أجره وثوابه * آمين *

وصلى الله على سيدنا محمد وعلى آله وصحبه وسلم
 تم بفضل الله وتوفيقه
الاشتراك في: الرسائل (Atom)