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

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

يوجد الآن مشاهدة التعليقات : 8

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات

أداة لمعلومات عن المدونة أو عن الكاتب منبثقة. هذه المرة أشارككم إضافة تخص المعلومات يمكن استخدامها على حسب ذوقكم متكونة من صورة ووصف وعدد المشاركات أي المواضيع المطروحة هذا بالنسبة ليسار الصندوق أما بيمينه فتقبع المواقع الإجتماعية إسم الموقع الذي يظهر تلقائيا وما يليه، هذه الأداة الرائعة متناسقة بتصميم جميل وألوان فلاتيه لها زر يظهر الصندوق بكامله مع خلفية شفافة وزر للإغلاق.
هل ترى أن للأداة إفادة؟ من وجهة نظري فنعم لها إفادة إذا كنت من محبي إظهار ومشاركة معلوماتك الخاصة سواء لتواصل أو نبذة عنك... وعلى العموم القرار يبقى قرارك.
وللأصدقاء الذين يريدون تركيب هذه الأداة الجميلة أدعوكم لمتابعة الشرح بعد المعاينة :
شرح طريقة التركيب
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%}}
2. ضع الكود التالي فوق </body> أو </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>
3. ضع الكود التالي أسفل <body>
<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='أغلق'>&#215;</a>
</kepala>
<br/>
<div class='scrollbarbox'>
<div class='innerone'>
<div id='aboutus'>
<img expr:alt='data:blog.title' expr:title='data:blog.title' src='//4.bp.blogspot.com/-9cbKSdkNt14/VjE9Gvg5mHI/AAAAAAAAJK8/CGI7UjjpAXk/s1600/ar1web.jpg'/><br/>
<script src='/feeds/posts/default?alt=json-in-script&amp;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>
ملحوظة:

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻

هناك 8 تعليقات:

  1. اخى لم اجد الكود الاخير



    ردحذف
    الردود
    1. الكود تضعه في المكان الذي تراه مناسب لك

      حذف
  2. لم تفهك قصدى اخى انا لم اجد الوسم الاخير الذى ابحث عنه فى القالب لكى اضع اسفله اخر كود

    ردحذف
    الردود
    1. إبحث عن نصفه هكذا <body

      حذف
  3. شكرا لك اخى

    ردحذف
  4. أزال المؤلف هذا التعليق.

    ردحذف
  5. اخي مشكور على هذه الاضافة لكنها ليست شفافة من جانبيها كما في المعاينة

    ردحذف
  6. نعم أخي ليست شفافة من جانبيها لماذا ؟؟؟؟؟

    ردحذف

عن الكاتب :

إرشادات

    تحميل الملفات

    نستخدم بمدونتنا مواقع مختلفة في رفع الملفات ونوفر منها إثنان:
  • موقع : Mediafire
  • موقع :file-upload
  • باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
  • تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
  • كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
  • إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.
  • أين تجدنا؟

    بعيدا عن الصفحات المزورة أو المزيفة التي يحاول البعض من خلالها استغلال جهود فريق عمل عرب ويب، هذه هي حساباتنا وصفحاتنا الرسمية في الشبكات الاجتماعية، لا نمتلك سوى هذه الصفحات والحسابات وهي الوحيدة التي تتبع للمدونة : https://www.instagram.com/ar1web

    كلمة الختام

    في مدونة عرب ويب نسعى دوما جاهدين للتحسن والتقدم وليس ما تراه هو حدودنا! ونحن نقدر كثيرا زوارنا وآراؤهم فإن كان لديك أي اقتراح/نصيحة/ومضة مفيدة/نقد بناء أو ما إلى ذلك يمكنك مشاركتنا كل ما في جعبتك من خلال الإتصال بنا : istoretech3@gmail.com
أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم