تجريب قالب هادي |لخدمات بلوجر والفوتوشوب

‏إظهار الرسائل ذات التسميات شروحات بلوجر. إظهار كافة الرسائل

طريقة إزالة التمدد فى قوالب بلوجر

السلام عليكم ورحمة الله وبركاتة

نتحدث اليوم عن مشكله تحدث عند البعض عند تركيب بعض قوالب بلوجر وهى " تمدد القوالب " بمعنى تكون مساحة فارغة بالجنب أو يكون جزء من المدونة وهذا ما سنوضحة من خلال هذة التدوينة البسيطة حل هذة المشكله بسيط جداً وهو إضافة كود بسيط جداً لكى تختفى هذة المشكلة : إبحث عن هذا الوسم ]]></b:skin> وضع الكود التالى قبله / أعلاه

html {overflow-x: hidden;}

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

شاهد الصورة السابقة لأحد المدونات القالب به 2 سيد بار + المحتوى الجزء المحدد باللون الأحمر مساحة كبيرة وعلى اليسار السيد بار لم يظهر كاملاً ليست المشكله بالسيد بار 2 ولكن فى تقليص المساحة فى هذة المشكله تحتاج لتقليل المساحة قليلاً تقليل عرض المواضيع أو السيد بار بالجهة اليسرى .

شكراً لكم وأتمنى التوفيق للجميع

تابع القراءة

طريقة تغيير شكل عرض مواضيع المدونة

شروحات بلوجر تعليق 0

السلام عليكم ورحمة الله وبركاتة

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

مهم جداً قبل البدء فى الشرح:

1- حفظ نسخة إحتياطية من القالب فى حالة وجود اى أخطاء يمكنك إستعادة القالب كما كان من قبل

2- إذهب إلى صفحة تحرير القالب

3- بإستخدام CTRL+F سنبحث عن هذا الوسم </head> ونضع الكود التالى قبلة مباشرة

<script type='text/javascript'>
posts_no_thumb_sum = 100;
posts_thumb_sum = 100;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID, pURL, pTITLE){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'"><img src="'+img[0].src+'" /></a></span>';
summ = posts_thumb_sum;
}
else {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYVU9UCMNtA7KQTaM4W85p9FcYdarhgCSnmKOBFSv55ENzX6595KdN9EvE5jgwnw4jGi9iGI6NO-D4ej_B5Qmus5tWhhyphenhyphenVYaVWMRTOf2D28_Hrkm27x6Vr-Ty15NgqJle10VfyInPxIDCD/s1600/sorry-image-not-available.png" style="margin-top: -30px;" /></a></span>';
summ = posts_thumb_sum;
}
var summary = imgtag + '<a href="'+ pURL +'"><div class="post-summary-text">' + removeHtmlTag(div.innerHTML,summ) + '</div></a>';
div.innerHTML = summary;
}
//]]>
</script>

4- إبحث عن هذا الوسم <data:post.body/> ستجد 3 من هذا الوسم ربما يكون الثانى أو الثالث المقصود عندما تجد الوسم المناسب ضع الكود التالى أسفلة مباشرة

<b:if cond='data:blog.pageType != "static_page"'>
    <b:if cond='data:blog.pageType != "item"'>
        <div expr:id='"summary" + data:post.id'>
            <data:post.body/>
        </div>
        <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>","<data:post.url/>");</script>
        <b:if cond='data:post.allowComments'>
            <a class='comment-bubble' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
                <data:post.numComments/>
            </a>
        </b:if>
    </b:if>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
    <data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
    <data:post.body/>
</b:if>

5- الآن عليك بإختيار الشكل المناسب إبحث عن هذا الوسم </head> وضع كود الشكل الذى تود تركيبة قبلة / أعلاه

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType!= "item"'>
<style>
#blog-pager {
clear:both;
}
.post {
height: auto;
width:30.8%;
overflow: hidden;
display:inline-block;
text-decoration:none;
float:left;
margin:0 1.1% 2%;
padding: 0px !important;
}
h3.post-title a {
font-size:75%;
font-family: 'Open Sans Condensed', sans-serif;
text-transform:uppercase;
padding:0;
color:#444;
}
h3.post-title {
height: 26px;
text-align:center;
width:100%;
margin:0!important;
padding-bottom: 4%;
}
.date-header {
display: none;
}
.post-body a {
text-decoration: none;
}
.posts-thumb {
width:100%!important;
height:190px!important;
overflow:hidden;
clear:both;
}
.post-body img {
display:block;
width:100%!important;
height:auto!important;
max-width:800px!important;
max-height:400px!important;
min-width:190px!important;
min-height:190px!important;
border:none;
outline:none;
position:relative;
margin: 0px;
padding:0;
}
.post-summary-text {
color:#777;
font-size:100%!important;
font-family: 'Open Sans Condensed', sans-serif;
text-align:center;
clear:both;
overflow:hidden;
margin:5px 0 0;
padding:7% 10%;
}
a.comment-bubble {
color:#fff;
text-decoration:none;
font-size:100%;
font-weight: bold;
right:10px;
position:absolute;
top:165px;
text-shadow:1px 2px 1px #333;
font-family: 'Open Sans Condensed', sans-serif;
}
a.comment-bubble:before {
content: "Comments: ";
}
.post-header,.post-footer {
display:none;
}
</style></b:if></b:if>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType!= "item"'>
<style>
#blog-pager {
clear:both;
}
.post {
height:auto;
width:31%;
display:inline-block;
text-decoration:none;
float:left;
margin:0 1.1% 2%;
padding:0!important;
}
h3.post-title a {
font-size:75%;
font-family: 'Open Sans Condensed', sans-serif;
text-transform:uppercase;
color:#111;
padding:0;
}
h3.post-title {
text-align:center;
height:22px;
position:absolute;
bottom:23%;
width:100%;
z-index:101;
overflow:hidden;
margin:0!important;
padding:10px 0;
}
.date-header {
visibility:hidden;
height:0!important;
width:0!important;
margin:0!important;
padding:0!important;
}
.posts-thumb {
width:100%!important;
height:190px!important;
overflow:hidden;
clear:both;
border-bottom:3px solid #00C8BD;
border-top:3px solid #558ABB;
}
.posts-thumb:hover {
border-top:3px solid #FF664E;
border-bottom:3px solid #FEBE36;
}
.post-body {
border-radius:2px;
box-shadow:0 0 6px 1px rgba(0,0,0,0.1);
position:relative;
height:auto;
}
.post-body a {
text-decoration: none;
}
.post-body img {
display:block;
width:100%!important;
height:auto!important;
max-width:800px!important;
max-height:400px!important;
min-width:190px!important;
min-height:190px!important;
border:none;
outline:none;
position:relative;
margin: 0px;
padding:0;
}
.post-summary-text {
color:#555;
background:#f5f5f5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyYWifRdTumjygcLE6W4ggNOO5Cu3kuiVKiRqEu4vmjkrhKh169m8wLA3MG6MMnVWv3gSZScR-nmJL2oOrIvt5buxR-Zqv1PDXbF8BwD7kZ4invl2mmQLgVmNCh18-T3JIK1Q6fFYh4EsU/s1600/blueprint.png);
font-size:100%!important;
font-family: 'Open Sans Condensed', sans-serif;
text-align:center;
clear:both;
overflow:hidden;
margin:5px 0 0;
padding:17% 10% 6%;
}
a.comment-bubble {
color:#fff;
text-decoration:none;
font-size:110%;
right:10px;
position:absolute;
top:165px;
text-shadow:1px 2px 1px #333;
font-family: 'Pacifico', cursive;
}
a.comment-bubble:before {
content: "Comments: " url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiglvxA0RNwvUYC8rav9rS2EgcZhbyJUBP_8zF_4WCiyF0xN-3NdBlhuHOYVN0jKS5qm2leDk__X-TMfR4UgudfW-3KZB4RH9sxSeCgvqOkVcv5WeUyM-cTFB_5Dr0aDZ9HkuWfs5zKhKYW/s1600/heart-active.png);
}
.post-header,.post-footer {
display:none;
}
</style></b:if></b:if>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'/>

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType!= "item"'>
<style>
#blog-pager {
clear:both;
}
.post {
height:auto;
width:31%;
display:inline-block;
text-decoration:none;
float:left;
margin:0 1.1% 2%;
padding:0!important;
}
h3.post-title a {
font-size:95%;
font-family: 'Open Sans Condensed', sans-serif;
text-transform:uppercase;
color:#fff;
padding:0;
text-shadow: 2px 2px 3px #222;
}
h3.post-title {
height: 22px;
text-align:center;
position:absolute;
top:1%;
width:100%;
z-index:101;
overflow:hidden;
margin:0!important;
padding:10px 0;
}
.date-header {
visibility:hidden;
height:0!important;
width:0!important;
margin:0!important;
padding:0!important;
}
.posts-thumb {
width:100%!important;
height:190px!important;
overflow:hidden;
clear:both;
}
.post-body {
border-radius:2px;
box-shadow:0 5px 4px 1px rgba(0,0,0,0.1);
position:relative;
overflow: hidden;
}
.post-body a {
text-decoration: none;
}
.post-body img {
display:block;
width:100%!important;
height:auto!important;
max-width:800px!important;
max-height:400px!important;
min-width:190px!important;
min-height:190px!important;
border:none;
outline:none;
position:relative;
margin: 0px;
padding:0;
}
.post-summary-text {
cursor: pointer;
background-color: rgba(44, 77, 163, 0.8);
color:#fff;
font-size:120%!important;
font-family: 'Open Sans Condensed', sans-serif;
clear:both;
overflow:hidden;
padding:25% 10% 0%;
left: 0;
position: absolute;
text-align: center;
vertical-align: bottom;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
top: 0;
transform: scale(1);
opacity: 0;
z-index: 10;
height: 100%;
transition: all 300ms ease-out 0s;
}
.post-summary-text:hover {
opacity: 1;
}
a.comment-bubble {
color:#fff;
text-decoration:none;
font-size:100%;
width: 100%;
text-align: center;
position:absolute;
top:165px;
left: 0px;
text-shadow:1px 2px 1px #333;
font-family: 'Pacifico', cursive;
z-index: 122;
}
a.comment-bubble:before {
content: "Comments: ";
}
.post-header,.post-footer {
display:none;
}
</style></b:if></b:if>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'/>

