فبراير 2015

السبت، 14 فبراير 2015

إضافة صندوق إضافات مزدوج في السيدبار بالمدونة

بقلم: BR MED يوم السبت، 14 فبراير 2015 القسم : دروس 2 التعليقات

السلام عليكم ور حمة الله و بركاته.
مرحبا بكم مجددا، متابعين الكرام كما عودناكم دائما بالجديد والحصري والمفيد على ورشة مدون، التي تهتم بكل ما يخص المدونين على منصة بلوجر، و درس اليوم هو كيفية إضافة آداة مزدوجة في السيدبار و هي على شكل قائمة مقسمة لتحتوي ثلاث نوافذ، في كل نافدة يمكنك وضع إضافة معينة ، وهذه الإضافة جميلة جدا وإحترافية و تهم بالخصوص أصحاب المدونات التي تشكو من قلة المساحات في واجهة المواقع، بحيث عوض وضع ثلات إضافات متفرقة التي ستأخد مساحة كبيرة من المدونة ، تقوم بوضع هذه الأخيرة التي تمكنك من الإنتقال بين الإضافات بسلاسة و خفة.

يمكنك معاينتها في مدونتنا السيدبار على يسارك

الآن طريقة تركيب الإضافة.

نذهب للوحة التحكم بلوجر ثم القالب نقوم بأخد نسخة إحتياطية للقالب تحسبا لأي خطأ.
بعدها نقوم بتحرير HTML ثم ننقر وسط الأكواد و نبحث بالإستعانة بالزرين عن (CTRL+F) عن الوسم ]]></b:skin>
بعد إيجاده ضع الكود التالي فوقه مباشرة.

/* Tab Widget By warch-mo */
.tabbedviewsection {
background: #f8f8f8;
text-transform: uppercase;
float: left;
width: 99%;
}
.tabbed-widget {
list-style: none;
list-style-type: none;
margin: 0 0 10px 0;
padding: 0;
}
.tabbed-widget li {
list-style: none;
list-style-type: none;
padding: 0;
float: right;
border-left: 2px solid #fff;
}
.tabbed-widget li a {
color: #000;
display: block;
padding-right: 14px;
padding-left: 14px;
font-size: 13px;
padding-top: 14px;
padding-bottom: 14px;
text-decoration: none;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.tabbed-widget-content {
}
.tabbedviewsection {
margin-top: 10px;
margin-bottom: 10px;
}
.tags_tab {
text-align: center;
}
.about_tab {
text-align: center;
}
li.laster {
border: 0px;
text-align: center;
}
.blog-mobile-link {
display: none;
}
.tabbed-widget li a {
padding-left: 20px;
padding-right: 20px;
}
/* .tabbed-widget {
height: 51px;
}*/
.tw-authors {
width: 570px;
}
.tabbedviewsection h2 {
display: none;
}
.tabbed-widget li a.tabbed-widget-current {
padding-bottom: 20px;
margin-top: -10px;
background: #f8f8f8;
color: #444;
text-decoration: none;
border-top: 5px solid #24AAE9;
font-size: 14px;
text-transform: capitalize;
}
.tabbed-widget li a {
background: #24AAE9;
}

بعد ذلك نقوم بالبحث عن أحد الأكواد التالية:

<div id='sidebar-wrapper'>

أو
<div class='sidebar-wrapper'>
أو
<div class='sidebar'>
أو
<div id='sidebar'>

ملاحظة : قد لا تجد أي أحد هذه الأكواد لأن تصاميم القوالب تختلف و لكن يجب عليك البحث عن معرف السيدبار بقالبك، المهم إن واجهت هذا المشكل إترك تعليق به رابط مدونتك لأساعدك.

بعد أن تجد المعرف الخاص بالسيدبار لديك قم بوضع هذا الكود مباشرة بعده.

<div class='tabbedviewsection'><script type='text/javascript'> jQuery(document).ready(function($){ $(".tabbed-widget-content-widget-themater_tabs-1432447472-id").hide(); $("ul.tabbed-widget-widget-themater_tabs-1432447472-id li:first a").addClass("tabbed-widget-current").show(); $(".tabbed-widget-content-widget-themater_tabs-1432447472-id:first").show(); $("ul.tabbed-widget-widget-themater_tabs-1432447472-id li a").click(function() { $("ul.tabbed-widget-widget-themater_tabs-1432447472-id li a").removeClass("tabbed-widget-current a"); $(this).addClass("tabbed-widget-current"); $(".tabbed-widget-content-widget-themater_tabs-1432447472-id").hide(); var activeTab = $(this).attr("href"); $(activeTab).fadeIn(); return false; }); }); </script><ul class='tabbed-widget tabbed-widget-widget-themater_tabs-1432447472-id'> <li class='about_tab'><a href='#widget-themater_tabs-1432447472-id1'>مواضيع شائعة</a></li> <li class='tags_tab'><a href='#widget-themater_tabs-1432447472-id2'>تعليقات الزوار</a></li> <li class='laster'><a href='#widget-themater_tabs-1432447472-id3'>الأرشيف</a></li></ul><div class='tabbed-widget-content tabbed-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'><b:section class='sidebar' id='sidebartab1' preferred='yes'> </b:section> </div>  <div class='tabbed-widget-content tabbed-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'><b:section class='sidebar' id='sidebartab2' preferred='yes'> </b:section> </div>
<div class='-content tabbed-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'><b:section class='sidebar' id='sidebartab3' preferred='yes'></b:section> </div></div>

يمكنك تغير الكلمات باللون الأحمر بما يناسبك

أما طريقة إستخدام الإضافة فهي سهلة عند الذهاب لصفحة التخطيط سوف تجدها كما في الصورة

كل خانة يمكنك أن تضع بها أداة مهما كان نوعها، المهم أتمنى أن يعجبكم الدرس و أن تستفيدوا منه أي إستفسار أنا في الخدمة،

دمتم بود في أمان الله.

إقرأ البقية

الأحد، 1 فبراير 2015

إضافة أزرار التحميل و المعاينة للبلوجر

بقلم: BR MED يوم الأحد، 1 فبراير 2015 القسم : اضافات بلوجر 2 التعليقات

السلام عليكم ورحمة الله وبركاته
متابعي ورشة مدون الأوفياء، أعتذر عن مدة غيابي التي كانت بسبب بعض المشاكل التقنية الخارجة عن إرادتي، المهم كما عودتكم دائما بجديد المواضيع ، لقد ذكرت سابقا في إحدى التدوينات كيفية إنشاء أزرار التحميل والمعاينة و هذا الموضوع هو في نفس السياق إلا أن هذه الأزرار هذه المرة بها أيقونات تدل على غرضها مع أنها أكثر إحترافية و ستزيد من مدى جمالية مدونتك، و لتركيبها ما عليك إلا متابعة الشرح.

((((المعاينة الحية ))))

أولا نذهب للوحة التحكم بلوجر ثم القالب.
نقوم بأخذ نسخة إحطياطية دائما لتفادي أي غلط بالرغم من سهولة الشرح
بعد ذلك نقوم بالضغط على تحرير html و ننقر وسط الأكواد.
نبحث عن هذا الوسم ]]></b:skin> مستعينا بالزراين(ctrl+f).
ثم ضع فوقه هذا الكود مباشرة و قم بحفظ القالب.

#warch {
    margin: 20px auto;
    text-align: center;
}

#warch br {
    display: none;
}

.mo-slide, .mo-slide2 {
    position: relative;
    display: inline-block;
    height: 50px;
    width: 200px;
    line-height: 50px;
    padding: 0;
    border-radius: 50px;
    background: #fdfdfd;
    border: 2px solid #0099cc;
    margin: 10px;
    transition: .5s;
}

.mo-slide2 {
    border: 2px solid #efa666;
}

.mo-slide:hover {
    background-color: #0099cc;
}

.mo-slide2:hover {
    background-color: #efa666;
}

.mo-slide:hover span.circle, .mo-slide2:hover span.circle2 {
    left: 100%;
    margin-left: -45px;
    background-color: #fdfdfd;
    color: #0099cc;
}

.mo-slide2:hover span.circle2 {
    color: #efa666;
}

.mo-slide:hover span.title, .mo-slide2:hover span.title2 {
    left: 40px;
    opacity: 0;
}

.mo-slide:hover span.title-hover, .mo-slide2:hover span.title-hover2 {
    opacity: 1;
    left: 40px;
}

.mo-slide span.circle, .mo-slide2 span.circle2 {
    display: block;
    background-color: #0099cc;
    color: #fff;
    position: absolute;
    float: left;
    margin: 5px;
    line-height: 42px;
    height: 40px;
    width: 40px;
    top: 0;
    left: 0;
    transition: .5s;
    border-radius: 50%;
}

.mo-slide2 span.circle2 {
    background-color: #efa666;
}

.mo-slide span.title,
.mo-slide span.title-hover, .mo-slide2 span.title2,
.mo-slide2 span.title-hover2 {
    position: absolute;
    left: 90px;
    text-align: center;
    margin: 0 auto;
    font-size: 16px;
    font-weight: bold;
    color: #30abd5;
    transition: .5s;
}

.mo-slide2 span.title2,
.mo-slide2 span.title-hover2 {
    color: #efa666;
    left: 80px;
}

.mo-slide span.title-hover, .mo-slide2 span.title-hover2 {
    left: 80px;
    opacity: 0;
}

.mo-slide span.title-hover, .mo-slide2 span.title-hover2 {
    color: #fff;
}

ثم إبحث عن هذا الوسم <head> وضع الكود التالي بعده مباشرة و قم بحفظ القالب.

<link href=' https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.0/css/font-awesome.css' rel='stylesheet' type='text/css'/>

الآن طريقة التعامل مع الأزرار في المواضيع.

عند قيامك بكتابة موضوع قم بالنقر على زر "خيارات" و قم بتعديلها كما تلاحظ في الصورة.

أما بالنسبة للأزرار فسوف تضع هذا الكود في المكان الذي يعجبك وذلك في واجهة html الخاصة بالمواضيع.

<div id="warch">
<a href="#" class="mo-slide" target="_blank">
<span class="circle"><i class="fa fa-rocket"></i></span>
<span class="title">معاينة</span>
<span class="title-hover">إنقر هنا</span>
</a>
<a href="#" class="mo-slide2" target="_blank">
<span class="circle2"><i class="fa fa-download"></i></span>
<span class="title2">تحميل</span>
<span class="title-hover2">إنقر هنا</span>
</a>
</div>

قم بتغير علامة # برابط المعاينة و العلامة # برابط التحميل.
ملاحظة : هذا الكود يحتوي على نموذج التحميل و المعاينة أي زرين في نفس الوقت يمكنكم إستعملهما كما تريد.

هذا كل ما في موضوع اليوم أتمنى لكم التوفيق في عملكم ، دمتم بود في أمان الله.

إقرأ البقية

السبت، 14 فبراير 2015

إضافة صندوق إضافات مزدوج في السيدبار بالمدونة

الأحد، 1 فبراير 2015

إضافة أزرار التحميل و المعاينة للبلوجر

مميزة

تعليقات الزوار

أرشيف المدونة الإلكترونية

تواصل معنا على الفيسبوك

أهم المواضيع

إشترك بقناتنا على اليوتيوب

التسميات

نبذة عن المدونة

النشرة البريدية

تابع جديد الموقع