أداة معلومات عن المدونة منبثقة
أداة معلومات عن المدونة منبثقة - هي عبارة عن اداة منبثقة تطفو في الموقع تعمل على عرض وصف او بينات او سيرة الذاتية للكاتب او للمدونة بالاضافة انها تحتوي على روابط التواصل الاجتماعي،ومجهزة على سكربت لعرض عدد المشاركات المنشورة في مدونتك ، وبالطبع من اهم ميزاتها انها خفيفة ولا تبطيء تحميل مدونتك، لا اريد ان اطيل عليكم سوف نذهب للشرح والمعاينة.
1 - الكود التالي عن ملف خاص بالايقونات اذا كان غير موجود في قالب مدونتك قم باضافته قبل/فوق </head>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>
/* About Us qaisi1web */
.boxinner{z-index:99;width:100%;height:575px;position:absolute;left:50%;margin-left:-310px;font-family: 'Noto Sans Kufi Arabic', sans-serif;}
.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:62.3%;box-sizing:initial}
#left{background:#222;color:#666;top:70px;bottom:0;left:0;padding:20px 0 0 0;width:37.9%;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:right;position:inherit;float:right;line-height:2em}
#aboutus img{margin:10px auto 0 auto;display:table;border-radius:100%!important;max-width:140px;box-shadow:0 0 0 5px rgba(0,0,0,.03)}
.scrollbarbox{overflow:hidden;text-align:justify;margin:50px 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);background: rgba(0, 0, 0, 0.84);}
.popup-container{position:relative;margin:0 auto;padding:20px}
a.popup-close{position:absolute;border-radius:50px!important;left: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.infoqaisi1web{border:0;list-style: none;}
li.infoqaisi1web a{background:#ff675c;color:#fff;margin:20px 20px 13px 0!important;padding:10px 20px!important;border-radius:3px!important;font-size:90%;font-weight:700;transition:background-color .3s}
li.infoqaisi1web a:hover{background:#e4554b;color:#fff;}
@media (min-width:768px){.popup-container{width:600px}}
@media (max-width:767px){.popup-container{width:100%}}
<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='https://cdn2.iconfinder.com/data/icons/the-world-faces/512/Cool_Guy_Face_Avatar-128.png' title='القيسي ويب' width='140'/><br/>
<script src='/feeds/posts/default?alt=json-in-script&callback=getposts'/><br/>
تأسست مدونة القيسي ويب عام 2015 وهي قائمة بالخصوص على منصة بلوجر
خلال ذلك أنشأنا أقسام تضم أفضل وأرقى القوالب من بلوجر، إلى ووردبريس وصولا للملفات المفتوحة، منها كذلك ملحقات متنوعة والعديد من الشروحات في مجال التدوين كما نقدم مسابقات وهدايا عديدة.
</div></div></div>
<div id='left'>
<div class='taber1'><a href='#' target='_blank' title='يوتيوب'><i class='fa fa-youtube'/> youtube</a></div>
<div class='taber2'><a href='#' rel='nofollow' target='_blank' title='تابعنا على جوجل'><i class='fa fa-google-plus fa-fw'/> Google +</a></div>
<div class='taber3'><a href='#' rel='nofollow' target='_blank' title='تابعنا على الفيس بوك'><i class='fa fa-facebook fa-fw'/> Facebook</a></div>
<div class='taber4'><a href='#' rel='nofollow' target='_blank' title='تابعنا على تويتر'><i class='fa fa-twitter fa-fw'/> Twitter</a> </div>
<div class='taber6'><a href='#' rel='nofollow' target='_blank' title='اطرح سؤالك'><i class='fa fa-question-circle'/> ركن الاسئلة</a></div>
<div class='taber7'><a href='https://www.blogger.com/follow-blog.g?blogID=6878042300854650421' rel='nofollow' target='_blank' title='لا تفوت جديدنا'><i class='fa fa-users fa-fw'/> انضم لموقعنا</a></div>
</div></div></div></div></div>
<script type='text/javascript'>
//<![CDATA[
// Total Posts
function getposts(json){var totalposts=json.feed.openSearch$totalResults.$t;document.write('<div class="totalposts"><span class="totalnumber">'+totalposts+'</span><span class="totallabel">عدد المشاركات</span></div>');}
//]]>
</script>
<li class='infoqaisi1web'><a class='popup-link' href='#popup'>عن المدونة</a></li>
مجددًا لو واجهتك مشكلة فباب التعليقات مفتوح لا تتردد! وادعمنا بمشاركة التدوينة 😊
100
out of 100
based on 24 user ratings
أداة معلومات عن المدونة منبثقة - هي عبارة عن اداة منبثقة تطفو في الموقع تعمل على عرض وصف او بينات او سيرة الذاتية للكاتب او للمدونة بالا...
الكاتب :