اضافة موضوع حصرى او مميز لمدونتك

السلام عليكم ورحمة الله وبركاتة

مرحبا بكم زوار مدونة مدون

اليوم معانا اضافة جميلة جدا

هى من تكويد بيتر هانى صاحب مدونة ابداعاتى سابقا

فائدة الأضافة

اصحاب المدون قد تكون فى بعض الأحيان

قمت بأضافة موضوع حصرى او مميز

وقد ثبتة بالمدونة لكن الزوار يشاهدة دون اهتمام

اليوم مع الأضافة ستجلب زيارتك لهذا الموضوع بشكل انيق وجذاب

يمكنك معاينة الأداة على الجانب الأيسر لمدونتى

الكود وشرحة

<div class="wrapper2">
<section class="row">
<div class="container-item2">
<div class="item">
<div class="item-overlay2">
<div class="sale-tag"><span>حصرى </span></div>
</div>
<div class="item-content2">
<div class="item-top-content2">
<div class="item-top-content-inner2">
<div class="item-product2">
<div class="item-top-title">
<strong>قالب عرب ويب</strong>
<p class="subdescription2">
النسخة الأجنبية </p>
</div>
</div>
<div class="item-product-price">
<div style="font-size:200%;"><span class="price-num">حصرى</span></div>
<p class="subdescription2"></p>
</div>
</div>
</div>
<div class="item-add-content">
<div class="item-add-content-inner">
<div class="section">
<a href="http://mdwanblog.blogspot.com/2014/09/arbwep.html" class="btn buy expand">اقرا الأن</a>
</div>
</div>
</div>
</div>
</div>

</div>
</section></div>


<style>/* Base settings */

/* page setup */
.wrapper2{
width:100%;
max-width:1000px;
}
section.row{
}
.row{
width: 100%;
display: block;
clear: both;
}
/* Actual content */
.container-item2{
position:initial;
}
.item{
width:280px;
height:230px;
background-image: url(http://3.bp.blogspot.com/-PNBUVxXzuZw/VApZFq5pjVI/AAAAAAAAAE8/YftHE9wUkCQ/s1600/Lycoris-Responsive-Photography-Blogger-Template.jpg);
-webkit-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
position: relative;
top:0;
left:0;
z-index:5;
overflow: hidden;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.3);
box-shadow: 0 1px 5px rgba(0,0,0,0.3);
}
.item-overlay2{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 3px;
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjI4JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC40MiIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,0.42) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(28%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.42))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0.42) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0.42) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0.42) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0.42) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#6b000000',GradientType=0 ); /* IE6-8 */
-webkit-transition: background-color 0.3s ease-in-out;
-moz-transition: background-color 0.3s ease-in-out;
-ms-transition: background-color 0.3s ease-in-out;
-o-transition: background-color 0.3s ease-in-out;
transition: background-color 0.3s ease-in-out;
}
.item:hover .item-overlay2{
/* IE9 SVG, needs conditional override of 'filter' to 'none' */

url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjI4JSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC40MiIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,0.42) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(28%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.42))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0.42) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0.42) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0.42) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 28%,rgba(0,0,0,0.42) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#6b000000',GradientType=0 ); /* IE6-8 */
background-color: rgba(0,0,0,0.4);
}
.item-content2{
position: absolute;
width:100%;
bottom: 0;
-webkit-transform: translate(0,100%);
-moz-transform: translate(0,100%);
-ms-transform: translate(0,100%);
-o-transform: translate(0,100%);
transform: translate(0,100%);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.item:hover .item-content2{
-webkit-transform: translate(0,0);
-moz-transform: translate(0,0);
-ms-transform: translate(0,0);
-o-transform: translate(0,0);
transform: translate(0,0);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.item-top-content2{
position: relative;
}
.item-top-content-inner2{
position: absolute;
bottom: 0;
padding:10px 15px 10px 15px;
background: rgba(255,255,255,.85);
width:100%;
}
.item-add-content{
padding:0 15px 15px 15px;
opacity:0;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.item:hover .item-add-content{
opacity:1
}
.item-add-content-inner{
border:0px solid #dadada;
border-top-width:1px;
padding-top:10px;
}

/* Buttons */
.item-button{
border-radius:3px;
width:30px;
height:30px;
}
.item-button.play{
background-color:#5C2DF9;
position: absolute;
top: 15px;
left: 15px;
opacity:0;
background-image: url(http://webstudios.dk/resources/img/play-img.png);
}
.item-button.play:hover{
background-color:#5C2DF9;
}
.container-item2:hover .item-button.play{
opacity:1;
}
.item-button.share{
background-color:#5C2DF9;
position: absolute;
top: 50px;
left: 15px;
opacity:0;
background-image: url(http://webstudios.dk/resources/img/share-img.png);
}
.item-button.share:hover{
background-color:#5C2DF9;
}
.container-item2:hover .item-button.share{
opacity:1;
}
.btn.buy{
background-color: #5C2DF9;
text-align:center;
line-height:42px;
font-weight:700;
color:#fff;
border-radius:3px;
text-decoration:none;
opacity:1;
border:0px solid #5C2DF9;
border-bottom-width:2px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.btn.buy:hover{
background-color:#5C2DF9;
}
.expand{
display:block;
}
/* Tags */
.sale-tag{
width: 50px;
height: 100px;
background: #5C2DF9;
position: absolute;
top:-45px;
right:-8px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.sale-tag span{
position:absolute;
top:48px;
left:2px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
font-size:11px;
color:#fff;
}
/* content */
.item-product2{
width:70%;
float:left;
}
.item-product-price{
width:30%;
float:right;
text-align: right;
}
/* Style / Theming */

.subdescription2{
http://mdwanblog.blogspot.com/2014/09/1.html font-size:0.8em;
font-weight:400;
color:#7d7d7d;
}
/*product price*/
.item-product-price{
color:#5C2DF9;
font-size:1em;
font-weight:700;
position:relative;
}
.item-product-price .subdescription2{
color:#7d7d7d;
}
.item-content2{
background: rgba(255,255,255,.85);
}
.item-add-content{
font-weight:400;
color:#7d7d7d;
}
.item-add-content .section{
}
.item-add-content .section:last-of-type{
}
.item-add-content h4{
font-weight:600;
color:#222;
font-size:0.8em;
}
.item-add-content p{
font-size:0.8em;
}
</style>
<script>
$(".share-btn").mouseenter(function() {
setTimeout(function() {
$(".item-menu").addClass("visible")
}, 500);
});
$(".share-btn").mouseleave(function() {
setTimeout(function() {
$(".item-menu").removeClass("visible")
}, 500);
});
$(".item-menu").hover(function() {
$(".item-menu").addClass("visible")
});
$(".item-menu").mouseleave(function() {
setTimeout(function() {
$(".item-menu").removeClass("visible")
}, 500);
});
$(".container-item2").hover(function() {
setTimeout(function() {
$(".container-item2").css("z-index","1000")
}, 500);
});
</script>

التنسيق

*اللون الأحمر يمكن استبدالى بأى نص تريدة

*اللون الأزرق استبدلة برابط الوضوع

*اللون الأخضر استبدلة برابط الصورة الخاصة بالموضوع

ارجو ان ينال الموضوع اعجباكم

اى استفسار او مشكلة فى الأضافة ضعها فى تعليق

وسيتم الرد عليك فى اسرع وقت

جزيرة التدوين العربى

المشاركات الشائعة

أرشيف المدونة الإلكترونية

التسميات