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

 

لجعل  مدونة بلوجر أسرع في التصفح على الهاتف النقال إتبع الخطوات التالية :

1- انتقل إلى لوحة التحكم الخاصة بمدونتك ، ثم إختر "تصميم" ، ثم "تحريرHTML " وضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم ، وابحث عن الكود التالي :  ، طبعاً استعن بزري لوحة المفاتيح (CTRL+F ) :

       <b:include data='blog' name='all-head-content'/>

2-  اضف الكود التالي بعدها/تحتها مباشرة "

        <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>

        <b:if cond='data:blog.isMobile'>

        <meta content='width=device-width, initial-scale=1.0, user-scalable=0' name='viewport'/>

        <b:else/>

        <meta content='width=1100' name='viewport'/>

        </b:if>

إقرأ المزيد

إضافة ( الصور المنبثقة ) بتقنية Jquery Lightbox في بلوجر

إضافة ( الصور المنبثقة ) بتقنية Jquery Lightbox في مدونات بلوجر

إضافة جميلة للصور المرفوعة على مدونتك في بلوجر، وهي إضفاء لمسة جمالية عند الضغط على الصور في مدونتك .

والطريقة سهلة وهي كالتالي :

انتقل إلى لوحة التحكم الخاصة بمدونتك ، ثم إختر "تصميم" ، ثم "تحريرHTML " وضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم ، وابحث عن الكود التالي :   وأيضاً استعن بزري لوحة المفاتيح CTRL+F 

</body>

 ثم قم بلصق الكود التالي قبله مباشرة :

 <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<style type='text/css'>
    /* jQuery lightBox plugin - Gallery style */
    #gallery {
        background-color: #444;
        padding: 10px;
        width: 520px;
    }
    #gallery ul { list-style: none; }
    #gallery ul li { display: inline; }
    #gallery ul img {
        border: 5px solid #3e3e3e;
        border-width: 5px 5px 20px;
    }
    #gallery ul a:hover img {
        border: 5px solid #fff;
        border-width: 5px 5px 20px;
        color: #fff;
    }
    #gallery ul a:hover { color: #fff; }
    </style>
<script src='http://lightboxabuiyad.googlecode.com/svn/jquery.lightbox-0.4.js' type='text/javascript'/>
<link href='http://dinhquanghuy.110mb.com/lightbox/jquery.lightbox-0.5.css' media='screen' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
$(function() {
$(&#39;a[href$=jpg], a[href$=JPG], a[href$=jpeg], a[href$=JPEG], a[href$=png], a[href$=gif], a[href$=bmp]:has(img)&#39;).lightBox();
});
</script>

 قم بحفظ القلب 

إقرأ المزيد

طريقة اضافة مواضيع ذات صلة فى بلوجر

طريقة اضافة مواضيع ذات صلة فى بلوجر أومواضيع مشابهة ، وهي خاصية إظهار روابط لمواضيع أخرى تحتوي على مادة شبيه ، ويربطها مع بعض كلمة أو جملة أو وصف.

على سبيل المثال : 

إضافة صورة كاتب الموضوع في مدونات بلوجر

يشترك معه في كلمة إضافة وكلمة بلوجر

إضافة مؤثرات على الصور في مودونات بلوجر

نأتي الآن للتطبيق على بركة الله :

انتقل إلى لوحة التحكم الخاصة بمدونتك ، ثم إختر "تصميم" ، ثم "تحريرHTML " وضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم ، وابحث عن الكود التالي :   وأيضاً استعن بزري لوحة المفاتيح CTRL+F

 ]]></b:skin>

ثم ضع قبله مباشرة الكود التالي :

#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
text-decoration : none;
}
#related-posts a:hover {
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjldqJG_shSkypRaNkfj64oXuadp42VYdKkS5I32B66wbO23VKtpcureTRxpPQRd_dDgUL51dppM6X0uwz2GaF5F6RlI-F-AMJTh7bHn-CROxkfDPT4UVRKPXdWlLStXX8gYtwBLNV0iDk/") no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 21px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}

ثم مرة أخرى تحت الكود (  ]]></b:skin> ) ضع تحته مباشرة الكود التالي :

<script src='https://sites.google.com/site/cairopro/related.js' type='text/javascript'/>

ثم أبحث عن الكود التالي :

<div class='post-footer-line post-footer-line-1'>

