‏إظهار الرسائل ذات التسميات اضافات بلوجر. إظهار كافة الرسائل

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

<div dir="ltr" style="text-align: left;" trbidi="on">
<table cellpadding="0" cellspacing="0" class="tr-caption-container tr_bq" style="margin-left: auto; margin-right: auto; text-align: justify;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio8W4S1OmmPswOvow5iGPmY2qwD2s8vi6M5gz4SLxOq2RsVdvZDRqizzxs6F2OD5YOd4HZOlo0U72_lmkFfQnaF9ubTMNkF0sTz2aAcNyVWnIftntGSNl6t4RHn5I72SjE7W1TDQ_9n_0/s1600/%25D8%25B1%25D9%2585%25D8%25B6%25D8%25A7%25D9%2586_%25D9%2583%25D8%25B1%25D9%258A%25D9%2585.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="رمضان كريم" border="0" height="200" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio8W4S1OmmPswOvow5iGPmY2qwD2s8vi6M5gz4SLxOq2RsVdvZDRqizzxs6F2OD5YOd4HZOlo0U72_lmkFfQnaF9ubTMNkF0sTz2aAcNyVWnIftntGSNl6t4RHn5I72SjE7W1TDQ_9n_0/s400/%25D8%25B1%25D9%2585%25D8%25B6%25D8%25A7%25D9%2586_%25D9%2583%25D8%25B1%25D9%258A%25D9%2585.jpg" title="رمضان كريم" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">رمضان كريم</td></tr>
</tbody></table>
<div dir="rtl" style="text-align: justify;">
<div style="text-align: justify;">
السلام عليكم ورحمة الله تعالى وبركاته، في هذا الموضوع وبمناسبة حلول شهر رمضان المبارك ادخله الله علينا باليمن والبركات وقبول الدعوات والطاعات، احببت ان اشارككم اضافة حلوة لمدونات بلوجر وهي اضافة "<b>رمضان كريم</b>" لتباركوا لزوار ومتتبعي مدونتكم هذا الشهر الفضيل وخلق علاقات جيدة معهم وكسب الاجر والثواب في نفس الوقت. لن اطيل عليكم، الأن نمر الى طريقة التركيب.</div>
</div>
<div dir="rtl" style="text-align: justify;">
<div style="text-align: justify;">
<br /></div>
</div>
<div dir="rtl" style="text-align: justify;">
<div style="text-align: justify;">
الإضافة هي كود HTML بسيط يتكون من صورة وبعض خصائص CSS.</div>
</div>
<div dir="rtl" style="text-align: justify;">
<div style="text-align: justify;">
<br /></div>
</div>
<h3 dir="rtl" style="text-align: justify;">
طريقة تركيب اضافة رمضان كريم في بلوجر</h3>
<div dir="rtl" style="text-align: justify;">
</div>
<ul dir="rtl" style="text-align: right;">
<li style="text-align: justify;">قم بالتوجه الى لوحة تحكم مدونتك > ثم إلى تخطيط</li>
<li style="text-align: justify;">إختر مكان مناسب > ثم اضغط على اضافة اداة جديدة > اختر اضافة أداة HTML/JAVASCRIPT</li>
<li style="text-align: justify;">لا تقم بكتابة اي شئ في العنوان، ثم قم بلصق الكود التالي في صندوق الأكواد</li>
<li style="text-align: justify;">قم بالحفظ ومبرووك علك اضافة رمضان كريم</li>
</ul>
<h3 dir="rtl" style="text-align: justify;">
كود رمضان كريم</h3>
<div dir="rtl" style="text-align: justify;">
<br /></div>
<blockquote style="text-align: left;">
<div style="text-align: left;">
<div style="position: fixed; top: 40%; left: 1%;"></div>
<div style="text-align: left;">
<img alt="Blog Tips" src="<span style="background-color: yellow;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdSLEFg-ACKVO_EC6dW4TCq6eeQc0j_mtw48HJ583k2MvRRT43A1pYsBH1GrGj6WhkBwTo1m8zOiSY7yHjMYiKAoISLbqwGOkPb569sPVrUH-OjIXKtucoBBzluLDP9mTNKyAVBhawvh0/s1600/%25D8%25B1%25D9%2585%25D8%25B6%25D8%25A7%25D9%2586_%25D9%2583%25D8%25B1%25D9%258A%25D9%2585.png</span>" /></div>
<div style="text-align: left;">
</div></div>
</blockquote>
<div dir="rtl" style="text-align: justify;">
<u>بعض التعديلات :</u></div>
<div dir="rtl" style="text-align: justify;">
<br /></div>
<div dir="rtl" style="text-align: justify;">
الرابط المحدد باللون <span style="background-color: yellow;">الأصفر</span> هو رابط الصورة بمكنك تغييره باي صورة تود</div>
<div dir="rtl" style="text-align: justify;">
كما يمكنك تغيير الرقمان 40 و 1 الى ان تصل الى النتيجة التي تريدها</div>
<div dir="rtl" style="text-align: justify;">
<br /></div>
<div dir="rtl" style="text-align: justify;">
<br /></div>
<div dir="rtl" style="text-align: center;">
الى هنا ينتهي الشرح وبهذه المناسبة أقول لكم :</div>
<div dir="rtl" style="text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJa6s0gUKxS_OVcdNBuAIODZp-GiZIngWHb2MavatDc-bijb5_-goJKIi_GMXec9C0FwLtNVAcJPQljNCqU3R-7iTjyzNeiBD7TZBMVzRce-xARxpO4fHPKauIhiHBcggF1K9bcCidmIs/s1600/%25D8%25A7%25D8%25B6%25D8%25A7%25D9%2581%25D8%25A9_%25D8%25B1%25D9%2585%25D8%25B6%25D8%25A7%25D9%2586_%25D9%2583%25D8%25B1%25D9%258A%25D9%2585.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJa6s0gUKxS_OVcdNBuAIODZp-GiZIngWHb2MavatDc-bijb5_-goJKIi_GMXec9C0FwLtNVAcJPQljNCqU3R-7iTjyzNeiBD7TZBMVzRce-xARxpO4fHPKauIhiHBcggF1K9bcCidmIs/s1600/%25D8%25A7%25D8%25B6%25D8%25A7%25D9%2581%25D8%25A9_%25D8%25B1%25D9%2585%25D8%25B6%25D8%25A7%25D9%2586_%25D9%2583%25D8%25B1%25D9%258A%25D9%2585.png" /></a></div>
<div dir="rtl" style="text-align: center;">
<br /></div>
<div dir="rtl" style="text-align: center;">
<br /></div>
</div>

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

إقرأ المزيد

صندوق اعجابات الفيس بوك الجديد والأنيق

<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLT6wNbnqNvF7-trRRAoVk-VGDRD9WiLjAJ4sXWSDBYnuA4UL7W1vWYMmkOClR7vX48efL54hdA2TbcwVkfPOjCwsBw8JcmG0IWzE03daUHHCZ9TiuZh7RjgwcVdPhEJvujzRTkowDhaU/s1600/%D8%B5%D9%86%D8%AF%D9%88%D9%82_%D8%A7%D8%B9%D8%AC%D8%A7%D8%A8%D8%A7%D8%AA_%D8%A7%D9%84%D9%81%D9%8A%D8%B3_%D8%A8%D9%88%D9%83_%D8%A7%D9%84%D8%AC%D8%AF%D9%8A%D8%AF_%D9%88%D8%A7%D9%84%D8%A3%D9%86%D9%8A%D9%82.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="صندوق اعجابات الفيس بوك الجديد والأنيق" border="0" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLT6wNbnqNvF7-trRRAoVk-VGDRD9WiLjAJ4sXWSDBYnuA4UL7W1vWYMmkOClR7vX48efL54hdA2TbcwVkfPOjCwsBw8JcmG0IWzE03daUHHCZ9TiuZh7RjgwcVdPhEJvujzRTkowDhaU/s1600/%D8%B5%D9%86%D8%AF%D9%88%D9%82_%D8%A7%D8%B9%D8%AC%D8%A7%D8%A8%D8%A7%D8%AA_%D8%A7%D9%84%D9%81%D9%8A%D8%B3_%D8%A8%D9%88%D9%83_%D8%A7%D9%84%D8%AC%D8%AF%D9%8A%D8%AF_%D9%88%D8%A7%D9%84%D8%A3%D9%86%D9%8A%D9%82.PNG" title="صندوق اعجابات الفيس بوك الجديد والأنيق" /></a></div><div dir="rtl" style="text-align: center;"><br />
</div><div dir="rtl" style="text-align: center;">السلام عليكم ورحمة الله تعالى وبركاته، مرحبا بكم متتبعي وزوار مدونة <a href="http://tadwinpro.blogspot.com/" target="_blank">تدوين باحتراف</a></div><div dir="rtl" style="text-align: right;"><div style="text-align: justify;">نعتذر لكم عن طول الغياب وعدم وضع مواضيع واضافات جديدة والناتج طبعا عن انشغالي بالدراسة، لكن ان شاء الله في هذا  الموضوع سأتطرق الى اضافة جيدة شاهدتها كثيرا في المدونات والمواقع الاخبارية خصوصا، وهي <b>اضافة صندوق اعجابات الفيس بوك الجديد</b> والذي اتاحت استخدامه في الأسابيع القليلة الماضية، حقا هو صندوق جذاب وأنيق قامت شركة الفيسبوك باضافة بعض التعديلات والمسات كإظهار كوفر الصفحة وزر "إنشر". لتكتشف المميزات بنفسك يمكنك المعاينة المباشرة من مدونة <a href="http://tadwinpro.blogspot.com/" target="_blank">تدوين باحتراف</a> في الفقرة الموالية.</div><div style="text-align: center;"><span href="https://www.blogger.com/null" id="demo">المعاينة</span><br />
(استغل الفرصة وكن من متابعينا الأوفياء)</div></div><div dir="rtl" style="text-align: center;"><br />
<div class="fb-page" data-hide-cover="false" data-href="https://www.facebook.com/tadwintop" data-show-facepile="true" data-show-posts="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/tadwintop"><a href="https://www.facebook.com/tadwintop">‎تدوين باحتراف‎</a></blockquote></div></div><br />
</div></div><br />
<div class="fb-xfbml-parse-ignore"><div dir="rtl" style="text-align: justify;">كما رأيت فالاضافة الجديدة من شركة فيس بوك أنيقة جدا ومتغيرة عن الاضافة السابقة.</div><div dir="rtl" style="text-align: justify;"><br />
</div><div dir="rtl" style="text-align: justify;"><h3>طريقة التركيب</h3>في البداية توجه إلى صفحة الإضافة على الفيسبوك من هنـــا : <a href="https://developers.facebook.com/docs/plugins/page-plugin" id="url" rel="nofollow" target="_blank">Page Plugin</a><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd4egrIaCVGILEjLz18P54Gsp0OUOv0ANyjBdqMOOZp5WobBSmTXZd11ClH3VVp-cAw_EJFcEFOoB5Nts-ZxteVgysHx82qo69tVe-PvGZpNPcGuPlKcsuhbheq6nnK5Yysc4aT_PYXbM/s1600/%D8%B5%D9%86%D8%AF%D9%88%D9%82_%D8%A5%D8%B9%D8%AC%D8%A7%D8%A8%D8%A7%D8%AA_%D8%A7%D9%84%D9%81%D9%8A%D8%B3_%D8%A8%D9%88%D9%83_%D8%A7%D9%84%D8%AC%D8%AF%D9%8A%D8%AF.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="صندوق اعجابات الفيس بوك الجديد " border="0" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd4egrIaCVGILEjLz18P54Gsp0OUOv0ANyjBdqMOOZp5WobBSmTXZd11ClH3VVp-cAw_EJFcEFOoB5Nts-ZxteVgysHx82qo69tVe-PvGZpNPcGuPlKcsuhbheq6nnK5Yysc4aT_PYXbM/s1600/%D8%B5%D9%86%D8%AF%D9%88%D9%82_%D8%A5%D8%B9%D8%AC%D8%A7%D8%A8%D8%A7%D8%AA_%D8%A7%D9%84%D9%81%D9%8A%D8%B3_%D8%A8%D9%88%D9%83_%D8%A7%D9%84%D8%AC%D8%AF%D9%8A%D8%AF.PNG" title="صندوق اعجابات الفيس بوك الجديد" /></a></div><div style="text-align: center;"><br />
</div><div style="text-align: right;">1- ادخل هنا رابط صفحتك على الفيس بوك</div><div style="text-align: right;">2- هنا يمكنك وضع عرض محدد للإضافة</div><div style="text-align: right;">3- هنا يمكنك وضع طول محدد للإضافة</div><div style="text-align: right;">4- هنا يمكنك التحكم في اظهار او اخفاء الكوفر (الغلاف)</div><div style="text-align: right;">5- هذا الزر يخول لك اظهار او اخفاء المنشورات</div><div style="text-align: right;">6- هنا يمكنك اظهار او اخفاء صور المعجبين بالصفحة</div><div style="text-align: right;"><br />
</div><div style="text-align: right;">بعد الانتهاء من تعبئة المعلومات كاملة اضغط على "Get Code" للحصول على الأكواد</div><div style="text-align: right;"><br />
</div><div style="text-align: right;">ستنبثق لك هاته الصفحة والتي بها الأكواد </div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgutmuhZTeBJEbETEsWdtgu_Z1YLlzJ8qh4eDMtefKkx8H8Efnqq03Cj_Gc__SBpWu4n_neDDVy35WP1_eVlbDSeE201MDft-xVkYVUaNM0kFNIHlyj-EBpuZ3v2T-82FUDIQWAyCXfsok/s1600/%D8%B5%D9%86%D8%AF%D9%88%D9%82_%D8%A5%D8%B9%D8%AC%D8%A7%D8%A8%D8%A7%D8%AA_%D8%A7%D9%84%D9%81%D9%8A%D8%B3_%D8%A8%D9%88%D9%83_%D8%A7%D9%84%D8%AC%D8%AF%D9%8A%D8%AF.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="صندوق اعجابات الفيس بوك الجديد" border="0" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgutmuhZTeBJEbETEsWdtgu_Z1YLlzJ8qh4eDMtefKkx8H8Efnqq03Cj_Gc__SBpWu4n_neDDVy35WP1_eVlbDSeE201MDft-xVkYVUaNM0kFNIHlyj-EBpuZ3v2T-82FUDIQWAyCXfsok/s1600/%D8%B5%D9%86%D8%AF%D9%88%D9%82_%D8%A5%D8%B9%D8%AC%D8%A7%D8%A8%D8%A7%D8%AA_%D8%A7%D9%84%D9%81%D9%8A%D8%B3_%D8%A8%D9%88%D9%83_%D8%A7%D9%84%D8%AC%D8%AF%D9%8A%D8%AF.PNG" title="صندوق اعجابات الفيس بوك الجديد" /></a></div><div style="text-align: right;">قم باختيار اللغة من الزر رقم 1</div><div style="text-align: right;"><br />
</div><div style="text-align: right;">الكود الأول قم بوضعه في قالب مدونتك قبل الوسم  <span id="url"></body></span></div></div></div></div></div><div dir="rtl" style="text-align: right;">وذلك بعد تحويله بهاته <a href="http://tadwinpro.blogspot.com/p/blog-page_26.html" rel="nofollow" target="_blank">الأداة</a></div><div dir="rtl" style="text-align: right;"><br />
</div><div dir="rtl" style="text-align: right;">بعد ذلك قم بنسخ الكود الثاني وضعه في اي مكتن تريد ان تضهر فيه الإضافة ومبرووك عليك.</div><div dir="rtl" style="text-align: right;"><br />
</div><div dir="rtl" style="text-align: center;">إذا اعجبتك الاضافة او كان لديك اي استفسار او اي غموض لا تتردد في وضعه في <u><b><span style="color: red; font-size: large;">التعليقات</span></b></u> وسأكون سعيد للإجابة على كل الأسئلة.</div></div>

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

إقرأ المزيد

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

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" dir="rtl" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkCX0mM_F1936YVYVrtD9udKI6Ul3OqMAthrmgspbOCbObpP0v_dUA9xOAZJGUks-N5ORJ2cBzOkDWR3cm4bVR5d-1iM62ftFEGq24GBXTmxak6eMTlLDM9sINmduSBXuUndCPJk5ol-I/s1600/%D8%B3%D9%84%D8%A7%D9%8A%D8%AF%D8%B4%D9%88-%D8%AA%D9%84%D9%82%D8%A7%D8%A6%D9%8A-%D9%84%D9%85%D8%AF%D9%88%D9%86%D8%A7%D8%AA-%D8%A8%D9%84%D9%88%D8%AC%D8%B1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="سلايد شو تلقائي لمدونات بلوجر" border="0" height="185" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkCX0mM_F1936YVYVrtD9udKI6Ul3OqMAthrmgspbOCbObpP0v_dUA9xOAZJGUks-N5ORJ2cBzOkDWR3cm4bVR5d-1iM62ftFEGq24GBXTmxak6eMTlLDM9sINmduSBXuUndCPJk5ol-I/s1600/%D8%B3%D9%84%D8%A7%D9%8A%D8%AF%D8%B4%D9%88-%D8%AA%D9%84%D9%82%D8%A7%D8%A6%D9%8A-%D9%84%D9%85%D8%AF%D9%88%D9%86%D8%A7%D8%AA-%D8%A8%D9%84%D9%88%D8%AC%D8%B1.png" title="سلايد شو تلقائي لمدونات بلوجر" width="400" /></a></div>
<div dir="rtl" style="text-align: justify;">
السلام عليكم ورحمة الله تعالى وبركاته، مرحبا بكم متتبعي وزوار مدونة تدوين باحتراف، في هذا الموضوع ان شاء الله سنتطرق الى <b>سلايد شو</b> لمدونات <a href="http://tadwinpro.blogspot.com/2013/12/How-to-Create-blog-in-blogger.html" target="_blank">بلوجر</a> وطريقة تركيبه والتعديل عليه، حقا فالسلايد شو هو اضافة يحبها العديد من المدونين لما لها من فوائد اذ يقوم بعرض آخر المواضيع في المدونة بشكل جذاب بحيت يمكن الزائر الى الولوج الى هذه المواضيع بكل سهولة فالسلايد شو الذي سنتطرق اليه في هذه التدوينة ذو شكل جذاب وأنيق وما يميزه عن باقي السلايدشوهات الآخرى هو كونه متجاوب مع جميع الشاشات، ويمكنك وضعه في أي موضع تريد في مدونتك بلوجر بحيث سيأخذ قياسات المكان الذي وضعته فيه بالاضافة الى كونه متحرك وتلقائي. لمعرفة كود السلايد شو وطريقة تركيبه والتعديل عليه تابع الشرح.</div>
<div dir="rtl" style="text-align: justify;">
<br /></div>
<div dir="rtl" style="text-align: justify;">
<h3>
معاينة السلايد شو</h3>
</div>
<div dir="rtl" style="text-align: center;">
<a href="http://adf.ly/1ERAtV" id="demo" rel="nofollow" target="_blank">معاينة</a></div>
<h3 dir="rtl" style="text-align: justify;">
تركيب السلايد شو</h3>
<div dir="rtl" style="text-align: right;">
</div>
<ul dir="rtl" style="text-align: right;">
<li>توجه الى لوحة تحكم مدونتك</li>
<li>ثم اضغط على تخطيط Layout</li>
<li>قم باضافة اداة جديدة في المكان الذي تود ان تضع فيه السلايد شو</li>
<li>اختر اداة <span id="url">html/javascript</span> ثم الصق كود السلايد شو في الصندوق وقم بالحفظ</li>
</ul>
<div dir="rtl" style="text-align: justify;">
<br /></div>
<h3 dir="rtl" style="text-align: justify;">
كود السلايد شو</h3>
<div style="text-align: justify;">
<blockquote class="tr_bq" style="text-align: left;">
<style><br />
/* CSS Slider Recent Post */<br />
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}<br />
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}<br />
#slides ul{height:320px}<br />
#slides li{width:50%;height:100%;position:absolute;display:none}<br />
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block}<br />
#slides li:nth-child(1){right:0;top:0}<br />
#slides li:nth-child(2){right:50%;width:25%;height:50%}<br />
#slides li:nth-child(3){right:75%;width:25%;height:50%}<br />
#slides li:nth-child(4){right:50%;top:50%;width:25%;height:50%}<br />
#slides li:nth-child(5){right:75%;top:50%;width:25%;height:50%}<br />
#slides li:nth-child(1) h4 {overflow:hidden;font-size:25px;bottom:0;color:#fafafa;width:100%;<br />
padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3);<br />
height:90px;font-family:'Oswald';text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;}<br />
#slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;<br />
padding:0;font-family:'Oswald';box-shadow:5px 3px 0 rgba(0,0,0,0.2);}<br />
#slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;<br />
background:#ff6553;margin:0;}<br />
#slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;<br />
padding:5px 21px;text-transform:uppercase;margin:0;}<br />
#slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;}<br />
#slides a{display:block;width:100%;height:100%;overflow:hidden}<br />
#slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}<br />
#slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}<br />
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://2.bp.blogspot.com/-0haO2Mfkjjk/VDgZww2tfEI/AAAAAAAAHAk/zhu3INYSkHA/s1600/fade.png);background-position:50% 40%;background-repeat:repeat-x;}<br />
#slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:'Oswald';<br />
right:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;<br />
background:rgba(41,41,41,0.7);text-align:right;text-transform:uppercase;margin-left:10px;}<br />
#slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;<br />
position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:'Oswald';<br />
text-transform:uppercase;}<br />
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;}<br />
#slides .overlayx,#slides li{transition:all .4s ease-in-out}<br />
#slides li:nth-child(1) .overlayx{display:none;}<br />
#slides li:hover .overlayx{opacity:0.1}<br />
@media only screen and (max-width:800px){<br />
#slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}}<br />
@media only screen and (max-width:600px){<br />
  #slides ul{height:600px}<br />
  #slides li:nth-child(1){width:100%;height:50%}<br />
  #slides li:nth-child(2){top:50%;height:25%;right:0;width:50%}<br />
  #slides li:nth-child(3){right:50%;top:50%;width:50%;height:25%}<br />
  #slides li:nth-child(4){right:0;top:75%;height:25%;width:100%}<br />
  #slides li:nth-child(5){display:none;}}<br />
@media only screen and (max-width:480px){<br />
#slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}<br />
</style><br />
<br /><br />
<div id="featuredpost"></div><br />
<script type='text/javascript'><br />
//<![CDATA[<br />
function FeaturedPost(a){(function(e){var h={blogURL:"",MaxPost:5,idcontaint:"#featuredpost",ImageSize:500,interval:10000,autoplay:false,loadingClass:"loadingxx",pBlank:"http://3.bp.blogspot.com/-v45kaX-IHKo/VDgZxWv0xUI/AAAAAAAAHAo/QJQf8Dlh3xc/s1600/grey.gif",MonthNames:["يناير","فبراير","مارس","ابريل","مايو","يونيو","يوليو","أغسطس","سبتمبر","أكتوبر","نوفمبر","ديسمبر"],tagName:false};h=e.extend({},h,a);var g=e(h.idcontaint);var c=h.blogURL;var d=h.MaxPost*200;if(h.blogURL===""){c=window.location.protocol+"//"+window.location.host}g.html('<div id="slides"><ul class="randomnya"></ul></div><div id="buttons"><a href="#" id="prevx" title="prev"></a><a href="#" id="nextx" title="next"></a></div>').addClass(h.loadingClass);var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail"in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.ImageSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.ImageSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.MonthNames[parseInt(p,10)-1];l+='<li><a target="_blank" href="'+q+'" title="'+k+'"><div class="overlayx"></div><img class="random" src="'+u+'" title="'+k+'"><h4>'+k+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+t+'</span> <span class="dm">'+v+'</span> <span class="dy">'+x+'</span></span> <span class="autname">'+m+"</span></div></li>"}e("ul",g).append(l)};var b=function(){var i="/-/"+h.tagName;if(h.tagName===false){i="";e.ajax({url:c+"/feeds/posts/default"+i+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",success:f,dataType:"jsonp",cache:true})}else{e.ajax({url:c+"/feeds/posts/default"+i+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",success:f,dataType:"jsonp",cache:true})}(function(){setTimeout(function(){e("#prevx").click(function(){e("#slides li:first").before(e("#slides li:last"));return false});e("#nextx").click(function(){e("#slides li:last").after(e("#slides li:first"));return false});if(h.autoplay){var k=h.interval;var l=setInterval("rotate()",k);e("#slides li:first").before(e("#slides li:last"));e("#slides").hover(function(){clearInterval(l)},function(){l=setInterval("rotate()",k)});function j(){e("#nextx").click()}}g.removeClass(h.loadingClass)},d)})()};e(document).ready(b)})(jQuery)};function rotate(){$('#nextx').click();};document.write('')<br />
//]]><br />
</script><br />
<script type='text/javascript'><br />
//<![CDATA[<br />
$(document).ready(function () {<br />
FeaturedPost({<br />
blogURL:"<span id="url">http://tadwinpro.blogspot.com/"</span>,<br />
MaxPost:8,<br />
idcontaint:"#featuredpost",<br />
ImageSize:500,<br />
interval:10000,<br />
autoplay:true,<br />
tagName:false<br />
});<br />
});<br />
//]]><br />
</script></blockquote>
</div>
<div dir="rtl" style="text-align: justify;">
<br /></div>
<h3 dir="rtl" style="text-align: justify;">
تعديلات على السلايد شو</h3>
<div dir="rtl" style="text-align: justify;">
<ul>
<li>غير <span id="url">http://tadwinpro.blogspot.com/</span> برابط مدونتك</li>
</ul>
<div style="text-align: center;">
إلى هنا يكون الموضوع قد انتهى، أتمنى أن ينال السلايد شو اعجابكم ولا تنسى التعبير برأيك في <u>التعليقات</u></div>
</div>
</div>

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

إقرأ المزيد

توجيه زوار مدونة بلوجر إلى مدونة أخرى

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

إقرأ المزيد

صندوق اقتباس لمدونات بلوجر

<div dir="ltr" style="text-align: left;" trbidi="on">
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><img alt="صندوق اقتباس لمدونات بلوجر" border="0" height="197" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMxhPRq8bInqVAdfjR-A_AIZ7xGPduCXSXB_PhQNRy3Yhk_vM7V8D-oHWvmALYtw1FTXg39itjVSwTFbrogNgp6bCU63N9m7dXemKbJ5gYlTzhE7kTSLa5cia7zX55sKWWQV64bFD-pVo/s1600/%D8%B5%D9%86%D8%AF%D9%88%D9%82-%D8%A7%D9%82%D8%AA%D8%A8%D8%A7%D8%B3-%D9%84%D9%85%D8%AF%D9%88%D9%86%D8%A7%D8%AA-%D8%A8%D9%84%D9%88%D8%AC%D8%B1.png" style="margin-left: auto; margin-right: auto;" title="صندوق اقتباس لمدونات بلوجر" width="400" /></td></tr>
<tr><td class="tr-caption" style="text-align: center;">صندوق اقتباس لمدونات بلوجر</td></tr>
</tbody></table>
<div dir="rtl" style="text-align: justify;">
<br /></div>
<div dir="rtl" style="text-align: justify;">
السلام عليكم ورحمة الله تعالى وبركاته ، مرحبا بكم في هذا الموضوع الجديد سنحاول التطرق الى اضافة مهمة في مدونات بلوجر، فبعد ان طلب مني احد متابعي مدونة <a href="http://tadwinpro.blogspot.com/" target="_blank">تدوين باحتراف</a> طريقة اضافة الأكواد والنصوص في صناديق أنيقة في مشاركات مدونات بلوجر، قمت بوضع هذا الموضوع من اجل التطرق لهذه الاضافة والكود المسؤول عنها ومناقشة الكود لفهمه وفهم طريقة التعديل عليه. الكود الذي سنتطرق اليه في هذا الموضوع هو عبارة عن تنسيق Style css. تابعو معنا الشرح.</div>
<div dir="rtl" style="text-align: justify;">
<br /></div>
<h3 dir="rtl" style="text-align: justify;">
كود صندوق اقتباس لمدونات بلوجر</h3>
<div>
<blockquote class="tr_bq">
/** Style Css blockquote By:Tadwinpro.blogspot.com **/<br />
.post blockquote {<br />
position: relative;<br />
z-index: 50;<br />
background: <span style="background-color: #cccccc;">#f9f9f9</span> url(<span style="color: red;">http://3.bp.blogspot.com/-tabzcxz1DTU/VNaDBpOCgcI/AAAAAAAAA90/AngvGg9lyPQ/s1600/blockquote.png</span>) no-repeat <span style="color: #741b47;">top</span> <span style="color: #bf9000;">left</span>;<br />
border: 1px solid #999;<br />
color: #222;<br />
display: block;<br />
margin: 10px 0 10px;<br />
padding: 20px 15px 17px;<br />
overflow: auto;<br />
max-height: 250px;<br />
font: normal <span style="color: #783f04;">14</span>px tahoma;<br />
line-height: 27px;<br />
background-size: <span style="background-color: #073763; color: white;">20%</span>;<br />
}</blockquote>
</div>
<h3 dir="rtl" style="text-align: justify;">
بعض التعديلات على الكود لتفهمه وتعدل عليه كما تريد</h3>
<div dir="rtl" style="text-align: justify;">
الرابط الملون لاللون <span style="color: red;">الأحمر </span>هو رابط الصورة الموجودة في أقصى اليسار (ان كنت تود تغييرها فقط استبدله برابط صورة اخرى، او ان كنت لا تريد ان تكون اي صورة فاحذفه)</div>
<div dir="rtl" style="text-align: justify;">
الكلمة <span style="color: #741b47;">top </span>هي المسؤولة عن تموضوع الصورة في الأعلى (إن كنت تود ان تضهر في الأسفل استبدلها بـ: Bottom)</div>
<div dir="rtl" style="text-align: justify;">
الكلمة <span style="color: #bf9000;">left </span>مسؤولة عن ظهور الصورة في اليسار (استبدلها بـ: right ان كنت تودها ان تضهر في اليمين)</div>
<div dir="rtl" style="text-align: justify;">
القيمة <span style="color: #783f04;">14px</span> هي حجم الخط</div>
<div dir="rtl" style="text-align: justify;">
القيمة <span style="background-color: #073763; color: white;">20%</span> هي حجم الصورة في حالة اردت تصغير الصورة او تكبيرها فغير الفيمة الى ما يناسبك.</div>
<div dir="rtl" style="text-align: justify;">
<br /></div>
<h3 dir="rtl" style="text-align: justify;">
أين سأضع الكود؟</h3>
<div>
<div dir="rtl" style="text-align: right;">
طبعا الكود عبارة عن تنسيق css يتم وضعه ضمن أكواد css في القالب.</div>
<div dir="rtl" style="text-align: right;">
اولا اتجه الى لوحة تحكم مدونتك ثم القالب ثم تعديل HTML، الآن ابحث عن الكود التالي <span style="background-color: #999999; color: #f3f3f3;">]]></b:skin></span> عن طرق الضغط على زر ctr+F ثم ضع الكود السابق فوقه اي قبله، ثم اضغط على <b>حفظ</b> .</div>
<div dir="rtl" style="text-align: right;">
<br /></div>
<div dir="rtl" style="text-align: right;">
الآن بعدما أضفنا الكود، كلما يجب عليك فعله الآن هو عندما تريد اضافة كود في صندوق او اي اقتباس داخل اي موضوع ما عليك الا تحديد النص بالماوس والضغط على زر الاقتباس <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBfDu1Acj0kK_jqHdmE_GLFbeWDH66VXzK6zm0LHCTpHNJUGmBMjh22HO26B66d7srzgPVLeZyuuYi9G-fWCMW92vf9kFAePwTDnhTEg6ouAusbHAeWdVdbLVt4fddF2Vb3Pl2Oa0ns8E/s1600/blockquote-icon.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBfDu1Acj0kK_jqHdmE_GLFbeWDH66VXzK6zm0LHCTpHNJUGmBMjh22HO26B66d7srzgPVLeZyuuYi9G-fWCMW92vf9kFAePwTDnhTEg6ouAusbHAeWdVdbLVt4fddF2Vb3Pl2Oa0ns8E/s1600/blockquote-icon.PNG" /></a> ثم الضغط على "إنشر" وعند الدخول الى التدوينة في مدونتك ستلاحظ ان النص الذي قمت بتحديده قد اضيف في الصندوق.</div>
<div dir="rtl" style="text-align: right;">
<br /></div>
<div dir="rtl" style="text-align: right;">
الى هنا يكون الموضوع قد انتها، ونكون قد تطرقنا الى موضوع و<b>اضافة صندوق اقتباس لمدونات بلوجر</b> .</div>
<div dir="rtl" style="text-align: right;">
<br /></div>
<div dir="rtl" style="text-align: right;">
اذا اعجبتك الاضافة لا تنسى دعمنا عن طريق عمل الآتي وشكرا:</div>
<div dir="rtl" style="text-align: right;">
<br /></div>
</div>

<br />
<div style="-moz-border-radius: 3px; -moz-box-shadow: 0px 0px 20px 0px rgba(74,74,74,1); -webkit-border-radius: 3px; -webkit-box-shadow: 0px 0px 20px 0px rgba(74,74,74,1); background: #f8f8f8; border-radius: 3px; border: 1px solid #ddd; box-shadow: 0px 0px 20px 0px rgba(74,74,74,1); margin: 0 auto; padding: 10px; width: 60%;">
<div dir="rtl" style="text-align: center;">
<span style="background-color: #ffe599;"><u>كن من متابعينا على الفيس بوك</u></span><br />
<u style="background-color: #ffe599;"><br /></u></div>
<div dir="rtl" style="text-align: center;">
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Ftadwintop&width&height=62&colorscheme=light&show_faces=false&header=false&stream=false&show_border=false" style="border: none; height: 62px; overflow: hidden;"></iframe>

</div>
<div dir="rtl" style="text-align: center;">
<br /></div>
<div dir="rtl" style="text-align: center;">
<u style="background-color: #ffe599;">كن من أعضاء المدونة</u></div>
<div dir="rtl" style="text-align: center;">
<span style="color: red;"><b>~ <a href="https://www.blogger.com/follow-blog.g?blogID=1317057795183709653" rel="nofollow" target="_blank">من هنا</a> ~</b></span></div>
<div dir="rtl" style="text-align: center;">
<br /></div>
</div>
</div>

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

إقرأ المزيد

اضافة نافذة منبثقة - كود نافذة منبثقة لمدونات بلوجر

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

إقرأ المزيد

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

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

إقرأ المزيد

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

<div dir="ltr" style="text-align: left;" trbidi="on">
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLV-0hfaOdxLOlORbMb0FvetQLr6Ek6_xtj2K1TV2uIqDVFz6XJ4y61beBIB3_qRzVduwcmnCs73j5gyNVdQS8BhK09-xzLwLN7gHqftlj7LA-J-YyinV0PcrdfPcGma1_Z-g368kVtBc/s1600/%D8%A5%D8%B6%D8%A7%D9%81%D8%A9+%D8%B5%D9%86%D8%AF%D9%88%D9%82+%D8%A5%D8%B9%D8%AC%D8%A7%D8%A8%D8%A7%D8%AA+%D9%81%D9%8A%D8%B3+%D8%A8%D9%88%D9%83+%D9%85%D9%86%D8%A8%D8%AB%D9%82.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="إضافة صندوق إعجابات فيس بوك منبثق" border="0" height="357" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLV-0hfaOdxLOlORbMb0FvetQLr6Ek6_xtj2K1TV2uIqDVFz6XJ4y61beBIB3_qRzVduwcmnCs73j5gyNVdQS8BhK09-xzLwLN7gHqftlj7LA-J-YyinV0PcrdfPcGma1_Z-g368kVtBc/s1600/%D8%A5%D8%B6%D8%A7%D9%81%D8%A9+%D8%B5%D9%86%D8%AF%D9%88%D9%82+%D8%A5%D8%B9%D8%AC%D8%A7%D8%A8%D8%A7%D8%AA+%D9%81%D9%8A%D8%B3+%D8%A8%D9%88%D9%83+%D9%85%D9%86%D8%A8%D8%AB%D9%82.png" title="إضافة صندوق إعجابات فيس بوك منبثق" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">إضافة صندوق إعجابات فيس بوك منبثق</td></tr>
</tbody></table>
<div dir="rtl" style="text-align: justify;">
مرحبا بكم زوار مدونة تدوين باحتراف، ان شاء الله في هذا الموضوع سنتطرق الى اضافة رائعة وهي <b>اضافة صندوق إعجابات فيس بوك منبثق</b> هذه الاضافة محبوبة عند البعض نظرا لما لها من فوائد خاصة لصفحات الفيسبوك، فالمدونات التي لها عدد كبير من الزوار تقوم بتركيبها وبالتالي يحصلون على اعجابات كثيرة في صفحاتكم على الفيسبوك.</div>
<div dir="rtl" style="text-align: justify;">
<br /></div>
<div dir="rtl" style="text-align: justify;">
معاينة : <a href="http://philo4bac.blogspot.com/" rel="nofollow" target="_blank">من هنا</a></div>
<div dir="rtl" style="text-align: justify;">
<br /></div>
<div dir="rtl" style="text-align: justify;">
طريقة التركيب :</div>
<div dir="rtl" style="text-align: justify;">
<br /></div>
<div dir="rtl" style="text-align: justify;">
في البداية يتوجب عليك اضافة هذا الكود الخاص بمكتبة الجيكويري (ان كان في مدونتك فلا داعي لان تضيفه)</div>
<div dir="rtl" style="text-align: justify;">
<br /></div>
<div style="text-align: left;">
<blockquote class="tr_bq">
<script type="text/javascript" src="<span style="color: #351c75;">http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js</span>"></script></blockquote>
</div>
<div dir="rtl" style="text-align: justify;">
الأن بعد اضافة الكود السابق ماعليك الا التوجه الى مدونتك ثم تخطيط ثم اضافة أداة HTML جديدة وتلصق الكود التالي :</div>
<div dir="rtl" style="text-align: justify;">
<br /></div>
<blockquote class="tr_bq">
<style type='text/css'><br />
#makingdifferentpopup{<br />
position: fixed;<br />
top:100px;<br />
z-index:9999;<br />
display:none;<br />
padding:0px;<br />
right:600px;<br />
border:10px solid rgba(82, 82, 82, 0.7);<br />
-webkit-background-clip: padding-box; /* for Safari */<br />
background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */<br />
-webkit-border-radius:8px 8px 8px 8px;<br />
-moz-border-radius:8px 8px 8px 8px;<br />
border-radius:8px 8px 8px 8px;<br />
width:400px;<br />
height:360px;<br />
overflow:hidden;<br />
}<br />
#makingdifferentpopup span{<br />
font-size:20px !important;<br />
font-weight:bold !important;<br />
}<br />
#makingdifferentpopup h1{<br />
background:#6d84b4 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCubKqwwPr2-da3lCR1lwOLxE-oEVNRZxnXNGSkimQ2wu3b7ga0MlnIGtND-hnhUaRU5JRub8svBzY9Psosbtg2T7pzAgy1lDvx1cYzDDLQsdrxS12bO-GQUxmW19fod8_GHk2kHW64jUd/s1600/%255Bwww.gj37765.blogspot.com%255Dh1.png) 98% no-repeat;<br />
border:1px solid #3b5998 !important;<br />
color:#FFFFFF !important;<br />
font-size:20px !important;<br />
font-weight:700 !important;<br />
padding:5px !important;<br />
margin:0 !important;<br />
font-family:"lucida grande",tahoma,verdana,arial,sans-serif !important;<br />
overflow:hidden !important;<br />
}<br />
.htmlarea{<br />
font-size:12px !important;<br />
font-weight:normal !important;<br />
height:265px !important;<br />
padding:1px !important;<br />
background:#fff !important;<br />
border-bottom:2px solid #ddd;<br />
overflow:hidden !important;<br />
}<br />
#mdfooter{<br />
text-align:left;<br />
background:#F2F2F2 !important;<br />
height:56px !important;<br />
padding:10px 10px 10px 10px !important;<br />
overflow:hidden !important;<br />
}<br />
#mdclose{<br />
float:right;<br />
background-color:#eee !important;<br />
border:1px solid #ccc !important;<br />
color:#111 !important;<br />
font-weight:bold !important;<br />
padding:5px 8px 5px 8px !important;<br />
text-decoration:none !important;<br />
display:inline-block !important;<br />
font-family:"lucida grande",tahoma,verdana,arial,sans-serif !important;<br />
outline:none !important;<br />
position:relative !important;<br />
font-size:18px !important;<br />
margin:1px !important;<br />
}<br />
#mdclose:active{<br />
top:1px;<br />
left:1px;<br />
}<br />
.grabthis{<br />
bottom:80px;<br />
font:8px "lucida grande",tahoma,verdana,arial,sans-serif;<br />
position:absolute;<br />
right:6px;<br />
text-align:right;<br />
z-index: 99999;<br />
}<br />
.grabthis a{<br />
color: #000;<br />
text-decoration:none;<br />
}<br />
.grabthis a:hover{<br />
text-decoration:underline;<br />
}<br />
</style><br />
<script type='text/javascript'><br />
jQuery(document).ready(function() {<br />
function makingdifferent_ppopup()  {var sec = 20<br />
var timer = setInterval(function() {<br />
   $("#mdfooter span").text(sec--);<br />
   if (sec == 0) {<br />
      $("#makingdifferentpopup").fadeOut("slow");<br />
      clearInterval(timer);<br />
   }<br />
},1000);<br />
  var mdwh = jQuery(window).height();<br />
  var mdpph = jQuery("#makingdifferentpopup").height();<br />
  var mdfromTop = jQuery(window).scrollTop()+50;<br />
 jQuery("#makingdifferentpopup").css({"top":mdfromTop});}<br />
jQuery(window).fadeIn(makingdifferent_ppopup)<br />
.resize(makingdifferent_ppopup)<br />
 //alert(jQuery.cookie('sreqshown'));<br />
 //var mdww = jQuery(window).width();<br />
 //var mdppw = jQuery("#makingdifferentpopup").width();<br />
 //var mdleftm = (mdww-mdppw)/2;<br />
   var mdleftm = 500;<br />
 //var mdwh = jQuery(window).height();<br />
 //var mdpph = jQuery("#makingdifferentpopup").height();<br />
 //var mdfromTop = (jQuery(window).scrollTop()+mdwh-mdpph) / 2;<br />
 jQuery("#makingdifferentpopup").animate({opacity: "1", left: "0" , left:  mdleftm}, 0).show();<br />
     jQuery("#mdclose").click(function() {<br />
jQuery("#makingdifferentpopup").animate({opacity: "0", left: "-5000000"}, 1000).show();});});<br />
</script><br />
<div id="makingdifferentpopup"><br />
<h1>انضم الينا على الفيسبوك</h1><br />
<div class="htmlarea"><br />
<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/<span style="background-color: #3d85c6;"><span style="color: white;">TadwinTop</span></span>&amp;width=400&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23fff&amp;stream=false&amp;header=false&amp;height=250" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:400px; height:250px;" allowtransparency="true"></iframe><br />
<div class="grabthis"><br />
By <a href="http://tadwinpro.blogspot.com/" target="_blank">تدوين باحتراف</a> / <a href="http://tadwinpro.blogspot.com/2015/01/facebook-type-jquery-pop-up-with-like-box-timer-for-bloggerblog.html" target="_blank">الاضافة</a><br />
</div><br />
</div><br />
<div id="mdfooter">Please wait..<span>20</span> Seconds<a href="#" id="mdclose" onclick="return false;">Cancel</a><br />
</div><br />
</div><br />
</blockquote>
<div dir="rtl" style="text-align: justify;">
الأن قم بتغيير <span style="text-align: left;">TadwinTop بمعرف صفحتك على الفيسبوك وقم بالحفظ.</span></div>
<div dir="rtl" style="text-align: justify;">
ومبروووك عليك الاضافة.</div>
<div dir="rtl" style="text-align: justify;">
لا تنسى نشر الموضوع مع اصدقائك عن طريق الأزرار في الاسفل وشكراا</div>
</div>

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

