‏إظهار الرسائل ذات التسميات اضافات Jquery. إظهار كافة الرسائل
‏إظهار الرسائل ذات التسميات اضافات Jquery. إظهار كافة الرسائل
الجمعة، 4 يناير 2013

رسالة انبثاقية تظهر للزائر مرة واحدة بتقنية JQuery

5:30 ص | مرسلة بواسطة M . Elgemezy | | تعديل الرسالة

رسالة انبثاقية تظهر للزائر مرة واحدة  Blogger

رسالة انبثاقية تظهر للزائر مرة واحدة بتقنية JQuery | ابداع ديزاين Abda3 Design بسم الله، سأستعرض معك اليوم طريقة تركيب صندوق منبثق يحتوي على رسالة تظهر لزائر مدونتك لمرة واحدة فقط، وذلك اعتماداً على إضافة صندوق الضوء Colorbox التي أعتبرها الأفضل في مجالها لتأثير lightbox وقد شرحت استخدامها بالتفصيل أنصحك بشدة قراءة هذه التدوينة ستسهل عليك الكثير ( تأثير LightBox للصور ومقاطع اليوتيوب والفلاش والمواقع وأكثر! )، في العنوان كتبتُ وأكثر وهذه الإضافة الحالية من الأكثر. ما دفعني لشرح هذه الطريقة رغبتي في توسيع مدارك قارئ مدونة البلوقر لاستغلال الإضافات كما يجب وإدارة إضافات مدونته بشكل (مُرتب) ومنع التكرار وتحميل المدونة عبئ الارتباط بإضافات ليست ضرورية، سيتضح هذا خلال شرح هذه الإضافة! فتابع معي ان كنت ما زلت تقرأ

الفكرة الأساسية من الموضوع
الفكرة استغلال إضافة colorbox وتخصيصها للحصول على رسالة ترحيبية تحتوي على أزرار مشاركة الشبكات الإجتماعية مرة واحدة لزائر المدونة ( اعتماداً على الكوكيز ) ، في نفس الوقت ممكن تغيير محتوى الرسالة ليكون مقطع فيديو مثلاً أو إعلان ترويجي .. الخ. لكن التطبيق سيكون لصندوق منبثق يتضمن أزرار مشاركة للقيسبوك وقوقيل بلس وقائمة بريدية لظني أنها الأكثر طلباً ، التطبيق سيكون كما في الصورة التالية:
رسالة انبثاقية تظهر للزائر مرة واحدة بتقنية JQuery | ابداع ديزاين Abda3 Design
البناء الأساسي لإضافة رسالة الترحيب :
 يمكن تخصيص الإضافة لتكون قابلة لحمل أي محتوى ، هذا التخصيص عبارة عن كود يمكن حفظه كقالب رئيسي يمكن تغذيته بأي محتوى في المستقبل، سأشرح بنية الإضافة لفهم أوضح وبالتالي يمكنك التعديل وفق ما تحتاجه بنفسك:
  
<!-- الإضافة الأساسية colorbox -->
<link href='http://alblogger-gen.googlecode.com/svn/trunk/colorbox/style3/colorbox.css' media='screen' rel='stylesheet'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>
<script src='http://alblogger-gen.googlecode.com/svn/trunk/colorbox/colorbox.js'/>
<!-- تشغيل رسالة الترحيب -->
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var DaysTo = 1000*60*60*24*30;
var expires = new Date((new Date()).valueOf() + DaysTo );
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({ inline:true, href:"#mainbox"});
} });
//]]>
</script>
<!-- محتوى الرسالة -->
<div style='display:none;'>
<div id='mainbox' style='width:400px; height:650px; '>
<center>
هنا أكتب ما تشاء
</center></div> </div>
السطر (٢) : تضمين خصائص CSS للإضافة الأساسية أقصد Colorbox وان كنت جاد وقرأت الموضوع المتعلق بهذه الإضافة ستعلم أن هناك خمسة ستايلات مختلفة، يمكنك معاينتها من خلال هذه المدونة التجريبية. يمكنك التغيير بين الستايلات الخمسة بتغيير الرقم من بين ( 1 الى 5 ) مثل: style3 …. الخ
السطر (٣) : تضمين مكتبة الجيكيوري ، وهنا خطأ شائع وهو تكرار هذه المكتبة لدرجة أني وجدت بعض المدونات كُررت فيها المكتبة سبعة مرات ثم يسال عن بطئ مدونته!.
السطر (٤) : تضمين الإضافة الأساسية colorbox. هام: ان كنت استخدمت إضافة colorbox التي شرحتها سابقاً فتجاهل الأسطر 2 ، 3 ، 4 . إنك ان فعلت فكأنك تلبس قبعتين !
الأسطر (٦) إلى (١٦) : هي المفتاح المشغل للرسالة الترحيبية مع التحكم في ظهورها لمرة واحدة كل 30 يوماً أو كلما حذف الزائر الملفات المؤقتة (الكوكيز) من متصفحة. في السطر (١٠) : يخزن المتغير DaysTo توقيت ظهور الرسالة، التعبير ( 30*24*60*60*1000) تعني ( يومxساعةxدقيقةxثانيةxميللي ثانية ) ، وبالتالي لتغير التوقيت من شهر إلى اسبوع غير الـ (30) إلى (7) وهكذا
السطر (١٣) : هذا السطر يفعل إضافة colorbox لمحتوى الرسالة التي ستظهر، هذه الرسالة موجودة في قسم div له المعرّف ( mainbox ) .
السطر (١٨) : بداية قسم div عبارة عن وعاء يُخفي محتوى الرسالة ، وقلنا يُخفي لأنه يحتوي على display:none ، وبدون هذا الوعاء المختفي ستظهر الرسالة في المدونة وتشوهها.
السطر (١٩) : بداية محتوى الرسالة وهذا سطر هام ففيه قيمة طول وعرض الرسالة ، عليك تغييرها حسب حجم الرسالة ، إذا ظهر الصندوق المنبثق باطارات مزعجة تأكد من هذه القيم !
هذا ما عليك فهمه ، الآن يمكنك كتابة أي رسالة تريدها لزوار مدونتك في موضع السطر (٢٢) ، أطلق العنان لمخيلتك!… وكمثال تطبيقي سأعرض تخصيص الإضافة لعرض صندوق مشاركة صفحة قوقيل بلس ، واعجاب الفيسبوك ، والاشتراك في القائمة البريدية …

