إضافة أداة آخر التعليقات مع صور مصغرة للأفاتار

جئت لكم اليوم بأداة آخر التعليقات في المدونة ولكن ما يميز هذه الأداة عن غيرها هو أنها تظهر بجانب التعليق صورة مصغرة للأفاتار الخاص بصاحب التعليق بشكل جميل.

كما يمكنكم مشاهدة الإضافة مباشرة في مدونتي وذلك لأخد فكرة أفضل عن هذه الإضافة.

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

 توجه إلى التخطيط ثم إضافة أداة ثم   html /javascript   وبعد ذلك انسخ الكود التالي في الأداة :

<style type="text/css"> ul.w2b_recent_comments{list-style:none;margin:0;padding:0;} .w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;} .w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;} .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;} .w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;} .w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;} </style> <script type="text/javascript"> //<![CDATA[ // Recent Comments Settings var numComments = 4, showAvatar = true, avatarSize = 60, roundAvatar = true, characters = 60, showMorelink = false, moreLinktext = "للمزيد", defaultAvatar = "http://www.gravatar.com/avatar/?d=mm", hideCredits = true; //]]> </script> <script type="text/javascript" src="http://widgets.way2blogging.org/blogger-widgets/w2b-recent-comments-gravatar.js"></script> <script type="text/javascript" src="http://www.ency-bl.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script> 

 ولا تنسى تغيير   src="http://www.ency-bl.com/feeds/comments/default   برابط مدونتك

  ويمكنك التعديل على هذا الكود لتحديد عدد التعليقات التي تريدها أن تظهر    numComments   = 4,

وإلى هنا أصل إلى نهاية هذا الشرح البسيط وأتمنى أن تعجبكم الإضافة

تابع القراءة

شرح إستبدال روابط الرئيسية ورسائل أحذث وأقدم بصور جميلة

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

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

ويمكنك مشاهذة الإضافة مباشرة أسفل هذا الموضوع

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

 بداية يجب أخد نسخة احتياطية من قالبك احتياطا في حالة حذوث مشكل ما

1. إذهب إلى لوحة تحكم مدونتك ثم إلى قالب المدونة ثم تحرير Html

2. الآن إضغط على متابعة تم علم على توسيع قوالب عناصر المستخدم

إستبدال رابط رسائل أقدم :

إبحث عن  <data:olderPageTitle/> واستبدله بالكود التالي :

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgliI6qp5w8ufNBiYg6QSENkRDqGdrhbGqmBu7poFlQciwEWHeJbY4miGYPsCgGwBUYs9u8ZewspCvFRzCFmP-nBmp0CMIJbCocMBLUe1OTb-7vT8aqmZcaAYvI_8CW_j19mmtU-yhQGqqD/s1600/w2b_prev.png' style='border: 0 none;vertical-align: middle;'/>

إستبدال رابط رسائل أحذث :

إبحث عن   <data:newerPageTitle/>  واستبدله بالكود التالي :

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFPaI9GnVBYJ1UEbfia0EH_RGX_ubd4gxP8CG-NuL9rhjrLul8u-A1ZYZtYRjN1SrLkMEzUKaKyQOrlWWjWiSEui5wbNlgPKRSpJkw6v0Q0IgMg_idf7SdQZF9Csd3LEdOfk0R5peM20BO/s1600/w2b_next.png' style='border: 0 none;vertical-align: middle;'/>

إستبدال رابط الصفحة الرئيسية:

إبحث عن      <data:homeMsg/>   واستبدله بالكود التالي 

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3-v8X8uZd5mrxCc9htm-TFfOWR3O1w6NKMiDfTnsrsRgZ3_xRzzKabQJOOzCtbwWdQX3_Hknn-k0HiUMGFJBlLIrht1kX5XS957y-cIoTa2281NtVgVNMnfQVRFmo-t535bsJhUZrNCAy/s1600/w2b_home.png' style='border: 0 none;vertical-align: middle;'/>

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

تابع القراءة

حصريا على موسوعة بلوجر : أداة المواضيع العشوائية

 نبذة عن الإضافة

إضافة المواضيع العشوائية هي أداة جميلة ونادرة وبعد بحث طويل وجدتها وأحضرتها لكم ومن مميزات هذه الأداة أنها طريقة جميلة لتجديد المواضيع القديمة وإعادة الحيوية لها لأن في هذه الأداة ليس هناك معيار محدد لظهور المواضيع كأداة آخر المواضيع أو أداة المواضيع الشائعة، لأن المواضيع في هذه الإضافة تظهر بشكل عشوائي وتسمى باللغة الإنجليزية ب Random posts

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

