السلام عليكم ورحمة الله ، مرحبا بكم مجددا في موضوع جديد وحصري لمدونة شبكة ابو يوسف ،اليوم باذن الله سنقوم باضافة اداه جديدة وسهله, وهي عباره عن شريط متحرك بالوان مختلفه يضم اخر اخبار المدونه بشكل احترافي , هذه الاداه تقوم بعرض اخر اخبار المدونه على شكل شريط افقي متحرك يتم وضعه اسفل الهيدر بحيث يكسب الصفحة ديناميكية ويسهل للزائر التعرف على المواضيع الحديثة في المدونة .تتميز هذه الاضافه بجماليتها وبخفتها وقد قمت بتوفيرها بعدة الوان لكي تتناسب مع اكثر القوالب شيوعا ,وايضا ارضاءً لجميع الاذواق ,,اطيل عليكم هذه المره سوف اترككم مع الشرح
كيفية اضافة شريط مواضيع حديثة الى مدوناتكم
1- من لوحة التحكم -> قالب -> تحرير HTML
2- خذ نسخه احتياطيه لـ قالب المدونه قبل إجراء أية تغييرات
3- قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F)
وقبله تماما قم بلصق الكود التالي
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
#beakingnews{width:661px;margin:0 auto ;line-height:37px;;overflow:hidden; margin-bottom: 10px; max-height: 37px; overflow: hidden;
background: linear-gradient(to top,#ffffff , #54BCF7 ) repeat ;
-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;border: 2px solid #0CA5EC;}
#beakingnews .tulisbreaking{display:block;float:right;padding:0 7px;;color:#FCFCFC;background:#0CA5EC;
-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: 16px;
line-height: 37px;padding-right: 10px;padding-left: 10px;font-weight: bold;
text-transform: uppercase;}
#recentpostbreaking{float:right;padding-right: 15px;}
#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}
#recentpostbreaking li a{color:#000; font-family:GE SS Two Medium,droidkufi-bold;font-size:16px;font-weight: bold;}
</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'>
او <div id='container'>
<div id='content'>
ونلصق الكود التالي من بعده
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<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://merimiweb1.blogspot.com/', // alamat blogmu contoh http://adnanos84.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
الان قم باستبدال رابط 'http://merimiweb1.blogspot.com/' برابطك و بالأخير قم بحفظ القالب
المصدر:شبكة ابويوسف http://merimiweb1.blogspot.com/2014/07/blog-post_4108.html#ixzz3DxRiKGUz
مدونة يوسف عربية منوعة ستجد فيها معلومات قيمة و قصص رائعة ان ابحرت في أقسامها ستجد الكثير من المتعة والفائدة للمزيد توجه الى مدونة يوسف
قم بتغيير الكلمة
0 تعليق