مثال تطبيقي: رسالة لمشاركة حسابات شبكات التواصل الاجتماعي
في هذا التطبيق سنكتب رسالة تتضمن أزرار الإعجاب والاقتراح والمتابعة للفيسبوك وقوقيل بلس بالإضافة إلى صندوق الإشتراك للقائمة البريدية، يمكنك الحصول على صندوق مشاركة قوقيل بلس من قالب مدونتك إذا كنت أضفته سابقاً أو من خلال هذه الصفحة، والحصول على صندوق إعجاب صفحة الفيسبوك من هنا ، وهناك عشرات التنسيقات لصندوق الإشتراك في القائمة البريدية … بعد ترتيب هذه الأكواد وإضافة تنسيق للرسالة هذه النتيجة عندي:
 
<link href='http://alblogger-gen.googlecode.com/svn/trunk/colorbox/style3/colorbox.css' media='screen' rel='stylesheet'/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'/>
<script src='http://alblogger-gen.googlecode.com/svn/trunk/colorbox/colorbox.js'/>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var Days = 1000*60*60*24*30;
var expires = new Date((new Date()).valueOf() + Days);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({ inline:true, href:"#mainbox"});
} });
//]]>
</script>
<div style='display:none;'>
<div id='mainbox' style='width:400px; height:600px; '>
<center><br/><br/>
<style type='text/css'>
/* تنسيق بدن الرسالة */
#mainbox h3 { background-color: #F7F7F7; border-bottom: 1px solid silver; border-right: 10px solid silver; color: orange; font-family: Tahoma; font-size: 11pt; font-weight: lighter; height: 25px; padding: 5px; margin-bottom: 7px; }
/* تنسيق صندوق اشتراك القائمة البريدية */
#mailbox { border-radius: 10px 10px 10px 10px; box-shadow: 0 0 30px silver inset; height: 50px; margin: 10px 0; padding: 25px 10px 10px; width: 300px; }
#mailbox-txt { background: none repeat scroll 0 0 #FFF!important; border: 1px solid #D2D2D2; color: #A19999; float: right; font-size: 12px; height: 25px; text-align: center; width: 200px; margin: 0; padding: 0 8px; }
#submitbutton { background: none repeat scroll 0 0 #F66303; border: 1px solid #F66303; color: #FFF; cursor: pointer; font: lighter 10pt/27px tahoma,sans-serif; height: 27px; text-shadow: 1px 1px 1px #333; margin: 0 0 0 5px; padding: 0 12px; }
</style>
<h3>تابع صفحتنا في شبكة قوقيل بلس واقترحها :</h3>
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'/>
<g:plus href='https://plus.google.com/106675122873738446344'/>
<h3>تابع صفحتنا في الفيسيبوك:</h3>
<iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Falblogger.blog&amp;width=300&amp;height=180&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;border_color=%23DCDCDC&amp;header=false&amp;appId=100378033397966' style='border:none; overflow:hidden; width:300px; height:180px;'/>
<h3>ليصل جديدنا إلى بريدك تفضل بالاشتراك</h3>
<div id='mailbox'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=alblogger&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input id='mailbox-txt' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;ادخل عنوان بريدك...&quot;;}' onfocus='if (this.value == &quot;ادخل عنوان بريدك...&quot;) {this.value = &quot;&quot;;}' type='text' value='ادخل عنوان بريدك...'/>
<input name='uri' type='hidden' value='alblogger'/>
<input name='loc' type='hidden' value='en_US'/>
<input id='submitbutton' type='submit' value='اشترك'/>
</form></div>
</center></div> </div>
قم بنسخ هذا الكود في القالب ويفضل يكون قبل إغلاقة وسم body أي قبل </body> ، والنتيجة ستكون كما في هذه المدونة التجريبية: مــثـــال مبـاشــر . إذا واجهتك صعوبة تفضل باستخدام الكود السابق مع تغيير قيم مدونة البلوقر وصفحاتها إلى تلك الخاصة بمدونتك وهي:
١ غير معرّف صفحة مدونة البلوقر في قوقيل بلس (106675122873738446344) في السطر (28) بمعرّف صفحة مدونتك.
٢ غير اسم صفحة مدونة البلوقر في الفيسبوك ( alblogger.blog ) باسم صفحة مدونتك من السطر (30).
٣ غير معرّف حساب فيدبرنر الخاص بمدونة البلوقر ( alblogger ) بحساب مدونتك من السطرين (33) و (35).
الرسالة الترحيبية لم تعد تعمل ؟
بما أن الرسالة تعتمد على تواجد ملفات التعريف بالمدونة على المتصفح، فيتوجب عليك حذف ملفات التعريف (الكوكيز) كل مرة قبل أن تستعرض التغييرات التي أحدثتها. الإضافة يجب أن لا تعمل الا مرة واحدة حتى لا يفر الزوار من مدونتك.
سؤال وجواب !* 
كيف أجعل الرسالة تظهر كل مرة للزائر ؟
حقاً هذه الطريقة مزعجة ولكن هي ممكنه، سأشرحها لتظهر كلما فتح الزائر الصفحة الرئيسية، ضع الكود التالي قبل إغلاق الوسم Body أي </body> :
 
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function(){
$.colorbox({ inline:true, href:"#mainbox"});
});
//]]>
</script>
</b:if>

* كيف أغير مقاسات الرسالة لامنبثقة ؟
بتغيير قيمة العرض والطول في السطر 19 من الكود الأساسي ( الأول ) أي من هذا السطر:
<div id='mainbox' style='width:400px; height:650px; '>
* ظهور صورة ( visit imgboot.com ) !
لا أستخدم في الإضافات التي أقدمها والقوالب مواقع صور إلا بيكاسا، وقوقل كود. إذا ظهرت هذه الصورة فهذا يعني أن ثمة إضافة Lightbox أخرى على مدونتك. جرب على مدونة جديدة !

ولأي إستفسار الرجاء  ترك تعليقاتكم لأقوم بالإجابة عليها في القريب العاجلرسالة انبثاقية تظهر للزائر مرة واحدة بتقنية JQuery | ابداع ديزاين Abda3 Design
لا تقرأ وترحل شارك معنا بتعليق فنحن نسعى لنقدم لك الافضل والاجمل



إقرأ المزيد Résumé
التسميات: , | 1 التعليقات
الأحد، 28 أكتوبر 2012

[فهرس] دورة Java Script

10:46 م | مرسلة بواسطة M . Elgemezy | | تعديل الرسالة
إقرأ المزيد Résumé
التسميات: , , , , , | 1 التعليقات
الجمعة، 26 أكتوبر 2012

مواضيع ذات صلة الثابتة والمتحركة (Blogger)

10:00 ص | مرسلة بواسطة M . Elgemezy | | تعديل الرسالة

مواضيع ذات صلة الثابتة والمتحركة (Blogger)

مواضيع ذات صلة الثابتة والمتحركة (Blogger) | ابداع ديزاين abda3 design border=

سنتحدث اليوم عن إضافة من الإضافات المهمة جدآ في مدونات بلوجر
وهي أداة "مواضيع ذات صلة" والتي تقدم لزائرك روابط مواضيع أخرى لها علاقة بالموضوع الذي يقرأه .. والجميل في هذه الأداة أنها مزودة بصورة مصغرة عن موضوع كل تدوينة
سنتعلم كيفية إضافة هذه الأداة بشكل ثابت .. وشكل آخر متحرك يمينآ ويسارآ
(أولآ) : الشكل الثابت
كما تعلمنا من لوحة التحكم توجه إلى التخطيط + تحرير HTML
ثم في خانة نسخ احتياطي / استعادة القالب اضغط على ( تنزيل قالب كامل ) ، ثم قم بتحميل الملف على جهازك الخاص ، هذه الخطوه مهمه جدآ في حاله حدوث خطأ ما ، حيث يمكنك بعد ذلك استرجاع قالبك ببساطة ، ويرجى تطبيق هذه الخطوه عند أي تغيير تحدثه في أكواد القالب ..
من تصميم + تحرير HTML
اضغط على ( توسيع قوالب عناصر واجهة المستخدم )
وللبحث السريع يتم الضغط على ctrl+f ثم نسخ الكود ولصقه في مربع البحث وسيظهر لك مكانه في القالب ..
ابحث عن هذا الكود

</head>
ثم قم بلصق هذا الكود أعلاه مباشرة
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:right;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8clPBvgm_Vw_6mBKEp7QzgMuU0MJ9C7kxtWO5shynvOr_lI6CtslSYixfn5b1_9g_gjTzx5sUg28orNChR9EEad-WkQPmbdx8e_A87rQXV_TuJDzjMuHpA5e83-UPlCyDs4zDs8rwj3I/s400/noimage.png&quot;;
var maxresults=6;
var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;مواضيع ذات صلة ::&quot;;
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
<!-- remove --></b:if>

ويمكنك تغيير جملة "مواضيع ذات صلة" بأي جملة تريد
كما يمكنك تغيير الرقم (6) بأي رقم تريد .. وهو يشير إلى عدد المواضيع التي سيتم عرضها


ثم ابحث عن هذا الكود
 <div class='post-footer-line post-footer-line-1'>
أو هذا الكود
 <p class='post-footer-line post-footer-line-1'>
ثم قم بوضع هذا الكود مباشرة أسفل ما وجدت من الكودين السابقين
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'><div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img alt='Related Posts Widget For Blogger with Thumbnails' src='http://image.bloggerplugins.org/blogger-widgets.png' style='border: 0'/></a><a href='http://www.bloggerplugins.org/'><img alt='Blogger Widgets' src='http://image.bloggerplugins.org/blogger-widgets.png' style='border: 0'/></a>
</b:if></b:if>
قم بحفظ القالب ثم اعرض مدونتك بعد التغييرات واستمتع بالإضافة ..
(ثانيآ) : الشكل المتحرك
من لوحة التحكم توجه إلى التخطيط + تحرير HTML
ثم في خانة نسخ احتياطي / استعادة القالب اضغط على ( تنزيل قالب كامل ) ، ثم قم بتحميل الملف على جهازك الخاص ، هذه الخطوه مهمه جدآ في حاله حدوث خطأ ما ، حيث يمكنك بعد ذلك استرجاع قالبك ببساطة ، ويرجى تطبيق هذه الخطوه عند أي تغيير تحدثه في أكواد القالب ..
من تصميم + تحرير HTML
اضغط على ( توسيع قوالب عناصر واجهة المستخدم )
وللبحث السريع يتم الضغط على ctrl+f ثم نسخ الكود ولصقه في مربع البحث وسيظهر لك مكانه في القالب ..
ابحث عن هذا الكود
 </head>
ثم قم بلصق هذا الكود أعلاه مباشرة

 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
width:100%
min-height:100%;
padding-top:5px;
padding-right:5px;
}
#related-posts h2{
background: #FFF!important;
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://balitraveltips.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'>
{lang: 'en'}
</script>
ثم ابحث عن هذا الكود 
<div class='post-footer-line post-footer-line-1'>
أو هذا الكود 
<p class='post-footer-line post-footer-line-1'>
ثم قم بوضع هذا الكود مباشرة أسفل ما وجدت من الكودين السابقين
 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=7&quot;' type='text/javascript'/></b:if></b:loop>
<h3><b>مواضيع ذات صلة</b></h3>
<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=10;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
<div style='float:bottom-right'><a href=''></a></div></div>
</b:if>
قم بحفظ القالب
اعرض مدونتك بعد التغييرات واستمتع بالإضافة ..

ولأي إستفسار الرجاء ترك تعليقاتكم لأقوم بالإجابة عليها في القريب العاجلمواضيع ذات صلة الثابتة والمتحركة (Blogger) | ابداع ديزاين abda3 design

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



إقرأ المزيد Résumé
التسميات: , , | 1 التعليقات
السبت، 20 أكتوبر 2012

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

3:59 ص | مرسلة بواسطة M . Elgemezy | | تعديل الرسالة

الحل الامثل لتسريع مدونة WordPress مع اضافة MooTools lazy load plugin

هل تعاني من بطئ مدونتك؟ 
كنت ابحث عن اضافة تسرع فتح المدونة  و اثناء الفرار لفتت نظري تدوينة في مدونة بسم التحميل الكسول في جافاسكربت
وبعد ماقريتها استنتجت ان هالطريقة ستسرع فتح الصفحة امام الزائر البشري بحيث سيفتح المحتوى والصور التي يراها الزائر فقط اما باقي المحتوى السفلي الذي يحتاج انزال المؤشر سيفتح لكن الصور لن تحمل الا عندما ينزل المؤشر للأسفل
امثله:
موقع جوجل للصور النسخة الأنجليزية.
فائدة الطريقة انها ستسرع تحميل المؤشر + فتح اسرع للصور
تسائلت فقلت هذه الفكرة لا يمكن ان تفوت على مبرمجين ووردبريس فضليت ابحث وابحث بموقع أضافات ووردبريس عن " lazy load "
مالقيت الا هالأضافة وتعتمد على مكتبة jquery
MooTools lazy load plugin
فكانت جميله وتفي بالغرض وهي تركيب التحميل الكسول على المدونة لكن ماعجبتني حيث ان نتائجها ضعيفة بالنسبة لأختها MooTools

نتائج التحميل العادي بدون اي اضافات

نتائج jquery lazy load

نلاحظ ان وقت التحميل العادي لا يفرق كثيرا بل انه افضل من الجيكيوري ببعض الحالات لكن هناك تحسن بسيط لمتصفحين اكسبلور فقط

اذا ضللت ابحث وابحث عن اضافة تستعمل طريقة MooTools lazy load حيث ان نتائجها افضل النتائج كانت ولم اجد للأسف اي اضافة للوردبريس
  نتائج MooTools lazy load


اليست جميله حيث انها جعلت التحسن بشكل ملحوظ وعلى كل المتصفحات لكنها للأسف غير موجوده
انا قمت بالأطلاع على كود اضافة jquery lazy load وهذا مسموح حيث انها تستخدم ترخيص جنو العمومية ومن ثم قمت ببرمجة اضافة MooTools lazy load plugin لأني لم اجدها وكنت محتاج لها ضروريا وعندما عملت وادت المطلوب فكرت ان انشرها لكم حيث تكون الأستفادة جماعية.

طريقة التركيب:
1- حمل الأضافة من هنا .
2- فك الضغط.
3- انقل مجلد الأضافة بعد فك الضغط ببرنامج الأف تي بي للمسار

 /wp-content/plugins
4- فعلها من لوحة التحكم .

ولأي إستفسار الرجاء  ترك تعليقاتكم لأقوم بالإجابة عليها في القريب العاجلfaseel
لا تقرأ وترحل شارك معنا بتعليق فنحن نسعى لنقدم لك الافضل والاجمل


إقرأ المزيد Résumé
التسميات: , | 3 التعليقات

طريقه لتسريع تحميل المدونة المنتديات وحل مشكلة بطء التصفح blogger

3:17 ص | مرسلة بواسطة M . Elgemezy | | تعديل الرسالة

طريقه لتسريع تحميل المدونة وحل مشكلة بطء التصفح مع اضافة jQuery Lazy Load

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

و تكون بإضافة الكود الآتي فوق (قبل) وسم </body> المغلق:
هذا الكود لتطبيق الإضافة على كافة صور الموقع أو المدونة.



<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2' type='text/javascript'/>
<script src='http://sites.google.com/site/simoxooorg/Home/jquery.lazyload.mini.js?ver=1.5.0' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($){
if (navigator.platform == &quot;iPad&quot;) return;
jQuery('img').lazyload({
effect:&quot;fadeIn&quot;,
placeholder: &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1VGQzoRoKyHllz4sCjCDvUDcPJsuuC8nr_WLbT6XeTZEW_paZM7svu5onZbxI0o8vzNXPnzu6g9mWKvRwyYI_bQ44-N_mEK_yreqtZzPZHe4D2etnXvH_niHC-6TlLYY4hVpG6TzLjr8/&quot;
});
});
</script>
ملاحظة:
إذا كنت تستعمل مسبقا مكتبة جي كويري في موقعك أو مدونتك فلا داعي لوضع السطر المشار إليه باللون الأزرق و اكتف بوضع بقية الكود فقط.
تنويه:
لتطبيق الإضافة فقط على جسم الموضوع أو التدوينة فقط أضف الكلاس أو ال id المراد التطبيق عليه فقط إلى يسار ما لون بالأحمر كما توضحه الأمثلة الآتية.


فمثلا في بلوجر نطبق الإضافة على .post نستعمل الكود كما يلي:



 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2' type='text/javascript'/>
<script src='http://sites.google.com/site/simoxooorg/Home/jquery.lazyload.mini.js?ver=1.5.0' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($){
if (navigator.platform == &quot;iPad&quot;) return;
jQuery('.post img').lazyload({
effect:&quot;fadeIn&quot;,
placeholder: &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1VGQzoRoKyHllz4sCjCDvUDcPJsuuC8nr_WLbT6XeTZEW_paZM7svu5onZbxI0o8vzNXPnzu6g9mWKvRwyYI_bQ44-N_mEK_yreqtZzPZHe4D2etnXvH_niHC-6TlLYY4hVpG6TzLjr8/&quot;
});
});
</script>

و في المنتديات على .tborder يصبح الكود كالآتي:


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2' type='text/javascript'/>
<script src='http://sites.google.com/site/simoxooorg/Home/jquery.lazyload.mini.js?ver=1.5.0' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function($){
if (navigator.platform == &quot;iPad&quot;) return;
jQuery('.tborder img').lazyload({
effect:&quot;fadeIn&quot;,
placeholder: &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1VGQzoRoKyHllz4sCjCDvUDcPJsuuC8nr_WLbT6XeTZEW_paZM7svu5onZbxI0o8vzNXPnzu6g9mWKvRwyYI_bQ44-N_mEK_yreqtZzPZHe4D2etnXvH_niHC-6TlLYY4hVpG6TzLjr8/&quot;
});
});
</script>

ولأي إستفسار الرجاء  ترك تعليقاتكم لأقوم بالإجابة عليها في القريب العاجلfaseel
لا تقرأ وترحل شارك معنا بتعليق فنحن نسعى لنقدم لك الافضل والاجمل

إقرأ المزيد Résumé
التسميات: , | 0 التعليقات
الثلاثاء، 25 سبتمبر 2012

أهم التأثيرات التي تضاف على الصور بتقنيتي ( CSS & jQuery )

6:09 م | مرسلة بواسطة M . Elgemezy | | تعديل الرسالة

إضافة تأثيرات على الصور بتقنيتي ( CSS & jQuery )


مثال

قم بوضع المشيرة على كل صورة وانظر الفرق


1- CSS Opacity Effect

2- CSS Border Effect

3- jQuery Fading Effect
ابداع ديزاين الصور بتقنيتي ( CSS & jQuery ) abda3design
faseel

طريقة التركيب



1- CSS Opacity Effect

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

a.TO img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
}
a.TO:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; 
}


2- CSS Border Effect
إذهب لتصميم >> تحرير HTML  >> قم بالبحث عن </b:skin>  وأضف هذا الكود قبله 
.TB img{
border: 2px solid #ccc;
}
.TB:hover img{
border: 2px solid navy;
}
.TB:hover{
border-color: red; 
}


3- jQuery Fading Effect
إذهب لتصميم >> تحرير HTML  >> قم بالبحث عن </head>  وأضف هذا الكود قبله

<script type="text/javascript">
$(document).ready(function() {
$(".TS img").fadeTo("slow", 0.6);
$(".TS img").hover(function() {
$(this).fadeTo("slow", 1.0);
}, function() {
$(this).fadeTo("slow", 0.6);
});
});</script>


مع ملاحظة أنه  إن لم تكن قد ركبت مكتبة الـ  jQuery   من قبل أضف هذا الكود قبله


<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js' type='text/javascript'/>


faseel

طريقة الاستخدام 

فقط أضف على كود الصورة التقنية المراد وضعها


CSS Opacity Effect >> class="TO"   

CSS Border Effect >> class="TB"   

jQuery Fading Effect >> class="TS" 

ليصبح

<a href="ارتباط الصورة " class="التقنية" ><img border="0" src="رابط الصورة" /></a>


مثلاً



<a href="http://abda3design.blogspot.com " class="TS" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG9DfL_jncla_PKguUOFqeRJiVzgK7X8F6SoLZ59AXV9MurJD032jDWbNvekA97_AQ3hOQuM22xWOAfSndnIHnljQbncHXZq1PooL5DNxR3R_CUsbhYm4zHYUHG7r1zHwYVcZOPyfU5_U/s1600/croppe10%255B1%255D.jpg" /></a>



ملاحظة : مالون بالأزرق في الأكواد يمكنك أن تستبدله بأي كلمة تريد ..  ووضعه بدلاُ من الاختصارات التي وضعتها أنا
... نهاية الشرح ...
إضافة عداد الزوار إلى المدونة بأشكال جذابة | ابداع ديزاين Abda3 Design لخدمات التصميم والبرمجة
إقرأ المزيد
اضافة بسيطة للتبادل الاعلاني بتقنية Html لمدونات
تصميم صفحة الخطأ 404 لـ(Blogger) بشكل انيق
تفعيل BBcode لإدراج الصور والابتسامات وتنسيقات النص
دورة [xml] الدرس الثالث ما هي XML وفيما تستخدم؟
معرفة ترتيب الكلمات المفتاحية فى نتائج البحث seo
اضافة كود الترجمة من جوجل google للمواقع وللمدونات Translate
"عَنْ أَبِي هُرَيْرَةَ رَضِيَ اللَّهُ عَنْهُ أَنَّ رَسُولَ اللَّهِ صَلَّى اللَّهُ عَلَيْهِ وَسَلَّمَ قَالَ:مَنْ صَلَّى عَلَيَّ وَاحِدَةً صَلَّى اللَّهُ عَلَيْهِ عَشْرًا"
قم بتصفح جميع الموضوعات

ولأي إستفسار الرجاء ترك تعليقاتكم لأقوم بالإجابة عليها في القريب العاجلإضافة عداد الزوار إلى المدونة بأشكال جذابة | ابداع ديزاين Abda3 Design لخدمات التصميم والبرمجة
لا تقرأ وترحل شارك معنا بتعليق فنحن نسعى لنقدم لك الافضل والاجمل
إقرأ المزيد Résumé
التسميات: , | 0 التعليقات
الاثنين، 17 سبتمبر 2012

سلايدشو SlideShow لمدونات البلوجر

10:05 ص | مرسلة بواسطة M . Elgemezy | | تعديل الرسالة

سلايدشو SlideShow لمدونات البلوجر بأستخدام الجافا Java


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


abda3design ابداع ديزاين Slideshow for java

أضفط هنا 
طريقة تركيب الأضافة 
1-لوحة التحكم 
2-تصميم
3-أضافا أداة
4- أختار
تهيئة HTML/JavaScript
ثم أضف الكود التالي داخل الصندوق

<style type="text/css">
 /* JavaScript Image Slider By http://abda3design.blogspot.com */
#mcis {
 display: none;
}
#sliderFrame {
 position: relative;
 width: 500px;
 margin: 0 auto;
        border:5px solid #000;
}
#ribbon {
 width: 111px;
 height: 111px;
 position: absolute;
 top: -4px;
 right: -4px;
}
#slider {
 width: 500px;
 height: 218px;
 background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoereAcC8rDMrQ3voJRDbgrWxYHvZ28zk2pgTabTV5CGyKxMclYuv7GhBAGsBmyiaaDkTB3FlRIKQfCDlTfbUGYcfXQ6bA0wF92auBD_Oz2f2SALyKDbzD6Ag8ixlWDIwJ2O4QnWTrpg/h120/mdonti-n.blogspot.com-loading.gif) no-repeat 50% 50%;
 position: relative;
 margin: 0 auto;
 box-shadow: 0px 1px 5px #999999;
}
#slider img {
 position: absolute;
 border: none;
 display: none;
}
#slider a.imgLink {
 z-index: 2;
 display: none;
 position: absolute;
 top: 0px;
 right: 0px;
 border: 0;
 padding: 0;
 margin: 0;
 width: 100%;
 height: 100%;
}
div.mc-caption-bg, div.mc-caption-bg2 {
 position: absolute;
 width: 100%;
 height: auto;
 padding: 0;
 right: 0px;
 bottom: 0px;
 z-index: 3;
 overflow: hidden;
 font-size: 0;
}
div.mc-caption-bg {
 background-color: black;
}
div.mc-caption {
 font: bold 15px/21px Arial;
 color: #EEE;
 z-index: 4;
 padding: 10px 0;
 text-align: center;
}
div.mc-caption a {
 color: #FB0;
}
div.mc-caption a:hover {
 color: #DA0;
}
div.navBulletsWrapper {
 top: 250px;
 right: 190px;
 width: 150px;
 background: none;
 padding-right: 20px;
 position: relative;
 z-index: 5;
 cursor: pointer;
}
div.navBulletsWrapper div {
 width: 11px;
 height: 11px;
 background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqQG-iCk6-W10GENZw5yljNSdfjdDbP45_bANadJ3IdCS9DVHWcyotYM4AGuoj0sGLBN8SQA1YRO7Ol8aB5ja7UCUv6TLeSHkA6hEy-Y1f9F0GVXxvuhQH4D7GZulL9ba6MSZN00VNjw/h120/mdonti-n.blogspot.com-bullet.png) no-repeat 0 0;
 float: right;
 overflow: hidden;
 vertical-align: middle;
 cursor: pointer;
 margin-left: 11px;
 _position: relative;
}
div.navBulletsWrapper div.active {
 background-position: 0 -11px;
}
#slider {
 transform: translate3d(0,0,0);
 -ms-transform: translate3d(0,0,0);
 -moz-transform: translate3d(0,0,0);
 -o-transform: translate3d(0,0,0);
 -webkit-transform: translate3d(0,0,0);
}
 </style>
<script src="http://my-mdonti.googlecode.com/files/js-image-slider.js" type="text/javascript"></script>
<div id="sliderFrame">
     <div id="ribbon"></div>
            <div id="slider">

<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA6QU8FgMaB5r7_ioG99cENwyGtYfawFSibfAreYQUzBFRKMlNuuCv_qsDyDPSuw8Ut8DlwESRg6WStYoQhfKmqXTsObDPf7mHHlmJBFOpV18_ZBu7jvPiQ7eWPlPYB76DUqphMCwP6Q/s1600/mdonti-n.blogspot.com-1.jpg" alt="عارض الصور من مدونتي نت "/></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzuX064YZHdCgLmbYlDiyOPnwf8p7IZpKVhCz-SDSyRcnms7PWHc5Y6RMb7eOuSw7ZIOeHKqT2ytI8MXSd4uM_zgzt3_UlZSRhLC3hwGSrAlO4cuuesNwT_9X_5MH_ug5wUR2xDg0NUw/s1600/mdonti-n.blogspot.com-2.jpg" alt="معرض الصور المنزلقةhttp://mdonti-n.blogspot.com"/></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzGRlsEZYHNQPAJuujp7so22ajCU7ccPl4FNX0Dz4HB8kXixcq2OC-wCRwWrFu_SxKsYIE5Pp3DML7up6-sHT7sUcno969Nljn82lzqqel7iFmasRNqYooD44MvZ4jNmpDcsKitzSrNg/s1600/mdonti-n.blogspot.com-3.jpg" alt="سلايد للصور مدونتي نت"/></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZC6die_qFdBoH2Q7Te59cK8DrAFW4UhBkZvfezwJ3JpPEysJM1Ke6ju7zybvIxNz26SRSy6YXex48BK6rm3_8vg9gwhzuQtu74Pj1UIo3zhqvd22EniBN5EINVTD6IFFGID_KXrC8Gw/s1600/mdonti-n.blogspot.com-4.jpg" alt="نقية جافا سكريبت. لا jQuery. لا فلاش."/></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjIt1UlpWGMOFNZkKBRcLqMRp8eE8OvPl-cbh4rwlNoh1-dPbyCb9BUO6ERZpTW5Ik2Nkikb9IpoHes_6OyiOrY6QVmSOLnOW71cvUWOw3CmNNJ1XWWdHoWrfIevjZgRhbgcDNZi-DTw/s1600/mdonti-n.blogspot.com-5.jpg" alt="مدونتي نت"/></a>
                </div></div>
 كيف يمكنك التعديل على الراوبط والصور والعناوين؟؟
الروابط المشار لها بلون الأحمر هي روابط الصور
الكتابة المشار لها بلون الأزرق هي العناوين
والمربع # المشار لها بالأزرق الفاتح ضع مكانها روابط المواضيع
طريقة زيادة عدد العرض في السلايدشو عارض الصور؟؟
في الاكواد الخاص بروابط المواضيع وصور أضف في أخر الكود أي بعد 
</a>
الكود التالي


<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjIt1UlpWGMOFNZkKBRcLqMRp8eE8OvPl-cbh4rwlNoh1-dPbyCb9BUO6ERZpTW5Ik2Nkikb9IpoHes_6OyiOrY6QVmSOLnOW71cvUWOw3CmNNJ1XWWdHoWrfIevjZgRhbgcDNZi-DTw/s1600/mdonti-n.blogspot.com-5.jpg" alt="مدونتي نت"/></a>
 كيف يمكنك التحكم في حجم السلايد  ؟؟
في أول الكود السابق سوف تجد
 width: 500px;
 height: 218px;
وهي محدد بلون الأخضر
 width: العرض;
 height: الطول;
غيرها كما تشاء وبما يتوافق مع مدونتك

معاينة "أي لغة برمجة أقوى أو أفضل ?!" | ابداع ديزاين Abda3 Design لخدمات التصميم والبرمجة
... نهاية الشرح ...
معاينة "أي لغة برمجة أقوى أو أفضل ?!" | ابداع ديزاين Abda3 Design لخدمات التصميم والبرمجة

