OPTIMASI BLOG 3: 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

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/AVvXsEjkbWDfkvOEcgUIeaF1TKiBIwtllByDUe9fjzInjksi6SmQq4Vq3aP-zAYPxC4KojjnRofz9aTkp1NxcwloMYBVjzZmD7dJym9ij23a5oJaqwcjLRPMyVN6-YKMFaA7UrmEwFCGA9Y0SJrE/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='https://masolis-javascript.googlecode.com/svn/trunk/contentslider.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgH2T91kln3QWgb8Lv_JVAnsvwyZtwzOeACqKR4qhOuG8SnHwKVWcV8Iog-epU-KLH9qqOu7PQjHMi66nBcml-Bi2p9Vq4LXQod82_H8VQ-lIeL5_APpbAr97jzg0zGhfnONqKUrGake4/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

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/AVvXsEjnOKqTP3Z_bSWqY-tr6ju4uv8QLQvZYT8uoEqj0rUACAuBOG9w13ZgzdhiL03QCdedqbCB9Wb9RYKUoT4BJAJmH7HHCsBIE3I-vjWNoER17Y0RcORwX71Yi0dszPHwFq9oqMWTkuDKwwU/s1600/scroller-bg.png) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLTXlcfIdUq8_ZXlcffYHaNZficbdkpBXB4VAtmcqn0BeKT0uMfUjpDODkZ13GcDdP_wy4dC0ggcSfIoWhGFeRcifBATCRK2gZNDy1Dp_rq5nozjr-y3a-EL_ZMDzes93gpppHqa_MjZ4/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/AVvXsEh7XXnivhD_4ed0gQnNQ-eZ6y8jpt9CX9KhN3hIGHwEdLh2go0Hzd4WN9W_OA3ktTmE9lb9b61-svu0dYOk1k9oNkP16xfsBA_s0tg1PIEQsTgbD6MfJsmNBkOTXwLPb6AEKy0YJhm13XA/s1600/prev.png) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeQUyruLjLlfnPrgKeDMY6FK7VfihgVEKuPPUq1W5zRNgJbdBHHeWEEUU_ywNDR8MhW8fRohwyvIR9HW1YGAzKOYN6UgqZUvnG1ND_gUxB0ufEe_Dc31dKxUS82Ug8kSoBLPneT2df_bU/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/AVvXsEiXsF9_fOhwdrwQLwCt6doLt028j8kdhzOCt0EKugTVSfJXpl86k_cqN333h3PXyfsqK7M7c3Tawm0Bag7I97nPg2Ja3eB8F9i0SAG5w4ikIrHerH3R-rJI9mIpsO_51IYVmgmcyWcAOy0/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/AVvXsEhFqExWPSShgtWv80CES0ypo0P3zxLmreF0Xi1tnqAL-wrzbaQDHCtTP11FnuTw9RiniQrmwZNgHrE9dFuhCmUFdPYOgbdpZFoMYDoR0INPTulyunSL7ZLWXywdwsc-hr02Z2Y9rGBnBR8/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='https://masolis-javascript.googlecode.com/svn/trunk/carousellite.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgH2T91kln3QWgb8Lv_JVAnsvwyZtwzOeACqKR4qhOuG8SnHwKVWcV8Iog-epU-KLH9qqOu7PQjHMi66nBcml-Bi2p9Vq4LXQod82_H8VQ-lIeL5_APpbAr97jzg0zGhfnONqKUrGake4/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

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.

Cara Membuat Breadcrumbs di Blog

bredcrumb, bread crumbs, menu breadcrumb, cara membuat menu breadcrumb

Cara Membuat Breadcrumb di Blog - Breadcrumb adalah menu navigasi yang menunjukkan letak atau posisi sebuah halaman yang sedang terbuka. Breadcrumb biasanya di pasang di bagian bawah artikel atau di bagian atas postingan, tepatnya di atas atau di bawah judul artikel. Menu navigasi Bread Crumb ini berupa beberapa link yang menuju ke halaman homepage blog ( Home / Beranda ), link kategori atau label artikel serta judul artikel yang sedang terbuka. Untuk lebih jelasnya, lihat di bagian atas artikel ini.

