يمكنك تحميل هذا القالب من مدونة جلال البعداني ^_^


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






يشسيشسيسيشسي




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

vhcvhcvb





xvxc




السلام عليكم ورحمة الله وبركاته , مرحبآ بكم مجددآ في موضوع جديد لمدونة احترافي نت , اليوم بأذن الله سنقوم باضافة اخر التعليقات بشريط مخفي وتاثيرات جميلة جدأ
المصدر: http://www.madad2.com




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

 لوحة التحكم > تخطيط > اضافة اداة HTML/Javascript 
 الصق الكود التالي بداخل الاداة


<div class='clear'></div><div class='widget HTML' id='HTML1'><div class='widget-content'><style type='text/css'>#info-JmK{z-index:1000;background:-moz-linear-gradient(top,#1F2326,#000);background:-webkit-gradient(linear,left top,left bottom,from(#1F2326),to(#000));box-shadow:-2px -2px 8px #FF0000,2px 2px 20px #f00;-moz-box-shadow:-2px -2px 8px #FF0000,2px 2px 20px #f00;-webkit-box-shadow:-2px -2px 8px #FF0000,2px 2px 20px #f00;width:400px;position:fixed;top:50px;left:0;margin-left:-330px;border:1px solid #444;background-position:top right no-repeat;height:35px;font:11px Arial;color:#eee;border-top-right-radius:8px;border-bottom-right-radius:8px;-moz-border-radius-topright:8px;-moz-border-radius-bottomright:8px;-webkit-border-top-right-radius:8px;-webkit-border-bottom-right-radius:8px}#info-JmK{-o-transition:all 1s ease-in;-moz-transition:all 1s ease-in;-webkit-transition:all 1s ease-in}#info-JmK:hover{width:400px;opacity:1.0;margin-left:0}.JmKinbox{border:1px solid #444;width:290px;margin:0 90px 10px 10px;background:transparent;color:#fff;border-radius:20px;padding:5px 0;-moz-border-radius:20px;-webkit-border-radius:20px;-o-transition:all 2s ease-in;-moz-transition:all 2s ease-in;-webkit-transition:all 2s ease-in;opacity:.2}.JmKinbox:hover{opacity:1.0;box-shadow:1px 1px 15px #000;-moz-box-shadow:1px 1px 15px #000;-webkit-box-shadow:1px 1px 15px #000;background:#000;-moz-opacity:1.0;opacity:.8;-khtml-opacity:.0;-moz-border-radius-bottomleft:30px;-moz-border-radius-bottomright:30px}.JmKinbox2{margin:5px 10px;padding:0 8px 10px;color:#fff;overflow:hidden;height:450px}.JmK15{border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:15px}.JmK2 ul.bom{margin:0;padding:0}.JmKinbox2 li{margin-left:20px}.JmKinbox2 li a{color:#FFFFF;line-height:4px;font-size:11px;font-weight:bold;text-decoration:none}.JmKinbox2 li a:hover{color:red;text-shadow:0 1px 1px #000}.JmKinbox2 h2{font:18px Droid Serif;font-weight:bold;padding:0 8px;color:#f00;text-shadow:0 1px 1px #ddd;border-bottom:1px solid #f00}.JmKtouch{font-size:22px;font-weight:bold;font-family:Arial Narrow;float:right;margin:3px 10px 0 0;-o-transition:all .5s ease-out;-moz-transition:all .5s ease-out;-webkit-transition:all .5s ease-out;text-decoration:blink}.JmKtouch:hover{-o-transform:scale(2) rotate(720deg) translate(0px);-moz-transform:scale(2) rotate(720deg) translate(0px);-webkit-transform:scale(2) rotate(720deg) translate(0px);color:red}</style><div id='info-JmK'><span class='JmKtouch'>تعليقات</span><div class='JmKinbox'><div class='JmKinbox2 JmK15'><h2>اخر التعليقات</h2><p style='text-align:justify'><div style='overflow:auto;width:ancho;height:330px'><style type="text/css">#komentar{background:#fff;border:1px solid #8181f7;-moz-border-radius-bottomright:10px;-moz-border-radius:5px;-webkit-border-radius:5px;-khtml-border-radius:5px;border-radius:5px;margin:5px 0;padding:5px}#komentar ul{margin:0;padding:0;list-style:none}#komentar ul li:first-child{border-top:0}#komentar ul li{height:46px;background:#a9d0f5;list-style-type:none;margin:0 0 5px 0;padding:5px 5px 5px 5px!important;font-size:12px!important;font-weight:550;border:1px solid #8181f7;-moz-border-radius-bottomright:10px;-moz-border-radius:5px;-webkit-border-radius:5px;-khtml-border-radius:5px;border-radius:5px;margin:5px 0;padding:5px}#komentar ul li:last-child{border-bottom:0}#komentar ul li:hover{background:#cff;-moz-border-radius-bottomright:10px;-moz-border-radius:5px;-webkit-border-radius:5px;-khtml-border-radius:5px;border-radius:5px;margin:5px 0;padding:5px}#komentar a,#komentar a:link,#komentar a:visited{clear:both;color:#222;display:block;text-decoration:none}#komentar .gamen{display:block;float:left;height:42px;left:4px;margin-right:15px;position:relative;width:42px}#komentar .gamen>img{border:2px solid #fff;-webkit-border-radius:22px;-moz-border-radius:22px;border-radius:22px;box-shadow:0 1px 2px #222;background:url(http://tipstrikblogging.googlecode.com/files/Avatar%20Blogger%20Comments.jpg)repeat-x}#komentar ul li div.ismen{color:#333;text-shadow:-1px -1px 1px #ccc}#komentar .ismen{display:block;font-size:1em;font-style:italic;line-height:1.2;padding:2px 4px 2px 0}#komentar .gamen>span{width:150px;height:auto;line-height:20px;padding:5px;left:115px;margin-left:-64px;font-size:1em;font-weight:bold;color:#212121;text-shadow:1px 1px 1px rgba(0,0,0,0.1);text-align:center;border:4px solid #5858fa;background:rgba(255,255,255,0.7);text-indent:0;border-radius:5px;position:absolute;pointer-events:none;bottom:100px;opacity:0;box-shadow:1px 1px 2px rgba(0,0,0,0.2);-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;transition:all .3s ease-in-out}#komentar .gamen>span:before,#komentar .gamen>span:after{content:'';position:absolute;bottom:-15px;left:50%;margin-left:-9px;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid rgba(0,0,0,0.1)}#komentar .gamen>span:after{bottom:-14px;margin-left:-10px;border-top:10px solid #5858fa}#komentar .gamen:hover>span{opacity:.9;bottom:55px}</style><div id="komentar"><ul><script type="text/javascript">var jmlkomentar=100;var jmlkarakter=60;</script><script src="http://tipstrikblogging.googlecode.com/files/RecentComment-W-Gravatar-Tooltip.js" type="text/javascript"></script><script src="هنا هنا هناfeeds/comments/default?alt=json&callback=tampilkankomentar" type="text/javascript"></script></ul></div></div>CREATED BY : <a href="http://madad2.blogspot.com/"><blink>RB&#8482;</blink></a></p></div></div></div></div></div>




الخطوة الاخيرة غير الكلمة التي باللونالاحمر برابط مدونتك ثم اختر

حفظ ومبروك عليك الاضافة




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

المصدر : مدونة جلال البعداني

صورة الأضافة

شريط اخر اخبار المدونه

كيفة اضافة هاذه الاداة الى مدونات بلوجر

1- لوحة التحكم -> قالب -> تحرير html
2- خذ نسخة اتياطية من القالب قبل اجراء اي تغيرات
        3- قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F)

</head>

وقبله تماما قم بلصق احد اكواد الالوان التاليه حسب رغبتك

كود اللون الازرق


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

  2. <b:if cond='data:blog.pageType != &quot;item&quot;'>
  3. <style type='text/css'>
  4. #beakingnews{width:980px;margin:0 auto;line-height:37px;;overflow:hidden; margin-bottom: 20px; max-height: 37px; overflow: hidden;
  5. background: #fff;
  6. -moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
  7. -webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
  8. box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
  9. background-clip: padding-box;border-left: none;max-height: 37px;}
  10. #beakingnews .tulisbreaking{display:block;float:right;padding:0 7px;;color:#FCFCFC;background:#21b8ff;
  11. -moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
  12. -webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
  13. box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
  14. color: #FFF;font-family:GE SS Two Medium,droidkufi-bold;font-size: 14px;
  15. line-height: 37px;padding-right: 10px;padding-left: 10px;font-weight: normal;
  16. text-transform: uppercase;}
  17. #recentpostbreaking{float:right;padding-right: 15px;}
  18. #recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}
  19. #recentpostbreaking li a{color:#333; font-family:GE SS Two Medium,droidkufi-bold;font-size:14px;}
  20. </style></b:if></b:if>

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


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

  2. <b:if cond='data:blog.pageType != &quot;item&quot;'>
  3. <style type='text/css'>#beakingnews{width:980px;margin:0 auto;line-height:37px;;overflow:hidden; margin-bottom: 20px; max-height: 37px; overflow: hidden;
  4. background: #fff;
  5. -moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
  6. -webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
  7. box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
  8. background-clip: padding-box;
  9. border-left: none;
  10. max-height: 37px;}
  11. #beakingnews .tulisbreaking{display:block;float:right;padding:0 7px;;color:#FCFCFC;background:#CC1B1B;
  12. -moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
  13. -webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
  14. box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
  15. color: #FFF;font-family:GE SS Two Medium,droidkufi-bold;
  16. font-size: 14px;line-height: 37px;padding-right: 10px;padding-left: 10px;font-weight: normal;text-transform: uppercase;}
  17. #recentpostbreaking{float:right;padding-right: 15px;}
  18. #recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}
  19. #recentpostbreaking li a{color:#333; font-family:GE SS Two Medium,droidkufi-bold;font-size:14px;}
  20. </style></b:if></b:if>

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



  1. <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  2. <b:if cond='data:blog.pageType != &quot;item&quot;'>
  3. <style type='text/css'>#beakingnews{width:980px;margin:0 auto;
  4. line-height:37px;;overflow:hidden; margin-bottom: 20px;
  5. max-height: 37px; overflow: hidden;
  6. background: #fff;
  7. -moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
  8. -webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
  9. box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
  10. background-clip: padding-box;
  11. border-left: none;
  12. max-height: 37px;}
  13. #beakingnews .tulisbreaking{display:block;float:right;padding:0 7px;;color:#FCFCFC;background:#29BD9E;
  14. -moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
  15. -webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
  16. box-shadow: 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 -1px 1px rgba(0, 0, 0, 0.3) inset;
  17. color: #FFF;font-family:GE SS Two Medium,droidkufi-bold;font-size: 14px;
  18. line-height: 37px;padding-right: 10px;padding-left: 10px;font-weight: normal;
  19. text-transform: uppercase;}
  20. #recentpostbreaking{float:right;padding-right: 15px;}
  21. #recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}
  22. #recentpostbreaking li a{color:#333; font-family:GE SS Two Medium,droidkufi-bold;font-size:14px;}
  23. </style></b:if></b:if>


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

<div class='main-outer'>

 وألصق الكود قبله تمامأ / فوقه

  1. <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 = 'a7trafe-net.blogspot.co.il', // 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>

الان قم باستبدال الرابط التالي a7trafe-net.blogspot.co.il برابط مدونتك.

وبالاخير قم بحفظ القالب والف مبروووك عليك الاضافه

احترافي نت

أحدث التدوينات

قوالب بلوجر