إضافة خاصية 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>

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

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

</body>

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

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

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

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

<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>

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

هذا ملف Word يحتوي على أكواد الإضافاة بالترتيب هذا فقط إن وجدت مشكلة في الاداة

للتحميل إضغط هنــــــــــــــــــــــــــــــــا

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

http://arabe-eye.blogspot.com/2013/06/blog-post_21.html

لتتم مساعدتك بإدن الله

هذا وأتمنى لكم التوفيق

دمتم في رعاية الله وحفضه