‏إظهار الرسائل ذات التسميات jQuery. إظهار كافة الرسائل

بسم الله الرحمن الرحيم

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

لذا فالحل ستجده في هذا الموضوع و هو متمثل في سكريت JQuery يسمح لك بأن تحيط الفيديو بظا أسود داكن لتحجب باقي محتوى الموقع و تحصل بذالك على مشاهدة شبيه بالسنما :-) يمكنك مشاهدة مثال بالأسفل و ذالك بالضغط على كلمة “إطفاء الأنوار” .

إطفاء النور

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

1- توجه لتحرير قالب المدونة و ابحث عن الوسم </head> ثم ضع فوقه الكود التالي:

     

   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/> <br /><script type='text/javascript'> <br />//<![CDATA[ <br />$(document).ready(function(){ <br />$("#oscuridad").css("height", $(document).height()).hide(); <br />$(".lightSwitcher").click(function(){ <br />$("#oscuridad").toggle(); <br />if ($("#oscuridad").is(":hidden")) <br />$(this).html("إطفاء النور").removeClass("turnedOff"); <br />else <br />$(this).html("تشغيل النور;).addClass("turnedOff"); <br />}); <br />}); <br />//]]> <br /></script>

2- ثم بعد ذالك إبحث عن الوسم ]]></b:skin> و أضف قبله الكود التالي:

       

   /* turn off lights <br />----------------------------------------------- */ <br />#videoLuces { <br />position:relative; <br />z-index:102; <br />} <br />#apagador { <br />max-width:640px; <br />text-align:left; <br />position:relative; <br />height:25px; <br />display:block; <br />margin: 25px 0 0 60px; <br />} <br />.lightSwitcher { <br />position:absolute; <br />z-index:101; <br />background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH7VqyUzb7I8xFhuEiRd7ER20xUQRTNFBKuyhxbYSTIE8ABdb4Y7MqXMLMBOYGSIii1jWIeZToCCRtjTHDKpHR_ZltNnAsUgXb3QakPMNTfQAEymyQrAcBU0Ey59uLk_Kg_ZyaL9SlY7c/s16/luces-on.png); <br />background-repeat:no-repeat; <br />background-position:left; <br />padding: 0 0 0 20px; <br />outline:none; <br />text-decoration:none; <br />} <br />.lightSwitcher:hover {text-decoration:underline;} <br />.turnedOff { <br />color:#ffff00 !important; <br />background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwDtaoqnnkoW7rsZwNA9Ymccih_vhohPnAPV2D6DUbub5Ev8ptfjv6RoMI53eKm8rlr5rzKnqgFfclitVA3djP6FVqJUqISB3esT8MHpQmR_zGYI4NlyYgvtO4glrcBDgVgPiOuVxmJHo/s16/luces-off.png); <br />} <br />#oscuridad { <br />background:#000; <br />opacity:0.9; <br />filter:alpha(opacity=90); <br />position:absolute; <br />left:0; <br />top:0; <br />width:100%; <br />z-index:100; }

3- و أخيرا ابحث عن الوسك </body> و أضف قبله الكود التالي:

       

  <div id='oscuridad'/>

4- الأن نأتي للخطوة الأخيرة و هي إضافة الفيديو و أعتقد أن الجميع يعرفون الطريقة. الأن بعد أن تضيف الفيديو في موضوع جديد نتجه لتبويب تحرير HTML و نضع الكود التالي بحيث يكون الفيديو بينه.

       

  <center> <div id="apagador"><a class="lightSwitcher" href="javascript:void(0);">إطفاء النور;/a></div> <div id="videoLuces"> ...سيكون الفيديو في هذا المكان... </div> </center>

بهذا نكون قد انتهينا من هذه الإضافة الجميلة كما اتمنى أن تروق لك.

إن أعجبك الموضوع فأرجوا ألا تبخل علينا ب 5 ثوان من وقتك و تقوم بنشر الموضوع بين أصدقائك

تابع الموضوع »

بسم الله الرحمن الرحيم

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

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

كيف تعمل الإضافة

هذه الإضافة تظهر لمرة واحدة عندما يقوم شخص ما بزيارة مدونك لأنها تقوم بتخزين IP الزائر في ال Cookies الخاص بالمتصفح. و بهذا فلن تزعج زوارك، تخيل أن تظهر لك هذه النافدة المنبثقة في كل صفحة تقوم بزيارتها في المدونة ستكون مزعجة أليس كذالك. لكن هناك خاصية تتحكم في ظهور الإضافة ففي الإضافة هنا ستعاود الظهور بعد مرور 30 يوم من أول زيارة و يمكن التحكمفي هذه القيمة حسب رغبتك. سأقوم بشرحها في الأسفل.

طريقة إضافة صندوق الفيس بوك

1- إدخل للوحة تحكم المدونة / تصميم / إضافة أداة / Html/Javascript

2- الأن قم بوضع الكود بالأسفل في المكان المخصص له.

<style>

/*
ColorBox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
/*

   User Style:
   Change the following styles to modify the appearance of ColorBox. They are
   ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;opacity:0.5 !important;}
#colorbox{
        box-shadow:0 0 15px rgba(0,0,0,0.4);
       -moz-box-shadow:0 0 15px rgba(0,0,0,0.4);
        -webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);
       }
   #cboxTopLeft{width:14px; height:14px; background:url(http://imgboot.com/images/cybersidh/controls.png) no-repeat 0 0;}
   #cboxTopCenter{height:14px; background:url(http://imgboot.com/images/cybersidh/border.png) repeat-x top left;}
   #cboxTopRight{width:14px; height:14px; background:url(http://imgboot.com/images/cybersidh/controls.png) no-repeat -36px 0;}
   #cboxBottomLeft{width:14px; height:43px; background:url(http://imgboot.com/images/cybersidh/controls.png) no-repeat 0 -32px;}
   #cboxBottomCenter{height:43px; background:url(http://imgboot.com/images/cybersidh/border.png) repeat-x bottom left;}
   #cboxBottomRight{width:14px; height:43px; background:url(http://imgboot.com/images/cybersidh/controls.png) no-repeat -36px -32px;}
   #cboxMiddleLeft{width:14px; background:url(http://imgboot.com/images/cybersidh/controls.png) repeat-y -175px 0;}
   #cboxMiddleRight{width:14px; background:url(http://imgboot.com/images/cybersidh/controls.png) repeat-y -211px 0;}
   #cboxContent{background:#fff; overflow:visible;}
       #cboxLoadedContent{margin-bottom:5px;}
       #cboxLoadingOverlay{background:url(http://imgboot.com/images/cybersidh/loadingbackground.png) no-repeat center center;}
       #cboxLoadingGraphic{background:url(http://imgboot.com/images/cybersidh/loading.gif) no-repeat center center;}
       #cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
       #cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
       #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(http://imgboot.com/images/cybersidh/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
       #cboxPrevious{left:0px; background-position: -51px -25px;}
       #cboxPrevious.hover{background-position:-51px 0px;}
       #cboxNext{left:27px; background-position:-75px -25px;}
       #cboxNext.hover{background-position:-75px 0px;}
       #cboxClose{right:0; background-position:-100px -25px;}
       #cboxClose.hover{background-position:-100px 0px;}
       .cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
       .cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
       .cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
       .cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}
/*-----------------------------------------------------------------------------------*/
/*   Facebook Likebox popup For Blogger
/*-----------------------------------------------------------------------------------*/
#subscribe {
    font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
    text-decoration:none;
}
.box-title {
   color: #F66303;
   font-size: 20px !important;
   font-weight: bold;
   margin: 10px 0;
border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
box-shadow: 5px 5px 5px #CCCCCC;
padding:10px;
line-height:25px; font-family:arial !important;
}
.box-tagline {
   color: #999;
   margin: 0;
   text-align: center;
}
#subs-container {
    padding: 35px 0 30px 0;
    position: relative;
}
a:link, a:visited {
border:none;
}
.demo {
display:none;
}
</style>

</center>
<p style=" float:right; margin-right:35px; font-size:9px;" >Powered By <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://widget-blogs.blogspot.com">Blogger Widgets</a></p>
</div>
</div>

