إجعل رابط موقعك يتبع مؤشر الماوس

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

والصلاة والسلام على أشرف المرسلين

سيدنا محمد وعلى آله وصحبه أجمعين

رابط الموقع يتبع الماوس : تظهر حروف الرابط متطايرة مع حركة مؤشر  الماوس

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

معاينة الإضافة

طريقة التركيب لمدونات بلوجر:

• الذهاب للوحة التحكم لمدونة بلوجر
• تحرير القالب Html (لاتنسى أخذ نسخة إحتياطية من القالب تجنبا لحدوث خطأ بالأكواد)
• إستخدام الكيبورد للبحث CTRL+F
• البحث عن الكود الآتى:

</body>

   

• ثم نسخ الكود التالى ووضعه قبل فوق الكود السابق مباشرة

<script type="text/javascript">

var text=&#39; ENTER YOUR TEXT HERE &#39;;

</script>

<script src="http://conda3ianllkhir.googlecode.com/files/mousetail.js" type="text/javascript">

</script>

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

Read More

أفضل و اسهل طريقة لإضافة أزرار الفيس بوك وتويتر وجوجل بلس لموقعك

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

والصلاة والسلام على أشرف المرسلين

سيدنا محمد وعلى آله وصحبه أجمعين

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

 ومن وسائل النشر أيضا أزرار الإعجاب بالموضوعات مثل: 

 Like بالفيس بوك

(tweet) على تويتر

(+g) جوجل بلس

وقد عرضت من قبل طريقة إضافة زر أعجبنى وصندوق الإعجاب  Like box,Like

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

وهناك الكثير من الأشكال سأعرض بعضها ويمكنك إختيار ما يناسب موقعك.

أزرار الإعجاب الأفقية:

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_pinterest_pinit"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f756ef243bad71a"></script>
<!-- AddThis Button END -->

أزرار المشاركة الأفقية:

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f756ef243bad71a"></script>
<!-- AddThis Button END -->

أزرار الإعجاب الرأسية العائمة:

 

تظهر بجانب الموضوع عائمة من جهة اليسار

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_floating_style addthis_counter_style" style="left:50px;top:50px;">
<a class="addthis_button_facebook_like" fb:like:layout="box_count"></a>
<a class="addthis_button_tweet" tw:count="vertical"></a>
<a class="addthis_button_google_plusone" g:plusone:size="tall"></a>
<a class="addthis_counter"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f756ef243bad71a"></script>
<!-- AddThis Button END -->

وهذا الكود إذا كنت تريد الإضافة جهة اليمين

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_floating_style addthis_counter_style" style="right:0px;top:320px;">
<a class="addthis_button_facebook_like" fb:like:layout="box_count"></a>
<a class="addthis_button_tweet" tw:count="vertical"></a>
<a class="addthis_button_google_plusone" g:plusone:size="tall"></a>
<a class="addthis_counter"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f756ef243bad71a"></script>
<!-- AddThis Button END -->

 أزرار المشاركة رأسية عائمة:

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_floating_style addthis_32x32_style" style="left:50px;top:50px;">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
</div>
<script type="text/javascript">var addthis_config = {"data_track_addressbar":true};</script>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4f756ef243bad71a"></script>
<!-- AddThis Button END -->

أزرار الإعجاب أسفل كل موضوع على حدة:

<span id="st_finder"></span><script type="text/javascript" src="http://w.sharethis.com/widget/stblogger2.js"></script><script type="text/javascript">var switchTo5x=true;stBlogger2.init("http://w.sharethis.com/button/buttons.js", {"fblike":["vcount","Facebook Like",""],"fbsend":["vcount","Facebook Send",""],"twitter":["vcount","Tweet",""],"googleplus":["vcount","Google +",""],"delicious":["vcount","Delicious",""],"sharethis":["vcount","ShareThis",""]} , "476ff4f2-24ab-4bcb-aebb-22fe2df9ef0c");var f = document.getElementById("st_finder");var c = f.parentNode.parentNode.childNodes;for (i=0;i<c.length;i++) { try { c[i].style.display = "none"; } catch (err) {}}</script>

 

