الجمعة، 24 أبريل 2015
من الإستحالة أن تجد موقع ويب أو مدونة لا تحتوي على صفحات تابثة أو ما يسمى بـ "static-pages" ، فالدور الذي تقوم به هذه الصفحات مهم جدا و لا يمكن لأي موقع إحترافي الإستغناء عنها، و من أهم الأغراض التي قد نحتاجها لها مثلا:
1- صفحة سياسة الخصوصية "Privacy-Policy" و من خلال هذه الصفحة تبين لزوار و متصفحي و مدونتك مدى حفاظك على بيانتهم الشخصية والأطراف التي تعتمدها في موقعك مثل شركات الإعلانات و غيرها.
2- صفحة إتصل بنا "contact-us" و التي من خلالها يمكن للزوار التواصل معك عبر البريد الإلكتروني كلما تطلب الأمر ذلك.
3- صفحة الفهرس أو خريطة الموقع "index" ou "site map" وفي هذه الأخيرة يمكن للزائر أن يجد قائمة الأقسام و المواضيع التي بالمدونة و يسهل عليه معرفة نوع المحتوى الذي يوفره موقعك أو مدونتك.
هناك عدة إستخدامات أخرى للصفحات الثابتة مثل إضافة بعد الأدوات التي يمكن للزوار إستخدمها مثل الفتوشوب أونلاين أو صفحة خاصة بالقرآن الكريم أو صفحة ركن الأسئلة أو صفحة عن المدونة أو صفحة تعريفية للكاتب و الكثير ...
أما درسنا اليوم سنلقي نظرة سريعة عن كيفية إنشاء هذه الصفحات ، متخذين من صفحة سياسة الخصوصية مثال للشرح. شاهد الفيديو:
الخميس، 23 أبريل 2015
متابعي ورشة مدون الأوفياء ، نستأنف دروسنا في هذه الدورة التي نشرح فيها كل ما يلزم المبتدئين لإكمال تدشين مدونتهم و السير على خطى المدونين الكبار على مستوى العالم الإفتراضي، و في شرح هذا اليوم سوف نتطرق واحد من أهم خصائص المدونة أو الموقع و الذي هو الشعار أو ما يسمى اللوجو logo ، فهذا الإخير يجعل مدونتك مميزة عن أي مدونة أو موقع ، و الزوار أو ما تقع عينه عليه أثناء الدخول إلى مدونتك ، و بالتالي يجب عليك أن تجعل لها شعار ملائم و متناسق بشكل جيد، لدى في هذا الفيديو قمت بشرح طريقتين لتغير الشعار أو ضع شعار جديد لأول مرة في القالب. أترككم مع الشرح وأي إستفسار إتركه في تعليق.
فرجة ممتعة ^_^
الرابط المستعمل لرفع صورة الشعار:
الأربعاء، 22 أبريل 2015
متابعي و رشة مدون الأوفياء، أتمنى أن تكون في أتم الصحة و العافية ، بعدما رأينا طريقة إنشاء مدونة على منصة بلوجر و كيفية الحصول على قالب بلوجر لنرفعه عليها شاهد الدرس من هنا.
قبل أن أبدأ في شرح طريقة التعديل على القالب و غيرها من الأمور التي تنتظرنا لاحقا من أجل إكمال نشأة المدونة ، أحببت أن أقدم لكم وصف و شرح نظري سريع على جميع أدوات المنصة و التي من خلالها سنتمكن من عمل العديد من الأمور. لهذا أحبابي في الله قمت بتصوير هذا الفيديو أتمنى لكم فرجة ممتعة
أتمنى أن تستفيدوا من الشرح أي إستفسار أنا في الخدمة، فقط إترك تعليق و سأكون سعيدا بمساعدة الجميع دمتم بود في أمان الله،
الجمعة، 17 أبريل 2015
مرحبا بك على ورشة مدون ، التي توفر لك كل ما تحتاجه لتكون مدونا ناجحا بإمتياز نستأنف دروسنا في ما يخص التدوين ، درسنا اليوم هو طريقة إنشاء أو مدونة على منصة Blogger ، و رفع قالب خاص بنا عليها ، سبق و ذكرنا أن من الضروري أن تتوفر على حساب جيمال ، إن كنت لا تتوفر عليه فأنصحك بمشاهدة هذا الدرس السابق من هنا
شاهد طريقة إنشاء مدونة بلوجر جديد بالصورة و الصورة ، أتمنى لك فرجة ممتعة ^_^
الرابط المستعمل في الشرح: Blogger
تحميل القالب المستعمل في الشرح: من هنا
أي إستفسار إترك تعليق و سأكون سعيدا بالإجابة عليه، دمتم بود إلى دلرس قادم إنشاء الله.
السبت، 4 أبريل 2015
بعد أن قمنا بدراسة أهمية التدوين و أنسب منصة لمزاولة هذا الأخير، مع أهم الأسس التي يجب مراعاتها للنجاح في المجال الذي ندون ضمنه، يمكنك الإطلاع على جميع المواضيع من خلال قسم التدوين ، و في هذه المشاركة البسيطة سوف نرى أو خطوة قبل إنشاء المدونة و التي هي إنشاء حساب جيميل الذي يوفر لنا العديد من الخدمات و التي من ضمنها البلوجر، كل ما عليك هو التوجه إلى هذا الرابط : gmail ثم ملء الإسثمارة بكل سهولة، يمكنك شاهد الفيديو لتعرف أكثر.
دمتم بود في أمان الله.
السبت، 14 فبراير 2015
مرحبا بكم مجددا، متابعين الكرام كما عودناكم دائما بالجديد والحصري والمفيد على ورشة مدون، التي تهتم بكل ما يخص المدونين على منصة بلوجر، و درس اليوم هو كيفية إضافة آداة مزدوجة في السيدبار و هي على شكل قائمة مقسمة لتحتوي ثلاث نوافذ، في كل نافدة يمكنك وضع إضافة معينة ، وهذه الإضافة جميلة جدا وإحترافية و تهم بالخصوص أصحاب المدونات التي تشكو من قلة المساحات في واجهة المواقع، بحيث عوض وضع ثلات إضافات متفرقة التي ستأخد مساحة كبيرة من المدونة ، تقوم بوضع هذه الأخيرة التي تمكنك من الإنتقال بين الإضافات بسلاسة و خفة.
يمكنك معاينتها في مدونتنا السيدبار على يسارك
الآن طريقة تركيب الإضافة.
- نذهب للوحة التحكم بلوجر ثم القالب نقوم بأخد نسخة إحتياطية للقالب تحسبا لأي خطأ.
- بعدها نقوم بتحرير HTML ثم ننقر وسط الأكواد و نبحث بالإستعانة بالزرين عن (CTRL+F) عن الوسم ]]></b:skin>
- بعد إيجاده ضع الكود التالي فوقه مباشرة.
/* Tab Widget By warch-mo */
.tabbedviewsection {
background: #f8f8f8;
text-transform: uppercase;
float: left;
width: 99%;
}
.tabbed-widget {
list-style: none;
list-style-type: none;
margin: 0 0 10px 0;
padding: 0;
}
.tabbed-widget li {
list-style: none;
list-style-type: none;
padding: 0;
float: right;
border-left: 2px solid #fff;
}
.tabbed-widget li a {
color: #000;
display: block;
padding-right: 14px;
padding-left: 14px;
font-size: 13px;
padding-top: 14px;
padding-bottom: 14px;
text-decoration: none;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.tabbed-widget-content {
}
.tabbedviewsection {
margin-top: 10px;
margin-bottom: 10px;
}
.tags_tab {
text-align: center;
}
.about_tab {
text-align: center;
}
li.laster {
border: 0px;
text-align: center;
}
.blog-mobile-link {
display: none;
}
.tabbed-widget li a {
padding-left: 20px;
padding-right: 20px;
}
/* .tabbed-widget {
height: 51px;
}*/
.tw-authors {
width: 570px;
}
.tabbedviewsection h2 {
display: none;
}
.tabbed-widget li a.tabbed-widget-current {
padding-bottom: 20px;
margin-top: -10px;
background: #f8f8f8;
color: #444;
text-decoration: none;
border-top: 5px solid #24AAE9;
font-size: 14px;
text-transform: capitalize;
}
.tabbed-widget li a {
background: #24AAE9;
}
بعد ذلك نقوم بالبحث عن أحد الأكواد التالية:
<div id='sidebar-wrapper'>أو
<div class='sidebar-wrapper'>
أو
<div class='sidebar'>
أو
<div id='sidebar'>
ملاحظة : قد لا تجد أي أحد هذه الأكواد لأن تصاميم القوالب تختلف و لكن يجب عليك البحث عن معرف السيدبار بقالبك، المهم إن واجهت هذا المشكل إترك تعليق به رابط مدونتك لأساعدك.
بعد أن تجد المعرف الخاص بالسيدبار لديك قم بوضع هذا الكود مباشرة بعده.
<!-- Tab Widget [start] by warch-mo--><div class='tabbedviewsection'><script type='text/javascript'> jQuery(document).ready(function($){ $(".tabbed-widget-content-widget-themater_tabs-1432447472-id").hide(); $("ul.tabbed-widget-widget-themater_tabs-1432447472-id li:first a").addClass("tabbed-widget-current").show(); $(".tabbed-widget-content-widget-themater_tabs-1432447472-id:first").show(); $("ul.tabbed-widget-widget-themater_tabs-1432447472-id li a").click(function() { $("ul.tabbed-widget-widget-themater_tabs-1432447472-id li a").removeClass("tabbed-widget-current a"); $(this).addClass("tabbed-widget-current"); $(".tabbed-widget-content-widget-themater_tabs-1432447472-id").hide(); var activeTab = $(this).attr("href"); $(activeTab).fadeIn(); return false; }); }); </script><ul class='tabbed-widget tabbed-widget-widget-themater_tabs-1432447472-id'> <li class='about_tab'><a href='#widget-themater_tabs-1432447472-id1'>مواضيع شائعة</a></li> <li class='tags_tab'><a href='#widget-themater_tabs-1432447472-id2'>تعليقات الزوار</a></li> <li class='laster'><a href='#widget-themater_tabs-1432447472-id3'>الأرشيف</a></li></ul><!-- Tab Widget 1 --><div class='tabbed-widget-content tabbed-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'><b:section class='sidebar' id='sidebartab1' preferred='yes'> </b:section> </div> <!-- Tab Widget 2 --> <div class='tabbed-widget-content tabbed-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'><b:section class='sidebar' id='sidebartab2' preferred='yes'> </b:section> </div>يمكنك تغير الكلمات باللون الأحمر بما يناسبك
<!-- Tab Widget 3 --><div class='-content tabbed-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'><b:section class='sidebar' id='sidebartab3' preferred='yes'></b:section> </div></div><!-- Tab Widget [endt] -->
أما طريقة إستخدام الإضافة فهي سهلة عند الذهاب لصفحة التخطيط سوف تجدها كما في الصورة
كل خانة يمكنك أن تضع بها أداة مهما كان نوعها، المهم أتمنى أن يعجبكم الدرس و أن تستفيدوا منه أي إستفسار أنا في الخدمة،
دمتم بود في أمان الله.
الأحد، 1 فبراير 2015
متابعي ورشة مدون الأوفياء، أعتذر عن مدة غيابي التي كانت بسبب بعض المشاكل التقنية الخارجة عن إرادتي، المهم كما عودتكم دائما بجديد المواضيع ، لقد ذكرت سابقا في إحدى التدوينات كيفية إنشاء أزرار التحميل والمعاينة و هذا الموضوع هو في نفس السياق إلا أن هذه الأزرار هذه المرة بها أيقونات تدل على غرضها مع أنها أكثر إحترافية و ستزيد من مدى جمالية مدونتك، و لتركيبها ما عليك إلا متابعة الشرح.
- أولا نذهب للوحة التحكم بلوجر ثم القالب.
- نقوم بأخذ نسخة إحطياطية دائما لتفادي أي غلط بالرغم من سهولة الشرح
- بعد ذلك نقوم بالضغط على تحرير html و ننقر وسط الأكواد.
- نبحث عن هذا الوسم ]]></b:skin> مستعينا بالزراين(ctrl+f).
- ثم ضع فوقه هذا الكود مباشرة و قم بحفظ القالب.
#warch {
margin: 20px auto;
text-align: center;
}
#warch br {
display: none;
}
.mo-slide, .mo-slide2 {
position: relative;
display: inline-block;
height: 50px;
width: 200px;
line-height: 50px;
padding: 0;
border-radius: 50px;
background: #fdfdfd;
border: 2px solid #0099cc;
margin: 10px;
transition: .5s;
}
.mo-slide2 {
border: 2px solid #efa666;
}
.mo-slide:hover {
background-color: #0099cc;
}
.mo-slide2:hover {
background-color: #efa666;
}
.mo-slide:hover span.circle, .mo-slide2:hover span.circle2 {
left: 100%;
margin-left: -45px;
background-color: #fdfdfd;
color: #0099cc;
}
.mo-slide2:hover span.circle2 {
color: #efa666;
}
.mo-slide:hover span.title, .mo-slide2:hover span.title2 {
left: 40px;
opacity: 0;
}
.mo-slide:hover span.title-hover, .mo-slide2:hover span.title-hover2 {
opacity: 1;
left: 40px;
}
.mo-slide span.circle, .mo-slide2 span.circle2 {
display: block;
background-color: #0099cc;
color: #fff;
position: absolute;
float: left;
margin: 5px;
line-height: 42px;
height: 40px;
width: 40px;
top: 0;
left: 0;
transition: .5s;
border-radius: 50%;
}
.mo-slide2 span.circle2 {
background-color: #efa666;
}
.mo-slide span.title,
.mo-slide span.title-hover, .mo-slide2 span.title2,
.mo-slide2 span.title-hover2 {
position: absolute;
left: 90px;
text-align: center;
margin: 0 auto;
font-size: 16px;
font-weight: bold;
color: #30abd5;
transition: .5s;
}
.mo-slide2 span.title2,
.mo-slide2 span.title-hover2 {
color: #efa666;
left: 80px;
}
.mo-slide span.title-hover, .mo-slide2 span.title-hover2 {
left: 80px;
opacity: 0;
}
.mo-slide span.title-hover, .mo-slide2 span.title-hover2 {
color: #fff;
}
<link href=' https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.0/css/font-awesome.css' rel='stylesheet' type='text/css'/>الآن طريقة التعامل مع الأزرار في المواضيع.
عند قيامك بكتابة موضوع قم بالنقر على زر "خيارات" و قم بتعديلها كما تلاحظ في الصورة.
أما بالنسبة للأزرار فسوف تضع هذا الكود في المكان الذي يعجبك وذلك في واجهة html الخاصة بالمواضيع.
<div id="warch">
<a href="#" class="mo-slide" target="_blank">
<span class="circle"><i class="fa fa-rocket"></i></span>
<span class="title">معاينة</span>
<span class="title-hover">إنقر هنا</span>
</a>
<a href="#" class="mo-slide2" target="_blank">
<span class="circle2"><i class="fa fa-download"></i></span>
<span class="title2">تحميل</span>
<span class="title-hover2">إنقر هنا</span>
</a>
</div>
قم بتغير علامة # برابط المعاينة و العلامة # برابط التحميل.
ملاحظة : هذا الكود يحتوي على نموذج التحميل و المعاينة أي زرين في نفس الوقت يمكنكم إستعملهما كما تريد.
ملاحظة : هذا الكود يحتوي على نموذج التحميل و المعاينة أي زرين في نفس الوقت يمكنكم إستعملهما كما تريد.
هذا كل ما في موضوع اليوم أتمنى لكم التوفيق في عملكم ، دمتم بود في أمان الله.
الاشتراك في:
الرسائل (Atom)
مميزة
-
نعلم جيدا أن المواقع الإجتماعية هي من أكبر مصادر الزوار ولهذا سنتعرف اليوم على كيفية إضافة أزرار المشاركة الإجتماعية منها الفيس بوك و تو... -
السلام عليكم و رحمة الله و بركاته, حقوق القوالب هو موضوع تدوينتنا اليوم أحبابي في الله , إن كنت من مصممين القوالب أو تقوم بتعريبها و عان... -
بعد أن رأينا في التدوينة السابقة أهم المناطق التي يجب أن نضع فيها الأعلانات للرفع من معدل النقرات،شاهد التدوينة من ((هنا)) سوف نشر... -
السلام عليكم ورحمة الله تعالى وبركاته أصدقائي و أحبائي متابعي ورشة مدون الأوفياء، أولا أحب أن أعتذر منكم بسبب طول غيابي هذا و توقفي عن ط... -
السلام عليكم ورحمة الله و بركاته قالب بلوجر الخاص بمدونة المحترف أخر إصدار أعلم أن الكثير من المدونين يعشقون هذا النوع من القوالب , وهذ... -
أداة إقرأ المزيد أو ما يسمى read more، من الإضافات الضرورية في المدونات أو المواقع مهما كان نوعها، فهي تتحكم في حجم المحتوى الذي يظهر في... -
السلام عليكم ورحمة الله وبركاته رمضان كريم تقبل الله منا و إياكم ,,, اليوم أحبابي في الله أتيتكم بقالب بلوجر إحترافي وجميل جدا أتمنى أن ... -
السلام عليكم ورحمة الله وبركاته في هذه التدوينة أحبابي في الله إخترت أن أضع بين أيديكم قالب بلوجر إحترافي بكل ما تحمل الكلمة من معنى ،... -
السلام عليكم و رحمة الله تعالى وبركاته تعتبر التعليقات خاصية مهمة في المداونات و المواقع عامة، و هي بمثابة الشريان الذي يصل بين المدو... -
السلام عليكم ورحمة الله تعالى و بركاته. أحيانا أثناء تصفحنا للمواضيع في المدونات و المواقع نشعر بالتعب في أعيننا و نحن نحاول قراءة بعض ...
أهم المواضيع
-
نعلم جيدا أن المواقع الإجتماعية هي من أكبر مصادر الزوار ولهذا سنتعرف اليوم على كيفية إضافة أزرار المشاركة الإجتماعية منها الفيس بوك و تو...
-
السلام عليكم و رحمة الله و بركاته, حقوق القوالب هو موضوع تدوينتنا اليوم أحبابي في الله , إن كنت من مصممين القوالب أو تقوم بتعريبها و عان...
-
بعد أن رأينا في التدوينة السابقة أهم المناطق التي يجب أن نضع فيها الأعلانات للرفع من معدل النقرات،شاهد التدوينة من ((هنا)) سوف نشر...
-
السلام عليكم ورحمة الله تعالى وبركاته أصدقائي و أحبائي متابعي ورشة مدون الأوفياء، أولا أحب أن أعتذر منكم بسبب طول غيابي هذا و توقفي عن ط...
-
السلام عليكم ورحمة الله و بركاته قالب بلوجر الخاص بمدونة المحترف أخر إصدار أعلم أن الكثير من المدونين يعشقون هذا النوع من القوالب , وهذ...
-
أداة إقرأ المزيد أو ما يسمى read more، من الإضافات الضرورية في المدونات أو المواقع مهما كان نوعها، فهي تتحكم في حجم المحتوى الذي يظهر في...
-
السلام عليكم ورحمة الله وبركاته رمضان كريم تقبل الله منا و إياكم ,,, اليوم أحبابي في الله أتيتكم بقالب بلوجر إحترافي وجميل جدا أتمنى أن ...
-
السلام عليكم ورحمة الله وبركاته في هذه التدوينة أحبابي في الله إخترت أن أضع بين أيديكم قالب بلوجر إحترافي بكل ما تحمل الكلمة من معنى ،...
-
السلام عليكم و رحمة الله تعالى وبركاته تعتبر التعليقات خاصية مهمة في المداونات و المواقع عامة، و هي بمثابة الشريان الذي يصل بين المدو...
-
السلام عليكم ورحمة الله تعالى و بركاته. أحيانا أثناء تصفحنا للمواضيع في المدونات و المواقع نشعر بالتعب في أعيننا و نحن نحاول قراءة بعض ...