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

الكاتب بتاريخ عدد التعليقات : 2
مرحبا بكم اخوتي متابعين مدونتنا الرائعة مدونة مهووسين الويب اليوم لدينا اضافة اداة تعريف الكاتب من السايد بار في مدونات بلوجر الاداة جميلة وراعة وذات منظر خلاب تجذب الزائر الى قراءة معلومات الكاتب
الان فلننتقل الى:
طريقة التركيب
  1. نذهب الى لوحة التحكم ثم الى التخطيط
  2. ومن ثم نختار اداة جديدة 
  3. ثم html/gavascript
  4. ونضع هذا الكود في المكان المحدد

<div id='profile-wrapper'>
<img src="http://lh3.googleusercontent.com/-a1r6GoJHJTI/AAAAAAAAAAI/AAAAAAAAABE/rX5i8nbvb5s/s120-c/photo.jpg" /><p>omran alhariri</p>
<p>من الجمهورية العربية السورية, مصمم ومبرمج قوالب بلوجر حر .. مهوس ألعاب ذو عدة مدونات ٬ لكن مع كثرة العمل قررت الإقتصار على مدونة واحدة وهي مدونة مهووسين الويب التي تأسست بتاريخ 2014/04/01 تم تغيير المحتوى لما يحبه المدون ولكي أساعد كل شخص ولو بشيئ بسيط أحب الجميع ولا أكره أحد</p>
<div id='social-wrapper'>
<div class='social-icons sticky-social'>
<a class='facebook' href='#'></a>
<a class='twitter' href='#'></a>
<a class='behance' href='#'></a>
<a class='skype' href='#'></a>
<a class='khamsat' href='#'></a>
</div>
</div>
</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;
width: 100px;
height: 100px;
border: solid 4px #135B49;
}
#profile-wrapper h2 {
font: normal 20px tahoma;
color: #F34D4D;
}
#profile-wrapper p {
font: normal 12px ges,;
color: #888;
line-height: 2em;
}
#social-wrapper{padding:11px 0 0;overflow:hidden; margin-right: 30px;}
.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(http://2.bp.blogspot.com/-qEwCYfxBfPM/U0ie0ZQki3I/AAAAAAAAAG8/fuhSYM5vbIQ/s1600/twitter.png);
}
.social-icons a.twitter:hover {
background-color: #26d5ec;
}
.social-icons a.behance {
background-image: url(http://2.bp.blogspot.com/-YpUy6aUshgA/U34aWQR_WsI/AAAAAAAADHo/kIXN6gcv1YQ/s1600/behance.png);
}
.social-icons a.behance:hover {
background-color: #444;
}
.social-icons a.skype {
background-image: url(http://2.bp.blogspot.com/-2tBzIasUJUE/U0iezAvjieI/AAAAAAAAAGk/YR_gm-i78Fs/s1600/skype.png);
}
.social-icons a.skype:hover {
background-color: #0bbff2;
}
.social-icons a.youtube {
background-image: url(http://2.bp.blogspot.com/-iW-n8T469IM/U0ie1D-ovJI/AAAAAAAAAHM/V1_vp_5WrsA/s1600/youtube.png);
}
.social-icons a.youtube:hover {
background-color: #df3333;
}
.social-icons a.google {
background-image: url(http://4.bp.blogspot.com/-jGsrRN9hxRU/U0iexCJNJ4I/AAAAAAAAAGE/_q2fGxrozpA/s1600/google.png);
}
.social-icons a.google:hover {
background-color: #d62408;
}
.social-icons a.khamsat {
background-image: url(http://1.bp.blogspot.com/-tCRRoKAMJzY/U0H3L_VBLxI/AAAAAAAACqM/i2qw58_cPtE/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;
}
</style>
وغير ما يلزم ثم إضغط حفظ وتمتع بالاداة الرائعة وهي تزهي منظر مدونتك الى الافضل
الى هنا يكون قد انتهى درسنا لليوم نلتقي في درس اخر إنشاء الله
انتهى

2 تعليقات على موضوع " إضافة اداة تعريف الكاتب من السايد بار لبلوجر "

████ شروط التعليق ████
1- يجب على التعليق أن يكون بلا روابط إشهارية
2- أن يكون التعليق خاص بمحتوى التدوينة
3- لإضافة كود حوله أولاً بمحول الأكواد
4- لاستعمال خط عريض ضع الكود : <strong>النص هنا...</strong>
5- لاستعمال خط مائل ضع الكود : <em>النص هنا...</em>
6- لإضافة صورة ضعها بهذا الكود : <i rel="image"> ... رابط الصورة هنا ... </i>

الإبتسامات إخفاء