اضافات بلوجر المميزه

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

اليوم مع اضافه جديده ورائعه من اضافات بلوجر المميزه . اضافة اليوم كما هو موضح في العنوان بواسطتها يمكنك عرض ثلاث موضوعات من ثلاث اقسام من اقسام مدونتك . الجميل في الاضافه انها تاتي على شكل تبويبات يمكن للزائر التنقل بينهم بضغطة زر فقط .. من مميزات تلك الاضافه انها متكامله وتتيح لمن يستخدمها التحكم التام فيها من حيث العرض والارتفاع و عدد الموضوعات المعروضه في كل قسم بل والتحكم ايضا في عدد الاقسام المعروضه ولكن يفضل ان تظل كما هى ان كنت ترغب في وضعها في القائمه الجانبيه فقط يمكنك زيادة عدد المواضيع لكن الاقسام زيادتها ستسبب تشويه لمظهر الاداه الا اذا غيرت تموضعها وجعلتهه اعلى او اسفل رسائل المدونه الالكترونيه .. يمكن ايضا التحكم في اتجاه النصوص والصور وكذلك عرض او اخفاء الادوات الموجوده اسفل عنوان المواضيع داخل الاداه مثل التاريخ وعدد التعليقات وكذلك اظهار اداة اقراالمزيد او اخفائها .. تم تنسيق الاضافه واعاده تصميمها وتعريبها من جديد كى تتلائم بشكل سليم مع المدونات العربيه .. ولرؤية مثال حى توجه للرابط التالي . او شاهد الصوره المرفقه داخل تلك التدوينه .. ولتطبيق الاضافه على مدونتك كل ماعليك الذهاب الى القالب وفي صفحة تصميم العناصر قم بانشاء اداه جديده من نوع جافا سكربت وضع فيها الكود الموجود في الاسفل كاملا :

<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 وغير الرقم بما يناسبك .. انتهى .
للأمانة منقول

المصدر : منتديات عبق الياسمين

 

لا يمكنكم مشاهده باقي المشاركة لأنك زائر ...
فإذا كنت مشترك مسبقا معنا  فقم بتسجيل دخول بعضويتك للمتابعة وإذا لم تكن  فيمكنك تسجيل عضوية جديدة مجانا ً ( من هنا )

اسم العضوية		حفظ معلومات الدخول
كلمة المرور

لا يمكنكم مشاهده باقي المشاركة لأنك زائر ...
فإذا كنت مشترك مسبقا معنا  فقم بتسجيل دخول بعضويتك للمتابعة وإذا لم تكن  فيمكنك تسجيل عضوية جديدة مجانا ً ( من هنا )

اسم العضوية		حفظ معلومات الدخول
كلمة المرور

لا يمكنكم مشاهده باقي المشاركة لأنك زائر ...
فإذا كنت مشترك مسبقا معنا  فقم بتسجيل دخول بعضويتك للمتابعة وإذا لم تكن  فيمكنك تسجيل عضوية جديدة مجانا ً ( من هنا )

اسم العضوية		حفظ معلومات الدخول
كلمة المرور

لا يمكنكم مشاهده باقي المشاركة لأنك زائر ...
فإذا كنت مشترك مسبقا معنا  فقم بتسجيل دخول بعضويتك للمتابعة وإذا لم تكن  فيمكنك تسجيل عضوية جديدة مجانا ً ( من هنا )

اسم العضوية		حفظ معلومات الدخول
كلمة المرور

لا يمكنكم مشاهده باقي المشاركة لأنك زائر ...
فإذا كنت مشترك مسبقا معنا  فقم بتسجيل دخول بعضويتك للمتابعة وإذا لم تكن  فيمكنك تسجيل عضوية جديدة مجانا ً ( من هنا )

اسم العضوية		حفظ معلومات الدخول
كلمة المرور

لا يمكنكم مشاهده باقي المشاركة لأنك زائر ...
فإذا كنت مشترك مسبقا معنا  فقم بتسجيل دخول بعضويتك للمتابعة وإذا لم تكن  فيمكنك تسجيل عضوية جديدة مجانا ً ( من هنا )

اسم العضوية		حفظ معلومات الدخول
كلمة المرور

لا يمكنكم مشاهده باقي المشاركة لأنك زائر ...
فإذا كنت مشترك مسبقا معنا  فقم بتسجيل دخول بعضويتك للمتابعة وإذا لم تكن  فيمكنك تسجيل عضوية جديدة مجانا ً ( من هنا )

اسم العضوية		حفظ معلومات الدخول
كلمة المرور

لا يمكنكم مشاهده باقي المشاركة لأنك زائر ...
فإذا كنت مشترك مسبقا معنا  فقم بتسجيل دخول بعضويتك للمتابعة وإذا لم تكن  فيمكنك تسجيل عضوية جديدة مجانا ً ( من هنا )

اسم العضوية		حفظ معلومات الدخول
كلمة المرور

لا يمكنكم مشاهده باقي المشاركة لأنك زائر ...
فإذا كنت مشترك مسبقا معنا  فقم بتسجيل دخول بعضويتك للمتابعة وإذا لم تكن  فيمكنك تسجيل عضوية جديدة مجانا ً ( من هنا )

اسم العضوية		حفظ معلومات الدخول
كلمة المرور