إقرأ المزيد

طريقة تثبيت أداة في السيدبار

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="rtl" style="text-align: justify;">
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtS0mqDn4DOAQYFSa_0guIIec2XIwZYJABa0lO2upJRY-NzGVz2Jf2HXJ6eWsJua-vZnWK13LdjCWMKyPLWL_spS5J6lLtRFiO0pM7JeHLU1A2Vuqyd7cbNg2EAfxXOCrKqE8LQ7iJK0M/s1600/%D8%AA%D8%AB%D8%A8%D9%8A%D8%AA+%D8%B5%D9%86%D8%AF%D9%88%D9%82+%D8%A7%D9%84%D8%A3%D8%AF%D9%88%D8%A7%D8%AA+%D8%A8%D8%A7%D9%84%D8%B3%D9%8A%D8%AF%D8%A8%D8%A7%D8%B1.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="تثبيت صندوق الأدوات بالسيدبار" border="0" height="300" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtS0mqDn4DOAQYFSa_0guIIec2XIwZYJABa0lO2upJRY-NzGVz2Jf2HXJ6eWsJua-vZnWK13LdjCWMKyPLWL_spS5J6lLtRFiO0pM7JeHLU1A2Vuqyd7cbNg2EAfxXOCrKqE8LQ7iJK0M/s1600/%D8%AA%D8%AB%D8%A8%D9%8A%D8%AA+%D8%B5%D9%86%D8%AF%D9%88%D9%82+%D8%A7%D9%84%D8%A3%D8%AF%D9%88%D8%A7%D8%AA+%D8%A8%D8%A7%D9%84%D8%B3%D9%8A%D8%AF%D8%A8%D8%A7%D8%B1.png" title="تثبيت صندوق الأدوات بالسيدبار" width="400" /></a></td></tr>
<tr><td class="tr-caption">تثبيت صندوق الأدوات بالسيدبار</td></tr>
</tbody></table>
</div>
<div dir="rtl" style="text-align: justify;">
مرحبا بكم من جديد في تدوينة جديدة، هذه المرة مع اضافة رائعة لمدونات بلوجر. في هذا الموضوع ان شاء الله سنتطرق الى طريقة من اجل جعل اداة في السيدبار تتحرك الى الأسفل عند النزول الى اسفل المدونة، هذه الاضافة اصبحت مطلوبة لما لها من فوائد عديدة بحيث يمكن ان تقوم بتطبيقها على اعلان مثلا وبالتالي زيادة لفت انتباه الزوار، وبالتالي ارباح كبيرة.</div>
<div dir="rtl" style="text-align: justify;">
<br />
لمعاينة الاضافة ادعوك لزيارة هذه المدونة : <b><span style="color: #351c75;"><a href="http://philo4bac.blogspot.com/" rel="nofollow" target="_blank">هنا</a></span></b></div>
<div dir="rtl" style="text-align: justify;">
ستلاحظ انك عند النزول الى الأسفل ستواجه اداة تتحرك معك دائما. اتمنى ان تكون الفكرة قد وصلت.</div>
<div dir="rtl" style="text-align: justify;">
طريقة التركيب :</div>
<div dir="rtl" style="text-align: justify;">
</div>
<ul dir="rtl" style="text-align: right;">
<li style="text-align: justify;">توجه الى القالب ومن ثم تحرير</li>
<li style="text-align: justify;">ابحث عن الكود التالي : <span style="color: #38761d;">]]></b:skin></span> (استعمل ctr+F)</li>
<li style="text-align: justify;">ثم الصق الكود التالي فوقه/قبله</li>
</ul>
<br />
<blockquote class="tr_bq">
.sticky {<br />
  position:fixed;<br />
  top:50px;<br />
  z-index: 100;<br />
}</blockquote>
<div dir="ltr">
<div dir="rtl" style="text-align: justify;">
<ul>
<li>الأن ابحث عن <span style="color: #38761d;"></body> </span>وضع الكود التالي فوقه</li>
</ul>
<div dir="ltr" style="text-align: left;">
<blockquote class="tr_bq">
<script type='text/javascript'><br />
$(document).ready(function() {<br />
var stickyWidgetTop = $('#<span style="background-color: #0b5394; color: white;"><b>معرف الأداة</b></span>').offset().top;<br />
var stickyWidget = function(){<br />
var scrollTop = $(window).scrollTop();   <br />
if (scrollTop > stickyWidgetTop) {<br />
    $('#<span style="background-color: #0b5394; color: white;"><b>معرف الأداة</b></span>').addClass('sticky');<br />
} else {<br />
    $('#<b><span style="background-color: #0b5394; color: white;">معرف الأداة</span></b>').removeClass('sticky');<br />
}<br />
};<br />
stickyWidget();<br />
$(window).scroll(function() {<br />
    stickyWidget();<br />
});<br />
});<br />
</script></blockquote>
</div>
</div>
</div>
<div dir="rtl" style="text-align: justify;">
لا تنسى تغيير "<span style="text-align: left;"><span style="background-color: #0b5394;"><span style="color: white;">معرف الأداة</span></span>" بمعرف الاضافة التي تود تحريكها</span></div>
<div dir="rtl" style="text-align: justify;">
<span style="text-align: left;">طريقة معرفة معرف اي أداة :</span></div>
<div dir="rtl" style="text-align: justify;">
</div>
<ul dir="rtl" style="text-align: right;">
<li style="text-align: justify;">توجه الى تخطيط</li>
<li style="text-align: justify;">اختر الاداة المراد تطبيق الشرح عليها ثم اضغط على تحرير</li>
<li style="text-align: justify;">اذهب الى آخر عنوان URL وستجد المعرف هناك كما هو مبين في الصورة</li>
</ul>
<div style="text-align: justify;">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8HaKYdNvityR9KGhySAnmb1t0jbzLIHGj3q8X20dbagy70ImzPWQqt4F6cysT9QCof024p3VzhcrLxKnBhZH0tsxqJVR8-lNQAFlTXxZWsZCWM9AtD6wRE4YGYXXzCJJO4Yorzvx3Gv4/s1600/%D9%83%D9%8A%D9%81%D9%8A%D8%A9+%D8%A7%D9%84%D8%AD%D8%B5%D9%88%D9%84+%D8%B9%D9%84%D9%89+%D8%A7%D9%84%D9%85%D8%B9%D8%B1%D9%81.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="كيفية الحصول على المعرف" border="0" height="128" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8HaKYdNvityR9KGhySAnmb1t0jbzLIHGj3q8X20dbagy70ImzPWQqt4F6cysT9QCof024p3VzhcrLxKnBhZH0tsxqJVR8-lNQAFlTXxZWsZCWM9AtD6wRE4YGYXXzCJJO4Yorzvx3Gv4/s1600/%D9%83%D9%8A%D9%81%D9%8A%D8%A9+%D8%A7%D9%84%D8%AD%D8%B5%D9%88%D9%84+%D8%B9%D9%84%D9%89+%D8%A7%D9%84%D9%85%D8%B9%D8%B1%D9%81.png" title="كيفية الحصول على المعرف" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">كيفية الحصول على المعرف</td></tr>
</tbody></table>
<div dir="rtl" style="text-align: center;">
وفي الأخير ستلاحظ ان الاضافة شغالة ونتمنى منكم التفاعل عن طريق التعليقات ومشاركة الموضوع مع اضدقائك </div>
</div>

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

