، في موضوع اليوم سنقدم لكم اضافة رائعة يمكنك استخدامها للتعريف بكاتب المدونة وبشكل احترافي على جانب المدونة (
و اسمه و نبذة عنه و تمكن من التواصل مع الكاتب من الخلال ازرار الشبكات الاجتماعية بالاضافة الى ايقونة خمسات حيث انه يمكنك زيارة حسابه على خمسات و شراء منتجاته و خدماته .
غير ما باللون البرتقالي في الكود ادناه الى رابط حسابك على خمسات
غير ما باللون الازرق الفاتح في الكود ادناه الى رابط حسابك على سكايب
<div id='profile-wrapper'>
<img src='
https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-xpf1/v/t1.0-9/10599127_370244826462067_394069055871996938_n.jpg?oh=c43ca93e730a45757ab4828cb0d1bbc6&oe=54BF4C59&__gda__=1422245016_fbc1c99c1ab425d4de0b6f8d59fdd2e3'/>
<a href='https://www.facebook.com/i27mad'><h2>شــاكر عمــاد الدين</h2></a>
<p>
شاب جزائري ذو 17 سنة من العمر انشأة هده المدونة حديثا ليستفيد منها غيري ولافيدهم بكل ما تعلمته من النت<p/>
<div id='social-wrapper'><div class='social-icons sticky-social'><a class='facebook' href='
https://facebook.com/chaker.black'/><a class='twitter' href='
http://dzweb2.blogspot.com/'/><a class='behance' href='
http://dzweb2.blogspot.com/'/><a class='skype' href='
http://dzweb2.blogspot.com/'/><a class='khamsat' href='
http://dzweb2.blogspot.com/'/></a></a></a></a></a></div></div></p></p></div>
<style>
#profile-wrapper {
text-align: center;
padding: 34px 20px;
background: #FFF;
border-top: 3px solid #E24300;
margin: 0 0 20px;
font-size: 12px;
font-weight: normal !important;}
#profile-wrapper img {
border-radius: 100%;
margin: 0 0 10px;
height: 210px;
width: 170px;}
#profile-wrapper h2 {
font: normal 20px tahoma;
color: #F34D4D;}
#profile-wrapper p {
font: normal 12px tahoma;
color: #888;
line-height: 2em;}
#social-wrapper{padding:10px 0 0;overflow:hidden;margin-right: 65px;}
.social-icons a.facebook {background-image: url(http://3.bp.blogspot.com/pdQxvxA7dds/U0ieyygWJrI/AAAAAAAAAGc/3KI36bc8hno/s1600/facebook.png);}
.social-icons a.facebook:hover {
background-color: #4265b9;}
.social-icons a.twitter {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj4pDSdLTxZRkbBhwyYDCtTA0hgdtvA1_ZBe2ZHxxta62YvoS9pBb4GXU0klsp6oY16wswSdCyuWQUnTh3p6X4mzAn9iXkjWX_nF5EMAYdSo2PUNfBHCTPVCouArlYOwPT8MxcewFgEvM/s1600/twitter.png);}
.social-icons a.twitter:hover {
background-color: #26d5ec;}
.social-icons a.behance {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqdKppq-KsKTlWySwGAiEa_3QdRQWx1O1rn93dVUkcHfvF8ir_1i1uRygMZ10fKsncLiBKlKbDmNifaSeuXcLV445AdXf_hN9yQnUcEgZ8ORhfWTIjFIytnWkfHTSQrvruG_bUCrcM9uc1/s1600/behance.png);}
.social-icons a.behance:hover {
background-color: #444;}
.social-icons a.skype {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXdi6S5of4FBjofdzFrt0s2aSaSWNta4Tan5vtC07Z_rmlaplbIB70i_sxbkf4jXYiV1shyuaL3C4NyFcSS62kn_nyMSL6f57YGQt_C-_XI3elEzupxp30hpAst0HzbkISTHKHTsOP3Mw/s1600/skype.png);}
.social-icons a.skype:hover {
background-color: #0bbff2;}
.social-icons a.youtube {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCNKpux8mqSYtjcvIJWiYM4JsRVMHAAzR-icHNrSeS3tNBcfuGok3_b2WdMxRIsm1zQsXucoYCzDiEVrosAFcapH03ta56EIHfSj3JMjgILywFFrlvxn_tp351DjHkLy9r24JzAROPt6s/s1600/youtube.png);}
.social-icons a.youtube:hover {
background-color: #df3333;}
.social-icons a.google {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimi5F5vjH_-5MXWFBXWO_Eq7lNueWHIWBGUfAMlwO_CnWlvfWj2jtcqiJ6JTkSya1iiG38XcUXWApoA4PRdaSHq4irkeYjD-Fbwtj9Sw-Y6zLMfEADh4KZtdnHyTgoea1OTwFjPoZecSg/s1600/google.png);}
.social-icons a.google:hover {
background-color: #d62408;}
.social-icons a.khamsat {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht75h2WC2q9R3l_NYldvz6GeMzR7hCTM9u7PB3XroPJM6PCmU_eM8qEknLhzLZeTLveL6AdnPKb1eajvTZ24QfU35R3Q08FM0nETrsGeZ3fGVUfu9K9-LQXh4nSxlNGBfAmpYI4ChEGzg/s1600/kmst.png);}
.social-icons a.khamsat:hover {
background-color: #F39C12;}
.social-icons.sticky-social {
text-align: right;
float: right;}
.social-icons {
float: right;
text-align: center;}
.social-icons.sticky-social a {
margin-left: 10px;
margin-bottom: 10px;
float: right;
display: block;}
.social-icons a {
background-color: #dadada;}
.social-icons a {
width: 30px;
height: 30px;
margin: 0 3.5px !important;}
.social-icons a {
width: 30px;
height: 30px;
display: block;
background-position: center center;
background-repeat: no-repeat;
border-radius: 3px;
display: inline-block;
position: relative;
transition: background-color 0.5s;
-webkit-transition: background-color 0.5s;}
/* Author Bio */
.postauthor {
background: #F5F5F5;
border-top: 1px solid #e1e1e0;
border-bottom: 1px solid #e1e1e0;
overflow: hidden;
padding: 0.7em;}
.postauthor img {
border: 5px solid #e2dede;
float: right;
margin-left: 1em;}
.postauthor h3 {
color: #666;
font-size: 1.2em;
margin-bottom: 5px;
margin-top: 0;}
.postauthor p {
color: #515151;
font-size: 12px;
margin-bottom: 10px;
margin-top: 0;}
/* by dzweb2 Author Bio End */
</style>
وبعد الانتهاء من كل هذه التعديلات احفظ عملك و مبروك عليك ، نتمنى ان نكون قد وفقنا في شرحنا هذا المتواضع الى موضوع اخر ان شاء الله اذا اعجبك الموضوع لا تبخل عنا بردودك المشجعة تقبلو تحياتي
فريق ديزاد ويب .
