recent
أخبار ساخنة

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

Walid Al-Bana
الصفحة الرئيسية

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

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

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

ادخل قالبك.
واختر مكان مناسب وجيد لوضع الاضافة فيه , مثل اسفل الـ
 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 كلمة يجب استبدالهم جميعاَ.

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


google-playkhamsatmostaqltradent