الأحد، 8 يوليو 2012

اسس تصميم المواقع الألكترونية


سلسلة التعلم في الفصول الدراسية

أُسُس تصميم المواقع الإلكتروني

هناك العديد من الأدوات البرمجية التي تساعدك على إيجاد مواقع الكترونية تمتاز بالوضوح والفعالية . فإذا كنت ستقوم بتصميم موقع الكتروني لأول مرة , فإنه من المفيد :
  • أن تكتسب تفهماً حول ماهية المواقع الفعالة.
  • أن تقولب مفهومك وهدفك ضمن عملية إجراءات تصميم الموقع .
  • أن تستمع وأنت تصنع موقعك الخاص بك.
هنالك ثلاثة طرق لعمل المواقع الإلكترونية:
  • نظام (Html) : إنه نظام خاص بالنص المجرد الذي يُمَكِنَك من صياغة صفحة الكترونية . وبالإمكان النظر إلى هذا النظام على أنه لغة البرمجة الخاصة بالإنترنت .
  • محرر لغة الـ (Html) : إنه يوفر الوسائل والطرق المختصرة لصياغة وتحرير صفحات الـ ( Html) خاصة بالإنترنت .
  • برنامج (Expression Web/Dreamweaver) وبرنامج (WYSIWYG) تُمكنك هذه البرامج من عمل صفحات خاصة بالإنترنت دون الحاجة إلى برنامج (Html) ويحظى برنامج الـ بميزة التشغيل المباشر على الكومبيوتر المركزي (أي لا حاجة لنقل ملفات مكتملة).
التصميم :
  • حدد جمهورك .
  • قم بتحفيز جمهورك : عاملهم باحترام ووفر فرص للتغذية الراجعة الفعالة.
  • قم بوضع أهداف للموقع تمتاز بالوضوح وقابلية القياس , أو قم بتصميم الأهداف.
  • قم بالإعتراف والتقدير تجاه ردود الأفعال , الجهود , والنجاح , وقم بتجاوز الثغرات كي يرتقي إلى مستوى التوقعات.
المحتوى أو المضمون :
  • قم بتحديد محتوى الموقع الخاص بك بشكل مكثف .
  • يجب أن تكون اللغة بسيطة ومفهومة من قبل جمهور عالمي.
  • سَهِّلْ أمام الجمهور الإطلاع على المفاهيم الهامة .
  • أدخل نصوص المحتوى في صفحات ذات خلفية بيضاء .
  • تعامل مع معلوماتك حسب أولوياتها , كما لو أنك تقوم بوضع خطوط عريضة .
وجه مسار التصفح بأسلوب:
  • بسيط.
  • واضح.
  • يقوم على خرائط للموقع تتألف من طبقات أو مستويا
  • منظم ( التفكير بطريقة الخطوط العريضة ).
الأشكال أو الصور المتداخلة:
إن تطوير الموقع يبدأ بنصه وهيكله . بعد أن يتم تطوير الهيكل الاساسي , يجب تحليل المحتوى من حيث مَنْ الذي سيستفيد من عمل التصاميم التي تقوم على الصور أو النص .
مباديء عامة :
  • قم باختيار ألوان كل من النص والخلفية على أن يكون الفرق كبير بينهما.
  • قم باختيار لوحة ألوان آمنة لاستعمال الزائر. وذلك كي تتسم بالثبات .
  • قم بتوحيد شكل وحجم حروف النص بشكل دائم ومستمر.
  • تجنب إحداث تغييرات على الألوان.
  • تجنب استعمال الحروف المائلة ( تصعب قرءاتها ) وإحداث تغييرات على الألوان , ووضع خط تحت الكلمات ( يمكن الخلط بينها وبين الوصلات Links).
  • تجنب النص المطول أكثر من اللزوم.
  • قم بتجنب استعمال الخلفيات ذات النسق الشبكي , لأن ذلك يصعب القراءة.
  • قم بتوضيح المضمون باستعمال تصاميم وأشكال تتسم بالبساطة , الملاءمة , صغر الحجم , والثبات .

السبت، 7 يوليو 2012

قالب بلوجر إخباري بشكل جميل جدا.؟؟


قالب بلوجر إخباري


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

مميزات القالب:
1- وجود جزء خاص بالمواضيع والاخبار المهمة ، يتم عرض أهم 4 أخبار بشكل متتالي جذاب ، كما هو موجود في المواقع الاخبارية العالمية
2- الأخبار  مقسمة على شكل عمودين ، مع وجود ملخص لكل خبر بصورة مصغرة له ، وعند الضغط عليه ينقله للخبر كاملا
3- الشريط الجانبي : تم وضع المواضيع المشهورة ، التصنيفات ، الأرشيف ، على شكل تبويب ثلاثي ، مما يعطي لمسة جمالية ، ويتجنب ازدحام الادوات.
4- وجود مكان بالإعلى لوضع إعلانات أدسينس مقاس 468*60 ، مما يزيد من فرص الربح إن شاء الله.
5- وجود أزرار للصفحات الاجتماعية كالفيسبوك ، تويتر ، يوتيوب ، وهي مما لا يستغنى عنه في المواقع الإخبارية.


معاينة القالب:
http://cnn-turkish.blogspot.com

تحميل القالب وشرح طريقة التعديل:

اضغط هنا للتحميل
شرح تعديل بعض الأمور في القالب ليناسب حاجتك.

أولا : تعديل مربع المواضيع المهمة:
1- قم بالدخول إلى مدونتك ثم اضغط على >> قالب >> اضغط على زر المسمى "تحرير html" أسفل صورة القالب >> ستظهر لك نافذه بها رسالة تحذيرية اضغط على "متابعة" 
2- ابحث عن السطر التالي (اضغط ctrl+f للبحث السريع):
<!-- صورة الخبر الأول -->
ستجد تحت  تلك العبارة سطرين:
الأول تضع فيه رابط صفحة الخبر
الثاني تضع فيه رابط صورة الخبر (ويفضل أن يكون حجم الصورة 630*300) كما هو موضح بالصورة التالية:
اضغط لتكبيرها
 ثم ابحث عن عبارة :
<!-- وصف الخبر الأول -->
ستجد تحتها عدة أسطر:
الأول تضع فيه عنوان الخبر
الثاني تضع فيه وصف مختصر للخبر كما في الصورة السابقة

وبالطبع كرر هذا الأمر مع الأخبار المهمة الأخرى

<!-- صورة الخبر الأول -->
<a href='http://newsforce.blogger-zoom.com/2012/01/blog-post.html'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiofmqMckIe_CKp_cCVaZmhv91pmbzskKxWuhVZyXFXmqJiF9qsabK1WmThZ12YWaVAGbMHMA64yxmuQ2avN-RAy1jzSYqfBKpyJlFQ74iEos6OCJ2gj-gDifYC_xtv3VKzkgfKANtC-m3Q/s1600/fb2.jpg'/></a>
</div>
<div class='fp-content-wrap'>
<div class='fp-content'>
<h3 class='fp-title'>
<!-- وصف الخبر الأول -->
الفيس بوك يكافئ الهاكر</h3>
<p>قرر موقع فايسبوك تقديم بطاقة إئتمان للهاكرز يكون باستطاعتهم عن طريقها شراء ما يريدون أو حتى سحب المبالغ التي بحاسبها نقدا عن طريق أي مكينة صرف آلى ولكن ما هو المقابل
</p>

ثانيا :تعديل أزرار المواقع الإجتماعية

 قم بالدخول إلى مدونتك ثم اضغط على >> قالب >> اضغط على زر المسمى "تحرير html" أسفل صورة القالب >> ستظهر لك نافذه بها رسالة تحذيرية اضغط على "متابعة"

