Cara Membuat Sebuah Blog

Bagaimana Cara Mudah Membuat Link Download di Blog?

noreply@blogger.com (Anonymous) — Sun, 16 Dec 2012 10:03:00 +0000

Pertama sobat daftar di code.google.com,jika dah punya account di GMail tinggal daftar aja dengan email atau account google sobat,jika dah berhasil login,sobat nantiu akan lihat tampilan seperti ini dan klik aja Project Hosting,lihat gambar:

Selanjutnya nanti akan tampil halaman baru klik aja 'Project Hosting on Google Code',lihat gambar gan:

Kemudian,sobat akan dihadapkan halaman seperti gambar berikut,dan isi form sesuai dengan permintaan dan hal-hal seputar file yang akan sobat download(gunakan huruf kecil aja ya),lalu klikCreate Project:

Project sobat sudah berhasil dibuat,klik 'Downloads' untuk mulai meng-upload file,lihat gambar gan:

Setelah itu sobat akan dihadapkan halaman seperti berikut,klik tombol 'New Download',lihat gambar:

Nanti sobat akan dihadapkan form seperti gambar berikut,isilah form sesuai dengan kriteria file sobat yang akan di upload,lihat gambar:

Dan tada!!! file anda telah berhasil anda upload dengan tampilnya halaman seperti dibawah ini,klik file untuk melihat statusnya,lihat gambar:

Sebagai langkah terakhir,sobat klik kanan pada file seperti gambar dibawah ini dan klik 'Copy Link Location',lihat gambar:

Nah,setelah sobat melakukan langkah-langkah diatas,sekarang sobat sudah memiliki url dari file yang baru saja sobat upload dari mengcopy lokasi file,pada tahap ini saya mendapatkan url file seperti ini:

http://belajargooglecode.googlecode.com/files/Siapa%20Bilang%20Bid%27ah%20itu%20sesat.mp3

Yup,itulah url link yang sobat dapat gunakan dalam tutorial membuat link download kali ini,nah cara menggunakannya pada posting or Html widget gunakan kode berikut:

<a href="nama_url_link" target="_blank">nama file (terserah sobat ya)</a>

contoh:

<a href="http://belajargooglecode.googlecode.com/files/Siapa%20Bilang%20Bid%27ah%20itu%20sesat.mp3" target="_blank">Benarkah Bid'ah itu Sesat?</a>

Semoga bermanfaat...

Baca juga: http://pelajaran-blog.blogspot.com/2012/01/cara-membuat-link-download-dengan.html

Miliki Kekasih Pencemburu Berat, Putus atau Pertahankan?

noreply@blogger.com (Anonymous) — Fri, 14 Dec 2012 19:35:00 +0000

CEMBURU memang diperlukan dalam sebuah hubungan. Namun, kadar cemburu yang berlebihan justru akan mengancam kelangsungan hubungan ke depan.

Banyak kisah cinta kandas di tengah jalan karena rasa cemburu satu sama lain. Hal ini tentu merugikan jalinan cinta yang dibina mengingat cemburu seperti halnya penyakit yang menggerogoti hubungan. Karenanya, Anda perlu memelajarinya agar sifat cemburu pasangan tak meruntuhkan jalinan cinta.

Pahami mengapa cemburu itu timbul

Mengapa begitu banyak orang cemburu terhadap pasangannya. Secara umum, hal ini merupakan kombinasi atas dua alasan. Pertama, biasanya seseorang mengharapkan pasangan yang sempurna sesuai dengan cara yang mereka bayangkan. Alhasil, fokus itu pun membuat seseorang mencoba untuk menyesuaikan siapa dia, bagaimana dia bertindak, dan bagaimana dia hidup dengan standar mereka sendiri dalam bentuk kesempurnaan versi dirinya, seperti dilansir Practicalhappiness.
Alasan kedua seseorang menjadi cemburu yakni mereka takut kehilangan pasangannya. Mereka merasa jika tak mengawasi, maka pasangannya perlahan akan meninggalkannya dengan orang lain. Tak heran, mereka pun lebih ketat menjaga pasangannya. Pada awalnya, sifat protektif tersebut mungkin membuat wanita tersanjung karena merasa diperhatikan lebih oleh pasangannya. Namun, seiring perjalanan waktu, mereka justru merasa tak nyaman karena merasa terkekang kebebasannya bersosialisasi.

Bagaimana mengendalikannya?

Banyak wanita memilih meninggalkan kekasihnya yang pencemburu berat. Hal ini sangat dimaklumi mengingat tak banyak orang yang dapat memahami atau mengubah sifat cemburu pasangannya. Jika Anda benar-benar mencintai pria tersebut dan serius berkomitmen dengannya, cobalah perbaiki masalah tersebut. Langkah awal yang bisa dicoba yakni menyadari dan mengakui bahwa dia memiliki masalah bahwa perilakunya tidak rasional dan merugikan hubungan Anda berdua. Setelah itu, Anda dapat mencari solusi bersama untuk mengatasi kecemburuan tersebut. (tty)

By: Okezone

Cara Download Lagu Melalui Handphone

noreply@blogger.com (Anonymous) — Fri, 14 Dec 2012 17:46:00 +0000

Download video dari handphone memang dalam kondisi tertentu tidak semudah download video melalui computer. Hal ini disebabkan oleh sejumlah factor, mulai dari situs penyedia video yang akan anda download, jenis koneksi yang anda gunakan, jenis perangkat mobile, operator seluler yang anda gunakan (kartu sim), dsb.

Jika anda menggunakan ponsel pabrikan Cina, seperti ponsel Cross dan type ponsel sejenisnya kedaannya memang tidak semudah saat anda menggunakan perangkat mobile seperti smartphone. Namun demikian, buat anda yang ingin mendownload video menggunakan type ponsel standar hal tersebut masih bisa dengan mudah dilakukan.

Untuk mendownload video dari internet seperti yang saya jelaskan diatas ada beberapa hal yang harus diperhatikan. Pastikan perangkat mobile yang anda gunakan support dengan type halaman web dimana anda ingin mengunduh video tersebut. Jika anda ingin mendownload video dari situs yang mengharuskan ponsel didukung dengan fitur javascript sementara ponsel anda tidak dilengkapi dukungan javascript, maka download video tidak bisa dilakukan.

Buat anda yang selama ini merasa kerepotan untuk mendownload video 3gp, video mp4 atau video dalam format lainnya, ada alternative mudah untuk mendownladnya.

Jika anda ingin download video menggunakan hp, gunakan situs vuclip.com

Masuk ke situs tersebut (http://vuclip.com)

Cari video yang akan anda download dengan mengetikkan kata kunci, missal : Dygita – Kembali.

Anda akan disajikan hasil pencarian video yang selanjutnya tinggal di download.

Note:

Vuclip tidak bisa diakses untuk operatot seluler tertentu, salah satu operator seluler yang bisa digunakan untuk download video dari vuclip adalah XL.

Cara Meningkatkan Trafik Blog di Alexa

noreply@blogger.com (Anonymous) — Fri, 14 Dec 2012 17:31:00 +0000

not found

Membuat 3 Kolom di Bawah Header Blogspot

noreply@blogger.com (Anonymous) — Tue, 11 Dec 2012 20:20:00 +0000

Apa teman-teman blogger semua ingin tampilan blognya tambah ramai? Kali ini saya akan menjelaskan sedikit tentang bagaimana cara membuat ramai blog teman-teman semua, salah satunya dengan membuat tiga kolom di bawah header. Widget 3 kolom dibawah header ini sebenarnya bisa Anda tambahkan jika pada bagian sidebar template sudah penuh dan terlalu panjang. Sebagai alternatif untuk meletakkan kode html ataupun javascript yang mungkin andaperlukan. Kurang lebih sama dengan postingan saya yang dulu tentang membuat multi kolom yang diletakkan di bagian bawah blog, namun kali ini saya meletakkannya bagian atas atau tepatnya dibawah header.

Baiklah langsung menuju lokasi pengeditan template-nya.

Silahkan login ke blogger.
Tuju Tata Letak.
Pilih tab Edit HML.
Jangan di klik Expand Template Widget, karena akan memusingkan anda.
Letakkan kode css berikut ini diatas kode ]]></b:skin>

/* –- Top --*/

#top {

background:#fff;

margin-top:10px auto;

width:960px;

overflow:hidden;

font-size:12px;

padding:10px;

}

#top h2 {

background:#000 url(http://lh5.ggpht.com/_7Y9pl24WpQY/Ss37F0ZA9kI/AAAAAAAAB2k/c_ySi8QZg20/header_thumb%5B2%5D.jpg) repeat-x;

font-size:14pt;

font-weight:400;

text-align:center;

font-style:normal;

line-height:1.3em;

color:#fff;

padding:5px;

margin-top:-10px;

margin-left:-10px;

margin-right:-10px;

}

#top ul {

color:#333;

margin:0;

padding:0;

}

#top ul li {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjASBDevWl0xZYjlbiS1E0FAVitPevmSrBXXddQrExSwCRMrn1gnNMYQOph1jH2O8twYitrY0IpQrtjKgzM8mOMp2EtX5ooVkJSAiCd0KZzGXn0dBb4ODVaTIAv0qxf2ByDvgE6XKVw7CVy/s320/b3.gif) no-repeat;

list-style-type:none;

border-bottom:1px dashed #CCC;

margin:0 0 10px;

padding:0 0 5px 20px;

}

#top ul li a:hover {

margin:0px 0px 5px;

padding:0px;

}

#topcenter {

width:300px;

float:left;

margin-left:10px;

background:#fff;

padding:10px

}

#topleft {

width:280px;

float:left;

margin-left:10px;

background:#fff;

padding:10px;

}

#topright {

width:280px;

float:right;

margin-left:10px;

background:#fff;

padding:10px;

}
Cari kode yang mirip seperti ini, biasanya letaknya dibawah </head>

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='JUDUL BLOG ANDA (Header)' type='Header'/>

</b:section>
</div>
Kemudian letakkan kode berikut ini tepat setelah kode diatas :

<div id='top'>

<b:section class='top' id='topleft' preferred='yes' showaddelement='yes'>

</b:section>

<b:section class='topcenter' id='topcenter' preferred='yes' showaddelement='yes'>

</b:section>

<b:section class='topright' id='topright' preferred='yes' showaddelement='yes'>

</b:section>
</div>
Simpan Template.

Semoga bermanfaat dan bisa membuat blog anda jadi ramai.

Related post: http://www.maskolis.com/2011/03/membuat-3-kolom-di-bawah-header.html

Tutorial Membuat Text Area

noreply@blogger.com (Anonymous) — Tue, 11 Dec 2012 20:17:00 +0000

Apa itu Text Area ? text area adalah area tempat untuk menyimpan text atau tulisan baru, atau bisa dikatakan

sebuah komponen HTML yang digunakan untuk menampilkan text atau kode script dalam bentuk dan format text. Biasanya text area dipakai untuk menyimpan kode HTML yang tidak bisa di tulis langsung ke dalam postingan di blog. Jadi fungsi dari text area ini kurang lebih untuk memudahkan pengunjung mengcopy seluruh isi text.

I. Text Area standard

Untuk membuat text area, silahkan copy code di bawah ini :

<p align="center"><textarea name="code" rows="2" cols="15"> Selamat datang di creating website </textarea></p>

berikut hasilnya :

Keterangan :

Untuk "rows"=3 adalah tinggi dari text area, jadi jika sobat menginginkan text area yang lebih tinggi silahkan sobat ganti dengan angka yang lebih tinggi.
Untuk cols="15" adalah lebar dari text area, jadi jika sobat menginginkan text area yang lebih lebar silahkan sobat ganti dengan angka yang lebih tinggi.

Cuku jelas bukan? Okey kita lanjutkan lagi dengan menggunakan Highlight

II.Text Area dengan menggunakan Highlight
Variasi lainnya dari text area yaitu dengan menggunakan tombol Highlight, jadi dimaksudkan agar lebih memudahkan untuk mengcopy seluruh isi text area hanya dengan menekan tombol Highlight.

Hanya dengan menekan tombol highlight maka seluruh isi dari text area akan di highlight dan tinggal di copy saja. Fungsi tombol highlight ini sangat berguna untuk mencegah tertinggalnya satu atau beberapa isi dari text area.

Silahkan copy kode HTML di bawah ini :

<div><form name="copy"><div align="center"><span><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" value="Highlight All" type="button"> </span></div><p align="center"><textarea style="width: 150px; height: 80px;" name="txt" rows="5" wrap="VIRTUAL" cols="20">Tulis sesuatu tentang blog teman-teman disini, maka tulisan yang teman-teman semua tulis akan muncul di sini dan siap di copy oleh para pengunjung</textarea></p></form></div>

dan seperti ini hasilnya:

Agar dapat memahami kode diatas, saya akan berikan uraian tentang kode-kode text area diatas.

<div align="center"> --> kata center menunjukan bahwa posisi tombol akan berada di tengah, jadi jika sobat ingin posisi tombol berada di tepi sebelah kiri, tinggal ganti dengan kata left. Dan jika ingin berada di tepi sebelah kanan, tinggal ganti dengan kata right.
<input onclick="javascript:this.form.txt.focus();this.form.txt.selec()"> --> kode ini artinya ketika tombol highlight di klik, maka seluruh text yang ada di dalamnya akan di highligt (di tandai atau di blok), jadi sobat jangan merubah tulisan ini.
Value="Highlight All" --> kata Highlight All adalah kata yang akan muncul di dalam tombol, jadi jika sobat ingin merubah tulisan ini silahkan ganti dengan kata yang sobat inginkan.
<p align="center"> --> ini menunjukan bahwa text area akan berada di tengah, nah jika sobat ingin text area sobat berada di tepi kiri, ganti kata center dengan kata left, bila ingin di tepi kanan, ganti dengan kata right.
<text style="WIDTH: 150px">-->kata "WIDTH:150px" menunjukan lebar dari text area tersebut sebanyak 150 pixel, jadi jika sobat ingin memperpendek atau memperpanjang lebar text area, sobat tinggal menggantinya dengan angka yang sobat inginkan. misal: "WIDTH:500px;"
HEIGHT: 80px --> angka "80px" menunjukan bahwa text area akan mempunyai tinggi sebesar 80 px, jadi jika sobat ingin merubahnya tinggal ganti angka tersebut dengan angka yang sobat inginkan. Misal : HEIGHT:160px.

Nah itu dia sedikit penjelasan tentang Text Area. Selamat mencoba dan semoga bermanfaat.

Selengkapnya: http://www.maskolis.com/2011/03/tutorial-membuat-text-area.html

Membuat Iklan Melayang dengan Tombol Close

noreply@blogger.com (Anonymous) — Tue, 11 Dec 2012 20:13:00 +0000

Objek melayang atau sering juga di sebut dengan Float Top Bar, sebuah jendela kecil yang muncul dari atas halaman setiap kali kita mengunjungi Website atau Blog. Float Top Bar ini biasanya berisi Content Iklan ataupun sebuah Form SubScribe sehingga pasti terlihat oleh pengunjung Website atau Blog kita. Untuk membuat Iklan melayang seperti ini sangatlah mudah, hanya dengan beberapa langkah, maka Iklan Melayang tersebut sudah bisa terpasang pada Website atau Blog Anda.

Oke, berikut ini adalah langkah-langkah pembuatannya :

Login Ke Blogger.com dengan Akun anda masing-masing Pastinya
Masuk ke Tab Tata Letak
Pilih Elemen Halaman
Tambah Gadget Pilih HTML / JAVASCRIPT
Dan copy kode di bawah ini kedalamnya yah

<a onblur="try {parent.

deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi__aenJKcPEmcYkyMc2YuMgxhBCdDujfRG9MUH4h0FsyoEHJhK1BFewPB7i40jjH3YZ2JmLOuf8CyKR41KDo21LUUX54yoECdOcndjFlDNnpY4vQqQTinibrH0HM4kCHTiwxZT97L-H_g/s1600-h/Widget.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi__aenJKcPEmcYkyMc2YuMgxhBCdDujfRG9MUH4h0FsyoEHJhK1BFewPB7i40jjH3YZ2JmLOuf8CyKR41KDo21LUUX54yoECdOcndjFlDNnpY4vQqQTinibrH0HM4kCHTiwxZT97L-H_g/s400/Widget.JPG" alt="" id="BLOGGER_PHOTO_ID_5433478876639914642" border="0" /></a>

<style type="text/css">

#gb{

position:fixed;

top:10px;

z-index:+1000;

}

* html #gb{position:relative;}

.gbcontent{

float:right;

border:2px solid #A5BD51;

background:#ffffff;

padding:10px;

}

</style>

<script type="text/javascript">

function showHideGB(){

var gb = document.getElementById("gb");

var w = gb.offsetWidth;

gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);

gb.opened = !gb.opened;

}

function moveGB(x0, xf){

var gb = document.getElementById("gb");

var dx = Math.abs(x0-xf) > 10 ? 5 : 1;

var dir = xf>x0 ? 1 : -1;

var x = x0 + dx * dir;

gb.style.top = x.toString() + "px";

if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}

}

</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

<div style="text-align:right">

<a href="javascript:showHideGB()">

.:[Close][Klik 2x]:.

</a>

</div>

<center>

Masukan Kode iklan atau Gambar yang anda inginkan di sini

</center>

<script type="text/javascript">

var gb = document.getElementById("gb");

gb.style.center = (30-gb.offsetWidth).toString() + "px";

</script></center></div></div>

6. Simpan

Untuk tulisan yang berwarna merah, bisa teman-teman ganti dengan kode iklan, gambar ataupun tulisan yang diinginkan, selamat mencoba.

Semoga bermantaat.

Artikel selanjutnya: http://www.maskolis.com/2011/03/membuat-iklan-melayang-dengan-tombol.html

Menghilangkan Langgan : Entri (Atom) dan Subscribe to : Poskan Komentar (Atom)

noreply@blogger.com (Anonymous) — Tue, 11 Dec 2012 20:12:00 +0000

Dalam membuat sebuah blog, kita pasti ingin blog kita tampil lebih rapi. Tulisan-tulisan yang mungkin tidak

diperlukan atau mengganggu kerapian blog kita, lebih baik kita hilangkan atau digantikan oleh fungsi dari tool lain. Salah satunya adalah Langgan : Entri (Atom) dan Subscribe to : Poskan Komentar (Atom), ada yang merasa kerapian blog kita terganggu dengan adanya tulisan di "Langgan: Entri (Atom)"? Mungkin itu yang pernah kita alami, dengan tulisan itu yang menurut kita tidak penting dan tempatnya juga kurang sesuai, maka kita bisa hilangkan atau kita ganti tempatnya agar lebih rapi. Sesuai dengan namanya Langgan: Entri (Atom) adalah fasilitas untuk berlangganan artikel/posting, sedangkanSubscribe to: Poskan Komentar (Atom) adalah fasilitas berlangganan bagi pengunjung untuk mengetahui komentar-komentar atas posting/artikel dari blog yang bersangkutan.

Namun demikian sebagian blogger tidak menyukai fitur-fitur tersebut, karena selain terlalu sederhana, juga telah tersedia fasilitas berlangganan yang lebih canggih seperti FeedBurner.Com, maka dari itu sebagian blogger lebih suka menghapus/menghilangkan fitur Langgan: Entri (Atom) dan Subscribe to: Poskan Komentar (Atom) dari blog mereka.

Nah jika Anda ingin mengikuti jejak sebagian blogger tersebut, berikut ini cara menghilangkan Langgan: Entri (Atom) dan Subscribe to: Poskan Komentar (Atom) di Blogspot :

A. Cara Menghapus Langgan: Entri (Atom):

Login ke Blogspot => klik Rancangan/Design => pilih Edit HTML, kasih centang pada kotakExpand Template Widget dan gunakan tombol Find untuk memudahkan pencarian kode;
Cari kode di bawah ini:

<b:include data='feedLinks' name='feedLinksBody'/>
Hapus/delete semua kode di atas, lalu Save Template, selesai.

B. Cara Menghapus Subscribe to: Poskan Komentar (Atom):

Login ke Blogspot => klik Rancangan/Design => pilih Edit HTML, kasih centang pada kotakExpand Template Widget dan gunakan tombol Find untuk memudahkan pencarian kode;
Cari kode di bawah ini:

<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>
Hapus/delete semua kode di atas, lalu Save Template, selesai.

Demikianlah tutorial sederhana cara hapus/hilangkan Langgan: Entri (Atom) dan Subscribe to: Poskan Komentar (Atom) pada Blogspot ini

Semoga bermanfaat.

More: http://www.maskolis.com/2011/01/menghilangkan-langgan-entri-atom-dan.html

Membuat Efek Blur Pada Gambar di Blogspot

noreply@blogger.com (Anonymous) — Tue, 11 Dec 2012 20:09:00 +0000

Selamat pagi teman-teman blogger semua. Kali ini saya menulis tutorial ini pagi hari sekali, ya kira-kira jam 06.00 WIB. Tutorial sederhana ini sebenarnya hanya membutuhkan sedikit kode csspada template. Cara membuat efek blur pada gambar, ya begitulah kira-kira pembahasan kali ini.Efek blur ini akan terjadi jika cursor melintas pada gambar, jadi gambar akan terlihat menjadi tampak samar apabila cursor melintas diatas gambar. Dan nanti akan saya jelaskan sekalian bagaimana caranya agar gambar yang di klik tidak pindah halaman atau menuju alamat url yang ada (tidak ngelink kemana-mana).

Caranya gampang aja kok, silahkan ikuti langkah-langkahnya berikut ini :

Login ke Blogger dulu ya.
Silahkan sobat tuju halaman Edit HTML.
Kemudian cari kode ]]></b:skin>
Letakkan kode berikut ini diatas / sebelum kode ]]></b:skin>

.linkopacity img {filter:alpha(opacity=100); -moz-opacity:1.0; opacity:1.0; border:0;}
.linkopacity:hover img {filter:alpha(opacity=30); -moz-opacity:0.3; opacity:0.3;border:0;}

Simpan Template.
Kemudian untuk membuat efek blur pada gambar yang akan di upload, contoh alamat url gambar yang ada :

<a href="http://creatingwebsite-maskolis.blogspot.com"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgliOL3hlDwc298rMOKDY_rD2ZoYOc6C2T3akpuLRpwP5jt6nAbYs-p_OdWOLu6v6a_IXTIEJqk7m-PmBxOeyfVjVeTjccrcoXyI1Gqm_QGmT-bTusV1EGhTI88h0sM7sBZfRBFXhyphenhyphen9xN8/s1600/empuss.jpg></a>

Maka tampilan normalnya seperti dibawah ini :

Untuk menambahkan efek blur kedalam gambar, maka kode yang harus sobat tambahkan adalahclass="linkopacity" dan hasilnya seperti dibawah ini :

<a href="http://creatingwebsite-maskolis.blogspot.com"class="linkopacity"><img src="img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgliOL3hlDwc298rMOKDY_rD2ZoYOc6C2T3akpuLRpwP5jt6nAbYs-p_OdWOLu6v6a_IXTIEJqk7m-PmBxOeyfVjVeTjccrcoXyI1Gqm_QGmT-bTusV1EGhTI88h0sM7sBZfRBFXhyphenhyphen9xN8/s1600/empuss.jpg"></a>

Jika disorot maka gambar akan tampak samar atau ngeblur dan jika di klik maka akan menuju link terkait.

Agar gambar yang di klik tidak ngelink kemana-mana atau tidak pindah ke halaman link yang ada, maka sobat tinggal mengganti linknya menjadi "#nogo" dan hasilnya seperti berikut :

<a href="#nogo" class="linkopacity"><img src="img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgliOL3hlDwc298rMOKDY_rD2ZoYOc6C2T3akpuLRpwP5jt6nAbYs-p_OdWOLu6v6a_IXTIEJqk7m-PmBxOeyfVjVeTjccrcoXyI1Gqm_QGmT-bTusV1EGhTI88h0sM7sBZfRBFXhyphenhyphen9xN8/s1600/empuss.jpg"></a>

Silahkan di sorot dan di klik, maka gambar tidak akan lari kemana-mana

Untuk merubah tingkat keburaman pada gambar, sobat tinggal atur angka pada kode css yang sudah disimpan pada template tadi. Ubah saja angka “30” menjadi angka yang lebih rendah untuk mendapatkan tingkat blur yang lebih gelap, contoh jika saya ubah angkanya menjadi “10” maka kodenya menjadi seperti berikut :

.linkopacity img {filter:alpha(opacity=100); -moz-opacity:1.0; opacity:1.0; border:0;}
.linkopacity:hover img {filter:alpha(opacity=10); -moz-opacity:0.3; opacity:0.3;border:0;}

Selamat mencoba ya.

More: http://www.maskolis.com/2011/03/membuat-efek-blur-pada-gambar-di.html

Membuat Info Panel Slide Vertikal dengan jQuery

noreply@blogger.com (Anonymous) — Tue, 11 Dec 2012 20:07:00 +0000

Temen-temen sudah baca artikel saya tentang Membuat Chatbox Slide Vertikal Dengan jQuerykan? Tutorial kali ini pada dasarnya sama, yaitu kita menyembunyikan panel ini dengan tombol. Hanya disini yang kita sembunyikan adalah informasi tentang blog kita atau seputar tentang penulis blog. Nah, pada tutorial blog kali ini saya akan memberikan cara dalam membuat info panel slide vertikal dengan jQuery.

Sesuai dengan namanya fungsi dari menu ini adalah memberikan informasi tentang penulis kepada pembaca dengan sedikit kemasan animasi jQuery untuk memperindahnya.Untuk contoh gambarnya anda bisa lihat di atas, atau langsung lihat disini, klik tombol info yang ada di sebelah kiri atas. Bagi anda yang tertarik untuk membuatnya berikut ini langkah-langkahnya :

Login ke blogger dengan akun anda.
Kemudian klik rancangan
Pilih Edit HTML jangan lupa centang "Expand Template Widget"
Cari kode berikut ]]></b:skin> gunakan control + f biar cepet, kemudian copy kode dibawah dan letakkan diatas kode tersebut

.panel{position:fixed;top:20px;left:0;background:#000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;border:1px solid #444;width:330px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:30px 30px 30px 100px}
.panel p{color:#ccc;margin:0 0 15px;padding:0}
.panel a,.panel a:visited{color:#9FC54E;text-decoration:none;border-bottom:1px solid #9FC54E;margin:0;padding:0}
.panel a:hover,.panel a:visited:hover{color:#fff;text-decoration:none;border-bottom:1px solid #fff;margin:0;padding:0}
a.trigger{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#333 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.trigger:hover{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#222 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.active.trigger{background:#222 url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDvxbreOI/AAAAAAAAD2M/Cz3Q2r5pdTM/d/minus.png) 85% 55% no-repeat}
.columns{clear:both;width:330px;line-height:22px;padding:0 0 20px}
.colleft{float:left;width:130px;line-height:22px}
.colright{float:right;width:130px;line-height:22px}
a:focus{outline:none}
.panel img{background-color:#262626;border:1px solid #333;float:right;margin:3px 3px 6px 8px;padding:5px}
.panel h3{border-bottom:1px solid silver;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#FFF;font-size:12px;font-weight:700}
.columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}
Setelah itu cari kode </head> lalu copy kode dibawah ini dan letakkan diatasnya.
view plain print ?
1. <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
Masukan kode Javascript berikut dibawah script jQuery tadi:
view plain print ?
1. <script type="text/javascript">
2. $(document).ready(function(){
3. $(".trigger").click(function(){
4. $(".panel").toggle("fast");
5. $(this).toggleClass("active");
6. return false;
7. });
8. });
9. </script>
Langkah terakhir cari lagi kode berikut </body> setelah itu copas kode dibawah ini dan taruh diatasnya.

<div class='panel'>
<h3>Selamat Datang bahasa inggrisnya welcome</h3>
<p style='text-align:justify'>Selamat datang di blog maskolis, saya harap anda senang berada diblog sederhana ini. Blog ini saya tulis dengan komputer yang sederhana dan koneksi internet yang juga sederhana. Saya berharap Anda sering datang kembali. Silahkan anda mencari hal-hal yang baru di blog saya ini <a href='http://creatingwebsite-maskolis.blogspot.com/' title='creating website'>Selengkapnya tentang blog ini</a></p>

<h3>Sekilas tentang maskolis</h3>
<img height='73px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkf3ZJzJRbVnxyP4DG6-YLUlIwZZl2PS6ns2nKwU3KuBIkYSGaz-Q1sJ7mvmc29d7oNWBeqvwMZzsvpjwQRTzS3-G7mIg4lr_lmsKJwiq5sxNkTzSsim0NDLwjLrTaH-kImQi5kqBVNH8/s1600/maskolis.jpeg' width='73px'/>
<p>Photo di samping itu bukan saya dan juga bukan pacar saya, pokoknya bukan siapa-siap saya. Nama saya maskolis saya seorang yang ingin belajar blogger. Saya mulai belajar blogger sejak bulan Oktober 2010, dan blog ini saya buat pada bulan Desember 2010</p>

<div style='clear:both;'/>

<div class='columns'>
<div class='colleft'>
<h3>Navigasi</h3>
<ul>
<li><a href='#' title='home'>Home</a></li>
<li><a href='#' title='about'>About</a></li>
<li><a href='#' title='portfolio'>Portfolio</a></li>
<li><a href='#' title='contact'>Contact</a></li>
<li><a href='#' title='blog'>Blog</a></li>
</ul>
</div>

<div class='colright'>
<h3>Social Stuff</h3>
<ul>
<li><a href='http://twitter.com/#!/4rifin123' title='Twitter'>Twitter</a></li>
<li><a href='http://www.blogger.com/profile/00429201158192562265' title='About Me'>About Me</a></li>
<li><a href='mailto:helmi4rifin@gmail.com' title='Gmail'>Gmail</a></li>
</ul>
</div>
</div>
<div style='clear:both;'/>
</div>
<a class='trigger' href='#'>Info</a>
Terakhir Save Template anda, dan lihat hasilnya

Tentu temen-temen sudah tahu kan? Tulisan yang saya beri warna bisa diganti dengan tulisan yang diinginkan. Demikian tadi penjelasan mengenai membuat panel info dengan jQuery selamat mencoba dan semoga bermanfaat.

Menambah Kolom Diatas dan Dibawah Postingan Blog

noreply@blogger.com (Anonymous) — Tue, 11 Dec 2012 20:05:00 +0000

Ketemu lagi, di postingan saya tentang menambah kolom dibawah postingan sudah saya jelaskan bagaimana temen-temen blogger semua membuat elemen baru di blog. Kali ini saya akan memberikan tutorial tentang membuat dua kolom baru diatas dan dibawah postingan.

Coba perhatikan gambar disamping ini muncul dua kolom baru dibawah post blog. Sehingga jika Anda menambahkan dua kolom dibawah postingan, Anda dapat menyimpan gadget/widget di atas/bawah postingan misalkan adsense, iklan, atau widget yang lainya.

Apakah Anda ingin menambahkan dua kolom diatas/bawah post body blog Anda? coba ikuti langkah dibawah ini.. Pastikan Anda sudah Log In ke blogspot lalu pilih menu Layout kemudian masuk menu Edit HTML

Taruh Code CSS dibawah ini diatas Code ]]></b:skin>

/*Under Post
-----------------------------*/
#underpost h2{
font-size:13px;
font-weight:bold;
color:#B8002E;
border-bottom:2px solid #000000;
padding-left:5px;
}
#underpost{
width:530px;
}
#underleft{
width:257px; /*lebar kolom kiri*/
float:left;
margin:4px;
}
#underright{
width:250px; /*lebar kolom kanan*/
float:right;
margin:4px;
}

Perhatikan code yang berwarna merah diatas, samakan dengan lebar (width) post body atau main-wrapper di blog Anda. Untuk mengetahhui lebar post body cari code css dibawah ini :

#main-wrapper {
width: 410px;

Nah ukuranya adalah yang tercetak tebal diatas. Jangan lupa untuk membagi dua area kolom kiri dan kanan, perhatikan code yang berwarna biru diatas tadi, misalnya lebar post body atau main wrapper blog anda 410px maka bagi antara kolom kiri dan kanan. Jangan lupa atur margin dan padding untuk jarak tepi antara kolom kiri dan kanan. Setelah langkah pertama selesai mari ke langkah selanjutnya, masih di area Edit HTML, lalu cari code dibawah ini

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

Jika ingin menambahkan dua kolom dibawah post body maka tambah code yang berwarna merah tepat dibawah code yang berwarna biru dan masih didalam code yang berwarna hijau diatas. Dan jika ingin menambah dua kolom diatasnya maka taruh code yang berwarna merah diatas code yang berwarna biru dan didalam code yang berwarna hijau

<div id='underpost'>
<b:section class='underleft' id='underleft'/>
<b:section class='underright' id='underright'/>
</div>

Sehingga kurang lebih codenya menjadi seperti

Dua kolom dibawah post body

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
<div id='underpost'>
<b:section class='underleft' id='underleft'/>

<b:section class='underright' id='underright'/>
</div>
</div>

Dua kolom diatas post body

<div id='main-wrapper'>
<div id='underpost'>
<b:section class='underleft' id='underleft'/>

<b:section class='underright' id='underright'/>
</div>

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

Nah jika semuanya sudah beres tinggal SAVE. Coba lihat di area page element muncul dua kolom dibawah/diatas post body. Kode-kodenya sesuiakan saja dengan template Anda, karena semua template codenya agak berbeda-beda. Nah jika kolom kiri dan kanan tidak bisa sejajar maka atur lebar (width) kolom kiri dan kanan, juga atur padding dan marginya.

Sekian dulu jika ada pertanyaan silahkan isi dikomentar saja. semoga bermanfaat bagi Anda semua.

Artikel selengkapnya: http://www.maskolis.com/2011/03/menambah-kolom-diatas-dan-dibawah.html

Cara Memasang Widget Top Komentator Cloud di Blog

noreply@blogger.com (Anonymous) — Tue, 11 Dec 2012 19:59:00 +0000

Apakah teman-teman ingin blog yang dimiliki mempunyai data dari para pengunjung yang berkomentar? Jika

hal itu memang diperlukan, pada malam hari ini saya akan memberikan penjelasan tentang bagaimana cara memasang widget top komentator cloud. Sebuah blog untuk mendapatkan komentar dari pengunjung harus dofollow. Tujuan blogger menerapkan sistem dofollow adalah untuk memancing pembaca agar aktif memberikan komentar pada blognya dengan imbalan berupa backlink bagi si pemberi komentar.

Namun karena itu banyak diantaranya yang memanfaatkan kesempatan ini untuk mencari backlink sebanyak-banyaknya misalnya dengan berkomentar disetiap postingannya. Sehingga menjadi ajang untuk mengumpulkan backlink. Nah untuk mengatasinya anda bisa memasang widget Top komentator pada blog anda. Dengan memasang widget ini anda bisa melihat siapa yang memberikan komentar terbanyak dan apakah komentar yang diberikan benar-benar bermanfaat atau hanya sekedar untuk mencari backlink saja

Baik, langsung saja ke langkah-langkah pemasangan widgetnya :.

Langkah pertama login ke blogger.
kemudian menuju ke Tata Letak.
Klik tab Elemen Halaman.
Tambah Gadget (Add Gadget) -> pilih yang HTML/Javascript.
Kemudian masukkan kode script dibawah ini :

<div style="text-align:justify;line-height:1.2;">
<script type="text/javascript">
function cCloud(feed) {
max = 0;
min = 10000;
//finding highest and lowest count
for (i=0;i<feed.count;i++)
{
ccCount = feed.value.items[i].commentcount * 1;
if (ccCount > max)
{
max = ccCount;
}
if (ccCount < min)
{
min = ccCount;
}
}
ccCountD = "";
display = "";
for (j=0;j<feed.count;j++)
{
ccdiff = feed.value.items[j].commentcount - min;
ccFontsize = 80 + (ccdiff * 100) / (max - min) + "%";
ccUrl = "'" + feed.value.items[j].authorurl + "'";
ccCountD = "(" + feed.value.items[j].commentcount + ")";//comment count ccName = feed.value.items[j].title + ccCountD;
ccLName = "<a style='text-decoration:none;font-size:" + ccFontsize + "' href=" + ccUrl + " target='_blank'>" + ccName + " </a>";//clickable commentator name
display = display + ccLName;
}
document.write(display);
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
YourBlogUrl=http://bloggersentral.blogspot.com
&Exclusions=Anonymous,Greenlava &ShowHowMany=20 &Order=alphabet
&_callback=cCloud
&_id=cfa196644e1d6159c9183548c4b5e2f5
&_render=json"
type="text/javascript"></script>
<span style="font-size: 80%; float:right;;margin-top:10px;"><a href="http://bloggersentral.blogspot.com/2010/02/top-commentators-cloud-widget.html" target="_blank">Make your own</a></span>
</div>

Keterangan :

Hapus tulisan yang berwarna merah jika anda tidak ingin menampilkan jumlah komentar.
Silahkan ganti http://bloggersentral.blogspot.com dengan alamat url blog anda tanpa diakhiri dengan slash ( / ).
Anonymous,Greenlava adalah nama komentator yang tidak ingin anda tampilkan, biasanya nama pemilik blog, ganti saja dengan nama anda (nama pada user blogger dan besar kecilnya huruf juga berpengaruh).
Angka 20 adalah banyak komentator yang ingin ditampilkan.
alphabet adalah urutan top komentator berdasarkan abjad atau huruf, silahkan ganti dengan "frequency" jika ingin mengurutkannya berdasarkan banyaknya komentar.

Jika teman-teman semua ingin membuatnya, ikuti langkah-langkah diatas. Jika ada yang mau ditanyakan isi kotak komentar yang ada di bawah.

Link selengkapnya: http://www.maskolis.com/2011/01/cara-memasang-widget-top-komentator.html

Memasang Gambar Slide Ala Zinmag Primus

noreply@blogger.com (Anonymous) — Tue, 11 Dec 2012 19:56:00 +0000

Jika temen-temen adalah seorang blogger yang senang dengan tampilan gambar bergerak, disini nanti akan saya berikan tutorialnya. Gambar di sebuah blog sangat penting karena sebuah gambar akan menggambarkan isi dari keseluruhan sebuah artikel. Jika saya sebagai pengunjung pada sebuah blog, saya akan sangat senang jika mendapatkan artikel plus gambar yang tidak harus membukanya satu persatu. Maksud saya disini adalah alangkah baiknya kalau sebuah blog mempunyai menu slider untuk gambar, jadi para pengunjung tidak usah repot-repot untuk membukanya satu per satu.

Sebenarnya sekarang sudah banyak sekali template blogger gratis yang menyediakan menu untuk slide gambar salah satunya adalah Zinmag Primus. Penempatan slider zinmag primus ini biasanya diletakkan tepat di bawah header. Tapi, anda pun bisa menyesuaikannya pada desain template blog masing-masing. Untuk referensi anda bisa lihat tempalte buatan dari bloggerstyles.com atauhttp://btemplates.com/. Kira-kira previewnya seperti ini,

Baik, sekarang kita langsung saja ke langkah-langkah pembuatannya :

Langkah Pertama :

Login ke blogger dengan id anda >> Klik Tata Letak >> Pilih Edit HTML >> Backup dulu template anda dengan mengklik Download Template Lengkap.
Letakkan kode berikut di atas kode ]]></b:skin>

/* Slider Code
-------------------- */
#slider {
background:url(http://i33.tinypic.com/2l8hgi.jpg);
height: 229px;
overflow: hidden;
position: relative;
margin: 5px 0;
}
#mover {
width: auto;
position:absolute;
overflow:hidden;
}
.slide {
padding: 20px 0px;
width: 900px;
float: left;
position: relative;
height:200px;
}
.slide h2 {
font-family:georgia, Helvetica, Sans-Serif;
font-size: 18px;
color: #ac0000;
padding:0px 0px 0px 30px;
margin:0px 0px;
width:500px;
overflow:hidden;
}
.slide h2 a:link, .slide h2 a:visited {
color:#fff;
background-color: transparent;
}
.slide h2 a:hover {
color: #ddd;
background-color: transparent;
}
span.slmet {
color: #DF0101;
font-size: 10px;
font-family:Tahoma, georgia, Helvetica, Sans-Serif;
line-height: 20px;
width: 500px;
padding:0px 0px 0px 30px;
margin:0px 0px;
text-transform:uppercase;
}
.slide p {
color: #fff;
font-size: 12px;
font-family:georgia, Helvetica, Sans-Serif;
text-align: justify;
line-height: 20px;
width: 500px;
padding:0px 0px 0px 30px;
margin:0px 0px;
}
.slide img {
position: absolute;
top: 20px;
left: 600px;
background:#fff;
padding:10px 10px;
}
#slider-stopper {
position: absolute;
font-family: trebuchet;
top: 100px;
right: 50px;
color: #0B610B;
padding: 3px 12px;
font-size: 14px;
font-weight:bold;
text-transform: uppercase;
z-index: 1000;
}

Langkah Kedua

Jangan kemana-mana dulu ya, karena kita masih dalam posisi Edit HTML. Sekarang letakkan kode berikut di bawah kode ]]></b:skin>.

<script src='http://bloggerstyles.com/data/templates/000/Zinmag-Primus/js/jquery-1.2.6.min.js' type='text/javascript'/>
<script src='http://bloggerstyles.com/data/templates/000/Zinmag-Primus/js/slider.js' type='text/javascript'/>
<script type="text/javascript"><![CDATA[//><!]]></script>

Langkah Ketiga

Kita akan meletakkan id untuk slider zinmag primus tepat di bawah header blog anda. Nah, anda pun bisa menyesuaikan penempatan id ini. Jadi cocokkan saja dengan template anda. Apalagi template blogger yang sudah banyak dimodifikasi. Oke langsung saja. Silahkan cari kode :

<div id='header-wrapper'>
..........
.........
</b:section>

Letakkan kode berikut tepat di bawah kode tadi :

<div id='casing'>

<div id='slider'>
<div id='mover'>
<div class='slide'>
<span class='slmet'> Posted by Maskolis </span>
<h2><a href='http://creatingwebsite-maskolis.blogspot.com/2011/01/membuat-menu-navigasi-horisontal-dan.html'>Membuat Menu Navigasi Horisontal dan Kotak Pencari di Blog</a></h2>
<p>Menu Navigasi pada blog merupakan elemen yang perlu diperhatikan di dalam sebuah blog yang mementingkan penampilan dan style untuk setiap detilnya. Ada bermacam-macam bentuk menu navigasi di dalam sebuah blog itu, ada menu navigasi horizontal, menu navigasi vertikal atau yang lainya. Selain menggunakan menu horisontal drop down menu, kita juga bisa membuat menu horisontal sederhana (tanpa cabang) ataupun</p>
<img alt='Tutorial Blog' src='http://i34.tinypic.com/v83g3d.jpg'/>
</div>
<div class='slide'>
<span class='slmet'> Posted by Maskolis </span>
<h2><a href='http://creatingwebsite-maskolis.blogspot.com/2010/12/blog-spam-hati-hati-dengan-blog-anda.html'>Blog SPAM, Hati-Hati Dengan Blog Anda</a></h2>
<p>Kita akan tetap menulis dan menulis terus setiap ada ide baru. So, seperti kata mas doyok sebaiknya kita berkonsentrasi posting ketimbang sibuk marah-marah dan menggerutu tentang kelakuan blogger lain. Saya lebih setuju kepada mas o-om atau i-raka yang memberikan tips-tips agar blog kita tidak dianggap spam daripada menulis artikel tentang larangan keras mengkopi paste artikelnya (hal itu susah dilakukan mas, ya seperti pemerintah melarang keras pembajakan kaset atau CD di negara kita ini).</p>
<img alt='Blog Spam' src='http://i34.tinypic.com/33kx84w.jpg'/>
</div>
<div class='slide'>
<span class='slmet'> Posted by Maskolis </span>
<h2><a href='http://creatingwebsite-maskolis.blogspot.com/2011/01/widget-yang-harus-dimiliki-suatu-blog.html'>Widget yang Harus Dimiliki Suatu Blog</a></h2>
<p>eman-teman blogger pasti menginginkan blog yang dibuat tampil dengan performa maksimal, dengan desain yang mantab dan bisa menarik pengunjung. Namun, apakah desain atau tampilan blog yang anda pakai sehat untuk blog anda? Karena ada banyak widget yang mengandung banyak kerusakan atau error yang mungkin anda tidak tahu. Nah, kalau begitu, apa saja widget yang seharusnya ada dalam blog anda agar blog anda tetap bagus dan sehat? Mari kita lihat satu persatu:</p>
<img alt='tutorial blog' src='http://i33.tinypic.com/2whm22w.jpg'/>
</div>
</div>

</div>

</div>
<div class='clear'/>

Sekarang klik tombol Simpan Template dan akhirnya Selesai. Coba anda perhatikan hasilnya. Apakah memuaskan atau tidak atau masih banyakkah yang tidak sesuai dengan desain template blog temen-temen? Jika ya, berarti ada yang harus diedit lagi.

Hal-hal yang perlu diedit.

Pemanggilan kode JavaScript di atas, masih berasal dari situs bloggerstyles.com dan anda bisa meng-hosting javascript tersebut di tempat hosting yang biasa anda pakai. Silahkan download semua kode javascript di sini, dan hosting di tempat hosting javascript yang bisa digunakan.
Background image pada slider di atas mungkin tidak sesuai dengan template anda. Sebaiknya diperkecil saja atau mungkin anda harus membuat background baru dan sesuaikan dengan ukuran dan lebar template anda. Bagian tersebut adalah ini :

#slider {
background:url(http://i33.tinypic.com/2l8hgi.jpg);
height: 229px;
overflow: hidden;
position: relative;
margin: 5px 0;
}
Nah, pada contoh slider di atas, saya menyertakan link dan teks dari blog ini. Jadi, silahkan mengganti link, teks dan gambar (image) buatan sendiri, sesuaikan dengan kebutuhan. Bagian tersebut adalah seperti ini :

<div class='slide'>

<span class='slmet'> Posted by Maskolis </span>

<h2><a href='http://creatingwebsite-maskolis.blogspot.com/2010/12/blog-spam-hati-hati-dengan-blog-anda.html'>Blog SPAM, Hati-Hati Dengan Blog Anda</a></h2>

<p>Kita akan tetap menulis dan menulis terus setiap ada ide baru. So, seperti kata mas doyok sebaiknya kita berkonsentrasi posting ketimbang sibuk marah-marah dan menggerutu tentang kelakuan blogger lain. Saya lebih setuju kepada mas o-om atau i-raka yang memberikan tips-tips agar blog kita tidak dianggap spam daripada menulis artikel tentang larangan keras mengkopi paste artikelnya (hal itu susah dilakukan mas, ya seperti pemerintah melarang keras pembajakan kaset atau CD di negara kita ini). </p>
<img alt='Blog Spam' src='http://i34.tinypic.com/33kx84w.jpg'/>
</div>
Untuk mengatur letak text, gambar dan link, anda bisa mengutak-atik sendiri pada kode CSS. Yang pasti, setiap template punya ukuran lebar yang mungkin berbeda. Terus terang saya juga bingung untuk menjelaskannya, karena penerapan slider di blog ini pun butuh percobaan yang berulang-ulang agar benar-benar pas. So, trial and error aja dulu.
Untuk mengatur delay pada slider, silahkan buka file slider.js kemudian tinggal ganti saja jumlah var delayLength = 4000; dengan angka berapa saja, misalnya 5000 atau 9000 (catatan: 1 detik = 1000).

Oya, tutorial diatas tidak bisa saya buat jika o-om nggak nulis tutorial dasarnya, untuk itu kepada mas o-om terima kasih banyak. Itu dulu penjelasannya, kalau masih bingung temen-temen bisa isi kotak komentar di bawah. Selamat mencoba dan semoga berhasil dengan slider Zinmag Primus-nya.

Situs utama: http://www.maskolis.com/2011/01/memasang-gambar-slide-ala-zinmag-primus.html

Memasang Slider Gambar ala Drakon Template

noreply@blogger.com (Anonymous) — Tue, 11 Dec 2012 19:54:00 +0000

Lagi-lagi mengenai gambar slide di bawah header, yah soalnya ini lagi ngetrend di kalangan blogger untuk memperindah blog. Setelah pada postingan sebelumnya saya menulis tentangmemasang gambar slide ala Zinmag Primus kali ini saya akan memberikan tutorial cara memasang gambar slide ala Drakon template. Pada dasarnya fungsi dari gambar slide ini sama dengan Zinmag Primus, perbedaannya jika pada Zinmag Primus gambar itu ditampilkan satu persatu secara otomatis, maka di Drakon template ini gambar yang ditampilkan ada beberapa sesuai dengan lebar template yang kita pakai, dan kita harus meng-klik tombol previous atau next untuk menampilkan gambar selanjutnya. Untuk lebih jelasnya temen-temen bisa lihat disini atau langsung saja pada Drakon template yang ada di situs template gratis.

Oke, langsung saja pada langkah-langkah pembuatannya :

PERTAMA

Login ke blogger dengan akun anda >> klik Tata Letak >> pilih Edit HTML >> Backup dulu template anda dengan mengklik Download Template Lengkap.
Letakkan kode berikut di atas kode ]]></b:skin>

#slidearea{
height:150px;
overflow:hidden;margin:-20px 0px 0 2px;
position:relative;
width:965px;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhro8PZxa-gwAsiWQhM17KQ-sspI4mh4E0OSsY6tRwdn-0E4N1kvVrQC9t7j-eGqQ5k_q_wy5EZxwNeWrmsWiXApx1rrfWugzK2yc41ATAVuSTsNzf87WwUl808BEBkCHcrvn5RnGlNUEHL/s0/header-background.png) repeat-x;
border:5px ridge #052844;
}
#gallerycover{
overflow:hidden;
margin:9px 20px 0 32px;
width:920px;
}
.mygallery{
overflow:hidden;
position:relative;
}
.mytext img{
float:left;
}
.mytext{
position:relative;
margin:0 5px 0 5px;
width:170px;
height:210px;
display:inline;
float:left;
color:#c4c4c4;
}
.inpost{
position:absolute;
top:0;
left:0;
width:250px;
background:#fff;
}
.mytext {
padding:5px 0;
color:#000;
width:170px;
font-size:12px;
font-weight:bold;
}
.mytext h4 a:link,.mytext h4 a:visited{
color:#000;
text-shadow: 0px 1px 0px #efefef;
}
.mytext p{
padding:0 0;
color:#555;
font-size:12px;
line-height:20px;
width:170px;
text-shadow:1px 1px 0 #f6f6f6;
}
.prevb{
float:left;
width:24px;
height:24px;
z-index:200;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwrrMmrM0p7-juV510wWBxPCaUPgpThnCQc2tGb7Lbb2mRiJnU108CNOdTu02T3j7-Tu_V-roh0t9IoNVtWgbYcQCGl2vu6S2zckkFr1fbbLz7HMgthAWQGom4qZTjWARnYcCdjEzjSbY/s1600/back+demomaskolis.gif);
position:absolute;
left:5px;bottom:65px;
}
.nextb{
float:right;
width:24px;
height:24px;
z-index:200;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBCZAoLOo5Y_Q8_Vw2WrcrhbbPBENrb6geU9U1r4bbJxbk_w4OL44bCo37_u0i_kWim311eus5PB5jN9gYOlmo-6xOJFfU1Npsg5y57GfQABs7viVUTtGua44RS4d9UrkTydF3dNsVajc/s1600/prev+demomaskolis.gif);
position:absolute;
right:5px;
bottom:65px;
display:block;
}

KEDUA

Masih pada posisi Edit HTML. Letakkan kode berikut di bawah kode ]]></b:skin>.atau diatas </head>

KETIGA

Kita akan meletakkan id untuk slider Drakon tepat di bawah header blog. Nah, anda pun bisa menyesuaikan penempatan id ini. Jadi cocokkan saja dengan template anda. Apalagi template blogger yang sudah banyak dimodifikasi. Langsung saja cari kode <div id='content-wrapper'> Letakkan kode di bawah ini tepat di bawah kode <div id='content-wrapper'>.