بالنسبة لتركيب الإضافة لمدونات بلوجر :

1. الذهاب إلى لوحة التحكم
2. تخطيط أو تصميم
3. عناصر الصفحة
4. أضف أداة
5. اختار Html/Javascript

 ثم إنسخ الكود كاملاً وألصقه بالأداة

 هذه الأكواد من موقعى (Add this) ، (share this) ويمكنك التسجيل بهم وإختيار ما يناسب موقعك .

Read More

كيف تحمي محتويات مدونتك من السرقة

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

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

وكمحاولة لتقليل تلك الآفة والحد منها سأدلك على وسيلتين ، تساعدانك على حماية حقوقك ومحتويات مدونتك من المتطفلين.

إليك التفاصيل:



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

لتطبيق هذه الطريقة على مدونتك اتبع التالي:
1- ادخل على مدونتك عبر http://blogger.com
2- اضغط على "قالب" >> ثم اضغط على  تحرير html

3- ستظهر لك رسالة تحذيرية ، اضغط متابعة

4- ابحث عن السطر التالي (اضغط ctrl+f للبحث):

<body>

ثم اضف بعدها مباشرة وداخل القوسين اضف السطر التالي:

onmousedown="return false" oncontextmenu="return false" onselectstart="return false"

 بحيث يكون داخل القوسين مع كلمة body بالشكل التالي:

<body onmousedown="return false" oncontextmenu="return false" onselectstart="return false" >

5- اضغط حفظ النموذج ..

كانت هذه هي الطريقة الأولى

بالنسبة للطريقة الثانية:

وهي المفضلة لدي..

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

لتطبيق ذلك اتبع التالي:

طبق الخطوات السابقة من 1 ، 2 ، 3

4- ابحث عن السطر التالي: 

<head>

ثم أضف بعده مباشرة الكود التالي:

<!-- copy protect -->
&lt;!--[if IE]&gt;
<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js' type='text/javascript'/>
<script src='http://copy-protector.googlecode.com/files/www.blogger-zoom.com_ie.js' type='text/javascript'/>
&lt;![endif]--&gt;
<script type='text/javascript'>
/* www.blogger-zoom.com */
function addLink(){var body_element=document.getElementsByTagName('body')[0];var selection;selection=window.getSelection();var pagelink="<br /><br />المصدر: <a href='"+document.location.href+"'>"+document.location.href+"</a><br />";var copytext=selection+pagelink;var newdiv=document.createElement('div');newdiv.style.position='absolute';newdiv.style.left='-99999px';body_element.appendChild(newdiv);newdiv.innerHTML=copytext;selection.selectAllChildren(newdiv);window.setTimeout(function(){body_element.removeChild(newdiv)},0)}document.oncopy=addLink;
</script>
<!-- copy protect -->

5- اضغط حفظ النموذج

الان توجه لمدونتك ثم قم باعادة تحميل الصفحة عن طريق الضغط على ctrl+F5 مرتين بسرعة(مهم جدا)

جرب نسخ اي جزء من المدونة ثم لصقه في أي مكان اخر ، ستجد رابط الصفحة التي نسخت منها موجود في نهاية المنسوخ

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

Read More

كود نصوص وصور تمشي يضيف رونقاً جميلاً لموقعك وزيادة العرض

اذا كنت تعاني من ضيق المساحه في القوائم الجانبية لموقعك او مدونتك اليك كود هتمل بسيط  يحل المشكلة ويضيف لموقعك رونقاً جذاب 

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

والصق الكود المطلوب بعد تعديلة بما هو مناسب لمدونتك 

الكود التي يصلح لعرض النصوص الكتابية, الروابط, الصور,