إقرأ المزيد

فيديو - اضافة صندوق اعجاب الفيسبوك عائم في مدونة بلوجر

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="rtl" style="text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUrsCQ99PdcRhp79tduKEZgu_BXv2P_ZPaxNr-U0XycCzWjBd3flSrcy7SN_kpTtW1GLcbeh1ir7CunBFIF96v_ut5kLtGVzT33SkDhp1AqBgoCA0JW-hhN0avbW7MUUHpxoh9UWDMw5Y/s1600/%D8%A7%D8%B6%D8%A7%D9%81%D8%A9+%D8%B5%D9%86%D8%AF%D9%88%D9%82+%D8%A7%D8%B9%D8%AC%D8%A7%D8%A8+%D8%A7%D9%84%D9%81%D9%8A%D8%B3%D8%A8%D9%88%D9%83+%D8%B9%D8%A7%D8%A6%D9%85+%D9%81%D9%8A+%D9%85%D8%AF%D9%88%D9%86%D8%A9+%D8%A8%D9%84%D9%88%D8%AC%D8%B1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="اضافة صندوق اعجاب الفيسبوك عائم في مدونة بلوجر" border="0" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUrsCQ99PdcRhp79tduKEZgu_BXv2P_ZPaxNr-U0XycCzWjBd3flSrcy7SN_kpTtW1GLcbeh1ir7CunBFIF96v_ut5kLtGVzT33SkDhp1AqBgoCA0JW-hhN0avbW7MUUHpxoh9UWDMw5Y/s1600/%D8%A7%D8%B6%D8%A7%D9%81%D8%A9+%D8%B5%D9%86%D8%AF%D9%88%D9%82+%D8%A7%D8%B9%D8%AC%D8%A7%D8%A8+%D8%A7%D9%84%D9%81%D9%8A%D8%B3%D8%A8%D9%88%D9%83+%D8%B9%D8%A7%D8%A6%D9%85+%D9%81%D9%8A+%D9%85%D8%AF%D9%88%D9%86%D8%A9+%D8%A8%D9%84%D9%88%D8%AC%D8%B1.png" title="اضافة صندوق اعجاب الفيسبوك عائم في مدونة بلوجر" /></a></div>
<div dir="rtl" style="text-align: center;">
<br /></div>
<div dir="rtl" style="text-align: justify;">
السلام عليكم ورحمة الله تعالى وبركاته</div>
<div dir="rtl" style="text-align: justify;">
اخواني اخواتي زوار واعضاء مدونة تدوين باحتراف ان شاء الله في هذا الموضوع سوف اشرح لكم بالفيديو كيف تضيف صندوق اعجاب الفيسبوك عائم في مدونة بلوجر، في البداية يجب ان نفهم الفكرة اولا، الفكرة بسيطة وهي ان نجعل الصندوق مخفي في الجانب الايمن للمدونة بحيث بمجرد ان يمرر الزائر الماوس على ايقونة ستكون ظاهرة سينزلق الصندوق لبظهر له بحيث يمكنه الاعجاب بصفحتك.</div>
<div dir="rtl" style="text-align: justify;">
الفكرة سهلة جدا بمكنك مشاهدة المعاينة من هنا : <a href="http://adf.ly/uOutN" rel="nofollow" target="_blank">معاينة</a><br />
<br /></div>
<div dir="rtl" style="text-align: justify;">
<h3>
الشرح بالفيديو :</h3>
</div>
<div dir="rtl" style="text-align: justify;">
<br />
<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: center;">
<iframe allowfullscreen="" frameborder="0" height="344" src="https://www.youtube.com/embed/cnO1VHLiDgs" width="459"></iframe></div>
</div>
<br />
<h3>
الأكواد المستعملة في الشرح :</h3>
</div>
<div dir="rtl" style="text-align: justify;">
<br /></div>
<blockquote class="tr_bq" style="text-align: left;">
<br />
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js' type='text/javascript'/><br />
<script type='text/javascript'><br />
jQuery.noConflict();<br />
jQuery(function (){<br />
jQuery(&quot;.slide_likebox&quot;).hover(function(){<br />
jQuery(&quot;.slide_likebox&quot;).stop(true, false).animate({right:&quot;0&quot;},&quot;medium&quot;);<br />
},function(){<br />
jQuery(&quot;.slide_likebox&quot;).stop(true, false).animate({right:&quot;-250&quot;},&quot;medium&quot;);<br />
},500);<br />
return false;<br />
});<br />
</script><br />
</blockquote>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<blockquote class="tr_bq">
/*--------------------<br />
facebook wedget<br />
--------------------*/<br />
.slide_likebox {<br />
float:right;<br />
width:288px;<br />
height:345px;<br />
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3podSfERlp7yOGhYPLPMcOk4Sikf70qhrhtEtFlDePty6lRkBzT-mg3zqXz_3ygexJJNHRX5rbxsvf8N0Fh_qeQ1rfK5S19CixnEdfDEfV3c6Q2lZo16JN4eu2M069slxJsyvjGU7fVk/s1600/fb_bg.png) no-repeat !important;<br />
display:block;<br />
right:-250px;<br />
padding:0;<br />
position:fixed;<br />
top: 130px;<br />
z-index:1002;<br />
border-radius:10px;<br />
-moz-border-radius:10px;<br />
-webkit-border-radius:10px;<br />
}<br />
div.likeboxwrap {<br />
margin-top:2px;<br />
margin-left:-5px;<br />
width:238px;<br />
height:325px;<br />
background-color:#fff;<br />
overflow:hidden;<br />
border-radius:10px;<br />
-moz-border-radius:10px;<br />
-webkit-border-radius:10px;<br />
}<br />
div.likeboxwrap iframe {margin:-1px}<br />
/*--------------------<br />
facebook wedget<br />
--------------------*/</blockquote>
<div>
<br /></div>
<div>
<blockquote class="tr_bq">
<div class="slide_likebox"><br />
<div style="color: rgb(255, 255, 255); padding: 8px 5px 0pt 50px;"><span><div class='likeboxwrap'><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2F<b style="background-color: #3d85c6;"><span style="color: white;">www.facebook.com/tadwintop</span></b>&amp;width=238&amp;colorscheme=light&amp;connections=15&amp;stream=false&amp;header=false&amp;height=350" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:228px; height:320px;" allowtransparency="true"></iframe><br />
</div><br />
</span><br />
</div><a style='color: #666666;font: normal 10px tahoma,arial;text-decoration: none;' target="_blank" href='http://tadwinpro.blogspot.com/' rel='dofollow'>تدوين باحتراف</a><br />
</div></blockquote>
</div>
</div>
</div>
<div dir="rtl" style="text-align: justify;">
بالنسبة للكود الاخير قم يتغيير ماهو ملون برابط صفحتك على الفيسبوك .</div>
</div>

