إضافة شريط متحرك يضم آخر أخبار المدونة بأربعة الوان أحترافية

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

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

طريقة التركيب :

1- ادخل إلى مدونتك ، ثم اختر لوحة التحكم

2- من لوحة التحكم اختر -> قالب -> تحرير قالب HTML

3- الآن ابحث عن الوسم : بواسطة المفاتيح Ctrl+F

4- اضف الكود التالي فوقه .

الون التركواز

 /* NAVIGATION MENU */
.top-menu {
font: normal normal 12px ge_ss_threeregular,Droid Sans;
Arial, sans-serif;
margin: 0 auto;
height: 43px;
background: #3A3A3A;
overflow: hidden;
padding: 0 28px;
border-bottom: 3px solid #00e9ff;
}
.top-menu1 {
font:normal normal 12px ge_ss_threeregular,Droid Sans;
Arial, sans-serif;
margin:0 auto;
height:43px;
overflow:hidden;
padding: 11px 0px 0;
}
.menubar {
list-style-type:none;
margin:0 0 0 0;
padding:0 0 0 0;
}
.menubar li {
display:block;
float:right;
line-height:38px;
margin:0 0 0 0;
padding:0 0 0 0;
border-left:1px solid #424242;
}
.menubar li a {
background: #3A3A3A;
color: #E0E0E0;
display: block;
padding: 0 12px;
}
.menubar li a:hover {
background:#00e9ff;
}
ul.socialbar {
height:38px;
margin:0 0 0 0;
padding:0 0;
float:left;
}
ul.socialbar li {
display:inline-block;
list-style-type:none;
float:left;
margin:0 0;
padding:0 0;
border-left:none;
}

/*----navi-----*/


#nav {
font: normal bold 12px ge_ss_threeregular,Droid Sans;
Arial, sans-serif;
text-transform: uppercase;
height: 59px;
line-height: 50px;
padding: 0 28px;
background: #F4F4F4;
border-top: 1px solid #E5E5E5;
border-bottom: 1px solid #E5E5E5;
}
#main-nav {
margin: 0 auto;
width: 1160px;
height: 60px;
background: #3A3A3A;
border-bottom: 3px solid #00e9ff;
}
#main-nav .menu-alert{
float:right;
padding:18px 10px 0 0;
font-style:italic;
color:#FFF;
}
#top-menu-mob , #main-menu-mob{ display:none; }
#main-nav ul li {
text-transform: uppercase;
font-family: ge_ss_threeregular,Droid Sans;
'Droid Sans', sans-serif;
font-size:16px;
position: relative;
display: inline-block;
float: right;

height:60px;
}

#main-nav ul li:last-child a{border-left:0 none;}
#main-nav ul li a {

display: inline-block;
height: 60px;
line-height: 60px;
padding: 0 16px;
text-decoration: none;
color: #fff;
font-family: ge_ss_threeregular,Droid Sans;
Oswald,sans-serif;
text-transform: uppercase;
font-size: 15px;
cursor: pointer;
font-weight: 400;
line-height: 60px;
margin: 0;
padding: 0 .9em;
}


#main-nav ul li a.active {
background: #00e9ff;

}
#main-nav ul li a .sub-indicator{}
#main-nav ul li a:hover {}
#main-nav ul ul{
display: none;
padding: 0;
position: absolute;
top: 60px;
width: 180px;
z-index: 99999;
float: right;
background: #3a3a3a;
}
#main-nav ul ul li, #main-nav ul ul li:first-child {
background: none !important;
z-index: 99999;
min-width: 180px;
border: 0 none;
font-size: 15px;
height: auto;
margin: 0;
}
#main-nav ul ul li:first-child ,#main-nav ul li.current-menu-item ul li:first-child,
#main-nav ul li.current-menu-parent ul li:first-child,#main-nav ul li.current-page-ancestor ul li:first-child { border-top:0 none !important;}
#main-nav ul ul ul ,#main-nav ul li.current-menu-item ul ul, #main-nav ul li.current-menu-parent ul ul, #main-nav ul li.current-page-ancestor ul ul{left: auto;right: 100%; top: 0 !important; z-index: 99999; }
#main-nav ul.sub-menu a ,
#main-nav ul ul li.current-menu-item a,
#main-nav ul ul li.current-menu-parent a,
#main-nav ul ul li.current-page-ancestor a{
border: 0 none;
background: none !important;
height: auto !important;
line-height: 1em;
padding: 10px 10px;
width: 160px;
display: block !important;
margin-left: 0 !important;
z-index: 99999;
color: #fff !important;
}
#main-nav ul li.current-menu-item ul a,
#main-nav ul li.current-menu-parent ul a,
#main-nav ul li.current-page-ancestor ul a{ color:#eee !important; text-shadow:0 1px 1px #222 !important;}
#main-nav ul li:hover > a, #main-nav ul :hover > a { background: #00e9ff ;}
#main-nav ul ul li:hover > a,
#main-nav ul ul :hover > a {background: #00e9ff !important; padding-right:15px !important;padding-left:5px !important;}
#main-nav ul li:hover > ul {display: block;}
#main-nav ul li.current-menu-item,
#main-nav ul li.current-menu-parent,
#main-nav ul li.current-page-ancestor{
margin-top:0;
height:50px;
border-right:0 none !important;
}
#main-nav ul li.current-menu-item ul.sub-menu a, #main-nav ul li.current-menu-item ul.sub-menu a:hover,
#main-nav ul li.current-menu-parent ul.sub-menu a, #main-nav ul li.current-menu-parent ul.sub-menu a:hover
#main-nav ul li.current-page-ancestor ul.sub-menu a, #main-nav ul li.current-page-ancestor ul.sub-menu a:hover{background: none !important;}
#main-nav ul li.current-menu-item a, #main-nav ul li.current-menu-item a:hover,
#main-nav ul li.current-menu-parent a, #main-nav ul li.current-menu-parent a:hover,
#main-nav ul li.current-page-ancestor a, #main-nav ul li.current-page-ancestor a:hover{
background:$(maincolor);
text-shadow:0 1px 1px #b43300;
color:#FFF;
height:50px;
line-height:50px;
border-right:0 none !important;
}
#main-nav ul.sub-menu li.current-menu-item,#main-nav ul.sub-menu li.current-menu-item a,
#main-nav li.current-menu-item ul.sub-menu a,#main-nav ul.sub-menu li.current-menu-parent,
#main-nav ul.sub-menu li.current-menu-parent a,#main-nav li.current-menu-parent ul.sub-menu a,
#main-nav ul.sub-menu li.current-page-ancestor,#main-nav ul.sub-menu li.current-page-ancestor a,
#main-nav li.current-page-ancestor ul.sub-menu a{height:auto !important; line-height: 12px;}
#main-nav ul li.menu-item-home ul li a,
#main-nav ul ul li.menu-item-home a,
#main-nav ul li.menu-item-home ul li a:hover{
background-color:transparent !important;
text-indent:0;
background-image:none !important;
height:auto !important;
width:auto;
}
#main-menu-mob,#top-menu-mob{
background: #222;
width: 710px;
padding: 5px;
border: 1px solid #000;
color:#DDD;
height: 27px;
margin:13px 10px 0 0;
}
#top-menu-mob{
width: 350px;
margin:2px 0 0 0;
}
#main-nav.fixed-nav{
position:fixed;
top:0;
right:0;
width:100% !important;
z-index:999;
opacity:0.9;
-webkit-box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
-moz-box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
}

/***** Social link*****/

ul.socialbar li,ul.socialbar li{
	float: right;
	margin-left: 0px;
	margin-bottom:0px;
	padding: 0px;
    display:block;
	width: auto;
background:#3A3A3A;
}		
ul.socialbar li a, ul.socialbar li a, a.soc-follow {
	display: block;
	float: right;
	margin: 0;
	padding: 0;
	width: 40px;
	height: 43px;
	margin-bottom:2px;
	text-indent: -9999px;
	-webkit-transition: all 0.3s ease 0s;
     -moz-transition: all 0.3s ease 0s;
      -ms-transition: all 0.3s ease 0s;
       -o-transition: all 0.3s ease 0s;
          transition: all 0.3s ease 0s;
}	

a.soc-follow.dribbble {
	background: url(http://3.bp.blogspot.com/-NmMcKECatSQ/U6V_5SbOF1I/AAAAAAAAAkM/PWAmCSVs_wA/s1600/dribbble.png) no-repeat 0 0;
}
a.soc-follow.dribbble:hover {
	background-color: #ef5b92;
}

a.soc-follow.facebook {
	background: url(http://1.bp.blogspot.com/-3ho0g-Dc4Y0/U7ZbVW1tuKI/AAAAAAAAAzE/bpGJ-s7r3Wk/s1600/facebook.png) no-repeat 0 0;
}
a.soc-follow.facebook:hover{
	background-color: #3b5998;
}
a.soc-follow.flickrs {
	background: url(http://3.bp.blogspot.com/-rJglRJh1WW0/U7ZbcTKQcbI/AAAAAAAAAzk/33OW1b2t1xI/s1600/flickr.png) no-repeat 0 0;
}
a.soc-follow.flickrs:hover {
	background-color: #f1628b;
}

a.soc-follow.googleplus {
	background: url(http://3.bp.blogspot.com/-RhkXdjwgEVo/U7ZbcWu-iTI/AAAAAAAAAzo/43hPWkLD5hQ/s1600/googleplus.png) no-repeat 0 0;
}
a.soc-follow.googleplus:hover {
	background-color: #d94a39;
}


a.soc-follow.linkedin {
	background: url(http://2.bp.blogspot.com/-n0U6_fs415s/U7ZbVQ_YSRI/AAAAAAAAAzQ/wUAF46WN5oo/s1600/linkedin.png) no-repeat 0 0;
}
a.soc-follow.linkedin:hover {
	background-color: #71b2d0;
}


a.soc-follow.twitter {
	background: url(http://4.bp.blogspot.com/-sIGAQtPQHP8/U7ZbVYIZcXI/AAAAAAAAAzI/GIY14uvXhg4/s1600/twitter.png) no-repeat 0 0;
}
a.soc-follow.twitter:hover {
	background-color: #48c4d2;
}
a.soc-follow.vimeo {
	background: url(http://1.bp.blogspot.com/--F1xUtN_8FQ/U7ZbWG6lHdI/AAAAAAAAAzU/5GojeL_5aYc/s1600/vimeo.png) no-repeat 0 0;
}
a.soc-follow.vimeo:hover {
	background-color: #62a0ad;
}
 
ul.socicon-2 li a:hover, ul.socicon li a:hover, a.soc-follow:hover {
	background-position: 0 -40px;
}
#nav.fixed-nav{
position: fixed;
top: 0;
right: 0;
width: 100% !important;
z-index: 999;
background: #fff;
-webkit-box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
-moz-box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
padding: 0;
}
div.conty {
width: 1050px;
margin: 0 auto;
}



#beakingnews {
background:#3A3A3A;
float: right;
height: 42px;
line-height:  42px;
overflow: hidden;
width: 60.2%;
}
#recentpostbreaking li a {
color:#949494;
font-family: ge_ss_threeregular,Droid Sans;
sans-serif;
font-weight: bold;
}

#recentpostbreaking li a:hover {
color:#00e9ff;
}

 #beakingnews .tulisbreaking {
background:#00e9ff;
}

 #beakingnews .tulisbreaking{
color:$(mainbgfontcol.background.color) !important;
}


span.tulisbreaking:after{
content: close-quote;
position: absolute;
width: 0px;
top: 15px;
left: -12px;
border-bottom: 6px solid rgba(0, 0, 0, 0);
border-right: 6px solid #00e9ff;
border-top: 6px solid rgba(0, 0, 0, 0);
border-left: 6px solid rgba(0, 0, 0, 0);
}

#beakingnews .tulisbreaking {
color: #FFFFFF;
display: block;
float: right;
font-family: ge_ss_threeregular,Droid Sans;
sans-serif;
font-weight: bold;
padding: 0 10px;
position: absolute;
border-bottom: 1px solid #00e9ff;
}

#recentpostbreaking {
    float: right;
    margin-right: 74px;
}
#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0}
 

الون الأحمر

 /* NAVIGATION MENU */