3- الأن قم بتغير username بإسم صفحتك على الفيس بوك. و إن واجهتك مشكلة ما قم بزيارة المواضيع التالية: حل مشكلة صندوق الفيس بوك Like Box و إضافة مربع الفيسبوك بشكل عائم و منزلق Fan Box

4- إذا أردت أن تظهر الإضافة في كل مرة بدل 30 يوم قم بمسح القيمة التالية من الكود *30 أو غيرها بعدد الأيام التي تريدها.

الأن قم بوضع ردك بالأسفل و شارك الموضوع مع أصدقائك.

تابع الموضوع »

بسم الله الرحمن الرحيم

اليوم سنقوم بوضع موضوع أو إضافة مشابهة Tabbed Sidebar إضافة جميلة و سهلة و التي كنت قد وضعتها في أول أيام المدونة و لقد لاقت إعجاب الكثيرين. لكن للأسف، مع عدم خبرة الكثير من القراء لم يستطيعوا إضافة هذه الأداة لمدوناتهم. أخرهم كتنت الأخت “أوراق” و قد وعدتها بإضافة مماثلة و ها أنا أفي بوعدي لها و لجميع قراء مدونتي المتواضعة.

هذه الإضافة مخصصة لمدونة Wordpress لكن تم بحمد الله تحويلها من طرف أحد الإخوة لتتوافق مع منصة Blogger و لكي لا أطيل عليكم الكلام أترككم مع شرح طريقة إضافتها لمدونتك.

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

طريقة إضافة الأداة لمدونتك

1- توجه للوحة تحكم المدونة / تصميم / تحرير Html / قم بتوسيع القالب

2- قم بالبحث عن الوسم التالي ]]></b:skin> و ضع قبله الكود بالأسفل

/*---- Wordpress Style MBT Menu Tabs----*/

.MBT-tabs{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:26px}
.MBT-tabs li{list-style:none;list-style-type:none;margin:0 0 0 4px;padding:0;float:left}
.MBT-tabs li:first-child{margin:0}
.MBT-tabs li a{color:#fff;background:#333333;padding:5px 5px;display:block;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif;}
.MBT-tabs li a:hover,.MBT-tabs li a.MBT-tabs-current{background:#A46F38;color:#fff;text-decoration:none}
.MBT-tabs-content{background:#212121}
.MBT-tabviewsection{margin-top:10px;margin-bottom:10px;}

3- إن أردت قم بتغير A46F38# باللون الموجود في مدونتك ليتناسب معها.

4- إبحث عن الوسم <div id='sidebar-wrapper'> و ضع تحته الكود بالأسفل

<ul class='MBT-tabs MBT-tabs-widget-MBT-id'>
<li><a href='#widget-MBT-id1'>مواضيع جديدة</a></li>
<li><a href='#widget-MBT-id2'>القائمة البريدية</a></li>
<li><a href='#widget-MBT-id3'>أخرالتعليقات</a></li>
</ul>

</div>
<div style='clear:both;'/>

5- قم بتغير كلمات ( مواضيع جديدة ، القائمة البريدية ، أخر التعليقات ) بما يناسبك.

6- الأن قم بحفظ القالب

7- الأن قم بالذهاب لعناصر الصفحة سوف تجد أنه قد ظهرت 3 إضافات قم بسحب الإضافات التي تريد إليها.

8- بعد هذه الخطوة قم بحفظ التعديلات و عاين الأداة في مدونتك.

شرح الفيديو

الأن جاء دورك لتتحفنا و تضع تعليقك في المربع الموجود بالأسفل

تابع الموضوع »

بسم الله الرحمن الرحيم

السلام عليكم أخي الكريم في موضوع سابق كنا قد تطرقنا لموضوع ألبوم صور بتقنية مختلفة : Spacegallery و اللذي يعمل بتقنية jQuery الرائعة. اليوم سنتطرق لدرس أخر بتقنية jQuery و هو خاص بتكبير الصور.

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

و لتطبيق الإضافة في مدونتك إتبع الشرح.

1- توجه للوحة تحكم المدونة

2- إبحث عن الوسم التالي عن طريق الزرين Ctrl+F

]]></b:skin>

3- ألصق الكود بالأسفل فوقه تماما

#easy_zoom{
width:600px;
height:400px;
border:5px solid #eee;
background:#fff;
color:#333;
position:fixed;
top:35px;
left:50%;
overflow:hidden;
-moz-box-shadow:0 0 10px #555;
-webkit-box-shadow:0 0 10px #555;
box-shadow:0 0 10px #555;
/* vertical and horizontal alignment used for preloader text */
line-height:400px;
text-align:center;
}

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

