اضافة نبذة حول الكاتب في سيدبار المدونة

اهلا بكم في  مدونة ديزاد ويب ، في موضوع اليوم سنقدم لكم اضافة رائعة يمكنك استخدامها للتعريف بكاتب المدونة وبشكل احترافي على جانب المدونة ( السيدبار ) حيث تحتوي على صورة الكاتب و اسمه و نبذة عنه و تمكن من التواصل مع الكاتب من الخلال ازرار الشبكات الاجتماعية بالاضافة الى ايقونة خمسات حيث انه يمكنك زيارة حسابه على خمسات و شراء منتجاته و خدماته .

طريقة تركيب الاضافة

سجل دخولك الى بلوجر > ثم > اتجه الى تخطيط > ثم > اضافة اداة > ثم > HTML/JavaScript > ثم > الصق الكود التالي :

غير ما باللون الاحمر في الكود ادناه الى رابط صورة الكاتب
غير ما باللون الوردي في الكود ادناه الى نبذة حول الكاتب
غير ما باللون الازرق في الكود ادناه الى رابط حسابك على الفيس بوك

غير ما باللون النيلي في الكود ادناه الى رابط حسابك على تويتر

غير ما باللون البرتقالي في الكود ادناه الى رابط حسابك على خمسات

غير ما باللون الازرق الفاتح في الكود ادناه الى رابط حسابك على سكايب

<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>


وبعد الانتهاء من كل هذه التعديلات احفظ عملك و مبروك عليك ، نتمنى ان نكون قد وفقنا في شرحنا هذا المتواضع الى موضوع اخر ان شاء الله اذا اعجبك الموضوع لا تبخل عنا بردودك المشجعة  تقبلو تحياتي فريق ديزاد ويب .