6- إضغط على زر المعاينة وشاهد التعديلات قم إحفظ القالب وأى إستفسار لا تتردد فى كتابتة

والسلام عليكم ورحمة الله وبركاتة

تابع القراءة

الشرح الكامل للنشر التلقائى على السوشيال ميديا

شروحات بلوجر تعليق 0

السلام عليكم ورحمة الله وبركاتة

هل لديك موقع / مدونة وتريد نشر كل ما هو جديد على مواقع السوشيال ميديا تلقائى بدلاً من الطريقة العادية هذا ما سنتكلم عنه من خلال هذة التدوينة البسيطة سنشرح لك كيفية النشر التلقائى لتدويناتك على تويتر وفيس بوك والآن دعنا نشرح لك الطريقة بسيطة وسهلة جداً .

اولاً: سنتوجه إلى هذا الرابط feedburner.google.com

والآن إختار إضافة تغذية جديدة

قم بكتابة رابط موقعك فى المكان المخصص

والآن ناتى للخطوة الرابعة وهى تفعيل التغذية وإضافة روابطك على المواقع الإجتماعية مثل ما هو موضح بالصورة التالية

وهنا نكون إنتهينا من الشرح نتمنى الإستفادة للجميع وإذا كان هناك أى مشكلة لديك قم بوضعها

تابع القراءة

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

شروحات بلوجر تعليق 0

بسم الله الرحمن الرحيم / السلام عليكم ورحمة الله وبركاتة

درسنا اليوم هو شرح تركيب أداة فحص البيج رانك لمدونتك وهذة الأداة هى مقدمة من الموقع الشهير "checkpagerank.net" وهو متخصص فى فحص البيج رانك وتركيب هذة الأداة فى مدونتك ستكون خدمة مميزة جداً لانها توفر لمتصفح مدونتك أن يفحص البيج رانك الخاص بموقعه أو أى موقع آخر والأداة تم التعديل عليها من قبل "هادى ستور" وتحسين مظهرها والآن مع شرح تركيب الأداة ومعلومات أكثر عن البيج رانك.

