إضافة سلايد شو تلقائي لمدونات بلوجر

أهلا بمتتبعي مدونة مدون بلوجر في درس جديد و مفيد .

من أهم و أكثر الإضافات استعمالا , السلايد شو , حيث يقدم للزائر أو المتابع أخر الأخبار أو المقالات بتصميم جميل و مميز .

ستنطرق الأن إلى واحد من أكثر ال slideshows إستعمالا : سلايد شو مدونة المحترف .

و من مميزاته أنه يتناسب مع أغلبية المواقع بمختلف تصاميمها .

معاينة :

طريقة تركيب السلايد شو : 

1- أولا قم بأخذ نسخة إحتياطية لتفادي أي مشكلة قد تواجهها .

2- توجه إلى لوحة التحكم خاصتك على بلوجر 

3- توجه نحو تعديل القالب 

إبحث عن الكود التالي : (يمكنك البحث عبر الضغط على ctrl+f)

]]></b:skin>

فوقه مباشرة (قبله) , أضف الكود التالي :

#alwansd{ height: 428px; margin: 0 0 0px 0px; padding: 15px 28px 15px 16px; width: 672px; background: #373737; } .alwanw{ position: relative; height:385px; } .alwanw .contentdiv{ visibility: hidden; position: absolute; opacity: 1; } .alwan-ps{ text-align: right; float: left; width: 670px; height: 11px; margin-left:-43px; } .alwan-ps .toc{ font-size: 0px; width: 102px; height: 11px; float: right; background: #5b5b5b; margin-left: 1px; } .alwan-ps a.selected{ background:#dfdfdf; } .alwan-ps .prev, .alwan-ps .next {display:none; } .alwanip{ width: 618px; padding: 10px !important; bottom: 0; float: left !important; position: absolute; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGCRb_RKnAfr7VlUtqFyTZqkOa-CKAUBdltHIlDT2uefwELM-gd3neiDywSEjyYN7gh8xhhzIn_KfweQ2bms7zogJyaadnkPAxJNo9Sc1XlIFgkYG4Z62aq6cCPaNKmUjHmYeyTgjQ0Gk/s1600/backslide.png); } .alwanip a{ color:#dcdcdc; font: 12px droidkufi-bold; margin:0; padding:0; line-height: 19px; } .alwanip h6{margin: 0;} .alwanip h6 a:hover {color:#c2df00;} .alwanip .alwand{font:12px arial; margin:4px 0; color:#a5a5a5; } .alwanip p{font-size: 13px; margin: 0; color: #a5a5a5; line-height: 23px; } .alwansf a img{float: right !important; } .alwansf {float: right !important; width:680px!important;} .column-center-outer { width: 680px; }

ابحث من جديد , عن :

</head>

قبله مباشرة أضف الكود التالي :
(غير كلمة "كل" بإسم القسم الذي تريده أن يظهر في السلايد شو)

<script> /* Script from:http://computer-for-security.blogspot.com */ imgr = new Array(); imgr[0] = "http://lh3.ggpht.com/_kViOplhgIHI/TKxBIScZTiI/AAAAAAAAAWE/PM7AQ1lf6ME/noimages.jpg"; showRandomImg = true; aBold = true; summaryPost = 150; numposts1 = 6; label1 = "كل"; function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s} function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts1;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split("")[0];break}} if ("content" in entry) { var postcontent = entry.content.$t;} else if ("summary" in entry) { var postcontent = entry.summary.$t;} else var postcontent = ""; postdate = entry.published.$t; if(j>imgr.length-1) j=0; img[i] = imgr[j]; s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5); if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d; var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break; }} var daystr = day+ ' ' + m + ' ' + y ; var trtd = '<div class="contentdiv"><div class="alwansf"><a href="'+posturl+'"><img width="617" height="385" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"></div></div><div class="alwanip"><h6><a href="'+posturl+'">'+posttitle+'</a></h6><div class="alwand" >'+daystr+'</div><p>' +removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>'; document.write(trtd); j++; }} </script>

إبحث الأن عن :

</body>

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

