شكل مميز لسكربت لعرض المواضيع حسب التسمية لمدونات بلوجر

السلام عليكم ومرحبا بكم في مدونة عبدو تكنولوجي اضافة اليوم هيا عبارة عن سكربت لعرض المواضيع حسب التسمية بشكل مختلف عن الاضافات السابقة التي يمكنك زيارتهم

• سلايد شو يعرض المواضيع حسب التسمية الشكل الرابع
• سكربت عرض المواضيع حسب التسمية لمدونات بلوجر
• تركيب اضافة سكربت يعرض الموضيع حسب التسمية باشكال متعددة +شكل سلايد شو

تركيب الاضافة سهل جدا اولا يمكنك معاينتها من هنا

الان نبدا بشرح التركيب

1. إبحث على </head> وضع الكود التالي فوقه

<style>.box_gallery{background:#ddd;color:#eee;padding:50px 0;margin-bottom:30px;overflow:hidden} .abdoutech_box .star_rating .fa:nth-child(1),.goombox .star_rating .fa:nth-child(1),li.carousel-item .star_rating .fa:nth-child(1){color:red} .abdoutech_box .star_rating .fa:nth-child(2),.goombox .star_rating .fa:nth-child(2),li.carousel-item .star_rating .fa:nth-child(2){color:#f50} .abdoutech_box .star_rating .fa:nth-child(3),.goombox .star_rating .fa:nth-child(3),li.carousel-item .star_rating .fa:nth-child(3){color:#fa0} .abdoutech_box .star_rating .fa:nth-child(4),.goombox .star_rating .fa:nth-child(4),li.carousel-item .star_rating .fa:nth-child(4){color:#3cbd1b} .abdoutech_box .star_rating .fa:nth-child(5),.goombox .star_rating .fa:nth-child(5),li.carousel-item .star_rating .fa:nth-child(5){color:#127adb} .abdoutech_box .star_rating .fa:nth-child(6),.goombox .star_rating .fa:nth-child(6),li.carousel-item .star_rating .fa:nth-child(6){color:#c720a3} .content-wrapper {position: relative;max-width: 1100px;margin: 0 auto;} .gallery li:hover .recent-content,.videos li:hover .recent-content{padding-bottom:15px} .gallery ul li{width:32.7%;height:250px;overflow:hidden;float:right;margin-bottom:10px;display:inline-block;position:relative;padding:0} .gallery ul li:nth-child(1),.gallery ul li:nth-child(2),.gallery ul li:nth-child(4),.gallery ul li:nth-child(5){margin-left:10px} .gallery ul li .box-image{width:100%;height:250px;display:block} .gallery .recent-content{bottom:25%;position:absolute;width:100%;z-index:2;padding:10px;text-align:right;box-sizing:border-box} .gallery .recent-title a,.headerbox_content h2{text-align:center;font-family:inherit;text-transform:uppercase} .gallery .recent-title a{display:block;font-size:17px;color:#fff;font-weight:700;line-height:1.5em;text-shadow:0 .5px .5px rgba(34,34,34,.3)} .gallery .recent-content .recent-title{background:rgba(0,0,0,.31);padding:10px;margin:10px} .recent-boxes .gallery{width:100%;float:right} .gallery-overlay{display:block;content:'';position:absolute;bottom:0;width:100%;height:100%;right:0;z-index:1;opacity:.8;transition:all .35s;-moz-transition:all .35s;-webkit-transition:all .35s;-o-transition:all .35s;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk2Yv8wJSpNsKD9D1dNBIxCIlGDDXe9HqalERhesIdxRHvkUnErx1zpwd0niLQ2TuYPVABtJHol1AsJ5N_oWPirMv28Mjd-DEAgMgmsEj4lXLm_aDXxI8MHEmPGpEoDK965nYw1lbBz1Rx/s1600/pattern.png) top right rgba(58,78,90,.4)} .gallery li:hover .gallery-overlay{opacity:.2} @media screen and (max-width: 1100px) {.content-wrapper{max-width:98%}.gallery ul li {width: 45.7%;}} @media screen and (max-width: 800px){.content-wrapper{position:relative;width:100%;margin:0 auto}.gallery ul li {width: 47.7%;} .gallery ul li:nth-child(4) {margin-right: 9px!important;}} @media screen and (max-width: 240px){.content-wrapper{position:relative;width:100%;margin:0 auto}.gallery ul li {width: 100%!important;}} </style>

1. و الان إبحث على </body> وضع الكود التالي فوقه

/*اعدادات السلايدر*/ var NO_IMAGE = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1J3UZcYFgKrGGqQ1lzXWqlwa98Q_QC1LZ3Rr5_7SWI9ePtn7BjI4dVOAQFJpQ2VDd3_f_o_5iZhxvlnlM7vrTlkDEHHSvCZCS40ePYrZgRlSPPq5I71o_BM7BXD3qM75Xv5_qOktU_oI/s1600-r/nth.png"; // هنا صورة البديلة var node = document.createElement('script'); node.type = 'text/javascript'; node.async = true; node.src = '//rawgit.com/abdelalilebbihi/abdou_tech/master/gadget/script-label.js'; var runscript = document.getElementsByTagName('script')[0]; runscript.parentNode.insertBefore(node, runscript);

1. و الان ضع الكود التالي في المكان الذي تريد ضهور فيه سكربت

<div class='box_gallery'><div class='content-wrapper'><div class='abdoutech_box' id='gallerybox'> <b:section class='glr_box' id='Gallery-box' preferred='yes'> <b:widget id='HTML2' locked='false' title='' type='HTML' version='1'> <b:widget-settings> <b:widget-setting name='content'><![CDATA[<span data-type="gallery" data-label="سينما"></span>]]></b:widget-setting> </b:widget-settings> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2></b:if> <div class='widget-content'> <data:content/> </div></b:includable> </b:widget> </b:section></div></div></div>

الان احفظ القالب و اذهب الى التخطيط و غير التسمية فقط

<span data-type="gallery" data-label="هنا التسمية"></span

اذا اعجبتك التدوينة لا تنسى الاشتراك في المدونة لكي تتوصل بكل ما هوا جديد من هنا

شارك هذا