عيون العرب - ملتقى العالم العربي

العودة   عيون العرب - ملتقى العالم العربي > ~¤¢§{(¯´°•. عيون الاقسام المخفية.•°`¯)}§¢¤~ > أنظمة التشغيل

أنظمة التشغيل منتدى يحوي كل ما يتعلق بأنظمة التشغيل : مايكروسفت وندوزwindows, لينوكس Linux ... حلول مشاكل , دروس , طرق و أفكار جديده

Like Tree2Likes
 
 
LinkBack أدوات الموضوع انواع عرض الموضوع
  #1  
قديم 06-20-2014, 09:29 AM
 
طريقة اضافة اكثر من قسم في مدونة بلوجر على شكل تبويبات بطريقه سهله

السلام عليكم ورحمة الله وبركاته , اليوم مع اضافه جديده ورائعه من اضافات بلوجر المميزه . اضافة اليوم كما هو موضح في العنوان بواسطتها يمكنك عرض ثلاث موضوعات من ثلاث اقسام من اقسام مدونتك . الجميل في الاضافه انها تاتي على شكل تبويبات يمكن للزائر التنقل بينهم بضغطة زر فقط .. من مميزات تلك الاضافه انها متكامله وتتيح لمن يستخدمها التحكم التام فيها من حيث العرض والارتفاع و عدد الموضوعات المعروضه في كل قسم بل والتحكم ايضا في عدد الاقسام المعروضه ولكن يفضل ان تظل كما هى ان كنت ترغب في وضعها في القائمه الجانبيه فقط يمكنك زيادة عدد المواضيع لكن الاقسام زيادتها ستسبب تشويه لمظهر الاداه الا اذا غيرت تموضعها وجعلتهه اعلى او اسفل رسائل المدونه الالكترونيه .. يمكن ايضا التحكم في اتجاه النصوص والصور وكذلك عرض او اخفاء الادوات الموجوده اسفل عنوان المواضيع داخل الاداه مثل التاريخ وعدد التعليقات وكذلك اظهار اداة اقراالمزيد او اخفائها .. تم تنسيق الاضافه واعاده تصميمها وتعريبها من جديد كى تتلائم بشكل سليم مع المدونات العربيه .. ولرؤية مثال حى توجه للرابط التالي . او شاهد الصوره المرفقه داخل تلك التدوينه .. ولتطبيق الاضافه على مدونتك كل ماعليك الذهاب الى القالب وفي صفحة تصميم العناصر قم بانشاء اداه جديده من نوع جافا سكربت وضع فيها الكود الموجود في الاسفل كاملا :
<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: 90px;
text-align: center;
height: 24px;
padding-top: 3px;
vertical-align: middle;
border: solid 0px #3F3F3F;
border-bottom-width: 0;
text-decoration: none;
font-family: 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: 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: #689EAC;
font-weight: 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 id=”TabView”> <!– *** Tabs ************************************************************** –> <div style=”width: 304px;”> <a>القسم الاول</a> <a>القسم الثاني</a> <a>القسم الثالث</a> </div> <!– *** Pages ************************************************************* –> <div style=”width: 304px; height: 267px;”> <!– *** Page1 Start *** –> <div> <div> <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-blogname.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=”http://blogname.com/feeds/posts/default/-/تنسيق القالب?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs”></script> <!– *** Page1 End ***** –> </div> </div> <div> <div> <!– *** 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-blogname.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=”http://blogname.com/feeds/posts/default/-/اضافات css?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs”></script> <!– *** Page2 End ***** –> </div> </div> <div> <div> <!– *** 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=”http://tqarob.com/feeds/posts/default/-/اكواد Html?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs”></script> <!– *** Page3 End ***** –> </div> </div> <div> <div> </div> </div> </div> </div> <script type=”text/javascript”>
tabview_initialize(‘TabView’);
</script> </div> <div class=’clear’></div>
قبل حفظ الاداه قم بمشاهدة العليمات التي بالاسفل والتي ستساعدك في تخصيص الاداه بما يتناسب مع مدونتك :
1- لتغيير اسماء الاقسام الظاهره في التبويبات ابحث في الكود عن
<a>القسم الاول</a>
<a>القسم الثاني</a>
<a>القسم الثالث</a> وقم بتغيير المسميات كما يحلو لك .
2- ابحث داخل الكود عن blogname.com ستجدها مكرره ثلاث مرات غيرهم برابط مدونتك وفي كل مره ستجد في نهاية الرابط اسم قسم من اقسام مدونتي قم فقط بتغيير الاسم باسم القسم الموجود في مدونتك ( التسميه ) والتي ترغب في عرض المواضيع من خلاله .
3- للتحكم في الادوات التي تظهر تحت العنوان قم بالبحث عن
var numposts = 3; الرقم 3 مسؤل عن عدد التدوينات المعروضه في كل قسم . ( غيره كيفما تشاء ) .
var showpostthumbnails = true; هذا الخيار خاص باخفاء او عرض الصوره بجانب العنوان ( الافتراضي تظهر لاخفائها غير true الى false .
var displaymore = false; لاخفاء او عرض عبارة اقرأ المزيد .
var displayseparator = false; لعمل فواصل بين المواضيع .
var showcommentnum = true; لاظهار / اخفاء عدد التعليقات.
var showpostdate = true; لاظهار / اخفاء تاريخ نشر الموضوع.
var showpostsummary = false; لاظهار / اخفاء وصف قصير للموضوع.
var numchars = 200; لتحديد عدد الحروف ( ليس ذات اهميه مادمت لم تفعل الخيار الموجود اعلاه) .
* ملحوظه * المتغيرات الموجوده في الاعلى متكرره ثلاث مرات في الكود لذلك مفروض عليك حين التعديل على واحد من الثلاثه ان تفعل بالمثل مع البقيه كى تحافظ على تنسيق الاضافه وتظهر بشكل جيد واخيرا للتحكم في ارتفاع وعرض الاضافه ككل قم بالبحث عن
width: 304px وغير الرقم الى عرض القائمه الجانبيه لمدونتك . ستجد الكود مكرر مرتين غير الاثنين بالتساوي . ولتغيير الارتفاع ابحث عن height: 267px وغير الرقم بما يناسبك .. انتهى .
للأمانة منقول
  #2  
قديم 06-21-2014, 04:07 AM
 
شكرآ على الموضوع المفيد

تقبلوآ مروري ~!
  #3  
قديم 06-22-2014, 05:16 AM
 
wooooooooooooooow
خليني اجرب
شكرا من جد محتاجه انا كذا مواضيع
الله يعطك العافيه
شرح مفصل للغايه
يا ليت بس تكبر الخط شوي جاني حول هههههههههه
“ɑʑʂ” likes this.
__________________





أحبك


  #4  
قديم 06-28-2014, 06:42 PM
 
شكرا
  #5  
قديم 07-06-2014, 01:49 PM
 
شكراااا
 

مواقع النشر (المفضلة)

أدوات الموضوع
انواع عرض الموضوع

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة
Trackbacks are متاحة
Pingbacks are متاحة
Refbacks are متاحة


المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
علاج الزكام !!!!!بطريقه سهله ومفيده!!!!!! أحاسيس حالمه صحة و صيدلة 21 04-13-2010 11:00 PM
الاذكار بطريقه سهله ومفيده بدويه مدلعه نور الإسلام - 5 02-17-2009 07:08 PM
البشره المثاليه بطريقه سهله rabsom دروس الفوتوشوب - Adobe Photoshop 5 11-07-2008 04:59 PM


الساعة الآن 12:27 PM.


Powered by vBulletin®
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

شات الشلة
Powered by: vBulletin Copyright ©2000 - 2006, Jelsoft Enterprises Ltd.
جميع الحقوق محفوظة لعيون العرب
2003 - 2011