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

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

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

تركيب الاضافة سهل جدا

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

•  سجل الدخول الى حسابك فى بلوجر.
• اذهب الى القالب > تحرير القالب HTML

إبحث على </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/AVvXsEhzTmWfIKk2v3gF46POPIQPWMDYyJPOXSVrtq-ZPRxk_mRxt9vNZxqAVEYnORdLf-ZU2VX_G-TWtOxKASozNylIFkck5xRrUfxrORM87jWlm-aoNAegYVZgC3AG26BRZ-p-JVhSsRakUs31/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>

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

/*اعدادات السلايدر*/ var NO_IMAGE = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUIU-FPiebD7Q4uuL7fEt2Le1W-SSZj4F7kHPYbrgploria6zzSCXxmdN3IsSpN4iE4YSmapprM-i7E8PmSljDhGJEVJ11dvs9EaLfcLenBOQN0S95OHmt2XybSS3OSmIDwkq_eOa8uFo/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);

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

اقرا ايضاشركة آبل قد تؤجل إطلاق الآيفون الجديد لعدة أسابيع

اقرا ايضافيس بوك تقترب من إطلاق الوضع الليلي في تطبيقها الرسمي

اقرا ايضاتحميل برنامج Collaboration Player 3.0.1.0 برابط مباشر

اقرا ايضاشرح آلية تنزيل برمجيات الجامعة الافتراضية السورية

crossorigin="anonymous">

<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="KLSHY BY KHDER"></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

💕💙اتمنى ان يكون الشرح مفيد لكم.💙💕