.top-menu {
font: normal normal 12px ge_ss_threeregular,Droid Sans;
Arial, sans-serif;
margin: 0 auto;
height: 43px;
background: #3A3A3A;
overflow: hidden;
padding: 0 28px;
border-bottom: 3px solid #990000;
}
.top-menu1 {
font:normal normal 12px ge_ss_threeregular,Droid Sans;
Arial, sans-serif;
margin:0 auto;
height:43px;
overflow:hidden;
padding: 11px 0px 0;
}
.menubar {
list-style-type:none;
margin:0 0 0 0;
padding:0 0 0 0;
}
.menubar li {
display:block;
float:right;
line-height:38px;
margin:0 0 0 0;
padding:0 0 0 0;
border-left:1px solid #424242;
}
.menubar li a {
background: #3A3A3A;
color: #E0E0E0;
display: block;
padding: 0 12px;
}
.menubar li a:hover {
background:#990000;
}
ul.socialbar {
height:38px;
margin:0 0 0 0;
padding:0 0;
float:left;
}
ul.socialbar li {
display:inline-block;
list-style-type:none;
float:left;
margin:0 0;
padding:0 0;
border-left:none;
}

/*----navi-----*/


#nav {
font: normal bold 12px ge_ss_threeregular,Droid Sans;
Arial, sans-serif;
text-transform: uppercase;
height: 59px;
line-height: 50px;
padding: 0 28px;
background: #F4F4F4;
border-top: 1px solid #E5E5E5;
border-bottom: 1px solid #E5E5E5;
}
#main-nav {
margin: 0 auto;
width: 1160px;
height: 60px;
background: #3A3A3A;
border-bottom: 3px solid #990000;
}
#main-nav .menu-alert{
float:right;
padding:18px 10px 0 0;
font-style:italic;
color:#FFF;
}
#top-menu-mob , #main-menu-mob{ display:none; }
#main-nav ul li {
text-transform: uppercase;
font-family: ge_ss_threeregular,Droid Sans;
'Droid Sans', sans-serif;
font-size:16px;
position: relative;
display: inline-block;
float: right;

height:60px;
}

#main-nav ul li:last-child a{border-left:0 none;}
#main-nav ul li a {

display: inline-block;
height: 60px;
line-height: 60px;
padding: 0 16px;
text-decoration: none;
color: #fff;
font-family: ge_ss_threeregular,Droid Sans;
Oswald,sans-serif;
text-transform: uppercase;
font-size: 15px;
cursor: pointer;
font-weight: 400;
line-height: 60px;
margin: 0;
padding: 0 .9em;
}


#main-nav ul li a.active {
background: #990000;

}
#main-nav ul li a .sub-indicator{}
#main-nav ul li a:hover {}
#main-nav ul ul{
display: none;
padding: 0;
position: absolute;
top: 60px;
width: 180px;
z-index: 99999;
float: right;
background: #3a3a3a;
}
#main-nav ul ul li, #main-nav ul ul li:first-child {
background: none !important;
z-index: 99999;
min-width: 180px;
border: 0 none;
font-size: 15px;
height: auto;
margin: 0;
}
#main-nav ul ul li:first-child ,#main-nav ul li.current-menu-item ul li:first-child,
#main-nav ul li.current-menu-parent ul li:first-child,#main-nav ul li.current-page-ancestor ul li:first-child { border-top:0 none !important;}
#main-nav ul ul ul ,#main-nav ul li.current-menu-item ul ul, #main-nav ul li.current-menu-parent ul ul, #main-nav ul li.current-page-ancestor ul ul{left: auto;right: 100%; top: 0 !important; z-index: 99999; }
#main-nav ul.sub-menu a ,
#main-nav ul ul li.current-menu-item a,
#main-nav ul ul li.current-menu-parent a,
#main-nav ul ul li.current-page-ancestor a{
border: 0 none;
background: none !important;
height: auto !important;
line-height: 1em;
padding: 10px 10px;
width: 160px;
display: block !important;
margin-left: 0 !important;
z-index: 99999;
color: #fff !important;
}
#main-nav ul li.current-menu-item ul a,
#main-nav ul li.current-menu-parent ul a,
#main-nav ul li.current-page-ancestor ul a{ color:#eee !important; text-shadow:0 1px 1px #222 !important;}
#main-nav ul li:hover > a, #main-nav ul :hover > a { background: #990000 ;}
#main-nav ul ul li:hover > a,
#main-nav ul ul :hover > a {background: #990000 !important; padding-right:15px !important;padding-left:5px !important;}
#main-nav ul li:hover > ul {display: block;}
#main-nav ul li.current-menu-item,
#main-nav ul li.current-menu-parent,
#main-nav ul li.current-page-ancestor{
margin-top:0;
height:50px;
border-right:0 none !important;
}
#main-nav ul li.current-menu-item ul.sub-menu a, #main-nav ul li.current-menu-item ul.sub-menu a:hover,
#main-nav ul li.current-menu-parent ul.sub-menu a, #main-nav ul li.current-menu-parent ul.sub-menu a:hover
#main-nav ul li.current-page-ancestor ul.sub-menu a, #main-nav ul li.current-page-ancestor ul.sub-menu a:hover{background: none !important;}
#main-nav ul li.current-menu-item a, #main-nav ul li.current-menu-item a:hover,
#main-nav ul li.current-menu-parent a, #main-nav ul li.current-menu-parent a:hover,
#main-nav ul li.current-page-ancestor a, #main-nav ul li.current-page-ancestor a:hover{
background:$(maincolor);
text-shadow:0 1px 1px #b43300;
color:#FFF;
height:50px;
line-height:50px;
border-right:0 none !important;
}
#main-nav ul.sub-menu li.current-menu-item,#main-nav ul.sub-menu li.current-menu-item a,
#main-nav li.current-menu-item ul.sub-menu a,#main-nav ul.sub-menu li.current-menu-parent,
#main-nav ul.sub-menu li.current-menu-parent a,#main-nav li.current-menu-parent ul.sub-menu a,
#main-nav ul.sub-menu li.current-page-ancestor,#main-nav ul.sub-menu li.current-page-ancestor a,
#main-nav li.current-page-ancestor ul.sub-menu a{height:auto !important; line-height: 12px;}
#main-nav ul li.menu-item-home ul li a,
#main-nav ul ul li.menu-item-home a,
#main-nav ul li.menu-item-home ul li a:hover{
background-color:transparent !important;
text-indent:0;
background-image:none !important;
height:auto !important;
width:auto;
}
#main-menu-mob,#top-menu-mob{
background: #222;
width: 710px;
padding: 5px;
border: 1px solid #000;
color:#DDD;
height: 27px;
margin:13px 10px 0 0;
}
#top-menu-mob{
width: 350px;
margin:2px 0 0 0;
}
#main-nav.fixed-nav{
position:fixed;
top:0;
right:0;
width:100% !important;
z-index:999;
opacity:0.9;
-webkit-box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
-moz-box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
}

/***** Social link*****/

ul.socialbar li,ul.socialbar li{
	float: right;
	margin-left: 0px;
	margin-bottom:0px;
	padding: 0px;
    display:block;
	width: auto;
background:#3A3A3A;
}		
ul.socialbar li a, ul.socialbar li a, a.soc-follow {
	display: block;
	float: right;
	margin: 0;
	padding: 0;
	width: 40px;
	height: 43px;
	margin-bottom:2px;
	text-indent: -9999px;
	-webkit-transition: all 0.3s ease 0s;
     -moz-transition: all 0.3s ease 0s;
      -ms-transition: all 0.3s ease 0s;
       -o-transition: all 0.3s ease 0s;
          transition: all 0.3s ease 0s;
}	

a.soc-follow.dribbble {
	background: url(http://3.bp.blogspot.com/-NmMcKECatSQ/U6V_5SbOF1I/AAAAAAAAAkM/PWAmCSVs_wA/s1600/dribbble.png) no-repeat 0 0;
}
a.soc-follow.dribbble:hover {
	background-color: #ef5b92;
}

a.soc-follow.facebook {
	background: url(http://1.bp.blogspot.com/-3ho0g-Dc4Y0/U7ZbVW1tuKI/AAAAAAAAAzE/bpGJ-s7r3Wk/s1600/facebook.png) no-repeat 0 0;
}
a.soc-follow.facebook:hover{
	background-color: #3b5998;
}
a.soc-follow.flickrs {
	background: url(http://3.bp.blogspot.com/-rJglRJh1WW0/U7ZbcTKQcbI/AAAAAAAAAzk/33OW1b2t1xI/s1600/flickr.png) no-repeat 0 0;
}
a.soc-follow.flickrs:hover {
	background-color: #f1628b;
}

a.soc-follow.googleplus {
	background: url(http://3.bp.blogspot.com/-RhkXdjwgEVo/U7ZbcWu-iTI/AAAAAAAAAzo/43hPWkLD5hQ/s1600/googleplus.png) no-repeat 0 0;
}
a.soc-follow.googleplus:hover {
	background-color: #d94a39;
}


a.soc-follow.linkedin {
	background: url(http://2.bp.blogspot.com/-n0U6_fs415s/U7ZbVQ_YSRI/AAAAAAAAAzQ/wUAF46WN5oo/s1600/linkedin.png) no-repeat 0 0;
}
a.soc-follow.linkedin:hover {
	background-color: #71b2d0;
}


a.soc-follow.twitter {
	background: url(http://4.bp.blogspot.com/-sIGAQtPQHP8/U7ZbVYIZcXI/AAAAAAAAAzI/GIY14uvXhg4/s1600/twitter.png) no-repeat 0 0;
}
a.soc-follow.twitter:hover {
	background-color: #48c4d2;
}
a.soc-follow.vimeo {
	background: url(http://1.bp.blogspot.com/--F1xUtN_8FQ/U7ZbWG6lHdI/AAAAAAAAAzU/5GojeL_5aYc/s1600/vimeo.png) no-repeat 0 0;
}
a.soc-follow.vimeo:hover {
	background-color: #62a0ad;
}
 
ul.socicon-2 li a:hover, ul.socicon li a:hover, a.soc-follow:hover {
	background-position: 0 -40px;
}
#nav.fixed-nav{
position: fixed;
top: 0;
right: 0;
width: 100% !important;
z-index: 999;
background: #fff;
-webkit-box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
-moz-box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
padding: 0;
}
div.conty {
width: 1050px;
margin: 0 auto;
}



#beakingnews {
background:#3A3A3A;
float: right;
height: 42px;
line-height:  42px;
overflow: hidden;
width: 60.2%;
}
#recentpostbreaking li a {
color:#949494;
font-family: ge_ss_threeregular,Droid Sans;
sans-serif;
font-weight: bold;
}

#recentpostbreaking li a:hover {
color:#990000;
}

 #beakingnews .tulisbreaking {
background:#990000;
}

 #beakingnews .tulisbreaking{
color:$(mainbgfontcol.background.color) !important;
}


span.tulisbreaking:after{
content: close-quote;
position: absolute;
width: 0px;
top: 15px;
left: -12px;
border-bottom: 6px solid rgba(0, 0, 0, 0);
border-right: 6px solid #990000;
border-top: 6px solid rgba(0, 0, 0, 0);
border-left: 6px solid rgba(0, 0, 0, 0);
}

#beakingnews .tulisbreaking {
color: #FFFFFF;
display: block;
float: right;
font-family: ge_ss_threeregular,Droid Sans;
sans-serif;
font-weight: bold;
padding: 0 10px;
position: absolute;
border-bottom: 1px solid #990000;
}

#recentpostbreaking {
    float: right;
    margin-right: 74px;
}
#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0} 

الون الأزرق

 /* NAVIGATION MENU */
.top-menu {
font: normal normal 12px ge_ss_threeregular,Droid Sans;
Arial, sans-serif;
margin: 0 auto;
height: 43px;
background: #3A3A3A;
overflow: hidden;
padding: 0 28px;
border-bottom: 3px solid #0D76EC;
}
.top-menu1 {
font:normal normal 12px ge_ss_threeregular,Droid Sans;
Arial, sans-serif;
margin:0 auto;
height:43px;
overflow:hidden;
padding: 11px 0px 0;
}
.menubar {
list-style-type:none;
margin:0 0 0 0;
padding:0 0 0 0;
}
.menubar li {
display:block;
float:right;
line-height:38px;
margin:0 0 0 0;
padding:0 0 0 0;
border-left:1px solid #424242;
}
.menubar li a {
background: #3A3A3A;
color: #E0E0E0;
display: block;
padding: 0 12px;
}
.menubar li a:hover {
background:#0D76EC;
}
ul.socialbar {
height:38px;
margin:0 0 0 0;
padding:0 0;
float:left;
}
ul.socialbar li {
display:inline-block;
list-style-type:none;
float:left;
margin:0 0;
padding:0 0;
border-left:none;
}

/*----navi-----*/


#nav {
font: normal bold 12px ge_ss_threeregular,Droid Sans;
Arial, sans-serif;
text-transform: uppercase;
height: 59px;
line-height: 50px;
padding: 0 28px;
background: #F4F4F4;
border-top: 1px solid #E5E5E5;
border-bottom: 1px solid #E5E5E5;
}
#main-nav {
margin: 0 auto;
width: 1160px;
height: 60px;
background: #3A3A3A;
border-bottom: 3px solid #0D76EC;
}
#main-nav .menu-alert{
float:right;
padding:18px 10px 0 0;
font-style:italic;
color:#FFF;
}
#top-menu-mob , #main-menu-mob{ display:none; }
#main-nav ul li {
text-transform: uppercase;
font-family: ge_ss_threeregular,Droid Sans;
'Droid Sans', sans-serif;
font-size:16px;
position: relative;
display: inline-block;
float: right;

height:60px;
}

#main-nav ul li:last-child a{border-left:0 none;}
#main-nav ul li a {

display: inline-block;
height: 60px;
line-height: 60px;
padding: 0 16px;
text-decoration: none;
color: #fff;
font-family: ge_ss_threeregular,Droid Sans;
Oswald,sans-serif;
text-transform: uppercase;
font-size: 15px;
cursor: pointer;
font-weight: 400;
line-height: 60px;
margin: 0;
padding: 0 .9em;
}


#main-nav ul li a.active {
background: #0D76EC;

}
#main-nav ul li a .sub-indicator{}
#main-nav ul li a:hover {}
#main-nav ul ul{
display: none;
padding: 0;
position: absolute;
top: 60px;
width: 180px;
z-index: 99999;
float: right;
background: #3a3a3a;
}
#main-nav ul ul li, #main-nav ul ul li:first-child {
background: none !important;
z-index: 99999;
min-width: 180px;
border: 0 none;
font-size: 15px;
height: auto;
margin: 0;
}
#main-nav ul ul li:first-child ,#main-nav ul li.current-menu-item ul li:first-child,
#main-nav ul li.current-menu-parent ul li:first-child,#main-nav ul li.current-page-ancestor ul li:first-child { border-top:0 none !important;}
#main-nav ul ul ul ,#main-nav ul li.current-menu-item ul ul, #main-nav ul li.current-menu-parent ul ul, #main-nav ul li.current-page-ancestor ul ul{left: auto;right: 100%; top: 0 !important; z-index: 99999; }
#main-nav ul.sub-menu a ,
#main-nav ul ul li.current-menu-item a,
#main-nav ul ul li.current-menu-parent a,
#main-nav ul ul li.current-page-ancestor a{
border: 0 none;
background: none !important;
height: auto !important;
line-height: 1em;
padding: 10px 10px;
width: 160px;
display: block !important;
margin-left: 0 !important;
z-index: 99999;
color: #fff !important;
}
#main-nav ul li.current-menu-item ul a,
#main-nav ul li.current-menu-parent ul a,
#main-nav ul li.current-page-ancestor ul a{ color:#eee !important; text-shadow:0 1px 1px #222 !important;}
#main-nav ul li:hover > a, #main-nav ul :hover > a { background: #0D76EC ;}
#main-nav ul ul li:hover > a,
#main-nav ul ul :hover > a {background: #0D76EC !important; padding-right:15px !important;padding-left:5px !important;}
#main-nav ul li:hover > ul {display: block;}
#main-nav ul li.current-menu-item,
#main-nav ul li.current-menu-parent,
#main-nav ul li.current-page-ancestor{
margin-top:0;
height:50px;
border-right:0 none !important;
}
#main-nav ul li.current-menu-item ul.sub-menu a, #main-nav ul li.current-menu-item ul.sub-menu a:hover,
#main-nav ul li.current-menu-parent ul.sub-menu a, #main-nav ul li.current-menu-parent ul.sub-menu a:hover
#main-nav ul li.current-page-ancestor ul.sub-menu a, #main-nav ul li.current-page-ancestor ul.sub-menu a:hover{background: none !important;}
#main-nav ul li.current-menu-item a, #main-nav ul li.current-menu-item a:hover,
#main-nav ul li.current-menu-parent a, #main-nav ul li.current-menu-parent a:hover,
#main-nav ul li.current-page-ancestor a, #main-nav ul li.current-page-ancestor a:hover{
background:$(maincolor);
text-shadow:0 1px 1px #b43300;
color:#FFF;
height:50px;
line-height:50px;
border-right:0 none !important;
}
#main-nav ul.sub-menu li.current-menu-item,#main-nav ul.sub-menu li.current-menu-item a,
#main-nav li.current-menu-item ul.sub-menu a,#main-nav ul.sub-menu li.current-menu-parent,
#main-nav ul.sub-menu li.current-menu-parent a,#main-nav li.current-menu-parent ul.sub-menu a,
#main-nav ul.sub-menu li.current-page-ancestor,#main-nav ul.sub-menu li.current-page-ancestor a,
#main-nav li.current-page-ancestor ul.sub-menu a{height:auto !important; line-height: 12px;}
#main-nav ul li.menu-item-home ul li a,
#main-nav ul ul li.menu-item-home a,
#main-nav ul li.menu-item-home ul li a:hover{
background-color:transparent !important;
text-indent:0;
background-image:none !important;
height:auto !important;
width:auto;
}
#main-menu-mob,#top-menu-mob{
background: #222;
width: 710px;
padding: 5px;
border: 1px solid #000;
color:#DDD;
height: 27px;
margin:13px 10px 0 0;
}
#top-menu-mob{
width: 350px;
margin:2px 0 0 0;
}
#main-nav.fixed-nav{
position:fixed;
top:0;
right:0;
width:100% !important;
z-index:999;
opacity:0.9;
-webkit-box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
-moz-box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
}

