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

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

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

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

1-أذهب الى لوحة تحكم بلوجر وأختر منها HTML/Java Script

2-أنسخ الكود التالي وقم بوضعة في أداة HTML/Java Script

<script  type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"  type="text/javascript"></script>

<style type="text/css">
#post-gallery {
width:304px;
margin:0px auto;
font:normal 11px Arial,Sans-Serif;
color:##000000
;
padding:8px;
background-color:#1BA1E2
;
-webkit-box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
-moz-box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
box-shadow:0px 10px 30px rgba(0, 0, 0, 0.4);
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
#post-gallery h2 {
font:20px Arial,Sans-Serif;
color:white;
text-shadow:0px 3px 2px black;
text-transform:uppercase;
margin:2px 2px 2px;
padding:7px 14px;
background-color:#000000;
text-align: center;
}
#post-gallery .rp-item {
float:left;
display:inline;
position:relative;
margin:2px;
padding:0px 0px;
background:#fff  url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYxS5_bY8ns3bmF66bwNW6Kq4jVBs0SYTjhEkAAS1fFd84J-QtCMIaBNUbG4oVSC3cw8Lsy3i8sShxVkHlXWmPkmufi9gAtGSy5qiutiQhRlU2vIaUwEj7l5jbeS2OE7G-wtJAje3EoJOq/s1600/24work.blogspot.com.loading.gif')  no-repeat 50% 50%;
width:72px;
height:72px;
}
#post-gallery .rp-item img {
width:72px;
height:72px;
border:none !important;
margin:0px 0px !important;
padding:0px 0px !important;
background:transparent !important;
display:none;
}
#post-gallery .rp-item .rp-child {
position:relative;
top:10%!important;
left:10%!important;
z-index:1000;
width:200px;
background-color:white;
border-top:5px solid #1BA1E2;
-webkit-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);
padding:10px 15px;
overflow:hidden;
word-wrap:break-word;
display:none;
opacity: 0.9;
}
#post-gallery .rp-item .rp-child h4 {
font-size:12px;
margin:0px 0px 5px;
color:#1BA1E2;
}
#post-gallery .rp-item:hover .hidden {display:block;}
</style><a href="http://24work.blogspot.com/" rel="dofollow"  rel="nofollow" target="_blank" title="Blogger Tips and Tricks"><img  src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks"  border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;"  /></a><a href="http://24work.blogspot.com/" rel="dofollow"  rel="nofollow" target="_blank" title="Latest Tips For Bloggers"><img  src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers"  border="0" style="position: fixed; bottom: 10%; right: 0%;"  /></a><a href="http://24work.blogspot.com/" rel="dofollow"  rel="nofollow" target="_blank" title="Blogger Tricks"><img  src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0"  style="position: fixed; bottom: 10%; left: 0%;"  /></a><script type="text/javascript">

var rpTitle     = "اخر المواضيع",       // Widget Title
 numposts    = 20,      // The number of thumbnails / posts to display
numchar     = 200,      // Number of characters in the description tooltip
rcFadeSpeed = 600,      // Speed of the effect. fadeIn () tooltip appears
pBlank      =  "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBMmzmTzp6vc2ofUvaADOqXzaGAxhkYOYblHq1k9NcDmkHKwXG7pG3mgMRbsHskMuhgUSB5IqhEj22qjQ05l0vBu7ge01d2am-hJ552G6R_3l68g9L_QmGXQOnBR_BHfcU3X-ENhwdLrS8/s1600/noimage.png",       // Image that show up if the post doesn't have a image
blogURL     = "https://parhlo-bloggers.blogspot.com/";       // Your Blog Address
</script><script type='text/javascript'>
//<![CDATA[
// Recent Post Thumbnail with Tooltip by SOFTGLAD
// Visit: http://softglad.com
// keep the original attribution :)

eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('$(8(){$(\'1.2-9 7\').18();$(\'1.2-b\').2a(\'V\');3 U=$(T).29(),R=$(T).27(),Q=$(\'1.2-b\').15(),O=$(\'1.2-b\').1c(),26=$(\'1.2-9\').15(),25=$(\'1.2-9\').1c();$(\'1.2-9\').Y(\'u\',\'24\').23(8(){$(\'1.2-b\',F).22(\':21(:1Z)\').1o(1Y)}).1X(8(e){3 f=e.1W+20,h=e.1V+20;6(f+O>R){f=R-O-1i}6(h+Q>U){h=U-Q-1i}$(\'1.2-b\',F).Y({f:f,h:h})}).1U(8(){$(\'1.2-b\',F).18()})});8 1k(X){3 4=X.1T.4;11(3 i=0;i<16;i++){3 z;11(3 j=0;j<4[i].B.C;j++){6(4[i].B[j].s==\'1S\'){z=4[i].B[j].l;1R}}6("1n"v 4[i]){3 5=4[i].1n.$t}K 6("12"v 4[i]){3 5=4[i].12.$t}K{3 5=""}3 13=/<\\S[^>]*>/g;5=5.1Q(13,"");6(5.C>17){5=5.2b(0,17)+\'...\'}3 19=4[i].q.$t;6("1a$1b"v 4[i]){P=4[i].1a$1b.1N}K{P=1M}k.c(\'<1 1h="2-9"><a l="\'+z+\'"><7 n="\'+P+\'" m="1L" /></a>\');k.c(\'<1 1h="2-b V"><1m>\'+19+\'</1m>\');k.c(5+\'</1>\');k.c(\'</1>\')}}k.c(\'<1 1H="1E-1P"><1q>\'+1t+\'</1q><1r\'+\'1p n="\'+1u+\'/1v/1w/1x?1y-1z=\'+16+\'&1A=1B&m=X-v-1C&1D=1k"></1r\'+\'1p><1 p="1F:1G;"></1></1>\');3 i=0,W=0;$(T).1I("1J",8(){3 W=1K("1l(i)",1e)});8 1l(){3 1d=$(\'1.2-9 7\').C;6(i>=1d){1O(W)}$(\'1.2-9 7:V\').1s(0).1o(1e);i++};k[\'c\'](\'<a l="N://M.L.d/" s="E" J="x" q="1f r o w"><7 n="y://A.d/D" m="1f r o w" G="0" p="u: H; I: 10%; Z: 0%; f: 28;" /></a><a l="N://M.L.d/" s="E" J="x" q="1g 14"><7 n="y://A.d/D" m="1g 14" G="0" p="u: H; I: 10%; Z: 0%;" /></a><a l="N://M.L.d/" s="E" J="x" q="1j r o w"><7 n="y://A.d/D" m="1j r o w" G="0" p="u: H; I: 10%; h: 0%;" /></a>\');',62,136,'|div|rp|var|entry|postcontent|if|img|function|item||child|write|com||top||left|||document|href|alt|src|And|style|title|Tips|rel||position|in|Tricks|_blank|https|posturl|bitly|link|length|24workpng1|dofollow|this|border|fixed|bottom|target|else|blogspot|24work|http|ttHeight|postimg|ttWidth|winHeight||window|winWidth|hidden|int|json|css|right||for|summary|re|Backlinks|outerWidth|numposts|numchar|hide|poststitle|media|thumbnail|outerHeight|imgs|400|Blogger|Free|class|40|Latest|showrecentposts|doThis|h4|content|fadeIn|ript|h2|sc|eq|rpTitle|blogURL|feeds|posts|default|max|results|orderby|published|script|callback|post|clear|both|id|bind|load|setInterval|thumb|pBlank|url|clearInterval|gallery|replace|break|alternate|feed|mouseleave|pageX|pageY|mousemove|rcFadeSpeed|animated||not|filter|mouseenter|static|thumbHeight|thumbWidth|height|0px|width|removeClass|substring'.split('|'),0,{})) 
//]]>
</script></script>

3-قبل حفظ القالب لاتنسى تغيير ابط https://parhlo-bloggers.blogspot.com برابط موقعك ومن ثم قم بعملية الحفظ بعد تغيير الرابط برابط موقعك

4-قم بعملية الحفظ وسوف تظهر الاداه في الموقع الخاص بك

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

صورة من الأضافة