الدرس 75: صندوق منبثق جميل للتعريف بالكاتب ومعلومات عن مدونتك و صفحاتك الاجتماعية

السلام عليكم اخواني احبابي الكرام فى درس جديد على مدونة علوم و تقنيات و على القسم الخاص ببلوجر

فى هذا الدرس ان شاء الله ساقدم لكم اداة جميلة يمكنك اضافتها على مدونتك و هي عبارة عن صندوق منبثق فيه معلومات عن كاتب المدونة و مقتطف عن المدونة الخاصة بك و ايضا يظهر فيها صورة مصغرة للكاتب او شعار المدونة مع عدد مواضيع الكلي التى تم ادراجها مند تاسيسها و ايضا نجد فى الصندوق ازرار المتابعة على الصفحات الاجتماعية و صندوق المتابعة للموقع الخاص ببلوجر

اضافة صندوق على بلوجر منبثق للتعريف بكاتب و محتوى مدونتك و صفحاتك الاجتماعية

من الافضل متابعة الشرح بالفيديو جيدا ثم البدا فى تطبيق تثبيث الاداة على مدونتك .

1- نضيف هذا الكود اسفل الاكواد التى فى <head> ان كان موجود من قبل فلا تقم باضافته

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

2- اضف هذا الكود فوق الكود التالي : </head>

3- اضف اكواد CSS فوق الوسم : ]]></b:skin>

