اضافة اداة تعريف الكاتب ومواقع التواصل شكل احترافي

اضافة اداة تعريف الكاتب ومواقع التواصل شكل احترافي

اداة تعريف الكاتب ومواقع التواصل شكل احترافي
طريقة التركيب
اذهب للقالب تحرير HTML
 وابحث عن </head> ثم اضف الكود التالي فوقة مباشر

<style type='text/css'>.sosmed-author,a.authorname,h2.author-title,a.authorname-url{display:block;text-align:center}.authorbox{width:300px;background:url(http://store1.up-00.com/2016-06/1466371674811.jpg) top center no-repeat #fff;border:1px solid #dedede;border-radius:3px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;padding:16px 0 0;margin:0 auto;}h2.author-title{font-weight:bold;text-decoration:none;margin:0 auto 10px;font-size:22px;color:#fff!important}.authorbox img{margin:55px auto 0;border-radius:100%;display:block}a.authorname{margin:10px auto;font-weight:400;font-size:20px!important;text-decoration:none;}a.authorname-url{margin:0 auto 10px;font-weight:400;font-size:16px!important;text-decoration:none;}.sosmed-author li,.sosmed-author ul{list-style:none}.sosmed-author ul{margin:0!important;padding:0!important}.sosmed-author{margin:0 auto!important;padding:10px 0;background:#dfdfdf;border-top:1px solid #dedede}.sosmed-author li{display:inline-block;margin-right:10px}.sosmed-author li:last-child{margin-right:0}.sosmed-author li a,a.authorname,a.authorname-url{color:#555!important;transition:all .4s ease-out}.sosmed-author li a:hover,a.authorname:hover,a.authorname-url:hover{color:#111!important}a.button-author{display:block;background:#4d90fe;border:1px solid #3079ed;color:#fff!important;font-weight:bold;font-size:16px!important;margin:10px 10px 0;padding:5px;text-align:center;border-radius:3px;transition:all .4s ease-out;text-decoration:none}a.button-author:hover{background:#357ae8;border:1px solid #2f5bb7}</style>

ثم ابحث عن </body> واضف الكود التالي فوقة مباشرة 

<script>//<![CDATA[var imgDefer = document.getElementsByTagName("img");for (var i = 0; i < imgDefer.length; i++) {    if (imgDefer[i].getAttribute("data-src")) {        imgDefer[i].setAttribute("src", imgDefer[i].getAttribute("data-src"));    }}//]]></script>

ثم اذهب للتخطيط -اضافة اداة - HTML/JavaScript
وضع الكود التالي مع تغيير مايلزم

<div class="authorbox">  <img alt="author" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="http://store2.up-00.com/2016-06/1466372378441.jpg" width="120" height="120" />  <a class="authorname" href="#" rel="author" target="_blank" title="حلولي">حلولي</a>  <a class="authorname">مدونة تقنية انشر بها مايفيد الزائر والمدون</a>  <div class="sosmed-author">    <ul>          <li><a href="https://www.facebook.com/hlo1y" target="_blank" title="Facebook" rel="nofollow"><i class="fa fa-facebook-square fa-2x" aria-hidden="true"></i></a></li>          <li><a href="https://twitter.com/hlo1y" target="_blank" title="Twitter" rel="nofollow"><i class="fa fa-twitter-square fa-2x" aria-hidden="true"></i></a></li>          <li><a href="https://plus.google.com/+v518v" target="_blank" title="Google+" rel="nofollow"><i class="fa fa-google-plus-square fa-2x" aria-hidden="true"></i></a></li>      <li><a href="//www.youtube.com/c/v518v" target="_blank" title="Youtube" rel="nofollow"><i class="fa fa-youtube-square fa-2x" aria-hidden="true"></i></a></li>      <li><a href="" target="_blank" title="LinkedIn" rel="nofollow"></a></li>      <li><a href="https://www.instagram.com/hlo1y" target="_blank" title="Instagram" rel="nofollow"><i class="fa fa-instagram fa-2x" aria-hidden="true"></i></a></li>    </ul>    <div class="clear"></div>
<a class="button-author" href="http://www.blogger.com/follow-blog.g?blogID=4497666235919215661" target="_blank" title="">انضم لهذه المدونة</a>
<a class="button-author" href="#" rel="nofollow" target="_blank" title="">للمراسلة اضغط هنا <i aria-hidden="true" class="fa fa-paper-plane"></i></a>
  </div></div>


انتهى 

تابعونا للمزيد من الاضافات والدروس
ملاحظة! : عند نقلك للموضوع حاول ان تذكر المصدر لينتفع الزائر في حال اراد المزيد من المساعده، وايضاَ احتراما وتقديراَ للجهود المبذولة.

عن الكاتب

لـدي القليل مـن الخبره ، فـي مجال الـتـدويـن اضـع بالمدونة ما يـفـيـد الزائر والـمـدون ، تــابـعـنـا قـد نـفـيـدك يـومـاً .

شكرا لك ولمرورك