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

  <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; margin-bottom: 20px; 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:#333; font-family:GE SS Two Medium,droidkufi-bold;font-size:14px;}
</style></b:if></b:if>

كود اللون الاخضر

<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; margin-bottom: 20px;
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:#29BD9E;
-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:#333; font-family:GE SS Two Medium,droidkufi-bold;font-size:14px;}
</style></b:if></b:if>

كود اللون الاحمر

 

<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; margin-bottom: 20px; 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:#CC1B1B;
-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:#333; font-family:GE SS Two Medium,droidkufi-bold;font-size:14px;}
</style></b:if></b:if>

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

          <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><!-- tag tempat daftar Breaking News ditampilkan-->
</div><!-- tag penutup tempat Breaking News-->
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'http://mdwanblog.blogspot.com/', // alamat blogmu contoh http://mkr-site.blogspot.com
numpostx     = 10; // Jumlah artikel yang di tampilkan
$.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://mdwanblog.blogspot.com/ برابط مدونتك

ستجده باللون الاحمر 

واذا كان لديك اى استفسار لا تترد فى طرحه

صفحتى على الفيس بوك

     <style>  

    /* by.mdwanblog.blogspot.com */

    #cssmenu {

      padding: 0;

      margin: 0;

      border: 0; }

    #cssmenu ul, #cssmenu li {

      list-style: none;

      margin: 0;

      padding: 0; }

    #cssmenu ul {

      position: relative;

      z-index: 597; }

    #cssmenu ul li {

      float: right;

      min-height: 1px;

      vertical-align: middle; }

    #cssmenu ul li.hover,

    #cssmenu ul li:hover {

      position: relative;

      z-index: 599;

      cursor: default; }

    #cssmenu ul ul {

      visibility: hidden;

      position: absolute;

      top: 100%;

      left: 0;

      z-index: 598;

      width: 100%; }

    #cssmenu ul ul li {

      float: none; }

    #cssmenu ul ul ul {

      top: 0;

      left: auto;

      right: -99.5%; }

    #cssmenu ul li:hover > ul {

      visibility: visible; }

    #cssmenu ul ul {

      bottom: 0;

      left: 0; }

    #cssmenu ul ul {

      margin-top: 0; }

    #cssmenu ul ul li {

      font-weight: normal; }

    #cssmenu a {

      display: block;

      line-height: 1em;

      text-decoration: none; }

    /* by.mdwanblog.blogspot.com */

    #cssmenu {

      background: #333;

      border-bottom: 4px solid #1b9bff;

      font-family: 'Oxygen Mono', Tahoma, Arial, sans-serif;

      font-size: 12px; }

      #cssmenu > ul {

        *display: inline-block; }

      #cssmenu:after, #cssmenu ul:after {

        content: '';

        display: block;

        clear: both; }

      #cssmenu ul {

        text-transform: uppercase; }

        #cssmenu ul ul {

          border-top: 4px solid #1b9bff;

          text-transform: none;

          min-width: 190px; }

          #cssmenu ul ul a {

            background: #1b9bff;

            color: #FFF;

            border: 1px solid #0082e7;

            border-top: 0 none;

            line-height: 150%;

            padding: 16px 20px; }

          #cssmenu ul ul ul {

            border-top: 0 none; }

          #cssmenu ul ul li {

            position: relative; }

            #cssmenu ul ul li:first-child > a {

              border-top: 1px solid #0082e7; }

            #cssmenu ul ul li:hover > a {

              background: #35a6ff; }

            #cssmenu ul ul li:last-child > a {

              -moz-border-radius: 0 0 3px 3px;

              -webkit-border-radius: 0 0 3px 3px;

              border-radius: 0 0 3px 3px;

              -moz-background-clip: padding;

              -webkit-background-clip: padding-box;

              background-clip: padding-box;

              -moz-box-shadow: 0 1px 0 #1b9bff;

              -webkit-box-shadow: 0 1px 0 #1b9bff;

              box-shadow: 0 1px 0 #1b9bff; }

            #cssmenu ul ul li:last-child:hover > a {

              -moz-border-radius: 0 0 0 3px;

              -webkit-border-radius: 0 0 0 3px;

              border-radius: 0 0 0 3px;

              -moz-background-clip: padding;

              -webkit-background-clip: padding-box;

              background-clip: padding-box; }

            #cssmenu ul ul li.has-sub > a:after {

              content: '+';

              position: absolute;

              top: 50%;

              right: 15px;

              margin-top: -8px; }

        #cssmenu ul li:hover > a, #cssmenu ul li.active > a {

          background: #1b9bff;

          color: #FFF; }

        #cssmenu ul li.has-sub > a:after {

          content: '+';

          margin-left: 5px; }

        #cssmenu ul li.last ul {

          left: auto;

          right: 0; }

          #cssmenu ul li.last ul ul {

            left: auto;

            right: 99.5%; }

      #cssmenu a {

        background: #333;

        color: #CBCBCB;

        padding: 0 20px; }

      #cssmenu > ul > li > a {

        line-height: 48px; }

</style>

<!--by.mdwanblog.blogspot.com-->

    <div id='cssmenu'>

    <ul>

       <li class='active'><a href='#'><span>الرئيسية</span></a></li>

       <li class='has-sub'><a href='#'><span>منسدلة</span></a>

          <ul>

             <li class='has-sub'><a href='#'><span>رابط</span></a>

                <ul>

                   <li><a href='#'><span>رابط</span></a></li>

                   <li class='last'><a href='#'><span>مدونة مدون</span></a></li>

                </ul>

             </li>

             <li class='has-sub'><a href='#'><span>منسدلة اخرى</span></a>

                <ul>

                   <li><a href='#'><span>جديد</span></a></li>

                   <li class='last'><a href='#'><span>هاكات بلوجر</span></a></li>

                </ul>

             </li>

          </ul>

       </li>

       <li><a href='#'><span>عن مدوّن</span></a></li>

       <li class='last'><a href='#'><span>بلوجر</span></a></li>

    </ul>

    </div>

    <!--by.mdwanblog.blogspot.com-->

<style>
#menu {
 background: white;
 width: 280px;
 padding:10px;
}
#menu ul {
 margin:0;
 padding:0;
 list-style: none;
}
#menu ul li {
 margin: 0;
 padding: 5px 0 10px;
 border-bottom: 1px dashed #EAEAEA;
}
#menu ul li img {
 float: right;
 padding: 3px 0 0 10px;
}
#menu ul li a {
 font: normal 18px 'Droid Arabic Kufi', tahoma ,arial;
 color: #007195;
 text-decoration:none;
}
#menu ul li a:hover {
 color:#CC3332;
}
#menu ul li span {
 font: normal 13px 'Droid Arabic Kufi', tahoma ,arial;
 color:#7D7D7D;
}
#menu li span:hover {
 color: #494949;
}
</style>
<div id="menu">
 <ul>
<!--design:mdwanblog.blogspot.com-->
 <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0_ZygX63JnkhMdXoW_wGAkhdCd9ZrQTikZD-N5DE7P1LCi-SSSCrW5RQyK0ziZPjdmmlnLiuJNTCpw76xtw0nArC-xMXQ1fhlgUvIOiovgOWBz5j_NL4BBlrEESE5BGJjobNluxvM-4I/s1600/232.png" border="0" alt="" /><a href="#">موقع جديد!<br />
 <span>وصف مختصر</span></a></li>
 <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj9j3e3AGCQ6K3-wNQ2rgMMOUtD2y3Att3UCnwzbm-5b0Lak_RNFJh5EnkkNYTRaP0077Oyq9ovw_vmXKzawV6E9mkL3aYQDYnR4m_WinL_L1gcupGe6HuSmk9Q4pFwl_une-J6pccyCE/s1600/155.png" border="0" alt="" /><a href="#">موقع جديد!<br />
 <span>وصف مختصر</span></a></li>
 <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVeRPH2aFBDWuUsPx_h5qUSac_xy2ld3nDbzXZ_aaC6qK4eYssBo8m2Mk9uwpOlrf74E2qM34vplWTtR-GthcMl4jrWMIMpLHthEwVtGUV5ly_B5L75g6KXcgm6mJozA8_rgHqDWk1Jx0/s1600/178.png" border="0" alt="" /><a href="#">موقع جديد!<br />
 <span>وصف مختصر</span></a></li>
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEwEUiuJJxOUbInbwTdT2g8S1fvrkxW8ZnZHOH2IIyGosHbn-5N_-0K28c86ygdt0xMN2ss2Bt-c3_z84cK601Lptf94NMA1Q4xqZ5udqdQcmv_-uJ7NcujjfDILR5PN0qRr6Jp0QD4dA/s1600/185.png" border="0" alt="" /><a href="#">موقع جديد!<br />
 <span>وصف مختصر</span></a></li>
