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

إضافة صور أو فيديو لتعليقات بلوجر
مثال حي للأداة

كما نعلم جميعا في تعليقات بلوجر لا يمكننا إضافة فيديو أو صورة، ففي الكثير من الأحيان تصلك إستفسارات عبر نموذج التعليقات وقد يصعب فهمها لأن تفسير المعلق غامض وغالبا إمكانية إضافة صورة أو فيديو يشرح الأمر سيكون بمثابة حل أمثل لمثل هذه العقبات، أن تكون هذه الخاصية غير موجودة في بلوجر لا يعني فقدان الأمل فكما عودناكم على مدونة أبو إياد أنه لا يوجد مستحيل ولكل شئ حل. لذلك سنغير ونظهر ما حجبته بلوجر ;)
هذه الأداة تعتمد على الجافا سكريبت، حيث تقوم بتحويل وسم بسيط يكتبه المعلق إلى كود HTML، ومن أجل بعض التنسيق أضفنا بعد الخصائص بإستخدام الـCSS لنحصل على جمالية وتنسيق أكبر.
من أجل إستخدام الأداة نقوم بإضافة كود الجافا و السي إس إس فوق وسم نهاية جسم المدونة: </body>.


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





كود الجافا سكريبت:

<script>
//<![CDATA[
// video y imagines para blogger - desarrollo: Ayoub Etmaiti
function InsertarImagenVideo(id) {
var IDelemento = document.getElementById(id),
sustituir = IDelemento.innerHTML;
sustituir = sustituir.replace(/\[img\](.[^\]]*)\[\/img\]/ig, "<img class='img-comentarios' src='$1'\/>");
sustituir = sustituir.replace(/\[video\]https:\/\/www\.youtube\.com\/embed\/(.*?)\[\/video\]/ig, "<iframe class='vid-comentarios' src='https://www.youtube.com/embed/$1'><\/iframe>");
sustituir = sustituir.replace(/\[video\](https:\/\/youtu\.be\/|https:\/\/www\.youtube\.com\/watch\?v\=)(.*?)\[\/video\]/ig, "<iframe class='vid-comentarios' src='https://www.youtube.com/embed/$2'><\/iframe>");
sustituir = sustituir.replace(/\[video\](http:\/\/youtu\.be\/|http:\/\/www\.youtube\.com\/watch\?v\=)(.*?)\[\/video\]/ig, "<iframe class='vid-comentarios' src='https://www.youtube.com/embed/$2'><\/iframe>");
sustituir = sustituir.replace(/\[video\](http:\/\/player\.vimeo\.com\/video\/)(.*?)\[\/video\]/ig, "<iframe class='vid-comentarios' src='http://player.vimeo.com/video/$2'><\/iframe>");
document.getElementById(id).innerHTML = sustituir;} InsertarImagenVideo('comment-holder');
//]]>
</script>

كود السي إس إس:

<style>
<!--
#comment-holder .img-comentarios, #comment-holder i[rel="image"] {
max-width: 450px; /* Ancho máximo de las imágenes */
width: auto;
height: auto;
display: block;
border: 5px solid #FFF; /* Borde de las imágenes */
margin: 0 auto;
padding: 0;
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1); /* Sombra de las imágenes */
}
#comment-holder .vid-comentarios {
width: 450px; /* Ancho del video */
height: 253px; /* Alto dle video */
display: block;
margin: 0 auto;
padding: 0;
border: 5px solid #FFF; /* Borde del video */
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1); /* Sombra del video */
}
-->
</style>

وسوم تفعيل الأداة:

 [img]URL IMG[/img]
 [video]URL video[/video]

www.monte-escalier-prix.org www.monte-escalier-prix.org

كتاب نصائح ذهبية في فن التصوير الفوتوغرافي الرقمي

كتاب نصائح ذهبية في فن التصوير الفوتوغرافي الرقمي

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

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

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

الكتاب عبارة عن مجموعة من الأسئلة الأكثر تداولا في مجال التصوير الفوتوغرافي, اخترنا لها أجوبة بسيطة وسهلة وهي تعتمد بالأساس على التجربة والتدريب المستمر. تم تقسيم هذه الأسئلة إلى مجموعة من الأبواب منها نصائح تتعلق بـ: العدسات, تقنيات التصوير, تصوير الأطفال,  التصوير الليلي, إعدادات الكاميرا, تصوير الحيوانات, تصوير البورتريه, تحليل الصور, تصوير المناظر الطبيعية, الصيانة, معدات التصوير وغيرها.

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



