Dokumen RKP Desa Tahun 2024 ini merupakan suatu dokumen yang harus disusun
sebagai tuntutan penyelenggaraan tata pemerintahan desa yang baik dalam
melaksan...
Membuat Tab Widget Thumbnail Otomastis
#tabber-wrapper{width:640px;float:left;word-wrap:break-word;overflow:hidden}
ul.tab-view{float:left;list-style:none;height:32px;border-bottom:1px solid #aaa;border-left:1px solid #aaa;width:640px;margin:0;padding:0}
ul.tab-view li{float:left;height:31px;line-height:31px;border:1px solid #aaa;border-left:none;overflow:hidden;position:relative;background:#eee;margin:0 0 -1px;padding:0}
ul.tab-view li a{text-decoration:none;color:#26231c;display:block;border:1px solid #eee;outline:none;font-weight:700;padding:0 15px}
html ul.tab-view li.active,html ul.tab-view li.active a,html ul.tab-view li.active a:hover{background:#eee;color:#026ab5;border-bottom:1px solid #eee}
.tab-wrapper{border:1px solid #aaa;border-top:none;overflow:hidden;clear:both;float:left;width:640px;background:#eee;margin-bottom:15px}
.tabber{padding:10px 0}
.tabber .column{float:left;display:inline;width:146px;margin:0 0 0 11px}
.tabber h2{font:bold 12px Arial;line-height:15px;margin:7px 0 5px}
.tabber h2 a{color:#222}
.tabber h2 a:hover{color:#026ab5}
- Angka 640 diatas disesuaikan dengan
main-wrapper
pada template Anda. - Huruf yang bercetak tebal diatas 146 disesuaikan denga widget main-wrapper.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript' />
<script src='https://cekidot.96.lt/file/js/tabView.js' type='text/javascript' />
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://cdn.staticaly.com/gh/idtutorplus/images/b085015c/no-images.gif";
showRandomImg = true;
aBold = true;
summaryPost = 80;
numposts = 4;
Title1 = "Dasar";
Title2 = "Template";
Title3 = "Posting";
Title4 = "Widget";
Title5 = "Dasar";
Title6 = "Template";
function removeHtmlTag(strx, chop) {
var s = strx.split("<");
for (var i = 0; i < s.length; i++) {
if (s[i].indexOf(">") != -1) {
s[i] = s[i].substring(s[i].indexOf(">") + 1, s[i].length)
}
}
s = s.join("");
s = s.substring(0, chop - 1);
return s
}
function showrecentposts(json) {
j = (showRandomImg) ? Math.floor((imgr.length + 1) * Math.random()) : 0;
img = new Array();
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break
}
}
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break
}
}
if ("content" in entry) {
var postcontent = entry.content.$t
} else if ("summary" in entry) {
var postcontent = entry.summary.$t
} else var postcontent = "";
postdate = entry.published.$t;
if (j > imgr.length - 1) j = 0;
img[i] = imgr[j];
s = postcontent;
a = s.indexOf("<img");
b = s.indexOf("src=\"", a);
c = s.indexOf("\"", b + 5);
d = s.substr(b + 5, c - b - 5);
if ((a != -1) && (b != -1) && (c != -1) && (d != "")) img[i] = d;
var month = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
var month2 = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var day = postdate.split("-")[2].substring(0, 2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for (var u2 = 0; u2 < month.length; u2++) {
if (parseInt(m) == month[u2]) {
m = month2[u2];
break
}
}
var daystr = day + ' ' + m + ' ' + y;
var trtd = '<div class="column"><a href="' + posturl + '"><img width="146" height="95" src="' + img[i] + '"/></a><h2><a href="' + posturl + '">' + posttitle + '</a></h2><p>' + removeHtmlTag(postcontent, summaryPost) + '...</p></div>';
document.write(trtd);
j++
}
}
//]]>
</script>
- Angka 146 dan 95 diatas merupakan lebar dan tinggi dari thumbanil yang akan ditampilkan.
- Jika dalam template Anda sudah dipasang jquery.min.js, hapus jquery yang bercetak hijau diatas.
<div 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/-/Dasar?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
</div>
<div class='tabber' id='tab2'>
<script>
document.write(" <script src=\"/feeds/posts/default/-/Template?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
</div>
<div class='tabber' id='tab3'>
<script>
document.write(" <script src=\"/feeds/posts/default/-/Posting?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
</div>
<div class='tabber' id='tab4'>
<script>
document.write(" <script src=\"/feeds/posts/default/-/Widget?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
</div>
<div class='tabber' id='tab5'>
<script>
document.write(" <script src=\"/feeds/posts/default/-/Dasar?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
</div>
<div class='tabber' id='tab6'>
<script>
document.write(" <script src=\"/feeds/posts/default/-/Template?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
</div>
<div class='clear'/>
</div>
</div>
- Letakkan kode diatas sesudah kode <div id='main-wrapper'>
- Huruf dengan background kuning disesuaikan dengan label Anda.
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function() {
$(".tabber").hide();
$("ul.tab-view li:first").addClass("active").show();
$(".tabber:first").show();
$("ul.tab-view li").click(function() {
$("ul.tab-view li").removeClass("active");
$(this).addClass("active");
$(".tabber").hide();
var activeTab = $(this).find("a").attr("href");
$(activeTab).fadeIn();
return false
})
});
//]]>
</script>
Simpan template dan lihat hasilnya.
Sejauh ini belum ada komentar yang masuk. Mulailah memberikan saran, kritikan yang bersifat membangun.