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

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

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

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

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

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

معاينة

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

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


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

عبدالله الحربي - من السعوديه مهتم في مجال التدوين بشكل عام وفي بلوجر بشكل خاص , اهوى تصميم القوالب وتكويدها , انشر المحتوى المفيد لي ولزوار مدونتي واعضائها , انتهى.
لا تنسى متابعتي :

عند نقلك للموضوع او نسخه , حاول ان تذكر المصدر لينتفع الزائر في حال اراد المزيد من المساعده , وايضاَ احتراما وتقديراَ للجهود المبذولة في المواضيع.

معلومات عن التدوينة

صورة التدوينة

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

ملخص التدوينة:

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

goust

الساعه : 2015-09-14T21:44:00+03:00

تاريخ : 14‏/09‏/2015

من : المملكة العربيه السعوديه

التعليقات : 3

انشرها :

تاق :