اليوم فيتقني الانترنت احضرنا لكم تدوينة جديدة سميتها اداة القوالب المميزة هي اضافة مشهورة ان كنت تتابع مدونة عرب ويب فهي عبارة عن قالب ترويجي او قالب هدية او قالب مميز او جديد تعرضه على زوار مدونتك وطريقة اضافته سهلة فهي عن طريق اداة في التخطيط عبارة عن صورة وبها عنوان القالب ونبذة عنه وزرين للمعاينة والتحميل.
صورة عن الاضافة
صورة عن الاضافة
الكود :اضفه في اداة جافا سكربت من التخطيط
<div class='widget-content'>
<style>
.item-widget-member {
position: relative;
color: #FFF;
}
.info {
-webkit-box-reflect: below 0.2px -webkit-gradient(linear,left top,left bottom,from(transparent),color-stop(60%,transparent),to(rgba(255,255,255,0.4)));
}
.item-widget-member img {
width: 100%;
height: 250px;
}
.item-widget-member .group-inside {
position: absolute;
top: 60px;
right: 0px;
padding: 20px;
}
.item-widget-member h3 {
font-size: 20px;
color: #FF7400;
margin: 0;
font-family: "Gloria Hallelujah",ge_ss_threeregular;
text-shadow: 4px 3px 0px #394144, 6px 3px 0px rgba(0, 0, 0, 0.15);
text-align: center;
}
.item-widget-member p {
margin-bottom: 24px;
font-size: 12px;
line-height: 20px;
color: #FFFFFF;
background-color: rgba(66, 66, 66, 0.91);
padding: 2px 5px;
font-family: normal,Electrolize,ge_ss_threeregular;
text-align: right;
}
.btn.btn-primary:hover {
background: #767676;
color: #FCFCFC;
}
.btn.btn-primary{
background: #FF6515;
color: #fff;
text-decoration: none;
padding: 10px;
font-size: 12px;
border-radius: 2px;
}
</style>
<div class="item-widget-member">
<div class="thumb">
<a><img src="http://dev.cactusthemes.com/absolute/wp-content/uploads/2014/11/banner001.jpg" title="" /></a></div>
<!-- .thumb -->
<div class="group-inside">
<div class="info">
<h3>
هنا عنوان القالب</h3>
<p>
هنا نبذة عن القالب</p>
<a href="http://tknielantrnat.blogspot.com//
" target="blank" class="btn btn-primary btn-sm">معاينة</a>
<a href="http://tknielantrnat.blogspot.com//
" target="blank" class="btn btn-primary btn-sm">تحميل</a>
</div>
</div>
</div>
</div>
التفاعل
ردحذفphotoshopwep@gmail.com
ردحذف