/***** Social link*****/

ul.socialbar li,ul.socialbar li{
	float: right;
	margin-left: 0px;
	margin-bottom:0px;
	padding: 0px;
    display:block;
	width: auto;
background:#3A3A3A;
}		
ul.socialbar li a, ul.socialbar li a, a.soc-follow {
	display: block;
	float: right;
	margin: 0;
	padding: 0;
	width: 40px;
	height: 43px;
	margin-bottom:2px;
	text-indent: -9999px;
	-webkit-transition: all 0.3s ease 0s;
     -moz-transition: all 0.3s ease 0s;
      -ms-transition: all 0.3s ease 0s;
       -o-transition: all 0.3s ease 0s;
          transition: all 0.3s ease 0s;
}	

a.soc-follow.dribbble {
	background: url(http://3.bp.blogspot.com/-NmMcKECatSQ/U6V_5SbOF1I/AAAAAAAAAkM/PWAmCSVs_wA/s1600/dribbble.png) no-repeat 0 0;
}
a.soc-follow.dribbble:hover {
	background-color: #ef5b92;
}

a.soc-follow.facebook {
	background: url(http://1.bp.blogspot.com/-3ho0g-Dc4Y0/U7ZbVW1tuKI/AAAAAAAAAzE/bpGJ-s7r3Wk/s1600/facebook.png) no-repeat 0 0;
}
a.soc-follow.facebook:hover{
	background-color: #3b5998;
}
a.soc-follow.flickrs {
	background: url(http://3.bp.blogspot.com/-rJglRJh1WW0/U7ZbcTKQcbI/AAAAAAAAAzk/33OW1b2t1xI/s1600/flickr.png) no-repeat 0 0;
}
a.soc-follow.flickrs:hover {
	background-color: #f1628b;
}

a.soc-follow.googleplus {
	background: url(http://3.bp.blogspot.com/-RhkXdjwgEVo/U7ZbcWu-iTI/AAAAAAAAAzo/43hPWkLD5hQ/s1600/googleplus.png) no-repeat 0 0;
}
a.soc-follow.googleplus:hover {
	background-color: #d94a39;
}


a.soc-follow.linkedin {
	background: url(http://2.bp.blogspot.com/-n0U6_fs415s/U7ZbVQ_YSRI/AAAAAAAAAzQ/wUAF46WN5oo/s1600/linkedin.png) no-repeat 0 0;
}
a.soc-follow.linkedin:hover {
	background-color: #71b2d0;
}


a.soc-follow.twitter {
	background: url(http://4.bp.blogspot.com/-sIGAQtPQHP8/U7ZbVYIZcXI/AAAAAAAAAzI/GIY14uvXhg4/s1600/twitter.png) no-repeat 0 0;
}
a.soc-follow.twitter:hover {
	background-color: #48c4d2;
}
a.soc-follow.vimeo {
	background: url(http://1.bp.blogspot.com/--F1xUtN_8FQ/U7ZbWG6lHdI/AAAAAAAAAzU/5GojeL_5aYc/s1600/vimeo.png) no-repeat 0 0;
}
a.soc-follow.vimeo:hover {
	background-color: #62a0ad;
}
 
ul.socicon-2 li a:hover, ul.socicon li a:hover, a.soc-follow:hover {
	background-position: 0 -40px;
}
#nav.fixed-nav{
position: fixed;
top: 0;
right: 0;
width: 100% !important;
z-index: 999;
background: #fff;
-webkit-box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
-moz-box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
padding: 0;
}
div.conty {
width: 1050px;
margin: 0 auto;
}



#beakingnews {
background:#3A3A3A;
float: right;
height: 42px;
line-height:  42px;
overflow: hidden;
width: 60.2%;
}
#recentpostbreaking li a {
color:#949494;
font-family: ge_ss_threeregular,Droid Sans;
sans-serif;
font-weight: bold;
}

#recentpostbreaking li a:hover {
color:#0D76EC;
}

 #beakingnews .tulisbreaking {
background:#0D76EC;
}

 #beakingnews .tulisbreaking{
color:$(mainbgfontcol.background.color) !important;
}


span.tulisbreaking:after{
content: close-quote;
position: absolute;
width: 0px;
top: 15px;
left: -12px;
border-bottom: 6px solid rgba(0, 0, 0, 0);
border-right: 6px solid #0D76EC;
border-top: 6px solid rgba(0, 0, 0, 0);
border-left: 6px solid rgba(0, 0, 0, 0);
}

#beakingnews .tulisbreaking {
color: #FFFFFF;
display: block;
float: right;
font-family: ge_ss_threeregular,Droid Sans;
sans-serif;
font-weight: bold;
padding: 0 10px;
position: absolute;
border-bottom: 1px solid #0D76EC;
}

#recentpostbreaking {
    float: right;
    margin-right: 74px;
}
#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0} 

الون الأخضر

 /* NAVIGATION MENU */
.top-menu {
font: normal normal 12px ge_ss_threeregular,Droid Sans;
Arial, sans-serif;
margin: 0 auto;
height: 43px;
background: #3A3A3A;
overflow: hidden;
padding: 0 28px;
border-bottom: 3px solid #055B36;
}
.top-menu1 {
font:normal normal 12px ge_ss_threeregular,Droid Sans;
Arial, sans-serif;
margin:0 auto;
height:43px;
overflow:hidden;
padding: 11px 0px 0;
}
.menubar {
list-style-type:none;
margin:0 0 0 0;
padding:0 0 0 0;
}
.menubar li {
display:block;
float:right;
line-height:38px;
margin:0 0 0 0;
padding:0 0 0 0;
border-left:1px solid #424242;
}
.menubar li a {
background: #3A3A3A;
color: #E0E0E0;
display: block;
padding: 0 12px;
}
.menubar li a:hover {
background:#055B36;
}
ul.socialbar {
height:38px;
margin:0 0 0 0;
padding:0 0;
float:left;
}
ul.socialbar li {
display:inline-block;
list-style-type:none;
float:left;
margin:0 0;
padding:0 0;
border-left:none;
}