<!--design:mdwanblog.blogspot.com-->
 </ul>
</div>

<style type="text/css">
html
{
scrollbar-base-color: #3F93AF;
scrollbar-arrow-color: #ffffff;
scrollbar-track-color: #DFDEDF;
}

.footerbg {
    height: 147px;
}

#textlinks ul  {
  padding: 0;
  margin: 0;
  direction: rtl;
  list-style-type: none;
font-family:'Droid Arabic Kufi', tahoma ,arial;
  font-size: 11px;
}
#textlinks li {
  background-position: bottom;
  text-align: right;

}
#textlinks li a {
  background-position: right;
  display: block;
  text-decoration: none;
  padding-right: 20px;
 font-family:'Droid Arabic Kufi', tahoma ,arial;
  font-size: 15px;
  font-weight: normal;
  color: FFCC00;
  background-image: url('http://img526.imageshack.us/img526/7194/linkie.png');
  background-repeat: no-repeat;
  line-height: 20px;
  height: 20px;
}
#textlinks li a:hover {
  text-decoration: none;

  color: FF9900;
}
#textlinks {
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
.textcontainer {
  float: right;
  display: inline;
  width: 160px;
  padding-top: 20px;
  margin-left: 20px;
}
#rightspace {
  margin-right: 35px;
}
.texttitle {
font-family:'Droid Arabic Kufi', tahoma ,arial;
  font-size: 13px;
  font-weight: bold;
  color: #FF9900;
  padding-right: 20px;
}
</style>

]]></b:skin>

.socialw {
 width: 236px;
 margin-top: 100px;
 margin-left: auto;
 margin-right: auto;
 overflow: auto;
 height: 100%;
}
#social1 {
 border: 1px solid #292929;
 width: 37px;
 height: 62px;
 margin-left: 1px;
 float: left;
 overflow: hidden;
}
#social2,#social3,#social4,#social5 {
 border: 1px solid #292929;
 width: 37px;
 height: 62px;
 float: left;
 margin-left: 10px;
 overflow: hidden;
}
/*    ANIMATIONS   */
.animate {
 -webkit-animation-duration: 1s;
 -moz-animation-duration: 1s;
 -o-animation-duration: 1s;
 animation-duration: 1s;
 -webkit-animation-fill-mode: both;
 -moz-animation-fill-mode: both;
 -o-animation-fill-mode: both;
 animation-fill-mode: both;
}
.animate.queue {
 -webkit-animation-delay: 1s;
 -moz-animation-delay: 1s;
 -o-animation-delay: 1s;
 animation-delay: 1s;
}
.animate.queue2s {
 -webkit-animation-delay: 2s;
 -moz-animation-delay: 2s;
 -o-animation-delay: 2s;
 animation-delay: 2s;
}
.animate.queue3s {
 -webkit-animation-delay: 3s;
 -moz-animation-delay: 3s;
 -o-animation-delay: 3s;
 animation-delay: 3s;
}
.animate.queue4s {
 -webkit-animation-delay: 4s;
 -moz-animation-delay: 4s;
 -o-animation-delay: 4s;
 animation-delay: 4s;
}
/* Fade In Down */
@-webkit-keyframes fadeInDown {
 0% {
 opacity: 0;
 -webkit-transform: translateY(-100px);
 }
 100% {
 opacity: 1;
 -webkit-transform: translateY(0);
 }
}
@-moz-keyframes fadeInDown {
 0% {
 opacity: 0;
 -moz-transform: translateY(-100px);
 }
 100% {
 opacity: 1;
 -moz-transform: translateY(0);
 }
}
@-o-keyframes fadeInDown {
 0% {
 opacity: 0;
 -o-transform: translateY(-100px);
 }
 100% {
 opacity: 1;
 -o-transform: translateY(0);
 }
}
@keyframes fadeInDown {
 0% {
 opacity: 0;
 transform: translateY(-100px);
 }
 100% {
 opacity: 1;
 transform: translateY(0);
 }
}
.fadeInDown {
 -webkit-animation-name: fadeInDown;
 -moz-animation-name: fadeInDown;
 -o-animation-name: fadeInDown;
 animation-name: fadeInDown;
}
/* Fade In Down */
/* Social 1 Animation */
#social1 {position:relative;}
#social1 img{
position:absolute;
left:0;
top:0;
-webkit-transition: margin-top;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
}
#social1:hover img{
margin-top:-62px;
}
#social1 .details{
position:absolute;
left:0;
top:0;
z-index:-1;
}
/* Social 2 Animation */
#social2 {position:relative;}
#social2 img{
position:absolute;
left:0;
top:0;
-webkit-transition: margin-top;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
}
#social2:hover img{
margin-top:-62px;
}
#social2 .details{
position:absolute;
left:0;
top:0;
z-index:-1;
}
/* Social 3 Animation */
#social3 {position:relative;}
#social3 img{
position:absolute;
left:0;
top:0;
-webkit-transition: margin-top;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
}
#social3:hover img{
margin-top:-62px;
}
#social3 .details{
position:absolute;
left:0;
top:0;
z-index:-1;
}
/* Social 4 Animation */
#social4 {position:relative;}
#social4 img{
position:absolute;
left:0;
top:0;
-webkit-transition: margin-top;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
}
#social4:hover img{
margin-top:-62px;
}
#social4 .details{
position:absolute;
left:0;
top:0;
z-index:-1;
}
/* Social 5 Animation */
#social5 {position:relative;}
#social5 img{
position:absolute;
left:0;
top:0;
-webkit-transition: margin-top;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
}
#social5:hover img{
margin-top:-62px;
}
#social5 .details{
position:absolute;
left:0;
top:0;
z-index:-1;
}    

<!-- http://mdwanblog.blogspot.com/ !-->
 <div>
 <!-- Dribbble !-->
 <a href="http://dribbble.com/إسم الحساب" target="_blank">
 <div id="social1"> <img src="http://i.imgur.com/64r2jAv.png" /> </div>
 </a>
 <!-- Dribbble !-->
 <!-- Behance !-->
 <a href="http://behance.com/ إسم الحساب " target="_blank">
 <div id="social2"> <img src="http://i.imgur.com/fkuhUov.png" /> </div>
 </a>
 <!-- Behance !-->
 <!-- Facebook !-->
 <a href="http://facebook.com/ إسم الحساب " target="_blank">
 <div id="social3"> <img src="http://i.imgur.com/PY2EPRW.png" /> </div>
 </a>
 <!-- Facebook !-->
 <!-- Twitter !-->
 <a href="http://twitter.com/إسم الحساب" target="_blank">
 <div id="social4"> <img src="http://i.imgur.com/ny0pyqt.png" /> </div>
 </a>
 <!-- Twitter !-->
 <!-- Intagram !-->
 <a href="http://instagram.com/ إسم الحساب " target="_blank">
 <div id="social5"> <img src="http://i.imgur.com/tZZG2zQ.png" /> </div>
 </a>
 <!-- Instagram !-->
 </div>
<!-- http://mdwanblog.blogspot.com/ !-->