02‏/05‏/2021

خسوف قالب بلوجر للمدونات الشخصية .

 


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

مميزات القالب :

  • شريط آخر المواضيع.
  • عرض مميز للتدوينات.
  • بساطة التصميم وسهولة التصفح.
  • الصفحات الفنية (خريطة الموقع - إتصل بنا ).
  • الوضع المظلم .
  • أكواد قصيرة.

ملاحظة :

إبحث في القالب عن https://eclipseblog-rtl.blogspot.com/ و قم بتغييره لعنوان مدونتك
قد تحتاج لبعض الأساسيات في Html و Css للتعديل على القالب ، على العموم إذا واجهتك مشكلة اطرحها في التعلييقات ، نحن في الخدمة.

الصفحات و الأكواد القصيرة:


صفحة الإتصال:


<form name="contact-form">
<div class="formcolumn1">
<input id="ContactForm1_contact-form-name" name="name" placeholder="الإسم*" size="30" type="text" value="" />
</div>
<div class="formcolumn2">
<input id="ContactForm1_contact-form-email" name="email" placeholder="البريد الإلكتروني*" size="30" type="text" value="" />
</div>
<div class="formcolumn3">
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="الرسالة" rows="7"></textarea>
</div>
<div class="formcolumn4">
<input class="ripplelink" id="ContactForm1_contact-form-submit" type="button" value="إرسال" />
</div>
<div style="max-width: 100%; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
<style scoped="" type="text/css">
#ContactForm1{display:none}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{font-family:'Tajawal';display:inline-block;width:100%;height:auto;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}
#ContactForm1_contact-form-email-message{font-family:'Tajawal';width:100%;height:250px;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}
#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{background:#fff;outline:none;border-color:rgba(0,0,0,0.18)}
#ContactForm1_contact-form-submit{background:#fff;color:#5f6368;font-family:'Tajawal';font-size:16px;width:161px;height:45px;float:left;padding:0 0 0 20px;margin:10px 0 3px 5px;cursor:pointer;border:none;border-radius:24px;box-shadow:0 1px 2px 0 rgba(60,64,67,0.302),0 1px 3px 1px rgba(60,64,67,0.149);transition:box-shadow .08s linear,min-width .15s cubic-bezier(0.4,0.0,0.2,1)}
.formcolumn4{position:relative}
.formcolumn4:before{background-image:url(https://2.bp.blogspot.com/-nkmaptT0VoA/WumFePAy9DI/AAAAAAAAGlM/8lA5aRi2E-okumpdikjQancIKDjYaGNqwCLcBGAs/s1600/mailme.png);background-position:center;background-repeat:no-repeat;background-size:20px;content:'';display:block;height:63px;width:32px;position:absolute;z-index:1;left:15px;top:0}
#ContactForm1_contact-form-submit:hover{background:#fafafb;box-shadow:0 1px 3px 0 rgba(60,64,67,0.302),0 4px 8px 3px rgba(60,64,67,0.149)}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{margin-top:35px}
form{color:#888}
.formcolumn1,.formcolumn2{float:right;width:50%}
.formcolumn1,.formcolumn2{margin:0 0 10px 0;padding:0 0 0 10px}
.formcolumn2{padding:0 10px 0 0}
@media only screen and (max-width:768px){.formcolumn1,.formcolumn2{width:100%;padding:0}}
</style>

خريطة الموقع:


<div class="tabbed-toc" id="tabbed-toc"></div>
<script>
var tabbedTOC={blogUrl:"https://eclipseblog-rtl.blogspot.com/",containerId:"tabbed-toc",activeTab:1,showDates:!0,showSummaries:!1,numChars:200,showThumbnails:!0,thumbSize:60,noThumb:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",monthNames:["جانفي","فيفري","مارس","أفريل","ماي","جوان","جويلية","أوت","سبتمبر","أكتوبر","نوفمبر","ديسمبر"],newTabLink:!0,maxResults:99999,preload:0,sortAlphabetically:!0,showNew:7,newText:' &ndash; <em style="color:red;">جديد</em>'};
</script>
<script src="https://cdn.jsdelivr.net/gh/Indzign/InSEO@master/daftarisikeren.js"></script>
<style scoped="" type="text/css">
.tabbed-toc{margin:0 auto;position:relative;background:linear-gradient(-45deg,#EE7752,#E73C7E,#23A6D5,#23D5AB);background-size:400% 400%;animation:Gradient 15s ease infinite}
.tabbed-toc .loading{display:block;padding:2px 12px;color:#fff}
.tabbed-toc ul,.tabbed-toc ol,.tabbed-toc li{margin:0;padding:0;list-style:none}
.tabbed-toc .toc-tabs{width:20%;float:right}
.tabbed-toc .toc-tabs li a{display:block;overflow:hidden;color:#fff;text-decoration:none;padding:12px;font-size:13px;transition:all .3s}
.tabbed-toc .toc-tabs li a:hover{background-color:rgba(0,0,0,0.05)}
.tabbed-toc .toc-tabs li a.active-tab{background:rgba(0,0,0,0.05);position:relative;z-index:5;margin:0 -1px 0 0}
.tabbed-toc .toc-content,.tabbed-toc .toc-line{width:80%;float:left;background-color:#fff;box-sizing:border-box}
.tabbed-toc .toc-line{float:none;display:block;position:absolute;top:0;left:0;bottom:0}
.tabbed-toc .panel{position:relative;z-index:5}
.tabbed-toc .panel li a{color:#1277cb;display:block;position:relative;font-weight:500;font-size:14px;padding:6px 12px;overflow:hidden}
.tabbed-toc .panel li time{display:block;font-weight:normal;font-size:11px;color:#666;float:left}
.tabbed-toc .panel li .summary{display:block;padding:10px 12px 10px;font-size:13px}
.tabbed-toc .panel li .summary img.thumbnail{float:right;display:block;margin:5px 0 0 8px;width:72px;height:72px;background-color:#fafafa}
.tabbed-toc .panel li{background-color:#f9f9f9;margin:0}
.tabbed-toc .panel li:nth-child(even){background-color:#fff}
.tabbed-toc .panel li a:hover,.tabbed-toc .panel li a:focus,.tabbed-toc .panel li.bold a{background-color:rgba(0,0,0,0.03);outline:none}
.tabbed-toc .panel li a em{background:#f39c12;color:#fff!important;font-style:initial;font-size:11px;margin:0 5px 0 0;padding:2px 10px;border-radius:22px}
.tabbed-toc .panel li:before{display:none}
.nightmode .tabbed-toc .toc-content,.nightmode .tabbed-toc .toc-line{background-color:rgba(0,0,0,0.1)}
.nightmode .tabbed-toc{background:rgba(0,0,0,0.1)}
.nightmode .tabbed-toc .panel li{background:rgba(255,255,255,.05)}
.nightmode .tabbed-toc .panel li:nth-child(even){background:rgba(255,255,255,.1)}
@-webkit-keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@-moz-keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@media (max-width:768px){.tabbed-toc .toc-tabs,.tabbed-toc .toc-content{overflow:hidden;width:auto;float:none;display:block}.tabbed-toc .toc-tabs li{display:inline;float:left}.tabbed-toc .toc-tabs li a.active-tab{background-color:rgba(64,64,64,0.1)}.tabbed-toc .toc-content{border:none}.tabbed-toc .toc-line,.tabbed-toc .panel li time{display:none}}
</style>

قم بتغيير الرابط https://eclipseblog-rtl.blogspot.com/  إلى عنوان مدونتك .

أكواد القصيرة:


المعاينة والتحميل:


<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="YOUR-LINK-HERE" target="_blank">معاينة</a></li>
<li><a class="download" href=" YOUR-LINK-HERE" target="_blank">تحميل</a></li>
</ul>
</div>
<div class="clear"></div>

محتوى مخفي:


<div id="flippy"><button>محتوى مخفي</button></div>
<div id="flippanel">
--- يظهر المحتوى هنا ---
</div>

جدول:


<table cellpadding="0" cellspacing="0" style="text-align: right;">
    <tbody>
        <tr>
            <th>رأس الجدول 1</th>
            <th>رأس الجدول 2</th>
            <th>رأس الجدول 3</th>
        </tr>
        <tr>
            <td>قسم 1</td>
            <td>قسم 2</td>
            <td>قسم 3</td>
        </tr>
        <tr>
            <td>قسم 1</td>
            <td>قسم 2</td>
            <td>قسم 3</td>
        </tr>
        <tr>
            <td>قسم 1</td>
            <td>قسم 2</td>
            <td>قسم 3</td>
        </tr>
    </tbody>
</table>

فيديو يوتيوب:


<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="//www.youtube.com/embed/PWxJ7iY01mQ">
</div>
</div>
</div>

قم بتغيير المعرف PWxJ7iY01mQ  لعرض فيديو آخر

إدخال كود:



<pre><code> تضع الكود هنا </code></pre>

مميزات قالب بسيط التحقق
متجاوبنعممعاينة
صديق للهواتفنعممعاينة
يحقق معايير السيونعم
تصميم بثلاث أعمدةنعم
تصميم رائع للهاتفنعم
شريط آخر المواضيعنعم
صندوق بحث مميزنعم
متجاوب مع الاعلاناتنعم
صفحة الخطأ 404نعم
الوضع المظلمنعم
أكواد قصيرةنعم
مواقع التواصلنعم
دعم العرض الكسولنعم
الصفحات الفنيةنعم
قوائم منسدلة متطورةنعم
أزرار المشاركةنعم
والمزيد..........

العديد من القوالب المميزة تجدها في قواعد فقط

معاينة مباشرة
تحميل مجاني
سهل التصفح
سريع الأرشفة
صديق للسيو



إسمي إسلام مطور ويب في قواعد-Qawa3id مهتم بالبرمجة و التدوين وتحسين واجهة المستخدم

لاستخدام الرموز التعبيرية قم بنسخ الرمز الذي تريده وألصقه في صندوق التعليقات