اضافة عرض المواضيع الخاصة بعرب ويب | Blogger

اضافة عرض المواضيع الخاصة بعرب ويب 

وهي اضافة مميزة تجعل مواضيع تظهر بطريقة أحترافية في السايد بار

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

الأضافة مكونة من كود HTML

جميعنا نعرف أن أكواد HTML توضع في التخطيط

للتذكير فقط يجب أن تركز جيداً بأماكن الأكواد التي سنتخدمها في التخطيط 

وقبل كل شئ قم بأخذ نسخة أحتياطية للقالب لتجنب الأخطاء 

الان نبدأ بكود HTML قم بنسخ هذا الكود ووضعه في التخطيط:

<style>
.item-widget-member {
max-width: 100%;
height: 268px;
position: relative;
color: #FFF;
}
.btn.btn-primary:hover {
  background: rgba(68, 68, 68, 1);
  color: #F4F4F4!important;
}
.item-widget-member img {
width: 100%;
height: 270px;
}
.item-widget-member .group-inside {
position: absolute;
top: 27px;
right: 0px;
padding: 20px;
}
.item-widget-member h3 {
font-size: 14px;
  color: #FFFFFF;
  margin: 0;
  font-family: droid arabic kufi;
  background: rgba(231, 76, 60, 0.87);
  padding: 8px;
}
.item-widget-member p {
margin-bottom: 24px;
font-size: 12px;
line-height: 20px;
font-family: Electrolize,ge_ss_threeregular;
color: #EFEFEF;
background: #444;
  padding: 4px;
  opacity: .95;
}
.btn.btn-primary{
background: #E74C3C;
  color: #fff!important;
  font-family: droid arabic kufi;
  padding: 8px;
  font-size: 12px;
  border-radius: 2px;
  display: inline-flex;
}


</style>
<div class="item-widget-member">
        <div class="thumb">
<a href="#"><img src="صورة للموضوع " /></a></div>
<!-- .thumb -->
        <div class="group-inside">
         <div class="info">
<h3>
عنوان الموضوع</h3>
<p>
وصف صغير للموضوع</p>
<a rel="nofollow" href="رابط الموضوع" class="btn btn-primary btn-sm" target="_blank">المزيد . . .</a>   </div>
</div>
</div>

تغييرات الكود:

صورة للموضوع= صورة التي تريد عرضة (كصورة للقالب أو صورة الإضافة التي تريد عرضها)
عنوان الموضوع= عنوان الذي تريد عرضة ( كعنوان القالب او عنوان الأضافة التي تريد عرضها)

وصف صغير للموضوع=وصف التي تريد عرضة (كوصف القالب أو وصف الأضافة التي تريد عرضها)

رابط الموضوع= رابط الموضوع الذي تريد عرضة(كرابط القالب أو رابط الأضافة التي تريد عرضها)

أما كلمة ( المزيد . . . ) فلا تغيرها فهي الزر الذي يضغط علية الزائر للأنتقال الى الموضوع  

التحكم بجميع صفحات المدونة بالتفصيل

أولا سأشرح قليلاً لماذا سنتحكم بصفحات المدونة

جميعنا نود ان نضيف الأدوات في صفحات معينة ونخفي الأدوات في صفحات أخرى 

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

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

ومن هنا ستعرف كيفية التحكم في الصفحات لجعل الأدوات تظهر فيها ونخفي مانريد من أدوات

التحكم بصفحات المدونة بالتفصيل وأستخدام جميع الصفحات بشكل مباشر

هذه الصفحات التي سنتحكم بها ونظهر الأدوات ونخفي بعضاً منها

الصفحة الرئيسية - الصفحات الثابتة - صفحات الأرشيف - صفحات البحث - صفحات التسمية - صفحات المواضيع

صفحات الخطأ Error 

بدايتاً سنتكلم عن  =! و  == وماهي مهماتهما في الأكواد التي سنستخدمها

كود =! وهو يفصل بين الصفحات ولايسمح للأدوات بالظهور بنفس الصفحة

مثال على ذالك:

<b:if cond='Pages != &quot;Posts&quot;'> 

Posts = تعني المواضيع
= تعني الصفحات

كما تلاحظون كود  =! موجود بين Pages و Posts 
هذا يعني بأن الأداة الموجودة في Pages لن تظهر في Posts 
أما كود  == فهو يحدد صفحات واحدة كصفحات المواضيع او أي صفحة 
مثال على ذالك:

<b:if cond='data:blog.pageType == &quot;Static_Page&quot;'>

Static_Page= تعني الصفحات الثابتة

كما تلاحظون كود  == موجود في الكود السابق 

وهو يسمح للأدوات في الظهور فقط في صفحات Static_Page 

أي فقط في الصفحات الثابتة

الان نأتي للتحكم في الصفحات بعد ماشرحنا عمل كود   =! وكود  == 

التحكم بالأدوات في الصفحة الرئيسية

<b:widget id='HTML3' locked='false' title='إسم الأداة ' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'><!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if></b:includable>
</b:widget>

التحكم بالأدوات في صفحات المواضيع

<b:widget id='HTML3' locked='false' title='إسم الأداة ' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

 التحكم بالأدوات في صفحات التسمية

<b:widget id='HTML3' locked='false' title='إسم الإضافة ' type='HTML'>
<b:includable id='main'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;التسمية&quot;'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

 التحكم بالأدوات في كل الصفحات الا الصفحة الرئيسية

 <b:widget id='HTML3' locked='false' title='إسم الأداة ' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

 التحكم بالأدوات في كل الصفحات الا صفحات المواضيع

 <b:widget id='HTML3' locked='false' title='إسم الأداة ' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

 التحكم بالأدوات في الصفحات الثابتة

 <b:widget id='HTML3' locked='false' title='إسم الأداة ' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

 التحكم بالأدوات في كل الصفحات الا الصفحات الثابتة

<b:widget id='HTML3' locked='false' title='إسم الأداة ' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

 التحكم بالأدوات في صفحات الخطأ

<b:if cond='data:blog.pageType == "error_page"'>
  <!-- جميع صفحات الخطأ-->
</b:if>

 التحكم بالأدوات في صفحات الأرشيف

<b:if cond='data:blog.pageType == "archive"'>
  <!--صفحات الأرشيف-->
</b:if>

 التحكم بالأدوات في صفحات البحث

<b:if cond='data:blog.searchQuery'>
    <!-- صفحات البحث -->
</b:if>

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

كود أضغط لايك لصفحة الفيسبوك للذهاب للرابط | Code like Facebook

جميعنا نود التأكد من الزوار هل يفعلون مانقوله لهم أم لا 

لكن بعض الإحيان الزائر يريد الرابط فقط الذي دخل لمدونتك من أجلة 

مثلاً في مدونتك العديد من برامج الألعاب والزائر يريد فقط رابط التحميل ويخرج من مدونتك 

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

وهذه الإضافة تجعله يضغط لايك لصفحتك الفيسبوك فقط ليظهر رابط التحميل او أي رابط يريده الزائر

مثال على ذالك :

من فضلك اضغظ لايك لمشاهدة رابط التحميل

.

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

الان كيفية إضافة هذا الكود للمواضيع :
أذهب لموضوعك ووحول من وضع تأليف الى وضع HTML كما في الصورة : 

وقم بنسخ الكود ووضعه في HTML الخاص بالموضوع:

<script type="text/javascript">function Saudi_7reeef(){url = "<a href='YourLink' onclick='OpenInNewTab();' style='font-family: Trebuchet MS,sans-serif; font-size: large; text-align: right; direction: rtl; float: right;padding: 0 0 20px;' target='_blank'>رابط تحميل جاهز الان اضغط هنا للتحميل</a>";        document.getElementById("restricted").innerHTML = url; }window.fbAsyncInit = function() {          FB.init({ status : true, cookie : true, xfbml  : true });          FB.Event.subscribe('edge.create', function(response) { Saudi_7reeef(); });};
(function(d, s, id) {          var js, fjs = d.getElementsByTagName(s)[0];          if (d.getElementById(id)) return;          js = d.createElement(s); js.id = id;          js.src = "//connect.facebook.net/en_US/all.js";          fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk')); </script></div><div id="restricted" style="text-align: center;"><div dir="rtl"><b><span style="font-family: 'Trebuchet MS', sans-serif; font-size: large; text-align: right;">من فضلك اضغظ لايك لمشاهدة لينك التحميل</span></b></div><b><fb:like fb-iframe-plugin-query="app_id=&amp;container_width=0&amp;href=http%3A%2F%2Fwww.facebook.com%2Fkarmeloter&amp;layout=button_count&amp;locale=en_US&amp;sdk=joey&amp;send=false&amp;show_faces=false&amp;width=220" fb-xfbml-state="rendered" class=" fb_iframe_widget" href="http://www.facebook.com/ID-YOURPAGE" layout="button_count" send="false" show_faces="false" width="220"><span style="vertical-align: bottom; width: 86px; height: 20px;"><iframe class="" src="http://www.facebook.com/plugins/like.php?app_id=&amp;channel=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter%2F6p3So0GhyQP.js%3Fversion%3D41%23cb%3Df10b7f0c4599a9c%26domain%3Dtech-ly.blogspot.com%26origin%3Dhttp%253A%252F%252Ftech-ly.blogspot.com%252Ff5f93b5e9a3804%26relation%3Dparent.parent&amp;container_width=0&amp;href=http%3A%2F%2Fwww.facebook.com%2Fkarmeloter&amp;layout=button_count&amp;locale=en_US&amp;sdk=joey&amp;send=false&amp;show_faces=false&amp;width=220" style="border: medium none; visibility: visible; width: 86px; height: 20px;" title="fb:like Facebook Social Plugin" scrolling="no" allowfullscreen="true" allowtransparency="true" name="f2d0642ccd2dc5" frameborder="0" height="1000px" width="220px"></iframe></span></fb:like></b></div><div class="clear" style="text-align: center;"></div></div><div style="text-align:center">.<!-- Start Tags - Saudi-7reeef.blogspot.com-MB-SSP061316-NEW3 (PUB-4675)  - 468x60 --><script type="text/javascript" src="http://a.ad-sys.com/c/banner_s?selection=5259&amp;size=468x60&amp;skin=script&amp;zone=8258&amp;tenant=AD&amp;di=AF"></script><!-- End Tags - Saudi-7reeef.blogspot.com-MB-SSP061316-NEW3 (PUB-4675)  -  468x60 -->
<!-- H12 Media SSP Banner Tags Begin, pub: Saudi-7reeef.blogspot.com, type: Standard Banner, size: 468x60, name:  --><script type="text/javascript" src="http://tags.h12-media.com/tags.js?site=176a677b2f329da91e0d605b978832b3&amp;type=468x60"></script><!-- H12 Media SSP Banner Tags End -->
<script type="text/javascript" src="http://srvpub.com/adServe/banners?tid=3916_39559_0&amp;size=468x60"></script>

الان نأتي لكيفية تغيير الكود :

YourLink: ضع الرابط الذي سيتحول له بعد الضغط على الايك لصفحتك

ID-YOURPAGE: الأي دي الخاص بصفحتك على الفيس بوك مثال على ذالك " www.Facebook.com/XXXX "

إضافة كود الملفات المرفقة أسفل المواضيع CSS

جميعنا قد نضع مواضيع لتحميل أو الأكواد والملفات وغيرها 

وهنا يجب علينا وضع روابط تحميل على مواقع التخزين كـ مركز الخليج و ميديا فاير وغيرها 

واليوم سوف نضع هذه الروابط بطريقة إحترافية داخل المواضيع بإضافة جميلة جداً 

وهي عبارة عن إضافة الملفات المرفقة للمواضيع

نإتي لعملية التركيب داخل القالب :

1. قم بإخذ نسخة إحتياطية للقالب 
2. أذهب لقالب ثم تحريرHTML
3. أبحث عن وسم :

]]></b:skin>

 أضف هذا الكود فوقة :

#bl-blogger-filesment {overflow: hidden;border: 1px dashed #ccc;background: #fff;padding: 0;margin: -10px 11px 0 0;direction: rtl;text-align: right;}#bl-blogger-fileswrapper h5 {font: normal 18px GESSTwoMediumRegular, tahoma;background: #fff;padding: 3px 6px;margin: 10px 30px -10px;width: 75px;display: inline-block;color: #7accd6;direction: rtl;text-align: right;}#bl-blogger-fileswrapper span {font: normal 12px tahoma;color: #ccc;direction:rtl;text-align:right;}#bl-blogger-filesment img {float: right;padding: 24px 22px 15px;margin-left: 20px;border-left: 1px dashed #ccc;}#bl-blogger-filesment .download {font: normal 16px GESSTwoMediumRegular, tahoma;padding: 27px 0 !important;float: right;color: #444;direction:rtl;text-align:right;}#bl-blogger-filesment .download:hover {color: #0378ae;}

 قم بحفظ القالب وتوجه الى موضوعك وأضغط على " HTML " وضع هذا الكود:

<div id="bl-blogger-filesment"><span style="font-family: inherit;"><img src="//images-blogger-opensocial.googleusercontent.com/gadgets/proxy?url=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOARIj53v-1l2r3zC7-ooJ7t6TrLRyKBGCxmtnV24pR8se88bgwx92OsvzoEEk8FZLxtmatWSQIHFroz7-S55EkyToG8U5jPXwfDSRCiLvY6xqILprX0gX5k86I24BfkxGfTe3ACVy0Do/s1600/att.png&amp;container=blogger&amp;gadget=a&amp;rewriteMime=image/*"><a class="download" href="هنا رابط الملف" rel="nofollow" target="_blank">هنا اسم الملف</a></span>
</div>

النتيجة:

الملفات المرفقة

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

أهم خمس أسباب قد تدمر مدونتك ويتراجع ترتيبها 2015

هناك الكثير من الأسباب لتجعل مدونتك بأؤاخر المدونات لكن سيتم ذكر أهم هذه الأسباب 

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

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

لكن في عام 2015 ، تتطور المواقع وخدماتها بينما Blogger يتطور أيضا في كل شئ وأهم شئ يتطور في المحركات البحث

سنذكر أهم خمس أسباب تجعل مدونتك من أؤاخر مدونات بلوجر في 2015

1. عدم النشر  المواضيع في المدونة وأهمالها

ابداً لاتهمل مدونتك وتجعل مواضيعها متأخره ، فكثرة نشر المواضيع الحصرية في المدونة يجعل مستوى المدونة يزيد أي ينخفص في أليكسا فعندما لايوجد مواضيع جديدة فمحركات البحث ستتجاهل مدونتك بسبب عدم وجود مواضيع جديدة وتجعل مدونتك في أؤاخر المدونات أي لاتستغرب بأن مستوى المدونة أصبح ضعيف جداً فكثرة المواضيع مهمة جداً لمحركات البحث 

1. تغيير قالب المدونة كثيراً 

أغلب مستخدمين المدونات يختارون قوالب جديدة ويغيرون القالب دائماً لكن تغيير القالب قد يعدم المدونة تماماً مثلا القالب الأصلي لدية SEO ممتاز جداً ومحركات البحث تعرف مدونتك جيداً بسبب الـ SEO لكن عندما يتم تغيير القالب فـ SEO ايضا يتغير وقد يكون القالب الجديد الـ SEO الخاص به ضعيف وبذالك يتم تجاهل المدونة وأعتبارها بأنها أختفت من محركات البحث بسبب عدم القدرة على البحث عنها وبذالك تصبح من أؤاخر المدونات في قوقل

1. تكرار المواضيع في محركات البحث

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

1. وضع أكواد زائدة في الـ SEO 

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

1. وضع حقوق مدونات أخرى في مدونتك 

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

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

الملفات المرفقة