وضع تحته مباشرة ما يلى :

 

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>مواضيع ذات صلة : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>

    التعديلات التى يمكن أن تقوم بها


* تغير عبارة  " مواضيع ذات صلة " إلى أي عبارة تناسبك
*  تعديل الرقم  5  من الكود أعلاه   ( results=5 ) وذلك لتحديد عدد النتائج التى تظهر من المواضيع المشابهة

وأيضاً الصورة التي تظهر بجانب الموضوع مع ضروة أن تكون بنفس الحجم كي تكون مناسب والصفحة مرتبة :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjldqJG_shSkypRaNkfj64oXuadp42VYdKkS5I32B66wbO23VKtpcureTRxpPQRd_dDgUL51dppM6X0uwz2GaF5F6RlI-F-AMJTh7bHn-CROxkfDPT4UVRKPXdWlLStXX8gYtwBLNV0iDk/

 

إقرأ المزيد

إضافة صورة كاتب الموضوع في مدونات بلوجر

إضافة صورة كاتب الموضوع في مدونات بلوجر ، وهذه الخاصية تضفي شكل جمالي للموضوع، وليكن مقاس الصورة صغيراً ( ) كي لا يأثر على سرعة فتح الصفحات وأيضاً يكون التنسيق أكثر جمالاً .

  

 

 

انتقل إلى لوحة التحكم الخاصة بمدونتك ، ثم إختر "تصميم" ، ثم "تحريرHTML " وضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم ، وابحث عن الكود التالي : ( طبعاً إبحث عن بنسخ السطر الأول الملون بالأحمر ) ، وأيضاً استعن بزري لوحة المفاتيح (CTRL+F ) :

<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

ثم قم بلصق الكود التالي تحتهمباشرة  مع إدخال إسم الكاتب ورابط الصورة الخاصة به في المكان المخصص لهما :

<b:if cond='data:post.author == "إسم الكاتب "'>
<span class="author"><img src="رابط صورة الكاتب"/></span>
</b:if>

طبعاً يمكنك زيادة العدد بتكرار لصق نفس الكود وذلك  إذا كان عندك مؤلفين غيرك في المدونة  في المدونة كما جب أن يكون إسم الكاتب هو نفس الإسم الموجود في خانة  "الاسم المعروض" في لوحة التحكم الخاصة بالمدون.

الآن نقوم بالبحث عن الكود التالي :

]]</b:skin> 

ثم قم بلصق الكود التالي قبله :

.author img{
padding: 0;
 float: left;
 border: none;
margin: 0 10px 10px 0;

}

طبعاً تستطيع تعديل الأبعاد التالية المبينة باللون الأحمر 0 0px 10px 10px لإيجاد المكان المناسب للصورة

ولوضع صورة الكاتب في المكان المناسب لك  على اليمين أو اليسار ما عليك إلا إستبدال الكلمة left  بالكلمة  right
قم بحفظ القالب

إقرأ المزيد

إضافة "إقرأ المزيد في قالب مدونة بلوجر"

 
إضافة "إقرأ المزيد في قالب مدونة بلوجر" 

هذه الإضافة الرائعة تجعل الصفحة الرئيسية أكثر تنسيقاً ، و كذلك تمكنك من أن تستغل المساحة بوضع خيار نشر أكثر من رسالة في الصفحة الأولى ، ولتطبيق هذه الخاصية على قالب بلوجر إن لم تكن موجودة طبعاً فاتبع التالي :

1- انتقل إلى لوحة  التحكم الخاصة بمدونتك واختر "تصميم" ،ثم إذهب لخيار "تحريرHTML " مع التأشير في خانة توسيع قوالب عناصر واجهة المستخدم.
قم بالبحث عن الكود ( </head> ) بالإستعانة بلوحة التحكم بإستخدام الزين (CTRL+F)، ثم قم بلصق الكود التالي بعده مباشرة :

والكود التالي يضع لك ملخص الرسالة أو التدوينة على اليسار والصورة على اليمين

<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 300; /* طول ملخص الموضوع بدون وجود صورة */
summary_img = 250; /*طول ملخص الموضوع مع وجود صورة*/
img_thumb_height = 128; /* عرض الصورة التي تظهر في الملخص*/
img_thumb_width = 128; /*طول الصورة التي تظهر في الملخص */
</script>
<script src='http://abuiyad.googlecode.com/svn/trunk/read-more-left.js' type='text/javascript'/>

 وإذا أردت الملخص على اليمين والصورة على اليسار فضع الكود التالي :