السلام عليكم ورحمة الله تعالى وبركاته اخواني اخواتي زوار واعضاء مدونة تدوين باحتراف ان شاء الله في هذا الموضوع سوف اشرح لكم بالفي...

إقرأ المزيد

اضافة جاري تحميل المدونة لمدونات بلوجر

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="rtl" style="text-align: justify;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM2jddj9ABRCaLv5mn1NceTENOgcx0qpNeKhLuRAJNza0T7-W2DBUEf0mDTdMr2HlkLeTH0UvXQiRueD2NVJoz0c9hpZ-FK1Ktnd4O93k_tNCYDAgBGULnvuquAPAxJj2eaU5w8laDeLY/s1600/%D8%A7%D8%B6%D8%A7%D9%81%D8%A9+%D8%AC%D8%A7%D8%B1%D9%8A+%D8%AA%D8%AD%D9%85%D9%8A%D9%84+%D8%A7%D9%84%D9%85%D8%AF%D9%88%D9%86%D8%A9+%D9%84%D9%85%D8%AF%D9%88%D9%86%D8%A7%D8%AA+%D8%A8%D9%84%D9%88%D8%AC%D8%B1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="191" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM2jddj9ABRCaLv5mn1NceTENOgcx0qpNeKhLuRAJNza0T7-W2DBUEf0mDTdMr2HlkLeTH0UvXQiRueD2NVJoz0c9hpZ-FK1Ktnd4O93k_tNCYDAgBGULnvuquAPAxJj2eaU5w8laDeLY/s1600/%D8%A7%D8%B6%D8%A7%D9%81%D8%A9+%D8%AC%D8%A7%D8%B1%D9%8A+%D8%AA%D8%AD%D9%85%D9%8A%D9%84+%D8%A7%D9%84%D9%85%D8%AF%D9%88%D9%86%D8%A9+%D9%84%D9%85%D8%AF%D9%88%D9%86%D8%A7%D8%AA+%D8%A8%D9%84%D9%88%D8%AC%D8%B1.png" width="400" /></a></div>
<br />
<span style="font-family: inherit;">السلام عليكم ورحمة الله وبركاته،</span></div>
<div dir="rtl" style="text-align: justify;">
<span style="font-family: inherit;">مرحبا بكم متتبعي وزوار مدونة تدوين باحترافي، ان شاء الله في هذا الموضوع سأقوم بعرض إضافة لمدونات بلوجر، وهي اضافة جاري تحميل الصفحة تظهر عند الدخول لمدونتك، هي حقا اضافة اختيارية لكن دورها يكمن في اضافة نوع من الجمالية والاحترافية في مدونتك. الاضافة متوفرة بشكلين احترافيين، كل شكل له كود خاص به. ومن اجل اضافتها المرجو متابعة بقية الموضوع.</span></div>
<div dir="rtl" style="text-align: justify;">
<br /></div>
<h3 dir="rtl" style="text-align: right;">
<span style="font-family: inherit;">طريقة اضافة جاري تحميل المدونة لمدونات بلوجر :</span></h3>
<div dir="rtl" style="text-align: justify;">
<span style="font-family: inherit;">- في البداية قم بالدخول الى لوحة تحكم مدونتك</span></div>
<div dir="rtl" style="text-align: justify;">
<span style="font-family: inherit;">- اذهب الى القالب</span></div>
<div dir="rtl" style="text-align: justify;">
<span style="font-family: inherit;">- ثم اضغط على تحرير HTML</span></div>
<div dir="rtl" style="text-align: justify;">
<span style="font-family: inherit;">- ابحث عن الوسم <span style="background-color: #990000; color: white;"></body></span> عن طريق الاختضار Ctrl+F من اجل البحث السريع</span></div>
<div dir="rtl" style="text-align: justify;">
<span style="font-family: inherit;">- الآن قم بلصق أحد الأكواد الموجودة في الأسفل قبل/فوق الوسم</span></div>
<h3 dir="rtl" style="text-align: right;">
<span style="font-family: inherit;">أكواد الإضافة :</span></h3>
<div dir="rtl" style="text-align: justify;">
<span style="font-family: inherit;">الشكل الأول : <a href="http://kbour.blogspot.com/" rel="nofollow" target="_blank">المشاهدة من هنا</a></span><br />
<blockquote class="tr_bq" style="text-align: left;">
    <div id="loader"><br />
        <div class="spinner"><br />
            <div class="spinner-inner"></div><br />
        </div><br />
    </div><br />
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/><br />
    <script type="text/javascript"><br />
        $(window).load(function () {<br />
            setTimeout(function () {<br />
                $(".spinner").fadeOut("slow");<br />
                setTimeout(function () {<br />
                    $("#loader").fadeOut("slow")<br />
                }, 1000)<br />
            }, 1000)<br />
        });<br />
    </script><br />