ندخل إلى لوحة تحكم المدونة ثم التخطيط ثم إضافة أداة ثم html/javascript  نقوم بنسخ الكود أسفله : 

<style type='text/css'>
#random-posts img{float:right;margin-left:10px;border:1px solid #999;background:#FFF;width:36px;height:36px;padding:3px}
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=3;
var rdp_snippet_length=150;
var rdp_info='yes';
var rdp_comment='التعليقات';
var rdp_disable='Turn off comments';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'>
function random_posts(json){a=location.href;y=a.indexOf('?m=0');for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;if(y!=-1){rdp_posturl=rdp_posturl+'?m=0'}var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOxgDT_OV6Pn864RH6i3sFTv-sXrWxKtpEa_W7Ez8N5pX2u7c6LWfB56F6Ts_YLb6YH7r7QhIpXlEuhVvuhUbjagpGsTdtbLAylBtfT7rb0dPYT-t41KJuyH0FZfnd0yzfLd38j3iYLoAQ/"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
</ul>

 مع تغيير var rdp_numposts=3;  الرقم 3 بعدد المواضيع التي تريدها أن تظهر

وكالعادة لمن واجه أي مشكل مع الإضافة لا يتردد في ترك تعليق أسفل المواضيع.

تابع القراءة

إضافة تجعل مدونتك تتحذث كل اللغات

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

وكالعادة إليكم مثال مباشر عن الإضافة : إضغط هنا

الطريقة سهلة جدا وهي كالآتي : نقوم بلصق الكود أسفله داخل أداة html

<script type="text/javascript">
function showHide(shID) {
    if (document.getElementById(shID)) {
        if (document.getElementById(shID+'-show').style.display != 'none') {
            document.getElementById(shID+'-show').style.display = 'none';
            document.getElementById(shID).style.display = 'block';
        }
        else {
            document.getElementById(shID+'-show').style.display = 'inline';
            document.getElementById(shID).style.display = 'none';
        }
    }
}
</script>

<style>

 .google_translate img {
margin: 10px 20px 0px 20px;
    height: 24px;
    width: 24px;
        }
        .google_translate:hover img {
filter:alpha(opacity=0.30);
        -moz-opacity: 0.30;
        opacity: 0.30;
        border:0;
        }

.more {
    display: none;
a.showLink, a.hideLink {
    text-decoration: none;
    color: #0880C4;
    padding-left: 18px;
    background: transparent('down.gif') no-repeat left; }

a.hideLink {
    background: transparent url('up.gif') no-repeat left;
color: #0880C4;}

a.showLink:hover, a.hideLink:hover {
color: #0880C4;
 }

 </style>

 <div>

 <a class="google_translate" href="#" rel="nofollow" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4OD3ikJYVg1ZgwymR_1ZOkkZlMOzat-DBfV9qDoUlg-yVEcrERVxwGLK7hxXn0YSP-NDxOK7iCFdiOM1sqjG-lJ332iMVC0FJcSrvgUQ56YFnd71RWUsU5_cq5oMR9O7toADxiz9pKMKW/s1600/United+Kingdom(Great+Britain).png" style="cursor: pointer;margin-right:8px" width="24"/></a>

 <a class="google_translate" href="#" rel="nofollow" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuuEeQNEQ7dzUbYePm1hpWzNr_GMktBpcCLLjiLkm8Cd5pSdFaX82NpYIP48JXqCQ0HQs4KRptkC-ojR9y6oEyqNIMc2N7KWui09IejlmWhMN_FgxDxQRHFJyyIrShxi4QT2j9zBx-MWNQ/s1600/France.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

 <a class="google_translate" href="#" rel="nofollow" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiirJJ47kDZ2aI6RXitX6Mco7kCLlbcaKbkRxRIZ5rhNyU_1ufgZRktsVmsVAZGljIZiijNMUyngLqd8VAkiSqTLhwFPdRYFV9CTZPmgeLI5Y8vAAoXi0DLUZNPxRn1uC6gFqys4mFaI1n/s1600/Germany.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

 <a class="google_translate" href="#" rel="nofollow" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtMzC2noJJ-CNUnkTvpESMmA1llWIhuYzwOdhjMMRB5dSo1XKc7Z-sVbf8_akihcgaX8FCGaRTle-cAUsJqAGckLCkIEcJluJRffZgGQTTEbAL2jYJIpc1XErCqmtUQD6qhL7yjLha9z9C/s1600/Spain.png" style="cursor: pointer;margin-right:8px" width="24"/></a><a href="#" id="example-show" class="showLink"
onclick="showHide('example');return false;">More</a>
<div id="example" class="more">
 <a class="google_translate" href="#" rel="nofollow" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCRQMfQ4SYWw44RVu16nVF5oYnjnV5i-DjrhmdUHN_eYcPy0N9KK4uQqswEUVKNYYd3WiKAQlhyphenhyphenTdi4kqsrVFYcgiBgXehJ72kbBJlznbxYCO-m_2q2qA30vrY604s1v8J0tiV2UjSmy_L/s1600/Italy.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

 <a class="google_translate" href="#" rel="nofollow" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVf_oE8qyCvgfkYNzhwMiT0P6MwkQp-OfozYlJL6cKE6lGG8Ico9m8fVyuJ04-56dQ5sgvzrQSMebpLd1tI1EBOp_DAhrVWRRYV21u2KtAKEatwlRkfs2pz1IylezuvRb35SbuGi8bP_wH/s1600/Netherlands.png" style="cursor: pointer;margin-right:8px" width="24"/></a>
      <a class="google_translate" href="#" rel="nofollow" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9Z0gWJLllgA4NZKfdIc5jxBhn8vpwTV6NpSJxvWVys6e-Ip0EsEAgeL9SqnyEKYx6UgcjGQe_XhXYVSNEoJWeRvawaB8cITODc64mXJiXW3lHVs-dZQ8UnZ7bBhTmW7205U_35hiSaaBW/s1600/Russian+Federation.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

 <a class="google_translate" href="#" rel="nofollow" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTjmN02BMncGZDu8-t98yR_WVy7YpYrx76mVVnAU5EeJ669Rb5IeioiecJTLuctzKxS865-_mYeCTwiRjBKj5aOPnZ4PDUaJD32TleKAKzJ_x4-BH3P8V6qh_etbz0IkhWOoNghP-yN5Iu/s1600/Brazil.png" style="cursor: pointer;margin-right:8px" width="24"/></a>
<br />
 <a class="google_translate" href="#" rel="nofollow" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2F3Emmr67Cxlj93iuskenlhjNRqfBMnAwtT9lYt3aJyBugzxLfFU1a65J2dSwlEvzntqbosMkJLmGiVz9PrsNj1shfr7a2BL5JLbWAdQQ9zbJyyRRg35NgO73WQJonskvGKNLo1Oa7zet/s1600/Japan.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

 <a class="google_translate" href="#" rel="nofollow" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgORHjItR4EEHI7OkMvFCZ3tizJTyX6u_Rb004vhaRvOn9_C5bawGD5drF9p45XurhJoOjGb7chE6QgJ5qvo7kjvq5XnqOeloNW-KzDjAM8kkIAjDKVPxp-q9FElN4xnd-4w6H9Jb7CPouR/s1600/South+Korea.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

 <a class="google_translate" href="#" rel="nofollow" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg89LDWTm5HD8FR31M8S8BkNu-EFnc_WnunTYVXLdS_9Om9nn0mnfUeIDyXBQ7T7hZmWqeCsV4LuogHG64Z0UTzffW_l3_8noAUFFF2mTn589n_K5i0HJM6kMost106DF419Y6gyUVULnTm/s1600/Saudi+Arabia.png" style="cursor: pointer;margin-right:8px" width="24"/></a>

 <a class="google_translate" href="#" rel="nofollow" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7czh-cn&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm6yVjiDNes4UolZYWImOAVcwRHXlt34UkbZ00ypPrw9DRUnXz4oLhliKFeonH39xQ76nmqkJN_awqdIzXAF2Uw-9dZbbcnev78RMDKSJxHH8M7HPt1JWhxKe_-8bv3KSLPeorjo2yIF4s/s1600/China.png" style="cursor: pointer;margin-right:8px" width="24"/></a>
    <p><a href="#" id="example-hide" class="hideLink"
    onclick="showHide('example');return false;">Hide / </a><a href="http://helplogger.blogspot.com"><font size="1px">Get this widget</font></a></p>
</div>
     </div>

والآن هنيئا لك فقد أصبح موقعك يدعم عدة لغات ولو بشكل جزئي.

تابع القراءة

أزرار مشاركة المواقع الاجتماعية

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

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

لكن قبل ذلك إليكم صورة الإضافة :

 قم بتسجيل الدخول إلى لوحة التحكم بلوجر بعدها توجه إلى القالب ثم تحرير Html 

  قم بالبحث عن </body> ثم قم بوضع الكودالتالي قبله مباشرة 

 

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

في النهاية أتمنى أن يكون الموضوع قد نال إعجابكم وإلى موضوع آخر إن شاء الله.

تابع القراءة

أداة آخر المواضيع بشكل جميل واحترافي

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

 وهنا مثال مباشرعن الإضافة : إضغط هنا

بعد رؤيتكم للإضافة التي أتمنى أن تكون قد أعجبتكم نذهب الآن إلى الشرح.

ندخل إلى لوحة تحكم المدونة ثم التخطيط ثم إضافة أداة ثم html/javascript  نقوم بنسخ الكود أسفله : 

<script  type='text/javascript'> jQuery.noConflict(); </script>  <style>img.recent_thumb  {padding:1px;width:55px;height:55px;border:0;float:left;margin:0 0 5px  10px;}.recent_posts_with_thumbs {float: left;width: 100%;min-height:  70px;margin: 5px 0px 5px 0px;padding:  0;font-size:12px;}ul.recent_posts_with_thumbs li  {padding-bottom:5px;padding-top:5px;min-height:65px;}.recent_posts_with_thumbs  a {text-decoration:none;}.recent_posts_with_thumbs strong  {font-size:10px;}</style> <script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>  <script style='text/javascript'  src="http://glitter-text.googlecode.com/files/recentpostticker.js"  ></script> <script style='text/javascript'  src='http://glitter-text.googlecode.com/files/recentpostswiththumbnailsv3.js'></script>  <script style='text/javascript'> var numposts = 12; var  showpostthumbnails = true; var displaymore = false; var displayseparator  = false; var showcommentnum = false; var showpostdate = false; var  showpostsummary = false; var numchars = 100;  jQuery(document).ready(function($) {$('#sai').vTicker({ speed: 500,  pause: 3000, showItems: 5, animation: 'fade', mousePause: false, height:  0, direction: 'down' });}); </script> <div id="sai">
 <script  src='http://youngmaroc.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>  </div>
<a href=""> </a>

 مع تغيير ما باللون الأحمر youngmaroc.blogspot.com إلى عنوان مدونتك

ولتغيير عدد المواضيع التي ستظهر نغير ما باللون الأزرق   var numposts = 12

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

تابع القراءة

إضافة أداة الإنتقال إلى أعلى الصفحة

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

 وهذا مثال مباشر للإضافة لتتضح الفكرة أكثر

مثال مباشر 

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

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" >
/***********************************************
* Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Modified by www.helperblogger.com
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com for full source code
***********************************************/
var scrolltotop={
    //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
    //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
    controlHTML: '<img src="http://im13.gulfup.com/2012-04-24/133527218372.png" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
    controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
    anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
    state: {isvisible:false, shouldvisible:false},
    scrollup:function(){
        if (!this.cssfixedsupport) //if control is positioned using JavaScript
            this.$control.css({opacity:0}) //hide control immediately after clicking it
        var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
        if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
            dest=jQuery('#'+dest).offset().top
        else
            dest=0
        this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
    },
    keepfixed:function(){
        var $window=jQuery(window)
        var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
        var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
        this.$control.css({left:controlx+'px', top:controly+'px'})
    },
    togglecontrol:function(){
        var scrolltop=jQuery(window).scrollTop()
        if (!this.cssfixedsupport)
            this.keepfixed()
        this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
        if (this.state.shouldvisible && !this.state.isvisible){
            this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
            this.state.isvisible=true
        }
        else if (this.state.shouldvisible==false && this.state.isvisible){
            this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
            this.state.isvisible=false
        }
    },
  
    init:function(){
        jQuery(document).ready(function($){
            var mainobj=scrolltotop
            var iebrws=document.all
            mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
            mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
            mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
                .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
                .attr({title:'Scroll Back to Top'})
                .click(function(){mainobj.scrollup(); return false})
                .appendTo('body')
            if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
                mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
            mainobj.togglecontrol()
            $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
                mainobj.scrollup()
                return false
            })
            $(window).bind('scroll resize', function(e){
                mainobj.togglecontrol()
            })
        })
    }
}
scrolltotop.init()
</script>

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

تابع القراءة