201: October 2014

Friday, October 31, 2014

السلايدر التقني بنسختيه العادية والتلقائية

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

العادية التلقائية

الفرق بين النسختين

الاولى العادية : وهي التي يمكنك اختيار الصور والروابط فيها بشكل يدوي

وهذا يجعلك تتحكم بخصائصها بشكل أكبر

الثانية تلقائية : تأتي بالمواضيع تلقائياً من المدونة من القسم الذي تريده

لكن هذه تحتاج ان تكون مواضيع مدونتك الصور بها بحجم كبير وواضحه حتى تظهر بشكل جيد ولا تبدو مشوهه

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

التنسيق

الرقم 620 هو عرض السلايدر عدله في المرتين
الرقم 350 هو الإرتفاع عدله أيضاً في المرتين
هذا #1980E6 هو لون السلايدر النشط

الإستخدام

استبدل i# برابط الصورة بالمقاس المناسب الذي اخترته لعرض وارتفاع السلايدر
استبدل رمز # بالرابط الذي تريده ان يظهر عند الضغط على الصورة
اما كلمة عنوان الموضوع استبدلها بعنوان مناسب
انت لديك 7 سطور كل سطر يساوي صورة في السلايدر , يمكنك الحذف او يمكنك تكرار الكود البني لتحصل على صور جديدة
في حالة الزيادة او النقصان شريط التنقل السفلي لن يكون مظهره مضبوط لذلك عدل الرقم 87
ان زدت الصور قم بتقليل الرقم حتى تصغر مساحة ازرار التنقل وتستوعب الصور الجديدة دون تشوه
اما ان قللت عدد الصور زد الرقم حتى تتسع الازرار وتكون بمظهر مناسب

ثانياً النسخة التلقائية وهي مشتقة من هذا السلايدر

لتركيبه نفذ نفس خطواط التركيب الموجوده في الموضوع الأصلي ما عدا الخطوة الأخيرة وهي كود التنسيق الذي يضاف فوق الوسم ]]></b:skin>

استبدله بالكود التالي