اطار
سطر أو صورة 1 سطر أو صورة 2 سطر أو صورة 3 سطر أو صورة 4 سطر أو صورة 5 الخ.

كود

<marquee align="right" direction="up" height="120" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" width="150">

سطر أو صورة 1

سطر أو صورة 2

سطر أو صورة 3

سطر أو صورة 4

سطر أو صورة 5

الى ما تشاء

</marquee>

اتجاه السير يحدده الامر direction="up" اي ان up تعني فوق ومن الممكن تغيير 

كلمة up بكلمة down راح تعكس اتجاه السير من فوق الى تحت وكلمة right راح 

يكون السير من اليمين الى الشمال وعكسها left من الشمال الى اليمين

لتحديد ارتفاع المساحه الذي ترغب  height="120"

ولتحكم في السرعة بواسطة  scrollamount="2"  تستطيع الزيادة بزيادة الرقم 

او تنقيصه

لتحديد العرض الذي ترغب  width="150"

نموذج عارض الصور

كود

<marquee align="left" direction="left" height="200" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" width="500">
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJElCogaqdiw07yXqwfj6YYX8RFHv_omo1NHQrnj_mo07AzvjR9WTGox1dTRDlvOphiFH3sif0RmQdArrw5qCkyymC8o1L-Zfp3WJeWQN54ISfRaxvXOnRA3eE6XBWiUIOAsFmO88VWV1G/s1600/Facebook.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="120" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJElCogaqdiw07yXqwfj6YYX8RFHv_omo1NHQrnj_mo07AzvjR9WTGox1dTRDlvOphiFH3sif0RmQdArrw5qCkyymC8o1L-Zfp3WJeWQN54ISfRaxvXOnRA3eE6XBWiUIOAsFmO88VWV1G/s200/Facebook.png" width="120"></a><span id="goog_266087345"></span><span id="goog_266087348"></span>&nbsp; &nbsp;<img border="0" height="120" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgay2JhEhmao_aouzLI6nC68QirnfluMkQ06m2JgyUWvQfX_4hqsY6fFS7BYn_nFo7C6HoCnz2qhIcrnqDNIryawUlKrvQNay5hWuE3GQj_A8XWqWaIvxpvEZKkDO4j810iNbIjKMeMpw29/s200/RSS.png" width="120"><span id="goog_266087349"></span><span id="goog_266087346"></span>&nbsp; &nbsp; <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGxhUJ-xH2XFtVPVozzDbQbnWeCqctimC53h1sa83ohIT0YQ9GhK36FAEtbWEP6KLJm1JkcJTRzo8rdmE6sDT-brud4V0YXJWXq-H01pewwCbS0WfpaTAXe0ikhZjj9K_4YaptN18b-Jxr/s1600/Twitter.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="120" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGxhUJ-xH2XFtVPVozzDbQbnWeCqctimC53h1sa83ohIT0YQ9GhK36FAEtbWEP6KLJm1JkcJTRzo8rdmE6sDT-brud4V0YXJWXq-H01pewwCbS0WfpaTAXe0ikhZjj9K_4YaptN18b-Jxr/s200/Twitter.png" width="120"></a></div>
</marquee>

وبالتوفيق دائما ادعو لي ولكم 

Read More

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

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

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

إضافة كود الإشتراك في قناة يوتوب لمدونة بلوغر

1- إدخل للمدونة / تصميم / أداة / HTML/JavaScript

2- قم بنسخ و لصق الكود التالي في HTML/JavScript في خانة المحتوى

<center><!--YouTube Subscribe Gadget http://widget-blogs.blogspot.com--><iframe src=http://www.youtube.com/subscribe_widget?p=YOUR-YOUTUBE-USERNAME style="overflow: hidden; height: 130px;width: 260px; border: 0;" scrolling="no" frameborder="0"></iframe></center>

ملاحظة هامة: 

