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

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

كيفية اضافة شريط احدث الاخبار الى مدوناتكم

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; 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:#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>

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

<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>

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

<div class='main-outer'>

والم تجدة ابحث عن

<div id='main-wrapper'>

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

<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://alb33dani.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://alb33dani.com برابط مدونتك 
ستجد الرابط في السطر التاسع من الكود السابق باللون الازرق

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

المصدر مصدر الاخ الحبيب البعدانى

خدمة تصميم الشعارات المجانية مدى الحياة فقط من جزيرة التدوين

انها ااول خدمة تصميم شعارات مجانية مدى الحياى تصميم اى شعار تريد

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

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

شروط الخدمة

الانضمام الى متابعى المدونة

لا شروط اخرى

كيفية طلب الخدمة

بعد الانضمام

اكتب اسم الموضوع او المدونة المراد تصميم الشعار لها

2-رابط المدونة

3- بريدك الالكترونى الذى انضممت بة

اكتب كل هذا فى تعليق 

 

القالب الاعلانى الرائع للتحميل

---

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

هلا متابعى هوستاتى الويب معانا درس جديد

قالب AndTrimo بلوجر لـ دليل المواقع من تصميم هوستاتى الويب

هو قالب متخصص فقط لـ دليل المواقع

بـ معنى لان يصلح لـ تدوين وتقديم الشروحات وهكذا

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

1 - اضافة اداء التعليق فى المشاركات

2 - اضافة اداء موضيع متشابه وهكذا

وهكذا يصبح صالح للتدوين

للمعاينة القالب



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

دور التحميل

للمعاينة القالب 

تحميل الملف المرفق (حجم الملف 49.9 كيلوبايت)

قائمة علوية مميزة لمدونتك CSS3 dropdown menu من مدونتك

إخواني الكرام اليوم اتيتكم بقائمة علوية مميزة بتقنية CSS3 

يمكنك إضافتها لمدونتك كقائمة رئيسية او تانوية الجميل فيها هو الشكل وتأثير القائمة المنسدلة رائع

صورة توضيحية

 

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

أولا قم بالبحث عن

ثم فوقه ضع هذا الكود

/* Main */

#menu{

        width: 100%;

        margin: 0;

        padding: 10px 0 0 0;

        list-style: none; 

        background: #111;

        background: -moz-linear-gradient(#444, #111);

        background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));

        background: -webkit-linear-gradient(#444, #111);     

        background: -o-linear-gradient(#444, #111);

        background: -ms-linear-gradient(#444, #111);

        background: linear-gradient(#444, #111);

        -moz-border-radius: 50px;

        border-radius: 50px;

        -moz-box-shadow: 0 2px 1px #9c9c9c;

        -webkit-box-shadow: 0 2px 1px #9c9c9c;

        box-shadow: 0 2px 1px #9c9c9c;

}

#menu li{

        float: left;

        padding: 0 0 10px 0;

        position: relative;

}

#menu a{

        float: left;

        height: 25px;

        padding: 0 25px;

        color: #999;

        text-transform: uppercase;

        font: bold 12px/25px Arial, Helvetica;

        text-decoration: none;

        text-shadow: 0 1px 0 #000;

}

#menu li:hover &gt; a{

        color: #fafafa;

}

*html #menu li a:hover{ /* IE6 */

        color: #fafafa;

}

#menu li:hover &gt; ul{

        display: block;

}

/* Sub-menu */

#menu ul{

    list-style: none;

    margin: 0;

    padding: 0;   

    display: none;

    position: absolute;

    top: 35px;

    left: 0;

    z-index: 99999;   

    background: #444;

    background: -moz-linear-gradient(#444, #111);

    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));

    background: -webkit-linear-gradient(#444, #111);   

    background: -o-linear-gradient(#444, #111);     

    background: -ms-linear-gradient(#444, #111);    

    background: linear-gradient(#444, #111); 

    -moz-border-radius: 5px;

    border-radius: 5px;

}

#menu ul li{

    float: none;

    margin: 0;

    padding: 0;

    display: block; 

    -moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;

    -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;

    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;

}

#menu ul li:last-child{  

    -moz-box-shadow: none;

    -webkit-box-shadow: none;

    box-shadow: none;   

}

#menu ul a{   

    padding: 10px;

    height: auto;

    line-height: 1;

    display: block;

    white-space: nowrap;

    float: none;

    text-transform: none;

}

*html #menu ul a{ /* IE6 */  

        height: 10px;

        width: 150px;

}

*:first-child+html #menu ul a{ /* IE7 */   

        height: 10px;

        width: 150px;

}

#menu ul a:hover{

        background: #0186ba;

        background: -moz-linear-gradient(#04acec,  #0186ba); 

        background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));

        background: -webkit-linear-gradient(#04acec,  #0186ba);

        background: -o-linear-gradient(#04acec,  #0186ba);

        background: -ms-linear-gradient(#04acec,  #0186ba);

        background: linear-gradient(#04acec,  #0186ba);

}

#menu ul li:first-child a{

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

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

    border-radius: 5px 5px 0 0;

}

#menu ul li:first-child a:after{

    content: '';

    position: absolute;

    left: 30px;

    top: -8px;

    width: 0;

    height: 0;

    border-left: 5px solid transparent;

    border-right: 5px solid transparent;

    border-bottom: 8px solid #444;

}

#menu ul li:first-child a:hover:after{

    border-bottom-color: #04acec;

}

#menu ul li:last-child a{

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

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

    border-radius: 0 0 5px 5px;

}

/* Clear floated elements */

#menu:after{

        visibility: hidden;

        display: block;

        font-size: 0;

        content: " ";

        clear: both;

        height: 0;

}

* html #menu             { zoom: 1; } /* IE6 */

*:first-child+html #menu { zoom: 1; } /* IE7 */

والخطوة التانية هي إختيار مكان ضهور القائمة هل فوق الهيدر أم اسفله

لوضعها فوق الهيدر فقط إبحث عن الكود الخاص بالهيدر وضع كود القائمة فوقه

وإن أردت وضع القائمة أسفل الهيدر ضعها أسفل الكود الخاص بالهيدر

<ul id="menu">

        <li><a href="#">Home</a></li>

        <li>

               <a href="#">Categories</a>

               <ul>

                       <li><a href="#">CSS</a></li>

                       <li><a href="#">Graphic design</a></li>

                       <li><a href="#">Development tools</a></li>

                       <li><a href="#">Web design</a></li>

               </ul>

        </li>

        <li><a href="#">Work</a></li>

        <li><a href="#">About</a></li>

        <li><a href="#">Contact</a></li>

</ul>

 

صورة توضيحية 

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

القائمة لازالت باللغة الإنجليزية لمن ارادها معربة يضع ردا ليتم تعريب القائمة 

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