مجموعه التسميات والمشاركات والارشيف بامر واحد بالبلوجر تطبيق مميز اربع اشكال Sidebar

akbear فبراير 27, 2018
Cara Memasang Multi Tab Sidebar Widget


========================================
قم بالبحث عن الكود التالي
]]></b:skin>
بالاستعانة بلوحة التحكم (CTRL+F)
بعد ان تجد الكود أضف مباشرة فوقه الكود التالي :
========================================
/ * Multi Tab Widget * /
.multitab-section {background: # fff; text-transform: uppercase; width: 100%}
.multitab-widget {list-style: none; margin: 0 0 10px; padding: 0}
.multitab-widget li {list-style: none; padding: 0; margin: 0; float: left}
.multitab-widget li a {background: # 22a1c4; color: # fff; display: block; padding: 15px; font-size: 13px; text-decoration: none}
.multitab-tab {border: 0; width: 33.3%; text-align: center}
.multitab-section h2, h3 .multitab-section, .multitab-section h4, h5 .multitab-section, .multitab-section h6 {display: none;}
.multitab-li widget solid # 22a1c4; font-size: 14px; text-transform: capitalize}

بعد ذالك قم بالبحث عن
</body>
و أضف فوقه الكود التالي
< Script type = 'text / javascript'>
// <! [CDATA [
// Multi tab widget
jQuery (document) .ready (function ($) {$ (". multitab-widget-content-widget-id"). hide (); $ ("ul.multitab-widget-content-tabs-id li: first a ") .addClass (" multitab-widget-current "). show (); $ (". multitab-widget-widget-content-id: first '). show (); $ ("ul.multitab-widget-content -tabs-id li a "). click (function () {$ (" ul.multitab-widget-content-tabs-id li a "). removeClass (" multitab-current widget-a "); $ (this) .addClass ("multitab-widget-current"); $ (". multitab-widget-content-widget-id"). hide (); var activeTab = $ (this) .attr ("href"); $ (activeTab ) .fadeIn (); return false;});});
//]]>
< / Script>

بعد ذالك قم بالبحث عن
<div id = 'sidebar-wrapper'>
و أضف تحته الكود التالي
< Div class = 'multitab-section'>
< Ul class = 'multitab multitab-widget-widget-content-tabs-id'>
< Li class = 'multitab-tab'> <a href='#multicolumn-widget-id1'>Latest</a> </ li>
< Li class = 'multitab-tab'> <a href='#multicolumn-widget-id2'>Tags</a> </ li>
< Li class = 'multitab-tab'> <a href='#multicolumn-widget-id3'>Archive</a> </ li>
< / Ul>
< Div class = 'multitab-widget-content multitab-widget-widget-content-id' id = 'multicolumn-widget-ID1'>
< B: section class = 'sidebar' id = 'sidebartab1' preferred = 'yes' />
< / Div>
< Div class = 'multitab-widget-content multitab-widget-widget-content-id' id = 'multicolumn-widget-ID2'>
< B: section class = 'sidebar' id = 'sidebartab2' preferred = 'yes' />
< / Div>
< Div class = 'multitab-widget-content multitab-widget-widget-content-id' id = 'multicolumn-widget-id3'>
< B: section class = 'sidebar' id = 'sidebartab3' preferred = 'yes' />
< / Div>
< / Div>

واحفظ التطبيق
======================================== الدرس الثاني
2. ابحث بإستعمال CTRL+F عن
<b:skin/><[[
3. ضع الكود التالي قبله فوقه
/* Tab Widget */
.tabviewsection {
background: #f8f8f8;
text-transform: uppercase;
border-bottom: 5px solid #f34246;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
float: left;
width: 100%;
}
.tabs-widget {
list-style: none;
list-style-type: none;
margin: 0 0 10px 0;
padding: 0;
}
.tabs-widget li {
list-style: none;
list-style-type: none;
padding: 0;
float: left;
border-right: 2px solid #fff;
}
.tabs-widget li a {
color: #fff;
display: block;
padding-right: 16.5px;
padding-left: 16px;
font-size: 13px;
padding-top: 15px;
padding-bottom: 15px;
text-decoration: none;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.tabs-widget-content {
}
.tabviewsection {
margin-top: 10px;
margin-bottom: 10px;
}
.tags_tab {
width: 80px;
text-align: center;
}
.about_tab {
width: 96px;
text-align: center;
}
li.laster {
border: 0px;
width: 120px;
text-align: center;
}
.blog-mobile-link {
display: none;
}
.tabs-widget li a {
padding-right: 20px;
padding-left: 20px;
}
.tabs-widget {
height: 51px;
}
.tw-authors {
width: 570px;
}
.tabviewsection h2 {
display: none;
}
.tabs-widget li a.tabs-widget-current {
padding-bottom: 20px;
margin-top: -10px;
background: #f8f8f8;
color: #444;
text-decoration: none;
border-top: 5px solid #f34246;
font-size: 14px;
text-transform: capitalize;
}
.tabs-widget li a {
background: #f34246;
}

إبحث عن
<div id='sidebar-wrapper'>
5. ضع أسفله مباشرة الكود التالي :
< !-- Tab Widget [start] -->
< div class='tabviewsection'>
< script type='text/javascript'>
jQuery(document).ready(function($){
$(".tabs-widget-content-widget-themater_tabs-1432447472-id").hide();
$("ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a").addClass("tabs-widget-current").show();
$(".tabs-widget-content-widget-themater_tabs-1432447472-id:first").show();
$("ul.tabs-widget-widget-themater_tabs-1432447472-id li a").click(function() {
$("ul.tabs-widget-widget-themater_tabs-1432447472-id li a").removeClass("tabs-widget-current a");
$(this).addClass("tabs-widget-current");
$(".tabs-widget-content-widget-themater_tabs-1432447472-id").hide();
var activeTab = $(this).attr("href");
$(activeTab).fadeIn();
return false;
});
});
< /script>
< ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
< li class='about_tab'><a href='#widget-themater_tabs-1432447472-id1'>About</a></li>
< li class='tags_tab'><a href='#widget-themater_tabs-1432447472-id2'>Tags</a></li>
< li class='laster'><a href='#widget-themater_tabs-1432447472-id3'>Popular</a></li>
< /ul>
< !-- Tab Widget 1 -->
< div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'>
< b:section class='sidebar' id='sidebartab1' preferred='yes'>
< /b:section>
< /div>

< !-- Tab Widget 2 -->
< div class='tabs-widget-content tabs-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='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'>
< !-- Tab Widget 3 -->
< b:section class='sidebar' id='sidebartab3' preferred='yes'>
< /b:section>
< /div>
< /div>
< !-- Tab Widget [endt] -->

واعمل حفظ
======================================== التطبيق الثالث
ابحث عن
]]></b:skin>
فوقه حط
/*----- WMT Madam Via ----*/
.tabs-widget{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:40px}
.tabs-widget li{list-style:none;list-style-type:none;margin:0 0 0 4px;padding:0;float:left}
.tabs-widget li:first-child{margin:0}
.tabs-widget li a{color:#8F8C7C;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjySJgpHTheMbQ0r1hWWsDu97ewt9kuX568h1-BfuuJDQBtXuzeYsjh_geGnEVt0KlPEU_HgL7UwX_1rvDDbc8RTEHu0Qudax6sKbCl498MogMisAE1Ed3tkRXUaAHQnnOB3879qh7l8ek/s1600/tabs-widget-bg.png) left top repeat-x;padding:12px 27px;display:block;text-decoration:none;font:bold 11px Arial,Helvetica,Sans-serif;text-transform:uppercase}
.tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjySJgpHTheMbQ0r1hWWsDu97ewt9kuX568h1-BfuuJDQBtXuzeYsjh_geGnEVt0KlPEU_HgL7UwX_1rvDDbc8RTEHu0Qudax6sKbCl498MogMisAE1Ed3tkRXUaAHQnnOB3879qh7l8ek/s1600/tabs-widget-bg.png) left -140px repeat-x;color:#EE5D06;text-decoration:none}
.tabs-widget-content{}
.tabviewsection{margin-top:10px;margin-bottom:10px;}

ابحث عن
< div class='column-right-inner'>
او
<div id='sidebar-wrapper'>
تحته حط الكود
< div class='tabviewsection'>
< script type='text/javascript'>
jQuery(document).ready(function($){
$(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
$(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a&quot;).addClass(&quot;tabs-widget-current&quot;).show();
$(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id:first&quot;).show();
$(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).click(function() {
$(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).removeClass(&quot;tabs-widget-current a&quot;);
$(this).addClass(&quot;tabs-widget-current&quot;);
$(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide();
var activeTab = $(this).attr(&quot;href&quot;);
$(activeTab).fadeIn();
return false;
});
});
< /script>
< ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
< li><a href='#widget-themater_tabs-1432447472-id1'>Populer</a></li>
< li><a href='#widget-themater_tabs-1432447472-id2'>Label</a></li>
< li><a href='#widget-themater_tabs-1432447472-id3'>Arsip</a></li>
< /ul>
< div class='tabs-widget-content tabs-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='tabs-widget-content tabs-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='tabs-widget-content tabs-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>
< div style='height:5px;clear:both;'/>


واحفظ التطبيق
======================================== الدرس الرابع -
البحث عن
]]></b:skin>
فوقه حط
/* Multi Tab Widget */
.multitab-section{background:transparent;text-transform:uppercase;width:100%;max-width:337px;z-index:-999}
.multitab-widget{list-style:none;margin:0 auto;background:#444;padding:10px 10px 40px;border-radius:4px 4px 0 0;border-bottom:4px solid #ff5050;width:100%}
.multitab-widget li{list-style:none;padding:0px;margin:0;float:left}
.multitab-widget li a{background:transparent;display:block;padding:10px 0;font:13px merriweather sans,sans-serif;font-weight:700;text-shadow:0 1px 1px #000;color:#999}
.multitab-tab{border:0;width:33.3%;text-align:center}
.multitab-section h2,.multitab-section h3,.multitab-section h4,.multitab-section h5,.multitab-section h6 {display:none;}
.multitab-widget li a.multitab-widget-current{padding:12px 0;margin:0;background:#ff5050;text-decoration:none;text-transform:uppercase;border-radius:4px 4px 0 0;text-shadow:0 1px 1px #000;color:#fff}

البحث عن
< div class='sidebar-inner'>
او
<div id='sidebar-wrapper'>
تحته حط الكود
< script type='text/javascript'>
//<![CDATA[
// Multi tab widget
jQuery(document).ready(function($){ $(".multitab-widget-content-widget-id").hide(); $("ul.multitab-widget-content-tabs-id li:first a").addClass("multitab-widget-current").show(); $(".multitab-widget-content-widget-id:first").show(); $("ul.multitab-widget-content-tabs-id li a").click(function() { $("ul.multitab-widget-content-tabs-id li a").removeClass("multitab-widget-current a"); $(this).addClass("multitab-widget-current"); $(".multitab-widget-content-widget-id").hide(); var activeTab = $(this).attr("href"); $(activeTab).fadeIn(); return false; }); });
//]]>
< /script>
< div class='multitab-section'>
< ul class='multitab-widget multitab-widget-content-tabs-id'>
< li class='multitab-tab'><a href='#multicolumn-widget-id1' title='Popular'><i class='fa fa-star fa-fw'/>Popular</a></li>
< li class='multitab-tab'><a href='#multicolumn-widget-id2' title='Label'><i class='fa fa-tags fa-fw'/>Kategori</a></li>
< li class='multitab-tab'><a href='#multicolumn-widget-id3' title='Arsip'><i class='fa fa-tasks fa-fw'/>Arsip</a></li>
< /ul>
< div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id1'>
< b:section class='sidebar' id='sidebartab1' preferred='yes'>
< /b:section>
< /div>
< div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id2'>
< b:section class='sidebar' id='sidebartab2' preferred='yes'>
< /b:section>
< /div>
< div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id3'>
< b:section class='sidebar' id='sidebartab3' preferred='yes'>
< /b:section>
< /div>
< /div>

وسلامتكم

akbear

مرسلة بواسطة akbear

إرسال تعليق

0 تعليقات