ابحث عن السطر التالي:
<!-- روابط الصفحات الاجتماعية -->
في أسفل ذلك السطر ستجد أكواد الصفحات الاجتماعية ، قم باستبدال النص العربي الخاص بكل صفحة بالرابط الخاص بك
مثال:
استبدل عبارة "رابط قناتك على اليوتيوب" بـ رابط قناتك مثل : http://www.youtube.com/user/DblClickBlog
وهكذا بالنسبة للفيسبوك وتويتر وجوجل بلس

ثالثا:وضع إعلان أدسينس بالأعلى:

قم بالدخول إلى مدونتك ثم اضغط على >> قالب >> اضغط على زر المسمى "تحرير html" أسفل صورة القالب >> ستظهر لك نافذه بها رسالة تحذيرية اضغط على "متابعة" 

ابحث عن السطور التالية:
<!-- بداية كود الأدسينس -->
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1yqAaVzriEU0lNq0XgrDDOxb5XxOQJskolTd5yQ-mDlhG5o4JgDKPRfCeRHw9Z6hsjoe0gCDeC9PweMt-iVSSq-Z7m62mcfDtEoaqygVW560O9v_RV5i0qdMRQ2l05j5RAhRe26OYNzGD/s1600/adsense.jpg' style='height:60px' width='468px'/>
<!-- نهاية كود الادسينس -->
ثم قم باستبدال الجزء الأحمر بكود الأدسينس الخاص بك (لاحظ أن تختار حجم 468*60)

 رابعا: تعديل شعار المدونة:
قم بتحميل الملف التالي (ملف فوتوشوب psd)
 http://www.mediafire.com/?6e84xjhp12iw1nu
ثم قم بفتحه ببرنامج الفوتوشوب وقم يتغيير الشعار كما تحب
ثم قم بحفظ الصورة بصيغة png
بعد ذلك ادخل على مدونتك >> تصميم  >> عناصر الصفحة >> تحرير رأس الصفحة >> ثم قم بإزالة الصورة ثم  اعادة رفعها واجعلها خلف العنوان والوصف كما في الصورتين التاليتين: 





كيف ترقم صفحات مدونتك ؟ ترقيم الصفحات في مدونة بلوجر page navigation



كيف ترقم صفحات مدونتك ؟ ترقيم الصفحات في مدونة بلوجر page navigation

قراءة للموضوع




بسم الله و الحمد لله و الصلاة و السلام على خير خلق الله نبينا محمد المصطفى الأمين و على آله و صحبه الكرام البررة و من تبعهم بإحسان إلى يوم الدين. و بعد ..

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

أولا : من لوح تحكم مدونتك و تحت تبويب ( تخطيط ) تختار "عناصر الصفحة" ثم تضيف إداة Html/Javascriptجديدة في أي مكان تشاء لأننا سننقلها فيما بعد . الآن أنت أمام نافدة الأداة فقط قم بنسخ الكود الموالي و ألصقه داخلها و لا تجعل لها عنوانا.
مثال : صورة الكود بعد أصافته ( النتيجة )



قم بنسخ الكود التالي :

<style>
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #ccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #ccc;
background-color:#ccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #ccc;
background: #ccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #ccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}

</style>



<script type="text/javascript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';


var pageCount=5;
var displayPageNum=3;
var firstPageWord = 'First';
var endPageWord = 'Last';
var upPageWord ='Previous';
var downPageWord ='Next';



var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '&nbsp;<span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}

if(postNum==1) postNum++;
html += '</div>';

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
</script>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>
<div style="text-align:right;font-size:10px;color:000000;margin-top:15px;display:none;"> <a href="http://www.techieblogger.com/2008/07/page-navigation-hack-for-blogger.htm">Grab this Widget ~ Blogger Accessories</a></div>

بعد ذلك اضغط زر حفظ ثم قم بسحب المستطيل الذي انشأته الى اسفل خانة الرسائل واحفظ الكل كما هو موضح في الصورة التالية :

اضغط الصورة لتكبر


نرجو من الاخوة الزوار التعليق على الموضوع ولو بكلمة ( شكراً )

انشر مدونتك في اقوى محركات البحث ؟؟



انشر مدونتك في اقوى محركات البحث ؟؟

قراءة للموضوع


اضافة الموقع او المدونة في اقوى محركات البحث " جوجل " و " ياهو " و " ام اس ان " 

انشاء مدونات بلوجرblog blogger ,قوالب معربة لمدونات blogger ,اضافات على مدونات بلوجر blog blogger ,اربح المال مع مدونات بلوجرblogger ,كل ما يتعلق بمدونات بلوجر blogger هنا تجدونه في مدونة المحررون العرب .

الإضافة المميزة لمحرك البحث جوجل:
وصلة الإضافة: https://www.google.com/addurl

هذا المحرك ليس بالشئ الهين .. لأنه يستخدم خورازمية معقده وليست بسيطه كبقية محركات البحث .. والفكرة الأساسية فى ظهور النتائج لدى جوجل تتلخص فى وجود "رتبة عالية للصفحة" High PR
والرتبة تظهر فى شريط أدوات جوجل بالشكل
وهى من صفر إلى 10 .. كلما زادت كلما ارتقى ترتيب موقعك .. فكرتها ذكيه .. حيث أنها تعتمد على شعبية صفحتك فى الويب كله! ولزيادة قيمتها .. احصل على أكبر قدر ممكن من الوصلات إلى موقعك .. والوصلات التى تشير إلى موقعك اسمها back links أو inbound links .. نقطه فى غاية الخطورة!
تخيل أن صفحة فى موقع رتبتها 4 .. وكان بالصفحة وصلة إلى صفحة فى موقعك .. توقع أن موقعك سترتفع رتبته قريبا ..
لو صفحة فى موقع رتبتها 8 وأخذت منها وصلة لموقعك فكأنك أخذت 6 وصلات من صفحات ذات رتبة 3 أو رتبة منخفضه!
الخلاصة: كلما حصلت على وصلات أكثر من صفحات ذات رتبة مرتفعه أكثر، كلما ازدادت رتبة صفحتك.
كيف تحسب رتبة صفحة على الويب؟ باستخدام شريط أدوات جوجل أو الأسهل من خلال مواقع عديدة .. على سبيل المثال موقع: http://www.stargeek.com/pr_checker.php ستجد أنه يمكنك معرفة الرتبة لأى صفحة بأى موقع ..

موقع آخر:

وبعد ذلك متى سترتفع الرتبة؟ سترتفع مع أول تحديث لمحرك البحث .. قد يتطلب الأمر شهور أو أسابيع! لا تدرى!
جوجل يتحتاج الكثير والكثير من الصبر!

- وآخر التطورات التى أضافها جوجل كعلامة مميزة أخرى لهم هى خرائط المواقع google sitemaps وتجد الموضوع على الوصله:

https://www.google.com/webmasters/sitemaps

الإضافة المميزة لمحرك البحث يــاهـــــو:

وصلة الإضافة: http://search.yahoo.com/info/submit.html

محرك بحث يأتى بعدد معقول من الزوار ولا يتطلب مجهود كبير فى الوصول إليه .. مجرد أيام قد تصل أسبوع .. فهو مهتم بالفهرسة بسرعة كبيرة (أسرع من جوجل فى الفهرسة).

الإضافة المميزة لمحرك البحث إم إس إن:

وصلة الإضافة: http://search.msn.com/docs/submit.aspx

يقترب كثيرا من الياهو ولكنه أقل فى الأهمية!

إذا كنت مسئول عن موقع (أي webmaster) فعليك أن تراعى التالى
- راقب موقعك جيدا عن طريق برامج الإحصائيات وستجد الكثير منها مجانا مثل awstats و webalizer وتجدهما على الوصلتين :
http://awstats.sourceforge.net/

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

- احصل على inbound links كثيرة .. ولكن كيف؟ أمامك حلول بسيطه مثل عمل التبادل الاعلانى أو الأهم وهو تبادل الوصلات link exchange وهذه طريقة معروفة حيث تحدد جزء مهم من صفحتك

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

