4 طرق لإضافة أداة أحدث الموضوعات لمدونات بلوجر , اختر ما يناسبك الأن!

عدد مشاهدات الموضوع:
يشكو الكثير من اختفاء إضافة أحدث الموضوعات داخل مدوناتهم ومنهم مدونة أبو إياد, تفاجأت بعدم ظهور صور أحدث الموضوعات وكأن الكود بدأ يتلف وخصوصا ملفات .Js, فقررت بعلاج المشكلة فورا. وبالبحث والتجربة أنتقيت 4 أشكال لإضافة أحدث الموضوعات على بلوجر يمكنك معاينتهم من هذه المدونة التجريبية.

بعد معاينتهم .. أيهم أعجبتك؟ سنضع أكواد الطرق واحدة تلو الأخري الأن

إضافة أحدث الموضوعات على بلوجر - 1
هذه الطريقة تقوم بإظهار أحدث موضوعات مدونتك بالإضافة إلى صورة من الموضوع والميزة بها أنها متحركة وبالتالي تأتى بالعديد من الموضوعات بالتوالي. 

<style>img.recent_thumb {padding:1px;width:55px;height:55px;border:0;float:right;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 style='text/javascript' src="https://dl.dropbox.com/s/ercbfzxm41o63i4/NBTjQuery-scrolling-ticker.js" ></script> <script style='text/javascript' src='https://dl.dropbox.com/s/mzcmuhcas156xhx/NBTscrollingRP.js'></script> <script style='text/javascript'> var numposts = 10; var showpostthumbnails = true; var displaymore = false; var displayseparator = false; var showcommentnum = false; var showpostdate = false; var showpostsummary = true; var numchars = 100; $(document).ready(function () {$('#sai').vTicker({ speed: 500, pause: 3000, showItems: 3, animation: 'fade', mousePause: false, height: 0, direction: 'up' });}); </script> <div id="sai"> <script src='http://www.abu-iyad.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script> </div>
لمزيد من الإضافات - <a href="www.abu-iyad.com">مدونة أبو إياد</a>

 إضافة أحدث الموضوعات على بلوجر - 2
هذه الطريقة تتميز بعرض أحدث الموضوعات على هيئة صور فقط وعند المرور عليها يظهر عنوان وبعض فحوي الموضوع. بالإضافة إلى حركة الصور مائلة. نفضلها فى مدونة أبو إياد
<div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: center;"><script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script><style type="text/css">#post-gallery {width:100%; margin:0px auto;font:normal 11px Arial,Sans-Serif;color:##000000;padding:8px;}#post-gallery .rp-item {float:left;display:inline;  position:relative;  margin:2px;  padding:0px 0px;  background: url('http://4.bp.blogspot.com/-0E2ZARxMyAo/UZwiR3XjlvI/AAAAAAAAKDc/3Z8WjltqbCQ/s1600/LOAD+(66).gif') no-repeat 50% 50%;  width:79px;  height:79px;}#post-gallery .rp-item img {  width:69px;  height:69px;  border:none !important;  margin:0px 0px !important;  padding:0px 0px !important;  background:transparent !important;  display:none;}#post-gallery .rp-item img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}#post-gallery .rp-item .rp-child {  position:relative;  top:10%!important;  left:10%!important;  z-index:1000;  width:200px;  background-color:white;  border-bottom: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><script type="text/javascript">var rpTitle     = "",       // Widget Title    numposts    = 12,      // Number of Posts to show    numchar     = 200,      // Number of Characters to be displayed    rcFadeSpeed = 600,      // Speed    pBlank      = "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",      // If No Image    blogURL     = "http://www.abu-iyad.com/";       // Your Blog URL</script><script src="https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/abt-recent-posts.js" type="text/javascript"></script></div></div>
لمزيد من الإضافات - <a href="www.abu-iyad.com">مدونة أبو إياد</a>

  إضافة أحدث الموضوعات على بلوجر - 3
هذه الطريقة تظهر أحدث الموضوعات مع إمكانية ظهور التاريخ وعدد التعليقات وكذلك كلمة more لقرائة المزيد عن الموضوع ويمكنك تعطيل هذه الخيارات من الكود. 
<style type='text/css'>img.recent_thumb {padding:1px;width:55px;height:55px;border:0;float:left;margin: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 style='text/javascript' src='http://yourjavascript.com/1159358112/www.mybloggertopic.blogspot.com.js'></script><script style='text/javascript'>var numposts = 6;var showpostthumbnails = true;var displaymore = true;var displayseparator = true;var showcommentnum = true;var showpostdate = true;var showpostsummary = true;var numchars = 100;</script><script src='http://www.abu-iyad.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
لمزيد من الإضافات - <a href="www.abu-iyad.com">مدونة أبو إياد</a></a></small>

   إضافة أحدث الموضوعات على بلوجر - 4
هذه الطريقة رائعة أيضا بحيث تعرض صور الموضوعات بشكل دائري وتعطى حركة دورانية عند مرور المؤشر على الصورة بالإضافة إلى "اقرأ المزيد.."
<style type="text/css">/*<![CDATA[*/img.label_thumb{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;transition:all .5s ease;float:left;padding:0;border:3px solid #cccccc;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;background:#fff;margin-right:10px;height:70px;width:70px}img.label_thumb:hover{-moz-transform:scale(1.2) rotate(-350deg);-webkit-transform:scale(1.2) rotate(-350deg);-o-transform:scale(1.2) rotate(-350deg);-ms-transform:scale(1.2) rotate(-350deg);transform:scale(1.2) rotate(-350deg);-webkit-box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);-moz-box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);box-shadow:0 0 20px rgba(0,0,0,0.3),inset 0 0 20px rgba(0,0,0,0.1);background:#f7f6f6}.label_with_thumbs{float:left;width:100%;min-height:70px;margin:0 10px 2px 0;adding:0}ul.label_with_thumbs li{background:#f5f5f5;list-style-type:none;padding:8px 0;min-height:65px;margin-bottom:5px}.label_with_thumbs a{color:#3395BF;font-size:12pt;outline:0;text-decoration:none}.label_with_thumbs a:hover,.label_with_thumbs a:focus{color:#F4A557}.credits,.credits a{font-size:12px!important;text-align:left;text-shadow:0 1px 0 #fff;color:#888}#mdjumplink{font-weight:800;background:#f7f8f9;background:-webkit-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:-moz-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:-o-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:-ms-linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);background:linear-gradient(top,#f7f8f9 0,#e9e9e9 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f8f9',endColorstr='#e9e9e9',GradientType=0);border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;padding:6px 12px;margin:0;-webkit-box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);-moz-box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);color:#888!important;text-shadow:0 1px 0 #fff;line-height:1.2;cursor:pointer;font-size:13px;font-weight:bold;text-decoration:none!important}#mdjumplink:hover{background:#f1f1f1;background:-webkit-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:-moz-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:-o-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:-ms-linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);background:linear-gradient(top,#f1f1f1 0,#e0e0e0 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1f1f1',endColorstr='#e0e0e0',GradientType=0);text-decoration:none!important}#mdjumplink a{color:#888!important;text-decoration:none;display:block;margin:2px}#mdjumplink a:hover{color:#888!important;text-decoration:none}#mdcomments{padding:6px 12px;background:#3395BF;color:#FFFFFF!important;font-size:13px;font-weight:800}#mdcomments:hover{background:#F4A557;text-decoration:none}/*]]>*/</style>
<script type='text/javascript'>//<![CDATA[eval(function(p,a,c,k,e,d){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--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[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}('1x 1y(F){j.l(\'<T x="1z">\');1a(e i=0;i<1d;i++){e f=F.17.f[i];e X=f.1b.$t;e y;h(i==F.17.f.G)N;1a(e k=0;k<f.r.G;k++){h(f.r[k].14=="1w"&&f.r[k].1v=="1s/1t"){e p=f.r[k].1b;e 18=f.r[k].q}h(f.r[k].14=="1u"){y=f.r[k].q;N}}e w;1A{w=f.1B$1H.19}1I(1r){s=f.I.$t;a=s.E("<K");b=s.E(\'R="\',a);c=s.E(\'"\',b+5);d=s.1F(b+5,c-b-5);h(a!=-1&&b!=-1&&c!=-1&&d!="")w=d;D w="Q://2.1C.1D.Y/1E/1K/1k/1q/1n.1o"}e C=f.1m.$t;e 13=C.z(0,4);e P=C.z(5,7);e O=C.z(8,10);e m=1j 1l;m[1]="1p";m[2]="1h";m[3]="1e";m[4]="1g";m[5]="1f";m[6]="1J";m[7]="26";m[8]="23";m[9]="2d";m[10]="1L";m[11]="2c";m[12]="20";j.l(\'<1c x="21">\');h(1R==v)j.l(\'<a q="\'+y+\'" A ="B"><K x="1P" R="\'+w+\'"/></a>\');j.l(\'<W><a q="\'+y+\'" A ="B">\'+X+"</a></W><M>");h("I"U f)e n=f.I.$t;D h("V"U f)e n=f.V.$t;D e n="";e Z=/<\\S[^>]*>/g;n=n.1S(Z,"");h(1Y==v)h(n.G<L){j.l("");j.l(n);j.l("")}D{j.l("");n=n.z(0,L);e J=n.1X(" ");n=n.z(0,J);j.l(n+"...");j.l("")}e o="";e u=0;j.l("<M>");h(1Q==v){o=o+m[1T(P,10)]+"-"+O+" - "+13;u=1}h(1N==v){h(u==1)o=o+" | ";h(p=="1 H")p="1 1M";h(p=="0 H")p="2b H";o=o+p;u=1}h(28==v){h(u==1)o=o+" | ";o=o+\'<a 16="27" q="\'+y+\'" x="19" A ="B">25 2a \\24</a>\';u=1}j.l(o);j.l("</1c>");h(22==v)h(i!=1d-1)j.l("")}j.l(\'<15 x="1V">1U 1W <a q="Q://1Z.1O.Y">1i 1G</a></15></T>\')};',62,138,'||||||||||||||var|entry||if||document||write|monthnames|postcontent|towrite|commenttext|href|link|||flag|true|thumburl|class|posturl|substring|target|_top|postdate|else|indexOf|json|length|Comments|content|quoteEnd|img|numchars|br|break|cdday|cdmonth|http|src||ul|in|summary|strong|posttitle|com|re||||cdyear|rel|div|id|feed|commenturl|url|for|title|li|numposts|Mar|May|Apr|Feb| |new|AAAAAAAAAHA|Array|published|noimage|jpg|Jan|hAKuT9rJpFU|error|text|html|alternate|type|replies|function|labelthumbs|label_with_thumbs|try|media|bp|blogspot|_IKigl6y9hFA|substr| |thumbnail|catch|Jun|TMdcT1jzo5I|Oct|Comment|showcommentnum| |label_thumb|showpostdate|showpostthumbnails|replace|parseInt| |credits| |lastIndexOf|showpostsummary|www|Dec|clearfix|displayseparator|Aug|u00bb|اقرأ المزيد|Jul|mdjumplink|displaymore|mdcomments| |No|Nov|Sep'.split('|'),0,{}))//]]></script><script type='text/javascript'>//<![CDATA[var numposts = 6;var showpostthumbnails = true;var displaymore = true;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = false;var numchars = 80;//]]></script>
<script src='http://abu-iyad.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=labelthumbs'></script>
لمزيد من الإضافات - <a href="www.abu-iyad.com">مدونة أبو إياد</a>

 والأن لإضافة اى منهم اتبع الأتى:
1- الدخول الى لوحة تحكم بلوجر.
2- الدخول الى تخطيط Layout
3- قم بإضافة أداة جديدة Add a Gadget فى المكان المراد ظهور الأداة فيه واختر HTML/JavaScript.
4- قم بنسخ الكود ولصقه داخل HTML/JavaScriptAdd
5- قم بالحفظ Save arrangement وتمتع بالأداة.

ملاحظة هامة: يجب عليك تغيير كلمة abu-iyad الملونة بالأحمر ووضع اسم مدونتك وليكن مثلا iglal.blogspot

أى سؤال لا تتردد فى وضعه بتعليقك :)

مصدر الصورة بأعلى التدوينة


هناك 3 تعليقات:

  1. shokran akhii :D :like:

    ردحذف
  2. جربت الكود الثانى و الرابع على مدونه بلوجر و لم يعمل
    هل هناك اضافه داخل القالب ليعمل
    و شكرا

    ردحذف
  3. الكود الرابع لا يعمل وشكراً

    ردحذف

مدونة أبو إياد تصميم بلوجرام جميع الحقوق محفوظة 2016

اعلان مخفى فى الرئيسية