/*----navi-----*/


#nav {
font: normal bold 12px ge_ss_threeregular,Droid Sans;
Arial, sans-serif;
text-transform: uppercase;
height: 59px;
line-height: 50px;
padding: 0 28px;
background: #F4F4F4;
border-top: 1px solid #E5E5E5;
border-bottom: 1px solid #E5E5E5;
}
#main-nav {
margin: 0 auto;
width: 1160px;
height: 60px;
background: #3A3A3A;
border-bottom: 3px solid #055B36;
}
#main-nav .menu-alert{
float:right;
padding:18px 10px 0 0;
font-style:italic;
color:#FFF;
}
#top-menu-mob , #main-menu-mob{ display:none; }
#main-nav ul li {
text-transform: uppercase;
font-family: ge_ss_threeregular,Droid Sans;
'Droid Sans', sans-serif;
font-size:16px;
position: relative;
display: inline-block;
float: right;

height:60px;
}

#main-nav ul li:last-child a{border-left:0 none;}
#main-nav ul li a {

display: inline-block;
height: 60px;
line-height: 60px;
padding: 0 16px;
text-decoration: none;
color: #fff;
font-family: ge_ss_threeregular,Droid Sans;
Oswald,sans-serif;
text-transform: uppercase;
font-size: 15px;
cursor: pointer;
font-weight: 400;
line-height: 60px;
margin: 0;
padding: 0 .9em;
}


#main-nav ul li a.active {
background: #055B36;

}
#main-nav ul li a .sub-indicator{}
#main-nav ul li a:hover {}
#main-nav ul ul{
display: none;
padding: 0;
position: absolute;
top: 60px;
width: 180px;
z-index: 99999;
float: right;
background: #3a3a3a;
}
#main-nav ul ul li, #main-nav ul ul li:first-child {
background: none !important;
z-index: 99999;
min-width: 180px;
border: 0 none;
font-size: 15px;
height: auto;
margin: 0;
}
#main-nav ul ul li:first-child ,#main-nav ul li.current-menu-item ul li:first-child,
#main-nav ul li.current-menu-parent ul li:first-child,#main-nav ul li.current-page-ancestor ul li:first-child { border-top:0 none !important;}
#main-nav ul ul ul ,#main-nav ul li.current-menu-item ul ul, #main-nav ul li.current-menu-parent ul ul, #main-nav ul li.current-page-ancestor ul ul{left: auto;right: 100%; top: 0 !important; z-index: 99999; }
#main-nav ul.sub-menu a ,
#main-nav ul ul li.current-menu-item a,
#main-nav ul ul li.current-menu-parent a,
#main-nav ul ul li.current-page-ancestor a{
border: 0 none;
background: none !important;
height: auto !important;
line-height: 1em;
padding: 10px 10px;
width: 160px;
display: block !important;
margin-left: 0 !important;
z-index: 99999;
color: #fff !important;
}
#main-nav ul li.current-menu-item ul a,
#main-nav ul li.current-menu-parent ul a,
#main-nav ul li.current-page-ancestor ul a{ color:#eee !important; text-shadow:0 1px 1px #222 !important;}
#main-nav ul li:hover > a, #main-nav ul :hover > a { background: #055B36 ;}
#main-nav ul ul li:hover > a,
#main-nav ul ul :hover > a {background: #055B36 !important; padding-right:15px !important;padding-left:5px !important;}
#main-nav ul li:hover > ul {display: block;}
#main-nav ul li.current-menu-item,
#main-nav ul li.current-menu-parent,
#main-nav ul li.current-page-ancestor{
margin-top:0;
height:50px;
border-right:0 none !important;
}
#main-nav ul li.current-menu-item ul.sub-menu a, #main-nav ul li.current-menu-item ul.sub-menu a:hover,
#main-nav ul li.current-menu-parent ul.sub-menu a, #main-nav ul li.current-menu-parent ul.sub-menu a:hover
#main-nav ul li.current-page-ancestor ul.sub-menu a, #main-nav ul li.current-page-ancestor ul.sub-menu a:hover{background: none !important;}
#main-nav ul li.current-menu-item a, #main-nav ul li.current-menu-item a:hover,
#main-nav ul li.current-menu-parent a, #main-nav ul li.current-menu-parent a:hover,
#main-nav ul li.current-page-ancestor a, #main-nav ul li.current-page-ancestor a:hover{
background:$(maincolor);
text-shadow:0 1px 1px #b43300;
color:#FFF;
height:50px;
line-height:50px;
border-right:0 none !important;
}
#main-nav ul.sub-menu li.current-menu-item,#main-nav ul.sub-menu li.current-menu-item a,
#main-nav li.current-menu-item ul.sub-menu a,#main-nav ul.sub-menu li.current-menu-parent,
#main-nav ul.sub-menu li.current-menu-parent a,#main-nav li.current-menu-parent ul.sub-menu a,
#main-nav ul.sub-menu li.current-page-ancestor,#main-nav ul.sub-menu li.current-page-ancestor a,
#main-nav li.current-page-ancestor ul.sub-menu a{height:auto !important; line-height: 12px;}
#main-nav ul li.menu-item-home ul li a,
#main-nav ul ul li.menu-item-home a,
#main-nav ul li.menu-item-home ul li a:hover{
background-color:transparent !important;
text-indent:0;
background-image:none !important;
height:auto !important;
width:auto;
}
#main-menu-mob,#top-menu-mob{
background: #222;
width: 710px;
padding: 5px;
border: 1px solid #000;
color:#DDD;
height: 27px;
margin:13px 10px 0 0;
}
#top-menu-mob{
width: 350px;
margin:2px 0 0 0;
}
#main-nav.fixed-nav{
position:fixed;
top:0;
right:0;
width:100% !important;
z-index:999;
opacity:0.9;
-webkit-box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
-moz-box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
}

/***** Social link*****/