<style>#loader{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(10,10,10,1);z-index:1000}.spinner{position:fixed;width:100%;top:70%;height:30px;text-align:center;font-size:10px}.spinner,.spinner-inner{position:absolute;top:0;bottom:0;right:0;left:0;border:9px solid white;border-color:transparent white;margin:auto}.spinner{width:85px;height:85px;-webkit-animation:spin 2.2s linear 0s infinite normal;-moz-animation:spin 2.2s linear 0s infinite normal;animation:spin 2.2s linear 0s infinite normal}.spinner-inner{width:40px;height:40px;-webkit-animation:spinback 1.2s linear 0s infinite normal;-moz-animation:spinback 1.2s linear 0s infinite normal;animation:spinback 1.2s linear 0s infinite normal}@-webkit-keyframes spin{from{-webkit-transform:rotate(0)}to{-webkit-transform:rotate(360deg)}}@-moz-keyframes spin{from{-moz-transform:rotate(0)}to{-moz-transform:rotate(360deg)}}@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}@-webkit-keyframes spinback{from{-webkit-transform:rotate(0)}to{-webkit-transform:rotate(-360deg)}}@-moz-keyframes spinback{from{-moz-transform:rotate(0)}to{-moz-transform:rotate(-360deg)}}@keyframes spinback{from{transform:rotate(0)}to{transform:rotate(-360deg)}}</style></blockquote>
الشكل الثاني : <a href="http://files.allbloggertricks.com/Pre%20Loading%20Spinners.html#demo2" rel="nofollow" target="_blank">شاهده من هنا</a><br />
<blockquote class="tr_bq" style="text-align: left;">
<div id='loader'><br />
<div class="wrap"><br />
<div class="bg"><br />
<div class="loading"><br />
<span class="title">loading...</span><br />
<span class="text"><data:blog.title/></span><br />
</div> </div></div></div><br />
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/><br />
    <script type='text/javascript'><br />
        $(window).load(function () {<br />
            setTimeout(function () {<br />
                $(&quot;.wrap&quot;).fadeOut(&quot;slow&quot;);<br />
                setTimeout(function () {<br />
                    $(&quot;#loader&quot;).fadeOut(&quot;slow&quot;)<br />
                }, 1000)<br />
            }, 1000)<br />
        });<br />
    </script><br />
<style>#loader{position:fixed;top:0;left:0;right:0;bottom:0;background:black;color:#eaf7ff;z-index:1000;font-family:sans-serif,arial}@-webkit-keyframes title{0%{opacity:0;right:130px}48%{opacity:0;right:130px}52%{opacity:1;right:30px}70%{opacity:1;right:30px}100%{opacity:0;right:30px}}@-moz-keyframes title{0%{opacity:0;right:130px}48%{opacity:0;right:130px}52%{opacity:1;right:30px}70%{opacity:1;right:30px}100%{opacity:0;right:30px}}@-webkit-keyframes fade{0%{opacity:1}100%{opacity:0}}@-moz-keyframes fade{0%{opacity:1}100%{opacity:0}}@-webkit-keyframes bg{0%{background-color:#306f99}50%{background-color:#19470f}90%{background-color:#734a10}}@-moz-keyframes bg{0%{background-color:#306f99}50%{background-color:#19470f}90%{background-color:#734a10}}@-webkit-keyframes blink{0%{opacity:0}5%{opacity:1}10%{opacity:0}15%{opacity:1}20%{opacity:0}25%{opacity:1}30%{opacity:0}35%{opacity:1}40%{opacity:0;right:-21px}45%{opacity:1;right:80px}50%{opacity:0;right:-21px}51%{right:-21px}55%{opacity:1}60%{opacity:0}65%{opacity:1}70%{opacity:0}75%{opacity:1}80%{opacity:0}85%{opacity:1}90%{opacity:0;right:-21px}95%{opacity:1;right:80px}96%{right:-21px}100%{opacity:0;right:-21px}}@-moz-keyframes blink{0%{opacity:0}5%{opacity:1}10%{opacity:0}15%{opacity:1}20%{opacity:0}25%{opacity:1}30%{opacity:0}35%{opacity:1}40%{opacity:0;right:-21px}45%{opacity:1;right:80px}50%{opacity:0;right:-21px}51%{right:-21px}55%{opacity:1}60%{opacity:0}65%{opacity:1}70%{opacity:0}75%{opacity:1}80%{opacity:0}85%{opacity:1}90%{opacity:0;right:-21px}95%{opacity:1;right:80px}96%{right:-21px}100%{opacity:0;right:-21px}}.wrap{font-size:18px;font-weight:700;left:25%;letter-spacing:5px;margin-left:-80px;margin-top:-40px;position:absolute;top:50%;width:68%}.bg{padding:30px 30px 30px 0;background:#306f99;-moz-animation:bg 1.5s linear infinite;-webkit-animation:bg 1.5s linear infinite;animation:bg 1.5s linear infinite;-moz-box-shadow:inset 0 0 45px 30px black;-webkit-box-shadow:inset 0 0 45px 30px black;box-shadow:inset 0 0 45px 30px black}.loading{position:relative;text-align:right;text-shadow:0 0 6px#bce4ff;height:20px;width:150px;margin:0 auto}.loading span{display:block;text-transform:uppercase;position:absolute;right:30px;height:20px;width:400px;line-height:20px}.loading span:after{content:"";display:block;position:absolute;top:-2px;right:-21px;height:20px;width:16px;background:#eaf7ff;-moz-box-shadow:0 0 15px#bce4ff;-webkit-box-shadow:0 0 15px#bce4ff;box-shadow:0 0 15px#bce4ff;-moz-animation:blink 3.4s infinite;-webkit-animation:blink 3.4s infinite;animation:blink 3.4s infinite}.loading span.title{-moz-animation:title 3.4s linear infinite;-webkit-animation:title 3.4s linear infinite;animation:title 3.4s linear infinite}.loading span.text{-moz-animation:title 3.4s linear 1.7s infinite;-webkit-animation:title 3.4s linear 1.7s infinite;animation:title 3.4s linear 1.7s infinite;opacity:0}</style></blockquote>
<div dir="ltr" style="text-align: left;">
</div>
<br />
<span style="font-family: inherit;">الآن بعد اضافة الكود قم بحفظ القالب وتمتع بالاضافة الرائعة :)</span><br />
<div style="text-align: right;">
<span style="font-family: inherit;">ان اعجبتك الاضافة لا تنسى ان تتحفنا بتعليقك حول الموضوع وشكراا</span></div>
<div style="text-align: right;">
<span style="font-family: inherit;"><br /></span></div>
<div style="text-align: center;">
<span style="background-color: #cc0000; color: white; font-family: inherit;">لا احل نقل الموضوع بدون ذكر للمصدر.</span></div>
</div>
</div>

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

إقرأ المزيد

اضافة اكثر الزوار تعليقا لمدونات بلوجر

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4iSkSBrABjpVSmTfufVboZIuwe-CzJEwmuFV4CM1-5gqvohMCZivGFtuj6ctZVUh18fZTbZGfC1Pn04aLNsx8JchyphenhyphenZu_9kQ0uWn1FVJkJIcbEQclws841eyJpNZJYZk8SbyQvSApJ5Ds/s1600/%D8%A7%D8%B6%D8%A7%D9%81%D8%A9+%D8%A7%D9%83%D8%AB%D8%B1+%D8%A7%D9%84%D8%B2%D9%88%D8%A7%D8%B1+%D8%AA%D8%B9%D9%84%D9%8A%D9%82%D8%A7.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"></a></div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4iSkSBrABjpVSmTfufVboZIuwe-CzJEwmuFV4CM1-5gqvohMCZivGFtuj6ctZVUh18fZTbZGfC1Pn04aLNsx8JchyphenhyphenZu_9kQ0uWn1FVJkJIcbEQclws841eyJpNZJYZk8SbyQvSApJ5Ds/s1600/%D8%A7%D8%B6%D8%A7%D9%81%D8%A9+%D8%A7%D9%83%D8%AB%D8%B1+%D8%A7%D9%84%D8%B2%D9%88%D8%A7%D8%B1+%D8%AA%D8%B9%D9%84%D9%8A%D9%82%D8%A7.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="اضافة اكثر الزوار تعليقا" border="0" height="200" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4iSkSBrABjpVSmTfufVboZIuwe-CzJEwmuFV4CM1-5gqvohMCZivGFtuj6ctZVUh18fZTbZGfC1Pn04aLNsx8JchyphenhyphenZu_9kQ0uWn1FVJkJIcbEQclws841eyJpNZJYZk8SbyQvSApJ5Ds/s1600/%D8%A7%D8%B6%D8%A7%D9%81%D8%A9+%D8%A7%D9%83%D8%AB%D8%B1+%D8%A7%D9%84%D8%B2%D9%88%D8%A7%D8%B1+%D8%AA%D8%B9%D9%84%D9%8A%D9%82%D8%A7.png" title="اضافة اكثر الزوار تعليقا" width="600" /></a>
<br />
<div dir="rtl" style="text-align: right;">
<div style="text-align: justify;">
<br /></div>
<h3 style="text-align: justify;">
اضافة اكثر الزوار تعليقا لمدونات بلوجر :</h3>
<div style="text-align: justify;">
باسم الله الرحمان الرحيم والصلاة والسلام على اشرف المرسلين، أما بعد :</div>
<div style="text-align: justify;">
السلام عليكم ورحمة الله تعالى وركاته، مرحبا بكم متتبعي وزوار مدونة تدوين باحتراف، في هذا الموضوع ان شاء الله سنتطرق الى موضوع واضافة مهمة وهي " اضافة اكثر الزوار تعليقا لمدونات بلوجر "، حيث هذه الاضافة تقوم بعرض آخر تعليقات الزوار، وتقوم بادراجها بالترتيب، فالزائر الأكثر تعليقا يفوز بالمرتبة الاولى، ولهذه الاضافة اهمية كبيرة بحيث تشجع وتحث الزوار على التعليق على مواضيع مدونتك وبالتالي سيزيد التفاعل ونشاط المدونة وهذا ما يمكن ان يزيد من ارباح مدونتك ان كنت تستعمل احدى طرق الربح. ومن اجل اضافة هذه الاداة يجب عليك ان تتابع الطريقة التي ساقوم بعرضها في الفقرة الثانية.<br />
<br />
<b><span style="color: #3d85c6;">معاينة الاضافة : <a href="http://hightechtemp.blogspot.com/" rel="nofollow" target="_blank">من هنا</a></span></b><br />
<br />
<h3>
طريقة اضافة اداة اكثر الزوار تعليقا في المدونة :</h3>
<div>
من اجل هذا يجب عليك :</div>
<div>
- التوجه الى لوحة تحكم مدونتك</div>
<div>
- ادخل الى التخطيط </div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div>
- قم باضافة اداة جديدة (Add a Gadget)، واختر أداة (html/javascript)</div>
<div>
- الآن فقط قم بكتابة العنوان مثلا "أكثر الزوار تعليقا" ثم الصق الكود الموجود اسفل في الصندوق الكبير</div>
<h3>
كود الاضافة :</h3>
<div dir="ltr" style="text-align: left;">
<blockquote class="tr_bq">
<style type="text/css"><br />
.top-commentators {margin: 3px 0px;border-bottom: 1px dotted #CCC;font-family: arial;color: #FF764C;}.top-commentators b{color: rgb(132, 132, 132);}<br />
.avatar-top-commentators {<br />
vertical-align:middle;<br />
border-radius: 30px;}.top-commentators .commenter-link-name {padding-left:0;}<br />
</style><br />
<script type="text/javascript"><br />
<span style="color: blue;">var maxTopCommenters = 10;</span>var minComments = 1; <br />
var numDays = 0;     <br />
var excludeMe = true; <br />
var excludeUsers = ["Anonymous", "someotherusertoexclude"];<br />
var maxUserNameLength = 42;<br />
//<br />
var txtTopLine = '<b>[#].</b> [image] ([user]) ([count]) ';<br />
var txtNoTopCommenters = 'No top commentators at this time.';<br />
var txtAnonymous = '';<br />
//<br />
var sizeAvatar = 45;<br />
var cropAvatar = true;<br />
//<br />
var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgilju6YhZhqypFDs-JX4SKofnLmnpcLy_Hf0mOWZenIj-_jddNgbM0CWbS4i3NZ2zFd8qW7hUQujqN4VeQhpypAFPaSWYiQ30HJRN2UHtXGauLBl-omHJN517tQy4KmrQqJVtQKfQHUGaj/s1600/avatar_blue_m_96.png" + sizeAvatar;<br />
var urlAnoAvatar = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ9uNJWqWc9macHxvuTR6xJ4fkXF6YwMQNvo3vgQEV9HhNUaHhIzJnzpkAyPSVeolgOeq_Bkxt85ENkYE5adsNJ8XWbUFid146th-dXblIekgXYcV4Ivo4M5bv4EGqCuVZz26wrwiyumR1/s1600/avatar1.png' + sizeAvatar;<br />
var urlMyProfile = '';<br />
var urlMyAvatar = '';<br />
if(!Array.indexOf) {<br />
 Array.prototype.indexOf=function(obj) {<br />
  for(var i=0;i<this.length;i++) if(this[i]==obj) return i;<br />
  return -1;<br />
}}<br />
function replaceTopCmtVars(text, item, position)<br />
{<br />
  if(!item || !item.author) return text;<br />
  var author = item.author;<br />
  var authorUri = "";<br />
  if(author.uri && author.uri.$t != "")<br />
    authorUri = author.uri.$t;<br />
  var avaimg = urlAnoAvatar;<br />
  var bloggerprofile = "http://www.blogger.com/profile/";<br />
  if(author.gd$image && author.gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)<br />
    avaimg = author.gd$image.src;<br />
  else {<br />
    var parseurl = document.createElement('a');<br />
    if(authorUri != "") {<br />
      parseurl.href = authorUri;<br />
      avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname;<br />
    }<br />
  }<br />
  if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "")<br />
    avaimg = urlMyAvatar;<br />
  if(avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "")<br />
    avaimg = urlNoAvatar;<br />
  var newsize="s"+sizeAvatar;<br />
  avaimg = avaimg.replace(/\/s\d\d+-c\//, "/"+newsize+"-c/");<br />
  if(cropAvatar) newsize+="-c";<br />
  avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/"+newsize+"/");<br />
  var authorName = author.name.$t;<br />
  if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)<br />
    authorName = txtAnonymous;<br />
  var imgcode = '<img class="avatar-top-commentators" height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="'+avaimg+'" />';<br />
  if(authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>';<br />
  if(maxUserNameLength > 3 && authorName.length > maxUserNameLength)<br />
    authorName = authorName.substr(0, maxUserNameLength-3) + "...";<br />
  var authorcode = authorName;<br />
  if(authorUri!="") authorcode = '<a class="commenter-link-name" href="'+authorUri+'">'+authorcode+'</a>';<br />
  text = text.replace('[user]', authorcode);<br />
  text = text.replace('[image]', imgcode);<br />
  text = text.replace('[#]', position);<br />
  text = text.replace('[count]', item.count);<br />
  return text;<br />
}<br />
var topcommenters = {};<br />
var ndxbase = 1;<br />
function showTopCommenters(json) {<br />
  var one_day=1000*60*60*24;<br />
  var today = new Date();<br />
  if(urlMyProfile == "") {<br />
    var elements = document.getElementsByTagName("*");<br />
    var expr = /(^| )profile-link( |$)/;<br />
    for(var i=0 ; i<elements.length ; i++)<br />
      if(expr.test(elements[i].className)) {<br />
        urlMyProfile = elements[i].href;<br />
        break;<br />
      }<br />
  }<br />
  if(json && json.feed && json.feed.entry && json.feed.entry.length) for(var i = 0 ; i < json.feed.entry.length ; i++ ) {<br />
    var entry = json.feed.entry[i];<br />
    if(numDays > 0) {<br />
      var datePart = entry.published.$t.match(/\d+/g);<br />
      var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);<br />
  <br />
      var days = Math.ceil((today.getTime()-cmtDate.getTime())/(one_day));<br />
      if(days > numDays) break;<br />
    }<br />
    var authorUri = "";<br />
    if(entry.author[0].uri && entry.author[0].uri.$t != "")<br />
      authorUri = entry.author[0].uri.$t;<br />
    if(excludeMe && authorUri != "" && authorUri == urlMyProfile)<br />
      continue;<br />
    var authorName = entry.author[0].name.$t;<br />
    if(excludeUsers.indexOf(authorName) != -1)<br />
      continue;<br />
    var hash=entry.author[0].name.$t + "-" + authorUri;<br />
    if(topcommenters[hash])<br />
      topcommenters[hash].count++;<br />
    else {<br />
      var commenter = new Object();<br />
      commenter.author = entry.author[0];<br />
      commenter.count = 1;<br />
      topcommenters[hash] = commenter;<br />
    }<br />
  }<br />
  if(json && json.feed && json.feed.entry && json.feed.entry.length && json.feed.entry.length == 200) {<br />
    ndxbase += 200;<br />
    document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&start-index='+ndxbase+'&alt=json-in-script&callback=showTopCommenters"></'+'script>');<br />
    return;<br />
  }<br />
  // convert object to array of tuples<br />
  var tuplear = [];<br />
  for(var key in topcommenters) tuplear.push([key, topcommenters[key]]);<br />
  tuplear.sort(function(a, b) {<br />
    if(b[1].count-a[1].count)<br />
        return b[1].count-a[1].count;<br />
    return (a[1].author.name.$t.toLowerCase() < b[1].author.name.$t.toLowerCase()) ? -1 : 1;<br />
  });<br />
  var realcount = 0;<br />
  for(var i = 0; i < maxTopCommenters && i < tuplear.length ; i++) {<br />
    var item = tuplear[i][1];<br />
    if(item.count < minComments)<br />
        break;<br />
    document.write('<di'+'v class="top-commentators">');<br />
    document.write(replaceTopCmtVars(txtTopLine, item, realcount+1));<br />
    document.write('</d'+'iv>');<br />
    realcount++;<br />
  }<br />
  if(!realcount)<br />
    document.write(txtNoTopCommenters);<br />
}<br />
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></'+'script>');<br />
</script><a style="float: left; font: normal 10px tahoma; color: #BBB;" target="_blank" href="https://tadwinpro.blogspot.com">تدوين</a><br />
 </blockquote>
