أضافة أداة معلومات عن المدونه فى نافذه منبثقه - طريقة أضافة أداة عن المدونه بطريقة أنيقه - أداة عن المدونه هى واحدة من أهم الاددوات فى المدونه ولا غنى عنها ويجب على كل مدون أن يضيفها الى مدونته . اليوم سنقوم بطرح أداة عن المونه بشكل أنيق ومتناسق  هذه الاداة هى متجاوبه وهى تعرض عن طريقة فتحه منبثقه والافضل فى هذه الاداة هى أنها ليس صفحه بل هى أداة أو أضافة تستيع وضعها فى أى مكان فى المدونه.

مميزات هذه الادة هى:

  1. عرض صورة لكاتب المدون 
  2. عرض عديد مواضيع المدونه
  3. عرض وصف عن المدونه
  4. أمكانية أضافة روابط مدونتك على مواقع التواصل الاجتماعى
قبل البدء فى أضافة هذه الاداة الى مدونتك تسطيع معاينتها فى الرابط التالى .


حسنا أذا أعجبت الاضافة وتريد أن تصيفها الى مدونتك , قم بأتباع الشرح التالى بعنايه حتى تقوم بأضفتها بدون مشاكل الى مدونتك.

كيف تقوم بأذافة الاداة الى مدونتك؟

  1. قم بالدخوالى الى مدونتك من هنا
  2.    أذهب الى فالب وأختر تحرير HTML  قم بالبحث عن أى من الاكواد التالىه

 ]]></b:skin> أو </style> 
قم بوضع الكود التالى فقط بعد ]]></b:skin>
أو </style>

/* CSS Widget Info About Us */
.boxinner{z-index:99;width:100%;height:600px;position:absolute;left:50%;margin-left:-250px;background-color:#222;top:20px}
.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:#de9b31;height:50px;width:100%;position:inherit}
#textlogo{background:#f0a734;color:#fff;padding-top:15px;text-align:center;font-weight:700;font-size:15px;position:inherit;height:70%;width:61%;box-sizing:initial;}
#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;}
.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:left;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:5px;border-radius:50px;float:right;right:5px;margin:0 auto;padding:4px 7px;font-weight:bold;font-size:30px;text-decoration:none;line-height:1;color:#fff}
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.askwithloud{border:0;float:right;list-style:none}
li.askwithloud a{background:#f39c12;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:'Roboto Condensed';transition:background-color .3s}
i.askwithloud a:hover{background:#e67e22;color:#fff;}
@media (min-width:768px){.popup-container{width:600px}}
@media (max-width:767px){.popup-container{width:100%}}

مره أخرى قم بأيجاد الكود التالى فى قالبك
<body> أو <body>

قم بوضع الكود التى فقط بعد <body أو <body>.

<div class='popup-wrapper' id='popup'>
<div class='popup-container'>
<div class='boxinner'>
<div class='circle'></div>
<div class='circle'></div>
<div class='circle'></div>
<div class='contentbox'>
<kepala><span id='textlogo'>مطور بلوجر</span>
<a class='popup-close' href='#closed' title='Close'>×</a>
</kepala>
<br/>
<div class='scrollbarbox'>
<div class='innerone'>
<div id='aboutus'>
<img alt='Indzign' src='//3.bp.blogspot.com/-jrxkYbBQAYs/VidR2h2eDeI/AAAAAAAALJ8/Vg7CzLW0oYo/s1600/indzign.jpg' title='Indzign'/><br/>
<div class="totalposts"><span class="totalnumber">عدد المواضيع</span><span class="totallabel">مواضيع</span></div><br/><br/>
أفضل مدونه لدروس وشروحات واضافات بلوجر.<br/><br/>
مطور بلوجر هو أفضل مكان لك لتجد جديد قوالب البلوجر وايضا الروحات والاضافات 
</div></div></div>
<div id='left'>
<div class='taber1'><a href='http://www.idblanter.com' rel='nofollow' target='_blank' title='blogger1dev.blogspot.com'> مطور بلوجر</a></div>
<div class='taber2'><a href='https://plus.google.com/+Husseinfaraj199' rel='nofollow' target='_blank' title='Follow Us On Google Plus'><i class="fa fa-google-plus"></i> Google Plus</a></div>
<div class='taber3'><a href='https://www.facebook.com/bloggerdeve1' rel='nofollow' target='_blank' title='Follow Us On Facebook'>Facebook</a></div>
<div class='taber4'><a href='https://twitter.com/bloggerdeve1' rel='nofollow' target='_blank' title='Follow Us On Twitter'>Twitter</a>
</div>
<div class='taber6'><a href='http://codepen.io/bloggerdeve/' rel='nofollow' target='_blank' title='Follow Us On Codepen'>Codepen</a></div>
<div class='taber7'><a href='http://www.blogger.com/follow-blog.g?blogID=4148238530077033746' rel='nofollow' target='_blank' title='Join this blog'>أنضم الى المدونه</a>
  </div>
</div></div></div></div></div><br/>
قم بتغير الروابط بما يناسبك
قم بنسخ كود الجافاسكريبت التالى وضعه قبل </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">Publish Articles</span></div>');}
//]]>
</script>

قم بنسخ كود HTML التالى وضعه فى املكان التى ترغب فى عرض الاضافه فيه


<li class='infoindzign'><a class='popup-link' href='#popup'>معلومات</a></li>

أنتهينا , الان قم بحف القالب  ومبروك الاضافه.

أتمنى أن يكون موضوعنا عن أضافة أداة معلومات عن المدونه فى نافذه منبثقه