شكل الأضافة (سأشرح طريقة تغيير لونها كما تريد )

طريقة اضافة الاداة 

 1- من  لوحة التحكم -> قالب -> تحرير HTML 

  2- خذ نسخه احتياطيه لـ قالب المدونه قبل إجراء أية تغييرات 

  3- قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F)
*********************************************************************

<head/>

*********************************************

والصق الكود التالى قبلة مباشرا

*********************************************

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

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

<style type='text/css'>

#beakingnews{width:980px;margin:0 auto;line-height:37px;;overflow:hidden;  max-height: 37px; overflow: hidden;

background: #fff;

-moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;

-webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;

box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;

background-clip: padding-box;border-left: none;max-height: 37px;}

#beakingnews .tulisbreaking{display:block;float:right;padding:0 7px;;color:#FCFCFC;background:#21b8ff;

-moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;

-webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;

box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;

color: #FFF;font-family:GE SS Two Medium,droidkufi-bold;font-size: 14px;

line-height: 37px;padding-right: 10px;padding-left: 10px;font-weight: normal;

text-transform: uppercase;}

#recentpostbreaking{float:right;padding-right: 15px;}

#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}

#recentpostbreaking li a{color:#21B8FF; font-family:GE SS Two Medium,droidkufi-bold;font-size:14px;}

</style></b:if></b:if>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js?ver=1.7.1' type='text/javascript'/>

استبدل كود اللون الازرق بكود اللون الذى تريدة

*********************************************

الان ابحث عن الكود التالى  

*********************************************

<div class='main-outer'>

*********************************************

الصق الكود التالى فوقة تماما 

*********************************************

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

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

<div id='beakingnews'><span class='tulisbreaking'>أخر المواضيع</span><!-- tag pembuka tempat Breaking News-->

<div id='recentpostbreaking'>Loading...</div>

</div><!-- tag penutup tempat Breaking News-->

<script type='text/javascript'>

//<![CDATA[

$(document).ready(function () {

var url_blog = 'http://qassemblog.blogspot.com/', 

numpostx     = 10;

$.ajax({

url: '' + url_blog + '/feeds/posts/default?alt=json-in-script&max-results=' + numpostx + '',    type: 'get',    dataType: "jsonp", success: function(data) {        var posturl, posttitle, skeleton = '', entry = data.feed.entry; if (entry !== undefined) {skeleton = "<ul>";for (var i = 0; i < entry.length; i++) { for (var j=0; j < entry[i].link.length; j++)  { if (entry[i].link[j].rel == "alternate"){ posturl = entry[i].link[j].href;  break;  }              }              

posttitle = entry[i].title.$t;

skeleton += '<li><a href="' + posturl + '" target="_blank">' + posttitle + '</a></li>';

        }

skeleton += '</ul>';

$('#recentpostbreaking').html(skeleton);

// kode untuk efek pada breaking news

function tick(){

$('#recentpostbreaking li:first').slideUp( function () { $(this).appendTo($('#recentpostbreaking ul')).slideDown(); }); }

setInterval(function(){ tick () }, 5000); } else {

$('#recentpostbreaking').html('<span>No result!</span>');

        }  }, error: function() {

$('#recentpostbreaking').html('<strong>Error Loading Feed!</strong>');

       } }); }); 

//]]>

</script>

</b:if></b:if>

استبدل رابط مدونة قاسم http://qassemblog.blogspot.com/
 باللون الازرق برابط مدونتك 

قم بحفظ القالب والف مبروك الأضافة 

الدورة عبارة عن ست دروس :-

اولا الدرس الاول وهو طريقة انشاء ايميل على جوجل وانشاء مدونة جديدة 

  

ثانيا : تركيب قالب احترافى للمدونة



ثالثا :انشاء مشاركات جديدة ووضعها بالتسميات



رابعا : التحكم فى التخطيطات



خامسا:تغيير لوجو المدونة