Tujuan Membuat Breadcrum di blog

Saya pribadi menyukai breadcrumb karena bread crumbs bisa menghiasi bagian atas halaman posting agar judul artikel tidak terlihat kaku. Tapi di balik fungsinya untuk mempercantik tampilan blog, breadcrumb juga merupakan salah satu pendukung SEO. Menurut master SEO, dengan memasang breadcrumb di atas judul artikel, mesin pencari akan lebih mudah menelusuri halaman yang ada di dalam blog sehingga kesempatan untuk tampil di halaman depan hasil pencarian menjadi lebih besar. Selain itu, dengan membuat breadcrumb di halaman artikel pengunjung akan lebih mudah mencari artikel dengan label yang sama pada sebuah blog yang tidak dilengkapi dengan Related Post / Artikel Terkait.

Hampir semua blog menggunakan breadcrumb. Alasan utama blogger memasang menu navigasi SEO ini adalah untuk meningkatkan SEO Blog. SEO yang yang kuat akan mendatangkan trafik yang melimpah. Blog tarfik yang melimpah akan menjadi sebuah ladang online dan pemiliknya akan panen dollar. Mau ???

Cara membuat Breadcrumb di blogger Membuat menu navigasi bread crumbs di blog sangat mudah. Kopi, eh copy kode breadcrumb, paste di template blog, klik simpan template, selesai...

Penjelasan selengkapnya tentang cara membuat dan memasang menu navigasi breadcrumb di blog adalah sebagai berikut :

Silahkan masuk ke dasbor blog anda dengan memasukkan username dan pasword blog anda di www.blogger.com.
Selanjutnya buka halaman kode template blog untuk memasang kode breadcrumb di template.
Belum tahu cara masuk ke halaman edit template ? Klik link di bawah ini untuk membaca artikel selengkapnya yang di lengkapi dengan gambar

"Cara mengedit template Blog".

Sudah tahu cara mengedit template ? Lanjutkan dengan memberi tanda checklist pada kotak kecil yang ada di depan tulisan "Expand template widget".
Untuk berjaga² terjadi kerusakan template atau error karena melakukan kesalahan saat mengedit kode templatenya, sebaiknya DOWNLOAD dulu template blog anda.
Copy kode html berikut ini :

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>
Anda berada di » <a expr:href='data:blog.homepageUrl'>Home</a> » <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'> , </b:if>
          </b:loop>
        </b:if> » <data:post.title/>
</div>
</b:if>
</b:if>

7. Letakkan / Paste kode tersebut di bawah kode <div class='post hentry uncustomized-post-template'> template blog anda. Bisa juga letakkan kodenya di bawah kode <div class=’post hentry’> atau bisa juga di atas kode <div class='post-header-line-1'/> .
Jangan lupa gunakan Gunakan Tombol F3 pada keyboard untuk melakukan pencarian kode dengan cepat.
Apabila anda ingin mengedit kodenya, silahkan edit kode yang berwarna MERAH.

Selanjutnya........

Untuk mempersonalisasi tampilan Navigasi Breadcrumbs, cari kode untuk ]]></b:skin> di template blog anda.
Copy kede CSS breadcrumb berikut ini, lalu Paste di atas kode ]]></b:skin>

.breadcrumbs {
        padding:5px 5px 5px 0;
        margin: 0 0 5px;
        font-size:12px;
font-family: Georgia;
        line-height: 1.4em;
        border-bottom:4px double #000000;
       }

Dengan kode tersebut, anda bisa mengganti besarnya font breadcrumb dengan mengganti angka 12 menjadi lebih besar atau lebih kecil. Kode Georgia adalah kode untuk jenis huruf yang di gunakan breadcrumb. Anda bisa mengganti jenis hurufnya dengan jenis huruf yang lain seperti trebuchet ms, arial, verdana atau font lain sesuai keinginan anda. Untuk kode pada baris terakhir, angka 4 berarti besar garis bawah breadcrumb adalah 4 piksel, double berari garis ganda, dan kode #000000 adalah kode HTML untuk warna hitam. kode tersebut artinya :
"Garis pinggir bawah menu breadcrumb adalah garis ganda ( double ) dengan ketebalan garis sebesar 4 piksel dan garisnya berwarna hitam ( #000000 ). Anda bisa mengganti angka 4 menjadi lebih besar atau lebih kecil, kode : double bisa di ganti dengan kode :

solid = garis tunggal biasa atau
dashed = garis putus - putus

Anda juga bisa mengganti warna tulisan menu breadcrumb dengan mengganti kode warna hitam ( #000000 ) dengan kode warna yang lain, misalnya kode #B40404 untuk warna merah dan sebagainya. Untuk melihat lebih banyak kode warna, klik Link di bawah ini :

"Tools untuk melihat kode warna"

Catatan :
Karena setiap kode template berbeda - beda, dengan cara di atas Navigasi Breadcrumbs tidak terlihat pada beberapa template. Jika hal ini terjadi pada template anda, lakukan seperti berikut ini :

Copy kode HTML pada step 6 lalu Paste di atas kode <div class='post-header'> template anda. Itu akan membuat Navigasi Breadcrumbs berada di bawah Judul Artikel.

Jika ingin menyimpan Navigasi Breadcrumbs di Atas Judul Postingan / Artikel, buat kodenya seperti berikut ini :

    <b:includable id='post' var='post'>
      <div class='post hentry'>

        <a expr:name='data:post.id'/>

    <b:if cond='data:blog.homepageUrl == data:blog.url'>
    <b:else/>
      <b:if cond='data:blog.pageType == "item"'>
    <div class='breadcrumbs'>
    Anda berada di » <a expr:href='data:blog.homepageUrl'>Home</a> » <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
                <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'> , </b:if>
              </b:loop>
            </b:if> » <data:post.title/>
      </div>
    </b:if>
    </b:if>

        <b:if cond='data:post.title'>
          <h3 class='post-title entry-title'>
          <b:if cond='data:post.link'>
            <a expr:href='data:post.link'><data:post.title/></a>
          <b:else/>
            <b:if cond='data:post.url'>
              <b:if cond='data:blog.url != data:post.url'>
                <a expr:href='data:post.url'><data:post.title/></a>
              <b:else/>
                <data:post.title/>
              </b:if>
            <b:else/>
              <data:post.title/>
            </b:if>
          </b:if>
          </h3>
        </b:if>

        <div class='post-header'>

        <div class='post-header-line-1'/>

        </div>

Cari kode yg berwarna HITAM.
Kode yang berwarna BIRU, adalah kode yang sama pada STEP 6 , lettakan kodenya diantara kode yang berwarna HITAM persis seperti contoh di atas.
Kode yang berwarna MERAH tidak penting, tapi kalau anda mengerti maksudnya, ya syukur.... hehehehehe..........
Sekali lagi !!! Karena setiap kode template mungkin berbeda, carilah kode yang mirip.

Jika anda sudah terbiasa mengedit template, sebaiknya coba "Cara membuat Breadcrums cepat terindeks". Tapi, jika anda belum terbiasa dengan kode HTML template blog, sebaiknya gunakan cara membuat breadcrumb di atas. Kode untuk membuat breadcrumb yang langsung terindeks jauh lebih banyak dari kode breadcrumb biasa di atas. Selain itu, setelah memasang breadcrumb yang cepat terindeks, akan sulit menghapus breadcrumbnya karena kode yang di pasang sebelumnya akan terpisah ( hanya untuk beberapa jenis template ). Dari banyak template yang saya coba pasangi breadcrumb yang langsung terindeks, tidak satupun yang membuat kode breadcrumb tetap utuh.

Silahkan pilih mas bro....
Mau membuat breadcrumb biasa, atau mau membuat breadcrumb yang cepat terindeks. Tujuan dan fungsi keduanya tetap sama, yang membedakan, hanya cepat tidaknya terindeks di hasil pencarian search engine.

Oce mas bro,... semoga artikel cara membuat breadcrumb di blogspot ini bermanfaat.
Happy Blogging....

Cara Membuat dan Memberi Gaya pada Kotak Scroll

Cara Membuat dan memberi Gaya pada Kotak Scroll - Sebuah kotak dengan fungsi scroll sangat banyak digunakan oleh blogger blogspot. Ada yang menggunakannya untuk menyimpan daftar isi blog, membuat widget blog lebih dari 1 pada satu kotak, membuat blogroll, menyimpan statistik, dan lain lain. Dengan adanya fungsi scroll, kotak akan lebih terlihat praktis dan menarik. Selain itu, Sebuah kotak dengan fungsi scroll bisa menyimpan isi yang sangat besar atau banyak dengan ukuran kotak yang kecil.

Scroll Kotak Otomatis

Jika isi kotak lebih lebar dari kotaknya, maka kotak akan secara otomatis membuat scroll ke samping dan membuat scroll ke bawah apabila isi kotak lebih panjang dari ukuran kotaknya. Dengan demikian, jika ingin menyimpan widget yang lebar atau panjang atau keduanya pada sidebar blog, kita tinggal membuat kotak scroll lalu menyimpan widget tersebut di dalam kotak scrollnya.

Kotak dengan fungsi scroll kurang lebih akan terlihat seperti ini :

KOTAK dengan Fungsi Scroll Bloggerbugis

Mana scrollnya ????

Apabila sudah diisi dengan tulisan atau widget yang melebihi kapasitas kotaknya, maka kotak secara otomatis akan menambahkan scroll seperti contoh di bawah ini :

Artikel Cara membuat kotak dengan fungsi scroll ini di tulis dan di terbitkan oleh bloggerbugis. Jika anda ingin mengcopy artikel ini, harap sertakan LINK AKTIF menuju ke http://www.bloggerbugis.com sebagai sumber artikel. Apabila anda menemukan artikel ini di blog lain selain BLOGGERBUGIS, mohon beritahu admin BLOGGERBUGIS agar blog tersebut di laporkan ke google sebagai pencuri konten agar blognya di hapus dari indeks google. Terima kasih...

Atau seperti contoh kotak scroll di bawah ini yang di isi dengan gambar:

Dan akan terlihat seperti contoh di bawah ini jika kotak scroll di isi dengan widget :

Kode yang digunakan untuk membuat sebuah kotak dengan fungsi scroll adalah :

<div style="overflow:auto; width:150px; height:100px; padding:10px; border:1px solid #000000;">BLOGGERBUGIS</div>

Sebelum menambahkan sedikit gaya pada kotaknya, saya akan jelaskan kode untuk membuat kotak scrollnya terlebih dahulu.

width:100px adalah lebar kotak yang diukur dalam pixel. (100px/100pixel)
height:400px adalah tinggi kotak yang diukur dalam pixel. (400px/400pixel)
padding:10px; adalah jarak isi kotak dengan garis pinggir kotak.
border:1px solid #000000 adalah kode untuk ketebalan garis pinggir kotak ( border ) dengan garis biasa ( solid ) yang berwarna hitam ( #000000 ).
Kata BLOGGERBUGIS adalah isi kotak yang berupa tulisan yang bisa juga di ganti dengan kode widget jika kotaknya di isi dengan widget.

Memberi Gaya pada kotak scroll

Dengan menambahkan beberapa kode, Kotak scroll di blog akan terlihat lebih menarik. Contohnya :

Tambahkan kode background:#00ff00; untuk memberikan background warna pada kotaknya. Hasilnya seperti ini :

BLOGGER BUGIS
BLOGGER BUGIS
BLOGGER BUGIS
BLOGGER BUGIS
BLOGGER BUGIS
BLOGGER BUGIS
BLOGGER BUGIS
BLOGGER BUGIS
BLOGGER BUGIS

Kode untuk membuat kotak scroll dengan background warna di atas adalah :

<div style="overflow:auto; width:150px; height:100px; padding:10px; border:1px solid #000000; background:#00ff00;">BLOGGERBUGIS</div>

Kode background:#00ff00 adalah kode untuk memberi latar belakang ( Background ) berwana hijau pada kotak scroll. Anda bisa mengubah warna background dengan mengganti kode rana hijau dengan kode warna yang anda inginkan. Untuk melihat kode HTML warna, klik "Tools Untuk melihat Kode Warna".

Tambahkan bingkai untuk membuat kotak dengan fungsi scrollnya jadi lebih menarik hinggan terlihat seperti contoh di bawah ini :

BLOGGER BUGIS
BLOGGER BUGIS
BLOGGER BUGIS
BLOGGER BUGIS
BLOGGER BUGIS
BLOGGER BUGIS
BLOGGER BUGIS
BLOGGER BUGIS

Untuk memberi bingkai pada kotak dengan fungsi scroll seperti conto di atas adalah :

<table border="3" cellpadding="1"><tbody><tr><td><div style="overflow:auto; width:150px; height:100px; padding:10px; border:1px solid #000000; background:#00ff00;">BLOGGERBUGIS</div></td></tr></tbody></table>

Untuk membuat bingkainya menjadi lebih tebal, ganti angka 3 pada kode <table border="3" menjadi lebih besar.
Untuk memberi jarak antara bingkai dengan kotak, ganti angan 1 pada kode cellpadding="1" menjadi lebih besar.

Misalnya angka table border adalah 5 dan angka cellpadding 5, maka hasilnya akan seperti contoh berikut ini :

Cara membuat kotak dengan fungsi scroll dengan menambahkan style background warna dan bingkai pada kotak scrollnya

Gaya lain yang bisa di tambahkan pada kotak scrollnya adalah efek shadow ( bayangan ). Agar efek bayangan pada kotaknya lebih menarik, ganti border ( garis pinggir ) kotaknya dengan garis pinggir ganda. Hasilnya kurang lebih seperti ini :

Cara membuat kotak dengan fungsi scroll dengan menambahkan style background warna, efek bayangan dan garis pinggir ganda pada kotak scrollnya

Kode yang di gunakan untuk membuat kotak scroll dengan efek shadow, dan garis pinggir ganda seperti di atas adalah :

<div style="overflow:auto; width:150px; height:100px; color:#b4040; padding:10px; border:4px double #000000;-moz-box-shadow:0 0 10px #000000;-webkit-box-shadow:0 0 10px #000000;-goog-ms-box-shadow:0 0 10px #000000;">Cara membuat kotak dengan fungsi scroll dengan menambahkan style background warna, efek bayangan dan garis pinggir ganda pada kotak scrollnya</div>

Kode yang berwarna merah adalah kode untuk memberi garis pinggir ganda. Jika ingin membuat garisnya putus - putus, ganti kode double dengan dashed
Kode yang berwarna biru adalah kode untuk memberi efek bayangan berwarna hitam pada kotak

Semua kode di atas bisa di edit dengan menggabungkan kodenya, menambahkan atau mengurangi kodenya atau keduanya. Silahkan edit kode dasar membuat kotak scroll di blog tersebut di atas agar kotaknya sesuai dengan keinginan anda.

Jika menambahkan terlalu banyak gaya, nanti kotaknya menjadi OVER DOSIS eh OVER STYLE

. Karena itu saya akhiri artikel "Cara Membuat Kotak Scroll di Blog" sampai disini saja

. Jika anda lebih suka membuat text area di bandingkan dengan kotak scroll, klik "Beberapa macam cara membuat textarea"

Oce bro... semoga artikelnya bermanfaat.
Happy Blogging dan Salam Blogger....