out Us */ www.arabes1.com
.boxinner{z-index:99;width:100%;height:575px;position:absolute;left:50%;margin-left:-310px;top:70px}
.contentbox{position:absolute;background-color:#fff;top:30px;right:0;left:0;bottom:0;box-shadow:0 1px 5px rgba(0,0,0,.1)}
headbanger{background:#ff675c;height:70px;width:100%;position:inherit}
#textlogo{background:rgba(0,0,0,0.1);color:#fff;line-height:70px;text-align:center;font-size:200%;position:inherit;width:68.5%;box-sizing:initial}
#left{background:#fff;color:#666;top:70px;bottom:0;right:0;padding:20px 0 0 0;width:200px;position:inherit}
#left a{color:#888;transition:initial;}#left a:hover{color:#fff;}
#left i {margin:0 10px 0 0}
.taber1,.taber2,.taber3,.taber4,.taber5,.taber6,.taber7{cursor:pointer;padding:15px;color:#888;}
.taber1:hover{background:#ff6733;color:#fff}.taber2:hover{background:#e74c3c;color:#fff}.taber3:hover{background:#2980b9;color:#fff}.taber4:hover{background:#27C9E9;color:#fff}.taber5:hover{background:#3ca9d0;color:#fff}
.taber6:hover{background:#383838;color:#fff}.taber7:hover{background:#f39c12;color:#fff}
#left .taber1:hover a,#left .taber2:hover a,#left .taber3:hover a,#left .taber4:hover a,#left .taber5:hover a,#left .taber6:hover a,#left .taber7:hover a{color:#fff}
#aboutus{background:#fafafa;width:62.2%;padding:20px 20px 40px 20px;color:#444;text-align:left;position:inherit;float:left;line-height:normal}
#aboutus img{margin:10px auto 0 auto;display:table;border-radius:100%;max-width:140px;box-shadow:0 0 0 5px rgba(0,0,0,.03)}
.scrollbarbox{overflow:hidden;text-align:justify;margin:55px 0 0 0}
.scrollbarbox .innerone{height:480px;overflow:auto}
#popup{display:none;opacity:0;visibility:hidden;transform:scale(1.1);-webkit-backface-visibility:hidden;-webkit-font-smoothing:antialiased;z-index:1003;transition:transform .6s cubic-bezier(.175,.885,.32,1.275),opacity .3s,visibility .3s}
#popup:target{display:block;position:fixed;top:0;left:0;right:0;bottom:0;margin:0;z-index:999;opacity:1;visibility:visible;margin:auto;transform:scale(1.0);}
.popup-container{position:relative;margin:0 auto;padding:20px}
a.popup-close{position:absolute;border-radius:50px;right:20px;line-height:50px;margin:0 auto;font-size:16px;text-decoration:none;color:rgba(0,0,0,0.2);font-family:fontawesome}
a.popup-close:hover{color:rgba(0,0,0,0.6);}
.totalposts{margin:auto;display:table;text-align:center}
.totalposts .totalnumber{display:inline;font-weight:700;font-size:300%;color:#aaa}
.totalposts .totallabel{display:block;color:#aaa;font-weight:700}
li.infoarlina{border:0;}
li.infoarlina a{background:#ff675c;color:#fff;display:block;margin:16px 0;padding:4px 8px;border-radius:3px;font-size:90%;font-weight:700;transition:background-color .3s}
li.infoarlina a:hover{background:#e4554b;color:#fff;}
@media (min-width:768px){.popup-container{width:600px}}
@media (max-width:767px){.popup-container{width:100%}}

4- اضف الاكواد التالية اسفل الوسم : <body>

<div class='popup-wrapper' id='popup'>
<div class='popup-container'>
<div class='boxinner'>
<div class='contentbox'>
<headbanger><span id='textlogo'>علوم وتقنيات</span>
<a class='popup-close' href='#closed' title='Close'><i class='fa fa-times'/></a>
</headbanger>
<br/>
<div class='scrollbarbox'>
<div class='innerone'>
<div id='aboutus'>
<img alt='علوم وتقنيات' height='140' src='http://4.bp.blogspot.com/-WBfHL_e-2J4/VmLcqBKLSkI/AAAAAAAAEsQ/K1clEYO7fPo/s1600-r/Logo-arabes1.com.png' title='علوم وتقنيات' width='140'/><br/>
<script src='http://arabes1.com/feeds/posts/default?alt=json-in-script&callback=getposts'/><br/><br/>
التعريف بالمدونة الخااصة بك    التعريف  بالمدونة الخاصة بك<br/><br/>

مقتطف للتعريف بالكاتب  , للتعريف بالكاتب  , للتعريف بالكاتب , للتعريف بالكاتب , للتعريف بالكاتب  , للتعريف بالكاتب  و للتعريف بالكاتب 
</div>
</div>
</div>
<div id='left'>
<div class='taber2'>
<a href='#' rel='nofollow' target='_blank' title='Follow Us On Google Plus'><i class='fa fa-google-plus fa-fw'/>  تابعنا على جوجل بلس</a></div>
<div class='taber3'>
<a href='#' rel='nofollow' target='_blank' title='Follow Us On Facebook'><i class='fa fa-facebook fa-fw'/> تابعنا على الفيسبوك</a></div>
<div class='taber4'>
<a href='#' rel='nofollow' target='_blank' title='Follow Us On Twitter'><i class='fa fa-twitter fa-fw'/> تابعنا على التويتر</a> </div>
<div class='taber7'>
<a href='https://www.blogger.com/follow-blog.g?blogID=' rel='nofollow' target='_blank' title='Join this blog'><i class='fa fa-users fa-fw'/> الانضمام الى المدونة</a></div>
</div>
</div>
</div>
</div>
</div>

قم بالتعديل على :
- اسم المدونة
- رابط صورة المصغرة
- رابط الفيد و هو : http://arabes1.com/feeds/posts/default برابطك
- اكتب مقتطف لمدونتك
- اكتب وصف للكاتب
- قم بوضع روابط صفحاتك الاجتماعية لمدونتك

5- قم بالدخول الى صفحة التخطيط و قم باضافة اداة HTML/JAVA و قم بنسخ ولصق فيها هذا الكود

<li class='infoarlina'><a class='popup-link' href='#popup'>التعريف يالمدونة</a></li>

ارجوا ان ينال الشرح اعجابكم ننتظر تعليقاتكم ^_^

الدرس 75: صندوق منبثق جميل للتعريف بالكاتب ومعلومات عن مدونتك و صفحاتك الاجتماعية

من الافضل متابعة الشرح بالفيديو جيدا ثم البدا فى تطبيق تثبيث الاداة على مدونتك .

مقالات متعلقة

أفضل تطبيق لربح المال عن طريق هاتفك الاندرويد وبطرق سهلة ستعجبك

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

البحث عن شخص بالاسم الكامل فى الإنترنت عن طريق رقم هاتفه أو بريده الالكترونى

افضل اشهر 10 مواقع موثوقة لتحميل برامج مجانية للكمبيوتر

تحميل افضل 8 برامج عمل الروت ROOT للاندرويد بدون كمبيوتر

برنامج استعادة واسترجاع كامل الملفات المحذوفة للكمبيوتر بعد الفورمات او بالخطا

افضل 10 متصفحات الانترنت لسنة 2018 و تحميل احدث نسخة متصفح نت