آخر الاخبار

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


السلام عليكم
اليوم اتيت لكم بإضافة رائعة ومميزة ، فالكثير من الاخوان طلبوها مني ولذالك احببت ان اضعها اليوم بين ايديكم لانها حقا اضافة تعطي جمالية لمدونتك حيت انك تضع فيها احد المواضيع الموجودة في مدونتك ومن الافضل ان تضع فيها موضوع حصري.

مثال حي للاضافة: من هنا

الآن : كيفية تركيب الاضافة في المدونة

اذهب للوحة تحكم مدونتك ثم التخطيط وبعدها اضغط على اضافة اداة وابحث عن HTML/JavaScript
وبعدها قم بنسخ الكود التالي والصقه داخل الاداة

<div class="wrapper2">
<section class="row">
<div class="container-item2" style="z-index: 1000;">
<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>هنا يوضع عنوان التدوينة: Mobile Hidden Camera</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://www.almahwouss.com/" class="btn buy expand">شاهد الموضوع</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section></div>
<!--HTML--><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{
height:290px;
background-image: url(
http://image.almahwouss.com/);
-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' */
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 */
 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: #3A91FF;
 text-align:center;
 line-height:42px;
 font-weight:700;
 color:#fff;
 border-radius:3px;
 text-decoration:none;
 opacity:1;
 border:0px solid #3A91FF;
 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:#3A91FF;
}
.expand{
 display:block;
}

/* Tags */
.sale-tag{
 width: 100px;
 height: 156px;
 background: #0099FF;
 position: absolute;
 top:-60px;
 right:-70px;
 -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:#10B3FF;
 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>
<div class="clear">

غير التالي بما يناسبك

http://www.almahwouss.com/ : استبدله برابط الموضوع
/http://image.almahwouss.com : استبدله برابط صورة الموضوع
هنا يوضع عنوان التدوينة: استبدله بعنوان التدوينة

نقل بدون تصريح ممنوع

ليست هناك تعليقات:

إرسال تعليق