صندوق معجبي صفحتك على الفيس بوك بتقنية Jquery لمدونات بلوجر





1# طريقة التركيب: 

ادخل على تصميم/ تحرير html/ قم بتوسيع القالب وخذ نسخة احتياطية لتجنب الخطأ.
الان ابحث عن:
 </head>
  ثم اضف قبله هذا الكود
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
احفظ القالب
ثم توجه إلى تصميم/عناصر الصفحة
وأضف أداة HTML/JavaScript Add  والصق بها الكود التالي :
ممنوع ازالة الحقوق جزاكم الله خيرا
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.w2bslikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXiQKRTjYpw70R1mjxUP2b3mpm3zIrTps3IRASscwzD4iyjOJr1bBMaGJy-dDDLXSeP9pCsHl9pL2cTM3D4iYyhoKXHraELpcbQ0K7Mb52E1W1L3CuBou34zfyYnT54alb5ZrBxnnhDrs/s1600/w2b_facebookbadge.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Farab.blogger&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 270px; width: 245px;background:#fff;"></iframe><span><a href="http://samysouhail.blogspot.com/">by Samy Souhail</a> # <a href="http://samysouhail.blogspot.com/2011/09/jquery.html">+Get This</a></span></div></div>
2#تخصيص الكود: 

 و قبل كل شئ انتبه معي لتخصيص هذا الكود
اللون الازرق هو اسم المستخدم للصفحة مثلا
 www.facebook.com/arab.blogger
اذن استبدل arab.blogger ب الـ  ID الخاص بصفحتك
 .
إقرأ المزيد Résuméabuiyad

قائمة إدارة المدونة لمنصة بلوجر الجديدة


السلام عليكم ورحمة الله وبركاته ،ومرحبا بالجميع في تدوينة جديدة ،اليوم سوف أقدم لكم إضافة جديدة من تصميمي ،تسمح لنا هذه الإضافة بإدارة المدونة من داخل المدونة  ,إذ يمكنك كتابة تدوينة جديدة ،أو التعديل على الرسائل أو الإعدادات,أو مراجعة التعليقات  ....فقط بكبسة زر من مدونتك ،لقد قمت بشرح مثل هذه الإضافة في درس" قائمة إدارة المدونة على مدونات بلوجر " إلا أن هذه الإضافة الجديدة التي سوف أقدمها  اليوم تتميز بكونها :
1- تضم أزرار إدارة المدونة للمنصة الجيدة
2-عبارة عن قائمة ثابثة في أحد جوانب المدونة سواء على جهة اليمين أو اليسار
3- تسهل عليك التنقل بين قوائم حسابك على موقع بلوجر
4-لا تأخذ حيزا كبيرا في تنسيق المدونة
5-إمكانية إخفاءها على الزوار وإظهارها لصاحب المدونة فقط (admin)

1-انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرhtml, ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.قم بالبحث عن الكود التالي :
]]></b:skin>
ثم قم بوضع الكود التالي قبله :
.bloggermenu {
  position: fixed;
  top: 200px;
  left: 10px;
  width: 24px;
  overflow: hidden;
  padding: 5px;
  background: #ffffff;
  border-width: 1px;
  border-style: solid;
  border-color: #ccc;
  -moz-box-shadow: 1px 1px 3px #666666;
  -webkit-box-shadow: 1px 1px 3px #666666;
  box-shadow: 1px 1px 3px #666666;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
}

ملحوظة : لتركيب الإضافة في جهة اليمين ،قم بتغيير الكلمة Left بالكلمة Right.

2-الآن قم بالبحث عن الكود التالي :
<b:include name='feedLinks'/>
فإن لم تجده ،قم بالبحث عن هذا الكود  :
<b:include name='nextprev'/>
ثم قوم بوضع هذا الكود تحت أحد الأكواد السابقة :
<b:include name='ButtonsbloggerFix'/>
3-قم بالبحث عن هذا الكود :
<b:widget id='Blog1' locked='true' title='رسائل المدونة الإلكترونية' type='Blog'>
ثم ضع الكود التالي بعده مباشرة :

