الدرس 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 مواقع موثوقة لتحميل برامج مجانية للكمبيوتر لسنة 2022

افضل المواقع لإعادة صياغة المقالات وجعلها حصرية غير مكررة أو منسوخة لسنة 2022

افضل 30 بوت لتطبيق التليجرام Telegram Bot عليك تجربته

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

اخدع اصدقائك عبر هذه المواقع | انك هكر | منشورات مزيفة على الفيسبوك | عمل شاشات وهمية

ابقى على اطلاع بآخر الأخبار والتحديثات عبر الاشتراك بالبريد الالكتروني