تعرف على الويب المُظلم Dark Web وكيفية الدخول إليه والمخاطر والفوائد

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

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

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

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

1. اذهب إلي لوحة تحكم بلوجر > تصميم > تحرير HTML. ثم ضع علامة صح علي توسيع قوالب عناصر واجهة المستخدم.

2. انسخ الكود التالي وإلصقه قبل الوسم </head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="https://sites.google.com/site/bloggerhowto/blogger-how-to/jquery.slidenote.min.js" type="text/javascript"></script>

3. انسخ الكود التالي وإلصقه قبل ]]></b:skin>

/* ----- BloggerHowToTips.Blogspot.com CSS START------ */
.slidenote { width: 540px; height: 140px; background: #FBEC78; padding: 1em;
-moz-box-shadow: -0.2em -0.2em 0.7em #333; -webkit-box-shadow: -0.2em -0.2em 0.7em #333;}
.slidenote img { float: left; margin-left: -2em; margin-top: -2em; }
.slidenote img:hover { margin-top: -1.95em; }
/* ----- BloggerHowToTips.Blogspot.com CSS END------ */

4. انسخ الكود التالي وإلصقه قبل الوسم </body>

<!-- Notification Slider Start -->
<div class='slidenote' id='note'>
<div id='container'>
<h2>Blogger How to Tips</h2>
<span><em>Get All Blogger and Blogspot Related Tips !!! :) </em></span>
<p>Visit now : <a href='http://bloggerhowtotips.blogspot.com/'>http://bloggerhowtotips.blogspot.com/</a> and learn ... <br/><a href='http://bloggerhowtotips.blogspot.com/'>Blogger How To</a> | <a
href='http://bloggerhowtotips.blogspot.com/'>Blogspot How To</a></p>
</div>
</div>
<script type='text/javascript'>
$(&#39;#note&#39;).slideNote({
closeImage: &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6csZTIzmAVSJftUdk4YUihPwI_h1amqi6XXBceEHljH0qFiOEnW3sMpGBY8hp1S7_popasa_FUAaaGuhnlcFZFe0ds-OIxYOb9kJBxijii9AsD3VhqrzaPXMct71WRZJBG4ImZweWjS7Y/s1600/slidenote.close.png&#39;
});
</script>
<!-- Notification Slider Ends -->

5. قم بحفظ القالب الآن, فقط وأنتهي كل شئ الآن. الآن قم بالنزول للأسفل في صفحة مدونتك حتي تظهر بها نافذة التنبيهات.

يمكنك تحميل ملف شفرة المصدر, صفحة تجريبية لمشاهدة النافذة, ملف المساعدة وأنماط مختلفة لعرض النافذة : http://bit.ly/aMPsjV

خيارات SlideNote

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

• where تحدد كم يجب علي المستخدم تمرير الصفحة للأسفل ليظهر له التنبيه.
• corner يقوم بضبط أي جانب من النافذة سوف تظهر نافذة التنبيه.
• container خصائص نافذة التنبيه وفيها يتم تعديل النص الذي سوف يظهر بها.
• closeImage يقوم بعرض صورة بها رابط عند الضغط عليها يتم إغلاق النافذة.

يمكنكم مشاهدة معاينة حية لهذه النافذة من خلال هذا الرابط, طبعاً لم أقوم بعملها في مدونتي لأن لدي نافذة علوية ثابتة أضع فيها التنبيهات المهمة التي أرغب بها.

قمت بترجمة هذا الدرس من خلال مدونة Blogger How To Tips.