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


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


شرح طريقة التركيب

1. من لوحة التحكم >> التخطيط>>أضف أداة "HTML/Javascript "جديدة وضع بها الكو التالي:

الشكل الاول




<style>



/* About blog for http://libya-web.blogspot.com/ */



.aboutpro-img{position:relative;}



.aboutpro-img img {max-width:100%;width:100%;}



.aboutpro-wrapicon{display:block;margin:15px auto 0;position:relative;}



.aboutpro-wrapicon .extender{width:100%;display:block;}



.extender{text-align:center;font-size:18px}



.extender .aboutpro-icon{background:#fff;display:inline-block;margin:0 3px;padding:0;border-radius:2px;transition:all .5s}



.extender .aboutpro-icon:nth-child(1){background:#3b5998}



.extender .aboutpro-icon:nth-child(2){background:#19bfe5}



.extender .aboutpro-icon:nth-child(3){background:#d64136}



.extender .aboutpro-icon:nth-child(4){background:#006699}



.extender .aboutpro-icon:nth-child(5){background:#fd9f13}



.extender .aboutpro-icon:hover{background:#333;}



.extender .aboutpro-icon a{display:inline-block;font-family:fontawesome;height:36px;width:36px;line-height:36px;font-weight:normal;color:#fff;transition:all .5s}



.extender .aboutpro-icon:hover a,.extender .aboutpro-icon a:hover{color:#fff;}



.aboutpro-info{margin-top:20px;font-size:12px}



.aboutpro-info h4{margin-bottom:10px;font-size:16px;text-transform:uppercase;color:#202020;font-weight:700}



</style>



<div class="widget-content">



<div class="sidebar_about_author">



<div class="inner_wrapper">



<div class="aboutpro-img">



<img alt="Author" class="img-responsive" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ51BQZZpz9NBKPWQ6qzeGKl6R3ksFhqVqdB4weKuTTYSkMp9pGXUg0fhmoPjHhNHeO4arg47Nkg_WkWfgQX5mq_lcgeLXxtJfnJp2cjS0BnQbh5LeD84xzUIzuFfctTeG-X6qf0TT9_w/s1600/Tripoli.jpg" title="Author" width="320" />



</div>



</div>



<div class="aboutpro-info">



<center><h4>ليبيا ويب</h4></center>



<p>مدونة عربية ليبية مهتمه بتطوير بلوجرمن قوالب واضافات



</p>



</div>



<div class="aboutpro-wrapicon">



<ul class="extender">



<li class="aboutpro-icon"><a href="#" rel="nofollow" target="_blank" title="Facebook"><i class="fa fa-facebook"></i></a></li>



<li class="aboutpro-icon"><a href="#" rel="nofollow" target="_blank" title="Twitter"><i class="fa fa-twitter"></i></a></li>



<li class="aboutpro-icon"><a href="#" rel="nofollow" target="_blank" title="Google+"><i class="fa fa-google-plus"></i></a></li>



<li class="aboutpro-icon"><a href="#" rel="nofollow" target="_blank" title="Linkedin"><i class="fa fa-linkedin"></i></a></li>



<li class="aboutpro-icon"><a href="#" rel="nofollow" target="_blank" title="RSS"><i class="fa fa-rss"></i></a></li>



</ul>



</div>



</div>



</div>

الشكل التاني




<style> /* About blog for libya web*/.aboutme-info h4{background:transparent;position:relative;padding:0;margin:0;border:0;text-align:center;font-size:120%}



.aboutme-img{position:relative;max-height:150px;overflow:hidden}



.aboutme-img img {max-width:100%;width:100%;}



.aboutme-wrpicon{display:block;margin:15px auto 10px auto;position:relative;}



.aboutme-wrpicon .extender{width:100%;display:block;}



.extender{text-align:center;font-size:16px}



.extender .aboutme-icon{background:rgba(0,0,0,.06);display:inline-block;border:0;margin:0;padding:0;border-radius:3px}



.extender .aboutme-icon:hover{background:#bbb;}



.extender .aboutme-icon a{display:inline-block;font-family:fontawesome;font-weight:400;color:#aaa;height:32px;width:32px;line-height:32px;border-radius:3px}



.extender .aboutme-icon:hover a,.extender .aboutme-icon a:hover{color:#fff;}



.aboutme-info{margin-top:20px;font-size:13px;text-align:center;}



.aboutme-info p{margin:5px 0}



.aboutme-info h4{margin-bottom:10px;font-size:16px;text-transform:uppercase;color:#888;font-weight:700}



 </style> <div class="widget-content"> <div class="sidebar_about_author"> <div class="inner_wrapper"> <div class="aboutme-img"> <img alt="Author" class="img-responsive" height="auto" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhho2fWTjCiWNoeSIOAn-enAIX_jO306lS1N_t_SvE_8aFomMlPEP53S10uLjqaKFuJepPjZtOcIkCJs9FH-RAb0l9cmv58RBTu9q1icZclgUDtRAkwWvvUbN6M9B0xOztnrzRK5UAIt-Mr/s1600/Indzign.jpg" title="libya web" width="300" /> </div> </div> <div class="aboutme-info"> <h4>ليبياويب</h4> <p>مدونة عربية    ليبية مهتمه بتطوير بلوجرمن قوالب واضافات </p> </div> <div class="aboutme-wrpicon"> <ul class="extender"> <li class="aboutme-icon"><a href="#" rel="nofollow" target="_blank" title="Facebook"><i class="fa fa-facebook"></i></a></li> <li class="aboutme-icon">



<li class="aboutme-icon"><a href="#" rel="nofollow" target="_blank" title="Twitter"><i class="fa fa-twitter"></i></a></li>








</li> <li class="aboutme-icon"><a href="https://www.blogger.com/follow-blog.g?blogID=#" rel="nofollow" target="_blank" title="Follow libyaweb"><i class="fa fa-user"></i></a></li> <li class="aboutme-icon"><a href="http://plus.google.com/#/about" rel="nofollow" target="_blank" title="Google+"><i class="fa fa-google-plus"></i></a></li> </ul> </div> </div> </div>



 

*غير مابلون الاحمر الى كلماتك 
*غير مابلون الاصفر برابط الكوفر
*غير مابلون الازرق بروابطك

اذا واجهتك اي مشكلة باب التعليقات مفتوح .

3 comments

الاشتراك في: تعليقات الرسالة ( Atom )