<div dir="rtl" style="text-align: right;">
<b><span style="font-size: large;"><br /></span></b></div>
<div dir="rtl" style="text-align: right;">
<b><span style="font-size: large;">التعديل على الاضافة : </span></b></div>
<div dir="rtl" style="text-align: justify;">
<br />
- <span style="color: #674ea7;">var maxTopCommenters = 10 </span>: هذا الكود مسؤول عن عرض عدد من التعليقات، غير العدد 10 بعدد التعليقات التي تريدها ان تظهر .</div>
<div dir="rtl" style="text-align: justify;">
<br /></div>
<div dir="rtl" style="text-align: justify;">
- الآن بعد لصق الكود قم بالضغط على حفظ ومبوووك عليك الاضافة :)</div>
<div dir="rtl" style="text-align: justify;">
<br /></div>
<div dir="rtl" style="text-align: justify;">
<br /></div>
<div dir="rtl" style="text-align: left;">
~ لا تنسى باتحافنا بتعليقك  ~</div>
<div dir="rtl" style="text-align: center;">
<span style="background-color: #cc0000; color: #f3f3f3;">لا احل نقل الموضوع بدون ذكر المصدر!</span> </div>
</div>
</div>
</div>
</div>

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

إقرأ المزيد

شرح تركيب وتعديل اضافة اقرا المزيد

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj43tFY1xj9ZnfjIlShZJ1TUvB9dXaTNRc_y_Cha7_G1qhszNDQS-pBVNTc_Gulw_LllWToyTkE-JZU6rWQBz3pZXpxX5t9sW87IPLvMEOEg_LY-lMlfW8G7lZbd1ILjItlYPIunyw0VPw/s1600/%D8%A7%D8%B6%D8%A7%D9%81%D8%A9+%D8%A7%D9%82%D8%B1%D8%A7+%D8%A7%D9%84%D9%85%D8%B2%D9%8A%D8%AF.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="شرح تركيب وتعديل اضافة اقرا المزيد" border="0" height="188" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj43tFY1xj9ZnfjIlShZJ1TUvB9dXaTNRc_y_Cha7_G1qhszNDQS-pBVNTc_Gulw_LllWToyTkE-JZU6rWQBz3pZXpxX5t9sW87IPLvMEOEg_LY-lMlfW8G7lZbd1ILjItlYPIunyw0VPw/s400/%D8%A7%D8%B6%D8%A7%D9%81%D8%A9+%D8%A7%D9%82%D8%B1%D8%A7+%D8%A7%D9%84%D9%85%D8%B2%D9%8A%D8%AF.png" title="شرح تركيب وتعديل اضافة اقرا المزيد" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">شرح تركيب وتعديل اضافة اقرا المزيد</td></tr>
</tbody></table>
<div class="separator" dir="rtl" style="clear: both; text-align: right;">
 في
 هذا الدرس اود ان اتطرق معكم الى اضافة مهمة بالنسبة لكل من يستخدم <a href="http://tadwinpro.blogspot.com/2013/12/blogger-vs-wordpress.html" target="_blank"><b>منصة بلوجر</b></a>، انها <b>اضافة " اقرا المزيد "</b>، هذه الاضافة تعد من أهم الاضافات 
واكثرها استعمالا، خاصة عند المدونين العرب وتفيد هذه الاضافة <b>اختصار 
التدوينات</b> في الصفحة الرئيسية مما تعطي سرعة في التحميل للمدونة وكذى 
جمالية، كما تمكنك هذه الاضافة الى عرض عدد كبير من التدوينات في الصفحة 
الرئيسية عكس المدونات التي لا تستخدمها فهي تقتصر على عدد محدود من 
التدوينات في الصفحة الرئيسية. هذه الاضافة تتخذ ثلاثة اشكال على حسب رغبة 
المدون، فيمكنك جعل صورة التدوينة في اليمين كما يمكنك جعلها في اليسار 
والوسط ايضا.</div>
<div class="separator" dir="rtl" style="clear: both; text-align: right;">
<br /></div>
<div class="separator" dir="rtl" style="clear: both; text-align: right;">
لذلك في هذا الموضوع سوف نتطرق الى <b>كيفية تركيب اضافة " اقرا المزيد "</b> باشكالها الثلاث بالاضافة الى شرح بعض امكانيات التعديل عليها.</div>
<div class="separator" dir="rtl" style="clear: both; text-align: right;">
<br /></div>
<div class="separator" dir="rtl" style="clear: both; text-align: right;">
<br /></div>
<h3 class="separator" dir="rtl" style="clear: both; text-align: right;">
<span style="font-size: large;"><span style="font-family: Arial,Helvetica,sans-serif;"><b> كود جعل الصورة في اليمين :</b></span></span></h3>
</div>
<bt></bt></div>
<blockquote class="tr_bq">
<script type='text/javascript'> <b>summary_noimg = 250; summary_img = 200; img_thumb_height = 150; img_thumb_width = 150;</b> </script> <script type='text/javascript'> //<![CDATA[  function removeHtmlTag(strx,chop){     if(strx.indexOf("<")!=-1)     {         var s = strx.split("<");         for(var i=0;i<s.length;i++){             if(s[i].indexOf(">")!=-1){                 s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);             }         }         strx =  s.join("");     }     chop = (chop < strx.length-1) ? chop : strx.length-2;     while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;     strx = strx.substring(0,chop-1);     return strx+'...'; }  function createSummaryAndThumb(pID){     var div = document.getElementById(pID);     var imgtag = "";     var img = div.getElementsByTagName("img");     var summ = summary_noimg;     if(img.length>=1) {            imgtag = '<span style="float:right; padding:0px 0px 5px 10px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';         summ = summary_img;     }      var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';     div.innerHTML = summary; }  //]]> </script></blockquote>
</div>
<div dir="rtl" style="text-align: right;">
قم بوضع الكود أعلاه فوق كود <span style="color: white;"><span style="background-color: #3d85c6;"><b></head></b></span></span> بعد البحث عليه في صندوق تحرير القالب (لتسهيل الأمر قم بالبحث عنه عن طريق Ctrl+F).<br />
<br /></div>
<h3 dir="rtl" style="text-align: right;">
<span style="font-size: large;"><span style="font-family: Arial,Helvetica,sans-serif;">
كود جعل الصورة في اليسار :</span></span></h3>
</div>
<blockquote class="tr_bq">
<script type='text/javascript'> <b>summary_noimg = 250; summary_img = 200; img_thumb_height = 150; img_thumb_width = 150;</b> </script> <script type='text/javascript'> //<![CDATA[  function removeHtmlTag(strx,chop){     if(strx.indexOf("<")!=-1)     {         var s = strx.split("<");         for(var i=0;i<s.length;i++){             if(s[i].indexOf(">")!=-1){                 s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);             }         }         strx =  s.join("");     }     chop = (chop < strx.length-1) ? chop : strx.length-2;     while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;     strx = strx.substring(0,chop-1);     return strx+'...'; }  function createSummaryAndThumb(pID){     var div = document.getElementById(pID);     var imgtag = "";     var img = div.getElementsByTagName("img");     var summ = summary_noimg;     if(img.length>=1) {            imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';         summ = summary_img;     }      var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';     div.innerHTML = summary; }  //]]> </script></blockquote>
</div>
<div dir="rtl" style="text-align: right;">
كما العادة اضفه فوق كود <span style="color: white;"><span style="background-color: #3d85c6;"><b></head></b></span></span></div>
</div>
<div dir="rtl" style="text-align: right;">
<br /></div>
<h3 dir="rtl" style="text-align: right;">
<span style="font-size: large;"><span style="font-family: Arial,Helvetica,sans-serif;">كود جعل الصورة في الوسط :</span></span></h3>
</div>
<blockquote class="tr_bq">
<script type='text/javascript'> <b>summary_noimg = 250;</b> <b>summary_img = 200; img_thumb_height = 150; img_thumb_width = 150;</b> </script> <script type='text/javascript'> //<![CDATA[  function removeHtmlTag(strx,chop){     if(strx.indexOf("<")!=-1)     {         var s = strx.split("<");         for(var i=0;i<s.length;i++){             if(s[i].indexOf(">")!=-1){                 s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);             }         }         strx =  s.join("");     }     chop = (chop < strx.length-1) ? chop : strx.length-2;     while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;     strx = strx.substring(0,chop-1);     return strx+'...'; }  function createSummaryAndThumb(pID){     var div = document.getElementById(pID);     var imgtag = "";     var img = div.getElementsByTagName("img");     var summ = summary_noimg;     if(img.length>=1) {            imgtag = '<div class="separator" style="clear: both; text-align: center;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';         summ = summary_img;     }      var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';     div.innerHTML = summary; }  //]]> </script></blockquote>
</div>
<div dir="rtl" style="text-align: right;">
ان كنت تود جعل الصورة تظهر في الوسط قم بتركيب الكود أعلاه قبل/فوق  كود <span style="color: white;"><span style="background-color: #3d85c6;"><b></head></b></span></span></div>
</div>
<div dir="rtl" style="text-align: right;">
<br /></div>
<div dir="rtl" style="text-align: right;">
<br /></div>
<h3 dir="rtl" style="text-align: right;">
<span style="font-size: large;"><span style="font-family: Arial,Helvetica,sans-serif;">التعديل على اضافة اقرا المزيد :</span></span></h3>
</div>
<div dir="rtl" style="text-align: right;">
للتعديل على الاضافة قم بتغيير الآتي الى مايناسب مدونتك :</div>
<ul dir="rtl" style="text-align: right;">
<li><span style="color: white;"><span style="background-color: #38761d;">summary_noimg = 250;</span></span>      عدد أحرف الملخص في حالة عدم وجود اية صورة</li>
<li><span style="color: white;"><span style="background-color: #38761d;">summary_img = 200;</span></span>          عدد الاحرف في حالة وجود صورة</li>
<li><span style="color: white;"><span style="background-color: #38761d;">img_thumb_height = 150;</span></span>    الارتفاع الخاص بالصورة</li>
<li><span style="background-color: #38761d;"><span style="color: white;">img_thumb_width = 150;</span></span>    عرض الصورة</li>
</ul>
</div>
<div dir="rtl" style="text-align: right;">
الى هنا تكون قد قمت بتركيب وتعديل اضافة اقرا المزيد في مدونتك بنجاح.</div>
<div dir="rtl" style="text-align: right;">
ان اعجبك الموضوع لا تنسى ان تضغط على زر الاعجاب ومشاركته مع اصدقائك عن طريق ازرار المواقع الاجتماعية الموجودة في الـأسفل وأتمنى ان تكون قد استفدت من الموضوع.</div>
<div dir="rtl" style="text-align: center;">
<span style="font-size: x-small;"><span style="color: white;"><span style="background-color: #cc0000;">لا أحل نقل الموضوع بدون ذكر المصدر</span></span></span></div>
</div>

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

إقرأ المزيد

اضافة هل اعجبك الموضوع لمدونات بلوجر

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="rtl" style="text-align: center;">
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAfx2Npw_AUd75aGULhFdyaItiVSX_8b3hrGlGh3TPQ7JlcKocK9lU64fQHPJeE9gAMupf7V-psuqtUbPosF_x8PvXeu2frjTO_DFHcEu2FgJYo0fP9Qkf-w0bOVFUNCunM_WeiWy3AV8/s1600/%D8%A7%D8%B6%D8%A7%D9%81%D8%A9+%D9%87%D9%84+%D8%A7%D8%B9%D8%AC%D8%A8%D9%83+%D8%A7%D9%84%D9%85%D9%88%D8%B6%D9%88%D8%B9+%D9%84%D9%85%D8%AF%D9%88%D9%86%D8%A7%D8%AA+%D8%A8%D9%84%D9%88%D8%AC%D8%B1.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="اضافة هل اعجبك الموضوع لمدونات بلوجر" border="0" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAfx2Npw_AUd75aGULhFdyaItiVSX_8b3hrGlGh3TPQ7JlcKocK9lU64fQHPJeE9gAMupf7V-psuqtUbPosF_x8PvXeu2frjTO_DFHcEu2FgJYo0fP9Qkf-w0bOVFUNCunM_WeiWy3AV8/s1600/%D8%A7%D8%B6%D8%A7%D9%81%D8%A9+%D9%87%D9%84+%D8%A7%D8%B9%D8%AC%D8%A8%D9%83+%D8%A7%D9%84%D9%85%D9%88%D8%B6%D9%88%D8%B9+%D9%84%D9%85%D8%AF%D9%88%D9%86%D8%A7%D8%AA+%D8%A8%D9%84%D9%88%D8%AC%D8%B1.png" title="اضافة هل اعجبك الموضوع لمدونات بلوجر" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">اضافة هل اعجبك الموضوع لمدونات بلوجر</td></tr>
</tbody></table>
<br /></div>
<div dir="rtl" style="text-align: right;">
باسم الله الرحمان الرحيم</div>
<div dir="rtl" style="text-align: right;">
<br /></div>
<div dir="rtl" style="text-align: right;">
في هذا الموضوع سوف اقدم لكم اضافة مهمة لأصحاب مدونات بلوجر بحيث تجعل الزائر يشارك الموضوع الدي قرأه في مواقع التواصل الاجتماعية بحيث تضم هذه الاضافة مجموعة من ازرار النشر والاعجاب ( فيسبوك، جوجل بلس، تويتر ... ) لذلك في هذا الموضوع سوف نتعلم كيف اضافة هذه الاضافة "<b>اضافة هل اعجبك الموضوع</b>".</div>
<div dir="rtl" style="text-align: center;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcmbRQn2Sb-aSI6N2hNcBnk5V5Re2nYlngH4TFWgO9wEKmAuMYztv65BwNGrXKXAyEJfYqQD-jrJfslleKiREWsudGNaRe-8SA8ufl3J9SPvt819FqZqFugD3guz6Viax7Xhf9rXwDNfU/s1600/%D8%A7%D8%B6%D8%A7%D9%81%D8%A9+%D9%87%D9%84+%D8%A7%D8%B9%D8%AC%D8%A8%D9%83+%D8%A7%D9%84%D9%85%D9%88%D8%B6%D9%88%D8%B9+%D9%84%D9%85%D8%AF%D9%88%D9%86%D8%A7%D8%AA+%D8%A8%D9%84%D9%88%D8%AC%D8%B1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="اضافة هل اعجبك الموضوع لمدونات بلوجر" border="0" height="33" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcmbRQn2Sb-aSI6N2hNcBnk5V5Re2nYlngH4TFWgO9wEKmAuMYztv65BwNGrXKXAyEJfYqQD-jrJfslleKiREWsudGNaRe-8SA8ufl3J9SPvt819FqZqFugD3guz6Viax7Xhf9rXwDNfU/s400/%D8%A7%D8%B6%D8%A7%D9%81%D8%A9+%D9%87%D9%84+%D8%A7%D8%B9%D8%AC%D8%A8%D9%83+%D8%A7%D9%84%D9%85%D9%88%D8%B6%D9%88%D8%B9+%D9%84%D9%85%D8%AF%D9%88%D9%86%D8%A7%D8%AA+%D8%A8%D9%84%D9%88%D8%AC%D8%B1.png" title="اضافة هل اعجبك الموضوع لمدونات بلوجر" width="400" /></a></div>
<br /></div>
<div dir="rtl" style="text-align: right;">
<h3 style="text-align: right;">
<span style="font-family: Arial,Helvetica,sans-serif;"><span style="font-size: large;">تركيب اضافة هل اعجبك الموضوع :</span></span></h3>
</div>
<div dir="rtl" style="text-align: right;">
لا تنس اخذ نسخة احتياطية لقالبك</div>
<ul dir="rtl" style="text-align: right;">
<li>توجه الى لوحة تحكم مدونتك</li>
<li>ادخل الى قائمة " قالب "</li>
<li>ابحث عن الكود التالي </head></li>
<li>الصق الكود التالي قبله</li>
</ul>
<blockquote class="tr_bq">
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/> </blockquote>
</div>
<ul dir="rtl" style="text-align: right;">
<li>ابحث عن الكود التالي  <div class='post-footer'> </li>
<li>بعد عثورك على الكود الصق بعده مباشرة الكود التالي:</li>
</ul>
<blockquote class="tr_bq">
<div style="text-align: left;">
<span style="font-family: Verdana,sans-serif;"><b:if cond='data:blog.pageType == &quot;item&quot;'> <div style='width: 95%; padding: 12px 15px; margin: 10px 0 0; border-bottom: 3px solid #d8d8d8; background: rgb(245, 245, 245);'> <span style='color: rgb(131, 131, 131); font: 13px droidkufi-bold;'> هل أعجبك الموضوع &#1567; </span> <div style='float: left; '> <span class='st_plusone_hcount' displayText='Google +1'/> <span class='st_facebook_hcount' displayText='Facebook'/> <span class='st_twitter_hcount' displayText='Tweet'/> </div> </div></b:if></span></div>
</blockquote>
<div>
<ul dir="rtl" style="text-align: right;">
</ul>
</div>
</div>
<div dir="rtl" style="text-align: right;">
كما توظحه الصورة التالية : اضغط على الصورة لتراها بحجمها الاصلي</div>
<div dir="rtl" style="text-align: right;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWP983l2xffVpho_j5kpSLfL_SCGFiLDazaDfUw355FdiHHxq5r9Y5gbUujSFb9AnjFZsHrCg_34qpqMUkaYH1B6ZkHyvmR1AURhI1NViw8KW1wV25l3jZ_qYkrJSvckEOidAbjd_MTv0/s1600/%D8%A7%D8%B6%D8%A7%D9%81%D8%A9+%D9%87%D9%84+%D8%A7%D8%B9%D8%AC%D8%A8%D9%83+%D8%A7%D9%84%D9%85%D9%88%D8%B6%D9%88%D8%B9+%D9%84%D9%85%D8%AF%D9%88%D9%86%D8%A7%D8%AA+%D8%A8%D9%84%D9%88%D8%AC%D8%B1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="اضافة هل اعجبك الموضوع لمدونات بلوجر" border="0" height="190" loading="lazy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWP983l2xffVpho_j5kpSLfL_SCGFiLDazaDfUw355FdiHHxq5r9Y5gbUujSFb9AnjFZsHrCg_34qpqMUkaYH1B6ZkHyvmR1AURhI1NViw8KW1wV25l3jZ_qYkrJSvckEOidAbjd_MTv0/s400/%D8%A7%D8%B6%D8%A7%D9%81%D8%A9+%D9%87%D9%84+%D8%A7%D8%B9%D8%AC%D8%A8%D9%83+%D8%A7%D9%84%D9%85%D9%88%D8%B6%D9%88%D8%B9+%D9%84%D9%85%D8%AF%D9%88%D9%86%D8%A7%D8%AA+%D8%A8%D9%84%D9%88%D8%AC%D8%B1.png" title="اضافة هل اعجبك الموضوع لمدونات بلوجر" width="400" /></a></div>
<div dir="rtl" style="text-align: right;">
الآن قم بحفظ القالب ومبروك عليك الاضافة</div>
<div dir="rtl" style="text-align: right;">
الى هنا يكون موضوعنا " <b>اضافة هل اعجبك الموضوع لمدونات بلوجر</b> " قد انتها اتمنى ان تكون الاضافة قد اعجبتك والى موضوع آخر انشاء الله</div>
<div dir="rtl" style="text-align: right;">
<br /></div>
<div dir="rtl" style="text-align: center;">
<span style="background-color: #cc0000;"><span style="color: white;">لا احل نقل الموضوع بدون ذكر المصدر</span></span></div>
<div dir="rtl" style="text-align: center;">
<br /></div>
</div>

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

إقرأ المزيد

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

صندوق اعجابات الفيس بوك الجديد والأنيق

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

توجيه زوار مدونة بلوجر إلى مدونة أخرى

صندوق اقتباس لمدونات بلوجر

اضافة نافذة منبثقة - كود نافذة منبثقة لمدونات بلوجر

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

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

طريقة تثبيت أداة في السيدبار

فيديو - اضافة صندوق اعجاب الفيسبوك عائم في مدونة بلوجر

اضافة جاري تحميل المدونة لمدونات بلوجر

اضافة اكثر الزوار تعليقا لمدونات بلوجر

شرح تركيب وتعديل اضافة اقرا المزيد

اضافة هل اعجبك الموضوع لمدونات بلوجر

Ads

المشاركات الشائعة

كن عضو في المدونة !

التسميات

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