قد لا يناسب موقعك من حيث شكله لذا وجب اختيار له مكان مناسب وكذلك أن تكون على دراية بالتعديل على الأكواد الخاصة بالستايل، سأقدم شرح التركيب ومفهومه والبقية منوط بكم
1. ابحث عن ]]></b:skin> وضع الكود التالي فوقه أو ضعه بين <style> </style> فوق </head>
#tabber-wrapper {width: 96%;float: right;overflow: hidden;margin: 13px;border: 1px solid #EAEAEA;background: #fff;margin-right: 10px;}
.tabber .column_img:hover {margin-bottom: 12px;opacity: .9;}
ul.tab-view{float:right;list-style:none;height:25px;width:99%;margin:0;padding:5px 5px 6px;font-family: droid arabic kufi;font-size: 12px;background:#444444}
ul.tab-view li{float:right;height:26px;line-height:26px;overflow:hidden;position:relative;margin:0;padding:0; margin-left:9px;}
ul.tab-view li a{text-decoration:none;color:#fff;display:block;outline:none;font-weight:400;padding:0 15px;}
html ul.tab-view li.active,html ul.tab-view li.active a,html ul.tab-view li.active a:hover{color:#fff;background:#FC4F3F;border-radius:2px;text-shadow:none}
.tab-wrapper{overflow:hidden;clear:both;float:right;width:100%;margin-bottom:10px;}.tabber{padding:5px 0 0}
.tabber .column{ float: right;display: inline;width: auto;height: 150px;margin-right: 13px;padding: 2px 2px 5px;}
.tabber .column_img{background: #fff;padding: 0px;width: 200px;height: 150px;margin: 5px 0px 0px;border: 1px solid #DBDBDB;}
.tabber h2{line-height: 16px;text-align: center;background: #FC4F3F;padding: 10px 0 10px 21px;width: 179px;position: relative;bottom: 50px;opacity: .9;font-family: cursive;font-size: 12px;margin-left: 1px;}.tabber h2 a{color:#FFF;}.tabber h2 a:hover{color:#FFF;text-decoration:none;}
* المحدد بالأحمر هو عرض الصندوق 96%
2. إبحث عن </head> وضع الكود التالي فوقه<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "http://i.imgur.com/7WK8lcQ.png";
showRandomImg = true;
aBold = true;
summaryPost = 100;
summaryPost1 = 200;
numposts = 9;
numposts1 = 9;
numposts2 = 9;
numposts6 = 9;
Title1 = "عنوان 1";
Title2 = "عنوان 2";
Title3 = "عنوان 3";
Title4 = "عنوان 4";
Title5 = "عنوان 5";
Title6 = "عنوان 6";
//]]></script>
<script src='https://ar1web-com.googlecode.com/svn/trunk/flexcroll.js'/>
* المحدد بالأحمر ضع عناوين
* الأرقام المحددة بالبرتقالي هي عدد ظهور المواضيع في كل قسم يمكنك تغييرها حسب ما تريد
* إذا أردت إضافة قسم آخر فأضف هذا الكود تحت إخوته : Title7 = "عنوان 7";
3. الكود التالي ضعه بالمكان الذي تراه مناسب* الأرقام المحددة بالبرتقالي هي عدد ظهور المواضيع في كل قسم يمكنك تغييرها حسب ما تريد
* إذا أردت إضافة قسم آخر فأضف هذا الكود تحت إخوته : Title7 = "عنوان 7";
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static"'>
<div class='cf' 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>
<li><a href='#tab6'><script>document.write(Title6);</script></a></li>
</ul><div class='clear'/>
<div class='tab-wrapper'>
<div class='tabber' id='tab1'>
<script>
document.write(" <script src=\"/feeds/posts/default/-/قسم 1?max-results="+numposts2+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script></div>
<div class='tabber' id='tab2'>
<script>
document.write(" <script src=\"/feeds/posts/default/-/قسم 2?max-results="+numposts2+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script></div>
<div class='tabber' id='tab3'>
<script>
document.write(" <script src=\"/feeds/posts/default/-/قسم 3?max-results="+numposts2+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script></div>
<div class='tabber' id='tab4'>
<script>
document.write(" <script src=\"/feeds/posts/default/-/قسم 4?max-results="+numposts2+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script></div>
<div class='tabber' id='tab5'>
<script>
document.write(" <script src=\"/feeds/posts/default/-/قسم 5?max-results="+numposts2+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script></div>
<div class='tabber' id='tab6'>
<script>
document.write(" <script src=\"/feeds/posts/default/-/قسم 6?max-results="+numposts2+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script></div>
<div class='clear'/>
</div></div>
</b:if> </b:if>
<script type='text/javascript'>
//<![CDATA[
var _0x3c49=["\x68\x69\x64\x65","\x2E\x74\x61\x62\x62\x65\x72","\x73\x68\x6F\x77","\x61\x63\x74\x69\x76\x65","\x61\x64\x64\x43\x6C\x61\x73\x73","\x75\x6C\x2E\x74\x61\x62\x2D\x76\x69\x65\x77\x20\x6C\x69\x3A\x66\x69\x72\x73\x74","\x2E\x74\x61\x62\x62\x65\x72\x3A\x66\x69\x72\x73\x74","\x72\x65\x6D\x6F\x76\x65\x43\x6C\x61\x73\x73","\x75\x6C\x2E\x74\x61\x62\x2D\x76\x69\x65\x77\x20\x6C\x69","\x68\x72\x65\x66","\x61\x74\x74\x72","\x61","\x66\x69\x6E\x64","\x66\x61\x64\x65\x49\x6E","\x63\x6C\x69\x63\x6B","\x72\x65\x61\x64\x79"];jQuery(document)[_0x3c49[15]](function (){$(_0x3c49[1])[_0x3c49[0]]();$(_0x3c49[5])[_0x3c49[4]](_0x3c49[3])[_0x3c49[2]]();$(_0x3c49[6])[_0x3c49[2]]();$(_0x3c49[8])[_0x3c49[14]](function (){$(_0x3c49[8])[_0x3c49[7]](_0x3c49[3]);$(this)[_0x3c49[4]](_0x3c49[3]);$(_0x3c49[1])[_0x3c49[0]]();var _0x88b3x1=$(this)[_0x3c49[12]](_0x3c49[11])[_0x3c49[10]](_0x3c49[9]);$(_0x88b3x1)[_0x3c49[13]]();return false;} );} );
//]]>
</script>
<li><a href='#tab7'><script>document.write(Title7);</script></a></li>
وتبقى مرحلة آخيرة وهي تكرار الكود تحت أخيه المحدد باللون البرتقالي هكذا :
<div class='tabber' id='tab7'>
<script>
document.write(" <script src=\"/feeds/posts/default/-/مجانيات?max-results="+numposts2+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script></div>
* لا تنسى تغيير التسميات : قسم 1, قسم 2, قسم 3, قسم 4,قسم 5,قسم 6
يمكنك حفظ القالب ومبروك عليك الإضافة، لأي استفسار خاص بالتدوينه فضعه بالتعليق.