26 يوليو 2016

حصريا سلايد شو احترافي لمدونات بلوجر


حصريا سلايدشو احترافي لمدونات بلوجر - اليوم سنتطرق الى اضافة جديدة وهي لاضافة سلايدشو الى مدونة بلوجر 😇 و لكن بشكل جديد و حصري فقط على مدونتنا و السلايدشو هو من اهم اضافات بلوجر حيث يقوم بجمع عدة مواضيع و يضهرها على شكل سلايد شو في المدونة و السلايدشو سيعمل تلقائيا و طريقة اضافته ايضا سهلة جدا فلدينا اسهل طريقة لاضافة سلايدشو تلقائي الى مدونة بلوجر .

                                         



طريقة أضافة السلايد شو

لوحة التحكم ثم قالب ثم تحرير HTML و ابحث عن </style>  باستخدام ctrl + f
و ضع فوقها هذا الكود
/* Featured Posts by th3kurdi.blogspot.com */
#featured .widget-content{display:none}
#featured{position:relative;overflow:hidden;padding:0 20px;margin:0 auto}
#featured .layout-content{margin:25px 0 0;height:auto;overflow:hidden}
#featured h2{display:none;display:none}
#featured .feat-column1{float:right;width:66%;height:379px;box-sizing:border-box}
#featured .feat-column2{float:left;width:34%;height:379px;background:#222;padding:12px;box-sizing:border-box;position:relative;overflow-y:auto}
#featured .feat-column1 .hot-item{width:100%;height:379px;position:relative;float:right;display:block;overflow:hidden;padding:0}
#featured .feat-column1 .hot-item #featured-inner{position:relative;overflow:hidden}
#featured .feat-column1 .rcp-thumb{width:100%;height:379px;position:relative;display:block;overflow:hidden}
#featured .rcp-title{font-size:14px;line-height:1.4em;position:relative;margin-bottom:6px}
#featured .rcp-title a{color:#F2F2F2;font-weight:700;position:relative;line-height:1.4em}
#featured .rcp-title a:hover{color:#fff}
#featured .feat-column1 .rcp-title{font-size:18px;line-height:1.4em;margin-bottom:0}
#featured .feat-column1 .rcp-title a{color:#FFF;line-height:1.4em;text-shadow:0 .5px .5px rgba(34,34,34,0.3)}
.featured-meta {display: none;}
#featured .feat-column1 .rcp-thumb:after{content:no-close-quote;position:absolute;right:0;bottom:0;width:100%;height:150px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsSwU8BQ9U9uJ1X-KWB7S2oZbygiBIjph3swU4-0b3QynO-g6vECorW0LtKCIBlOlNHGEIR5kMuNMyjuFEuJ72fjJ1mwJGOrIEaJbQR5YHUD8bsBt2gUdBpMIJnEOcxiNdXCXKWtMHkQA/s1600-r/metabg.png) repeat-x;opacity:.8;background-size:100% 100%;overflow:hidden}
#featured .post-panel{position:absolute;right:0;bottom:0;width:100%;padding:15px;z-index:2;box-sizing:border-box}
#featured #featured-meta{font-size:11px;color:#ccc;font-weight:400}
#featured-date{margin-right:10px}
#featured .feat-column2 li{display:block;width:100%;float:left;margin:0 0 12px;padding:0 0 12px;border-bottom:1px solid #333}
#featured .feat-column2 li.item5{margin:0;padding:0;border-bottom:0}
#featured .feat-column2 li .feat-thumbnail{width:100px;height:70px;display:table-cell;vertical-align:middle;overflow:hidden}
#featured .feat-column2 li .rcp-thumb{width:100px;height:70px;position:relative;display:block}
#featured .feat-column2 li .post-content{display:table-cell;padding-right:15px;padding-left:5px}
#featured .post-tag{position:absolute;top:15px;right:15px;background-color:#cf2f1e;color:#fff;font-weight:400;z-index:2;height:22px;line-height:22px;padding:0 8px;font-size:12px}
.featured-overlay{position:absolute;right:0;top:0;z-index:1;width:100%;height:100%;background-color:rgba(40,35,40,0.02);transition:all .3s}
#featured .hot-item:hover .featured-overlay,#featured .feat-thumbnail:hover .featured-overlay{background-color:rgba(40,35,40,0.2)}
.recent-boxes{overflow:hidden;position:relative}
.recent-date{color:#bdbdbd;font-size:11px;font-weight:400}
.recent-date:before,#featured-date:before{content:&#39;\f017&#39;;font-family:fontawesome;margin-left:5px}
#featured-author:before{content:&#39;\f007&#39;;font-family:fontawesome;margin-left:5px}
#featured .post-tag:hover{background:#222}
.box-sec .widget-content,.box-sec h2{display:none}

ثم ابحث عن <div id='content-wrapper' و ضع اسفلها هذا الكود
<b:section class='banner section' id='banner' maxwidgets='1' mobile='no' showaddelement='yes'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='featured' id='featured' mobile='no'>
<div class='featured-sec section section' id='featured-sec' mobile='no' name='Featured Posts'><div class='widget HTML' data-version='1' id='HTML2'>
<div class='widget-content'>
<div id='recent'/>
</div>
</div></div>
</div>
</b:if>

ولا تحتاج الى تغيير اي شيء السلايد شو يعمل تلقائيا فقط اضغط على حفظ
و انتهى شرحنا اذا واجهتك مشاكل اعلمنا في التعليقات

4 التعليقات

سلايدر رائع واصل يا مبدع

شكرا لك (o) زرنا مجددا

رائع رائع *-* شكرا لك اخي

العفو (o) زرنا مجددا

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1⃣ أن يكون التعليق خاص بمحتوى التدوينة
2⃣ أن لا تضع أي روابط خارجية
3⃣ لإضافة كود حوله أولاً بمحول الأكواد
الابتساماتالابتسامات