اضافة اداة صور اخر المواضيع بشكل جذاب ومتناسق مع التحكم الكامل add Widget Latest Post

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

شرح اضافة اداة اخر المواضيع :

اذهب لوحة التحكم ثم الى التخطيط وقم بأضافة اداء جديدة واختار 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/AVvXsEiSmKE4l71r0ANHyPn1hd-HfXtA2u1YvyfzQPsc39BfoVDW6Zj9utFqWifa6xldhx7iXlRb1AGUjWXieRLH7xtfF3Izso0auFh3-KJ-i1zOWqG3tzAvTKYncrOk_FsNw2rAZOn5igefDn3G/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/AVvXsEhsYpUI-mTKofxMKTkYs0ZKPeTA-fobK3CrGuh6sVFn-Z7TVYBSDISsUZdMpbRg3lR-oO4VMBybDN062-NCyEwzxF2GAsHbOzKJLS_f3eDkC1AIse2kyAyN6r75eOduFU9lN6wuvQewE_br/s1600/noimage.png",       // Image that show up if the post doesn't have a image

blogURL     = "http://kingnt.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> 

قبل ان تحفظ الكود يجب ان تقوم بعمل هذه التغيرات البسيطة :

1- كلمة اخر المواضيع المحددة باللون الاصفر هى الذى ستظهر بعنوان الأضافة 

2- ضع رابط موقعك مكان موقع http://kingnt.com المحدد باللون الأخضر 

بالأخير اضغط حفظ وستجد الأضافة الاكثر من رائعة . 

صور توضح لشكل الأضافة بعد التركبيب :

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

وهذه الصورة توضح لنا شكل الاضافة بعد تحميل الصور كما تلاحظون جمال الاضافة والتناسق :

وهذه الصورة الأخرى توضح لنا ظهور عنوان الموضوع عند وضع المؤشر على الصورة المحددة :

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

ملحوظة هامة : قمت بوضع كود الجافا سكربت للأضافة حتى تبقى الاضافة لمدى الحياة السبب فى ذلك نجد بأن الاضافة تعمل بشكل مميز ولكن بعد فترة نجد بأن الاضافات لا تعمل والسبب فى ذلك الكود المسؤل تم حذفة من قبل المستضيف فلذلك قررت بأن اضع لكم الكود بداخل الاضافة نفسها حتى تبقى الاضافة لمدى الحياة وبدون اى مشاكل .

فى النهاية ارجو بأن هذه الاضافة اعجبتكم وانتظرونى باضافة اخرى جديدة ومميزة .