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

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

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

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%}}