تدوينة الاسبوع بتصميم انيق وجميل للبلوجر

تقييمك للموضوع : التعليقات : 0 الكاتب : seb issam 7:33 ص all ، blogger للإبلاغ عن رابط معطوب اضغط هنا

احصل على هذة الاداة من هنا

السلام عليكم ورحمة

الله وبركاته

--

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

____________

طريقة التركيب:

1. توجه الى التخطيط ثم اضف اداة html/javascript
2. بعدها ضع الكود التالي داخل الاداة

<div class="ortilex_today_img">
<img alt="هذا مثال لاحد الامثلة" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUxmROUDQahF0qNbhCUxS_xXLcC79fyFZx3Aal3oKtizuVbQ5z_9AjLPKEf3h0BH0zY5gKNEfvnE1-MVaTJXj_Ueq-RNce5qOJJWs38w-y5CYu0eXptna4nGvz3txh34Z_vMNhQii5gFBV/s640/popcorn_time_vpn.jpg" />
<a href="http://profmasterissam.blogspot.com/2015/12/blog-post_6.html"><i class="fa  fa-arrows-alt"></i></a>
<p>عملاق مشاهدة الافلام والمسلسلات popcorn time يعود بحلة جديدة </p>
</div>
<style>
.ortilex_today_img{position:relative;padding-top:5px}.ortilex_today_img img{width: 323px;
    height: 200px;
    margin-top: -4px;}.ortilex_today_img a{display: block;
    width: 48px;
    height: 48px;
    background: rgba(49, 74, 90, 0.69);
    color: #e23a3e;
    font-size: 20px;
    text-align: center;
    line-height: 2.6;
    opacity: 0;
    -webkit-transition: all .3s ease 0;
    -moz-transition: all .3s ease 0;
    -ms-transition: all .3s ease 0;
    -o-transition: all .3s ease 0;
    transition: all .3s ease 0;
    -webkit-transform: scale(0.2);
    -moz-transform: scale(0.2);
    -ms-transform: scale(0.2);
    -o-transform: scale(0.2);
    transform: scale(0.2);
    position: absolute;
    top: 76px;
    left: 126px;
    z-index: 1001;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;}
i.fa.fa-arrows-alt {
    margin-left: 2px;
    margin-top: 15px;
}
.ortilex_today_img p{    position: absolute;
    bottom: 4px;
    left: -6px;
    background: rgba(44, 62, 80, 0.69);
    font-family: gesstwolight;
    text-align: center;
    padding: 12px 3px 0px 2px;
    margin: 0;
    font-size: 15.1px;
    color: #FFF;
}.ortilex_today_img:hover a{opacity:1;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0)}.ortilex_today_img:hover a:hover{color:#333}.ortilex_posts{float:right;width:730px;background:#FFF;margin:24px 0;-webkit-box-shadow:0 0 5px #DDD;-moz-box-shadow:0 0 5px #DDD;box-shadow:0 0 5px #DDD}.ortilex_post{position:relative;padding:24px;border-bottom:1px solid #EEE}.ortilex_post_title h1{padding:0;margin:0;font-size:24px;font-weight:400}
</style>

1. غير ما باللون الاحمر الى رابط ضورة الموضوع
2. غير ما باللون البني الى رابط الموضوع
3. غير ما باللون الازرق الى وصف الموضوع