حلولي https://www.facebook.com/hlo1y https://twitter.com/hlo1y https://www.youtube.com/user/v518v https://plus.google.com/+v518v

تابعنا على :

f tw +G yt vk

KHALED ALMILBE




مدون ومطور قوالب بلوجر
My E-mail : ###
My Phone No. : #%^$#
My Website : www.k2d.us

اضافة اداة تعريف الكاتب بشكل متحرك إحترافي

حلولي

مشرف

المزيد

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

تم النشر فى قسم

تم النشر منذ

تحميل ...
اضافة اداة تعريف الكاتب بشكل متحرك إحترافي

اضافة اداة جميلة ورائع لتعريف الكاتب
تتغير بمجرد مرور زر الفأرة عليها

طريقة الاضافة
اذهب للتخطيط - اضافة اداة- HTML/Javascript 
 وألصق الكود التالي مع تغيير مايلزم

<style>.card {  width: 300px;  height: 400px;  margin: 25px auto;  border-radius: 10px;  position: relative;  transform-style: preserve-3d;  transition: all 3s ease-in-out;  box-shadow: 0px 0px 0px #7F7970;}.card:hover {    transform: rotatey(180deg);}.card > div {    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;    background-color: #34495e;    border-radius: 0px;    border: 0px solid #CCC;    text-align: center;    background-image: url('https://s10.postimg.io/jbhjp29qh/3_min.png');}.card .front {    z-index: 2;    backface-visibility: hidden;}.card .front header {    width: 100%;    height: 80px;    background-color: #397282;    border-radius: 0px 0px 0 0;}.card .front img {    width: 130px;    border-radius: 50%;    position: relative;    top: 10px;}.card .front h3{  margin-top: 70px;  color: #0AC;  font-size: 17px;}.card .front .mid {  list-style: none;  margin: 30px 0 -20px 0;  text-align: center;  color: #a2a2a2;  line-height: 1.6;}.card .front .mid li {  font-size: 20px;color: #ffffff;}.card .front span {    display: inline-block;    margin-top: 42px;    font-size: 20px;    color: #ffffff;    font-style: italic;    border: 1px solid #ffffff;    padding: 5px 80px;    border-radius: 0px 0px;} .card .back {    z-index: 1;    transform: rotatey(180deg);    background-color: #CCC;}.card .back header {  width: 100%;  height: 40px;  margin-top: 0px;  border-radius: 0px 0px 0 0;  background-color: #DF0069;  margin-right: 0px;  color: #fff;}.card .back p {  font-size: 25px;  position: absolute;  top: -35px;  left: 0;  width: 100%;}.card .back ul {    list-style: none;}.card .back span {    width: 90%;    display: inline-block;    text-align: center;    margin-top: 40px;color: #434343;    line-height: 1.2;    font-size: 20px;}.card .back .left {  margin: 5px;  text-align: center;}.card .back .left li {  font-size: 20px;  border: 1px solid #777777;color: #d03f42;  margin-bottom: 5px;  padding: 10px;  text-align: center;}.card .back img {    width: 97%;    height: 120px;    margin-top: 20px;
/* Another Symple Card-Back Style *//* .card .back {  background-color: #3D465F;}.card .back img {  width: 90%;  margin-top: 60px;  opacity: .5;} */</style>

<div class="card">  <div class="front">          <header>             <img src="https://cdn3.iconfinder.com/data/icons/avatar-set/512/Avatar02-512.png" /> </header>     <h3>حلولي</h3>     <section>        <ul class="mid">          <li>تطوير قوالب بلوجر</li>          <li>تعديل قوالب بلوجر</li>          <li>تصميم قوالب بلوجر</li>        </ul>     </section>     <span>تعرف علينا</span>  </div>                  <div class="back">     <header>        <p>تعرف علينا</p>     </header>     <section>         <span>هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق</span>         <ul class="left">            <li>facebook: @hlo1y</li>            <li>twitter: @hlo1y</li>            <li>instagram: @hlo1y</li>         </ul>       </section>  </div>  <!-- Another Symple Card-Back Style -->            <!--    <div class="back">                  <img src="https://cdn2.iconfinder.com/data/icons/website-icons/512/Website_Code-512.png">  </div>  </div>   --></div>

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

انسخ كود الشكل الذى تريده وضعه فى تعليق
اذا كنت لا تملك حساب على بلوجر قم بإختيار التعليق باسم " مجهول "
تعليقات بلوجر
تعليقات الفيس بوك

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

إرسال تعليق

مساحة إعلانية متجاوبة

مواضيع مميزة

التعليقات

إحصائيات المدونة

  • عدد المواضيع :

  • عدد التعليقات :

  • عدد المشاهدات :

المتابعون

اشترك ليصلك كل جديد

  • الإشعارات
  • من نحن

  • اتصل بنا

  • ×

ادخل الاسم (إختيارى)

ادخل البريد الإلكترونى (مطلوب)

ادخل الرسالة (مطلوب)