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

المصمم islem

مجاني مدونة شخصية

 

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

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

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

ملاحظة :

إبحث في القالب عن 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGmwwpQAs3BPeFjnoV-1GvjJp1AwPnWDM88vvADhThMXN4yRlNTf8li9ZM6gwbfkfyhaVJMCtbuRH3BTmJs2uAT4Gfr07fQiDaFVY7Nl4XsF66GFAEkf1fxyIZ2ND-RROj0Lxrn_j61tdq/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	نعم
الوضع المظلم	نعم
أكواد قصيرة	نعم
مواقع التواصل	نعم
دعم العرض الكسول	نعم
الصفحات الفنية	نعم
قوائم منسدلة متطورة	نعم
أزرار المشاركة	نعم
والمزيد......	....

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

معاينة مباشرة
تحميل مجاني

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