<script src='http://albaadani.googlecode.com/files/contentslider.js'></script> <script> featuredcontentslider.init({ id: "slider1", //id of main slider DIV contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"] toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc] nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide. enablefade: [true, 0.5], //[true/false, fadedegree] autorotate: [true, 6000], //[true/false, pausetime] onChange: function(previndex, curindex){ //event handler fired whenever script changes slide //previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc) //curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc) } }) </script>

أخر خطوة : إبحث عن :

<div id='main-wrapper'>

(ربما لا تجده , يمكنك وضع رابط مدونتك في تعليق و مشكلتك و سيتم الرد عليك)
(ضع تعليقا ضمن تعاليق بلوجر و ليس تعليقات الفيسبوك حتى يصلني إشعار بذلك و أجيب عليك في أقرب وقت)
بعده / أسفله مباشرة , أضف هذا الكود

<b:if cond='data:blog.url == data:blog.homepageUrl'><div id='alwansd'><div class='alwanw' id='slider1'><script>document.write("<script src=\"/feeds/posts/default/-/"+label1+"?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>"); </script></div><div class='alwan-ps' id='paginate-slider1'></div></div></b:if>

قم بحفظ القالب و يمكنك ملاحظة السلايد شو في مدونتك ! :)

إعلان عن سلسلة : لقاء مع لغة برمجة !

البرمجة تغزو عالمنا اليوم و تديره بأتم معنى الكلمة .

أنشطتنا اليومية صار من غير الممكن فيها أن تتخلى عن البرمجة .

هل تسائلت يوما عن أهمية البرمجة ؟

لن أدعك تبحث كثيرا , فقط أنظر حولك , البرامج التي تستعملها يوميا , المواقع التي تتصفحها بإستمرار , التطبيقات التي تساعدك و لا يمكنك الإستغناء عنها , و الألعاب التي تقضي فيها الساعات الطوال .

تخيل نفسك بدون هذه الميزات , و ستعرف حينها أهمية البرمجة .

سلسة "لقاء مع لغة برمجة" هي ببساطة مجموعة من المقالات التي نتطرق من خلالها كل مرة على لغة برمجة معينة , نحدد تاريخها ,  إستعمالاتها و كيفية تعلمها .

مع كل لغة برمجة نتحدث عنها ستكون في نهاية المقالة مصادر رائعة لتعلمها  بأكثر من لغة , و أكثر من شكل (شروحات مصورة , كتب ..).

إن كانت هناك مجموعة من اللغات التي تود تعلمها و اكتشافها , ليس عليك إلا ترك تعليق بإسم اللغة فقط .

أمل أن تكون الفكرة نالت إعجابكم , و تساعد المبرمجين العرب على الدخول أكثر في هذا العالم الرائع .

يمكنك تحفيزي عبر مشاركة التدوينة مع أصدقائقك عبر مواقع التواصل الإجتماعي أو ترك تعليق مشجع ^_^ ! شكرا !

المحددات (selectors) , كما لم تعرفها من قبل ! - الجزأ الأول

تعتبر المحددات أو ما تعرف بال selectors جزء لا يمكن التخلي عنه عند تصميم موقعنا بال css و جيكويري و غيرها .

و بما أننا أحيانا مطمح للتطوير و ننسى أساسيات مهمة جدا , نجد أن عددا كبيرا جدا من مصممي الويب لا يستعملون إلّا نوعلين من المحددات : "class." للكلاس , "id#" للـ ID !

هذه التدوينة ستساعدك حتما و تفيدك في تصميم مواقعك و تطويرها .

سنتعرف معا عن ماهيّة المحددات .

أنواع ال selectors , و طريقة إستعمالهم !

ماهي المحددات selectors ؟

المحددات تستعمل لإدراج بعض التعديلات على عنصر (element) معين دون غيره , أو مجموعة من العناصر في صفحة ويب معينة .

تختلف أنواع المحددات و تتعدد , لذا سنتعرض معا لمجموعة من المجددات مع تفسيرها و أمثلة لها .

1- محدد * :

غني عن التعريف , يستعمله غالبية مصممي المواقع , حيث يقوم بتحديد كل العناصر الموجودة في الصفحة و إضافة بعض التأثيرات أو التغييرات فيه .

مثال :

*{
margin:0px;
padding:0px;
font-family:tahoma;
font-size:15px;
background:red;
}

في هذا الكود قمنا بإختيار كل عناصر الصفحة , إدارج margin:0px; و padding:0px; و إختيار الخط و حجمه و إضافة خلفية حمراء له ..

2- محدد + :

ربما تكون هذه أول مرة تسمع فيها عن هذا المحدد , وظيفة هذا الأخير المحدد المجاور (adjacent) ,
فإن قلت :

div + p

 فكأنك قلت له حدد لي العنصر p التابع للعنصر div مباشرة .

مهم جدا : 
هذا لا يعني أن p موجود داخل العنصر div , لا  !!
هذا يعني أن العنصر div بعد إغلاقه , إذا كان هناك وسم p , فأضف للعنصر p ذلك مجموعة من التعديلات .
ممتاز !

مثال :

div + p{

background:red;

}

في هذا الكود قمنا بإختيار العنصر p الذي يأتي مباشرة بعد العنصر div , و أضفنا له خلفية حمراء .

2- محدد < :

يشبه إلى خد كبير إلى محدد div p , لكن الإختلاف بينهما أن div p يختار كل العناصر p الموجودة في العنصر div مهمى كان المستوى , في حين أن بالمحدد < لا ينظر إلّا إلى المستوى الأول .

div > p{
background:red;
}

هنا قمنا يتحديد كل عنصر p حيث يكون "إبنا للعنصر الأب" و هو div .

3 - ["a[href="link

هنا كأنك طلبت كل عنصر a ذو  attribut href بالرابط link .
و إضافة بعض التعديلات عليه .

مثال :

a[href="http://modawin-blogger.blogspot.com"]{
background:red;
}

هذا ليس إلا جزء بسيطا جدا من المحددات في ال css , نتعرف معا إلى أنواع أخرى منها في جزء ثاني قريبا جدا .

تعليقك المشجع , و مشاركة التدوينة مع أصدقائك تشجعني على العمل و النشر و الإفادة .. شكرا ! ^^

عمل بنر إعلاني متحرك/ثابت إحترافي لموقعك أو مدونتك في دقائق و مجانا (لا تحتاج خبرة !)

هل تود الحصول على بنر إعلاني إحترافي متحرك أو ثابت حسب رغبتك دون دقع سنت واحد , أو أي خبرة في التصميم ؟

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

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

1- موقع bannerfans

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

و من ثم يمكنك تحميل البنر أو أخذ الرابط المباشر له لإستخدامه.

(يتوفر على قسم قوالب للبنرات لم يتم إطلاقه بعد إلى تاريخ كتابة التدوينة)

2- موقع fotor

موقع غني عن التعريف للتعديل عن الصور و إضافات تأثيرات جميلة لها .

به أيضا قسم مخصص للبنرات . بعد الدخول له , إختر الحجم الذي تريده عبر النقر عليه .

ستظهر لك قائمة كبيرة من الأمثلة و القوالب الجاهزة التي يمكنك التعديل عليها ببضع نقرات .

ستستفيد منه حتما !

3- موقع canva

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

4- موقع flashvortex

إن كانت الإعلانات الثابثة لا تمثل حلا ناجحا لك , يمكنك الإلتجاء إلى البنرات الإعلاناية المتحركة عبر هذا الموقع الرائع .

يتوفر في الموقع أكثر من مثال عن البنرات و بتأثيرات جميلة و خفيفة .

و يكون بذلك حصلت على banner رائع , مجانا , و دون خبرة ! مبروك !!

في الختام , أدعوك أخي الكريم إلى نشر المقالة على حساباتك على مواقع التواصل الإجتماعي , فتعليقك المشجع و مساعدتك البسيطة تعني لي الكثير ! :)

ماهو التصميم المادي (material design) و الفرق بينه و بين التصميم المسطح (flat design)

بالنسبة لمستخدم عادي , أو شخص غير مهتم بالتصميم و أنواعه , فلا يوجد فرق بين التصميم المادي (material design) و الذي سنتعرف عليه في هذه التدوينة و سنكتشف مميزاته و بين التصميم المسطح  "الفلات" (flat design) و الذي تم التطرق إليه في تدوينة سابقة .
يستحق الذكر أن كلا الطرفين يميلان إلى البساطة و الخفة .

حيث أن نقاط الإختلاف بينها طفيفة جدا لدرجة أنه يصعب للبعض التفريق بينهما .

لكن هل تسائلت لم أغلب التطبيقات اليوم و بعض المواقع (أمثلة : تطبيقات :يوتيوب , جيميل , دراف , كروم.. وغيرها من تطبيقات جوجل)  تستخدم التصميم المادي ؟

دعنا نتعرف أولا على Material design ..

فماهو التصميم المادي ؟

هي مجموعة من القواعد في التصميم تم تقديمها من طرف جوجل تنفّذ على واجهة المستخدم الرسومة و التي يعبر عنها بـ "GUI"
(Graphical User Interface) للبرامج و التطبيقات .
و قد قدمت شركة "جوجل" هذا النمط من التصاميم خلال مؤتمر Google I/O في 25 يونيو (جوان) 2014 .

الفرق بين التصميم المسطح و التصميم المادي ؟ (Flat & Material) ؟

من خلال إستجوابات للبعض من كبار المصممين , يمكن أن نجد أن الفرق يكمن في :

1- التصميم المسطح مجرد تماما من البعد الثالث في حين أن التصميم المادي يأخذ هذا البعد بعين الإعتبار .

2- إختلافات بسيطة في حدة الألوان .

3- التصميم المادي عبارة عن تطوير للتصميم المسطح عبر ادراج بعض التفاصيل فيه .

4- التصاميم المادية تقلد الواقع أكثر من التصميم المسطح .

و هنا بعض الصور التي يمكن أن تقربك أكثر من الـ material design

تعليقك المشجع و مشاركتك التدوينة على مواقع التواصل الإجتماعي تدفعني للعمل أكثر فأكثر :) شكرا

