نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *

Main Slider

5/slider-recent

اعلان

اخر الاخبار

Breaking/أخبار الانترنت/9
حصريات
تكبير النص تصغير النص أعادة للحجم الطبيعي

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

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

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

اذهب للوحة تحكم مدونتك ثم التخطيط وبعدها اضغط على اضافة اداة وابحث عن 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 : استبدله برابط صورة الموضوع
هنا يوضع عنوان التدوينة: استبدله بعنوان التدوينة

بقلم :المهووس

المهووس اسم لمدونة وقناة شاب مغربي متعلق بكل ما يخص التقنية ، احاول من خلالهم ان اشارككم كل ما اعرفه سواء عن التقنية او اشياء اخرى لان هدفي من انشاء المدونة او القناة ليس لغرض طرح الدروس فقط بل للإقتراب منكم و مشاركتي لكل ما هو متعلق بالويب و مساعدتكم في ايجاد كل ما يخصكم '

مواضيع ذات صله

شاركنا رأيك

عن الموقع

المهووس عبارة عن موقع و قناة في اليوتيوب تقدم كل ما يحتاجه العرب سواء في المجال التقني او في المجالات الاخرى و يقدم كذالك بعض الاعمال التي انجزت من طرفه في قناته على اليوتيوب وليس هذا فقط بل يشارككم اشياء اخرى في القناة لأن الموقع و القناة ليسوا فقط تقنيين ، هم فقط رابط بيني و بينكم و اشارككم فيه كل الاشياء التي اريد مشاركتها معكم