سادسا : تفعيل روابط التسميات

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

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

القالب يتميز باللونين الاحمر و الاسود

التحميل 

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

نقدم لكم اليوم سلايد شو تلقائي لمدونات بلوجر يعرض بشكل تلقائي أحدث المشاركات وهو متجاوب اي يمكن وضعه في أي مكان في مدونتك حتى يظهر بحجم تلقائي بشكل جميل وخفيف

حسناً كيفية تركيب هذا السلايد على مدونتك

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

#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:320px}
#slides li{width:50%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block}
#slides li:nth-child(1){right:0;top:0}
#slides li:nth-child(2){right:50%;width:25%;height:50%}
#slides li:nth-child(3){right:75%;width:25%;height:50%}
#slides li:nth-child(4){right:50%;top:50%;width:25%;height:50%}
#slides li:nth-child(5){right:75%;top:50%;width:25%;height:50%}
#slides li:nth-child(1) h4 {overflow:hidden;font-size:25px;bottom:0;color:#fafafa;width:100%;
padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3);
height:90px;font-family:'Oswald';text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;}
#slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;
padding:0;font-family:'Oswald';box-shadow:5px 3px 0 rgba(0,0,0,0.2);}
#slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;
background:#ff6553;margin:0;}
#slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;

padding:5px 21px;text-transform:uppercase;margin:0;}
#slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}
#slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://2.bp.blogspot.com/-0haO2Mfkjjk/VDgZww2tfEI/AAAAAAAAHAk/zhu3INYSkHA/s1600/fade.png);background-position:50% 40%;background-repeat:repeat-x;}
#slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:'Oswald';
right:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;
background:rgba(41,41,41,0.7);text-align:right;text-transform:uppercase;margin-left:10px;}
#slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;
position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:'Oswald';
text-transform:uppercase;}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;}
#slides .overlayx,#slides li{transition:all .4s ease-in-out}
#slides li:nth-child(1) .overlayx{display:none;}
#slides li:hover .overlayx{opacity:0.1}

@media only screen and (max-width:800px){
#slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}}

@media only screen and (max-width:600px){
  #slides ul{height:600px}
  #slides li:nth-child(1){width:100%;height:50%}
  #slides li:nth-child(2){top:50%;height:25%;right:0;width:50%}
  #slides li:nth-child(3){right:50%;top:50%;width:50%;height:25%}
  #slides li:nth-child(4){right:0;top:75%;height:25%;width:100%}
  #slides li:nth-child(5){display:none;}}

@media only screen and (max-width:480px){
#slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}

الآن أبحث عن الرمز </body> عادةً يكون قبل آخر في القالب بعد أن نجد الرمز </body> نضيف الكود التالي فوقه مباشرةً

<script type='text/javascript'>
//<![CDATA[
function FeaturedPost(a){(function(e){var h={blogURL:"",MaxPost:5,idcontaint:"#featuredpost",ImageSize:500,interval:10000,autoplay:false,loadingClass:"loadingxx",pBlank:"http://3.bp.blogspot.com/-v45kaX-IHKo/VDgZxWv0xUI/AAAAAAAAHAo/QJQf8Dlh3xc/s1600/grey.gif",MonthNames:["يناير","فبراير","مارس","ابريل","مايو","يونيو","يوليو","أغسطس","سبتمبر","أكتوبر","نوفمبر","ديسمبر"],tagName:false};h=e.extend({},h,a);var g=e(h.idcontaint);var c=h.blogURL;var d=h.MaxPost*200;if(h.blogURL===""){c=window.location.protocol+"//"+window.location.host}g.html('<div id="slides"><ul class="randomnya"></ul></div><div id="buttons"><a href="#" id="prevx" title="prev"></a><a href="#" id="nextx" title="next"></a></div>').addClass(h.loadingClass);var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail"in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.ImageSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.ImageSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.MonthNames[parseInt(p,10)-1];l+='<li><a target="_blank" href="'+q+'" title="'+k+'"><div class="overlayx"></div><img class="random" src="'+u+'" title="'+k+'"><h4>'+k+'</h4></a><div class="label_text"><span class="date"><span class="dd">'+t+'</span> <span class="dm">'+v+'</span> <span class="dy">'+x+'</span></span> <span class="autname">'+m+"</span></div></li>"}e("ul",g).append(l)};var b=function(){var i="/-/"+h.tagName;if(h.tagName===false){i="";e.ajax({url:c+"/feeds/posts/default"+i+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",success:f,dataType:"jsonp",cache:true})}else{e.ajax({url:c+"/feeds/posts/default"+i+"?max-results="+h.MaxPost+"&orderby=published&alt=json-in-script",success:f,dataType:"jsonp",cache:true})}(function(){setTimeout(function(){e("#prevx").click(function(){e("#slides li:first").before(e("#slides li:last"));return false});e("#nextx").click(function(){e("#slides li:last").after(e("#slides li:first"));return false});if(h.autoplay){var k=h.interval;var l=setInterval("rotate()",k);e("#slides li:first").before(e("#slides li:last"));e("#slides").hover(function(){clearInterval(l)},function(){l=setInterval("rotate()",k)});function j(){e("#nextx").click()}}g.removeClass(h.loadingClass)},d)})()};e(document).ready(b)})(jQuery)};function rotate(){$('#nextx').click();};document.write('')
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"http://qassemblog.blogspot.com/",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:500,
interval:10000,
autoplay:true,
tagName:false
});
});
//]]>