body#layout #featured {display: none;}
#featured {
background:#222;
height: 350px;
padding: 20px 20px 28px;
width: 620px;
}
.sliderwrapper .contentdiv{position: absolute;visibility: hidden;}
.sliderPostPhoto img {
float: right;
height: 350px;
margin: 0;
width: 620px;
}
.featuredPost {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1Sx5akB_Ksa56whO4Dh43DDegNvDR8ZllfbIItV6fdow14T_Vz1VbKxYsstwfj5GnAUeI6xavdEJkNQyEpS90_vi8rgHqeah0qA54cKnm5humfT8GLd8Sq5_5CBYA8dr_tq5V5RSRnU4/s28/backslide.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
color: #e2e2e2;
float: right;
height: 130px;
margin-top: 219px;
overflow: hidden;
padding: 0 10px;
position: absolute;
width: 600px;
}
.featuredPost h2 { margin: 0 0 5px; padding: 0;}
.featuredPost a {
color: #fff;
font: bold 18px tahoma;
text-decoration: none;
}
.featuredPost a:hover {color:#bbb;}
.featuredPost span { font: 15px serif;}
.prev, .next {display: none;}
.featuredPost p {
font: 15px/1.4em tahoma;
margin: 5px 0 0;
}
.pagination {
margin-top: 350px;
position: absolute;
z-index: 99;
}
.pagination .toc {
background:#ccc;
display: block;
float: right;
font-size: 0;
height: 9px;
margin-left: 1px;
width: 87px;
}
.pagination .toc.selected { background:#1980e6;}

التنسيق

هناك ثلاث أرقام باللون الأحمر هي عرض السلايدر يجب ان تزيدهم بنفس القدر ان غيرت العرض يعني ان زدت واحد 10 تزيد البقية مثله
هناك أربع أرقام باللون الازرق هي ارتفاع السلايدر ايضاً تزيدها بنفس القدر
الرقم 87 عندما تركب المراحل في الموضوع الاصلي ستجعل عدد المواضيع 7 لكي يكون السلايدر مضبوط لكن لو اردت الزيادة
قم بتقليل الرقم 87 بحيث تظهر ازرار التنقل بشكل مناسب وتستوعب مكان المواضيع الزائدة دون تشوه
اما لو اردت مواضيع أقل من 7 فزد الرقم 87 بحيث تتسع المساحة الخاصة بالأزرار ولا يوجد فراغ
وهذا #1980e6 هو لون السلايد النشط
واى سؤال او استفسار حول السلايدر أضفه في تعليق
تحياتي

كيفية اضافة جملة بسم الله في المواضيع

كيفية اضافة جملة بسم الله في اول الموضوع وجملة الحمدلله في اخر الموضوع في مدونات بلوجر

كيفية اضافة جملة بسم الله في المواضيع لمدونات بلوجر - تقريبا كل مسلم يجب الاعتراف بكلمة بسم الله والحمد لله. وعادة ما تستخدم جمل قصيرة مليئة بالمعنى .

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

الان طريقة التركيب

قم بالدخول إلى المدونة
انتقل إلى قالب ثم تحرير
سوف نضيف كلمة بسم الله في اول المشاركات

ابحث عن الوسم <data:post.body/> و اضف الكود التالي تحته

<div style='text-align: center;'><span style='font-size: medium;'><span class='messageBody' data-ft='{"type":3}'><span dir='rtl'>بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم</span></span></span></div><br/>

الان كيفية اضافة كلمة الحمد الله في اخر المشاركات

ابحث عن الوسم <data:post.body/> و اضف الكود التالي تحته

<div align='center'><span style='font-size: medium;'>ٱلْحَمْدُ لِلَّهِ رَبِّ
ٱلْعَٰلَمِين</span></div>

الان سوف تجد هذا الكود مكرر اكثر من مرة في القالب <data:post.body/> عند اضافة كلمة بسم الله سوف تضيفها في اول كود من <data:post.body/> او الثاني و عند اضافة جملة الحمد لله سوف تضيفها في اخر كود و من يواجه مشكلة في كيفية الاضافة يضع مشكلته في تعليق

بالتوفيق

Saturday, October 25, 2014

كيفية تحسين صور المدونة لمحركات البحث و سيو

كيفية تحسين عنوان و وصف الصور لمحركات البحث و سيو تلقائيا

في الدرس الاول من سلسلة دروس سيو تعرفنا على كيفية فحص الموقع و تحسينه لمحركات البحث و سيو اليوم سوف نتعرف على كيفية تحسين عنوان و وصف الصورة في محركات البحث و يتم ذلك بحيث يتم فهرسة الصور على صفحات المدونة الخاصة بك تلقائيا عن طريق محركات البحث مثل جوجل بدلا من اضافة هذا الكود يدويا
<img alt="description of the image" height="125" scr="/image.png" width="125" />
عندما تنشر الصورة مع هذه الطريقة سوف يكون لكل صورة نفس وصف و عنوان الموضوع

لماذا يجب تحسين الصور تلقائيا إلى سيو ؟

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

وإليك كيفية تثبيت كود SEO التلقائي على الصور

ابحث عن الوسم </body> و اضف الكود التالي فوقه

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('img').each(function(){
var $img = $(this);
var filename = $img.attr('src')
$img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
});
});
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('img').each(function(){
var $img = $(this);
var filename = $img.attr('src')
$img.attr('title', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
});
});
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
var scrollTimer = null;
$(window).scroll(function() {
   var viewportHeight = $(this).height(),
       scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
       progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
       distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
    $('#scroll')
        .css('top', distance)
        .text(' (' + Math.round(progress * 100) + '%)')
        .fadeIn(100);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#scroll').fadeOut();
    }, 1500);
});
//]]>
</script>

الان كل صورة على المدونة سوف تكون محسنة بالنسبة لسيو تلقائيا انتظرونا في الدرس الثالث من سلسلة دروس سيو

يمكنك ايضا مشاهدة : افحص موقعك و اعرف مدى توافقه مع سيو

بالتوفيق

Thursday, October 23, 2014

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

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

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

معاينة

طريقة التركيب

قم بالدخول إلى المدونة
انتقل إلى القالب
الان اضغط على تحرير

ابحث عن الوسم <data:post.body/> واضف الكود التالي تحته

<b:if cond='data:blog.pageType == "item"'>
<style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
@import "//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css";
#buttons {
    width: 475px;
    overflow: hidden;
    margin: 70px auto 0;
}

.button {
    float: right;
    margin-left: 10px;
    width: 110px;
    background: #eaeaea;
    border: 1px solid #cbcbcb;
    border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    box-shadow: inset 0 1px 0px #fdfdfd;
    padding: 15px 5px 5px;
    box-sizing: border-box;
}

.button i {
    background: #c5c5c5;
    color: #eaeaea;
    text-align: center;
    line-height: 40px;
    font-size: 18px;
    width: 40px;
    height: 40px;
    display: block;
    margin: 0 auto 10px;
    border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
}

.social-container {
    text-align: center;
    text-transform: uppercase;
    font-size: 12px;
    color: #656565;
    line-height: 54px;
    font-family: Open Sans;
    background: #d8d8d8;
    width: 100%;
    height: 45px;
    box-shadow: inset 0 -2px 4px #c7c7c7;
    border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    position: relative;
    overflow: hidden;
}

.slide, .button i {
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
}

.slide {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
    border-radius: 0 0 22px 22px;
    -o-border-radius: 0 0 22px 22px;
    -ms-border-radius: 0 0 22px 22px;
    -moz-border-radius: 0 0 22px 22px;
    -webkit-border-radius: 0 0 22px 22px;
/* top fix */
    transition: all 0.2s ease-in-out;
    position: absolute;
    height: 45px;
    width: 100%;
    top: -35px;
}

.slide::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 10px;
    box-shadow: inset 0 1px 0px #fdfdfd, 0 3px 0px #cdcdcd;
    border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    background: #eaeaea;
    border: 1px solid #cbcbcb;
    box-sizing: border-box;
    bottom: 0;
}

.button:hover .slide {
    top: 0;
    border-radius: 3px;
}

.linkedin .IN-widget, .button iframe, .google #___plusone_0 {
    top: -2px;
    position: relative;
}

.twitter iframe {
    width: 79px !important;
}

.google #___plusone_0 {
    width: 60px !important;
}

.button.facebook:hover i, .facebook .slide {
    background: #305c99;
    color: white;
}

.button.twitter:hover i, .twitter .slide {
    background: #00cdff;
    color: white;
}

.button.google:hover i, .google .slide {
    background: #d24228;
    color: white;
}

.button.linkedin:hover i, .linkedin .slide {
    background: #007bb6;
    color: white;
}

.button.linkedin {
    margin-left: 0;
}

.credit {
    padding-right: 10px;
    font-size: 14px;
    color: #172b36;
    position: absolute;
    bottom: 0;
    text-align: center;
    font-family: Open Sans;
}

.credit a {
    border-bottom: 2px solid #dc4106;
    text-decoration: none;
    padding: 0 0 2px;
    color: #172b36;
}
</style>
<div id="buttons">
<div class="facebook button">
<i class="icon-facebook"></i>
<div class="social-container fb">
<div class="slide">
   <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Freference%2Fplugins%2Flike&send=false&layout=button_count&width=90&show_faces=false&font&colorscheme=light&action=like&height=21&appId=568581339861351" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:81px; height:21px;" allowtransparency="true">
   </iframe>
</div>
   فيس بوك
</div>
</div>
<div class="twitter button">
<i class="icon-twitter"></i>
<div class="social-container tw">
<div class="slide">
   <a href="https://twitter.com/share" class="twitter-share-button" data-via="mariuCSS">
   غرد </a>
   <script>
    !function(d,s,id){
      var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
      if(!d.getElementById(id)){
        js=d.createElement(s);
        js.id=id;
        js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
</script>
</div>
   تويتر
</div>
</div>
<div class="google button">
<i class="icon-google-plus"></i>
<div class="social-container tw">
<div class="slide">
   
   <div class="g-plusone" data-size="medium">
   </div>
   
   <script type="text/javascript">
    (function() {
      var po = document.createElement('script');
      po.type = 'text/javascript';
      po.async = true;
      po.src = 'https://apis.google.com/js/plusone.js';
      var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(po, s);
    }
    )();
</script>
</div>
   جوجل بلس
</div>
</div>
<div class="linkedin button">
<i class="icon-linkedin"></i>
<div class="social-container tw">
<div class="slide">
   <script src="//platform.linkedin.com/in.js" type="text/javascript">
lang: ar_EG
   </script>
   <script type="IN/Share"></script>
</div>
   لينكدين
</div>
</div>
</div>

أهم الإعدادات

استبدل developers.facebook.com مع اسم مستخدم صفحة الفيسبوك الخاصة بك.
او يمكنك تركيب الزر عن طريق فيس بوك فهذا افضل تجنبا للمشاكل
لتغيير الخط استبدل Open+Sans ستجدها مكررة اكثر من مرة استبدلها كلها بالخط المثبت في مدونة

مع القليل من الخبرة في CSS يمكنك تنسيق الصناديق لتناسب مدونتك اكثر

يمكنك ايضا مشاهدة : اضافة صناديق الاشتراك اسفل الموضوع في بلوجر
                          اضافة ازرار التواصل الاجتماعي في الشريط الجانبي
                اضافة صناديق المشاركة و الإعجاب اسفل مواضيع بلوجر
                        اضافة ازرار مشاركة مواقع التواصل الاجتماعي الاحترافية 2014

بالتوفيق

Wednesday, October 22, 2014

افحص موقعك و اعرف مدى توافقه مع سيو

افحص موقعك و اعرف توافقه مع سيو و محركات البحث مثل جوجل, ياهو, بينج و طرق لحل مشاكله

يُعتبر تحسين الموقع وملاءمته لمحركات البحث أو ما يُعرف اختصارا بـ SEO، من أهم الأمور التي يستجيب لها أصحاب المواقع، وخاصةً كون محركات البحث هي الأساس وراء معظم الزيارات التي تصل إلى المواقع. والكثير من المدونين يرغبون ان تكون مدوناتهم افضل شيء من ناحية سيو و محركات البحث لذلك اليوم في هذه التدوينة سوف نقدم لكم موقع اكثر من رائع يقوم بفحص موقعك من الـ 0 حتى 100% ليرى قوة توافق موقعك مع سيو و محركات البحث مثل جوجل و ياهو و بينج و ايضا يعطيك الحلول لكيفية حل مشاكل القالب و تحسينه لمحركات البحث يمكن الاستعانة بموقع وهذا اول درس من سلسلة دروس سيو

دخول الموقع

كيفية استخدام الموقع

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

شرح القائمة :

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

Mobile : و هي تعطيك مدى توافق موقعك او مدونتك مع الاجهزة الكفية و اللوحية

Technologies : و هي تعطيك معلومات عن المدونة من السرعة و سيرفر المدونة ... إلخ

Social : تعطيك معلومات عن الصفحات المرتبطة بالموقع مثل فيس بوك, جوجل بلس, تويتر ... إلخ

Local : على حسب ما فهمته و هي اضافة صفحاتك المذكورة في مربع البحث

Visitors : تعطيك معلومات عن الزوار إن كان منخفض او مرتفع و ترتيبك في اليكسا و اكثر بلد يأتي منها زوار.

هذا كل شيء تقريبا و انتظرونا في سلسلة دروس سيو

بالتوفيق

المعلومات الأساسية للتدوينات اضافتها والتحكم بها

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

أولا الأكواد

اسم الكاتب

<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorlabel/>
<b:if cond='data:post.authorProfileUrl'>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
<a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span>
</a>
</span>
<b:else/>
<span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
<span itemprop='name'><data:post.author/></span>
</span>
</b:if>
</b:if>
</span>

تاريخ النشر

<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestamplabel/>
<b:if cond='data:post.url'>
<meta expr:content='data:post.canonicalUrl' itemprop='url'/>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span>

الأقسام أو التسميات

<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postlabelslabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>
</span>

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

لو اردت اضافتهم تحت عنوان الموضوع اضفهم تحت الكود التالي

وان اردتهم في نهاية الموضوع اضفهم تحت الكود التالي

لكن هناك توضيحين

الاول هو الكود الاحمر المكرر في الثلاث أكواد الاولى

هذا يخص الكلمة التي تظهر بجانبه

انت عندما تدخل لصفحة التخطيط وتحرر صندوق الرسائل لتفعيل تلك الاجزاء بجانب كل واحد توجد كلمة يمكنك تغييرها

مثلا بجانب الكاتب توجد كلمة بقلم او قد تكون كلمة وانت تغيرها لكن البعض لا يريد وجود الكلمة اساسا هنا تحذف الجزء الأحمر

أما الثاني هو الجزء الأخضر هذا سنسميه المعرف class

وسنتعرف على استخدامه في الجزء التالي وهو

التنسيق

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

كل ما عليك هو ان تضيف الكود التالي فوق الوسم ]]></b:skin>

.class {
background-image: url("#");
background-position: right 1px;
background-repeat: no-repeat;
padding-right: 20px;
float:right;
}

استبدل المعرف class بمعرف الجزء الذي تريد تنسيق يمكنك تكرار الأمر ان كنت تريد وضع اكثر من كود
رمز # استبدله برابط أيقونة ويمكنك ان تجد أيقونات كثيرة بالبحث في جوجل
الكلمة right معناها ان تلك الأيقونة ستكون ناحية اليمين اما الرقم 1 ستكون الأيقونة مبتعده بنسبة 1 بيكسل من الأعلى يمكنك زيادته او حتى جعلها بالسالب -1 بحسب الأيقونة لديك وكيف سيكون مظهرها بجانب الكود
الرقم 20 هو مدى بعد الكود من الأيقونة توضيح لو ستستخدم ايقونة بمقاس 16x16 معناه ان عرض تلك الأيقونة 16 بيكسل هنا لو لم نضع مسافة فراغ ستكون الكلمة مثلا لو اسم الكاتب سيكون ظاهر فوق الأيقونة وليس جانبها نحتاج لعمل فراغ حتى يكون بجانبها والرقم 20 هو هذا الفراغ يمكنك زيادته او انقاصه بحسب حجم الايقونة لاتي ستستخدمها
الكلمة right تحدد اتجاه الاكواد مثلا لو نريد اضافة الأقسام واسم الكاتب ناحية اليمين سنستخدمها كما هي
ومثلا لو اردنا التعليقات ناحية اليسار سنستخدم مع معرف التعليقات بدلا منها كلمة left
وهذا مثال ناتج من تطبيق الدرس والتنسيق

وبالتوفيق

Tuesday, October 21, 2014

حذف عبارة تدعمه بلوجر أو آداة الإسناد Attribution

كيفية حذف عبارة تدعمه بلوجر أو آداة الإسناد بالطريقة الصحيحة

معظم القوالب الجديدة المتوفرة لم تعد تشمل الإسناد " تدعمه بلوجر " و إذا كنت لا تزال تستخدم قوالب بلوجر الافتراضية سيتم تثبيت اضافة الإسناد تلقائيا في المدونة و لا يمكن إزالتها يدويا.و لكن هناك مدونين لا يزالو يرغبون في استخدام قوالب بلوجر الافتراضية ولكنهم يريدون إزالة الإسناد " تدعمه بلوجر " من القالب لذلك درسنا اليوم سوف يكون عن كيفية حذف عبارة تدعمه بلوجر او اداة الإسناد Attribution

طريقة إزالتها

توجه إلى بلوجر >> قالب > تحرير HTML

ابحث عن الوسم ]]></b:skin> و اضف الكود التالي فوقه

#Attribution1 {
height:0px;
visibility:hidden;
display:none;
}

بعد اضافة هذا الكود قم بحفظ القالب و سوف يتم اخفاء الاضافة من القالب اتمنى ان اكون وفقت في شرحي

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

بالتوفيق

Monday, October 20, 2014

حذف ايقونات التحرير السريع بالطريقة الصحيحة

كيفية حذف ادوات التحرير السريع او بالعامية الكماشة و مفك البراغي بالطريق الصحيحة

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

طريقة إزالتها

توجه إلى بلوجر >> قالب > تحرير HTML

ابحث عن الوسم ]]></b:skin> و اضف الكود التالي فوقه

.quickedit{
display:none;visibility:hidden
}

الان قم بحفظ القالب

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

بالتوفيق

Sunday, October 19, 2014

اضافة نسبة مئوية بجانب شريط التمرير في بلوجر

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

معاينة

طريقة التركيب

ابحث عن الوسم ]]></b:skin> و اضف الكود التالي فوقه

#scroll {
display:none;
position:fixed;
top:0;
right:15px;
z-index:500;
padding:3px 8px;
background-color:#369fcf;
color:#fff;
border-radius:3px;
font-size:14px;
}
#scroll:after {
content: " ";
position: absolute;
top:50%;
right:-10px;
height:0;
width:0;
margin-top:-6px;
border:6px solid transparent;
border-left-color:#369fcf;
}

اهم الملاحظات حول الكود

لتغيير لون الخلفية التي بالازرق استبدل #369FCF ستجد الكود مكرر اكثر من مرة استبدلها كلها
لتغيير حجم الخط استبدل font-size:14px استبدل بالرقم الذي يناسبك

المرحلة الثانية

الان ابحث عن الوسم </head> و اضف الكود التالي بعده

<div id='scroll'></div>

المرحلة الثالثة و الاخيرة

الان ابحث عن الوسم </body> و اضف الكود التالي فوقه

<script type='text/javascript'>
//<![CDATA[
var scrollTimer = null;
$(window).scroll(function() {
var viewportHeight = $(this).height(),
scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
$('#scroll')
.css('top', distance)
.text(' (' + Math.round(progress * 100) + '%)')
.fadeIn(600);
if (scrollTimer !== null) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(function() {
$('#scroll').fadeOut(600);
}, 1000);
});
//]]>
</script>

عند اكمال هذه الخطوات سوف يتم تفعيل النسبة المئوية بجانب شريط التمرير

في امان الله

Saturday, October 18, 2014

قالب G Vusion معرب و مطور

قالب فيجن الإحترافي معرب و متوافق مع جميع الشاشات و الاجهزة و صديق لمحركات البحث مثل جوجل, ياهو, سيو,بينج

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

معاينة تحميل

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

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

يوجد مع ملف القالب الاضافات و كيفية التعديل على القالب اي سؤال حول القالب بتعديل اي شيء ضعه بتعليق

بالتوفيق

شريط آخر الأخبار المتحرك مع الإعداد والتنسيق

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

معاينة

طريقة التركيب أضف الكود التالي داخل آداة HTML/JavaScript

أهم الإعدادات

استبدل http://cnmu.blogspot.com برابط مدونتك

الرقم 80 هو سرعة الشريط كلما قل كلما كان اسرع كلما زاد اصبح بطئ

ان اردت فتح الروابط في نفس الصفحة استبدل هذه الكلمة yes بهذه no

هذا 10 هو عدد الموضوعات

أهم التنسيقات

هذا #fff لون خلفية الشريط البيضاء

هذا #008EFA لون خلفية كلمة آخر الأخبار والتي يمكنك تغييرها هي الأخرى

وهذا #fff هو لون خط كلمة آخر الأخبار

الرابط الزهري هو صورة جديد يمكنك استبداله برابط صورة أخرى

هذا 008EFA هو لون الروابط ملحوظة لا نضيف للون هنا رمز #

هذا CD0317 هو لون الروابط عند تمرير الماوس وايضاً لا نضيف له الرمز #

هذا tahoma هو نوع الخط يمكنك استبداله بخط آخر مخصص

الرقم 14 هو حجم الخط الاول خاص بكلمة آخر الأخبار والثاني خاص بالروابط

هذا 30 هو بعد الخط من الاعلى للكملة وهذا 28 للروابط

هام : في حالة اردت عرض الأخبار من قسم معين

استبدل كلمة default بهذه الكلمة default/-/# مع تعديل رمز الـ # بإسم القسم الذي تريد

هذه هي اهم الإعدادات والتنسيقات وتجربه موفقة بإذن الله