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

Admin Amer

مايو 02, 2018

0 تعليقات

شاركه غرد جوجل+

السلام عليكم ورحمة الله تعالى وبركاته أهلا بكم متابعي وأصدقاء الخبير عامر بشير ، مرحبا بك أخي / أختي القاريء (ة) في موضوع تقني جديد لهذا اليوم، نتمنى لكم الاستفادة ومتابعة ممتعة للجميع.

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

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

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

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

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

<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://4.bp.blogspot.com/--OzH85Gymqc/Wdim0oCVnaI/AAAAAAAAA48/89VTnKzv4HEVKS3tixaIiUbI3PPbjnOWgCLcBGAs/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. و الان إبحث على  وضع الكود التالي فوقه

/*اعدادات السلايدر*/ var NO_IMAGE = "http://3.bp.blogspot.com/-Yw8BIuvwoSQ/VsjkCIMoltI/AAAAAAAAC4c/s55PW6xEKn0/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>

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



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

الكلمات المفتاحية :

Written by you: Technical blogger AMER BACHIR

URL Of Post:

http://ab-expert.blogspot.com/2018/05/blog-post_2.html

HTML Code Of Post:

<a href="http://ab-expert.blogspot.com/2018/05/blog-post_2.html">شكل مميز لسكربت لعرض المواضيع حسب التسمية لمدونات بلوجر كتبها: المدون التقني - الخبير عامر بشير</a>