- حاول تجديد محتويات موقعك باستمرار للحصول على فهرسة أكبر ووصولك يصبح أعمق فى محركات البحث.

- استخدم تصميم بسيط فى الصفحة بعيدا عن تعقيدات الجافا سكريبت وكثرة الصور والجداول لأن كل هذا يؤدى إلى بطئ تحميل الصفحة! تخيل لو شخص وجد موقعك الأول فى نتائج البحث وتعذب لكى يدخله!! (محرك البحث قد لا يمكنه فهرسته بصورة كاملة أحيانا!).

تعليقاتكم مرحباً بها 

كيف تغير قالب مدونتك ؟ كيفية تغيير قالب مدونات بلوجر .....



كيف تغير قالب مدونتك ؟ كيفية تغيير قالب مدونات بلوجر .....

قراءة للموضوع

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

لوحة التجكم : 

من خلال لوحة التحكم تستطيع تغيير خصائص مدونتك , اضغط على التخطيط كما هو موضح في الصورة التالية
اضغط على الصورة لتكبيرها

صفحة التخطيط



من خلال هذه الصفحة اختر تحرير HTML كما هو مبين في الصورة التالية
اضغط على الصورة لتكبيرها

صفحة تحرير HTML

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

اضغط على الصورة لتكبيرها

مسح الكود السابق

في هذه الخطوة قم بمسح الكود السابق كما هو موضح في الصورة التالية

اضغط على الصورة لتكبيرها

اختيار القالب المناسب



في هذه الخطوة اذهب الى هذه المدونة www.hassan-b.blogspot.com ( مدونة حسان ) ،وقم باختيار القالب الذي تراه يناسب محتوى مدونتك وهي قوالب معربة ومجانية ولكن للأمانة لا تقم بازالة عنوان هذه المدونة من مدونتك وذالك لن يؤثر على مدونتك سلبا أبدا .
عند اختيارك للقالب المناسب اضغط على تحميل وقم بنسخ الكود HTML كما هو موضح في الصورة .


اضغط على الصورة لتكبيرها

تحميل ونسخ الكود HTML

في هذه الخطوة قم بتظليل الكود HTML للقالب الذي اخترته من مدونة www.hassan-b.blogspot.com لكن اثناء عملية التظليل لا تختار تحديد الكل selct all بل قم بالتظليل بالمؤشر .


اضغط على الصورة لتكبيرها

عملية نسخ الكود HTML

خلال هذه الخطوة قم بنسخ الكود الذي قمت بنسخه
اضغط على الصورة لتكبيرها

عملية تأكيد الحفظ وعرض المدونة

في هذه المرحلة قم بتأكيد عملية الحفظ ثم انقر فوق عرض المدونة الإلكترونية كما هو موضح في الصورة التالية


اضغط على الصورة لتكبيرها


كيف تعمل اوتظيف مساحات اعلانية فوق هيدر المدونة ؟ - بنرات اعلانية



كيف تعمل اوتظيف مساحات اعلانية فوق هيدر المدونة ؟ - بنرات اعلانية

قراءة للموضوع

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

اذاً دعونا نبدا على خطوة خطوة - Step by step :

1 - ادخل على حسابك في بلوجر .
2 - من لوحة التحكم انقر من القائمة على ( قالب ) ثم ( تحرير HTML ) ثم متابعة .

3 - كاجراء احتياطي نرجو عمل نسخة احتياطية لقالب المدونة قبل اجراء اي عمل .

4 - قم بوضع علامة صح على توسيع قوالب عناصر صفحة المستخدم .

5 - قم بالبحث عن الكود التالي بواسطة مفتاح ( Ctrl + F ) . طبعا هذا الكود بعد <body> مباشرة .

<div id='outer-wrapper'>
لاحظ الصورة :

اضغط الصورة للتكبير


6 - انسخ الكود التالي وضعه تحته مباشرة .

