أداة معلومات عن المدونة منبثقة


أداة معلومات عن المدونة منبثقة - هي عبارة عن اداة منبثقة تطفو في الموقع تعمل على عرض وصف او بينات او سيرة الذاتية للكاتب او للمدونة بالاضافة انها تحتوي على روابط التواصل الاجتماعي،ومجهزة على سكربت لعرض عدد المشاركات المنشورة في مدونتك ، وبالطبع من اهم ميزاتها انها خفيفة ولا تبطيء تحميل مدونتك، لا اريد ان اطيل عليكم سوف نذهب للشرح والمعاينة.
شرح طريقة التركيب
1 - الكود التالي عن ملف خاص بالايقونات اذا كان غير موجود في قالب مدونتك قم باضافته قبل/فوق </head>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>
2 - ابحث عن هذه الوسم ]]></b:skin> وضع الكود التالي قبله/فوقه
/* 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%}}
3 - الان ابحث عن وسم <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='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&amp;callback=getposts'/><br/>
تأسست مدونة القيسي ويب عام 2015 وهي قائمة بالخصوص على منصة بلوجر
خلال ذلك أنشأنا أقسام تضم أفضل وأرقى القوالب من بلوجر&#1548; إلى ووردبريس وصولا للملفات المفتوحة&#1548; منها كذلك ملحقات متنوعة والعديد من الشروحات في مجال التدوين كما نقدم مسابقات وهدايا عديدة.
</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>
4 - ابحث عن وسم </head> وضع قبله/فوقه الكود التالي
<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>
5 - الان وصلنا الى المرحله الاخيره الكود التالي هو كود الخاص بزر الاداة يمكنك اضافته في اي مكان ، انا انصحك بوضعه في القائمة العلوية الخاصه بقالبك
<li class='infoqaisi1web'><a class='popup-link' href='#popup'>عن المدونة</a></li>
احفظ القالب وشاهد النتيجة .
مجددًا لو واجهتك مشكلة فباب التعليقات مفتوح لا تتردد! وادعمنا بمشاركة التدوينة 😊
100 out of 100 based on 24 user ratings

أداة معلومات عن المدونة منبثقة - هي عبارة عن اداة منبثقة تطفو في الموقع تعمل على عرض وصف او بينا...

روابط الموضوع للنسخ

رابط
HTML
BBCode
يسمح بنقل الموضوع لكن مع ذكر المصدر في نهاية الموضوع المنقول ووضع رابط الموضوع الأصلي
كيف تعلق ؟

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *