اضافة مواضيع من قسم [ احترافي ]
السلام عليكم ورحمة الله تعالى وبركاته اليوم اقدم لكم اضافة رائعة جدا ومفيدة للمدونة والزائر في نفس الوقت هذه الاضافة تساعد على ابقاء الزائر في مدونتك لفترة اطول, الان نأتي لطريقة التركيب وهي طريقة سهلة جداً اذهب الى تخطيط ومن ثم اضافة اداة وبعدها اختر HTML/Javascirpt وضع هذا الكود في الفراغ الموجود لديك
هذه صورة للاضافة
<div class='widget-content'> <script type="text/javascript"> function tabview_aux(TabViewId, id) { var TabView = document.getElementById(TabViewId); // ----- Tabs ----- var Tabs = TabView.firstChild; while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling; var Tab = Tabs.firstChild; var i = 0; do { if (Tab.tagName == "A") { i++; Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");"; Tab.className = (i == id) ? "Active" : ""; Tab.blur(); } } while (Tab = Tab.nextSibling); // ----- Pages ----- var Pages = TabView.firstChild; while (Pages.className != 'Pages') Pages = Pages.nextSibling; var Page = Pages.firstChild; var i = 0; do { if (Page.className == 'Page') { i++; if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px"; Page.style.overflow = "auto"; Page.style.display = (i == id) ? 'block' : 'none'; } } while (Page = Page.nextSibling); } // ----- Functions ------------------------------------------------------------- function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); } function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); } </script> <script type="text/javascript"> div.TabView div.Tabs { height: 24px; overflow: hidden; } div.TabView div.Tabs a { float: right; display: block; width: 95px; text-align: center; height: 24px; padding-top: 3px; vertical-align: middle; border: solid 0px #3F3F3F; border-bottom-width: 0; text-decoration: none; font-family: 'DroidKufi-Bold', tahoma,"Times New Roman", Serif; font-weight: 900; color: #ccc; } div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active { background-color: #ccc; } div.TabView div.Pages { clear: both; border: 0px solid #ccc; overflow: hidden; } div.TabView div.Pages div.Page { height: 100%; padding: 0px; overflow: hidden; } div.TabView div.Pages div.Page div.Pad { padding: 3px 5px; } </script> <style> div.TabView div.Tabs { height: 24px; overflow: hidden; } div.TabView div.Tabs a { float: right; display: block; width: 94px; text-align: center; height: 24px; padding-top: 3px; vertical-align: middle; border: 0px solid #3F3F3F; border-bottom-width: 0; text-decoration: none; font-family: 'DroidKufi-Bold',tahoma,"Times New Roman", Serif; font-weight: 840; color: #fff; } div.TabView div.Tabs , div.TabView div.Tabs a.Active { background-color: #fff; color: #666; } div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active { background-color: #EC9F33; font-weight: DroidKufi-Bold, bold; color:#fff; } div.TabView div.Pages { clear: both; border: 0px solid #404040; overflow: hidden; } div.TabView div.Pages div.Page { height: 100%; padding: 0px; overflow: hidden; border: solid 0px #3F3F3F; } div.TabView div.Pages div.Page div.Pad { padding: 3px 5px; border: solid 0px #B0EAB0; } </style> <div class="TabView" id="TabView"> <!-- *** Tabs ************************************************************** --> <div class="Tabs" style="width: 304px;"> <a>القسم الاول</a> <a>القسم الثانى</a> <a>القسم الثالث</a> </div> <!-- *** Pages ************************************************************* --> <div class="Pages" style="width: 304px; height: 267px;"> <!-- *** Page1 Start *** --> <div class="Page"> <div class="Pad"> <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:0px;padding-top:0px;min-height:65px;list-style:none;} .recent_posts_with_thumbs a {text-decoration:none;} .recent_posts_with_thumbs strong {font-size:10px;} </style> <script style="text/javascript" src="http://my-tqarob.googlecode.com/svn/trunk/recentpostswiththumbs.js"></script> <script style="text/javascript"> var numposts = 3; var showpostthumbnails = true; var displaymore = false; var displayseparator = false; var showcommentnum = true; var showpostdate = true; var showpostsummary = false; var numchars = 200; </script> <script src="رابط مدونتك/feeds/posts/default/-/القسم الاول?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script> <!-- *** Page1 End ***** --> </div> </div> <div class="Page"> <div class="Pad"> <!-- *** Page2 Start *** --> <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:0px;padding-top:0px;min-height:65px;list-style:none;} .recent_posts_with_thumbs a {text-decoration:none;} .recent_posts_with_thumbs strong {font-size:10px;} </style> <script style="text/javascript" src="http://my-tqarob.googlecode.com/svn/trunk/recentpostswiththumbs.js"></script> <script style="text/javascript"> var numposts = 3; var showpostthumbnails = true; var displaymore = false; var displayseparator = false; var showcommentnum = true; var showpostdate = true; var showpostsummary = false; var numchars = 200; </script> <script src="رابط مدونتك/feeds/posts/default/-/القسم الثانى?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script> <!-- *** Page2 End ***** --> </div> </div> <div class="Page"> <div class="Pad"> <!-- *** Page3 Start *** --> <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:0px;padding-top:0px;min-height:65px;list-style:none;} .recent_posts_with_thumbs a {text-decoration:none;} .recent_posts_with_thumbs strong {font-size:10px;} </style> <script style="text/javascript" src="http://my-tqarob.googlecode.com/svn/trunk/recentpostswiththumbs.js"></script> <script style="text/javascript"> var numposts = 3; var showpostthumbnails = true; var displaymore = false; var displayseparator = false; var showcommentnum = true; var showpostdate = true; var showpostsummary = false; var numchars = 200; </script> <script src="رابط مدونتك/feeds/posts/default/-/القسم الثالث?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script> <!-- *** Page3 End ***** --> </div> </div> <div class="Page"> <div class="Pad"> </div> </div> </div> </div> <script type="text/javascript"> tabview_initialize('TabView'); </script> </div> <div class='clear'></div>
مع تغيير ترتيب الاقسام كما هي موجودة بالترتيب وقم بتغيير الروابط الى رابط مدونتك
اضف اسم القسم والرابط بالترتيب لكي تظهر معك الاضافة
وللامانة هذه الاضافة منقولة من الاخ REDA
الى هنا يكون قد انتهى الدرس الى اللقاء في درس اخر
0 التعليقات :
جميع الردود تعبّر عن رأي كاتبيها فقط. حريّة النقد والرد متاحة لجميع الزوار بشرط أن لا يكون الرد خارج نطاق الموضوع وأن يكون خال من الكلمات البذيئة. تذكّر قول الله عز وجل (مَا يَلْفِظُ مِن قَوْلٍ إِلاَّ لَدَيْهِ رَقِيبٌ عَتِيد).