عشاق منصة بلوجر هم كثر و في كل مرة يبحثون عن أشياء جديدة لطرحها على مواقعهم و مدوناتهم و في درس اليوم سأعطيكم إضافة يبحث عنها تقريبا كل عشاق بلوجر ، الا و هي سلايد شو تلقائي و إحترافي يمكن إضافته إلى جميع مدونات بلوجر ، و لكن تابع الموضوع جيدا لتتلعم تركيبها بإحترافية .
في البداية يمكنك معاينة السلايد شو على الموقع التالي :
في البداية يمكنك معاينة السلايد شو على الموقع التالي :
طريقة التركيب :
أولا قم بتحرير القالب ثم Ctrl+f و ابحث عن وسم ]]> و ضع الكود التالي قبله :
.LatestTitle {
z-index: 70;
width: 32px;
height: 140px;
position: absolute;
right: -7px;
top: 10px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgovGXIH71cQKN72lV_G9nZh_VaeJ1y_10BIAQBybF86mdEY7hM-r5lscCJ7h_mEfkY9nkIW1l_YMZj5HXQN1czmTgV0NTz_XnCezGaJ-1kvxEUDiPhtA2X2x2CRkvec8e2Ha39KIOSTxc/s1600/LatestTitle.png);
}
.recent-layout .box-title h2.title{font-family:tahoma;display:inline-block}
.more-link{height:20px;line-height:20px;padding:0 5px;margin-top:7px;font-size:11px;color:#FFF;background-color:rgba(255,255,255,0.32);border-radius:5px}
.more-link:after{font-family:fontawesome;font-size:9px;vertical-align:middle}
.box-title{margin-bottom:15px;box-shadow:rgba(0,0,0,.18) 2px 5px 5px 0;background:linear-gradient(to bottom,#3a6ca5 10%,#102a60 50%,#031e5f 51%,#255992 100%);border-radius:5px 5px 0 0}
.box-title h2{display:inline-block}
.box-title h2 a{color:#FFF;font-weight:100;font-size:15px;text-transform:uppercase;display:block;}
.box-title h2 a:before{content:"\f1ea";font-family:fontawesome;font-size:16px;vertical-align:middle;font-weight:400}
.recent-date:before{content:'\f073';font-family:fontawesome;color:#bbb}
.recent-date{color:#999;font-weight:400;font-size:12px}
.recent-author:before{content:'\f007';font-family:fontawesome;color:#bbb}
.recent-author{color:#999;font-weight:400;font-size:12px}
.intro-loader{position:absolute;top:0;width:100%;height:100%}
.intro{width: 99%;top: 15px;margin:0px auto 28px auto;position:relative;padding:10px 10px 0 10px;background-color:#FFFFFF;box-shadow:0 0 4px rgba(0,0,0,0.2);border-radius:2px}
.intro-loader .fa{position:absolute;top:50%;left:50%;margin-left:-10px;margin-top:-10px;font-size:20px;color:#222}
.intro .widget{margin-bottom:10px!important;overflow:hidden}
.intro h2{display:none;display:none}
.intro .rcp-thumb{width:100%;height:215px;display:block}
.intro li:hover .rcp-thumb{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);transform:scale(1.1);transition:all .3s ease;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-o-transition:all .3s ease}
.intro .rcp-title{font-family:tahoma;font-size:16px}
.intro .rcp-thumb:after{content:no-close-quote;position:absolute;bottom:0;width:100%;height:151px;opacity:.8}
.intro li{float: left;height:189px;position:relative;padding:.1px;overflow:hidden;background:#111;width:31.90%;margin:0 0 10px 0;transition:all .4s;border:3px solid #fff;box-shadow:0 0 3px 0 rgba(0,0,0,0.71);margin-top:1px;margin-left:1px}
.intro li:nth-child(2){margin-bottom:6px}
.intro li:first-child{height:385px;background:#111;width:65.9%;padding:0;transition:all .4s;border:3px solid #fff;box-shadow:0 0 3px 0 rgba(0,0,0,0.71);margin-right:1px;margin-top:1px}
.intro li:first-child .rcp-thumb{height:450px}
.intro li:first-child .rcp-title{font-size:25px}
.intro .post-panel{position:absolute;bottom:20px;margin-right: 13px;background: #4443;padding: 10px;}
.intro .rcp-title a{color:#FFF;font-weight:700;position:relative;bottom:10px;line-height:14px;}
.intro .rcp-title a:hover{color:#fff;transform:scale(1.1);-webkit-transition:all .3s ease;opacity:.5}
.intro li:first-child .rcp-title:hover{margin-bottom:10px}
.intro .rcp-title:hover{margin-bottom:10px}
.intro .recent-date:before{color:#bbb}
.intro .recent-date{color:#bbb}
.intro .recent-author:before{color:#bbb}
.intro .recent-author{color:#bbb}
.intro .post-tag{text-transform:uppercase;font-weight:700;background:rgba(0,0,0,0.3);display:inline-block;color:#fff;position:absolute;transition:all .4s;font-size:18px;line-height:1.4;padding:3px 6px;top:10px;left:10px;z-index:2;border-radius:5px}
Aucun commentaire:
Enregistrer un commentaire