هل ترى أن للأداة إفادة؟ من وجهة نظري فنعم لها إفادة إذا كنت من محبي إظهار ومشاركة معلوماتك الخاصة سواء لتواصل أو نبذة عنك... وعلى العموم القرار يبقى قرارك.
وللأصدقاء الذين يريدون تركيب هذه الأداة الجميلة أدعوكم لمتابعة الشرح بعد المعاينة :
1. ابحث عن ]]></b:skin> ضع الكود التالي فوقه أو ضعه بين <style> </style> فوق </head>
.boxinner{z-index:99;width:100%;height:600px;position:absolute;left:50%;margin-left:-250px;background-color:#222;top:20px;font-family: Droid Arabic Naskh,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)}
.circle{float:left;height:7px;width:7px;margin:10px 0 0 10px;border-radius:50%}
.circle:first-child,.circle:nth-child(2),.circle:nth-child(3){background:#e74c3c}
kepala{background:#00adca;height:50px;width:100%;position:inherit;left:0}
#textlogo{background:#00bcdc;color:#fff;padding-top:15px;text-align:center;font-weight:700;font-size:15px;position:inherit;height:70%;width:39%;box-sizing:initial; right: 0;}
#left{background:#222;color:#fff;top:50px;bottom:0;right:0;width:250px;position:inherit}
#left a{color:#bdc3c7;}#left a:hover{color:#fff;}
.taber1,.taber2,.taber3,.taber4,.taber5,.taber6,.taber7{cursor:pointer;font-size:14px;padding:15px 25px;color:#bdc3c7;text-align: center;}
.taber1:hover{background:#f88c00;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:#1abc9c;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{top:50px;width:59%;padding:10px;color:#444;text-align:right;position:inherit;float:left;line-height:normal;font-size:13px}
#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-top:45px}
.scrollbarbox .innerone{height:480px;overflow:auto}}
a.popup-link{border-bottom:3px solid #e2e2e2;border-radius:3px;padding:8px 40px!important;background:#fff;color:#555!important;text-align:center;letter-spacing:1px;margin-right:10px}
#popup{display:none;}
#popup:target{display:block;position:fixed;top:0;left:0;right:0;bottom:0;margin:0;z-index:999;transition:all .3s}
.popup-container{position:relative;margin:0 auto;padding:20px}
a.popup-close{position:relative;top:10px;border-radius:50px;float:left;left:5px;margin:0 auto;padding:4px 7px;font-weight:bold;font-size:30px;text-decoration:none;line-height:1;color:#fff}
.popup-wrapper:before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgb(58, 57, 57); -webkit-transition: all 0s ease; }
a.popup-close:hover{color:#fff}
.totalposts{margin:auto;display:table;text-align:center}
.totalposts .totalnumber{display:inline;font-weight:700;font-size:400%;color:#999}
.totalposts .totallabel{display:block;text-transform:uppercase;color:#2980b9}
li.infoar1web{border:0;float:right;list-style:none}
li.infoar1web a{background:#45a2db;color:#fff;display:block;margin:20px 20px 13px 0;padding:10px 20px;line-height:100%;border-radius:3px;font-size:90%;font-weight:bold;text-transform:uppercase;font-family:Droid Arabic Naskh,sans-serif;transition:background-color .3s;text-decoration: none;}
i.infoar1web a:hover{background:#e67e22;color:#fff;}
@media (min-width:768px){.popup-container{width:600px}}
@media (max-width:767px){.popup-container{width:100%}}
<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>
<div class='popup-wrapper' id='popup'>
<div class='popup-container'>
<div class='boxinner'>
<div class='circle'/>
<div class='circle'/>
<div class='circle'/>
<div class='contentbox'>
<kepala><span id='textlogo'><data:blog.title/></span>
<a class='popup-close' href='#closed' title='أغلق'>×</a>
</kepala>
<br/>
<div class='scrollbarbox'>
<div class='innerone'>
<div id='aboutus'>
<img expr:alt='data:blog.title' expr:title='data:blog.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRzwPci8URDraWNm0slI7cdkRipI_dPb6KCoa-Edhyphenhyphen2yqHQa0NIGK-4cmKEBCxnSY6_1twsMJo1F1KjZU8O9EKmX7eANDPtDhV8GKL1yo3lnIpo_pmXSuIrMVMpm5vNfyTNSNtLpQtBuo/s1600/ar1web.jpg'/><br/>
<script src='/feeds/posts/default?alt=json-in-script&callback=getposts'/><br/><br/>
الوصف
</div></div></div>
<div id='left'>
<div class='taber1'><a expr:title='data:blog.title' href='/' rel='nofollow' target='_blank'><data:blog.title/></a></div>
<div class='taber2'><a href='#' rel='nofollow' target='_blank'>Google+</a></div>
<div class='taber3'><a href='#' rel='nofollow' target='_blank'>Facebook</a></div>
<div class='taber4'><a href='#' rel='nofollow' target='_blank'>Twitter</a>
</div>
<div class='taber6'><a href='#' rel='nofollow' target='_blank' >إنضم للموقع</a></div>
<div class='taber7'><a href='/' target='_blank'> ifno@ar1web.com</a></div>
</div></div></div></div></div>
* غير الهشتاج # بالروابط للمواقع الإجتماعية
4. يبقى مكان وضع الزر من إختيارك إذا أردت أن تضعه ضمن القائمة فعليك حذف الكود المحدد بالأحمر هو في السطور الأخيرة للكود الأول حتى يظهر بشكل جيد ومتناسق مع قائمتك
<li class='infoar1web'><a class='popup-link' href='#popup'>عن المدونة</a></li>