Mudjoko

Sabtu, 28 April 2012

Johny Storage, Template Magazine untuk Blog Berita

Karena ini malem Minggu saya singkat saja artikel kali ini. Template ini sekilas tampak seperti Mas Paper versi 1, hanya pada template kali ini warna didominasi putih dan hitam. Template ini sangat cocok untuk blog berita, ya memang saya untuk saat ini akan fokus dulu dalam membuat template blogger untuk blog berita, karena untuk template yang lain saya belum mahir apalagi yang bentuknya blogazine (pernah seorang teman blogger meminta saya membuat template blogazine via email), disamping keterbatasan kemampuan saya dalam pemahaman jQuery, dalam membuat template seperti blogazine dibutuhkan kemampuan dalam mengolah gambar dengan menggunakan software tertentu, sehingga bisa lebih cantik dan menarik.

Seperti pada template Mas Paper 2 dan Johny Simplemag, template kali ini juga semuanya serba otomatis. Anda tinggal memasukkan label dan kode script ke dalam kotak HTML/Javascript maka fitur-fitur yang ada pada template ini akan muncul secara otomatis. Langsung saja saya akan jelaskan satu persatu untuk penggunaan template ini :

Saya mulai dari atas, News Ticker atau headline news yang ada diatas header. Untuk mengganti dengan headline dari blog Anda masuk ke Edit HTML (gunakan control + F untuk mempersingkat), cari URL http://johny-storage.blogspot.com. Setelah ketemu ganti dengan URL blog Anda. Demikian juga dengan kotak pencarian atau search box cari URL http://johny-storage.blogspot.com ganti dengan URL blog Anda.
Yang kedua adalah kotak email berlangganan, letaknya persis diatas image slider. Untuk mengganti email berlangganan, cari kode dibawah ini pada Edit HTML (jangan lupa untuk mencentang kotak expand widget templates) :
<form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/htbgh', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'><input id='subbox' name='email' onblur='if (this.value == '') {this.value = 'Enter your email address...';}' onfocus='if (this.value == 'Enter your email address...') {this.value = '';}' type='text' value='Enter your email address...'/><input name='uri' type='hidden' value='blogspot/htbgh'/><input name='loc' type='hidden' value='en_US'/><input id='subbutton' type='submit' value='Enter'/></form>
Keterangan :
Warna biru : ganti dengan alamat feed anda.

Pemasangan Widget

Sebelum masuk ke pemasangan widget, coba Anda perhatikan struktur layout yang terdapat pada template Johny Storage di bawah ini :

Untuk menampilkan slider, masuk ke layout kemudian klik edit pada kotak HTML/Javascript. Masukkan kode berikut ini ke dalamnya :
<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>
Keterangan :
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. Untuk lebih jelasnya Anda bisa membaca pada tutorial membuat slider tersebut disini.
Sekarang untuk label 1 sampai dengan label 6 seperti pada layout diatas, caranya sangat gampang. Anda tinggal ketik/masukkan label yang diinginkan ke dalam kotak tersebut. Perhatikan gambar dibawah ini :

Keterangan :
Ganti news dengan label Anda, dan ganti judul widget (label 1) dengan judul yang sesuai dengan label.
Sekarang kita menuju pada tabber sidebar yang terletak di sebelah kanan. Terdapat tiga tabber disitu, yaitu recent post, popular post dan comment. Untuk kolom recent post letakkan kode berikut ke dalamnya :
<ul>
<script>
document.write("<script src=\"/feeds/posts/default?max-results="+numposts5+"&orderby=published&alt=json-in-script&callback=showrecentposts6\"><\/script>");
</script>
</ul>
Untuk popular post anda tinggal masuk ke layout kemudian pilih widget popular post, silahkan pilih disitu berapa post yang ingin ditampilkan. Dan untuk comment atau recent comment silahkan Anda baca tutorialnya disini. Ketiga tabber sidebar ini boleh Anda rubah sesuai keinginan, letaknya di sidebar kanan baris kedua.
Slider Carousel yang terdapat di atas footer bekerja secara otomatis menampilkan artikel terbaru Anda disitu. Jadi disini Anda tidak perlu merubah atau menambahkan kode script lagi, tapi jika Anda ingin menampilkan per kategori di dalam slider tersebut silahkan baca pada tutorial membuat slider Carousel tersebut disini.

Apa lagi ya, sepertinya hanya itu yang perlu saya jelaskan untuk penggunaan dan pemasangan widget yang terdapat pada template Johny Storage ini. Karena waktu sudah menunjukkan pukul 8 malam lebih, sudah waktunya untuk berkeliaran cari mangsa... hehehehe. Bagi yang masih bingung dan butuh penjelasan silahkan tinggalkan komentar di bawah, selamat mencoba dan happy weekend

Tiga pilihan warna lain untuk template ini :

Demo | Download

Update Templates

My Google Code was banned, there's so many script that I put in there can't be opened. But I already fixed it with the updates ones, you can re-download this template or you can change some script below

Click this link and read subtitle "Update Template" in that post for the latest updates of Javascript

Read More --►

Rabu, 25 April 2012

Membuat Content Slider Image Otomatis Membuat Content Slider Image Otomatis

Sebelum template pada demo slider ini saya bagikan nantinya, saya akan mengulas satu persatu terlebih dahulu fitur yang ada pada template ini. Dan disini Anda akan mengetahui bagaimana sebuah template akan bekerja bersama dengan beberapa fitur yang ada di dalamnya secara otomatis. Prinsip kerja dari Content Slider ini hampir sama pada artikel saya sebelumnya tentang membuat slider otomatis pada template Sporty Magazine 2, bedanya hanya pada tampilan thumbnail kecil yang saya letakkan di bawah dan efek mouseover yang ditambahkan pada slider ini.

Banyak sekali tutorial membuat image slider yang sudah beredar di internet, dari beberapa kasus yang saya temui kebanyakan masih memasukkan URL gambar dan keterangan satu persatu, dan itu sangat merepotkan dan membutuhkan ketelitian, meskipun ada beberapa diantaranya yang sudah otomatis, disini saya hanya memberikan alternatif lain untuk memperbanyak koleksi teman-teman semua mengenai prinsip dasar dari kerja sebuah image slider otomatis pada blog platform blogger. Tampilan image slider seperti gambar dibawah, jika anda perhatikan sebenernya inilah dasar dari pembuatan Yahoo slider sederhana yang saya pasang pada template Johny Simplemag. Anda bisa modifikasi sendiri sesuai selera.

DEMO

Di blog demo ada slider image Carousel otomatis, jika Anda tertarik silahkan baca tutorialnya pada Membuat Slider Carousel Otomatis Berdasarkan Label.

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/AVvXsEg-Efrw71KZGskDfu3ykhOQf9fDgCY4p24KmP-Oom31Ns6NeSVJ9T_J3kYYuuaLBj5SphUU-v6yY3tBmqfDSm246GGDtgDB_d6GtWwSDOa7iB1mvbGmS_NpFo2oCc4ai3fVcCftQR4iOErT/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}
Tulisan warna biru diatas adalah panjang dan lebar slider pada demo, silahkan sesuaikan ukurannya.
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/AVvXsEgTbOTj_AA-lZKYQn_3wqqo5n0E_kMgTO7FgPTcl52UI4mmUhhBDJWf6yhHQ5HnC5AEoNgaU2IJmg1jOC_Trauusr8EGWMUTe-hcHMZtvCqxC2meaUeOkUu3EFmAPE94EFtbW6Y-6-hE-Q/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>
Keterangan :
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>
Keterangan :
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

Read More --►

Senin, 23 April 2012

Membuat Slider Carousel Otomatis Berdasarkan Label

Tutorial kali ini saya akan membahas bagaimana membuat slider Carousel otomatis berdasarkan label. Prinsip kerja dari slider ini sama seperti pada slider otomatis berdasarkan kategori. Anda tinggal mengganti dengan label anda dan slider ini akan bekerja sesuai dengan label yang anda masukkan. Slider Carousel yang saya buat kali ini sangat sederhana dan hanya menggunakan jCarousellite script tanpa menambahkan efek easing dan mousewheel.

DEMO

Cara pemasangannyapun sangat mudah, jika anda sudah pernah mempraktekkan artikel saya terdahulu yang berjudul membuat slider otomatis berdasarkan kategori tertentu, tutorial kali ini terasa sangat mudah, karena langkah-langkah pembuatannya hampir sama. Langsung saja di bawah ini langkah-langkah untuk membuatnya :

Login ke blogger dengan akun Anda
Setelah itu pilih blog yang ingin anda tambahkan slider ini.
Masuk ke template >> Edit HTML, kemudian centang expand widget templates
Untuk berjaga-jaga agar tidak terjadi kesalahan dalam pengeditan nantinya, backup dulu template anda.
Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin> :
#carousel{width:950px;height:185px;margin-bottom:0px;position:relative;display:block}
#carousel .container{position:absolute;left:49px;width:895px;height:185px;overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdCo1S79XhWCETPKGYPPvEyDhMBDCEvCb4B3ggzvIxBocA69cQWEPvEM21QJ6A-ZWdz1iOd1ia3Mqy3H2YcEdE0lr8zCmIfUvN45tIEWZeIYBtd4Ft8qWaLkOQfvciaP5_4Q0n_Vo-mnI/s1600/scroller-bg.png) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtaqdVyPwMySDtN9Qbdq67oi8hqsjS6phbUtNHN7OWrIwYDczwjzn2xG6572YgronAj4yvpZIIoL0wP6M0iaZnIDwCi3RiJMGYqLgaJ6NK84DbPREvAggwvEk10c0fCFDzcp6IjqRccII/s1600/prev.png) center;z-index:100;cursor:pointer;border-right:1px solid #ccc}
#carousel #previous_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnpikvTpPri7bpP796lY-NF-KJ5pbgoeturOdesxgkdRmSk3Y2TpW8C22XeZdBDq3OEVG0k8Y6GYfzkSimWF4ua2QDWpf-xMPQAiD9KaBnqffmjtb52Y68GhvhmimsMPAKfB3VwYATbqA/s1600/prev.png) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA9JJimoVtIHV8jkUEn7bzt2TKfYC8q_xY3avUvTNH8NvIPVlI6Fkshj_5AyF5izrnXHVqro0gFuUm-ZyYo3zLR_1cUHobs2jt5cWwbbG477kxtH6hOBDDXKe47PuGMGwf8FOMDtu_-mw/s1600/next.png) center;z-index:100;cursor:pointer;border-left:1px solid #ccc}
#carousel #next_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu1RbRcUuMsuHubuz80k3H8MKetzkm-O2vy6wuuEuabk08moD2ivUnUWSbfBKaE_DsAyUpifhgPDAkUSLtjNqwOTj87TK9FA9xUNa6IfpWKIUVp3w6BS-8V-Gmk8d2B3isA3o0MTD71g0/s1600/next.png) center}
#carousel ul{width:100000px;position:relative;margin-top:10px}
#carousel ul li{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwZgZP7M_EZxPmdjL0nwiruo4T9WT6DAgHGAx_Knf8GvEucPwg2NVINoulcx6CHgxCogMrb4Rg4TrmlEY8voZMkJeuK6JYdBAIp0lOxXnRK65A0g-G_MmNVNL4mqV_Pjy0YCxfCPkS2-4/s1600/main.png) repeat-x top;display:inline;float:left;text-align:center;font-weight:700;font-size:.9em;line-height:1.2em;border:1px solid #ccc;width:145px;height:150px;margin:0 4px 20px 7px;padding:6px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
#carousel ul li:hover{filter:alpha(opacity=75);opacity:.75;}
#carousel ul li a.slider_title{color:#222;display:block;margin-top:5px}
#carousel ul li a.slider_title:hover{color:#cd1713}
#carousel a img{display:block;background:#fff;margin-top:0}
Perhatikan kode warna biru diatas, itu adalah lebar dan tinggi slider pada demo yang saya buat, silahkan Anda sesuaikan dengan ukuran template Anda.
Langkah selanjutnya 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/265232511102/carousellite.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTbOTj_AA-lZKYQn_3wqqo5n0E_kMgTO7FgPTcl52UI4mmUhhBDJWf6yhHQ5HnC5AEoNgaU2IJmg1jOC_Trauusr8EGWMUTe-hcHMZtvCqxC2meaUeOkUu3EFmAPE94EFtbW6Y-6-hE-Q/s1600/no+image.jpg";
showRandomImg = true;

aBold = true;

summaryPost = 140;
summaryTitle = 25;

numposts1 = 15;
label1 = "news";

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();
document.write('<ul>');
for (var i = 0; i < numposts1; 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 class="car"><div class="thumb"><a href="'+posturl+'"><img width="145" height="100" class="alignnone" src="'+img[i]+'"/></a></div><p><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></p></li>';

document.write(trtd);
j++;
}
document.write('</ul>');
}
//]]>
</script>
Keterangan :
Perhatikan URL script warna merah diatas, itu 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.
Sedangkan kode warna biru : 15 adalah jumlah slider yang ditampilkan. Dan news adalah label yang ditampilkan pada slider nantinya (Ingat besar kecil huruf harus sama dengan label yang sudah Anda buat).
Langkah selanjutnya adalah memanggil slider tersebut agar muncul di blog kita. Cari kode <div id='main-wrapper'>, kemudian letakkan kode berikut ini diatasnya :
<b:if cond='data:blog.pageType != "item"'>
<div id='carousel'>
<div id='previous_button'/>
<div class='container'>
<script>
document.write("<script src=\"/feeds/posts/default/-/"+label1+"?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
<div class='clear'/>
</div>
<div id='next_button'/>
</div>
<script type='text/javascript'>
(function($) {     $(document).ready(function(){
$("#carousel .container").jCarouselLite({
    auto:4000,
    scroll: 1,
    speed: 800,
    visible: 5,
    start: 0,
    circular: true,
    btnPrev: "#previous_button",
    btnNext: "#next_button"
    });
    })})(jQuery)
</script>
</b:if>
Kode diatas bisa juga anda letakkan dibawah atau diatas navigasi menu Anda atau bisa juga diletakkan diatas footer.
Langkah terakhir, save templates dan lihat hasilnya. Jika Anda ikuti langkah diatas dengan benar, slider Carousel itu akan muncul di blog Anda.

Sangat mudah ya, anda tinggal ikuti langkah-langkah diatas dan baca dengan teliti jangan terburu-buru, Jika masih ada yang kurang jelas silahkan tinggalkan pesan pada kotak komentar yang ada di bawah. Itu tadi tutorial singkat tentang bagaimana cara membuat slider Carousel otomatis berdasarkan kategori atau label kali ini, selamat mencoba dan semoga bermanfaat.

Tutorial Membuat Slider Carousel Otomatis Versi 2

Read More --►

Kamis, 19 April 2012

Inilah Dua Template Johny Asal Jadi Inilah Dua Template Johny Asal Jadi

Judulnya keren ya, Dua Template Asal Jadi, ya inilah dua template yang saya buat sambil sedikit pusing karena banyaknya kerjaan. Yang pertama namanya Johny Backup, saya juga tidak tahu dapat nama ini darimana tapi yang jelas template ini terinspirasi dari tampilan template Joomla Sportapolis yang dibuat pada tahun 2009 oleh shape5.com. Template yang kedua Johny Bingung, bingung karena mau dikasih nama apa. Kedua template ini seperti biasa dilengkapi dengan slider otomatis, anda tidak perlu lagi memasukkan satu-persatu URL dan keterangan post ke dalamnya. Dan tentu saja saya bagikan secara cuma-cuma kepada teman-teman blogger semua, sekalian buat melengkapi koleksi template Anda.

Johny Backup

Demo | Download

Template ini seperti dijelaskan diatas, tampilannya hampir sama dengan template Joomla Sportapolis, tapi lebih sederhana karena banyak fitur yang saya kurangi karena keterbatasan saya dalam mengolah sebuah template. Untuk pemasangan widgetnya pertama anda harus perhatikan struktur layoutnya seperti gambar berikut :

Perhatikan keempat angka diatas, berikut cara pengisiannya :

Kolom widget nomer 1, adalah slider. Masukkan kode berikut ini ke dalamnya :
<div id='featured'>
<ul class="ui-tabs-nav">
<script>
document.write("<script src=\"/feeds/posts/default/-/play station?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts5\"><\/script>");
</script>
</ul>
<script>
document.write("<script src=\"/feeds/posts/default/-/play station?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts4\"><\/script>");
</script>
</div>
Keterangan :
Perhatikan tulisan warna biru diatas, itu adalah label yang saya masukkan pada slider. Silahkan anda ganti dengan label Anda.
Kolom widget nomer 2, adalah label category otomatis di sebelah slider. Anda tinggal memasukkan/ketik label anda pada kotak tersebut, seperti gambar dibawah ini :

Dari gambar diatas hot games adalah label yang saya masukkan ke dalam widget tersebut, silahkan Anda ganti dengan label Anda.
Widget nomer 3 dan 4, adalah widget category thumbnail biasa yang masih semi otomatis. Saya buat demikian agar tampilannya agak berbeda dan tidak monoton. Untuk menampilkannya masukkan kode dibawah ini pada kotak HTML/Javascript nomer 3 dan 4 :
<script type='text/javascript'>var numposts = 1;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 60;</script>

<script type="text/javascript" src="/feeds/posts/default/-/play station?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

<script type="text/javascript">
function recentpostslist(json) {
document.write('<ul>');
for (var i = 1; i < json.feed.entry.length; i++)
{
for (var j = 1; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}
var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>";
document.write(item);
}
document.write('</ul>');
}
</script>
<script src="http://johny-backup.blogspot.com/feeds/posts/summary/-/play station?max-results=6&alt=json-in-script&callback=recentpostslist"></script>
<a href="http://johny-backup.blogspot.com/search/label/play station" style="float:right;font:normal 11px Arial;padding:5px 0;">More on this category »</a>
Keterangan :
Warna merah : adalah label atau kategori yang ditampikan pada sidebar. Anda bisa menggantinya dengan label anda sesuaikan dengan kebutuhan.
Warna biru : Ganti URL dengan URL blog anda.
Untuk mengganti email berlangganan yang ada di bawah navigasi, cari kode dibawah ini pada Edit HTML (jangan lupa untuk mencentang kotak expand widget templates) :
<form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/htbgh', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'><input id='subbox' name='email' onblur='if (this.value == '') {this.value = 'Enter your email address...';}' onfocus='if (this.value == 'Enter your email address...') {this.value = '';}' type='text' value='Enter your email address...'/><input name='uri' type='hidden' value='blogspot/htbgh'/><input name='loc' type='hidden' value='en_US'/><input id='subbutton' type='submit' value='Enter'/></form>
Keterangan :
Warna biru : ganti dengan alamat feed anda.
Untuk mengganti iklan yang ada di bawah postingan, masuk ke Edit HTML lalu cari kode berikut (kode ini tidak akan muncul jika anda tidak mencentang kotak expand widget templates) :
<b:if cond='data:blog.pageType == "item"'>
<div style='font:normal 12px Georgia;font-style:Italic;padding:8px 10px 8px 70px;font-weight:normal;color:#333;margin-top:10px;'>
<script type="text/javascript">
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</b:if>
Tulisan warna biru diatas adalah kode iklan yang ada di bawah postingan blog demo, silahkan Anda ganti dengan iklan Anda ukuran 468 x 60 px.

Johny Bingung

Demo | Download

Template ini saya desain khususnya untuk konten review film atau game, tapi Anda bisa juga memakainya untuk konten lain. Template sama namanya nggak nyambung blasss..... Namanya juga orang bingung jadi ya terserah mau dikasih nama apa... hehehehehe. Untuk pemasangan widget perhatikan layout template ini seperti gambar di bawah :

Pada template ini hanya ada tiga widget yang perlu diperhatikan, widget nomer satu adalah slider atau di layout namanya Featured content slider. Cara pemasangannya anda tinggal memasukkan atau ketik label yang ingin ditampilkan, seperti pada nomer 2 diatas :

Label yang saya masukkan disini adalah review, silahkan diganti dengan label anda sendiri.
Untuk widget nomer 2 dan 3, cara pemasangannya sama dengan langkah nomer 3 pada template Johny Backup diatas. Demikian juga untuk mengganti email berlangganan, sama seperti langkah nomer 4 diatas.
Karena template ini menggunakan model kotak komentar yang sudah dimodifikasi, untuk mengaktifkan fungsi reply anda harus cari kode dibawah ini pada Edit HTML, sekali lagi jangan lupa untuk centang kotak expand widget templates :
<a expr:href='"https://www.blogger.com/comment.g?blogID=4900105838884725772&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500"); return false;'>Reply</a>
Warna merah pada kode diatas adalah ID blog demo, Anda harus ganti dengan ID blog anda yang terletak pada browser jika anda masuk ke dashbord, seperti gambar di bawah ini :
Untuk mengganti iklan yang ada di bawah postingan (sebelah related post), masuk ke Edit HTML lalu cari kode berikut (kode ini tidak akan muncul jika anda tidak mencentang kotak expand widget templates) :
<div id='banner-ads'>
<script type="text/javascript">
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
Tulisan warna biru diatas adalah kode iklan yang ada di bawah postingan blog demo, silahkan Anda ganti dengan iklan Anda ukuran 300 x 250 px.

Itu tadi dua template asal jadi yang saya bagikan kepada teman-teman blogger pada pagi hari ini, mohon maaf sebelumnya kalau tidak begitu menarik, Jika ada pertanyaan silahkan tinggalkan pesan di kotak komentar, selamat mencoba dan semoga bermanfaat.

Update Templates

My Google Code was banned, there's so many script that I put in there can't be opened. But I already fixed it with the updates ones, you can re-download this template or you can change some script below

Johny Backup

Find this code in Edit HTML :
<script src='http://kauman.googlecode.com/files/related-image.js' type='text/javascript'/>
Change with this code :
<script src='https://masolis-javascript.googlecode.com/svn/trunk/related-post.js' type='text/javascript'/>
This code for page navigation
<script src='http://johnytemplate.googlecode.com/files/pagenav.js.js' type='text/javascript'/>
Replaces with this code :
<script src='https://masolis-javascript.googlecode.com/svn/trunk/navigasi.js' type='text/javascript'/>
This code for label :
<script src='http://jamu-martin.googlecode.com/files/label.js' type='text/javascript'/>
Change with this code :
<script src='https://masolis-javascript.googlecode.com/svn/trunk/label.js' type='text/javascript'/>
And find this too :
<script src='http://kauman.googlecode.com/files/jquery-ui.min.js' type='text/javascript'/>
Change with this code :
<script src='https://masolis-javascript.googlecode.com/svn/trunk/jquery-ui.min.js' type='text/javascript'/>
The last one :
<script src='http://kauman.googlecode.com/files/johnybackup.js' type='text/javascript'/>
Change with this code :
<script src='https://masolis-javascript.googlecode.com/svn/trunk/backup.js' type='text/javascript'/>

Johny Bingung

Find this code in Edit HTML :
<script src='http://kauman.googlecode.com/files/slider.js' type='text/javascript'/>
Change with this code :
<script src='https://masolis-javascript.googlecode.com/svn/trunk/slider.js' type='text/javascript'/>
This code for related post
<script src='http://jamu-martin.googlecode.com/files/related-martin.js' type='text/javascript'/>
Change with this code :
<script src='https://masolis-javascript.googlecode.com/svn/trunk/relatedpost.js' type='text/javascript'/>
This code for page navigation
<script src='http://jamu-martin.googlecode.com/files/page%20navigation.js' type='text/javascript'/>
Replaces with this code :
<script src='https://masolis-javascript.googlecode.com/svn/trunk/pagination.js' type='text/javascript'/>
This code for label :
<script src='http://jamu-martin.googlecode.com/files/label.js' type='text/javascript'/>
Change with this code :
<script src='https://masolis-javascript.googlecode.com/svn/trunk/label.js' type='text/javascript'/>
The last one :
<script src='http://kauman.googlecode.com/files/johnybingung.js' type='text/javascript'/>
Change with this code :
<script src='https://masolis-javascript.googlecode.com/svn/trunk/bingung.js' type='text/javascript'/>

Important :
I suggest you to save any javascript in this template with your own Google Code or another file hosting for better result. Read this tutorial to save Javascript in to your own Google Code.

Read More --►

Kamis, 12 April 2012

Dua Template Gratis dengan Slider Otomatis

Malam ini saya akan sharing lagi dua template gratis serba otomatis, maksudnya anda tidak perlu lagi susah-susah untuk memasukkan kode script ke dalam kotak HTML/Javascript tinggal ketik label di dalam kotak HTML/Javascript maka slider dan label per kategori akan muncul disana. Sebenarnya template ini hanya modifikasi template yang sudah ada, karena banyak yang meminta slidernya dibuat otomatis, saya utak-atik kembali templatenya biar jadi lebih gampang buat pengguna dalam memakainya.

Johny Simplemag

Template ini modifikasi dari Johny Magazine 2 yang masih memakai slider Yahoo yang manual, Johny Simplemag saya buat sedemikian rupa sehingga semua widget yang ada lebih dinamis dan otomatis dengan masih memasang slider Yahoo. Slider Yahoo disini saya buat lebih sederhana, karena hanya 4 post yang bisa ditampilkan pada slider tapi secara tampilan masih sama.

Demo | Download

Sekarang langsung saja pada pemasangannya :
Slider

Di dashboard masuk ke layout
Kemudian pilih featured today yang ada di layout

Setelah itu masukkan atau ketik label yang ingin ditampilkan pada slider contohnya seperti gambar di bawah ini :

Keterangan :
Ganti sport dengan label yang Anda inginkan (ingat besar kecil huruf harus sama dengan label yang sudah anda buat)
Demikian juga untuk judul widget, anda bisa menggantinya sesuaikan dengan label.
Label 1 - Label 6

Untuk memasang Label 1 sampai dengan Label 6 caranya sama seperti diatas, Anda tinggal mengetikkan label yang ingin ditampilkan pada widget tersebut. Lihat gambar dibawah ini :

Keterangan :
Ganti news dengan label Anda, dan ganti judul widget (label 1) dengan judul yang sesuai dengan label.

Penting :

Karena dari template yang kemarin masih ada yang error dalam penataan widget, isi semua Label 1 sampai dengan Label 6 dan usahakan dalam meletakkan label, pilih yang jumlahnya minimal 5. Sehingga untuk blog yang baru dan belum memiliki banyak postingan, penataan widget akan tersusun ke bawah, jadi perbanyak postingan dan label terlebih dahulu sebelum mengajukan pertanyaan.

New Johny Darkgamer

Demo | Download

Template ini sudah lama, tapi ternyata peminatnya masih banyak. Kemarin ada yang meminta untuk dibuatkan template Johny Darkgamer tapi dengan fitur slider Carousel otomatis. Tampilan hampir sama dengan Johny Darkgamer lama, saya hanya menambahkan fitur label per kategori diatas blog post dan merubah warnanya menjadi biru.

Slider

Masuk ke Layout kemudian pilih kotak slider

Caranya seperti pemasangan slider pada template Johny Simplemag diatas, anda tinggal ketikkan label yang ingin anda tampilkan dalam slider carousel ini, seperti gambar dibawah :

Demikian juga dengan Label 1 dan Label 2 yang ada di layout template ini, masukkan labelnya kemudian save/simpan.

Itu tadi dua template gratis yang saya bagikan kepada teman-teman blogger kali ini, selamat mencoba dan semoga bermanfaat.

Pesan dari bang Johny :

Mohon jangan dihilangkan atau diganti kredit link yang ada di bagian bawah sebelah kanan, kalau yang kiri ada tiga itu silahkan diganti dengan bloglist Anda nggak apa-apa

Salam - Johny Template

Update Templates

My Google Code was banned, there's so many script that I put in there can't be opened. But I already fixed it with the updates ones, you can re-download this template or you can change some script below

Johny Simplemag
Click this link and read subtitle "Update Template" in that post for the latest updates of Javascript

New Johny Darkgamer
Click this link and read subtitle "Update Template" in that post for the latest updates of Javascript

Read More --►

Rabu, 11 April 2012

Breaking News : Gempa Berpotensi Tsunami Guncang Aceh

Barusan saya lihat ada berita di TV bahwa telah terjadi gempa bumi mengguncang laut sebelah barat Banda Aceh. Gempa terjadi pada pukul 15.38 dan berpusat di 2,31 Lintang Utara dan 92,67 Bujur Timur. Gempa dirasakan di Lampung, Padang dan Bengkulu. Gempa berkekuatan 8,5 skala richter itu menurut para ahli berpotensi menimbulkan gelombang tsunami. Guncangan terasa kuat dan terus-menerus. Pengunjung Kafe de Helsinki pun berhamburan. Gempa masih berlangsung sampai saat berita ditulis pukul 15.41.

Jika berita ini benar adanya, maka untuk saudara-saudaraku yang ada di Banda Aceh dan sekitarnya semoga mengetahui hal ini dan segera menyelamatkan diri sehingga tidak terjadi hal-hal yang tidak diinginkan, demikian breaking news hari ini.

Bagi yang tidak sempat untuk mengikuti atau membaca berita dari situs lain, untuk kali ini saja tolong artikel ini disebarkan ke yang lain, agar semua saudara kita yang ada disana selamat tidak terjadi sesuatu apapun... makasih sebelumnya

Read More --►

Sabtu, 07 April 2012

Gamer Darkpaper, The Best Template Gamer I Ever Made

Sekali-kali judulnya pakai bahasa Inggris biar keren, dan mohon maaf kalau judulnya agak sedikit narsis. Karena memang template ini template terbaik yang pernah saya buat, itu dari sudut pandang saya sendiri, entah bagaimana pandangan teman-teman semua. Sebenarnya saya sempat bingung, template ini sudah jadi sejak kemarin. Saya mau cerita sebentar, ternyata template ini ada yang mau beli, tapi dengan syarat template ini tidak dishare secara gratis di internet, tapi kalau ada orang lain yang mau beli lagi baru boleh, alias template ini mesti dibuat premium pemakainya mesti bayar.

Setelah saya pikir-pikir, kesepakatan gagal. Saya tetap mau share template ini secara gratis. Itu cerita sore tadi, sekarang langsung saja tentang template ini. Namanya Gamer Darkpaper, terus terang saya asal kasih nama ke template ini, lagi nggak ada ide. Secara tampilan sama persis dengan template Mas Paper magazine 2 yang membedakan hanya warna dominan yang ada pada template. Dengan warna dasar hitam dan merah membuat template ini kelihatan lebih hidup daan menyala, biar orang yang melihat ngantuknya jadi ilang. Template ini saya desain khususnya untuk para pecinta games (seperti saya) tapi kalau mau diisi dengan konten lain silahkan saja. Fiturnya juga sama persis yang membedakan hanya pada kotak feedburner dan related artikel yang ada di bawah postpage. Saya akan ulang lagi tutorialnya disini

Fitur :

Slider carousel dan featured slider otomatis
Multi level drop down menu.
Automatic widget per category
Pagination ready
Ads ready dan widget twitter
Dan masih banyak lagi

Slider

Menuju ke layout >> add gadget masukkan kode ini pada kotak HTML/Javascript :

Keterangan :

Perhatikan tulisan warna biru diatas, itu adalah label yang saya masukkan pada slider. Silahkan anda ganti sesuai keinginan.

Widget Label

Perhatikan layout template diatas, untuk kolom Your label here, Label 1, Label 2, Label 3 sampai dengan Label 6 Anda tinggal masukkan label pada kotak HTML/Javascript seperti contoh gambar di bawah ini :

Untuk contoh dari gambar diatas, label 3 Anda ganti dengan judul widget. entertainment silahkan diganti dengan label Anda sendiri. Perlu diingat besar kecil huruf harus sama dengan label yang sudah Anda buat sebelumnya. Jadi disini anda tinggal memasukkan label bukan kode script, misalnya sport, news, culture dan lain-lain ke dalam kotak HTML/Javascript, kemudian sve lihat hasilnya.

Twitter Widget

Twitter widget untuk template ini sedikit berbeda dengan versi sebelumnya, tapi pemasangannya sama. Untuk membuat twitter widget masukkan kode di bawah ini pada kotak HTML/Javascript :

Ganti maskolis dengan twitter username anda.

Kotak feedburner di bawah postingan

Cari kode script di bawah ini pada edit HTML (jangan lupa centang expand widget templates) :

Keterangan :
Warna biru : ganti dengan alamat feed anda.
Warna merah : ganti dengan URL anda.
Ganti juga URL feed http://feeds.feedburner.com/blogspot/htbgh dengan URL feed Anda.

Saran saya, dalam menggunakan template ini. Buka xml template ini, terus copy ke notepad kemudian buka Edit HTML template, kemudian copykan yang ada di notepad kesitu. Setelah itu save templates >> deleted widget. Langkah selanjutnya masuk ke layout, kosongkan semua widget kecuali, Your label here, Label 1 sampai dengan Label 6 jangan dihapus. setelah itu preview template. Hal ini dilakukan agar kode bawaan template lama tidak ikut sehingga mempersulit dalam penataan widget nantinya. Baru kemudian pasang widgetnya satu persatu. Setelah normal silahkan template ini dimodifikasi sesuka hati. Dan yang perlu diingat template ini banyak sekali menggunakan kode javascript, jadi jika Anda ingin memasukkan widget baru yang juga menggunakan javascript, lihat dulu apakah ada kode yang sama meskipun serinya berbeda. Pakai saja salah satunya. Selamat mencoba dan semoga bermanfaat...... happy weekend

Iklan template baru, kalau ada yang mau dishare kalau nggak ada dipakai sendiri (serba otomatis dari mulai slider sampai ke recent categories_tinggal masukin label ke widget)

Pesan dari bang Johny :
Mohon jangan dihilangkan atau diganti kredit link yang ada di bagian bawah sebelah kanan, kalau yang kiri ada tiga itu silahkan diganti dengan bloglist Anda nggak apa-apa

Salam - Johny Template

Demo | Download

Read More --►

Mudjoko

Menu

Navbar atas

Navbar bawah

Cari Blog Ini

Sabtu, 28 April 2012

Johny Storage, Template Magazine untuk Blog Berita

Rabu, 25 April 2012

Membuat Content Slider Image Otomatis Membuat Content Slider Image Otomatis

Senin, 23 April 2012

Membuat Slider Carousel Otomatis Berdasarkan Label

Kamis, 19 April 2012

Inilah Dua Template Johny Asal Jadi Inilah Dua Template Johny Asal Jadi

Kamis, 12 April 2012

Dua Template Gratis dengan Slider Otomatis

Rabu, 11 April 2012

Breaking News : Gempa Berpotensi Tsunami Guncang Aceh

Sabtu, 07 April 2012

Gamer Darkpaper, The Best Template Gamer I Ever Made

Dialog perhatian

1 Perhatian ... !

JS