4- الأن إبحث عن الوسم

</head>

5- بعد ذالك قم بلصق الكود التالي فوقه

6- قم الأن بحفظ القالب، ثم إضافة أكواد CSS و jQuery ما عليك الأن سوى إضافة الصور لذا تابع.

إضافة الصور لمواضيعك

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

أضف الكود التالي لتدويناتك و غير الرابط الملون برابط الصورة التي تريد تكبيرها.

بهذا نكون قد إنتهينا من هذه الإضافة أتمنى أن تنال إعجابك.

تابع الموضوع »

ألبوم صور بتقنية مختلفة : Spacegallery

بسم الله الرحمن الرحيم

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

إسم الألبوم أو بالأحرى الكود هو Spacegallery وهو مصمم بتقنية jQuery كما ذكرنا سابقا. و طريقة عرض الصور تتمثل في أن تكون الصور في مكان واحد، الواحدة وراء الأخرى و عند الضعظ على الصورة تنتقل الصورة لأخر ألبوم الصور و تحل محلها الثانية. لترى ذالك بوضوح يمكنك زيارة صفحة Spacegallery لترى ذالك.

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

الأن قم بالبحث عن الوسم </head> و ألصق قبله الكود التالي:

var showTab = function(e) {
var tabIndex = $('ul.navigationTabs a')
.removeClass('active')
.index(this);
$(this)
.addClass('active')
.blur();
$('div.tab')
.hide()
.eq(tabIndex)
.show();
};

EYE.register(initLayout, 'init');
})(jQuery)
//]]>
</script>

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

بعد ذالك قم بالبحث عن الوسم ]]></b:skin> و أضف قبله الكود التالي :

#myGallery {
width: 100%;
height: 400px; /* إرتفاع الصورة */
}
#myGallery img {
border: 2px solid #52697E; /* حواف و لون الصورة */
}
a.loading {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr71tP2lxVfAGtZzhWXXI2APS8nOZRrvmFdxvJ3ovJf2wb_r7Z9GH5Kco5WqPJoXvhWHO7eUtrx6ECNF0bCJXdZqeT9xi83pCVnRXFbyJDGJ_xQWruOiyeDKoQNeiXRKJxUKe_MwUF3rg/) no-repeat center;
}
.spacegallery {
position: relative;
overflow: hidden;
}
.spacegallery img {
position: absolute;
left: 50%;
}
.spacegallery a {
position: absolute;
z-index: 1000;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

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

</div>

إذا أردت زيادة عدد الصور يكفي تنسخ الرابط باللون الأزرق و تضيف الصور التي تريد.

أتمنى أن يكون الموضوع نال إعجابك فلا تبخل علينا بتعليقاتك فهذا يشرفنا.

تابع الموضوع »

فرصتك بين يديك فلا تدعها تمر مرور الكرام

لا تنتظر كثيرا أدخل الأن و لن تندم

أفضل طريقة لمشاهدة الفيديو على مدونتك turn off lights

صندوق Facebook LikeBox منبثق “رائع”

كيف تعمل الإضافة

طريقة إضافة صندوق الفيس بوك

تحديث إضافة Tabbed Sidebar بمظهر جديد

طريقة إضافة الأداة لمدونتك

شرح الفيديو

تكبير الصور بتقنية jQuery

ألبوم صور بتقنية مختلفة : Spacegallery

ألبوم صور بتقنية مختلفة : Spacegallery

البحث في المدونة

المواضيع الأكثر قراءة

تصنيفات المدونة

القائمة البريدية

حمل نسختك الأن

أرشيف المدونة الإلكترونية

الكلمات المفتاحية

إنظم لصفحتنا على الفيسبوك