يمكنك الحصول على الكتاب مباشرة من متجر أسناد: https://asnadstore.com/products/lhbg/


www.monte-escalier-prix.org www.monte-escalier-prix.org

ألعاب ترفيهية مخصصة لمدونات بلوجر, أختر لعبتك من أجل زائريك


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

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

كما تلاحظون ف الصورة السابقة يوجد العديد من الألعاب يمكنك معاينة ما تريده من خلال الموقع الرسمى لها abowman والضغط على اللعبة المحببة اليكم ونسخ الكود المخصص لها بعد التعديل فيه كما تُحبون من حيث العرض والطول ولون الخلفية وغير ذلك من إمكانيات كل لعبة ثم تقوموا بنسخ الكود بعد التعديل فى أداة JavaScript من داخل تخطيط مدونتكم.

أى سؤال لا تترددوا فى طرحه وعلى قدر الإمكان سنرد عليكم بإذن الله. تحيتى لكم بقضاء وقت ممتع :)

www.monte-escalier-prix.org www.monte-escalier-prix.org

القائمة الأفقية الأكثر تطورا Metro UI لمدونات بلوجر بإصدارها الثانى


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

1- الدخول الى قالب ثم تحرير HTML ونقوم بالبحث (CTRL+F) عن الكود التالى 
]]></b:skin>
2- نضع الكود التالى (الكود الخاص بالـCSS) فوق السابق أو قبله
/*===MBL METRO UI Menu==*/
body {
 font-family:sans-serif;
}
a {
 text-decoration:none;
}
.mblmetromenu {
 width:960px;
 margin:auto;
}
@media screen and (max-width:960px) {
 .mblmetromenu {
 width:100%;
 }
}
/* MblMetroMenu */
.MblMetroMenu {
 position:relative;
}
.om-nav {
 position:absolute;
 width:100%;
 z-index:999;
 display:none;
}
.om-ctrlbar {
 width:100%;
 height:48px;
}
.om-ctrlitems {
 margin:auto;
 padding:0px;
 height:48px;
 display:inline-block;
 text-align:center;
}
.om-ctrlitem {
 height:48px;
 width:48px;
 display:none;
 cursor:pointer;
 float:left;
 opacity:0.5;
 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=50)" !important;
 filter: alpha(opacity=50) !important; /* For IE8 and earlier */ }
.om-ctrlitem:hover {
 opacity:0.8;
 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=80)" !important;
 filter: alpha(opacity=80) !important; /* For IE8 and earlier */ }
.om-activectrlitem {
 opacity:1 !important;
 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)" !important;
 filter: alpha(opacity=100) !important; /* For IE8 and earlier */ }
.om-controlitems {
 width:960px;
 margin:auto;
}
.om-controlitem {
 height:48px;
 cursor:pointer;
}
.om-closenav {
 float:left;
}
.om-movenext {
 float:right;
}
.om-itemholder {
 margin:auto;
 padding:20px 0px;
}
@media screen and (max-width:960px) {
 .om-closenav {
  position:absolute;
  z-index:9999;
  left:0;
  top:0;
 }
 .om-movenext {
  position:absolute;
  z-index:9999;
  right:0;
  top:0;
 }
 .om-controlitems {
  width:100%;
 }
 .om-itemholder {
  width:100%;
 }
 }
.om-centerblock {
 display:inline-block;
}
.om-item {
 display:none;
}
.om-showitem {
 margin:5px;
 float:left;
 display:none;
}
/* END MblMetroMenu */
/* TILE BUTTONS */
/* Standar Buttons */
.tile-bt {
 text-align:center;
 cursor:pointer;
 width:90px;
 height:90px;
}
.tile-bt a {
 display:block;
 padding-top:12px;
 text-decoration: !important;
}
.tile-bt img {
 margin:0 auto 0 auto;
 padding-bottom:5px;
 height:48px;
 width:48px;
 position:relative;
 display:block;
}
.tile-bt span {
 font-size:12px;
 padding-bottom:10px;
 display:block;
}
.tile-bt:active {
 opacity:0.5;
}
/* End Standard Buttons */