<div style='height:20px;width:100%;overflow:hidden;'/>
<script type='text/javascript'>
var $jx = jQuery.noConflict();
$jx(function() {
$jx(".mygallery").jCarouselLite({
btnNext: ".nextb",
        btnPrev: ".prevb",
    visible: 5,
    speed: 1000,
    easing: "backout"
    });
});
</script>
<div id='slidearea'>
<div id='gallerycover'>
<div class='mygallery'>
<ul>
<li>
<div class='mytext'>
<a href='SLIDE-1-LINK-HERE'>
<img class='sidim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBLAxJj3SaAWecJSg7ajcX3CbKrDEtHE_K2ZyNtjiIJ3R2ossocX76_dzzbJmmn4l1XpMjXrd-dGWpL553S4QD16JEYN6Q2FV3Vvm0eOzUBAYGd3HSdsjH3avac5TJy61fsItsE-MqUM8/s1600/demomaskolis+come+away+with+me+1.jpeg'/>
</a>
<div class='clear'/>
<p align='center'><a href='SLIDE-1-LINK-HERE'>Norah Jones Lyrics</a></p>
</div>
</li>
<li>
<div class='mytext'>
<a href='SLIDE-2-LINK-HERE'>
<img class='sidim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWeLrxFHkdlvBQj7Z4gWa3V0xn5NCyp1jTGtuz3tHvNetq_TKa3y-jRqkPDHLHth3E8fm1Fra0I66e7JLfrIyUSy9wWWDbFtkddLtHFa9ByzokGaA7TPOpCzYTqTmpvA32cMZojzSxPfI/s1600/demomaskolis+soldier+1.jpeg'/>
</a>
<div class='clear'/>
<p align='center'><a href='SLIDE-1-LINK-HERE'>Sade Lyrics</a></p>
</div>
</li>
<li>
<div class='mytext'>
<a href='SLIDE-3-LINK-HERE'>
<img class='sidim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVhAOUBIjJEKwe9MUzHPsBrhxxGWgYG0e9E7bdLkyU-RhrTQGVn5LnqR02GVNhBUfr1Py7E7wj758HyP7RkLQXK8VrhtK_sBd35aYwT7FiXpAYATFm0qJzAya548Bndve7ziq5mRzrwdY/s1600/demomaskolis+basia1.jpg'/>
</a>
<div class='clear'/>
<p align='center'><a href='SLIDE-1-LINK-HERE'>Basia Lyrics</a></p>
</div>
</li>
<li>
<div class='mytext'>
<a href='SLIDE-4-LINK-HERE'>
<img class='sidim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9BzjXsEKC8j6cn3DHgH49gSevi-a6-HQsrZzoO-mcIazG8280cBWKchm0pf9g5WJ5bQrDAvadE3gySXy-gMtZuW0zyb39uOzpT6uBsGmHDU4D2652R9L8vJq1G_MX0zlRaz2AakXqeS8/s1600/jamiroquai+demomaskolis1.jpeg'/>
</a>
<div class='clear'/>
<p align='center'><a href='SLIDE-1-LINK-HERE'>Jamiroquai Lyrics</a></p>
</div>
</li>
<li>
<div class='mytext'>
<a href='SLIDE-5-LINK-HERE'>
<img class='sidim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz123FOJpXaTiWMByphsx1K11DYrJcCbzuJag_t_jsiwVv3lz4dsC3RqMUIHqrsDQhRuu9kbND90rnT67ENFXxzDaUSWhbT6tUVkUCx9C0VmfJvkjsw9avGbWqM3bzKqnQqEkNBIIJ2ds/s1600/jamie+cullum+demomaskolis1.jpg'/>
</a>
<div class='clear'/>
<p align='center'><a href='SLIDE-1-LINK-HERE'>Jamie Cullum Lyrics</a></p>
</div>
</li>
<li>
<div class='mytext'>
<a href='SLIDE-6-LINK-HERE'>
<img class='sidim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhnvH-aZZXRpDyJz1GR5mJvSezplcVMrNAWeXIaGNL4xZqx6oYwep3WqD7u2AZAUpiaFHe-yc1Wk7L-PDs3CLpI2nsIDYj9Ft0jfNEJatJHQy4F0cBrQqh4Hym1FIlSn_tW_jY3GG_Vkk/s1600/diana+krall+demomaskolis.jpeg'/>
</a>
<div class='clear'/>
<p align='center'><a href='SLIDE-1-LINK-HERE'>Diana Krall Lyrics</a></p>
</div>
</li>
<li>
<div class='mytext'>
<a href='SLIDE-7-LINK-HERE'>
<img class='sidim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOuo7_36pb15KvLJs2o1IpalJXZLDs4lw-lvDsyemWOU_UASDpn4HHZ-sPExzsYSlxwbRK8JDnFfq4qs_BMNnSnKfn8OZ7cZvnak8BDTgBgn3ycfEr_yK0MTV9gFyHwCKLiPKrjy7irF0/s1600/demomaskolis+sting.jpg'/>
</a>
<div class='clear'/>
<p align='center'><a href='SLIDE-1-LINK-HERE'>Sting Lyrics</a></p>
</div>
</li>
</ul>
<div class='clear'/>
</div>
</div>
   <a class='prevb' href='#'/>
   <a class='nextb' href='#'/>
</div>

Kalau sudah klik simpan template dan perhatikan apakan slider gambar sudah terpasang dengan baik di blog anda. Pemasangan slider gambar ala Drakon ini saya sesuaikan dengan isi dari blog saya. Jika anda ingin merubah tampilan atau gambar, hal-hal yang perlu diperhatikan adalah :

Background slider, anda bisa ganti https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhro8PZxa-gwAsiWQhM17KQ-sspI4mh4E0OSsY6tRwdn-0E4N1kvVrQC9t7j-eGqQ5k_q_wy5EZxwNeWrmsWiXApx1rrfWugzK2yc41ATAVuSTsNzf87WwUl808BEBkCHcrvn5RnGlNUEHL/s0/header-background.png sesuai dengan background anda sendiri

#slidearea{

height:150px;

overflow:hidden;margin:-20px 0px 0 2px;

position:relative;

width:965px;

background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhro8PZxa-gwAsiWQhM17KQ-sspI4mh4E0OSsY6tRwdn-0E4N1kvVrQC9t7j-eGqQ5k_q_wy5EZxwNeWrmsWiXApx1rrfWugzK2yc41ATAVuSTsNzf87WwUl808BEBkCHcrvn5RnGlNUEHL/s0/header-background.png) repeat-x;

border:5px ridge #052844;
}

Pada contoh slider di atas, saya menyertakan link dan teks (tulisan warna merah) dari blog demo saya. Jadi, silahkan mengganti link, teks dan gambar (image) buatan sendiri, sesuaikan dengan kebutuhan. Bagian tersebut adalah seperti ini :

<li>
<div class='mytext'>
<a href='SLIDE-1-LINK-HERE'> <img class='sidim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBLAxJj3SaAWecJSg7ajcX3CbKrDEtHE_K2ZyNtjiIJ3R2ossocX76_dzzbJmmn4l1XpMjXrd-dGWpL553S4QD16JEYN6Q2FV3Vvm0eOzUBAYGd3HSdsjH3avac5TJy61fsItsE-MqUM8/s1600/demomaskolis+come+away+with+me+1.jpeg'/> </a>
<div class='clear'/>
<p align='center'><a href='SLIDE-1-LINK-HERE'>Norah Jones Lyrics</a></p>
</div>
</li>
Jika ingin menambahkan deskripsi singkat di bawah judul gambar, temen-temen bisa rubah menjadi seperti ini

<li>
<div class='mytext'>
<a href='SLIDE-1-LINK-HERE'>
<img class='sidim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBLAxJj3SaAWecJSg7ajcX3CbKrDEtHE_K2ZyNtjiIJ3R2ossocX76_dzzbJmmn4l1XpMjXrd-dGWpL553S4QD16JEYN6Q2FV3Vvm0eOzUBAYGd3HSdsjH3avac5TJy61fsItsE-MqUM8/s1600/demomaskolis+come+away+with+me+1.jpeg'/> </a> <div class='clear'/>
<h2><a href='SLIDE-1-LINK-HERE'>Norah Jones Lyrics</a></h2>
<p>Norah Jones adalah penyanyi jazz terkenal yang sudah banyak memperoleh penghargaan.....</p>
</div>
</li>

Untuk merubah lebar (width:965px), anda bisa sesuaikan dengan lebar di template yang anda pakai. Demikian juga tinggi slider, anda bisa atur sendiri, bisa kan? Saya yakin pasti bisa.

Wah banyak juga kodenya ya? Temen-temen jangan bingung, saya yakin bagi anda yang senang mengutak-atik kode-kode HTML pasti bisa. Jika masih bingung juga, isi saja kotak komentar yang ada di bawah, siapa tahu saya bisa membantu.

Selamat mencoba dan semoga bermanfaat.

Kunjungi: http://www.maskolis.com/2011/01/memasang-slider-gambar-ala-drakon.html

Membuat Widget Label Tertentu dengan Satu Thumbnail

noreply@blogger.com (Anonymous) — Tue, 11 Dec 2012 19:52:00 +0000

Wah judulnya kurang pas kayaknya ya...? Bodo amat, yang penting isinya. Kali ini saya akan memberikan satu lagi tutorial blogger tentang membuat widget per label dengan hanya satu thumbnail pada bagian paling atas dan di bawahnya menampilkan judul saja, untuk lebih jelasnya silahkan lihat screenshot gambar dibawah. Biasanya widget ini banyak digunakan oleh blog konten berita, salah satu fungsi widget ini untuk memudahkan para pembaca untuk mengeksplorasi tiap kategori yang ada dan bisa juga untuk meringkas ruang pada sebuah template. Sebenarnya tutorial ini sudah lama tapi karena banyak yang tanya di kotak komentar maupun di email, tidak ada salahnya jika saya perjelas lagi di artikel ini. Cara membuat widget per label yang saya gunakan disini sebenarnya mudah dan hanya menggabungkan antara tutorial membuat label atau kategori dengan thumbnail dan membuat widget label yang hanya menampilkan judul saja.

DEMO

Jika Anda lihat pada template Mas Paper atau Johny Portal 2, di bagian tertentu pada template itu terdapat widget yang menampilkan label dengan susunan satu judul dengan thumbnail dan summary, dan dibawahnya list dari label yang sama tetapi hanya menampilkan judulnya saja. Cara membuatnya adalah sebagai berikut :

Pertama yang mesti Anda lakukan adalah login ke blogger dengan akun Anda
Setelah itu pilih blog yang ingin anda tambahkan widget 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> :