<b:includable id='ButtonsbloggerFix'>
<span class='item-control blog-admin'>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<div class='bloggermenu'>
<a class='layout' href='http://www.blogger.com/home' target='_blank' title='الرئيسية '><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjKP9i5hKav4p43f0O8a2U2Ud9c56I_lAkdsahTK_pR5EW-c3IEH0M9Y-xH_nUb2U2nJ4gR_dxbNiIWgN0wSLD5KT7G_2yV021m6nzAw37I1w1t50tNofoai1vSHkbLOzMQMnCyZ4id3Q/s1600/blogger.gif' title=''/>
</a>
<a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#overview' target='_blank' title='نظرة عامة '><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-KozbNG4uu7E7XwHG5faOFZ9fZvEM9LKBfrVABHKisQ33pxGXDgnOwhDDFrLrhDoPX2d-q_DGhKXFc2rSQsCa1EBcfviz3UI8rg-GtugG7TwohyphenhyphenXmjDVo97Ijlr69on8rVCtwplzEH_8/s1600/general+orange.png' title=''/>
</a>
<a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#editor/src=sidebar' target='_blank' title='مشاركة جديدة'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVB2FkjXIQzCJCZ72f9AWVWTaPZcZvglbncDE7lSAJmMWm1GjHrTl0cGMQB6-xIR01imdPjjZdyjQdPTruztrJpgtQViXnEjtPd_BZFDso0sVndKWXWjq0UHQv1n34v2ypqapOwpRvP04/s1600/new+message.png' title=''/>
</a>
 <a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#allposts' target='_blank' title='المشاركات'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1pn6blB14xktO4bz_7_2S3bnO0tllFCCBXJ9m1FSL9F9cDD0Vmztn2LL3mPHQDkWDrgK3Eq6yx-53ij0d1jgyv8jAKJTF3cmjo6xkCs30x3P6-M_x2DvSe7T16jncjlo8FVz7ik-0f9E/s1600/MOCHARAKAT.png' title=''/>
</a>
<a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#pages' target='_blank' title='الصفحات'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL6TcOSEDZQ5Yeq-9QUIWQffbxkeiBOiBZUMnPCyJn9DpurrKalWVvCD-ymqBrEU6ynhj4YmR4F5ye7r2ywsXrcxt292FIm78WS84ufXcR88K9HqPzf9T7pSQTHoLCxwqwNziOMYxGQvg/s1600/PAGES.png' title=''/>
</a>
<a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#publishedcomments' target='_blank' title='التعليقات'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1pll5ZkyBxzdsYjF2ZICveWz7Leyhmes0tf8iHnPyS1c_IZFoxz4Q4bSwUndTPIbmNo3jZ2F6mqGq9PT08sbp2XgOcwdCUnA1BIvsz27q_5xZt2GHQP5AarcRTsTIkLjkOtTXrP8134Y/s1600/COMMENTS.png' title=''/>
</a>
<a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#googleplus' target='_blank' title='Google +'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWLimtOKsT8FBDbPLid9WbFqiSi1NkggC39Tn8BLe_n5ERXKjpff1LpzRrZ5Ys3MmgZazrhSiAYPuM1WlRd3MUhyCyK0jGHXoo5XiSwKQCRGNYbHQt5LB-oI0Bw9wgL_gymzXA4B3DG_Q/s1600/google+plus.png' title=''/>
</a>
<a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#overviewstats' target='_blank' title='الإحصائيات'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyYx8nbf_RP1xQpKrf5Et2jWgd0dBjnDxq03hqqiAFwQ13Ib6nLqk5ZmtN9IUxsViu15Ad1Ku-55CD2GlFtrMJfp-uOT2Dv0JOR2eJloxKqe9tNTgjHKjkIH-Yu2xajkM2Zey5bR9zzNs/s1600/STATISTIC.png' title=''/>
</a>
<a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#adsensesummary' target='_blank' title='الأرباح'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTFU4lybO935LHicmNZOKV_gukIV1M7yY4GgvVawd0UvO-T-TH9gCgAfpXwFFgwpkbXig367qH3MChZTenRwtNx9wPZikQJpc-bdRW6BkX4JoR5yv-jbcXI0qaCuZAKpUhjLo2T9y1Lys/s1600/adsense.png' title=''/>
</a>
<a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#pageelements' target='_blank' title='تخطيط'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5aLCqvMuv53uW452VtyXTMonOaIJ_qlKa__VgwsPkU5kSXnF-e4GYkcEA0fQx6nl_goj1cJtu7iKXvxw_4xpF7LsA2bilY0ZRaEYdXgnm2Br59PuyB83PkNBUAaupTqFFg0Axv6qEUkg/s1600/TAKHTIT.png' title=''/>
</a>
<a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#template' target='_blank' title='قالب'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuJsKj2y2wtv6jq9vNvI_f-R7SGOFYU4cMRu0nVARsFgfXpuKNasTS7RqkIyuTaIE7JnM60UXw_60EenF1qg6a1WZngG5iEqVRCW_Eb_O3_5x9lJf6m_SUlBuZerLPP9wjq0n2QBVtadc/s1600/TASMIM.png' title=''/>
</a>
<a class='layout' href='http://www.blogger.com/blogger.g?blogID=xxxxxxxxxxx#basicsettings' target='_blank' title='إعدادات'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_clfOyfWY-pdFzIWa9Nh157hp1m7_pif-C5v_byNSh-dLVovtSJlHCdt4SDypUfp-KalzJmy-IN4fNx786mWnRUAVwTrE4OIEIBMQVNhGwvjfFyBq5vKL6aUsS3ea3aak0VZcblQVFxY/s1600/PARAMETRE.png' title=''/>
</a>
</div>
</b:if>
</span>
</b:includable>

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

https://sites.google.com/site/lightbox007/photo/replayblogger3.jpg
2-كما ذكرنا سابقا فإن هذه إضافة تمكنك من التنقل في قائمة الإدارة  على حسابك الخاص على موقع بلوجر ،حيث يمكنك إخفاء الإضافة على الزوار وإظهارها لك أنت فقط عند دخولك على حسابك في موقع بلوجر،كما هو شأن أزرار التحرير السريع المعتمدة لدى بلوجر،ولذلك إذا أردت إظهار الإضافة للزوار ،قم بحذف السطرين من الكود الأخير ،أي ما لون باللون الأحمر (السطر الثاني والسطر قبل الأخير)فلا مشكلة في ذلك لأن لو أحد الزوار قام بالضغط على أحد الأزرار سوف يقوم بفتح حسابه هو(كما فعلت أنا بمدونتي ) .
وإذا تركتهما ،سوف تظهر الإضافة لك أنت فقط عند دخولك على حسابك بموقع بلوجر،

أتمنى أن تروقكم هذه الميزة الجديدة في إنتظار آرائكم وإستفساراتكم
إقرأ المزيد Résuméabuiyad

قالب blogger tube معرب لمدونات بلوجر - خاص لمدونات الفيديو video blogger template

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

مميزات القالب :

- يدعم اعلانات ادسنس
- القالب بعمودين
- يدعم كافة الاضافات
- صديق لمحركات البحث
- العنوان خلفية سوداء وكتابة بخط tahoma ابيض
- سريع جدا في التحميل ( 75 kb )
- عرض  965
- متوافق مع جميع المتصفحات


اضافات القالب :

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









تخصيص القالب :

1- اضف هذا الكود في العمود الجانبي ليظهر اخر مقاطع الفيديو المضافة :

<script style="text/javascript" src="http://sma-blogger.googlecode.com/files/adiarar.js"></script>
<script style="text/javascript">
var numposts = 12;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 50;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>
<div class="clear"/></div>



2- ابحث عن " الجمهورية العربية المتحدة" وقم بتغييرها باسم موقعك واغير الرابط ايضا برابط موقعك

3- كيف تضيف الفيديو الى المدونة

http://www.youtube.com/watch?v=MQA46gWHU74endofvid [starttext] ما اخذ بالقوة لا يسترد الا بالقوة [endtext]
فقط ما عليك سوى ان تنسخ ما سبق وتضعه في كل تدوينة وتقوم بتغيير ما تم تعليمه بالاحمر من وصف للفيديو والرابط الخاص به في يوتيوب MQA46gWHU74
إقرأ المزيد Résuméabuiyad

اضافة زر الارسال send + زر الاعجاب like لمدونات بلوجر من فيسبوك facebook

قبل حوالي اكثر من عام اطلق فيسبوك زر الاعجاب الشهير لينتشر بشكل هائل جدا بين المواقع والمدونات والمنتديات ، وبدورنا في bloggermorocco طرحنا لكم اكثر من موضوع حول ازرار الاعجاب من فيسبوك وهذا احدها - زر اعجبني من فيسبوك - وفي هذه التدوينة نعود مرة اخرى الى خدمات فيسبوك للمواقع والمدونات لنقدم لكم زر الارسال send لتتمكن اخى المدون من اتاحة المجال لزوارك لارسال رسالة خاصة بالموضوع الى احد اصدقائهم مباشرة في فيسبوك - لنبدأ على بركة الله بشرح طريقة الاضافة :


الخطوة الاولى

من لوحة التحكم اضغط على التخطيط – تحرير html – اضغط على تنزيل قالب – وبعد اكتمال التنزيل اضغط علىتوسيع فوالب عناصرواجهة المستخدم 

الخطوة الثانية

ابحث عن :


<div class='post-header-line-1'/>

واضف الكود بعدها 

واذا لم تجدها ابحث عن :(قد تجد اثنتين فالثانية المقصودة)


<data:post.body/>

واضف الكود التالي بعدها ليظهر في اخر التدوينة ، او قبلها ليظهر اول التدوينة

1- كود اضافة زر الارسال فقط
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <!--Facebook Send button Start sma-b.blospot.com -->
    <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:send colorscheme='light' expr:href='data:post.url' font='tahoma'/>
    <!--Facebook Send button End sma-b.blospot.com  --></b:if>
  
2- كود اضافة زر الاسال + زر الاعجاب  
   <b:if cond='data:blog.pageType == &quot;item&quot;'> <!-- Facebook Like+Send button Start sma-b.blogspot.com -->
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/><fb:like colorscheme='light'  action='like'  layout='standard' expr:href='data:post.url' font='' send='true' show_faces='false' width='450'/>
<!-- Facebook Like+Send button End sma-b.blogspot.com -->
</b:if>



إقرأ المزيد Résuméabuiyad

اضف زر +1 من جوجل لمدونات بلوجر

اطلقت جوجل قبل حوالي شهرين زر +1 في صفحة محرك البحث الرئيسية - تقوم مهمة هذا الزر على اعطاء تقييم المستخدم المسجل في جوجل لكل ما يراه من صفحات ومواقع مفيدة اي بالضغط على هذا الزر ليعطيه تقييما واحدا - وعند ذلك يصبح هذا الموقع او هذه الصفحة اكثر تفضيلا وقربا لمحرك البحث جوجل ولكن ستكون اكثر قربا فقط لمن هم اصدقائك في حسابك على جوجل - يعني باختصار الزر اكثر ما يكون قريبا من زر اعجبني على فيسبوك -  

طريقة الاضافة

1- من لوحة التحكم اضغط على التخطيط – تحرير html – اضغط على تنزيل قالب – وبعد اكتمال التنزيل اضغط على توسيع فوالب عناصرواجهة المستخدم-

2- ابحث عن  </head>
3- انسخ الكود التالي والصقه بعدها او تحتها مباشرة
<script type="text/javascript" src="http://apis.google.com/js/plusone.js">
  {lang: 'ar'}
</script>
4- الان قم بالبحث عن
او
  <div class='post-footer-line post-footer-line-1'>
5- انسخ الكود التالي واضفه قبل او بعد اي من السابقة ليظهر اول التدوينة او اخرها
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:right'>
<g:plusone size="standard" expr:href="data:post.url"/>
</div>
</b:if>

تخصيص الاضافة

1- احذف ما تم تعليمه بالبرتقالي لتظهر الاضافة في الصفحة الرئيسية وصفحة الموضوع
2- استبدل right يمين – left يسار – center وسط
3- استبدل standard بـ small – tall – meduim لتغيير شكل الزر –  
4- احفظ القالب ومبرووك عليك الاضافة – 
إقرأ المزيد Résuméabuiyad

إضافة بنرات إعلانية بتأثيرات jQuery على مدونات بلوجر


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




انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.
قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F). 
]]></b:skin>


ثم قم بإضافة هذا الكود قبله مباشرة :
ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative;
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px;
-ms-interpolation-mode: bicubic;
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.thumb li img.hover {
background:url(https://sites.google.com/site/lightbox007/photo/borderblogger.png) no-repeat center center; 
border: none;
}
بعد ذلك إبحث عن هذا الكود :

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

<script src='http://code.jquery.com/jquery-latest.js'
type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

//Larger thumbnail preview

$(&quot;ul.thumb li&quot;).hover(function() {
$(this).css({&#39;z-index&#39; : &#39;10&#39;});
$(this).find(&#39;img&#39;).addClass(&quot;hover&quot;)
.stop()
.animate({
marginTop: &#39;-110px&#39;,
marginLeft: &#39;-110px&#39;,
top: &#39;50%&#39;,
left: &#39;50%&#39;,
width: &#39;174px&#39;,
height: &#39;174px&#39;,
padding: &#39;20px&#39;
}, 200);

} , function() {
$(this).css({&#39;z-index&#39; : &#39;0&#39;});
$(this).find(&#39;img&#39;).removeClass(&quot;hover&quot;)
.stop()
.animate({
marginTop: &#39;0&#39;,
marginLeft: &#39;0&#39;,
top: &#39;0&#39;,
left: &#39;0&#39;,
width: &#39;100px&#39;,
height: &#39;100px&#39;,
padding: &#39;5px&#39;
}, 400);
});

//Swap Image on Click
$(&quot;ul.thumb li a&quot;).click(function() {

var mainImage = $(this).attr(&quot;href&quot;); //Find Image Name
$(&quot;#main_view img&quot;).attr({ src: mainImage });

});

});<font size="0"><a href=" http://www.pergola-aluminium.org"></a></font>
</script>
 والآن قم بحفظ القالب

انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ثم إضافة أداة ثم اختر HTML/Javascriptولآن الصق الكود التالي :

<ul class="thumb">
<li><a href="رابط المعلن"><img src="http://i53.tinypic.com/2cmkwpj.jpg" alt="" /></a></li>
<li><a href="رابط المعلن"><img src="http://i53.tinypic.com/2cmkwpj.jpg" alt="" /></a></li>
<li><a href="رابط المعلن"><img src="http://i53.tinypic.com/2cmkwpj.jpg" alt="" /></a></li>
<li><a href="رابط المعلن"><img src="http://i53.tinypic.com/2cmkwpj.jpg" alt="" /></a></li>
</ul>
مع إدخال رابط المعلن ورابط البنر الخاص به مكان الرابط الأزرق
في إنتظار تعليقاتكم أتمنى أن تنال إعجابكم وإلى اللقاء 
إقرأ المزيد Résuméabuiyad

السلام عليكم ورحمة الله تعالى وبركاته ، مرحبا بكم أحباءنا الكرام في تدوينة جديدة بعد هذا الغياب عن تقديم كل ما هو جديد في عالم التدوين ،تلقيت عدة رسائل تسألني عن طريقة تركيب خاصية الصور المنبثقة Jquery Lightbox والآن أتيت لكم بالجديد ،فكثير منكم من قام بتطبيق العديد من المحاولات لهذه الإضافة في مدونته لكن بدون فائدة وما يزيد الطين بلة هو يجب تعديل كودHTML  لكل صورة علي حدة ووضع الجملة rel="lightbox" title="Your image Caption"  بعد الوسم" a>" الذي يخص الصورة ،أما الآن مع الخاصية الجديدة التي أتيت لكم بها  تقوم بتفعيل الصور المنبثقة لجميع الصور التي تحتوي عليها المدونة بصفة تلقائية ولا داعي لإضافة أي شيء على كود الصورة ,ولمعاينة هذه الإضافة قم بالضغط على الصورة أسفله .


والآن بعد أن قمت بمعاينة الإضافة سوف نتوجه إلى التطبيق على المدونة ما عليك سوى البحث عن الوسم :
</body>
ثم قم بلصق الكود التالي قبله مباشرة :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<style type='text/css'>
    /* jQuery lightBox plugin - Gallery style */
    #gallery {
        background-color: #444;
        padding: 10px;
        width: 520px;
    }
    #gallery ul { list-style: none; }
    #gallery ul li { display: inline; }
    #gallery ul img {
        border: 5px solid #3e3e3e;
        border-width: 5px 5px 20px;
    }
    #gallery ul a:hover img {
        border: 5px solid #fff;
        border-width: 5px 5px 20px;
        color: #fff;
    }
    #gallery ul a:hover { color: #fff; }
    </style>
<script src='http://lightboxabuiyad.googlecode.com/svn/jquery.lightbox-0.4.js' type='text/javascript'/>
<link href='http://dinhquanghuy.110mb.com/lightbox/jquery.lightbox-0.5.css' media='screen' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
$(function() {
$(&#39;a[href$=jpg], a[href$=JPG], a[href$=jpeg], a[href$=JPEG], a[href$=png], a[href$=gif], a[href$=bmp]:has(img)&#39;).lightBox();
});
</script><font size="0"><a href=" http://www.pergola-aluminium.org/ "></a></font>
هل ترون كم الأمر بسيط ،ومبروك عليكم جميعا مع متمنياتي لكم بمتابعة ممتعة  .
إقرأ المزيد Résuméabuiyad

 

لاحسن تصفح

تحديثاتي علي تويتري

online gambling

اخر التعليقات