الان يجب أن نختار المكان المناسب حتى يظهر فيه هذا السلايد شو مثلا اسفل الرمز

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

 <div class='main-wrapper'> أو
<div class='outer-wrapper'>
المهم أن نختار المكان المناسب لكي يظهر فيه السلايد شو ثم نضع الكود التالي:


<div id="featuredpost"></div>
ثم حفظ القالب

بسم الله الرحمن الرحيم

اقدم الى كل متابعين مدونة قاسم هذا الملف الشامل 

يشتمل على لينكات :

1-مواقع اجنبيه للتعليم , شاملة البرمجة والويب وغيرها

2-اشهر المدونات والمواقع

3-تعليم الفوتشوب وبرامج الجرافيكس

4-مواقع عربية لتعليم البرمجة وغيرها

5-مواقع مشاريع مجانية

6-مواقع لعمل CV بشكل ممتاز

7-مواقع الوظائف العربية(وظائف الحكومة المصرية والقوى العاملة)

8-مواقع للترجمة

9-مواقع للعمل الحر

10-مواقع اجنبيه لتحميل البرامج

11-مواقع بتقدم اخر الاسعار للموبيلات والكمبيوتر واللاب توب وغيره واسعار القطع والهارد وير والسوفت وير

12-مواقع كتب عربية واجنبيه

13-مواقع للمنح الدراسية

14-مواقع لتعليم اللغة الانجليزية

15-مواقع لتحميل صور HD

16-مجموعةمن مواقع الاستضافات المجانية

17-مواقع لتحميل مقاطع من اليوتيوب بدون برامج

18-مواقع لمصصمى الويب اضافية

19-مواقع للتعديل على الفيديوهات اونلاين

20-مجموعة من المواقع المهمة الاخرى

التحميل

لاتبخل بكلمة شكر بسيطة  :)

بسم الله الرحمن الرحيم

موقع like4like.org لزيادة المعجبين على الفيس بوك والمواقع الاجتماعية والميديا 

لتسجيل فى الموقع تابع الشرح فى الصور

1-فورمة التسجيل 

2-اضافة صفحتك  فى الفيس التى تريد زيادة المعجبين لها 

4-لجمع النقاط عن طريق عمل لايكات لصفحات الفيس بوك