/* Large Buttons */
.tile-bt-large {
 width:190px;
 height:90px;
 line-height:90px;
 text-align:center;
 cursor:pointer;
}
.tile-bt-large a {
 display:block;
 text-decoration: !important;
}
.tile-bt-large img {
 vertical-align: middle;
 margin:auto;
 padding:0px;
 position:relative;
 width:48px;
 height:48px;
}
.tile-bt-large span {
 vertical-align: middle;
 display:inline;
}
.tile-bt-large:active {
 opacity:0.5;
}
/* End Large Buttons */
/* Extralarge Buttons */
.tile-bt-extralarge {
 text-align:center;
 cursor:pointer;
 width:190px;
 height:190px;
}
.tile-bt-extralarge a {
 display:block;
 padding-top:52px;
 text-decoration: !important;
}
.tile-bt-extralarge img {
 margin:0 auto 0 auto;
 padding-bottom:22px;
 height:80px;
 width:80px;
 position:relative;
 display:block;
}
.tile-bt-extralarge span {
 font-size:14px;
 padding-bottom:20px;
 display:block;
}
.tile-bt-extralarge:active {
 opacity:0.5;
}
/* End Extralarge Buttons */
/* END TILE BUTTONS */
/* SHADOW LIST */
.shadow-white, .shadow-black, .shadow-blue, .shadow-green, .shadow-red {
 /*display:inline-block;*/
}
.shadow-white:hover {
 box-shadow:0px 0px 6px 3px #fff;
 -webkit-box-shadow:0px 0px 6px 3px #fff;
 -moz-box-shadow:0px 0px 6px 3px #fff;
 -o-box-shadow:0px 0px 6px 3px #fff;
 -ms-box-shadow:0px 0px 6px 3px #fff;
}
.shadow-blue:hover {
 box-shadow:0px 0px 6px 3px #38D1F7;
 -webkit-box-shadow:0px 0px 6px 3px #38D1F7;
 -moz-box-shadow:0px 0px 6px 3px #38D1F7;
 -o-box-shadow:0px 0px 6px 3px #38D1F7;
 -ms-box-shadow:0px 0px 6px 3px #38D1F7;
}
.shadow-green:hover {
 box-shadow:0px 0px 6px 3px #AACA37;
 -webkit-box-shadow:0px 0px 6px 3px #AACA37;
 -moz-box-shadow:0px 0px 6px 3px #AACA37;
 -o-box-shadow:0px 0px 6px 3px #AACA37;
 -ms-box-shadow:0px 0px 6px 3px #AACA37;
}
.shadow-red:hover {
 box-shadow:0px 0px 6px 3px #E81750;
 -webkit-box-shadow:0px 0px 6px 3px #E81750;
 -moz-box-shadow:0px 0px 6px 3px #E81750;
 -o-box-shadow:0px 0px 6px 3px #E81750;
 -ms-box-shadow:0px 0px 6px 3px #E81750;
}
.shadow-black:hover {
 box-shadow:0px 0px 6px 3px #444;
 -webkit-box-shadow:0px 0px 6px 3px #444;
 -moz-box-shadow:0px 0px 6px 3px #444;
 -o-box-shadow:0px 0px 6px 3px #444;
 -ms-box-shadow:0px 0px 6px 3px #444;
}
/* END SHADOW LIST */
/* BACKGROUND LIST */
/* Solid Colors */
.solid-blue { background:#00BBE2; }
.solid-blue-2 { background:#2C84EE; }
.solid-darkblue { background:#044E94; }
.solid-violetred { background:#781766; }
.solid-red { background:#E51400;}
.solid-red-2 { background:#E81750; }
.solid-pink { background:#FF539B; }
.solid-purple { background:#D02090; }
.solid-orange { background:#FB8F02; }
.solid-orange-2 { background:#FF6600; }
.solid-orange-3 { background:#DD5F37; }
.solid-coral { background:#CD5B45; }
.solid-green { background:#67B239; }
.solid-green-2 {background:#96BF01; }
.solid-darkgreen { background:#016C38; }
.solid-olive { background:#999900}
.solid-grass { background:#CDCD00; }
.solid-darkred { background:#5F0000; }
.solid-gold { background:#FEE9AE; }
.solid-yellow { background:#F7D100; }
.solid-black { background:#000; }
.solid-smoke { background:#F5F5F5; }
/* End Solid Colors */
/* MISC */
.clearspace { clear: both; }
.floatleft { float:left; }
.floatright { float:right; }
.none { display: none !important; width:0px !important; }
.light-text {
 color:#fff;
}
.dark-text {
 color:#1e1e1e;
}
.gradient {
 background: -moz-linear-gradient(-45deg,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0.3))); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(-45deg,  rgba(255,255,255,0) 00%,rgba(255,255,255,0.3) 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* IE10+ */
 background: linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* W3C */
}
.margin-5 { margin:5px; }



3- نقوم بالبحث عن content.width ونقوم بتغيير عرض الصفحة لـ 1130 وهذا لنضمن ظهور الاضافة بكامل محتوياتها بشكل سليم واذا لم تفضل تغيير عرض الصفحة لمدونتك يمكنك الاستغناء عن جزء من الإضافة مثلا. كما تحب! - اذا واجهت مشكلة ما ضعها فى تعليقك وسنساعدك إن شاء الله -


4- نقوم بحفظ القالب
5- نذهب الأن الى تخطيط Layout ثم نضيف أداة Java Script تحت هيدر المدونة تماما كما بالصورة التالية ونضع بداخلها الكود التالى - لا تنسى يمكنك بسهولة التعديل عليه من حيث الكلمات مثل الرئيسية أو فيسبوك وغيرها - ويمكنك أيضا تغيير رمز # بالرابط المراد توجيه الزائر اليه.

<!-- mblmetromenu --><div class="mblmetromenu">
<div data-navid="om-nav" class="tile-bt-extralarge solid-violetred shadow-black margin-5 floatright MblMetroMenu"> <a href="http://www.abu-iyad.com/" class="gradient"><img src="http://1.bp.blogspot.com/-1e7sOUI4miE/UMnHdKMffTI/AAAAAAAAJaQ/y3xR-9BNINI/s1600/home.png" alt="" /><span class="light-text">الرئيسية</span></a></div>
<div data-navid="om-nav" class="tile-bt-large solid-coral shadow-red margin-5 floatright MblMetroMenu"><a href="#" class="gradient"><img src="http://3.bp.blogspot.com/-OKlDEjd3DyQ/UMnHyxn_apI/AAAAAAAAJaY/DbBPG79a-xU/s1600/messanger.png" alt="" /><span class="light-text">عن المدونة</span></a></div>     
<div data-navid="om-nav2" class="tile-bt solid-purple shadow-blue margin-5 floatright MblMetroMenu"><a href="#" class="gradient"><img src="http://1.bp.blogspot.com/-ZabrvxcoO_A/UMnH-8h_glI/AAAAAAAAJag/qtGW4c9kOKg/s1600/rss.png" alt="" /><span class="light-text">الخلاصات</span></a></div>     
<div data-navid="om-nav" class="tile-bt-large solid-red shadow-red margin-5 floatright MblMetroMenu"><a href="#" class="gradient"><img src="http://3.bp.blogspot.com/-PXSPYg5B3dI/UMnIKNsGLDI/AAAAAAAAJao/XWlIvLhJTAg/s1600/search.png" alt="" /><span class="light-text">البحث</span></a></div>        
<div data-navid="om-nav2" class="tile-bt solid-darkred shadow-red margin-5 floatright MblMetroMenu"><a href="#" class="gradient"><img src="http://2.bp.blogspot.com/-0XPGQ944VLU/UMnIlODiItI/AAAAAAAAJaw/LNBotNMbPD0/s1600/mail.png" alt="" /><span class="light-text">اتصل بنا</span></a></div>       
<div data-navid="om-nav2" class="tile-bt solid-black shadow-black margin-5 floatright MblMetroMenu"><a href="#" class="gradient"><img src="http://4.bp.blogspot.com/-GckD4Ca5lVA/UMnIplw9GDI/AAAAAAAAJa4/M6OypxXIBhY/s1600/help.png" alt="" /> <span class="light-text">مساعدة</span></a> </div>       
<div data-navid="om-nav2" class="tile-bt solid-orange shadow-black margin-5 floatright MblMetroMenu"><a href="#" class="gradient"><img src="http://1.bp.blogspot.com/-qFPzfaP6wNk/UMnJJPIXmjI/AAAAAAAAJbI/gSDHtW5y8Xw/s1600/youtbe.png" alt="" /><span class="light-text">يوتيوب</span></a></div>       
<div data-navid="om-nav2" class="tile-bt solid-darkblue shadow-blue margin-5 floatright MblMetroMenu"><a href="#" class="gradient"><img src="http://3.bp.blogspot.com/-yejzZVIQT14/UMnI5OiBqRI/AAAAAAAAJbA/hB4j8dQkoUk/s1600/face.png" alt="" /><span class="light-text">فيسبوك</span></a></div>       
<div data-navid="om-nav" class="tile-bt-large solid-blue shadow-blue margin-5 floatright MblMetroMenu"><a href="#" class="gradient"><img src="http://4.bp.blogspot.com/-TuiJy6qhQOg/UMnJam4XwjI/AAAAAAAAJbY/tyLP82SmbV4/s1600/photo.png" alt="" /><span class="light-text">صور</span></a></div>       
<div data-navid="om-nav2" class="tile-bt solid-olive shadow-green margin-5 floatright MblMetroMenu"><a href="#" class="gradient"><img src="http://1.bp.blogspot.com/-sQ2itPD97gQ/UMnJ5mLaNNI/AAAAAAAAJbo/1XoBqKVwnzM/s1600/music.png" alt="" /><span class="light-text">قرآن كريم</span></a> </div>       
<div data-navid="om-nav" class="tile-bt-large solid-blue-2 shadow-blue margin-5 floatright MblMetroMenu"><a href="http://www.abu-iyad.com/2010/01/Team-Work.html" class="gradient"><img src="http://3.bp.blogspot.com/-9xF88_PUrZE/UMnrZV_8rJI/AAAAAAAAJdQ/uoC0sUcGUmQ/s1600/MBL.png" alt="" /><span class="light-text">فريق العمل</span></a></div> <!-- End MblMetroMenu -->  </div><!-- END mblmetromenu -->


6- قم بحفظ الأداة وقم بمعاينة قالبك الأن.
لاحظ: يمكنك التعديل على ألوان القائمة بكل سهولة عن طريق الكود الخاص بالـ CSS. وأى سؤال يمكنك التعليق وسندعمك بالحل إن شاء الله. الى اللقاء.

www.monte-escalier-prix.org www.monte-escalier-prix.org

إضافة تأثير Zoom لصور مدونات بلوجر باستخدام CSS


أهلا بكم زوار مدونة أبواياد , اليوم اقترح علي المهندس محمد جلال أن نطرح الاضافات الخاصة بمنصة بلوجر ببصمة تعليمية , اي اننا سنقوم بشرح آلية عمل الإضافة حتى يتسنى لكم التطوير على هذه الاضافات حسب رغباتكم وانتم على دراية تامة بكيفية عمل كل اضافة على حدة فالامر ليس صعبا كما تعتقدون ...
اليوم سنقوم بطرح مجموعة  من خواص الـ CSS3 وسنطبق عليها تطبيق بسيط خاص بالتاثير على الصور ,سنقوم اولا بطرح الاضافة ثم نقوم بشرحها بالتفصيل وهي عبارة عن تاثير التكبير (Zoom) على الصور يمكنك المعاينة قبل اضافة الكود لقالبك
لاضافة هذه الخاصية لقالبك ما عليك الا التسجيل في بلوجر ثم القالب ثم تحرير HTML ثم نبحث هذا الوسم ]]></b:skin> ونلصق كودCSS التالي فوقه مباشرة
.zoom img{-webkit-transform:scale(0.8);-moz-transform:scale(0.8);-o-transform:scale(0.8);-webkit-transition-duration:0.5s;-moz-transition-duration:0.5s;-o-transition-duration:0.5s;opacity:0.7;margin:0 10px 5px 0}
.zoom img:hover{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);box-shadow:0px 0px 30px gray;-webkit-box-shadow:0px 0px 30px gray;-moz-box-shadow:0px 0px 30px gray;opacity:1}
الان نقوم بحفظ القالب ثم يمكنك استخدام هذه الخاصية داخل اي مشاركة تريدها فقط بوضع الكود التالي في وضع الHTML وتغير URL باي رابط  صورة تريد
<div class="zoom">
<img src="URL" /></div> 
الان ننتقل للجانب التعليمي حيث سنقوم بشرح آلية عمل الكود
طبعا لكتابة أي شي داخل قالبك يجب ان يكتب بلغة HTML وتختلف الاكواد داخل قالبك حسب وظيفة كل كائن(class), وكل كائن لديه مجموعة من الخصائص المنسوبة له لجعل هذا الكائن اكثر جمالية وهذا الخصائص تنسب لهذا الكائن عن طريق الCSS حيث ان كل كائن لديه البلوك (block) الخاص به الذي تكتب داخله صفات هذا الكائن, دعونا نترجم هذا الكلام عن طريق شرح الكود أعلاه.
اولا لدينا الكائن (class) المسمى zoom طبعا كل كائن يكون له وسم بداية ووسم نهاية والclass دائما يكتب داخل الوسم div 
ويكتب الكائن بالصيغة العامة التالية 
<div class="zoom">
ما يوضع داخل هذا البلوك تنسب صفاته تبعا لهذا الكائن
فمثلا لو وضعنا صورة او قطعة هنا تنسب صفاتها لخصائص هذا الكائن
</div> 
  CSS الان سنقوم بإضافة الخصائص لهذا الكائن عن طريق ال
 طبعا ليعلم المتصفح (مترجم الاكواد) أن هذه الخصائص تابعة لهذا الكائن يجب ان نضعها في بلوك بنفس اسم هذا الكائن وهنا الصيغة العامة لآلية كتابة الخصائص لكل كائن على حدة
.zoom img{
 zoom هنا تكتب الخصائص المنسوبة للكائن
}
 بعد المعاينة تلاحظوا أن الصورة تكون خافتة وعندما يمر عليها مؤشر الماوس تظهر بشكل مكبر وتظهر أكثروسنقوم الان بشرح  الخصائص التى أدت أن تظهر الصورة بذلك الوضع 

 CSS3 Transforms

حيث  تتيح هذه الخاصية على الاقل تغير شي من الامور الاتية (شكل العنصر او حجمه او موضعه).
ويتبع لهذه الخاصية مجموعة من الدوال لتحدد ماذا ستفعل بالظبط ,هنا استخدمنا الدالة scale حيث تقوم بتغير حجم العنصر بالزيادة او النقصان وذلك يرجع للبعد السيني (X-axis) و البعد الصادي (Y-axis) المعطى لها  ;(transform:scale(0.8
الان سنشرح الدوال التابعة للخاصيةTransforms طبعا هناك دوال ثنائية الاتجاه (2D) وهذا ما سنتطرق له هنا وهناك دوال ثلاثية الاتجاه(3D) لنفس الخاصية .

The translate() Method

الدالة ()translate وظيفتها تغيير موضع العنصر(مثلا الصورة كما في المثال أعلاه) من موضعه الحالي لموضع آخر اعتمادا على البعد السيني (X-axis) و البعد الصادي (Y-axis) المعطى لها 
(transform: translate(50px,100px



The rotate() Method

الدالة ()rotate تجعل العنصر يدور باتجه عقارب الساعة حسب الزاوية المعطى له ,كما يمكن لهذه الدالة ادارة العنصر عكس اتجاه الساعة اذا كانت قيمة الزاوية سالبة.


The scale() Method

الدالة ()scale هي الدالة المستخدة في التطبيق أعلاه,كما لاحظت ان هذه الدالة تعمل على زيادة حجم العنصر او نقصانه تبعا للقيمة المعطى لها على محور السينات  (X-axis) ومحور الصادات (Y-axis).


The skew() Method

الدالة ()skew تجعل العنصر يلتف بزاوية محددة حسب الزاوية المعطى له مع محور السينات(X-axis) وكذبك الزاوية المعطى له مع محور الصادات(Y-axis).




هذه هي الدوال الاربعة التابعةة للخاصية Transforms يمكنك الان استخدام ما يناسبك في تطبيق جديد مختلف لما ذكر أعلاه.
وقد لاحظت في الكود أعلاه ان هناك بادئة او مقدمة اما الخاصية Transforms مثل (-webkit- ,-o- , -moz) هذه المقدمات تستخدم مع الخصائص المطورة حديثة في الCSS3 وهي كتعريف الدالة لكل متصفح(مترجم الاكواد) عى حدى
                                                 -webkit- بائدة للمتصفح Chrome
                                                 -moz- بائدة للمتصفح Firefox
                                                 -o- بائدة للمتصفح Opera
                                                 -ms-بادئة للمتصصفح Internet Explorer

ايضا استخدمنا الخاصية transition-duration

وهي خاصية لتحديد كم ثانية(S) او ميلي من الثانية (ms) يحتاج العنصر ليكمل ثاتير الانتقال فعند الانتقال من وضعية السكون للعنصر(الصورة) الى وضعية لمس مؤشر الماوس للعنصر كم يحتاج المتصفح من الوقت لتنفيذ الثاتير على العنصر.

اخيرا استخدمت الخاصية CSS3 opacity

وهي خاصية التعتيم او مدى ظهور العنصر حيث انكم لاحظتم ان الصورة في المعاينة اعلاه قد كانت خافتة بعض الشي وعند مرور مؤشر الماوس عليها ظهرت بوضوحها الطبيعي لاننا استخدمنا خاصية  opacity وهي تكون بنسبة مئوية opacity:0.7 .

 هكذا انتهينا من شرح الكود أعلاه أتمنى ان تكونو قد استفدتم ولو بعض الشي فهناك المزيد في انتظاركم فتابعونا وأتمنى ان تطبقو دوال الخاصية Transforms وشاركونا ابدعاتكم يمكنك استبدال الدالة scale بالدوال الاخرى ومشاركتنا تطبيقاتكم كما يمكنك الاستعانة ب jsfiddl عبر الرابط التالي http://jsfiddle.net/RB8de . في آمان الله
المصادر
http://www.w3schools.com/css/css3_2dtransforms.asp
http://www.w3schools.com/cssref/css3_pr_transition-duration.asp
http://www.w3schools.com/cssref/css3_pr_opacity.asp
http://stackoverflow.com/questions/18083056/css-what-are-moz-and-webkit

www.monte-escalier-prix.org www.monte-escalier-prix.org

رسالة مسجلة باللغة العربية للرد على مكالمات نموذج الاتصال الصوتى Usertalk


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

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


وهذه الرسالة المسجلة باللغة العربية قابلة للتحميل من موقع soundcloud.


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

www.monte-escalier-prix.org www.monte-escalier-prix.org

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

أهلا زوار مدونة أبواياد كل عام وأنتم بخير , في بعض الأحيان تريد ان تهنئ زوار مدونتك بمناسبة ما (عيد الفطر,قدوم رمضان...الخ) وقد تستخدم لاقتات او مربعات حوار او اي طريقة أخرى.. لكن اليوم سأشارككم كيفية وضع رسالة مع خلفية جميلة لتهنئة زوار المدونة بقدوم شهر رمضان ومناسبات عديدة أخرى يمكنك التغيير حسب رغبتك وستكون الرسالة كما هو موضح أدنا مرفقا بزر أكمل القراءة للانتقال للتدوينة بعد قراءة التهنئة
رسالة ترحبية تهنئ فيها زوار مدونتك بقدوم اي مناسبة
الان دعونا نبدأ بأضافة هذه الرسالة للقالب 
◄نسجل في بلوجر◄قالب◄تحرير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 حتى لا تؤثر على تحميل المدونة نفسها
الان سنقوم بأضافة الرسالة لتظهر في كل المشاراكات او لتظهر فقط في الصفحة الرئيسية 
◄لتظهر الرسالة في كل المشاركات نبحث عن الوسم التالي  <body> ونضيف الكود التالي تحته(أسفله) مباشرة
<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>
◄لتظهر الرسالة فقط في الصفحة الرئيسية لمدونتك نبحث عن هذا الوسم
<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>
 ... يمكنك تغير الكلام الموجه بالرسالة باي كلام تريد

www.monte-escalier-prix.org www.monte-escalier-prix.org
 

أطعم السلاحف

المتابعون

مدونة أبو إياد

إضافات وأدوات بلوجر وأكواد CSS وقوالب احترافية وطرق نشر المدونات ونصائح للمبتدئين وشروحات ودروس حول انشاء مدونة وتعديل قالبها.

تدعمه Blogger.


[أهلا بكم لا تنسوا متابعة المدونة]

تابعنا على الفيسبوك

تابعنا على تويتر

تابعنا على جوجل بلس

ادعمنا بالضغط على زر +1

سجل بريدك وسيصلك جديد مواضيعنا