A- قم بتغير جملة YOUR-YOUTUBE-USERNAME بإسمك على اليوتوب ستجده في الأعلى على اليمين بعد تسجيل دخولك.

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

في انتظار تعليقاتك و استفساراتك.

Read More

كود جديد لترجمة Google Translate

اليوم سنتحدث عن طريقة جديدة لوضع كود الترجمة و سيكون على شكل قائمة منسدلة.

و لكي تضيف الكود توجه إلى أداة Html/Javascript و ألصق بها الكود الموجود بالأسفل.

<div id="google_translate_element"> </div> <script> function googleTranslateElementInit() { new google.translate.TranslateElement({ pageLanguage: 'en' }, 'google_translate_element'); } </script> <script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"> </script>

الأن قم بحفظ الأداة و ستجد الإضافة على مدونتك.

سلام

Read More

إضافة مقطع صوتي بتقنية HTML5

السلام عليكم

بعد انتهائنا من عنصر الفيديو و خصائصه و علاقته  مع ال HTML5

حان الان دور audio ; لدالك دعونا نأخد وقتنا لنتعلم هذا العنصر الرائع

تحميل (Download)مثال (Demo)

فالأن وبعد طول انتظار اتت لنا خاصية ال  HTML5 لتسريع الاستماع من جهة

 و من جهة أخرى نجد متصفحات اكثر تعقيدا و أكثر ذكاءا ...

لكن هذا ليس معنى أن تكون لغة HTML5 في غير صالحنا

لأن الذي برمج audiojs جعل هذه الاخيرة تتوافق مع كل من

Mobile Safari iOS 3

Android2.2+, w/Flash

Safari 4

Chrome 7

Firefox 3+, w/ Flash

Opera 10+, w/ Flash

IE 6, 7, 8, w/ Flash

هل يمكنني استعمال هته الخاصية في مدونتي؟

 نعم يمكن و اليوم سنضع شرح بسيط

أولا : من لوح تحكم مدونتك انتقل إلى صفحة التخطيط ثم  تصميم   " تحرير HTML "

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

ثالثا : ضع علامة في خانة توسيع القوالب .

ثم ابحث عن هذا الوسم

</head>

و ضع فوقه  هدا كود

<script src="http://dl.dropbox.com/u/17686000/blogspacetech/audio.min.js"></script>
<script>
audiojs.events.ready(function() {
var as = audiojs.createAll();
});

</script>

أو يمكنك تحميل الملف من الموقع الاصلي

و اعادة رفعه...

الان نبحث عن هدا الوسم

]]></b:skin>

و نضع فوقه هدا الكود

.audiojs {
width: 460px;
height: 36px;
background: #404040;
overflow: hidden;
font-family: monospace;
font-size: 12px;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #444), color-stop(0.5, #555), color-stop(0.51, #444), color-stop(1, #444)); \
background-image: -moz-linear-gradient(center top, #444 0%, #555 50%, #444 51%, #444 100%);
-webkit-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); -moz-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);
-o-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);
}

أخيرا :  استعرض مدونتك ثم احفظ قالبك.

شرح كيفية الإستخدام

قم بكتابة تدوينتك بالطريقة المعتادة

و عندما تأتي للسطر الذي سوف تريد وضع فيه هته الخاصية,

أنتقل لوضع تحرير HTML و قم بوضع الكود بهذه الطريقة

<div> <audio src="رابط الملف الصوتي." preload="auto" /> </div>

هناك خاصيتان اساسيتان في الاضافة


التشغيل التلقائي للملف الصوتي autoplay

او تشغيل الى غير مسمى loop

<audio src="رابط الملف الصوتي" autoplay />

<audio src="رابط الملف الصوتي" loop />

كما يمكنك اختيار احد المواقع لرفع ملفات mp3

dropbox

fileden

هذا كل شيئ أتمنى لك الاستفادة

Read More