ul.socialbar li,ul.socialbar li{
	float: right;
	margin-left: 0px;
	margin-bottom:0px;
	padding: 0px;
    display:block;
	width: auto;
background:#3A3A3A;
}		
ul.socialbar li a, ul.socialbar li a, a.soc-follow {
	display: block;
	float: right;
	margin: 0;
	padding: 0;
	width: 40px;
	height: 43px;
	margin-bottom:2px;
	text-indent: -9999px;
	-webkit-transition: all 0.3s ease 0s;
     -moz-transition: all 0.3s ease 0s;
      -ms-transition: all 0.3s ease 0s;
       -o-transition: all 0.3s ease 0s;
          transition: all 0.3s ease 0s;
}	

a.soc-follow.dribbble {
	background: url(http://3.bp.blogspot.com/-NmMcKECatSQ/U6V_5SbOF1I/AAAAAAAAAkM/PWAmCSVs_wA/s1600/dribbble.png) no-repeat 0 0;
}
a.soc-follow.dribbble:hover {
	background-color: #ef5b92;
}

a.soc-follow.facebook {
	background: url(http://1.bp.blogspot.com/-3ho0g-Dc4Y0/U7ZbVW1tuKI/AAAAAAAAAzE/bpGJ-s7r3Wk/s1600/facebook.png) no-repeat 0 0;
}
a.soc-follow.facebook:hover{
	background-color: #3b5998;
}
a.soc-follow.flickrs {
	background: url(http://3.bp.blogspot.com/-rJglRJh1WW0/U7ZbcTKQcbI/AAAAAAAAAzk/33OW1b2t1xI/s1600/flickr.png) no-repeat 0 0;
}
a.soc-follow.flickrs:hover {
	background-color: #f1628b;
}

a.soc-follow.googleplus {
	background: url(http://3.bp.blogspot.com/-RhkXdjwgEVo/U7ZbcWu-iTI/AAAAAAAAAzo/43hPWkLD5hQ/s1600/googleplus.png) no-repeat 0 0;
}
a.soc-follow.googleplus:hover {
	background-color: #d94a39;
}


a.soc-follow.linkedin {
	background: url(http://2.bp.blogspot.com/-n0U6_fs415s/U7ZbVQ_YSRI/AAAAAAAAAzQ/wUAF46WN5oo/s1600/linkedin.png) no-repeat 0 0;
}
a.soc-follow.linkedin:hover {
	background-color: #71b2d0;
}


a.soc-follow.twitter {
	background: url(http://4.bp.blogspot.com/-sIGAQtPQHP8/U7ZbVYIZcXI/AAAAAAAAAzI/GIY14uvXhg4/s1600/twitter.png) no-repeat 0 0;
}
a.soc-follow.twitter:hover {
	background-color: #48c4d2;
}
a.soc-follow.vimeo {
	background: url(http://1.bp.blogspot.com/--F1xUtN_8FQ/U7ZbWG6lHdI/AAAAAAAAAzU/5GojeL_5aYc/s1600/vimeo.png) no-repeat 0 0;
}
a.soc-follow.vimeo:hover {
	background-color: #62a0ad;
}
 
ul.socicon-2 li a:hover, ul.socicon li a:hover, a.soc-follow:hover {
	background-position: 0 -40px;
}
#nav.fixed-nav{
position: fixed;
top: 0;
right: 0;
width: 100% !important;
z-index: 999;
background: #fff;
-webkit-box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
-moz-box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
box-shadow: 0 5px 3px rgba(0, 0, 0, .1);
padding: 0;
}
div.conty {
width: 1050px;
margin: 0 auto;
}



#beakingnews {
background:#3A3A3A;
float: right;
height: 42px;
line-height:  42px;
overflow: hidden;
width: 60.2%;
}
#recentpostbreaking li a {
color:#949494;
font-family: ge_ss_threeregular,Droid Sans;
sans-serif;
font-weight: bold;
}

#recentpostbreaking li a:hover {
color:#055B36;
}

 #beakingnews .tulisbreaking {
background:#055B36;
}

 #beakingnews .tulisbreaking{
color:$(mainbgfontcol.background.color) !important;
}


span.tulisbreaking:after{
content: close-quote;
position: absolute;
width: 0px;
top: 15px;
left: -12px;
border-bottom: 6px solid rgba(0, 0, 0, 0);
border-right: 6px solid #055B36;
border-top: 6px solid rgba(0, 0, 0, 0);
border-left: 6px solid rgba(0, 0, 0, 0);
}

#beakingnews .tulisbreaking {
color: #FFFFFF;
display: block;
float: right;
font-family: ge_ss_threeregular,Droid Sans;
sans-serif;
font-weight: bold;
padding: 0 10px;
position: absolute;
border-bottom: 1px solid #055B36;
}

#recentpostbreaking {
    float: right;
    margin-right: 74px;
}
#recentpostbreaking ul,#recentpostbreaking li{list-style:none;margin:0;padding:0} 

5- الآن ابحث عن الوسم : بواسطة المفاتيح Ctrl+F

6- اضف الكود التالي تحته مباشرة .

 <!-- outer-wrapper start -->
    <div id='outer-wrapper'>
      <div id='top-nav'>

        <nav class='top-menu'>
         <div id='beakingnews'><span class='tulisbreaking'>آخر الأخبار</span>
  <div id='recentpostbreaking'>Loading...</div></div>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
var url_blog = 'http://www.homeblog7.blogspot.com/', // Replace With your Blog Url
    numpostx 	= 20; // Maximum Post
$.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>



<ul class='socialbar'>
  <li><a class='soc-follow facebook' href='#' title='facebook'/></li>
  <li><a class='soc-follow twitter' href='#' title='twitter'/></li>
  <li><a class='soc-follow vimeo' href='#' title='vimeo'/></li>
  <li><a class='soc-follow flickrs' href='#' title='flickr'/></li>
  <li><a class='soc-follow dribbble' href='#' title='dribbble'/></li>
  <li><a class='soc-follow linkedin' href='#' title='linkedin'/></li>
  <li><a class='soc-follow googleplus' href='#' title='google plus'/></li>
  </ul>

          <!-- social media button end -->
        </nav>
      </div></div>
      <div class='clear'/> 

7- ابحث عن رابط مدونتنا في الكود واستبدله برابط مدونتك : http://www.homeblog7.blogspot.com/

8- احفظ القالب .

انقر هنا للمعاينة