ماهو البوتستراب؟ و لماذا عليك إستخدامه كمصمم و مطور مواقع؟ كيف أتعلمه؟

أخي مصمم أو مطور المواقع ..

هل فكرت يوما في اختزال ساعات من عملك في غضون دقائق ؟

هل تريد تنفيذ فكرة قد تراها معقدة , بأسرع وقت ؟

هل تطمح إلى برمجة و تصميم موقع الكتروني متجاوب مع جميع الأجهزة بكل سهول و بساطة ؟

أنت في المكان الصحيح ..

ماهو البوتستراب ؟

البوتستراب أو "bootstrap" أصبح حتما أشهر إطارات العمل للواجهات الأمامية في الويب "frontend framework" منذ إطلاقه سنة 2011 من قبل تويتر .

و بفضل التطورات و التحسينات التي شهدها , أثبت البوتستراب أن أي مصمم مواقع , يمكنه إنشاء موقعه التجاوبي  بتصميم جذاب حتى لو كان لا يجيد إلا القليل من الـ html و الـ css .

بإستعمالك إطار bootstrap , ستوفر وقتك و جهدك و تضمن نتيجة فعالة .

الموقع الرسمي للبوتستراب .

لماذا عليك إستخدامه كمصمم و مطور مواقع

و من بين الأسباب التي تجعلك تتعلم البوتستراب و تستعمله في مشاريعك :