<div id='topads-wrapper'>
<b:section class='topads' id='topads' preferred='yes'/>
</div>

لاحظ الصورة :

اضافة كود البنرات الاعلانية

7 - قم بالبحث عن الكود التالي :
]]></b:skin>
8 - ثم ضع هذا الكود فوقه مباشرة :

/* Top Ads
----------------------------------------------- */
#topads-wrapper {
margin: 0;
padding: 0;
position: relative;
text-align: center;
width: 100%;
}

#topads {margin: 0; padding: 0;}

#topads .widget {margin: 0; padding: 5px 0;}

ملاحظة : طبعا هذا الكود من نمط  CSS Styling وضع لتنسيق البنرات الاعلانية من ناحية المحاذاة وغيرها،  في حالة تريد تغيير في المحاذاة لسبب ما قم بالتغيير فيه . بينما كود خطوة رقم 6 وضع لانشاء عنصر جديد ( مربع اضافة اداة )  في قائمة التخطيط .

لاحظ الصورة :

اضافة الكود نمرة 7










9 - قم بعمل حفظ للقالب ثم توجه او انقر على تخطيط .

10 - بعد النقر على تخطيط سنشاهد عنصر جديد اي مربع جديد باسم ( اضافة اداة )انشئ فوق الهيدر وتحت Navbar مباشرة .
لاحظ الصورة :



النتيجة النهائية 

















11 - الان لإضافة بنرات اعلانية او اعلانات جوجل ادسينس فوق الهيد قم بالنقر على ( اضافة اداة ) الجديدة التي تم انشاءها الان فوق الهيدر كما في الصورة اعلاه ( ليس السايد بار ) ثم من قائمة الادوات المنبثقة اختر اداة جافا HTML وقم بوضع كود البنر ثم اعمل معاينة للتأكد من عملك ، ثم حفظ .
ملاحظة : بامكانك ان تضع اربعة اكواد في اداة جافا HTML الواحدة او  اكثر حسب تصميم مساحة البنرات لديك، بحيث تكون البنرات الاعلانية على شكل افقي متسلسلة واحد تلو الاخر ( من اليمين الى اليسار ) لاحظ الصورة الاولى كل الاكواد في اداة جافا HTML واحدة . بينما لو اضفت اداة HTML اولا ثم وضعت كود بنر واحد فيها ثم قمت باضافة اداة HTML ثانية واضفت كود بنرثاني سيكون شكل البنرات الاعلانية فوق الهيدر على شكل عمودي ( بنر فوق بنر ) .
لاحظ الصور التالية :




الخلاصة : طبعا في هذا الدرس تعلمت كيف تضيف عنصر جديد من عناصر الصفحة فوق الهيدر وايظا كيفية اضافة مساحات اعلانية ( بنرات اعلانية ) وكذلك اضافة اعلانات جوجل ادسينس ،،،

ملاحــــــظة مهمة : بعض المدونات لا يوجد فيها نفس الكود خطوة رقم 5 بل يوجد بها كود مشابه له او بطريقة اخرى ولكن علشان تعرف مكان وجود كود خطوة رقم 5 او الكون المشابه له قم بالبحث عن هذا الكود  </head>  تلاقيه تحته مباشرة اي بعد البدي لاحظ صورة الكود في خطوة رقم 5  . طبعا لدي مدونة اخرى عندما بحثت لم اجد نفس كود نمرة5 تماماً، فبحثت عن الكود التالي  </head> ثم نظرت تحته فوجدت الكود كالصورة التالية  :













بعدها قمت باضافة الكود خطوة رقم 6 حتى اصبح مثل الصورة التالية :
















آخر حلقات الويندوز

آخر حلقات الحماية من الهاكرز

آخر الحلقات الحصرية

آخر الحلقات عن منتجات جوجل

آخر الحلقات عن الانترنت

آخر الحلقات عن الفيسبوك

إخترنا لك

عن موقع محترفي الحماية

مواضيع علق عليها حديثا

روابط مفيدة