اضافة اداة اخر المواضيع بشكل جديد وجذاب هذه الاضافة الأكثر من رائعة رايتها فى احدى المدونات الأجنبية واحببت ان اضعها لكم فهى تعرض صورة لكل موضوع بداخل مرابعات فمن الممكن ان تضيف بعدد تحددة انت من خلال تحكم الاضافة بطريقة سلسة وساقوم بشرح هذه الطريقة البسيطة فالاضافة تعرض عنوان الموضوع عندما يضع الزائر مؤشر الماوس على الصورة لن اطيل عليكم اكثر ونأتى الى طريقة تركيب الأضافة .
شرح اضافة اداة اخر المواضيع :
اذهب لوحة التحكم ثم الى التخطيط وقم بأضافة اداء جديدة واختار 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 Titlenumposts = 20, // The number of thumbnails / posts to displaynumchar = 200, // Number of characters in the description tooltiprcFadeSpeed = 600, // Speed of the effect. fadeIn () tooltip appearspBlank = "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 imageblogURL = "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 المحدد باللون الأخضر
بالأخير اضغط حفظ وستجد الأضافة الاكثر من رائعة .
صور توضح لشكل الأضافة بعد التركبيب :
هذه الصورة توضح لنا بتحميل الصور بشكل جذاب وهى سريعة ولن تأخذ وقت فى التحميل صورة موضحة لذلك :
وهذه الصورة توضح لنا شكل الاضافة بعد تحميل الصور كما تلاحظون جمال الاضافة والتناسق :
وهذه الصورة الأخرى توضح لنا ظهور عنوان الموضوع عند وضع المؤشر على الصورة المحددة :
اعتقد انها اضافة رائعة وقمت بتجربتها اولا قبل ان اضعها لكم .
ملحوظة هامة : قمت بوضع كود الجافا سكربت للأضافة حتى تبقى الاضافة لمدى الحياة السبب فى ذلك نجد بأن الاضافة تعمل بشكل مميز ولكن بعد فترة نجد بأن الاضافات لا تعمل والسبب فى ذلك الكود المسؤل تم حذفة من قبل المستضيف فلذلك قررت بأن اضع لكم الكود بداخل الاضافة نفسها حتى تبقى الاضافة لمدى الحياة وبدون اى مشاكل .
فى النهاية ارجو بأن هذه الاضافة اعجبتكم وانتظرونى باضافة اخرى جديدة ومميزة .
ليست هناك تعليقات:
إرسال تعليق
قال تعالى ( مَا يَلْفِظُ مِن قَوْلٍ إِلا لَدَيْهِ رَقِيبٌ عَتِيدٌ )