تركيب الاضافة :
ادخل قالبك.
واختر مكان مناسب وجيد لوضع الاضافة فيه , مثل اسفل الـ class='page'
والصق هذا الكود مع تعديل ما سأذكر :
<script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src='https://googledrive.com/host/0B7Zz9NWIHEOXeHpGODNVeVktSkk'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "http://i.imgur.com/7WK8lcQ.png";
showRandomImg = true;
aBold = true;
summaryPost = 100;
summaryPost1 = 200;
numposts = 4;
numposts1 = 4;
numposts2 = 4;
numposts6 = 4;
Title1 = "CSS1";
Title2 = "CSS2";
Title3 = "CSS3";
Title4 = "CSS4";
Title5 = "CSS5";
Title6 = "CSS6";
//]]></script>
<div class='cf' id='tabber-wrapper'>
<ul class='tab-view'>
<li><a href='#tab1'><script>document.write(Title1);</script></a></li>
<li><a href='#tab2'><script>document.write(Title2);</script></a></li>
<li><a href='#tab3'><script>document.write(Title3);</script></a></li>
<li><a href='#tab4'><script>document.write(Title4);</script></a></li>
<li><a href='#tab5'><script>document.write(Title5);</script></a></li>
<li><a href='#tab6'><script>document.write(Title6);</script></a></li>
</ul><div class='clear'/>
<div class='tab-wrapper'>
<div class='tabber' id='tab1'>
<script>
document.write(" <script src=\"/feeds/posts/default/-/CSS1?max-results="+numposts2+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script></div>
<div class='tabber' id='tab2'>
<script>
document.write(" <script src=\"/feeds/posts/default/-/CSS2?max-results="+numposts2+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script></div>
<div class='tabber' id='tab3'>
<script>
document.write(" <script src=\"/feeds/posts/default/-/CSS3?max-results="+numposts2+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script></div>
<div class='tabber' id='tab4'>
<script>
document.write(" <script src=\"/feeds/posts/default/-/CSS4?max-results="+numposts2+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script></div>
<div class='tabber' id='tab5'>
<script>
document.write(" <script src=\"/feeds/posts/default/-/CSS5?max-results="+numposts2+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script></div>
<div class='tabber' id='tab6'>
<script>
document.write(" <script src=\"/feeds/posts/default/-/CSS6?max-results="+numposts2+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script></div>
<div class='clear'/>
</div></div><script type='text/javascript'>
//<![CDATA[
var _0x3c49=["hide",".tabber","show","active","addClass","ul.tab-view li:first",".tabber:first","removeClass","ul.tab-view li","href","attr","a","find","fadeIn","click","ready"];jQuery(document)[_0x3c49[15]](function (){$(_0x3c49[1])[_0x3c49[0]]();$(_0x3c49[5])[_0x3c49[4]](_0x3c49[3])[_0x3c49[2]]();$(_0x3c49[6])[_0x3c49[2]]();$(_0x3c49[8])[_0x3c49[14]](function (){$(_0x3c49[8])[_0x3c49[7]](_0x3c49[3]);$(this)[_0x3c49[4]](_0x3c49[3]);$(_0x3c49[1])[_0x3c49[0]]();var _0x88b3x1=$(this)[_0x3c49[12]](_0x3c49[11])[_0x3c49[10]](_0x3c49[9]);$(_0x88b3x1)[_0x3c49[13]]();return false;} );} );
//]]>
</script>
<style>
#tabber-wrapper {
width: 100%;
float: right;
overflow: hidden;
background: #fff;
margin-right: 10px;
max-height: 230px;
overflow-y: hidden;
}
.tabber .column_img:hover {
margin-bottom: 12px;
opacity: .9;
transition: all .6s;
}
ul.tab-view {
float: right;
list-style: none;
width: 100%;
margin: 0;
padding: 5px 5px 6px;
font-family: 'Droid Arabic Naskh';
background: #FFFFFF;
border-bottom: 3px solid #F3F3F3;
}
ul.tab-view li {
float: right;
height: 26px;
line-height: 26px;
overflow: hidden;
position: relative;
margin: 0;
padding: 0;
margin-left: 9px;
}
ul.tab-view li a {
text-decoration: none;
color: #333;
display: block;
outline: none;
font-weight: 400;
padding: 0 15px;
background-color: rgba(109, 109, 109, 0.1);
}
ul.tabs li:hover {
border-radius: 0;
}
ul.tab-view li a:hover,ul.tabs li:hover{
background-color: #ECBA7B;
border-radius: 5px;
color: #fff;
}
html ul.tab-view li.active, html ul.tab-view li.active a, html ul.tab-view li.active a:hover {
color: #fff;
background: #67B587;
border-radius: 2px;
text-shadow: none;
}
.tab-wrapper {
overflow: hidden;
clear: both;
float: right;
width: 100%;
margin-bottom: 10px;
}
.tabber { padding: 5px 0 0 }
.tabber .column {
float: right;
display: inline;
width: 180px;
height: 150px;
margin-right: 5px;
margin-bottom: 35px;
padding: 2px 2px 5px;
}
.tabber .column_img {
background: #fff;
padding: 0px;
width: 180px;
height: 175px;
margin: 0;
transition: all .6s;
}
.tabber h2 {
line-height: 18px;
text-align: center;
background: rgba(0, 0, 0, 0.35);
padding: 10px 0 10px 21px;
width: 179px;
position: relative;
bottom: 80px;
opacity: .9;
font-family: cursive;
font-size: 12px;
margin-left: 0px;
margin-right: 1px;
font-weight: 400;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.tabber h2 a { color: #FFF }
.tabber h2 a:hover {
color: #FFF;
text-decoration: none;
}
</style>
