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

إضافة حول الكاتب اضافة بسيطة وجميلة

لمدونتك على البلوجر

طريقة الاضافة :

1 - قم بالدخول إلى لوحة التحكم
2 - ثم التخطيط
3 - ثم أضافة HTML/JavaScript
4-ثم ضع بها هذا الكود:

<div id='profile-wrapper'>
<img src='http://www9.0zz0.com/2014/10/02/20/976244267.png'/>
<a href='http://blogal-noor.blogspot.com'><p>مدونة كُن للخير داعياً</p></a>
<p>مدونة إسلامية ، شروحات ,برامج أندرويد وأيفون ,آهات ومؤثرات صوتية,أناشيد وخلفيات ,قوالب بلوجر,أضافات بلوجر والكثير</p>
<div id='social-wrapper'>
<div class='social-icons sticky-social'>
<a class='facebook' href='https://facebook.com/khaled.5.1.8'></a>
<a class='twitter' href='https://twitter.com/khaled_518'></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;
}
#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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL_wDhaLqywV_UJx3QMv3Z9N5_LBbM_ohUPCtVKhz_h705wiNuEBrJRU8miVCxAY9Ptdsi_di2h4beuM9lGhoANphgGqIiiz9daLejpdquA5nKT7hFR5yWpKXeN7ecnitpq49ZoKlvpSI/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/AVvXsEgQveSx9mQGZNRIyVbOL45CsBOpfoFN_y16-p1PESjUGVU-p9gOIRCoyN0HlfLfuiVieOlM_wJ7zTk9ZsfSStMvPJ8I37MqO2llTI94IbW70mvulHECtPVAVCfj8919Hbp0D0ZZKwIS96w/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/AVvXsEgIGhNIOn4eq5Z_k5UMvYxy_cEkqoryFKm6Dw3TI446ul5tILKsldX_YTnJQSGD13HWektITKCfSNHvp2eDDnNnuHAhi8Kqldu_KK5wqiBMkn2rATa3fQzl8GmBMpr7YmnIN7RPZEmIj1Uv/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/AVvXsEgT5pZ8bfdoL5QtWvyPTLZznOAP-Jax0SL5RXEycItjJLBCuD9SROX4ofhzsFLWtStsRD1qBwG4YcD0uXXiAZSKYGN9ZQQo8QwfjJb1ta0Lx-Jp2DMSL8S7S8PCLYcB7I1ZZ8wkCQccT3s/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/AVvXsEiulTluwQW4I9ZAnwRExmSwNDWepLvdli1uTtas4XlrvqUlitRGZyNjYGoWgPahhPcg6g5WdqAzkVOeOFwIznOdN9u4BupUsRuXeLwHc8lBRkIz8YIBXRSwGCcd6OmVCBjuxo-UX8YQcl4/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/AVvXsEh82kYXLjhl-pZSm3JdE-IVF4TUf8L-QsKn5a6cD5PuEG8Ji9lQ6_U-N3y6WD2NiYN40kE3x4Pkfm3P1TWjCB-V4mfAZRT1vAh_6fLDInxsRBS9gsVGL94eQ3At0isE4dw4JH3yv45zk1A/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/AVvXsEjlBHYHXMxOpegunHHvqt8sbXTvzPIzJn_v8zLX93fnrxDfXeJ-9gizma7Q4iOQz2yOIg3GD-MyRIqoje7e1aAzP_WoI-LfDHoicJOmGVMDD90vtSiJ8j6kl7AfigyYMncxjrPwcr4Sr_M/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>

مع تغيير الروابط لمواقع التواصل

اي استفسار اكتبة بالتعليق