ما هو البيج رانك؟

معاينة مباشرة للأداة

إفحص بيج رانك موقعك !

فحص البيج رانك من خلال موقع - CheckPageRank.net

شرح تركيب الأداة:

لوحة التحكم / الصفحات / تابع الصورة التالية

مثل ما هو موضح بالصورة السابقة ستقوم بالضغط على "صفحة جديدة" ثم تابع الصورة التالية

*بعد ذلك ستقوم بإختيار محرر HTML للصفحة كما هو موضح وتابع معى

ستقوم بتحديد هذا السطر وإستبدالة بالكود التالى

ستقوم بعمل هذة الإعدادات كما موضح بالصورة السابقة ثم تحفظ الصفحة بعد وضع الكود التالى

كود الأداة

<div dir="rtl" style="text-align: right;font-family:Electrolize,ge_dinar_tworegular;" trbidi="on">
<div style="text-align: center;">
<table cellspacing="1" style="border: 1px solid rgb(221, 221, 221); height: 78px; margin: 4px; text-align: center; width: 638px;"><tbody>
<tr><td align="center" style="background: #424242; vertical-align: middle;"><span style="color: #FF9900; font-size: 11px; margin: 0px;"><b>إفحص بيج رانك موقعك !</b></span></td></tr>
<tr><td style="background: #fff; border: 1px solid #E9E9E9;font-family:Electrolize,ge_dinar_tworegular; padding: 10px;font-family:Electrolize,ge_dinar_tworegular;"><form action="http://checkpagerank.net/index.php" method="get" style="margin: 0px; padding: 0px;" target="_blank">
<input name="action" type="hidden" value="docheck" /><input maxlength="150" name="name" style="font-size: 13px; margin-right: 10px; padding: 1px 2px 2px 3px; width: 250px;text-align:left;" type="text" value="//:https" /><input name="submit" style="font-family:Electrolize,ge_dinar_tworegular;font-size: 11px; padding: 1px;margin-right:5px; width: 80px;font-family:Electrolize,ge_dinar_tworegular;cursor: pointer;" type="submit" value="إفحص" /></form>
</td></tr>
<tr><td align="center"><span style="color: #aaaaaa; font-size: 11px; margin: 0px; padding: 3px 0px 1px 0px;"><a href="http://checkpagerank.net/" target="_blank">فحص البيج رانك من خلال موقع - CheckPageRank.net</a></span></td></tr>
</tbody></table>
<br /></div>
</div>

تخصيص الكود : اللون فى الكود السابق هو لإسم الخط الخاص بالكود إذا كنت تستخدم خطوط الويب إستبدلة بالخط الخاص بك

تابع القراءة

شرح تغيير شكل الماوس فى مدونتك

شروحات بلوجر تعليق 0

السلام عليكم ورحمة الله وبركاتة

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

ما عيوب تخصيص شكل المؤشر؟

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

أين أجد صور هذة المؤشرات بأكثر من شكل مختلف؟

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

شرح تغير شكل المؤشر:

تحرير Html >> البحث عن هذا الوسم ]]></b:skin> وضع الكود التالى فوقة / أعلاة مباشرة

body{
cursor: url(add your url here.png), auto;
}

والآن قم بحفظ القالب أى إستفسار لا تتردد فى التعليق أو قم بزيارة هذة الصفحة من هنا إذا كان لديك إستفسار آخر من هنا

تابع القراءة

كيف تخصص دومين لمدونتك عن طريق جودادى

شروحات بلوجر تعليق 0

بسم الله الرحمن الرحيم | السلام عليكم ورحمة الله وبركاتة

اهلاً بكم متابعى هادى ستور الكرام كثير منا يحاول تغيير دومين بلوجر وربطة بآخر مدفوع ولكن كيف ذلك ؟ فى هذة التدوينة شرح بسيط لتركيب دومين مدفوع من موقع (جودادى) وهو موقع مشهور جدا ومعروف والآن دعنا نشرح لك الطريقة.
للتعرف أكثر على جودادى لزيارة الموقع