1. من القالب ابحث عن ]]></b:skin> وضع كود الشكل المختار فوقه
الشكل الأول
.ticker {overflow: hidden;}
.ticker .title {float: right; width: 130px; height: 40px; line-height: 40px; text-align: center; color: #FFFFFF; background: #269bd0;}
.post-tag{display: inline-block;height: 20px;line-height: 20px;padding: 0px 5px;font-size: 13px;margin-left: 4px;color: #fff !important;font:13px/1.5em tahoma;background-color: #B565BE;}
.ticker .ticker-icon {float: right;margin-right: 10px;}
.ticker .ticker-icon i {margin-left: 15px;display: inline-block;font-size: 18px;}
.ticker .title h6 {text-align: right; line-height: 40px; font-size: 13px; font-weight: bold; font-family: 'Droid Arabic Naskh',sans-serif; color: #fff;}
.ticker .tickercontainer {width: 84%;margin: 0;overflow: hidden;float: right;height: 40px;}
.ticker .tickercontainer .mask {position: relative;top: 8px;overflow: hidden;height: 40px;}
.ticker ul.newsticker {position: relative;right: 100px;list-style-type: none;margin: 0;padding: 0;height: 40px;}
.ticker ul.newsticker li {float: right;padding: 2px;height: 40px;margin-left: 15px;}
.ticker ul.newsticker a {white-space: nowrap;padding: 0 7px;color: #FFFFFF;font-size: 13px;font-weight:400;font:13px/1.5em tahoma;}
a.post-tag {line-height: 21px;}
.newsticker li:nth-child(1) a.post-tag{background-color: #2C97DE;}
.newsticker li:nth-child(2) a.post-tag{background-color: #A557A5;}
.newsticker li:nth-child(3) a.post-tag{background-color: #1E73BE;}
.newsticker li:nth-child(4) a.post-tag{background-color: #DD3333;}
.newsticker li:nth-child(5) a.post-tag{background-color: #E94B35;}
.newsticker li:nth-child(6) a.post-tag{background-color: #1EBE65;}
.newsticker li:nth-child(7) a.post-tag{background-color: #F7B625;}
.newsticker li:nth-child(8) a.post-tag{background-color: #479123;}
.newsticker .recent-title{display: inline-block;}
.ticker ul.newsticker span {margin: 0 0 0 10px;}
.ticker ul.newsticker .sep {display: inline-block;width: 6px;height: 7px;margin: 0 40px;}
.ticker-section {width: 100%; overflow: hidden; background: #414D58; box-shadow: inset 0 5px 0 rgba(0,0,0,0.04);}
.jari { color: #fff; position: relative; right: 5px; }
@media only screen and (max-width:640px){
.ticker .title{display:none}
.ticker .tickercontainer {width: 95%;}}
الشكل الثاني
/* CSS Breaking News */
#breakingnews {height: 42px; line-height: 29px; overflow: hidden; background: #FFFFFF; border: 1px solid #E6E4E4; width: 95%; margin: 20px auto;}
#breakingnews .breakhead {position:relative;background:none repeat scroll 0 0 #C03032;color:#fff;display:block;float:right;font-size:14px;font-weight:400;text-transform:uppercase;padding:6.5px 22px; font-family: Droid Arabic Naskh;}
#adbreakingnews li a {font:13px/1.5em tahoma;font-weight:400;color:#666;margin-top:10px;transition:all 0.5s ease-in-out;}
#adbreakingnews li a:hover {color:#00AFAF;}
#adbreakingnews {float:right;margin-right:25px;margin-top:6px;}
#adbreakingnews ul,#adbreakingnews li{list-style:none;margin:0;padding:0}
i.fa.fa-youtube { color: #EC2423; }i.fa.fa-facebook { color: #4770C5; }i.fa.fa-google-plus { color: #F51518; }i.fa.fa-twitter { color: #269bd0; }
li.socright { float: left; padding: 5px 15px; line-height: 33px; margin: 0 0px; background-color:#F7F8F9; font-size: 18px; border-right: 1px solid #EFECEC; }
@media only screen and (max-width:640px){
#breakingnews {margin:20px 0 0 0;margin-right:0;}
#breakingnews .breakhead {padding:6.5px 14px;}
#adbreakingnews {margin-left:50px;}}
الشكل الأول
<script src='https://googledrive.com/host/0B0LkZloPKBfWSkI0T0R5VkVMQ0U'/>
<script>
//<![CDATA[
$(".ticker .jari").each(function () {
var e = $(this).text();
if (e.match("recent")) {
$.ajax({
url: "/feeds/posts/default?alt=json-in-script&max-results=6",
type: "get",
dataType: "jsonp",
success: function (e) {
var t = "";
var n = "<ul>";
for (var r = 0; r < e.feed.entry.length; r++) {
for (var i = 0; i < e.feed.entry[r].link.length; i++) {
if (e.feed.entry[r].link[i].rel == "alternate") {
t = e.feed.entry[r].link[i].href;
break
}
}
var s = e.feed.entry[r].title.$t;
var o = e.feed.entry[r].category[0].term;
n += '<li><a href="/search/label/' + o + '" class="post-tag">' + o + '</a><h3 class="recent-title"><a href="' + t + '">' + s + "</a></h3></li>"
}
n += "</ul>";
$(".ticker .jari").each(function () {
$(this).html(n);
$(this).prev("h2").prepend('<i class="fa fa-thumb-tack"></i>');
$(this).removeClass("widget-content").addClass("layout-content");
$(this).find("ul").webTicker();
$("p.trans").each(function () {
var e = $(this).text();
var t = $(this).attr("data-tran");
$("#pages-wrapper *").replaceText(e, t)
})
})
}
})
} else {
$.ajax({
url: "/feeds/posts/default/-/" + e + "?alt=json-in-script&max-results=10",
type: "get",
dataType: "jsonp",
success: function (e) {
var t = "";
var n = "<ul>";
for (var r = 0; r < e.feed.entry.length; r++) {
for (var i = 0; i < e.feed.entry[r].link.length; i++) {
if (e.feed.entry[r].link[i].rel == "alternate") {
t = e.feed.entry[r].link[i].href;
break
}
}
var s = e.feed.entry[r].title.$t;
var o = e.feed.entry[r].category[0].term;
n += '<li><a href="/search/label/' + o + '" class="post-tag">' + o + '</a><h3 class="recent-title"><a href="' + t + '">' + s + "</a></h3></li>"
}
n += "</ul>";
$(".ticker .jari").each(function () {
$(this).html(n);
$(this).prev("h2").prepend('<i class="fa fa-thumb-tack"></i>');
$(this).removeClass("widget-content").addClass("layout-content");
$(this).find("ul").webTicker();
$("p.trans").each(function () {
var e = $(this).text();
var t = $(this).attr("data-tran");
$("#pages-wrapper *").replaceText(e, t)
})
})
}
})
}
});
//]]>
</script>
الشكل الثاني
<script type='text/javascript'>
//<![CDATA[
// Breaking News
$(document).ready(function(){var e="http://rissalat-i.blogspot.com/",t=20;$.ajax({url:""+e+"/feeds/posts/default?alt=json-in-script&max-results="+t,type:"get",dataType:"jsonp",success:function(e){function t(){$("#adbreakingnews li:first").slideUp(function(){$(this).appendTo($("#adbreakingnews ul")).slideDown()})}var n,r,s="",a=e.feed.entry;if(void 0!==a){s="<ul>";for(var l=0;l<a.length;l++){for(var o=0;o<a[l].link.length;o++)if("alternate"==a[l].link[o].rel){n=a[l].link[o].href;break}r=a[l].title.$t,s+='<li><a href="'+n+'" target="_blank">'+r+"</a></li>"}s+="</ul>",$("#adbreakingnews").html(s),setInterval(function(){t()},5e3)}else $("#adbreakingnews").html("<span>لا نتائج!</span>")},error:function(){$("#adbreakingnews").html("<strong>!خطأ في جلب التغذية</strong>")}})});
//]]>
</script>
الشكل الأول
<div class='clear'/>
<div class='ticker ticker-section' id='ticker'>
<div>
<div>
<div class='content-wrap container-wrapper '>
<div class='title second-color-bg '>
<div class='ticker-icon'> <i class='fa fa-globe'/> </div>
<h6>آخر الصيحات</h6>
</div>
<div class='jari'>
recent
</div>
</div>
</div>
</div>
</div>
الشكل الثاني
<div id='breakingnews'><span class='breakhead'><i class='fa fa-rss'/> آخر الأخبار </span>
<div id='adbreakingnews'>... جاري التحميل</div>
<ul>
<li class='socright'>
<a href='#' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a>
</li>
<li class='socright'>
<a href='#' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a>
</li>
<li class='socright'>
<a href='#' rel='nofollow' target='_blank'><i class='fa fa-youtube'/></a>
</li>
<li class='socright'>
<a href='#' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a>
</li>
</ul>
</div>
* في كود الشكل الثاني بالمرحلة 2 غير http://rissalat-i.blogspot.com/ برابط موقعك
* لتحكم في طول الشريط فالمقاسات محددة بالأخضر في كِلا الكودين بالمرحلة 1
* لتغيير لون مربع العنوان فهو محدد بالأزرق بالمرحلة 1
* إذا لم تظهر لك الأيقونات أضف الكود التالي فوق </head>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'/>
0 تعليقات على " إضافة شريط آخر الأخبار لقوالب بلوجر "