إضافة خاصية tabber لمدونات بلوجر

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

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

وهي خاصية ممتازة تتواجد كثيرا في القوالب الإخبارية قررت اليوم شرحها لكم بأبسط الطرق

اولا صورة للأداة

والآن ركزوا معي وتابعوا الخطوات التي ساشرحها بكل بساطة

أولا إبحث عن 

 ]]></b:skin>

ثم قبلها ضع هذا الكود

 #tabber-wrapper{width:608px;float:right;word-wrap:break-word;overflow:hidden} ul.tab-view{float:right;list-style:none;height:32px;border-bottom:1px solid #aaa;border-right:1px solid #aaa;width:606px;margin:0;padding:0} ul.tab-view li{float:right;height:31px;line-height:31px;border:1px solid #aaa;border-right:none;overflow:hidden;position:relative;background:#eee;margin:0 0 -1px;padding:0} ul.tab-view li a{text-decoration:none;color:#26231c;display:block;border:1px solid #eee;outline:none;font-weight:700;padding:0 15px} html ul.tab-view li.active,html ul.tab-view li.active a,html ul.tab-view li.active a:hover{background:#eee;color:#026ab5;border-bottom:1px solid #eee} .tab-wrapper{border:1px solid #aaa;border-top:none;overflow:hidden;clear:both;float:left;width:606px;background:#eee;margin-bottom:15px} .tabber{padding:10px 0} .tabber .column{float:right;display:inline;width:140px;margin:0 5px 0 5px} .tabber h2{font:bold 11px DroidKufi-Regular;line-height:15px;margin:7px 0 5px} .tabber h2 a{color:#222} .tabber h2 a:hover{color:#026ab5}

بعد ذالك قم بالبحث عن

 </head>

ثم فوقه ضع هذا الكود

 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/> <script src='http://yourjavascript.com/013120251122/tabview.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ imgr=new Array();imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA2pT8Zc1l-z9C4iWVfElnZu1E0RYa2Vo94jWaRgIbAuo0EidncLv0kkT4-fADwC2UK_LBR7XiNI512YxsFkwI4jX7d5S71h35cY3RGbxegZL_f5EaA79BZg20Z0XSZ0LO4uRuV57BCQ8/s1600/no+image.jpg";showRandomImg=true;aBold=true;summaryPost=80;numposts=4;Title1="الصحة العامة";Title2="صحة الطفل";Title3="صحة المرأة";Title4="صحة الرجل";Title5="معلومات طبية";function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}function showrecentposts(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;var trtd='<div class="column"> <a href="'+posturl+'"><img width="146" height="95" src="'+img[i]+'"/></a><h2> <a href="'+posturl+'">'+posttitle+'</a></h2> <p> '+removeHtmlTag(postcontent,summaryPost)+'...</p> </div> ';document.write(trtd);j++}} //]]> </script>

ثم بعد ذالك إبحث عن

 </body>

ثم فوقه ضع هذا الكود

 <script type='text/javascript'> //<![CDATA[ jQuery(document).ready(function(){$(".tabber").hide();$("ul.tab-view li:first").addClass("active").show();$(".tabber:first").show();$("ul.tab-view li").click(function(){$("ul.tab-view li").removeClass("active");$(this).addClass("active");$(".tabber").hide();var activeTab=$(this).find("a").attr("href");$(activeTab).fadeIn();return false})}); //]]> </script>

وأخيرا حان وقت اختيار مكان ضهور الإضافة

من وجهة نظري افضل مكان هو فوق رسائل المدونة 

لذالك قم بالبحث عن

 <div id='main-wrapper'>

ثم ضع أسفلها هذا الكود

 <div id='tabber-wrapper'> <ul class='tab-view'> <li><a href='#tab1'><script>document.write(Title1);</script></a></li> <li><a href='#tab2'><script>document.write(Title2);</script></a></li> <li><a href='#tab3'><script>document.write(Title3);</script></a></li> <li><a href='#tab4'><script>document.write(Title4);</script></a></li> <li><a href='#tab5'><script>document.write(Title5);</script></a></li> </ul> <div class='clear'/> <div class='tab-wrapper'> <div class='tabber' id='tab1'> <script> document.write(" <script src=\"/feeds/posts/default/-/الصحة العامة?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>"); </script></div> <div class='tabber' id='tab2'> <script> document.write(" <script src=\"/feeds/posts/default/-/صحة الأطفال?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>"); </script></div> <div class='tabber' id='tab3'> <script> document.write(" <script src=\"/feeds/posts/default/-/صحة المرأة?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>"); </script></div> <div class='tabber' id='tab4'> <script> document.write(" <script src=\"/feeds/posts/default/-/صحة الرجل?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>"); </script></div> <div class='tabber' id='tab5'> <script> document.write(" <script src=\"/feeds/posts/default/-/معلومات طبية?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>"); </script></div> <div class='clear'/> </div> </div>

وهنيئا لك إن إتبعت الخطوات كما يجب لن تجد أي مشكلة في تركيب الاداة