<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 300; /* طول ملخص الموضوع بدون وجود صورة */
summary_img = 250; /* طول ملخص الموضوع مع وجود صورة*/
img_thumb_height = 128; /* عرض الصورة التي تظهر في الملخص*/
img_thumb_width = 128; /*طول الصورة التي تظهر في الملخص */
</script>
<script src='http://abuiyad.googlecode.com/svn/read-more-right.js' type='text/javascript'/>

أما إذا أردت أن تكون الصورة في وسط الرسالة فضع الكود التالي :

<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 300; /* طول ملخص الموضوع بدون وجود صورة */
summary_img = 250; /* طول ملخص الموضوع مع وجود صورة*/
img_thumb_height = 128; /* عرض الصورة التي تظهر في الملخص*/
img_thumb_width = 128; /*طول الصورة التي تظهر في الملخص */
</script>
<script src='http://abuiyad.googlecode.com/svn/trunk/LireLaSuiteCentre0.js' type='text/javascript'/>

الخطوة التالية هي البحث عن الكود التالي ، وطبعاً  بالإستعانة بـ (CTRL+F) :

<data:post.body/>

وقم بإستبداله  بالكود التالي :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'>
<data:post.body/></div><script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'>إقرأ المزيد...</a></span>
<a href='http://abu-iyad.blogspot.com/2010/07/read-more-for-blogger.html' style='display:none;'>Résumé</a><a href='http://abu-iyad.blogspot.com' style='display:none;'>abuiyad</a> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/><a href='http://abu-iyad.blogspot.com' style='display:none;'>abuiyad</a></b:if>

ويمكنك تغيير كلمة إقرأ المزيد بأي جملة تراها مناسبة ، وكذلك يمكنك تغيير أطوال ملخص الموضوع وطول وعرض الصورة بما يناسبك

ثم أحفظ القالب

إقرأ المزيد

إضافة مؤثرات على الصور في مودونات بلوجر

 

إضافة مؤثرات على الصور في مودونات بلوجر ، وهذا التأثير يضفي على تدوينات بلوجر جمالاَ وتأثيراً مريحاً على الناظر ، وكما هو مبين في الصورة هذه:

 

 

 

 

وكما هو معروف إنتقل إلى لوحة التحكم الخاصة مدونتك، ثم إختر "تصميم" ،ثم اختر "تحريرHTML " أشر في خانة توسيع قوالب عناصر واجهة المستخدم، وقم بالبحث عن الكود التالي وطبعاً بإستخدام لوحة زري المفاتيح (CTRL+F ) :

]]></b:skin>

وضع قبله  الكود التالي : 

post img {-webkit-transition:  -webkit-transform .15s linear;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
padding: 5px 5px 5px 5px;
-webkit-transform:  rotate(+2deg);
-moz-transform: rotate(+2deg);
}


.post img:hover {
-webkit-box-shadow:  0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-webkit-transform:  rotate(-1deg);
-moz-transform: rotate(-1deg);
}

 

 

إقرأ المزيد

طريقة تغيير أيقونة ( ) Favicon

طريقة تغيير أيقونة ( ) Favicon التي تظهر في شريط المتصفح على مدونات بلوجر.

ويمكنك طبعاً استبدالها بصورتك الخاصة، والطريقة هي كالتالي :

* ندخل على موقع    iconj.com 

* ثم اختار كلمة Browse وذلك لإختيار الورة من جهازك كأيقونة 

* ثم إضغط على كلمة Upload Now

* سيقوم الموقع برفع الصورة  وتحويلها إلي أيقونة 

* ثم اختار الكود الذي يلي الجملة التالية وهو الخيار الثاني :

 Host It at IconJ.com: Direct Link

وهذا نموذج 

Simply copy and paste the code below in the head of your web pages:

انتقل إلى لوحة التحكم الخاصة بمدونتكوإختر "تصميم" ، ثم "تحريرhtml, وأشر على المربع في خانة توسيع قوالب عناصر واجهة المستخدم ، وقم بالبحث عن الكود التالي:

</head> 

وقم بلصق الرابط الذي نسخناه من الموقع  قبل هذا الكود مباشرة وإحفظ القالب

 

 

إقرأ المزيد