Tanda-tanda Illuminati di Indonesia
Posted by Fauzi Maulana
Posted on 6/18/2013
with No comments
Membuat Efek Daun Berjatuhan di Blog
Posted by Fauzi Maulana
Posted on 6/08/2013
with No comments
Efek daun jatuh ini juga menambah daya tarik buat pengunjung blog, trik ini menggunakan kode javascript, jadi sedikit memperberat loading blog.
Sebaiknya jangan tambahkan efek ini kalau di blog sobat sudah menggunakan efek video slide, pemutar music mp3 online atau penggunaan script animasi yang lain. Jadi pertimbangkan baik-baik sebelum menggunakan sebuah efek javascript
Berikut Cara Membuat Efek Daun Berjatuhan :
- Login ke dashboard blogger anda.
- Klik Template > Edit HTML.
- Centang Expand widget template(kalau ada)
- Cari kode </head> pada template dengan menggunakan Ctrl+F.
- Copy kode javascript dibawah ini dan letakkan tepat diatas kode </head>.
<script src='http://wadah-tutorial.googlecode.com/files/leaf.js' type='text/javascript'/> - Save template anda dan lihat hasilnya.
source
Cara Simple Menambahkan Widget Back To Top
Posted by Fauzi Maulana
Posted on 6/05/2013
with No comments
Kali ini saya akan membagikan share artikel Cara Simple Menambahkan Widget Back To Top Keren di Blog tanpa harus edit template gan :D
Tombol back to top ini emang bukan navigasi utama tapi bisa jadi sangat penting buat beberapa pengunjung gan. Gak susah kok membuat tombol back to top di blog gan cuma tinggal nambahin widget tanpa perlu edit HTML.
Berikut Langkahnya:
1. Login di Blogger.com punya sobat
2. Buka Tata Letak >> Tambahkan Gadget >> HTML/Javascript
3. Masukkan Kode dibawah berikut:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" >
var scrolltotop={
//startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
//scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="URLGAMBARSOBAT" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
state: {isvisible:false, shouldvisible:false},
scrollup:function(){
if (!this.cssfixedsupport) //if control is positioned using JavaScript
this.$control.css({opacity:0}) //hide control immediately after clicking it
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
dest=jQuery('#'+dest).offset().top
else
dest=0
this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
},
keepfixed:function(){
var $window=jQuery(window)
var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
this.$control.css({left:controlx+'px', top:controly+'px'})
},
togglecontrol:function(){
var scrolltop=jQuery(window).scrollTop()
if (!this.cssfixedsupport)
this.keepfixed()
this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
if (this.state.shouldvisible && !this.state.isvisible){
this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
this.state.isvisible=true
}
else if (this.state.shouldvisible==false && this.state.isvisible){
this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
this.state.isvisible=false
}
},
init:function(){
jQuery(document).ready(function($){
var mainobj=scrolltotop
var iebrws=document.all
mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
.attr({title:'Scroll Back to Top'})
.click(function(){mainobj.scrollup(); return false})
.appendTo('body')
if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}
scrolltotop.init()
</script>
4. Langkah terakhir yang paling penting.... klik tombol "Simpan". Selesai
Catatan: Ganti URLGAMBARSOBAT dengan url gambar yang kalian inginkan
nih, sudah saya siapkan ur gambar nya
"http://imgnow.com/uploads/713041231balik_atas.jpg"
Cara Membuat Content Slider Image Otomatis
Posted by Fauzi Maulana
Posted on 6/02/2013
with No comments
Cara Pembuatan
Langsung saja pada langkah-langkah pembuatan Content Slider Image otomatis ini :
- Langkah pertama, Anda mesti login ke blogger dengan akun Anda
- Pilih blog yang ingin anda tambahkan slider image ini.
- Setelah itu masuk ke template >> Edit HTML, kemudian centang expand widget templates
- Untuk berjaga-jaga agar tidak terjadi kesalahan dalam pengeditan nantinya, backup dulu template anda.
- Langkah berikutnya, letakkan kode berikut ini diatas kode ]]></b:skin> :
#featuredContent{float:left;width:407px;margin-right:10px;display:inline}
#featured-slider{position:relative;overflow:hidden;width:407px;height:245px}
#featured-slider .sliderPostInfo{position:absolute;bottom:2px;width:407px;min-height:30px;height:auto!important;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9mK7VlDFGjg-ScqvVtXjmJhuItT8Bo5kWft2xfMjgkMy7FpoUdYXcj0IIQ4yDyjkajBn-xHYhQ59PK89y86ThIfN3L_kD2qLjSY5NsBrZmJvdawJ4mpkA5RNtdc91aBem2lVvXHEPA0Yq/s1600/transparant.png)}
#featured-slider .sliderPostInfo p{color:#fff;font-size:1.1em;padding:0 5px}
#featured-slider .sliderPostInfo h2{color:#FFF;font:bold 14px Tahoma;text-transform:none;padding:0 5px}
#featured-slider .contentdiv{visibility:hidden;position:absolute;left:0;top:0;z-index:1}
#paginate-featured-slider{display:block;background-color:#f0f0f0;margin-bottom:0;padding:0 0 5px}
#paginate-featured-slider ul{width:415px;padding-bottom:0;list-style:none}
#paginate-featured-slider ul li{display:inline;width:75px;float:left;margin-left:0;margin-right:8px;margin-bottom:3px}
#paginate-featured-slider img{padding-top:5px;background:#f0f0f0}
#paginate-featured-slider a img{border-top:4px solid #f0f0f0}
#paginate-featured-slider a:hover img,#paginate-featured-slider a.selected img{border-top:4px solid #357798}
- Masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head> :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/222517121138/contentslider.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCSNIJ0SSYbyR27y-telfYY0NLZ2ReXpay-mY9ikVggAjPB3otTW9g8_c9bjIEkw82a951boIVZK_uxcMZhT4jwbsoZPPIMzAqNUKOmbNFgPo2JQLxuo5Ye9uRSFhUTfPUBiuLfhtu3po/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 100;
summaryTitle = 25;
numposts3 = 5;
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 showrecentposts3(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
for (var i = 0; i < numposts3; 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;
//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
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="contentdiv"><a href="'+posturl+'"><img width="407" height="240" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"><h2 class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></h2><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';
document.write(trtd);
j++;
}
}
function showrecentposts4(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
for (var i = 0; i < numposts3; 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;
//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
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 = '<li><a class="toc" href="#"><img width="75" height="50" class="alignnone" src="'+img[i]+'"/></a></li>';
document.write(trtd);
j++;
}
}
//]]>
</script>
Kode script warna merah (paling atas) adalah kode script jQuery.min.js seri terbaru yang saya gunakan untuk membuat slider ini. Jika pada template Anda sudah terdapat jQuery.min.js walaupun serinya berbeda, kode warna merah diatas tidak perlu lagi Anda masukkan. Cukup satu jQuery.min.js yang ada di template, terserah mau seri berapa, kalau bisa versi yang terbaru.
Warna biru : Jumlah post yang ditampilkan dalam slider
Warna hijau : Panjang dan lebar image besar
Warna merah tua : Panjang dan lebar image kecil - Setelah langkah diatas, save templates terlebih dahulu. Setelah itu menuju ke layout >> add gadget masukkan kode ini pada kotak HTML/Javascript :
<div id='featuredContent'>
<div class='sliderwrapper' id='featured-slider'>
<script>
document.write("<script src=\"/feeds/posts/default/-/sport?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts3\"><\/script>");
</script>
</div>
<div id='paginate-featured-slider'>
<ul>
<script>
document.write("<script src=\"/feeds/posts/default/-/sport?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts4\"><\/script>");
</script>
</ul>
<div class='clear'></div>
</div>
<script type='text/javascript'>
featuredcontentslider.init({
id: "featured-slider", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["", ""], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.4], //[true/false, fadedegree]
autorotate: [true, 5000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>
</div>
Perhatikan tulisan warna biru diatas, itu adalah label yang saya masukkan pada slider. Silahkan anda ganti sesuai keinginan. Dan warna merah adalah keterangan slider yang berupa kecepatan, slider efek mouseover dan lain-lain, tidak harus dimasukkan.
Jika Anda ingin menggantinya dengan recent post atau artikel terbaru ganti kode (ada dua ganti semua) :
script src=\"/feeds/posts/default/-/sport?max-results
dengan kode berikut :
script src=\"/feeds/posts/default?max-results
- Jika anda ingin meletakkannya langsung pada template, anda bisa letakkan kode nomer 7 dibawah kode <div id='main-wrapper'>, bagi yang ingin meletakkannya pada kotak HMTL/Javascript bisa dibuat dulu satu kolom kosong diatas blog post. Cara membuatnya, letakkan kode berikut diatas ]]></b:skin>
/* Slide Content ----------------------------------------------- */ .slide-wrapper {padding:0 auto;margin:0 auto;width:auto;float: left; word-wrap: break-word; overflow: hidden;} .slide {color: #666666;line-height: 1.3em;} .slide ul {list-style:none;margin:0 0 0;padding:0 0 0;} .slide li {margin:0;padding-top:0; padding-right:0;padding-bottom:.25em; padding-left:0px;text-indent:0px;line-height:1.3em;} .slide .widget {margin:0px 0px 6px 0px;}
- Kemudian untuk memunculkannya pada layout (diatas blog post), anda harus memanggilnya. Cari kode <div id='main-wrapper'> kemudian letakkan kode berikut dibawahnya :
<b:if cond='data:blog.url == data:blog.homepageUrl'> <div id='slide-wrapper'> <b:section class='slide' id='slide' preferred='yes'/> </div> </b:if>
Jika diperhatikan kode script yang ada diatas memang terlalu banyak, dan
tentunya akan semakin memperlambat loading sebuah blog. Untuk
mengatasinya Anda bisa menyimpan kode-kode yang terlalu panjang tersebut
di tempat penyimpanan Google Code.
Nah, itu tadi salah satu fitur slider image yang saya ulas kali ini.
Saya berharap dengan mengulas satu persatu fitur dalam sebuah template,
nantinya teman-teman semua bisa membuat sebuah tampilan template sendiri
dengan memodifikasi dari dasar tampilan yang sudah saya berikan
diatas.Selamat mencoba dan semoga bermanfaat
Cara Membuat Menu Tab View
Posted by Fauzi Maulana
Posted on 6/01/2013
with No comments
Cara membuat Menu Tab View keren dengan Efek jQuery:
- Buka Dasbor Blog anda.
- Pilih menu tata Letak
- Tambah Widget HTML/JavaScript.
- Kemudian Copy Paste Kode dibawah ini kedalam Widget HTML/JavaScript tersebut:
<style type="text/css">
.tabber {
padding: 0px !important;
border: 0 solid #bbb;
}
.tabber h2 {
float: left;
margin: 0 1px 0 0;
font-size: 12px;
padding: 3px 5px;
border: 1px solid #bbb;
margin-bottom: -1px;
overflow: hidden;
position: relative;
background: #0000FF;
cursor:pointer;
-moz-border-radius:5px 5px 0 0;
border-radius:5px 5px 0 0;
}
html .tabber h2.active {
background: #000000;
border-bottom: 1px solid #fff;
}
.tabber .widget-content {
border: 1px solid #bbb;
padding: 10px;
background: #fff;
clear:both;
margin:0;
}
.codewidget, #codeholder {
display:none; {
</style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bloggertabs0.1_min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#codeholder').bloggerTabber ({
tabCount : 3
});
});
</script><!-- Jangan hapus kode dibawah, agar widget bisa berfungsi --><div id='codeholder'><a href="http://www.bloggersentral.com/2011/05/create-tabbed-content-blogger-widgets.html" target="_blank"></a></div>
- Simpan.
Catatan: Untuk menampilkan Menu seperti Popular Post, Category,
Random Post dll. Silahkan anda letakkan Widget widget tersebut dibawah
Widget Menu Tab View ini.
Sekian, Semoga bermanfaat!
Cara Membuat Random Posts
Posted by Fauzi Maulana
Posted on 6/01/2013
with No comments
Langkah Membuat Widget Random Post Valid HTML5 Sebagai Berikut :
- Login Ke Akun Blogger Anda Seperti Biasanya
- Masuk Ke Menu Tata Letak Blog Anda
- Klik Tambah Gadget > HTML/JavaScript
- Copy Kode dibawah dan Pastekan di Gadget Tersebut
<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=7;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
document.write(item);}}
}document.write('</ul>');}
</script>
<script src="http://willyseo.blogspot.com/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>
Keterangan : Kode yang Berwarna Merah Ganti Sesuai jumlah Post yang di inginkan.
Kode yang Berwarna Biru Ganti Sesuai Alamat Blog Anda
Kode yang Berwarna Biru Ganti Sesuai Alamat Blog Anda
- Terakhir Klik Save
Langkah Membuat Widget Random Post Valid HTML5 Sebagai Berikut :
- Login Ke Akun Blogger Anda Seperti Biasanya
- Masuk Ke Menu Tata Letak Blog Anda
- Klik Tambah Gadget > HTML/JavaScript
- Copy Kode dibawah dan Pastekan di Gadget Tersebut
<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=7;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
document.write(item);}}
}document.write('</ul>');}
</script>
<script src="http://willyseo.blogspot.com/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>
Keterangan : Kode yang Berwarna Merah Ganti Sesuai jumlah Post yang di inginkan.
Kode yang Berwarna Biru Ganti Sesuai Alamat Blog Anda
Kode yang Berwarna Biru Ganti Sesuai Alamat Blog Anda
- Terakhir Klik Save
source
Cara Membuat Scrool Pada Popular Posts
Posted by Fauzi Maulana
Posted on 6/01/2013
with No comments
Cara Membuat Scroll Pada Popular Post di Blog :
1. Login ke blogger dengan akun sobat
2. Masuk ke halaman Template
3. Klik Edit HTML Lalu Lanjutkan
4. cari kode ]]></b:skin>
5. copy dan paste kode di bawah ini tepat di atas kode ]]></b:skin>
#PopularPosts1 .widget-content{6. Ganti angka 200 dengan tingginya
height:200px;
overflow:auto;
}
7. Simpan dan lihat hasilnya
Demikian artikel saya tentang Cara Membuat Scroll Pada Popular Post di Blog .
lihat hasilnya