الان كود اظهار المواضيع حسب التسميات الشكل الثاني




كود اظهار المواضيع حسب التسميات الشكل الثاني

سبق وان طرحت : [ إضافة ] عرض المواضيع حسب تسميه معينه في بلوجر
وهذا الموضوع هو الشكل الثاني له , بل هو مختلف عن السابق بالكامل ولاكن يعتبر شكل اخر له , وهو اضافة جميلة تظهر المواضيع او المشاركات حسب التسميات او الاقسام , بمعنى انك تختار قسم او تسميه وتظهر مواضيعها فقط في الرئيسيه.
الصورة التاليه ستوضح لك الاضافة.


 تركيب الاضافة : 

ادخل قالبك.
واختر مكان مناسب وجيد لوضع الاضافة فيه , مثل اسفل الـ
 class='page
والصق هذا الكود مع تعديل ما سأذكر : 


<script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src='https://googledrive.com/host/0B7Zz9NWIHEOXeHpGODNVeVktSkk'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "http://i.imgur.com/7WK8lcQ.png";
showRandomImg = true;
aBold = true;
summaryPost = 100;
summaryPost1 = 200;
numposts = 4;
numposts1 = 4;
numposts2 = 4;
numposts6 = 4;
Title1 = "CSS1";
Title2 = "CSS2";
Title3 = "CSS3";
Title4 = "CSS4";
Title5 = "CSS5";
Title6 = "CSS6";
    //]]></script>
<div class='cf' id='tabber-wrapper'>
<ul class='tab-view'>
<li><a href='#tab1'><script>document.write(Title1);</script></a></li>
<li><a href='#tab2'><script>document.write(Title2);</script></a></li>
<li><a href='#tab3'><script>document.write(Title3);</script></a></li>
<li><a href='#tab4'><script>document.write(Title4);</script></a></li>
<li><a href='#tab5'><script>document.write(Title5);</script></a></li>
<li><a href='#tab6'><script>document.write(Title6);</script></a></li>
</ul><div class='clear'/>
<div class='tab-wrapper'>
<div class='tabber' id='tab1'>
<script>
document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/CSS1?max-results=&quot;+numposts2+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script></div>
<div class='tabber' id='tab2'>
<script>
document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/CSS2?max-results=&quot;+numposts2+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script></div>
<div class='tabber' id='tab3'>
<script>
document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/CSS3?max-results=&quot;+numposts2+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script></div>
<div class='tabber' id='tab4'>
<script>
document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/CSS4?max-results=&quot;+numposts2+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script></div>
<div class='tabber' id='tab5'>
<script>
document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/CSS5?max-results=&quot;+numposts2+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script></div>
<div class='tabber' id='tab6'>
<script>
document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/CSS6?max-results=&quot;+numposts2+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script></div>
<div class='clear'/>
</div></div><script type='text/javascript'>
 //<![CDATA[
var _0x3c49=["hide",".tabber","show","active","addClass","ul.tab-view li:first",".tabber:first","removeClass","ul.tab-view li","href","attr","a","find","fadeIn","click","ready"];jQuery(document)[_0x3c49[15]](function (){$(_0x3c49[1])[_0x3c49[0]]();$(_0x3c49[5])[_0x3c49[4]](_0x3c49[3])[_0x3c49[2]]();$(_0x3c49[6])[_0x3c49[2]]();$(_0x3c49[8])[_0x3c49[14]](function (){$(_0x3c49[8])[_0x3c49[7]](_0x3c49[3]);$(this)[_0x3c49[4]](_0x3c49[3]);$(_0x3c49[1])[_0x3c49[0]]();var _0x88b3x1=$(this)[_0x3c49[12]](_0x3c49[11])[_0x3c49[10]](_0x3c49[9]);$(_0x88b3x1)[_0x3c49[13]]();return false;} );} );

 //]]>
</script>
<style>
#tabber-wrapper {
    width: 100%;
    float: right;
    overflow: hidden;
    background: #fff;
    margin-right: 10px;
    max-height: 230px;
    overflow-y: hidden;
}
.tabber .column_img:hover {
    margin-bottom: 12px;
    opacity: .9;
    transition: all .6s;
}
ul.tab-view {
    float: right;
    list-style: none;
    width: 100%;
    margin: 0;
    padding: 5px 5px 6px;
    font-family: 'Droid Arabic Naskh';
    background: #FFFFFF;
    border-bottom: 3px solid #F3F3F3;
}
ul.tab-view li {
    float: right;
    height: 26px;
    line-height: 26px;
    overflow: hidden;
    position: relative;
    margin: 0;
    padding: 0;
    margin-left: 9px;
}
ul.tab-view li a {
    text-decoration: none;
    color: #333;
    display: block;
    outline: none;
    font-weight: 400;
    padding: 0 15px;
    background-color: rgba(109, 109, 109, 0.1);
}
ul.tabs li:hover {
    border-radius: 0;
}
ul.tab-view li a:hover,ul.tabs li:hover{
    background-color: #ECBA7B;
    border-radius: 5px;
    color: #fff;
}
html ul.tab-view li.active, html ul.tab-view li.active a, html ul.tab-view li.active a:hover {
    color: #fff;
    background: #67B587;
    border-radius: 2px;
    text-shadow: none;
}
.tab-wrapper {
    overflow: hidden;
    clear: both;
    float: right;
    width: 100%;
    margin-bottom: 10px;
}
.tabber { padding: 5px 0 0 }
.tabber .column {
    float: right;
    display: inline;
    width: 180px;
    height: 150px;
    margin-right: 5px;
    margin-bottom: 35px;
    padding: 2px 2px 5px;
}
.tabber .column_img {
    background: #fff;
    padding: 0px;
    width: 180px;
    height: 175px;
    margin: 0;
    transition: all .6s;
}
.tabber h2 {
    line-height: 18px;
    text-align: center;
    background: rgba(0, 0, 0, 0.35);
    padding: 10px 0 10px 21px;
    width: 179px;
    position: relative;
    bottom: 80px;
    opacity: .9;
    font-family: cursive;
    font-size: 12px;
    margin-left: 0px;
    margin-right: 1px;
    font-weight: 400;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.tabber h2 a { color: #FFF }
.tabber h2 a:hover {
    color: #FFF;
    text-decoration: none;
}
</style>

عدل اللون الاحمر : هذا كود مكتبة الجيكوري , اذا كان بالفعل متواجد بمدونتك فالافضل عدم اضافته.
عدل اللون الاصفر : استبدلهم بأسم القسم او التسميه التي تريد ظهور مواضيعها , هناك 12 كلمة يجب استبدالهم جميعاَ.


اذا احتجت الى مساعدة فباشر بالتعليق.


الان كود اظهار المواضيع حسب التسميات الشكل الثاني  الان كود اظهار المواضيع حسب التسميات الشكل الثاني بواسطة walid al Bana on 4:55:00 ص القسم: 5

ليست هناك تعليقات :

يتم التشغيل بواسطة Blogger.