اضافة اداة مواضيع مختارة بشكل احترافي للبلوجر
اهلا اعزائي زوار مدونة اللامي
موضوعنا اليوم حول اضافات البلوجر حسث سنتكلم حول اضافة اداة مواضيع مختارة
بشكل جديد وبتاثير احترافي للبلوجر وتكمن اهمية هذه الاضافة في ابراز شيئ ما او ايصال ملاحظة او تنويه للزائر بشكل افضل.
شرح تركيب الاضافة
اولأ توجه الى التخطيط ثم اضف اداة html/javascript
ثانيأ وضع الكود التالي داخل الاداة
<style>
i.fa.fa-fw.fa-search {
background-color: #424E5A;
border-radius: 100px;
padding: 3px 0px 3px 0px;
color: #FFFFFF;
}
i.fa.fa-fw.fa-comments-o {
background-color: #0894D8;
border-radius: 100px;
padding: 3px 0px 3px 0px;
color: #FFFFFF;
}
h212 {
display: block;
text-align: center;
margin: -51px -31px 0px 0px !important;
width: 215px;
background: rgba(0, 168, 171, 0.81);
padding: 2px 4px 4px 4px;
}
h212:before {
font-family: fontawesome;
content: '\f005\f005\f005';
display: inline-block;
position: absolute;
color: #f39c12;
text-align: center;
bottom: 0;
left: 0;
margin: -54px 6px;
font-size: 11px;
padding: 0;
font-weight: normal;
line-height: normal;
transition: all .3s;
background-color: white;
padding: 2px 4px 2px 4px;
}
#BAimgEffect *, #BAimgEffect *:after, #BAimgEffect *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }
#BAimgEffect a {outline: none;color: #3498db;text-decoration: none;}
#BAimgEffect a:hover, #BAimgEffect a:focus {
color: #528cb3;
}
.contentBAEffect {
margin: 0 auto;
}
.contentBAEffect > h212 {
clear: both;
margin: 0;
padding: 4em 1% 0;
color: #484B54;
font-weight: 800;
font-size: 1.5em;
}
.contentBAEffect > h212:first-child {
padding-top: 0em;
}
.grid {
position: relative;
width: 685px;
clear: both;
margin: 0 auto;
padding: 1em 0 4em;
list-style: none;
text-align: center;
}
/* Common style */
.grid figure {
position: relative;
float: left;
overflow: hidden;
margin: -14px 0% 14px 0px;
min-width: 215px;
max-width: 478px;
max-height: 306px;
width: 18%;
height: 121px;
background: #3085a3;
text-align: center;
cursor: pointer;
}
.grid figure img {
position: relative;
display: block;
min-height: 100%;
max-width: 100%;
opacity: 0.8;
width: 100%;
height: 100%;
}
.grid figure figcaption {
padding: 2em;
color: #fff;
text-transform: uppercase;
font-size: 1.25em;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.grid figure figcaption::before,
.grid figure figcaption::after {
pointer-events: none;
}
.grid figure figcaption,
.grid figure figcaption > a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a {
z-index: 1000;
text-indent: 200%;
white-space: nowrap;
font-size: 0;
opacity: 0;
}
.grid figure h212 {
word-spacing: 0em;
font-weight: 300;
}
.grid figure h212 span {
font-weight: 800;
}
.grid figure h212,
.grid figure p {
margin: 0;
}
.grid figure p {
letter-spacing: 1px;
font-size: 68.5%;
}
/* Individual effects */
/*-----------------*/
/***** Winston *****/
/*-----------------*/
figure.effect-winston {
background: #162633;
text-align: left;
margin: -12px 0px 17px 4.4px;
float: right;
}
figure.effect-winston img {
-webkit-transition: opacity 0.45s;
transition: opacity 0.45s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
figure.effect-winston figcaption::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(https://googledrive.com/host/0B30379AIS0OdbDVxSDFKUU9Ib28/) no-repeat center center;
background-size: 122% 120%;
content: '';
-webkit-transition: opacity 0.45s, -webkit-transform 0.45s;
transition: opacity 0.45s, transform 0.45s;
-webkit-transform: rotate3d(0,0,1,45deg);
transform: rotate3d(0,0,1,45deg);
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
}
figure.effect-winston h212 {
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,20px,0);
transform: translate3d(0,20px,0);
}
figure.effect-winston p {
position: absolute;
right: -14px;
bottom: -6px;
padding: 0 1.5em 7% 0;
}
figure.effect-winston a {
margin: 0 0px;
color: #5d504f;
font-size: 170%;
}
figure.effect-winston a:hover,
figure.effect-winston a:focus {
color: #cc6055;
}
figure.effect-winston p a i {
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,50px,0);
transform: translate3d(0,50px,0);
}
figure.effect-winston:hover img {
opacity: 0.6;
}
figure.effect-winston:hover h212 {
}
figure.effect-winston:hover figcaption::before {
opacity: 0.7;
-webkit-transform: rotate3d(0,0,1,20deg);
transform: rotate3d(0,0,1,20deg);
}
figure.effect-winston:hover p i {
opacity: 1;
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
figure.effect-winston:hover p a:nth-child(3) i {
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
}
figure.effect-winston:hover p a:nth-child(2) i {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
figure.effect-winston:hover p a:first-child i {
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
}
</style>
<div id="BAimgEffect">
<div class="contentBAEffect">
<div class="grid">
<figure class="effect-winston">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW61RBHI56rYUEpmBcTiGb9wZyzHiaUggpa16nPX-y2OJdPCAJtUNhZdFU3rMbkwr9ax1O60fpreAQnn1Eem4WYdB08BSqSVGwaR8RdEFKeh5MQkebBKg4Ah8XBZ34KxCVX8f03Glx-mc/s1600/%25D8%25A7%25D8%25B9%25D9%2584%25D8%25A7%25D9%2586+-+Copy.png" alt="altالصورة"/>
<figcaption>
<h212>هناك حقيقة مثبتة منذ زمن طويل</h212>
<p>
<a href="#l"><i class="fa fa-fw fa-search"></i></a>
<a href="#"><i class="fa fa-fw fa-comments-o"></i></a>
</p>
</figcaption> </figure>
<figure class="effect-winston">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW61RBHI56rYUEpmBcTiGb9wZyzHiaUggpa16nPX-y2OJdPCAJtUNhZdFU3rMbkwr9ax1O60fpreAQnn1Eem4WYdB08BSqSVGwaR8RdEFKeh5MQkebBKg4Ah8XBZ34KxCVX8f03Glx-mc/s1600/%25D8%25A7%25D8%25B9%25D9%2584%25D8%25A7%25D9%2586+-+Copy.png" alt="altالصورة"/>
<figcaption>
<h212>هناك حقيقة مثبتة منذ زمن طويل</h212>
<p>
<a href="#"><i class="fa fa-fw fa-search"></i></a>
<a href="#"><i class="fa fa-fw fa-comments-o"></i></a>
</p>
</figcaption> </figure>
<figure class="effect-winston">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW61RBHI56rYUEpmBcTiGb9wZyzHiaUggpa16nPX-y2OJdPCAJtUNhZdFU3rMbkwr9ax1O60fpreAQnn1Eem4WYdB08BSqSVGwaR8RdEFKeh5MQkebBKg4Ah8XBZ34KxCVX8f03Glx-mc/s1600/%25D8%25A7%25D8%25B9%25D9%2584%25D8%25A7%25D9%2586+-+Copy.png" alt="altالصورة"/>
<figcaption>
<h212>هناك حقيقة مثبتة منذ زمن طويل</h212>
<p>
<a href="#"><i class="fa fa-fw fa-search"></i></a>
<a href="#"><i class="fa fa-fw fa-comments-o"></i></a>
</p>
</figcaption> </figure>
<figure class="effect-winston">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW61RBHI56rYUEpmBcTiGb9wZyzHiaUggpa16nPX-y2OJdPCAJtUNhZdFU3rMbkwr9ax1O60fpreAQnn1Eem4WYdB08BSqSVGwaR8RdEFKeh5MQkebBKg4Ah8XBZ34KxCVX8f03Glx-mc/s1600/%25D8%25A7%25D8%25B9%25D9%2584%25D8%25A7%25D9%2586+-+Copy.png" alt="altالصورة"/>
<figcaption>
<h212>هناك حقيقة مثبتة منذ زمن طويل</h212>
<p>
<a href="#"><i class="fa fa-fw fa-search"></i></a>
<a href="#"><i class="fa fa-fw fa-comments-o"></i></a>
</p>
</figcaption> </figure>
<figure class="effect-winston">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW61RBHI56rYUEpmBcTiGb9wZyzHiaUggpa16nPX-y2OJdPCAJtUNhZdFU3rMbkwr9ax1O60fpreAQnn1Eem4WYdB08BSqSVGwaR8RdEFKeh5MQkebBKg4Ah8XBZ34KxCVX8f03Glx-mc/s1600/%25D8%25A7%25D8%25B9%25D9%2584%25D8%25A7%25D9%2586+-+Copy.png" alt="altالصورة"/>
<figcaption>
<h212>هناك حقيقة مثبتة منذ زمن طويل</h212>
<p>
<a href="#"><i class="fa fa-fw fa-search"></i></a>
<a href="#"><i class="fa fa-fw fa-comments-o"></i></a>
</p>
</figcaption> </figure>
<figure class="effect-winston">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW61RBHI56rYUEpmBcTiGb9wZyzHiaUggpa16nPX-y2OJdPCAJtUNhZdFU3rMbkwr9ax1O60fpreAQnn1Eem4WYdB08BSqSVGwaR8RdEFKeh5MQkebBKg4Ah8XBZ34KxCVX8f03Glx-mc/s1600/%25D8%25A7%25D8%25B9%25D9%2584%25D8%25A7%25D9%2586+-+Copy.png" alt="altالصورة"/>
<figcaption>
<h212>هناك حقيقة مثبتة منذ زمن طويل</h212>
<p>
<a href="#"><i class="fa fa-fw fa-search"></i></a>
<a href="#"><i class="fa fa-fw fa-comments-o"></i></a>
</p>
</figcaption> </figure>
</div>
</div>
</div>
ثم غير المطلوب
اضف تعليقاً عبر:
الابتسامات