اقرا ايضا :

  اضافة اداة كاتب الموضوع وصورته   
  تتغير خلفية مدونتك بشكل متكرر ومع كل ضغطة Refresh  

ولأي إستفسار الرجاء ترك تعليقاتكم لأقوم بالإجابة عليها في القريب العاجلمعاينة "أي لغة برمجة أقوى أو أفضل ?!" | ابداع ديزاين Abda3 Design لخدمات التصميم والبرمجة
لا تقرأ وترحل شارك معنا بتعليق فنحن نسعى لنقدم لك الافضل والاجمل
إقرأ المزيد Résumé
التسميات: , , | 2 التعليقات
الأحد، 16 سبتمبر 2012

اضافات للوورد برس WordPress مفيد جدا ( مواقع الاجتماعية واضافات محركات و البحث للارشفه)

10:15 ص | مرسلة بواسطة M . Elgemezy | | تعديل الرسالة


السلام عليكم ورحمة الله وبركاته

abda3 design
موضوعنا اليوم عن 20 اضافة . للوردبرس منها للمواقع النشر الاجتماعيه ومنها اضافات
 للاشفه والخرايط التلقائيه ركز معي انت بس ولا راح تندم ..


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

1 . Social Slider

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

ابداع ديزين abda3design

2. SexyBookmarks

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

ابداع ديزين abda3design

3. I Love Social Bookmarking

اضافة I Love Social Bookmarking تتميز بانها عبارة عن قائمة انسدالية، وهى تسمح للزوار من ارسال التدوينة بكل سهولة إلى مواقع الشبكات الاجتماعية المفضلة لديهم وهى صديقة لمحركات البحث حيث تستخدم الوسوم “nofollow” وهى تدعم هذه المواقع Blinklist, Bloglines, Blogmarks, Digg, del.icio.us, Facebook, Furl, Ma.gnolia, NewsVine, Reddit, StumbleUpon, Technorati.

ابداع ديزين abda3design

4. Light Social

وهى اضافة بسيطة ورائعة وهى المستخدمة هنا فى الموقع، وهى تقوم باضاقة ايقونات لاشهر المواقع الاجتماعية اسفل كل تدوينة، وهى تستعمل كود html بسيط لسرعة المدونة.

ابداع ديزين abda3design

5. SocialGrid

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

ابداع ديزين abda3design

6. SocioFluid

اضافة Socio Fluid تتميز بالشكل الرائع مع تاثير الحركة لايقونات الشبكة الاجتماعية عند مرور الماوس فوقها [شاهد]،وتستطيع كذلك اختيار المواقع الاجتماعية التى ترغب فى ظهورها، وكذلك امكانية التحكم فى طريقة عرض المواقع الاجتماعية بحيث تظهر فى نافذة جديدة عند الضغط على الزر الخاص بها وهى صديقة لمحركات البحث.

7. RO Social Bookmarks



ابداع ديزين abda3design


8. WP BEST SOCIAL BOOKMARK MENU

وهى تقوم بوضع ايقونات للشبكة الاجتماعية اسفل التدوينات.

ابداع ديزين abda3design

9. Social Web Links

اضافة Social Web Links وهى تقوم بوضع ايقونات ويب 2 جميلة ورائعة للمواقع الاجتماعية وتتميز بالمظهر الرائع وهنا نوعان من الحجم تستطيع الاختيار بينهم 32*32، 16*16.
ابداع ديزين abda3design

10. Addmarx – Bookmark

من خلال اضافة Addmarx – Bookmark يتم اضافة زر اسفل كل تدوينة عند الضغط عليه تظهر قائمة به ايقونات للمواقع الاجتماعية، وكذلك امكانية المشاركة من خلال البريد الالكترونى.

ابداع ديزين abda3design



الان انتهينا من اضافات المواقع الاجتماعيه ..! نبدا بطرح اضافات الورد برس للارشفه السريعه والتدوينات ..


1- أضافه ALL in one seo

ابداع ديزين abda3design

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


2- اضافه Seo Ultimate

ابداع ديزين abda3design

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

3- أضافه : Automatic SEO Links

ابداع ديزين abda3design

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

4- أضافه : HeadSpace2

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

5- اضافه : Platinum SEO Plugin

ابداع ديزين abda3design

أضافه ممتازة من إضافات الوردبريس المجانية التي تهتم بـ SEO وتمتلك الكثير من الخيارات والمزايا التي تساعد موقعك .

6- أضافه : SEO Blogroll

ابداع ديزين abda3design


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

7- أضافه : Simple Tags

ابداع ديزين abda3design

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

8- أضافه : Google Xml Sitemaps

ابداع ديزين abda3design

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

9- أضافه : Meta Robots WordPress Plugin


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

10- أضافه SEO Title Tag

العنوان هو عنصر هام بموقعك وأشرنا مسبقاً أنه العنوان يجب أن يكون مميز ومعبر وقصير قدر الأمكان وهذه الأضافه تساعدك في هذا الأمر .


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


faseel
ومبروك عليك الاضافة الرائعة
لا تقرأ وترحل شارك معنا بتعليق فنحن تكبدنا عناء البحث لنجلب لك الافضل والاجمل
إقرأ المزيد Résumé
التسميات: , , , | 1 التعليقات

البحــث

English French German Spain Italian Dutch

Russian Portuguese Japanese Korean Arabic Chinese Simplified

المتابعون

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