اضافة افضل موضوع لهذا الشهر بشكل جذاب

السلام عليكم ورحمة الله تعالى وبركاته اليوم احضرنا لكم اضافة رائعة وهي اضافة افضل موضوع او تدوينة او مشاركة في هذا الشهر او الاسبوع .

معاينة الاضافة

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

صورة قبل وبعد للاضافة

طريقة الاضافة 

الطريقة سهلة جدا ماعليك فقط الذهاب لتخطيط ثم اضف اداة جديدة واختر جافا سكريبت واضف فيها الكود التالي

<div class='view view-first'> <img src='رابط الصورة  '/> <div class='mask'> <h2>افضل تدوينة لهاذا الشهر </h2> <p>قالب مصمم من تقني الانترنت</p> <a class='info' href='#'>اقرئ المزيد</a> </div> </div>
 <p style=" line-height:0px; font-size:8px; font-weight:bold; text-align:right;padding-top:0px;"><a style="color:#D3D3D3;" href="http://www.bloggingehow.com">widgets</a></p>
 
 
    <style>
 #background {
 background: #FAF8CC; width:100%; border: 1px solid #C9C299; }
 .view-first img { -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; } .view-first .mask { -ms-filter: &quot;progid: DXImageTransform.Microsoft.Alpha(Opacity=0)&quot;; filter: alpha(opacity=0); opacity: 0; background-color: rgba(219,127,8, 0.7); -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .view-first h2 { -webkit-transform: translateY(-100px); -moz-transform: translateY(-100px); -o-transform: translateY(-100px); -ms-transform: translateY(-100px); transform: translateY(-100px); -ms-filter: &quot;progid: DXImageTransform.Microsoft.Alpha(Opacity=0)&quot;; filter: alpha(opacity=0); opacity: 0; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .view-first p { -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -o-transform: translateY(100px); -ms-transform: translateY(100px); transform: translateY(100px); -ms-filter: &quot;progid: DXImageTransform.Microsoft.Alpha(Opacity=0)&quot;; filter: alpha(opacity=0); opacity: 0; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -ms-transition: all 0.2s linear; transition: all 0.2s linear; } .view-first:hover img { -webkit-transform: scale(1.1,1.1); -moz-transform: scale(1.1,1.1); -o-transform: scale(1.1,1.1); -ms-transform: scale(1.1,1.1); transform: scale(1.1,1.1); } .view-first a.info { -ms-filter: &quot;progid: DXImageTransform.Microsoft.Alpha(Opacity=0)&quot;; filter: alpha(opacity=0); opacity: 0; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .view-first:hover .mask { -ms-filter: &quot;progid: DXImageTransform.Microsoft.Alpha(Opacity=100)&quot;; filter: alpha(opacity=100); opacity: 1; } .view-first:hover h2, .view-first:hover p, .view-first:hover a.info { -ms-filter: &quot;progid: DXImageTransform.Microsoft.Alpha(Opacity=100)&quot;; filter: alpha(opacity=100); opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } .view-first:hover p { -webkit-transition-delay: 0.1s; -moz-transition-delay: 0.1s; -o-transition-delay: 0.1s; -ms-transition-delay: 0.1s; transition-delay: 0.1s; } .view-first:hover a.info { -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; -ms-transition-delay: 0.2s; transition-delay: 0.2s; } .view { width: 300px; height: 200px; margin: 10px;
 border: 2px solid #000000; overflow: hidden; position: relative; text-align: center; -webkit-box-shadow: 1px 1px 2px #e6e6e6; -moz-box-shadow: 1px 1px 2px #e6e6e6; box-shadow: 1px 1px 2px #e6e6e6; cursor: default; background: #fff url(../images/bgimg.jpg) no-repeat center center; } .view .mask,.view .content { width: 300px; height: 200px; position: absolute; overflow: hidden; top: 0; left: 0; } .view img { display: block; position: relative; } .view h2 { text-transform: uppercase; color: #fff; text-align: center; position: relative; font-size: 17px; padding: 10px; background: rgba(0, 0, 0, 0.8); margin: 8px 0 0 0; } .view p { font-family: ge_ss_threeregular; font-style: italic; font-size: 12px; position: relative; color: #fff; padding: 10px 20px 20px; text-align: center; } .view a.info { display: inline-block; text-decoration: none; padding: 5px 40px ; background: #000; color: #fff; text-transform: uppercase; -webkit-box-shadow: 0 0 1px #000; -moz-box-shadow: 0 0 1px #000; box-shadow: 0 0 1px #000; } .view a.info: hover { -webkit-box-shadow: 0 0 5px #000; -moz-box-shadow: 0 0 5px #000; box-shadow: 0 0 5px #000; }
 </style>

غير مايجب تغييره وان لم تكن مفهومة يمكنك ان تسالني في التعليق وساجيب عليك .