img.label_thumb{float:left;border:1px solid #8f8f8f;background:#D2D0D0;margin-right:10px;height:60px;width:60px;padding:2px}
img.label_thumb:hover{background:#f7f6f6}
.label_with_thumbs{float:left;width:100%;min-height:70px;margin:0 5px 2px 0}
ul.label_with_thumbs li{min-height:65px;margin:2px 0;padding:4px 0}

Perhatikan tulisan warna biru diatas, itu adalah lebar dan tinggi thumbnail image.
Selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head> :

<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul class="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;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!="")){thumburl=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho9Z3eMn5pwqbmjNSb2P8DYthHmPr869vVL5751a7WaG7zwzhUgvBhPvjt7b1iXx5PHKx147zEev9a-t8w6NhbnbKPptXoffCsB3QWDRuxhLoyoVRDAus0eyjNwhWdcO8xrrCOYDEyxBJT/';}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="Jun";monthnames[7]="Jul";monthnames[8]="Aug";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)
document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}
document.write(towrite);document.write('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}
//]]>
</script>

Jika kode script diatas terlalu panjang, Anda bisa simpan di tempat penyimpanan Google CodeAnda sendiri atau gunakan kode script di bawah ini yang sudah saya ringkas di Google Code.

<script src='https://masolis-javascript.googlecode.com/svn/trunk/label.js' type='text/javascript'/>
Setelah itu save templates, kemudian menuju ke layout pilih kotak yang akan ditambahkan widget ini. Klik add gadget >> HTML/Javascript masukkan kode berikut ini kedalamnya :

<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/-/news?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://johnyportal2.blogspot.com/feeds/posts/summary/-/news?max-results=6&alt=json-in-script&callback=recentpostslist"></script>
<a href="http://johnyportal2.blogspot.com/search/label/news" style="float:right;font:normal 11px Arial;padding:5px 0;">More on this category »</a>

Keterangan :
Warna biru : adalah label atau kategori yang ditampikan, Anda bisa menggantinya dengan label anda sesuaikan dengan kebutuhan.
Warna merah : Ganti URL dengan URL blog anda.

Selanjutnya save dan lihat hasilnya.

Tampilan dari widget ini mengikuti kode CSS sidebar (jika Anda meletakkan di sidebar) pada template yang Anda pakai. Kode CSS yang digunakan pada pembuatan widget ini hanya digunakan untuk mengatur tampilan thumbnail.

Demikian tadi tutorial jadul mengenai membuat widget per label kali ini, jika masih ada yang kurang jelas silahkan tinggalkan pesan di kotak komentar, selamat mencoba dan semoga bermanfaat.

Kunjungi juga: http://www.maskolis.com/2012/07/membuat-widget-label-tertentu-dengan.html

Membuat Widget Artikel Terbaru Joss Banget

noreply@blogger.com (Anonymous) — Tue, 11 Dec 2012 19:48:00 +0000

Tutorial kali ini menjawab pertanyaan dari teman blogger Haz Issac pada artikel membuat widget label tertentu dengan thumbnail satu, mengenai membuat recent Post atau artikel terbaru dengan fungsi Previous dan next seperti yang Anda lihat di single post blog Johny Template. Langsung saja karena hari sudah malam dan besok pagi mesti sahur, bisa-bisa nggak bisa bangun. Dibawah ini screenshotnya dan silahkan klik demo untuk melihat lebih jelas.

DEMO

Login ke blogger dengan akun Anda
Setelah itu pilih blog yang ingin anda tambahkan widget 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> :

#mas-terbaru{border:1px solid #585858;width:100%;margin:0 auto}
#terbaru{margin:0px}
.mas-elemen{border:1px solid #ccc;margin:5px 0;padding:5px;height:79px}
.mas-elemen img{background:#999;padding:4px;float:left;height:70px;margin-right:8px;width:70px}
.mas-elemen h6,.mas-elemen h6 a{font-size:12px!important;font-weight:700!important;margin:0;color:#111}
.mas-elemen:hover{background-color:#c3c3c3}
.mas-elemen p{font:14px PT Sans Narrow;text-align:justify;color:#555;line-height:14px;margin:5px 0}
#mas-loading{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:#141414 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPSUFa1NBhHPTxXyIeg4BgyYerOO3N5NIttC_gLYPvwhJMHIgOH_2rZdGeEAwWmVaunkIMv-dit5_5VMuLDen2ZYagzYB0Ki2JUBuEAud-_IoQtYaxkGmwbS6yNyKLUyj5n1xmSwJ_5CY/s1600/loading.gif) no-repeat 50% 50%;height:470px;border:1px solid #c3c3c3}
#mas-navigasifeed{border:1px solid #c3c3c3;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0px}
#mas-navigasifeed:hover{background-color:#c3c3c3}
#mas-navigasifeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
#mas-navigasifeed span{padding:5px 10px}
#mas-navigasifeed .next{float:right}
#mas-navigasifeed .previous{float:left}
#mas-navigasifeed .home{text-align:center}
#mas-navigasifeed a:hover,#mas-navigasifeed span.noactived{color:transparant!important}

Perhatikan tulisan warna biru diatas, itu adalah lebar dan tinggi thumbnail image.
Selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head> :

<script type='text/javascript'>
//<![CDATA[
var numfeed = 5;
var startfeed = 0;
var urlblog = "http://johny-gantengbanget.blogspot.com/";
var charac = 100;
var urlprevious, urlnext;

function maskolisfeed(johny,banget){
var showfeed = johny.split("<");
for(var i=0;i<showfeed.length;i++){
if(showfeed[i].indexOf(">")!=-1){
showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(">")+1,showfeed[i].length);
}
}
showfeed = showfeed.join("");
showfeed = showfeed.substring(0,banget-1);
return showfeed;
}
function showterbaru(json) {
var entry, posttitle, posturl, postimg, postcontent;
var showblogfeed = "";
urlprevious = "";
urlnext = "";
for (var k = 0; k < json.feed.link.length; k++) {
if (json.feed.link[k].rel == 'previous') {
urlprevious = json.feed.link[k].href;
}
if (json.feed.link[k].rel == 'next') {
urlnext = json.feed.link[k].href;
}
}
for (var i = 0; i < numfeed; i++) {
if (i == json.feed.entry.length) { break; }
entry = json.feed.entry[i];
posttitle = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
if ("content" in entry) {
postcontent = entry.content.$t;
} else if ("summary" in entry) {
postcontent = entry.summary.$t;
} else {
postcontent = "";
}
if ("media$thumbnail" in entry) {
postimg = entry.media$thumbnail.url;
} else {
postimg = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvIR37p7-LLWbYSM1ENT0ZaCb32noMjionxZKX41k-sWqBgECYaX4UXTpsGeP_9fEOrZZz4Xbx5OVqFPjlmq5agBtmD32J8358x0VIj9L2q6xiGXfvu4s_1yue4Xbfn3SkJK3M2p4SoxE/s1600/no+image.jpg";
}
showblogfeed += "<div class='mas-elemen'>";
showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
showblogfeed += "<p>" + maskolisfeed(postcontent,charac) + "...</p>";
showblogfeed += "</div>";
}
document.getElementById("terbaru").innerHTML = showblogfeed;
showblogfeed = "";
if(urlprevious) {
showblogfeed += "<a href='javascript:navigasifeed(-1);' class='previous'>◄ Previous</a>";
} else {
showblogfeed += "<span class='noactived previous'>◄ Previous</span>";
}
if(urlnext) {
showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>Next ►</a>";
} else {
showblogfeed += "<span class='noactived next'>Next ►</span>";
}
showblogfeed += "<a href='javascript:navigasifeed(0);' class='home'>Home</a>";
document.getElementById("mas-navigasifeed").innerHTML = showblogfeed;
}

function navigasifeed(url){
var p, parameter;
if(url==-1) {
p = urlprevious.indexOf("?");
parameter = urlprevious.substring(p);
} else if (url==1) {
p = urlnext.indexOf("?");
parameter = urlnext.substring(p);
} else {
parameter = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script"
}
parameter += "&callback=showterbaru";
incluirscript(parameter);
}
function incluirscript(parameter) {
if(startfeed==1) {removerscript();}
document.getElementById("terbaru").innerHTML = "<div id='mas-loading'></div>";
document.getElementById("mas-navigasifeed").innerHTML = "";
var archievefeed = urlblog + "/feeds/posts/default"+ parameter;
var terbaru = document.createElement('script');
terbaru.setAttribute('type', 'text/javascript');
terbaru.setAttribute('src', archievefeed);
terbaru.setAttribute('id', 'MASLABEL');
document.getElementsByTagName('head')[0].appendChild(terbaru);
startfeed = 1;
}
function removerscript() {
var elemen = document.getElementById("MASLABEL");
var parent = elemen.parentNode;
parent.removeChild(elemen);
}
onload=function() { navigasifeed(0); }
//]]>
</script>

Keterangan :
var numfeed = 5; >> Jumlah Artikel terbaru yang ditampilkan pada widget
var urlblog = "http://johny-gantengbanget.blogspot.com/"; >> ganti dengan URL blog Anda
var charac = 100; >> Jumlah karakter atau huruf pada setiap post.
Setelah itu save templates, kemudian menuju ke layout pilih kotak yang akan ditambahkan widget ini. Klik add gadget >> HTML/Javascript masukkan kode berikut ini kedalamnya :

<div id="terbaru"></div>
<div id="mas-navigasifeed"></div>

Terakhir save dan lihat hasilnya.

Sekian tutorial membuat widget artikel terbaru dengan fungsi previous dan next kali ini, jika masih ada yang kurang jelas silahkan tinggalkan komentar di bawah. Selamat mencoba dan semoga bermanfaat.....

More: http://www.maskolis.com/2012/08/membuat-widget-artikel-terbaru-joss.html

Merubah Title Blogspot Yang SEO Friendly = Traffic Meningkat

noreply@blogger.com (Anonymous) — Tue, 11 Dec 2012 19:44:00 +0000

Pengertian sederhana SEO atau Search Engine Optimizer atau Search Engine Optimizing menurut saya pribadi

berarti membuat konten (materi) dari portal, website, blog dikenali dan didata (diindeks) oleh search engine seperti Google, Yahoo, Bing, Lycos, dan search engine lainnya secara lebih optimal. Harapannya ketika orang atau user mencari sesuatu di internet melalui search engine dengan kata kunci (keyword) tertentu maka konten yang kita miliki dalam portal, website, atau blog dapat muncul dalam hasil pencarian.

SEO sendiri akan dianggap berhasil, jika posisi kita dalam halaman hasil pencarian berada pada urutan halaman-halaman awal, sebisa mungkin halaman pertama. Tapi tentu saja apa yang dicari oleh orang tersebut sesuai dengan konten yang kita miliki. Jadi tujuan akhir dari SEO ini adalah mendatangkantraffic (kunjungan) yang lebih banyak melalui search engine.

Dari pengertian sederhana di atas, saya ingin menginformasikan trik sederhana yang bisa dimanfaatkan oleh temen-temen yang baru belajar ngeblog atau ingin belajar bikin blog dengan Blogspot. Trik berikut berkaitan dengan Title tulisan/artikel dalam Blogspot dengan template/themes standar. Secara default (standar) title pada Blogspot adalah Judul (Nama) Blog itu sendiri (saat kita membuka Home, sedangkan saat membuka salah satu artikel maka title yang muncul adalah Nama Blog dilanjutkan dengan Judul Artikel.

Untuk format Title standar seperti di atas, bagi search engine kurang optimal, karena seluruh konten kita akan diawali oleh judul blog yang sama (apalagi jika judul blog kita panjang). Berbeda hasilnya jika Title diawali oleh Judul Artikel baru diikuti judul (nama) Blog, dengan demikian konten yang didata (diindeks) oleh search engine lebih bervariasi dan kemungkinan muncul dalam hasil pencarian halaman depan lebih besar.

Untuk merubah format Title di atas relatif mudah, berikut langkah-langkahnya. Setelah masuk ke panel admin, kita masuk ke menu Edit HTML.

Selanjutnya kita cari script Title seperti dibawah ini (script ini ada pada bagian atas, penulisan script secara default/standar ini ada pada template Blogspot standar, ada kemungkinan jika kita gunakan template bikinan pihak ketiga, maka penulisan script Title itu sendiri mungkin juga sudah berubah).

view plainprint?
<b:include data='blog' name='all-head-content'/>  
<title><data:blog.pageTitle/></title>  
<b:skin><![CDATA[/*  

Ganti script yang diberi tanda merah dengan script baru di bawah ini dan simpan template tersebut.

view plainprint?
<b:if cond='data:blog.pageType == &amp;quot;index&amp;quot;'>  
<title><data:blog.title/></title>  
<b:else/>  
<title><data:blog.pageName/> | <data:blog.title/></title>  
</b:if>  
<b:skin><![CDATA[  

Sekarang coba buka salah satu artikel dalam blog kita dan perhatingan Title-nya, jika berhasil maka sekarang format penulisan sudah berubah menjadi judul tulisan berada di depan diikuti judul blog. Dengan demikian title tulisan kita sudah lebih optimal, dan tinggal kita tunggu robot search engine mendata (mengindeks) konten blog kita.

Itu tadi sekilas informasi tentang format penulisan Title yang dianggap mampu mengoptimalkan SEO, semoga bermanfaat dan selamat mencoba.

More: http://www.maskolis.com/2011/03/merubah-title-blogspot-yang-seo.html

Membuat Related Post di Blogspot Versi 1

noreply@blogger.com (Anonymous) — Tue, 11 Dec 2012 19:42:00 +0000

Related Post merupakan sesuatu yang simple kelihatannya tapi mempunyai efek yang cukup bagus bagi blog

kita. Dengan Related Post, pageview terhadap blog kita akan meningkat. Selain itu pengunjung bisa dengan mudah mengeksplore konten-konten yang ada dalam blog kita. Untuk cara membuat related post ini, tentu sudah banyak yang memberikan tutorial dan trik untuk ini. Dan salah satunya bisa dengan cara :

Silahkan menuju ke mode Edit HTML anda melalui Dashboard blogger ► Layout ► Edit HTML
Beri tanda centang pada kotak kecil bertuliskan 'Expand Widget Templates'
Cari tag atau kode </head> dan copy- paste kode di bawah ini sebelum kode </head> atau tepat di atas kode </head> .

<style>
#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
text-decoration : none;
}
#related-posts a:hover {
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url("http://1.bp.blogspot.com/_cNpXRtRph18/SpbSRYurg2I/AAAAAAAAD7Q/ GbYNm2feyIQ/rss.png") no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 21px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}
#related-posts ul li:hover {
background-color:#E2EBF8;
border-top:1px dotted #cccccc;
}
</style>
<script src='http://oemar.googlecode.com/files/Related_post _hack.js' type='text/javascript'/>

Cari kode <p><data:post.body/></p> . Kode setiap template berbeda - beda. Biasanya kodenya bisa berupa seperti berikut <div class='post-body> atau ada juga yang seperti ini <p><data:post.body/></p> . Sebenarnya kode ini bisa ditempatkan dibagian template yang anda sukai bila anda cukup mengerti tentang coding. Tapi yang pasti cari kode <p><data:post.body/></p> saja dulu. Untuk cara termudah anda bisa menggunakan perintah dengan menekan tombol CTRL+F di keyboard anda dan masukkan kode yang ingin dicari di kotak yang tersedia.

Setelah mendapatkan kode <p><data:post.body/></p> . Copy-paste kode dibawah ini tepat dibawah kode tersebut.

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>

Simpan Template anda .

Related Post anda akan tampak seperti gambar berikut.

► Untuk menempilkan link related post sebanyak mungkin ganti angka yang berwarna biru diatas dengan yang anda inginkan.
► Untuk mengganti icon di samping kiri link related post, anda harus mengganti kode URL gambar yang berwarna merah dengan URL gambar yang anda kehendaki. Anda bisa menggunakan situs penyedia jasa hosting gambar gratis seperti photobucket dan imageshack atau di blogger sendiri di sini.
► Untuk mengganti warna atau style hover ( warna atau style yang muncul di related post ketika disorot oleh mouse ) anda bisa mengutak - atik kode css nya. Tepatnya di kode

#related-posts ul li:hover {
background-color:#E2EBF8;
border-top:1px dotted #cccccc;
}

Bila ingin mengganti warnanya, anda tinggal mengganti kode #E2EBF8 dengan kode warna HTML yang anda kehendaki.

More: http://www.maskolis.com/2011/03/membuat-related-post-di-blogspot-versi.html

Membuat Effect JQuery Link Nudging di Blog

noreply@blogger.com (Anonymous) — Tue, 11 Dec 2012 19:37:00 +0000

Kali ini kembali saya akan memberikan penjelasan kepada temen-temen dalam memodifikasi tampilan link di

blog. Jika sebelumnya saya sudah pernah posting membuat efek pelangi link, kali ini saya akan menjelaskan cara menambahkan efek jQuery nudging link. JQuery link nudging adalah effect animasi pada link hasil dari penambahan padding kiri, effect ini akan nampak saat kita menyentuhkan pointer/mouse pada link, link akan bergerak kekanan atau bergoyang.

Untuk contoh dari efek jQuery nudging ini bisa anda lihat disini. Klik salah satu label yang ada pada sidebar blog demo itu. Jika temen-temen tertarik, langsung saja saya akan berikan penjelasannya :

Login ke blogger dengan akun anda
Kemudian pada dasbor klik Rancangan >> Edit HTML
Tambahkan Script JQuery berikut diatas kode </head>
view plain print ?
1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
Catatan : Jika anda sudah memasukkan script JQuery diatas, langkah ketiga bisa anda abaikan
Setelah itu tambahkan lagi script berikut dibawah script JQuery tadi:
view plain print ?
1. <script type='text/javascript'>
2. $(document).ready(function() {
3. $('#Label1 li').hover(function() { //mouse in
4. $(this).animate({ marginLeft: '12px' }, 400);
5. }, function() { //mouse out
6. $(this).animate({ marginLeft: 0 }, 400);
7. });
8. });
9. </script>
Terakhir Save Template anda, dan lihat hasilnya

Itu tadi tutorial kali ini, jika ada pertanyaan teman-teman bisa isi kotak komentar di bawah. Selamat mencoba dan semoga bermanfaat.

More: http://www.maskolis.com/2011/02/membuat-effect-jquery-link-nudging-di.html

Membuat Slider Carousel Otomatis Versi 2

noreply@blogger.com (Anonymous) — Tue, 11 Dec 2012 19:31:00 +0000

Sebenernya sudah lama sekali saya diminta oleh seorang teman blogger Ronny Dee untuk membuat tutorial slider Carousel seperti pada template Mas Paper 2. Kali ini saya akan membuat tutorialnya tapi hanya memakai slider carousel sederhana yang sudah pernah saya buat padatutorial sebelumnya, disini saya hanya memodifikasi kode CSS nya saja, sehingga tampilannya mirip dengan slider Carousel yang ada di template Mas Paper 2. Tapi kalau dilihat sepintas, justru slider ini lebih mirip dengan slider Carousel yang ada di bagian atas (bawah navigasi) halaman depan situsdetik.com.

DEMO

Cara membuatnya hampir sama dengan slider Carousel otomatis versi 1, disini saya hanya merubah kode CSS dan menambahkan timestamp diatas judul post. Langsung saja di bawah ini langkah-langkah untuk membuatnya :

Pertama Anda mesti 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 jika terjadi kesalahan dalam pengeditan nantinya, sebaiknya backup dulu template anda.
Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin> :

#carousel{width:980px;height:125px;border-bottom:1px solid #ccc;position:relative;display:block;background:#5599e6;margin-bottom:8px}
#carousel h5{color:#555;margin:2px}
#carousel .container{position:absolute;left:24px;width:960px;height:125px;overflow:hidden}
#carousel .thumb{float:left;margin-right:5px;}
#carousel #previous_button{position:absolute;width:24px;height:125px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi44qvbHx5vEAIlhHl6M7qGKbi3lvc6J-f2SalpQsnpxhj06Ln3T8PO1MJ4bWu2WRSQ-YjmxGASN-pIy82ffdN2Hk3yAogESDvwcx5SWlpqOPOo1ATp6RsZ2yuGmxfja0FsQnxjIsqbkaSP/s1600/previous.png) center;z-index:100;cursor:pointer;}
#carousel #next_button{position:absolute;right:0;width:24px;height:125px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDEQ3n74WPmIScJRnv9mfV9sygAHZyDDsk1pHK0O0JHxCx5sm84jCfh4YU6TyYiHhl38691HohG_ogCnbHmshmaw6O1TTW3SvPkWhspi-6xXPg2_m5ZO083riHUwwuN9UxbnMMO9wvItvj/s1600/next.png) center;z-index:100;cursor:pointer;}
#carousel #next_button:hover,#carousel .thumb:hover,#carousel #previous_button:hover{filter:alpha(opacity=70);opacity:.7}
#carousel ul{width:100000px;position:relative;margin-top:10px}
#carousel ul li{background:#ebebeb;display:inline;float:left;text-align:left;font:bold 11px Arial;border:0px solid #ccc;width:212px;height:90px;margin:0 2px 20px 6px;padding:6px}
#carousel ul li a.slider_title{color:#222;display:block;margin-top:0;padding-top:0}
#carousel ul li a.slider_title:hover{color:#1b5d97}
#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/AVvXsEhvIR37p7-LLWbYSM1ENT0ZaCb32noMjionxZKX41k-sWqBgECYaX4UXTpsGeP_9fEOrZZz4Xbx5OVqFPjlmq5agBtmD32J8358x0VIj9L2q6xiGXfvu4s_1yue4Xbfn3SkJK3M2p4SoxE/s1600/no+image.jpg";
showRandomImg = true;

aBold = true;

summaryPost = 140;
summaryTitle = 25;
numposts1 = 12;

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 = ["January","February","March","April","May","June","July","August","September","October","November","December"];
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="100" height="90" class="alignnone" src="'+img[i]+'"/></a></div><h5>'+daystr+'</h5><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></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.

Kode warna biru : 12 adalah jumlah slider yang ditampilkan. Sedangkan angka 100 dan 90adalah panjang dan lebar image yang ada di slider.
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/-/sport?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>

Perhatikan kode warna merah diatas, sport adalah label yang ditampilkan pada slider nantinya (Ingat besar kecil huruf harus sama dengan label yang sudah Anda buat). Jika Anda ingin menampilkan postingan atau artikel terbaru pada slider, tinggal hapus kode /-/sport. 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.

Demikian tadi tutorial membuat slider Carousel otomatis versi 2, seperti biasa jika ada yang kurang jelas silahkan tinggalkan pesan di kotak komentar. Selamat mencoba dan semoga bermanfaat.

By: http://www.maskolis.com/2012/07/membuat-slider-carousel-otomatis-versi.html

Cara Membuat Slider Carousel Otomatis Berdasarkan Label

noreply@blogger.com (Anonymous) — Tue, 11 Dec 2012 19:27:00 +0000

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/AVvXsEjK3A2TAhXHYKLFInl9l8eKmfneiMrU1x1c3C0_rJOfTgjPZFH7s6O8BD_toHHcP1uALI1YX273PLtcwoR-85qtudKdk4ZMM5q2ymcxf66hOzDUq0YiY9rLSeGLruT5AxlcqiSaHGQNArE/s1600/scroller-bg.png) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijOlElk3DaqQ8m7z0S_cRfsyEVsUQM3I0IPcKTtia7H8W6yrKRLfUzfJxeuUwZepZJ5fhca3XFDu13EyTlqL3Vhz3zMsprFncIx7Gd2HASCtaaR8CACqesvptgbKz8eTnLat8q8AiqWqk/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/AVvXsEhrF4iOMq91tFwxKxpJ-fa8Qp9X5tj4ekRcua7uNnuUxVLjS8aRu2cHW35ViBpfqWz6tWeo0TiAAomdXoOzGX2G__Enp5il2qWNyHKO804_ZvarXU8R7h88rf8McitbTSao_3QECXFhYW8/s1600/prev.png) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAzoGpkw06BjzpdeJqU2fgjXFRtO9P-hsUT_rP95LCBwbnLp53o2CYIQWXdU4S-av6JADHu72-BIIzERCfnQVhU_nXsLKVgnOdyldI5SISQ_0usUII3vlgHGEMfbhOjjh1IjmHKl2GYt8/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/AVvXsEh_vdBpnzV518csRYWSzgRRQipClBqJ6jSr8bZtjpeXtCw-udu1rbYen7ATTGaRo0Tmr5RKTi7GZmezQZa1zkIJHM1oVIYtS0Af2OiUzNz1OIlrUznTRS47zjWXlIPlLJ6sN_hh4ZKuuEY/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/AVvXsEivyO8MFfgt6WJDEar3ykkwLCgV5qJ3D9jzxCg_5Z4teVsM6j930Y5Aag0zq8jf7PT4ROsR_hG7EfApMH-N3b_EyX5L93lOXB02LbbbI3JRR35KJOZ9X-mUv06tYmBa-X9FCsr6C-IS9Pw/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/AVvXsEhvIR37p7-LLWbYSM1ENT0ZaCb32noMjionxZKX41k-sWqBgECYaX4UXTpsGeP_9fEOrZZz4Xbx5OVqFPjlmq5agBtmD32J8358x0VIj9L2q6xiGXfvu4s_1yue4Xbfn3SkJK3M2p4SoxE/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.jswalaupun serinya berbeda, kode warna merah diatas tidak perlu lagi Anda masukkan. Cukup satujQuery.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.

Selanjutnya: http://www.maskolis.com/2012/04/membuat-slider-carousel-otomatis.html

Baca Tutorial Membuat Slider Carousel Otomatis Versi 2

Cara Membuat Content Slider Image Otomatis

noreply@blogger.com (Anonymous) — Tue, 11 Dec 2012 19:22:00 +0000

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 tentangmembuat 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 padaMembuat 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/AVvXsEgWq7DNtgzoD0rD-V1FkjORdwNyfY7hmFOsk60NKnGMSoUgB8oszy_e6YmvD6FGheWsl1EcMwKREL3r2c7pjWxBZzsGzuTDPfjeGLTyRsUR8lWJVQg-Q3eM2SyLowHpKp_doaKgUlQRp334/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/AVvXsEhvIR37p7-LLWbYSM1ENT0ZaCb32noMjionxZKX41k-sWqBgECYaX4UXTpsGeP_9fEOrZZz4Xbx5OVqFPjlmq5agBtmD32J8358x0VIj9L2q6xiGXfvu4s_1yue4Xbfn3SkJK3M2p4SoxE/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.jswalaupun serinya berbeda, kode warna merah diatas tidak perlu lagi Anda masukkan. Cukup satujQuery.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 kotakHMTL/Javascript bisa dibuat dulu satu kolom kosong diatas blog post. Cara membuatnya, letakkan kode berikut diatas ]]></b:skin>
view plain print ?
1. /* Slide Content
2. ----------------------------------------------- */
3. .slide-wrapper {padding:0 auto;margin:0 auto;width:auto;float: left;
4. word-wrap: break-word; overflow: hidden;}
5. .slide {color: #666666;line-height: 1.3em;}
6. .slide ul {list-style:none;margin:0 0 0;padding:0 0 0;}
7. .slide li {margin:0;padding-top:0;
8. padding-right:0;padding-bottom:.25em;
9. padding-left:0px;text-indent:0px;line-height:1.3em;}
10. .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 :
view plain print ?
1. <b:if cond='data:blog.url == data:blog.homepageUrl'>
2. <div id='slide-wrapper'>
3. <b:section class='slide' id='slide' preferred='yes'/>
4. </div>
5. </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.

More: http://www.maskolis.com/2012/04/membuat-content-slider-image-otomatis.html

Cara Modifikasi Popular Post untuk Template Gallery

noreply@blogger.com (Anonymous) — Tue, 11 Dec 2012 19:18:00 +0000

Saya akan mengulas satu persatu fitur yang ada pada template demo sebelum nanti saya bagikan, sehingga diharapkan Anda dapat menciptakan atau membuat template sendiri dengan modifikasi widget default yang yang sudah disediakan oleh blogger. Widget dari blogger yang saya modifikasi kali ini adalah Popular Post, sebuah widget yang berfungsi untuk menampilkan postingan atau artikel mana yang paling banyak diminati para pengunjung. Secara default widget Popular Post ini sudah menarik karena sudah ada fitur thumbnail dan summary. Tapi menurut saya sih kondisional, widget itu bisa langsung dipasang pada blog yang lebih banyak menggunakan artikel daripada gambar, jika widget default itu dipasang pada blog yang bertipe gallery sepertinya kurang cocok.

DEMO

Nah, kali ini saya mencoba untuk memodifikasi widget tersebut agar cocok dipasang pada blog yang mempunyai konten gallery. Gambarnya seperti diatas, hanya menampilkan thumbnail dan judul dengan posisi horisontal. Jika anda tertarik, berikut ini cara membuatnya :

Login ke Blogger dengan akun Anda
Setelah itu masuk ke template >> klik Edit HTML jangan lupa centang Expand Widget Templates.
Lalu masukkan kode berikut ini diatas ]]></b:skin> :

.PopularPosts .widget-content ul li {background:none repeat scroll 0 0 transparent;float:left;list-style:none outside none;margin:0 !important;padding: 0 !important;border-bottom:none}

.PopularPosts ul{padding:5px 0}

.PopularPosts .item-thumbnail img{width:110px;height:110px;padding:11px;margin:0}

.PopularPosts .item-content{position:relative;float:left;margin:0}

.PopularPosts .item-title a{font-size:11px;color:#fff;display:block;padding:0 5px;float:left;width:122px}

.PopularPosts .item-title:hover{opacity:1;-moz-opacity:1;filter:alpha(opacity=100)}

.PopularPosts .item-thumbnail{float:left;margin:3px 1px 7px 10px;border:1px solid #ccc;overflow: hidden}

.PopularPosts .item-title{background:#000;position:absolute;bottom:8px;right:2px;opacity:.6;-moz-opacity:.6;filter:alpha(opacity=6)}

Kode warna merah diatas adalah panjang dan lebar gambar thumbnail, Anda bisa ganti dan sesuaikan dengan lebar sidebar pada template, seperti yang terlihat pada sidebar blog ini.
Kemudian masuk ke layout >> add a gadget pilih Popular Post pada baris kelima.
Setelah muncul halaman Popular Post, setting seperti pada gambar dibawah ini :

Yang perlu diperhatikan adalah centang hanya thumbnail, biarkan kotak snippet kosong tidak perlu dicentang. Judul dan jumlah post yang ingin ditampilkan terserah Anda.
Setelah langkah diatas, masuk lagi ke Edit HTML (centang Expand Widget Templates), cari kode berikut :

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>

<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>

<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == "false"'>

<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>

<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Setelah ketemu, ganti dengan kode berikut ini :

<b:widget id='PopularPosts1' locked='false' title='Most Product View' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>

<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>

<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == "false"'>

<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>

<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Terakhir, save templates lihat hasilnya.

Modifikasi widget Popular Post dari blogger ini tidak hanya untuk blog gallery saja, Anda juga bisa memakainya pada blog yang bukan gallery seperti yang terlihat di sidebar pada blog ini. Demikian tadi tutorial memodifikasi tampilan Popular Post untuk template Gallery jika masih ada yang kurang paham silahkan tinggalkan pesan di kotak komentar maaf kalau sudah ada tutorial seperti ini sebelumnya, selamat mencoba dan semoga bermanfaat.

More: http://www.maskolis.com/2012/05/modifikasi-popular-post-untuk-template.html

Cara Membuat Slider Otomatis Untuk Template Toko Online

noreply@blogger.com (Anonymous) — Tue, 11 Dec 2012 19:13:00 +0000

Kemarin ada teman yang meminta via email untuk dibuatkan sebuah slider otomatis untuk toko online yang dikelolanya. Bisnis jualan barang atau jasa dengan memanfaatkan fasilitas internet sekarang lagi ngetrend, dan permintaan untuk membuat sebuah template toko online pun juga banyak, tapi kok susah banget ya? Saya tidak akan membahas itu sekarang, saya akan mencoba untuk memenuhi permintaan dengan membuat sebuah Featured Slider sederhana dengan tambahan paginasi berupa deretan gambar kecil dibawah summary atau ringkasan artikel. Prinsip kerja dari slider ini sama dengan slider yang ada pada template Johny Bingung, disini saya hanya modifikasi background dan menambahkan logo shopping pada bagian bawah gambar.

DEMO

Baiklah langsung saja pada cara pembuatannya :

Langkah pertama

Kita harus membuat satu widget di bawah header untuk meletakkan slider nantinya. Login keblogger dengan akun Anda
Setelah masuk ke dashboard, pilih blog yang mau dipasang slider.
Kemudian pilih template >> Edit HTM, jangan lupa centang dulu kotak expand widget template.
Backup dulu template untuk berjaga-jaga jika nanti terjadi kesalahan dalam pengeditan. Kemudian masukkan kode berikut ini diatas ]]></b:skin>
view plain print ?
1. /* Slide Content
2. ----------------------------------------------- */
3. .slide-wrapper {padding:0 auto;margin:0 auto;width:auto;float: left;
4. word-wrap: break-word; overflow: hidden;}
5. .slide {color: #666666;line-height: 1.3em;}
6. .slide ul {list-style:none;margin:0 0 0;padding:0 0 0;}
7. .slide li {margin:0;padding-top:0;
8. padding-right:0;padding-bottom:.25em;
9. padding-left:0px;text-indent:0px;line-height:1.3em;}
10. .slide .widget {margin:0px 0px 6px 0px;}
Kemudian untuk memanggil widget agar muncul di layout, letakkan kode berikut di atas <div id='main-wrapper'>
view plain print ?
1. <b:if cond='data:blog.url == data:blog.homepageUrl'>
2. <div id='slide-wrapper'>
3. <b:section class='slide' id='slide' preferred='yes'/>
4. </div>
5. </b:if>
Lalu save template, sekarang anda masuk ke layout dulu, lihat dibagian bawah header apa sudah ada satu widget kosong seperti pada gambar di bawah?

Jika pada template Anda sudah terdapat satu kolom kosong yang ada di bawah header seperti gambar diatas, untuk langkah pertama tinggalkan saja, langsung pada langkah kedua

Langkah kedua

Masih pada posisi Edit HTML masukan kode dibawah ini diatas ]]></b:skin>

.shadow{width:950px; height:39px; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcligFDbrqLBb4sMMkmOtgZL5n_v_03SXrYmPkm0Oh7eWKesnoNKB3-a8CMezb3E32F6feFT4Zrc7IjLWHjorBEsXfcmikLX_53CF6MxqFdp8G7F9Ohet643deiLe7JyUiS7aEL4IHhwbV/s1600/shadow1.png) no-repeat center;margin:0 auto}
#featured-slider{position:relative;overflow:hidden;width:950px;height:325px;background:#fcfcfc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMEysrljqP9_quSmWdmIYo4EPcfYdYytMwsb_h1qvLsKV80TzgGAI-EcP9QSz6U872PAt8QJ2WTj_hsG_JnPk51DLcAsV2qSazRQ_sB193wFdnkhy7lRCIWjN7c1T7hGpxfu8dGkkUFMbu/s1600/slider-bg.png) repeat-x top;margin:0 auto;padding:0 auto}
#featured-slider .contentdiv{visibility:hidden;position:absolute;left:20px;top:10px;z-index:1;width:305px}
#featured-slider .contentdiv img{background:#fff;padding:2px;border:1px solid #ccc;width:297px;height:297px;overflow:hidden}
#featured-slider .sliderPostPhoto{position:relative;height:305px;width:305px;overflow:hidden}
#featured-slider .sliderPostInfo{position:absolute;top:0;left:345px;color:#a1a1a1;background:url();height:190px;width:540px;padding:5px 0 0}
#featured-slider .sliderPostInfo p{color:#0a0a0a;line-height:1.6em;font-size:14px;padding-top:1px}
#featured-slider .featuredPostMeta a{color:#a1a1a1}
#featured-slider .order a {display:block; width:98px; height:40px; bottom:14px; left:0px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjqP98l_KrFFklSnFeUkgKJ21K1C6cb8__I24Vfrf5LPdR6IOTVaGbbn-l6IQyumKypSy2_uyN6gZWml1AVj3l14aM3RpgNGMSpfnBLlwZdJJQqDqJFsMwf22TBLJ-uhETM4Ke8ehp7vLg/s1600/order.png) no-repeat 0 0; position:absolute; font-size:15px; line-height:13px; text-transform:uppercase; text-decoration:none; font-family: 'Open Sans', sans-serif; color:#fff; font-weight:700; padding:11px 0 0 6px;}
#featured-slider .order a:hover{ color:#515151;}
.featuredTitle{font:bold 24px Tahoma;color:#719429;line-height:1cm}
.featuredTitle a{color:#719429}
.featuredTitle a:hover{color:#0a0a0a}
#paginate-featured-slider{position:absolute;right:0;top:250px;z-index:1;width:595px;height:80px;overflow:hidden}
#paginate-featured-slider ul{width:595px;list-style:none}
#paginate-featured-slider .featured_thumb{float:left;margin-right:15px;width:65px;height:65px;padding:0}
#paginate-featured-slider .featured_thumb:hover{opacity:0.7}

Ukuran 950px diatas menunjukkan lebar slider, dan 325px adalah tinggi slider. Silahkan sesuaikan dengan ukuran template Anda.
Setelah langkah diatas, masukkan kode berikut 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/slider.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvIR37p7-LLWbYSM1ENT0ZaCb32noMjionxZKX41k-sWqBgECYaX4UXTpsGeP_9fEOrZZz4Xbx5OVqFPjlmq5agBtmD32J8358x0VIj9L2q6xiGXfvu4s_1yue4Xbfn3SkJK3M2p4SoxE/s1600/no+image.jpg";
showRandomImg = true;

aBold = true;

summaryPost = 400;
summaryTitle = 25;

numposts2 = 7;

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 showrecentposts1(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();

   for (var i = 0; i < numposts2 ; 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"><div class="sliderPostPhoto"><a class="crop-foto" href="'+posturl+'"><img width="200" height="150" class="alignright" src="'+img[i]+'"/></a></div><div class="sliderPostInfo"><div class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></div><span class="featuredPostMeta">'+daystr+' | <a href="'+posturl+'">'+pcm+' Comments</a></span><p>'+removeHtmlTag(postcontent,summaryPost)+'... <a href="'+posturl+'" class="meta-more">View Detail </a></p></div><p class="order"><a href="'+posturl+'">order!</a></p></div>';
document.write(trtd);

  j++;
}

}

function showrecentposts2(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();

   for (var i = 0; i < numposts2 ; 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 = '<ul class="featured_thumb"><a rel="'+i+'" class="toc" href="#"><img width="65" height="65" title="our product" alt="our product" class="featured_thumb" src="'+img[i]+'"/></a></ul>';
document.write(trtd);

  j++;
}

}
//]]>
</script>

Perhatikan kode warna merah diatas jika pada template anda sudah terdapat jQuery.min.jsmeskipun serinya berbeda, Anda tidak perlu memasukkan script warna merah itu lagi. Cukup satu jQuery.min untuk satu template jika ada dua, kemungkinan akan bentrok dan slidernya tidak jalan.
Selanjutnya perhatikan kode script pada langkah pertama untuk nomer 5 diatas, ganti semua dengan kode dibawah ini :

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='slide-wrapper'>
<b:section class='slide' id='slide' preferred='yes'>
<b:widget id='HTML82' locked='false' title='feature content slider' type='HTML'>
<b:includable id='main'>
<div id='featured-slider'>
<script>
document.write("<script src=\"/feeds/posts/default/-/<data:content/>?max-results="+numposts2+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script>
<div id='paginate-featured-slider'>
<ul>
<script>
document.write("<script src=\"/feeds/posts/default/-/<data:content/>?max-results="+numposts2+"&orderby=published&alt=json-in-script&callback=showrecentposts2\"><\/script>");
</script>
</ul>
</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: "click", //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>
</b:includable>
</b:widget>
</b:section>
</div>
</b:if>
<div class='shadow'/>
Setelah itu save template dan masuk ke layout akan nampak seperti pada gambar dibawah ini :
Kemudian klik Edit pada widget featured content slider, setelah terbuka jendela baru masukkan atau ketik label yang ingin ditampilkan pada slider, lihat gambar di bawah ini :

Dari gambar diatas saya memasukkan label Electronic yang akan muncul pada slider, Anda bisa ganti sesuai keinginan.
Terakhir save, dan lihat pada blog Anda sudah terpasang slider menarik.

Segitu dulu ya tutorial membuat featured slider sederhana untuk toko online, maaf kalau tulisan saya acak-acakan karena lagi sedih, pasti diantara teman-teman banyak yang mengikuti berita di media banyak korban yang belum ditemukan akibat jatuhnya pesawat Sukhoi meskipun tidak ada keluarga saya yang ikut dalam penerbangan tersebut, tapi saya prihatin dengan banyaknya kejadian pesawat jatuh di negeri ini, kenapa ya? Disamping itu saya juga sedih Adsense saya hari ini kena banned... duuhhh lebay banget somprettt. Jika masih ada yang kurang jelas dalam penjelasan diatas tinggalkan pesan di kotak komentar. Selamat mencoba dan semoga bermanfaat.

More: http://www.maskolis.com/2012/05/slider-otomatis-untuk-template-toko.html

Cara Modifikasi Popular Post untuk Template Gallery

noreply@blogger.com (Anonymous) — Tue, 11 Dec 2012 18:52:00 +0000

DEMO

Login ke Blogger dengan akun Anda
Setelah itu masuk ke template >> klik Edit HTML jangan lupa centang Expand Widget Templates.
Lalu masukkan kode berikut ini diatas ]]></b:skin> :

.PopularPosts .widget-content ul li {background:none repeat scroll 0 0 transparent;float:left;list-style:none outside none;margin:0 !important;padding: 0 !important;border-bottom:none}

.PopularPosts ul{padding:5px 0}

.PopularPosts .item-thumbnail img{width:110px;height:110px;padding:11px;margin:0}

.PopularPosts .item-content{position:relative;float:left;margin:0}

.PopularPosts .item-title a{font-size:11px;color:#fff;display:block;padding:0 5px;float:left;width:122px}

.PopularPosts .item-title:hover{opacity:1;-moz-opacity:1;filter:alpha(opacity=100)}

.PopularPosts .item-thumbnail{float:left;margin:3px 1px 7px 10px;border:1px solid #ccc;overflow: hidden}

.PopularPosts .item-title{background:#000;position:absolute;bottom:8px;right:2px;opacity:.6;-moz-opacity:.6;filter:alpha(opacity=6)}

Kode warna merah diatas adalah panjang dan lebar gambar thumbnail, Anda bisa ganti dan sesuaikan dengan lebar sidebar pada template, seperti yang terlihat pada sidebar blog ini.
Kemudian masuk ke layout >> add a gadget pilih Popular Post pada baris kelima.
Setelah muncul halaman Popular Post, setting seperti pada gambar dibawah ini :

Yang perlu diperhatikan adalah centang hanya thumbnail, biarkan kotak snippet kosong tidak perlu dicentang. Judul dan jumlah post yang ingin ditampilkan terserah Anda.
Setelah langkah diatas, masuk lagi ke Edit HTML (centang Expand Widget Templates), cari kode berikut :

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>

<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>

<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == "false"'>

<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>

<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Setelah ketemu, ganti dengan kode berikut ini :

<b:widget id='PopularPosts1' locked='false' title='Most Product View' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>

<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>

<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == "false"'>

<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>

<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Terakhir, save templates lihat hasilnya.

Selengkapnya: http://www.maskolis.com/2012/05/modifikasi-popular-post-untuk-template.html