- التجاوب مع الأجهزة اللوحية و الهواتف الذكية

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

- التوافق مع المتصفحات

البوتستراب متوافق ليس فقط مع المتصفحات الحديثة , بل أيضا يشكل حلا لمستخدمي "interner explorer 8" .

تابع إرشادات البوتستراب و تقيد بها ليكون موقعك متوافقا مع كل المتصفحات .

- مفتوح المصدر

بوتستراب مشروع مفتوح المصدر Open Source .. تم إصدارها تحت رخصة أم أي تي "MIT" .و هو مستضاف على github .

و هذه أسباب تجعل من البوتستراب أداة قد لا يمكن الإستغناء عنها عند عدد هام من مصممي المواقع .

دروس و دورات تعلم بوتستراب bootstrap

الأن أنت تتسائل كيف تتعلم البوتستراب ؟
ممتاز ..

1- هنا دورة بالفيديو , صوتا و صورة من موقع advphp , يتطرق إلى أهم الدروس التي قد تحتاج اليها في تصميم موقع متجاوب و مميز
من هنا 

2- إن كنت من أصحاب الصبيب الضعيف من الانترنت و تحميل الفيديو يأخذ الكثير من وقتك , فلم أنساك أيضا ! :)
دورة كاملة مكتوبة بالانجليزية عن ال bootstrap من موقع w3schools الغني عن التعريف .
من هنا 

3- تريد ان تكون الدورة بالعربية و الدروس الانجليزية تربكك و لا تجعلك تتعلم بسهولة ؟
لا يوجد إشكال , كتاب يشرح مواضيعا ستحتاجها في موقعك باللغة العربية .
من هنا

الموضوع متعوب عليه , تعليقك المشجع و مشاركة التدوينة مع أصدقائك على مواقع التواصل الإجتماعي تحفزني نحو النشر أكثر و الإفادة :)

إضافة صندوق الدردشة أو شات إلى موقعك أو مدونتك في بلوجر

السلام عليكم متابعي مدونة مدون بلوجر في شرح جديد و درس بسيط و مفيد لأصحاب المدونات .

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

من المميزات الرائعة و التي لا يمكنني المرور دون ذكرها , أنّ  :

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

- الحوار مع زوار الموقع فوري و لا يتطلب تحديث الصفحة

- هناك أكثر من تصميم و شكل للإضافة و يمكنك إختيار الألوان التي تريدها و تعديلها متى شئت 

- إظهار عدد المتواجدين في الشات 

إنشاء صندوق دردشة لمدونتك : 

أولا توجه نحو موقع chatango .
ستظهر لك 3 أمثلة لصناديق الشات : Box / Ticker / Tab .
اختر الشكل الذي تفضل ظهوره في مدونتك عبر الضغط عليه .
لتدخل إلى إعدادات الصندوق و هذه صورة تفسر لك كلّ التعديلات التي يمكنك أن تقوم بها :

و من ثم اضغط على Create Group في الأعلى .
ليقوم مباشرة بتوليد كود الإضافة .

قم بنسخ هذا الكود لأنك ستستحقه .

تركيب صندوق الدردشة إلى بلوجر :

الدخول للوحة التحكم في بلوجر

الدخول إلى التخطيط و إختيار إضافة HTML/JAVASCRIPT

إضافة الكود الذي قمت بنسخه

حفظ

مبروك !! الأن أن تشاهد صندوق الدردشة في مدونتك  ^_^ .
تعليقك البسيط و مشاركتك للتدونية على مواقع التواصل الإجتماعي تحفزني للنشر و الإفادة ! :)