إضافة معلومات عن الكاتب بشكل جديد 2015

بسم الله الرحمن الرحيم | السلام عليكم ورحمة الله وبركاتة

اليوم إخوانى الكرام إضافة رائعة جداً من مدونة هادى ستور معلومات عن الكاتب + أيقونات المتابعة بشكل إحترافى لا شك ان كل شخص يبحث عن المظهر اللائق والأإضافات الأكثر إحترافية التى ستزيد لمسه رائعة لمدونتة ومظهرها هذة الأإضافة رائعة جدا وشكل جديد ومطور ويتم تركيبها عن طريق أداة جافاسكريبت يتم وضعها فى أى مكان ما أينما شئت والآن مع شرح تركيب الأإضافة والجزء الذى سيتم التعديل عليه لكى تناسبك .

لوحة التحكم الرئيسية > التخطيط > إضافة اداة جافاسكريبت وضع بها الكود التالى

<style>
.wgauthr-widget {
background:#fff;
background-color:#fff;
overflow:hidden;
position:relative;
margin-bottom:30px;
padding:10px 26px;
}
.wg-crnrbckgr:before {
content:"";
position:absolute;
top:0;
right:0;
z-index:40;
background:#658E15;
-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.08), -1px 1px 1px rgba(0,0,0,0.08);
-moz-box-shadow:0 1px 1px rgba(0,0,0,0.08), -1px 1px 1px rgba(0,0,0,0.08);
box-shadow:0 1px 1px rgba(0,0,0,0.08), -1px 1px 1px rgba(0,0,0,0.08);
display:block;
width:0;
border-color:#fff #eee #fff #fff;
border-style:solid;
border-width:0 16px 16px 0;
}
.wg-crnrbckgr {
position:relative;
background-color:#47C2DC;
height:90px;
background-repeat:no-repeat;
background-position:center center;
-webkit-background-size:cover!important;
-moz-background-size:cover!important;
-o-background-size:cover!important;
background-size:cover!important;
}
.wgauthr-widget.wgathrlns .wg-crnrbckgr .wgavtrg
img {
height:80px;
width:80px;
padding-bottom:14px;
}
.wgauthr-widget.wgathrlns .wg-crnrbckgr .wgavtinfo
span {
display:block;
letter-spacing:1px;
text-transform:uppercase;
}
.wg-avtlninfoaa {
font-size:14px;
line-height:21px serif,font-weight:normal,color:#666;
padding:22px 25px 8px;
}
.dwnlin {
margin-top:6px;
text-align:center;
border-top:2px solid #eee;
padding:8px 25px;
}
.wgauthr-widget.wgathrlns {
background:#fff;
margin-bottom:30px;
padding:0;
}
.wg-golblue {
width:100%;
height:50px;
padding:0 0 0 30px;
}
.wg-goliconn {
background:#47C2DC;
width:44px;
height:44px;
border-radius:10000px;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
-ms-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
cursor:pointer;
float:left;
margin-right:5px;
}
.wg-goliconn:hover {
background:#ddd;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
}
.wg-goliconn img {
padding-top:5px;
padding-left:5px;
}
.wgauthr-widget.wgathrlns .wg-crnrbckgr .wgavtrg,.wgavtrg {
position:absolute;
bottom:-20px;
left:30px;
border-radius:50%;
overflow:hidden;
background-color:#fff;
border:5px solid #fff;
}
.wgauthr-widget.wgathrlns .wg-crnrbckgr .wgavtinfo,.wgavtinfo {
padding-left:130px;
padding-top:46px;
color:#fff;
}

.wgauthr-widget.wgathrlns .wg-crnrbckgr .wgavtinfo .wgurnaam,.wgurnaam {
font-size:14px;
line-height:16px;
padding-right:20px;
}
.wgauthr-widget.wgathrlns .wg-crnrbckgr .wgavtinfo .wgurju,.wgurju {
font-size:10px;
padding-right:20px;
}
</style>
<div class="wgauthr-widget wgathrlns"><div class="wg-crnrbckgr" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizB3m2bwkhqoz7ABBsaRVrEBWAkTBhIAl6-GW1lokCzUPlmFah_FWJCgC-r3JhjQrf9drbG_nHaGpB5A4aa8fgXFfwuN29-Z2JhaxWg2LoUwqWxUeLUMa15xlLldZqyKRVwypHVNznXVUG/s1600/authorbck.jpg)">

<div class="wgavtrg">
<img alt="هادى ستور" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrd-bSbcRtJIL5nlvZTILbFr87dSIkyusTjDeo7FkUs5JuO7L4b0-u1fkYGAHRzrCs-vh1LIv6WThH4fB-7nXt7iKSOAknEF0YnjQfCj6f6AEDptGyhrGEeWE47plvxwsNxyzjahlVOEDq/s1600/%D8%A8%D9%86%D8%B1-%D8%AE%D8%A7%D8%B5-125.jpg" /></div><div class="wgavtinfo"><span class="wgurnaam">هادى ستور</span>
<span class="wgurju">مطور ويب</span></div></div><div class="wg-avtlninfoaa">مدونة هادى ستور لخدمات بلوجر والفوتوشوب نوفر لك الأأفضل</div><div class="dwnlin"></div>

<div class='wg-golblue'>
<div class='wg-goliconn'><a href='http://www.facebook.com/hadystore' target='_blank'><img border='0' src='http://1.bp.blogspot.com/-H38kJ5PSU-k/Uin2qt9WW0I/AAAAAAAAAP8/W5Wmpt42xwY/s1600/facebook.png'/></a></div>

<div class='wg-goliconn'><a href='http://www.twitter.com/hady_store' target='_blank'><img border='0' src='http://2.bp.blogspot.com/-B3UXsAyQbdw/Uin2scG5PKI/AAAAAAAAAQU/zcSj3UljGCw/s1600/twitter.png'/></a></div>

<div class='wg-goliconn'><a href='http://www.plus.google.com/#' target='_blank'><img border='0' src='http://3.bp.blogspot.com/--Pp4ZjOu4Ew/Uin2qgGT5zI/AAAAAAAAAP4/sMX3HGgzctE/s1600/google+.png'/></a></div>

<div class='wg-goliconn'><a href='http://www.youtube.com/#' target='_blank'><img border='0' src='http://3.bp.blogspot.com/-2KJ18EdFkdM/Uin2sS-cP1I/AAAAAAAAAQQ/7Vv8-WQWRQo/s1600/youtube.png'/></a></div>
<div class='wg-goliconn'><a href='http://feeds.feedburner.com/#' target='_blank'><img border='0' src='http://2.bp.blogspot.com/-aVX-dCRSr-A/Uin2qzynvOI/AAAAAAAAAQI/l-Mn8lg6sPs/s1600/rss.png'/></a></div>
</div></div>

تغيير بعض الأأشياء لكى تناسبك 

اللون         وهو وضع أسماء حساباتك على المواقع الإجتماعية الخاصة بك

اللون         وهو تغيير إسمى بالإسم الخاص بك 

هنا نكون وصلنا لنهاية موضوعنا اليوم إلى اللقاء