JQuery Featured Content Slideshow fcs jcs 2fcs jnt niv

Jquery featured content slider 2 for Blogger



Langkah1: Masuk ke menu 'Edit HTML'.
Langkah2: Gunakan 'Menu Find' (control+F) di browser anda untuk menemukan kode.
Langlah3: Pasang Script berikut diatas kode </head>
<style type='text/css'>
#subHeader{width:630px;height:260px;background-color:white;position:relative;overflow:hidden;}
#subHeader #sizzle img{float:left;width:630px;height:260px}
#subHeader #sizzle{position:absolute;}
#subHeader #sizzles ul{list-style:none;float:left;}
#subHeader #sizzles ul li{list-style:none;float:left;}
#subHeader #sizzles{float:left;width: 630px;position:absolute}
#subHeader #sizzles img{width:630px;height:260px;position:absolute;}

#subHeader .sizzle_caption{position:absolute;margin-top:15px;margin-left:5px;font-weight:bold;color:white;font-size:15px;}
#subHeader .sizzle_title{
background:url(&#39;http://www.abu-farhan.com/wp-content/themes/af-theme/feature/transpBlack.png&#39;) repeat transparent;
position:absolute;
font-style:italic;
margin-top:170px;
left:0;
height:200px;
font-size:17px;
color:white;
width:100%;
line-height:17px;
padding:10px;
}
#subHeader .sizzle_title div{font-size:13px;font-style:normal;}
#subHeader .sizzle_title a{color:#e15c00;font-size:23px;font-family:Calibri, Helvetica Neue, Liberation Sans, sans-serif;font-weight:700}
#subHeader #sizzle_items{background:url(&#39;http://www.abu-farhan.com/wp-content/themes/af-theme/feature/transpBlack.png&#39;) repeat;position:absolute;bottom:0;left:0;line-height:10px;width:100%;padding:12px}
#subHeader #sizzle_items,#subHeader #sizzle_items a{color:#fff;font-size:14px;font-family:Calibri, Helvetica Neue, Liberation Sans, sans-serif;font-weight:700;cursor:pointer}
#subHeader #sizzle_items a:hover{color:#ccc !important;}
#subHeader .content{border:1px solid #dcdcdc;width:398px;height:302px;float:right;}
#subHeader .more_link {width:200px;}
#subHeader .more_link img {position:absolute;margin-left:280px;}
#subHeader .inner{border:1px solid #ccc;float:left;width:238px;height:267px;position:absolute;}
#subHeader .title {padding:15px 27px 0px 22px;font-size:18px;color:#888;line-height:25px;}
#subHeader .title a{font-size: 18px;color:#888;line-height:25px;}
#subHeader .title h1{font-size:37px;margin:0px;padding:0px;color:#333;}
#subHeader #learnMoreContainer{position:absolute;margin-left:850px;margin-top:335px;}
#subHeader #learnMoreContainer .inner{background:#c5342f;color:white;font-size:13px;padding:5px 8px;border:0px;margin-top:20px;display:none;}
#subHeader #learnMoreContainer .inner a{color:#fff;}

.showpageNum{
padding: 0 8px;
margin:0;
border:1px solid #d74700;
-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;
background: #d54500 url(btn.gif) left bottom repeat-x;
}
.showpagePoint {
color:#fff;
text-shadow:0 1px 2px #333;
padding: 0 8px;
margin: 0;
-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;
border:1px solid #43392d;
background: #383026 url(btn.gif) 0 0 repeat-x;
}
</style>

<script src='https://sites.google.com/site/askamedia/java-script/featured-slider-2-askamedia.txt' type='text/javascript'/>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script src='https://sites.google.com/site/askamedia/java-script/featured-slider-2a-askamedia.txt' type='text/javascript'/>

Langkah4: klik tombol Save Template untuk menyimpan perubahan.
Langkah5: Masuk ke Menu 'Page Elements'
Langkah6: Tambahkan elemen baru 'HTML java script', selanjutnya isi form tersebut dengan Script ini:
<div id="subHeader" style="height:260px;width:630px">
<div id="sizzles">

<a href=""><img alt="Paginator 3000" id="sizzleImg0" src="https://lh4.googleusercontent.com/-NBDx98-pWu0/UDJOSAjRv0I/AAAAAAAAnJo/SmZi3FW9pRw/s400/web0001-1320458.jpg" /></a><div id="sizzle_title0" class="sizzle_title">
<a href="">Cigarette</a><div>No Smooking Area</div></div>

<a href=""><img alt="Accordion For Blogger" id="sizzleImg1" src="https://lh3.googleusercontent.com/-ZA51N9Hx11E/UCu3slDx2gI/AAAAAAAAHrs/Gqydewen_vg/s400/D80_16327.jpg" style="display:none;" /></a>
<div id="sizzle_title1" class="sizzle_title" style="margin-top:300px;">
<a href="">White House</a>
<div>Wondefull Architecture In America</div>
</div>

<a href=""><img alt="Tabbed for Blogger" id="sizzleImg2" src="https://lh6.googleusercontent.com/-rsDiYbG9pM0/T9dknJw2KCI/AAAAAAAAJJU/fQg0JXyMGrc/s400/_MG_7361.jpg" style="display:none;" /></a>
<div id="sizzle_title2" class="sizzle_title" style="margin-top:300px;">
<a href="">Dialy News</a>
<div>Here You Are For Information</div></div>

<a href=""><img alt="Bloggertube" id="sizzleImg3" src="https://lh4.googleusercontent.com/-zZUOnnI2SKk/UC7kuRFEJkI/AAAAAAAAA00/eNIOqIbISLs/s400/DSC09795.jpg" style="display:none;" /></a><div id="sizzle_title3" class="sizzle_title" style="margin-top:300px;">
<a href="">Justice</a>
<div>Keep The Justice Till End</div></div>

<a href=""><img alt="Falkner" id="sizzleImg4" src="https://lh3.googleusercontent.com/-Sgb5iwLRu9g/UAr_PA8sUZI/AAAAAAAACgU/FKi7PoBGiFA/s400/148990933_a.JPG" style="display:none;" /></a><div id="sizzle_title4" class="sizzle_title" style="margin-top:300px;">
<a href="">Dining Room</a>
<div>Elegance Dining Room in Your Home</div></div>

<div class="clear"></div></div>

<div id="sizzle_items">

<a id="sizzle_item_0" class="showpagePoint" onclick="slider.home.header.expand(0);" style="color:white;">1</a>&nbsp; &nbsp;

<a id="sizzle_item_1" class="showpageNum" onclick="slider.home.header.expand(1);" >2</a>&nbsp; &nbsp;

<a id="sizzle_item_2" class="showpageNum" onclick="slider.home.header.expand(2);" >3</a>&nbsp; &nbsp;

<a id="sizzle_item_3" class="showpageNum" onclick="slider.home.header.expand(3);" >4</a>&nbsp; &nbsp;

<a id="sizzle_item_4" class="showpageNum" onclick="slider.home.header.expand(4);" >5</a>&nbsp; &nbsp;
</div>

<script type="text/javascript">
slider.home.header.items[0] = [0];
slider.home.header.items[1] = [1];
slider.home.header.items[2] = [2];
slider.home.header.items[3] = [3];
slider.home.header.items[4] = [4];
slider.home.header.set_timer();
</script>
<div class="clear"></div></div>

Langkah7: Klik tombol 'Save' pada element tersebut. Selesai.

No comments: