اضافة قائمة احترافية باربع أقسام للبلوجر

 موضوع اليوم على مدونة اللامي اضافة رائعه بتاثيرات احترافيه جديده والإضافة تتكون من اربع اقسام شكل جميل والإضافة تعمل يدويا اى انك سوف تقوم بأضافة الموضيع او اى شئ سوف تعرضه بها يدويا ، يمكنك معانية الإضافة من الصورة اعلاه او من الرابط 

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


شرح تركيب الاداة

قم بالدخول على مدونتك وانتقل الى قالب
ثم قم بالبحث عن الوسم   ]]></b:skin>   ثم قم بوضع الكود التالى فوقه

#slidS-posts { background: #2A4057; margin: 25px 0; padding: 15px 0; } .view { float: right; border: 10px solid #fff; overflow: hidden; position: relative; text-align: center; box-shadow: 1px 1px 2px #e6e6e6; cursor: default; width: 261px; margin: 0 13px; } .view .mask, .view .content { width: 257px; 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; margin: 20px 0 0 0 } .view p { font-style: italic; font-size: 14px; position: relative; color: #fff; padding: 0px 20px 0px; text-align: center } .view a.info { display: inline-block; text-decoration: none; padding: 7px 14px; background: #000; color: #fff; text-transform: uppercase; box-shadow: 0 0 1px #000; margin-top: 30px; } .view a.info:hover { box-shadow: 0 0 5px #000 } .view-first img { transition: all 0.2s linear; width: 300px; height: 200px; } .view-first .mask { opacity: 0; background-color: rgba(58, 1, 132, 0.44); transition: all 0.4s ease-in-out; } .view-first h2 { transform: translateY(-100px); opacity: 0; transition: all 0.2s ease-in-out; } .view-first p { transform: translateY(100px); opacity: 0; transition: all 0.2s linear; } .view-first a.info { opacity: 0; transition: all 0.2s ease-in-out; } .view-first:hover img { transform: scale(1.1); } .view-first:hover .mask { opacity: 1; } .view-first:hover h2, .view-first:hover p, .view-first:hover a.info { opacity: 1; transform: translateY(0px); } .view-first:hover p { transition-delay: 0.1s; } .view-first:hover a.info { transition-delay: 0.2s; } .view-second img { transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in; } .view-second .mask { background-color: rgba(12, 19, 27, 0.6); width: 389px; padding: 36px; height: 358px; opacity: 0; transform: translate(265px, 145px) rotate(45deg); -webkit-transform: translate(265px, 145px) rotate(45deg); transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; margin-top: 27px; } .view-second h2 { border-bottom: 1px solid rgba(0, 0, 0, 0.3); background: transparent; margin: 20px 40px 0px 40px; -webkit-transform: translate(200px, -200px); transform: translate(200px, -200px); -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .view-second p { transform: translate(-200px, 200px); -webkit-transform: translate(200px, -200px); transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; } .view-second a.info { transform: translate(0px, 100px); -webkit-transform: translate(0px, 100px); transition: all 0.2s 0.1s ease-in-out; -webkit-transition: all 0.2s 0.1s ease-in-out; } .view-second:hover .mask { opacity: 1; transform: translate(-80px, -125px) rotate(45deg); -webkit-transform: translate(-80px, -125px) rotate(45deg); } .view-second:hover h2 { transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transition-delay: 0.3s; -webkit-transition-delay: 0.3s; } .view-second:hover p { transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transition-delay: 0.4s; -webkit-transition-delay: 0.4s; } .view-second:hover a.info { transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); transition-delay: 0.5s; -webkit-transition-delay: 0.5s; } .view-tenth img { transform: scaleY(1); transition: all .7s ease-in-out; } .view-tenth .mask { background-color: rgba(255, 231, 179, 0.3); transition: all 0.5s linear; opacity: 0; } .view-tenth h2 { border-bottom: 1px solid rgba(0, 0, 0, 0.3); background: transparent; margin: 20px 40px 0px 40px; transform: scale(0); color: #fff; transition: all 0.5s linear; opacity: 0; } .view-tenth p { color: #fff; opacity: 0; transform: scale(0); transition: all 0.5s linear; padding- } .view-tenth a.info { opacity: 0; transform: scale(0); transition: all 0.5s linear; } .view-tenth:hover img { -webkit-transform: scale(10); transform: scale(10); opacity: 0; } .view-tenth:hover .mask { opacity: 1; } .view-tenth:hover h2, .view-tenth:hover p, .view-tenth:hover a.info { transform: scale(1); opacity: 1; }

الان قم بحفظ القالب ثم انتقل الى تخطيط مدونتك
ثم قم بوضع الكود التالى فى إضافة جديد فوق التدوينات او اي مكان اخر تريده .

<link href="http://fonts.googleapis.com/css?family=Raleway:400,700|Merriweather" rel="stylesheet" type="text/css" /> <div id="all"> <div class="view view-first"> <img src="http://static1.squarespace.com/static/55ac6d80e4b0a964784b2f80/t/5703e9208259b507928ad72a/1459874081584/xzKx01n.png" /> <div class="mask"> <h2>تصميم قوالب بلوجر</h2> <p>يتم تركيبه على أي تصميم دون مشكلة فلن يبدو وكأنه نص منسوخ.</p> <a href="#" class="info">إقرأ المزيد</a> </div> </div> <div class="view view-second"> <img src="http://static1.squarespace.com/static/55ac6d80e4b0a964784b2f80/t/5703eaab37013bdcee28c077/1459874476977/gw9SfTu.png" /> <div class="mask"></div> <div class="content"> <h2>تكويد قوالب بلوجر</h2> <p>يتم تركيبه على أي تصميم دون مشكلة فلن يبدو وكأنه نص منسوخ.</p> <a href="#" class="info">إقرأ المزيد</a> </div> </div> <div class="view view-tenth"> <img src="http://static1.squarespace.com/static/55ac6d80e4b0a964784b2f80/t/5703eb0cb09f95f41391ea85/1459874573710/j07SfQZ.png" /> <div class="mask"> <h2>تطوير قوالب بلوجر</h2> <p>يتم تركيبه على أي تصميم دون مشكلة فلن يبدو وكأنه نص منسوخ.</p> <a href="#" class="info">إقرأ المزيد</a> </div> </div> <div class="view view-second"> <img src="http://static1.squarespace.com/static/55ac6d80e4b0a964784b2f80/t/5703eb2e746fb98cc2510ebd/1459874606989/PsZyN43.png" /> <div class="mask"></div> <div class="content"> <h2 id="testimonials">تصميم متجاوب</h2> <p>&ldquo;يتم تركيبه على أي تصميم دون مشكلة فلن يبدو وكأنه نص منسوخ.&rdquo;</p> <a href="#" class="info">إقرأ المزيد</a> </div> </div> </div>

الان قم بتغيير عنوين المواضيع ووصف المواضيع بما تريد قم قم بخفظ الإضافة مبروك عليك

شارك الموضوع ..