تقنية CSS لفواصل اقرأ المزيد
CSS, اقرأ, الإضافات, المزيد, الهامة, تقنية, تنسيق, لفواصل,
إقرأ المزيد من الإضافات الهامة
لمدونات بلوجر لأنها تعمل على
تنسيق الصفحة الرئيسية للمدونة بشكل جيد وتظهر مقتطف من الموضوع مما يجذب الزائر لقراءة بقية الموضوع وبالتالى تزيد من احصائيات عدد زيارات المدونة.
كما أن هذه الاضافة تعمل على تحميل أسرع للصفحة الرئيسية .
وتدعم بلوجر هذه الخاصية فى اعدادات الرسائل ولكنى سأعرض فواصل وازرار قراءة المزيد بتقنية CSS ذو تأثير ولون مختلف بمرور الماوس على زر قراءة المزيد مما يضيف شكلا جماليا للإضافة.
طريقة تركيب الإضافة:
أذهب إلى لوحة تحكم بلوجر >> ثم تحرير قالب HTML (إحتفظ بنسخة إحتياطية من القالب)
أضف علامة فى المربع الصغير لتوسيع القالب
إستخدم الكيبورد Ctrl+F
فى البحث عن الكود التالى
<data:post.body/>
ثم الصق هذا الكود أسفل منه مباشرة
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<div class="DR-readmore">قراءة المزيد ->></div></a>
</b:if>
ثم البحث عن الكود التالى:
]]></b:skin>
ثم لصق الكود التالى
إقرأ المزيد فوقه مباشرة
أختار الشكل المناسب لمدونتك وأنسخ الكود الموجود أسف
اقرأ المزيد
/*------------blue----------------------*/
/*-----------http://www.condaianllkhir.com/----*/
.DR-readmore{
background:#fff;
text-align:right;
cursor:pointer;
color:#6882C7;
margin:5px 0;
border-left:400px solid #6882C7;
border-right:2px solid #6882C7;
border-top:2px solid #6882C7;
border-bottom:2px solid #6882C7;
padding:1px 5px 1px 1px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 13px sans-serif;
}
.DR-readmore:hover{
color:#000800;
border-left:50px solid #6882C7;
border-right:2px solid #6882C7;
border-top:2px solid #6882C7;
border-bottom:2px solid #6882C7;
}
.DR-readmore a {
color:#fff;
text-decoration:none;
}
.DR-readmore a:hover {
color:#fff;
text-decoration:none;
}
اقرا المزيد
/*-------------- Red -----------*/
/*-----------http://www.condaianllkhir.com/---*/
.DR-readmore{
background:#fff;
text-align:right;
cursor:pointer;
color:#CC0000;
margin:5px 0;
float:right;
border-right:2px solid #FF0033;
border-left:2px solid #FF0033;
padding:5px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 14px sans-serif;
}
.DR-readmore:hover{
background:#fff;
font:bold 12px sans-serif;
color:#FF0033;
border-right:2px solid #FF0033;
border-left:2px solid #FF0033;
}
.DR-readmore a {
color:#fff;
text-decoration:none;
}
.DR-readmore a:hover {
color:#fff;
text-decoration:none;
}
تابع القراءة
/*---------------- Rectangle left border-----------*/
/*--http://www.condaianllkhir.com/--*/
.DR-readmore{
background:#fff;
text-align:right;
cursor:pointer;
color:#821A0C;
margin:5px 0;
float:right;
border-right:2px solid #8F3314;
border-left:10px solid #8F3314;
border-bottom:2px solid #8F3314;
border-top:2px solid #8F3314;
padding:5px;
font:bold 14px sans-serif;
}
.DR-readmore:hover{
background:#fff;
font:bold 11px sans-serif;
color:#CC410E;
border-right:2px dotted #8F3314;
border-left:10px solid #CC410E;
border-bottom:2px dotted #8F3314;
border-top:2px dotted #8F3314;
}
.DR-readmore a {
color:#fff;
text-decoration:none;
}
.DR-readmore a:hover {
color:#fff;
text-decoration:none;
}
المزيد من المعلومات
/*-------------- Blue Blank-----------------*/
/*---------------------http://www.condaianllkhir.com/----------*/
.DR-readmore{
background:#0080ff;
text-align:right;
cursor:pointer;
color:#Fff;
margin:5px 0;
float:right;
border:2px solid #ddd;
padding:5px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 14px sans-serif;
}
.DR-readmore:hover{
background:#FFf;
font:bold 11px sans-serif;
color:#0080ff;
border:3px dotted #ddd;
}
.DR-readmore a {
color:#fff;
text-decoration:none;
}
.DR-readmore a:hover {
color:#fff;
text-decoration:none;
}
Read more
/*------------ Green Button-----------*/
/*----http://www.condaianllkhir.com/----*/
.DR-readmore{
background:#fffff;
text-align:right;
cursor:pointer;
color:#008000;
margin:5px 0;
float:right;
border:2px solid #ddd;
padding:5px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 11px sans-serif;
}
.DR-readmore:hover{
background:#008000;
font:bold 14px sans-serif;
color:#fff;
border:2px solid #ddd;
}
.DR-readmore a {
color:#fff;
text-decoration:none;
}
.DR-readmore a:hover {
color:#fff;
text-decoration:none;
}
ازرار بلوجر
/*------------- Red + Dark Red------------*/
/*------http://www.condaianllkhir.com/-------*/
.DR-readmore{
background:#fffff;
text-align:right;
cursor:pointer;
color:#FE8080;
margin:5px 0;
float:right;
border:2px solid #FE8080;
padding:5px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 11px sans-serif;
}
.DR-readmore:hover{
background:#FFf;
font:bold 14px sans-serif;
color:#FF0000;
border:2px solid #FF0000;
}
.DR-readmore a {
color:#fff;
text-decoration:none;
}
.DR-readmore a:hover {
color:#fff;
text-decoration:none;
}
اكواد بلوجر
/*---------- Black --------------*/
/*------http://www.condaianllkhir.com/-------*/
.DR-readmore{
background:#000800;
text-align:right;
cursor:pointer;
color:#fff;
margin:5px 0;
float:right;
border:2px solid #ddd;
padding:5px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 14px sans-serif;
}
.DR-readmore:hover{
background:#fff;
font:bold 11px sans-serif;
color:#000800;
border:2px solid #000800;
}
.DR-readmore a {
color:#fff;
text-decoration:none;
}
.DR-readmore a:hover {
color:#fff;
text-decoration:none;
}
see more
/*----------Pink ----------------*/
/*-- http://www.condaianllkhir.com/-----*/
.DR-readmore{
background:#FF9999;
text-align:right;
cursor:pointer;
color:#fff;
margin:5px 0;
float:right;
border:none;
padding:5px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 14px sans-serif;
}
.DR-readmore:hover{
background:#CC3399;
}
.DR-readmore a {
color:#fff;
text-decoration:none;
}
.Dr-readmore a:hover {
color:#fff;
text-decoration:none;
}
بعد إضافة الأكواد
نجرى معاينة للقالب
ثم حفظ القالب
صيغ قانونية هامة
حذف مدونتك
الروابط تفتح فى صفحه مستقله
حلول لاشهر اخطاء المدونين
قائمة رأسية ثابتة بالأقسام الهامة لمدونتك
CSS, اقرأ, الإضافات, المزيد, الهامة, تقنية, تنسيق, لفواصل, حذف مدونتك
الروابط تفتح فى صفحه مستقله
حلول لاشهر اخطاء المدونين
قائمة رأسية ثابتة بالأقسام الهامة لمدونتك
0 التعليقات :
إرسال تعليق