Sabtu, 12 Januari 2013

11.00

KESABARAN

Aku tak bisa tidur Orang ngomong, anjing nggonggong Dunia jauh mengabur Kelam mendinding batu Dihantam suara bertalu-talu Di ...Baca selengkapnya »

KU LIHAT TANAH TERHAMPAR

10.57

KU LIHAT TANAH TERHAMPAR

Kulihat tanah terhampar Penuh tumbuh rumput melambai Langit hijau meninggi sunyi Awang angkasa luas lepas. Adu...Baca selengkapnya »

DERAI DERAI CEMARA

10.55

DERAI DERAI CEMARA

Cemara menderai sampai jauh Terasa hari akan jadi malam Ada beberapa dahan di tingkap merapuh Di pikul angin yang terpenda...Baca selengkapnya »

10.51

OBOR HATI

Tuhan telah menyalakan obor dalam hatimu. Yang memancarkan cahaya pengetahuan dan keindahan. Sungguh berdosa jika kita memadamk...Baca selengkapnya »

10.46

PERSAHABATAN

Sahabat adalah keperluan jiwa, yang mesti dipenuhi. Dialah ladang hati, yang kau taburi dengan kasih dan kau tuai dengan pe...Baca selengkapnya »

Nyanyian Seruling Bambu

10.45

Nyanyian Seruling Bambu

Dengarkan nyanyi sangsai Seruling Bambu Mendesah selalu, sejak direnggut Dari rumpun rimbunnya dulu, alunan Lagu pedih dan ci...Baca selengkapnya »

Membuat Slider Carousel Otomatis Berdasarkan Label

10.42

Membuat Slider Carousel Otomatis Berdasarkan Label

Langsung saja di bawah ini langkah-langkah untuk membuatnya : Login ke blogger dengan akun Anda Setelah itu pilih blog yan...Baca selengkapnya »

Membuat Daftar Isi Otomatis di Blogspot

10.36

Membuat Daftar Isi Otomatis di Blogspot

Berikut ini cara membuat dan memasang daftar isi otomatis, silahkan ikuti dengan cermat dan seksama langkah-langkah di...Baca selengkapnya »

Membuat Tab View Widget Kategori

10.29

Membuat Tab View Widget Kategori

Kembali ke tutorial tab view widget per kategori, widget ini menampilkan 4 post dengan thumbnail dalam tiap satu label atau kategor...Baca selengkapnya »

Modifikasi Popular Post untuk Template Gallery

10.23

Modifikasi Popular Post untuk Template Gallery

Ini lah caranya: 1. Login ke Blogger dengan akun Anda 2. Setelah itu masuk ke template >> klik Edit HTML ...Baca selengkapnya »

Langganan: Postingan (Atom)

KESABARAN

Diposting oleh Unknown

Aku tak bisa tidur
Orang ngomong, anjing nggonggong
Dunia jauh mengabur
Kelam mendinding batu
Dihantam suara bertalu-talu
Di sebelahnya api dan abu

Aku hendak berbicara
Suaraku hilang, tenaga terbang
Sudah! Tidak jadi apa-apa!
Ini dunia enggan disapa, ambil perduli

Keras membeku air kali
Dan hidup bukan hidup lagi

Kuulangi yang dulu kembali
Sambil bertutup telinga, berpicing mata
Menunggu reda yang mesti tiba

Maret 1943

Puisi Oleh: Chairil Anwar

Filed under Puisi 0 komentar

KU LIHAT TANAH TERHAMPAR

Diposting oleh Unknown

Kulihat tanah terhampar

Penuh tumbuh rumput melambai

Langit hijau meninggi sunyi

Awang angkasa luas lepas.

Aduh, hatiku kecil

Senantiasa sedih selalu layu

Kalbu merindu pada Yang satu.

Yang samar pada pawing

Yang nyala pada bicara

Yang menurunkan tabir antara hidup dan mati.

Tetapi hatiku sendu selalu

Mau tahu apa rahasia

Di tubir tabir hitam kelam

Pemisah ada dengan tiada.

Filed under Puisi 0 komentar

DERAI DERAI CEMARA

Diposting oleh Unknown

Cemara menderai sampai jauh
Terasa hari akan jadi malam
Ada beberapa dahan di tingkap merapuh
Di pikul angin yang terpendam

Aku sekarang orangnya bisa
tahan
sudah berapa waktu bukan
kanak lagi
tapi dulu memang ada suatu bahan
yang bukan dasar
perhitungan kini

hidup hanya menunda
kekalahan
tambah terasing dari cinta
sekolah rendah
dan tahu,ada yang tetap
tidak terucapkan
sebelum pada akhirnya kita
menyerah

Karya: Chayril Anwar

Filed under Puisi 1 komentar

OBOR HATI

Diposting oleh Unknown

Tuhan telah menyalakan obor
dalam hatimu.

Yang memancarkan cahaya pengetahuan dan keindahan.

Sungguh berdosa jika kita memadamkannya.

Dan mencampakkannya dalam abu.

Kahlil gibran

Filed under Puisi 0 komentar

PERSAHABATAN

Diposting oleh Unknown

Sahabat adalah keperluan
jiwa, yang mesti dipenuhi.
Dialah ladang hati, yang kau
taburi dengan kasih dan kau

tuai dengan penuh rasa
terima kasih.

Dan dia pulalah naungan
dan pendianganmu.
Kerana kau
menghampirinya saat hati
lupa dan mencarinya saat
jiwa mahu kedamaian.

Bila dia berbicara,
mengungkapkan fikirannya,
kau tiada takut
membisikkan kata “Tidak” di
kalbumu sendiri, pun tiada
kau menyembunyikan kata
“Ya”.
Dan bilamana dia
diam,hatimu berhenti dari
mendengar hatinya; kerana
tanpa ungkapan kata, dalam
persahabatan, segala fikiran,
hasrat,dan keinginan
dilahirkan bersama dan dikongsi, dengan
kegembiraan tiada
terkirakan.

Di kala berpisah dengan
sahabat, tiadalah kau
berdukacita;
Kerana yang paling kau
kasihi dalam dirinya,
mungkin kau nampak lebih
jelas dalam ketiadaannya,
bagai sebuah gunung bagi
seorang pendaki, nampak
lebih agung daripada tanah
ngarai dataran.

Dan tiada maksud lain dari
persahabatan kecuali saling
memperkaya roh kejiwaan.
Kerana cinta yang mencari
sesuatu di luar jangkauan
misterinya, bukanlah cinta ,
tetapi sebuah jala yang
ditebarkan: hanya
menangkap yang tiada
diharapkan.

Dan persembahkanlah yang
terindah bagi sahabatmu.
Jika dia harus tahu musim
surutmu, biarlah dia
mengenali pula musim
pasangmu.
Gerangan apa sahabat itu jika kau sentiasa
mencarinya, untuk sekadar
bersama dalam membunuh
waktu?

Carilah ia untuk bersama
menghidupkan sang waktu!
Kerana dialah yang bisa
mengisi kekuranganmu,
bukan mengisi
kekosonganmu.
Dan dalam manisnya
persahabatan, biarkanlah
ada tawa ria dan berkongsi
kegembiraan..
Kerana dalam titisan kecil
embun pagi, hati manusia
menemui fajar dan ghairah
segar kehidupan.

Karya:Khalil Gibran

Filed under Puisi 0 komentar

Nyanyian Seruling Bambu

Diposting oleh Unknown

Dengarkan nyanyi sangsai Seruling Bambu
Mendesah selalu, sejak direnggut
Dari rumpun rimbunnya dulu, alunan
Lagu pedih dan cinta membara.

“Rahasia nyanyianku, meski dekat,
Tak seorang pun bisa mendengar dan melihat
Oh, andai ada teman tahu isyarat
Mendekap segenap jiwanya dengan jiwaku!

Ini nyala Cinta yang membakarku,
Ini anggur Cinta mengilhamiku.
Sudilah pahami betapa para pencinta terluka,
Dengar, dengarkanlah rintihan Seruling!”

Puisi Oleh: Jalaluddin Rumi, Mas. I

Filed under Puisi 0 komentar

Membuat Slider Carousel Otomatis Berdasarkan Label

Diposting oleh Unknown

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/AVvXsEhqxP-p7vYPfin7VlnI86tFROr3qBuEHFT39ZdXhFW2TzufW0pF6G0TfVt4Z4f5mGyOMdljqgMrdJuuPDbESjThfp6oDNBK4AjqnBlADeOCN8YHLgAvN0YDAFg5ugJpMQ2zKsq9Fe6bZko/s1600/scroller-bg.png) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTISrzQkwlcS4dcrDqYmEMTuLYSyFhc3jGIdrd1FvUC1v60hOMzIMQXKK9Cn8N-94ejKw8smL__m1iiqeiuuBlC08dZf79oYBFBhc2ApW79FBbZAP8XZBCpDJU7zZltdNpuoCoqv1HXiI/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/AVvXsEiquBfE05ZhXoECZqErGJLs8_upd-ShKoJIUgg1JG9NG5TghKV-QmIJKr93zGfe0K22H6vykq7EpTzraFQ4zWrhEVu5w71QHOgoI9CZWK5runHLNYdipS_Jl8b_gnKdEy4OdKJ6KuG-MSk/s1600/prev.png) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgETQNuP0h_yhAcUlNt2_xD4QQvGlVxVeS8m5MX5sE8ClVya1z-DxW3GjcUe-vB4MCNW8F2XhL6LLSTdpBIM5sRoSQL-tvjBEckxM63W3Fdh_v5CMDQhJOh-rZ7x2uX4vjgGmsY2FTeEU8/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/AVvXsEgF-iTBpZReWlq3WC0vYnLjxvqY-BunLwrSUu2vTMsam0bYvxrySDN1wqsrNYlKPvyZICq00HuHEG3dWvh5l-jkRjlTWVKDHcGT1vv9YX5vTT5vlqHZ1auBxUvwEbUZH2r8oKR6TSwTel8/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/AVvXsEgOSiCo8E62d6utb87EQ1lTqKqHlDYxG_xZqIiAO-xAF5XnVQs702VODY6ejAAV-K6gmHoKaE1Iu9Zx505TRQX71wWW5jkEPhOV3wD4ST3QfbBiexDXQPqbJQ0GrENJNzu-2R1Ja-O7jPo/s1600/main.png) repeat-x top;display:inline;float:left;text-align:center;font-weight:700;font-size:.9em;line-height:1.2em;border:1px solid #ccc;width:145px;height:150px;margin:0 4px 20px 7px;padding:6px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
#carousel ul li:hover{filter:alpha(opacity=75);opacity:.75;}
#carousel ul li a.slider_title{color:#222;display:block;margin-top:5px}
#carousel ul li a.slider_title:hover{color:#cd1713}
#carousel a img{display:block;background:#fff;margin-top:0}

Perhatikan kode warna biru diatas, itu adalah lebar dan tinggi slider pada demo yang saya buat, silahkan Anda sesuaikan dengan ukuran template Anda.

Langkah selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode</head> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/265232511102/carousellite.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoFifk71zDBdfauJP3-eOTK2OZYClo2bKin2wbUmzGZyy52xazOEZs4l5tUEMAURa_9ICZ29nc_8AIPHZEIfwuzkf89q9SDFv9ccYo-VVvxmwYdIfNSGuW3hpS_8jiO0itpOiWBsoOQlw/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 kunjungi Maskolis. Itu tadi tutorial singkat tentang bagaimana cara membuat slider Carousel otomatis berdasarkan kategori atau label kali ini, selamat mencoba dan semoga bermanfaat.

Filed under Blog, Tutorial 0 komentar

Membuat Daftar Isi Otomatis di Blogspot

Diposting oleh Unknown

Berikut ini cara membuat dan memasang daftar isi otomatis, silahkan ikuti dengan cermat dan seksama langkah-langkah di bawah ini:

1. Login ke Blogger, Klik Layout/Tata Letak;

2. Pada Elemen Halaman, klik Add Gadget/Tambah Gadget di lokasi yang Anda inginkan;

3. Cari dan pilih HTML/Javascript;

4. Copy paste kode di bawah ini ke dalam content yang telah tersedia, berikut ini kodenya :

<div style="overflow: auto; width: 300px; height: 200px; text-align: left;">

<script style="text/javascript" src="http://www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js"></script>

<script src="http://iskandarxxx.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script></div>

5. Klik Tombol Save/Simpan.

Keterangan :

·         Link yang berwarna merah, silahkan diganti dengan alamat Blog Anda;
·         Width: 300px; adalah merupakan lebar dari kotak daftar isi otomotis dan boleh anda sesuaikan;
·         Height: 200px; adalah merupakan tinggi dari kotak daftar isi otomotis dan boleh anda sesuaikan.

Demikianlah tutorial Membuat Daftar Isi Otomatis Di Blogspot ini, semoga bermanfaat !

Filed under Blog, Tutorial 0 komentar

Membuat Tab View Widget Kategori

Diposting oleh Unknown

Kembali ke tutorial tab view widget per kategori, widget ini menampilkan 4 post dengan thumbnail dalam tiap satu label atau kategori, untuk lebih jelasnya silahkan lihat gambar di atas, dan klik demo biar lebih jelas.

Langsung saja pada cara membuatnya :

1.      Pertama Anda meesti login ke blogger dengan akun Anda
2.      Kedua pilih blog yang ingin anda tambahkan slider ini.
3.      Setelah itu masuk ke template >> Edit HTML, kemudian centang expand widget templates
4.      Untuk berjaga-jaga jika terjadi kesalahan dalam pengeditan nantinya, sebaiknya backup dulu template.
5.      Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin> :

#tabber-wrapper{width:640px;float:left;word-wrap:break-word;overflow:hidden}
ul.tab-view{float:left;list-style:none;height:32px;border-bottom:1px solid #aaa;border-left:1px solid #aaa;width:638px;margin:0;padding:0}
ul.tab-view li{float:left;height:31px;line-height:31px;border:1px solid #aaa;border-left:none;overflow:hidden;position:relative;background:#eee;margin:0 0 -1px;padding:0}
ul.tab-view li a{text-decoration:none;color:#26231c;display:block;border:1px solid #eee;outline:none;font-weight:700;padding:0 15px}
html ul.tab-view li.active,html ul.tab-view li.active a,html ul.tab-view li.active a:hover{background:#eee;color:#026ab5;border-bottom:1px solid #eee}
.tab-wrapper{border:1px solid #aaa;border-top:none;overflow:hidden;clear:both;float:left;width:638px;background:#eee;margin-bottom:15px}
.tabber{padding:10px 0}
.tabber .column{float:left;display:inline;width:146px;margin:0 0 0 11px}
.tabber h2{font:bold 12px Arial;line-height:15px;margin:7px 0 5px}
.tabber h2 a{color:#222}
.tabber h2 a:hover{color:#026ab5}

Karena pada blog demo yang saya gunakan lebar main-wrapper (kolom postingan) adalah 640px maka untuk membungkus tab view widget lebarnya harus sama, yaitu 640px. Anda bisa sesuaikan dengan lebar main-wrapper pada template yang Anda gunakan.
Dan untuk tab viewnya sendiri lebarnya harus dikurangi 2px (1px kanan dan kiri), karena tab ini dibungkus dengan border setebal 1px, sehingga lebarnya menjadi 638px. Lebar tiap satu post disini 146px, jika pada template yang Anda gunakan lebar main-wrapper lebih kecil, maka lebar untuk satu post ini pun juga harus diperkecil sehingga jarak antara bagian sisi kanan dan kiri sama.

6. 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://johny-ember.googlecode.com/svn/trunk/tabview.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr=new Array();imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoFifk71zDBdfauJP3-eOTK2OZYClo2bKin2wbUmzGZyy52xazOEZs4l5tUEMAURa_9ICZ29nc_8AIPHZEIfwuzkf89q9SDFv9ccYo-VVvxmwYdIfNSGuW3hpS_8jiO0itpOiWBsoOQlw/s1600/no+image.jpg";showRandomImg=true;aBold=true;summaryPost=80;numposts=4;Title1="Norah Jones";Title2="Diana Krall";Title3="Sting";Title4="Basia";Title5="Sade";Title6="Jamie Cullum";function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}function showrecentposts(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;var trtd='<div class="column"><a href="'+posturl+'"><img width="146" height="95" src="'+img[i]+'"/></a><h2><a href="'+posturl+'">'+posttitle+'</a></h2><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div>';document.write(trtd);j++}}
//]]>
</script>

Keterangan :

Perhatikan URL script warna biru diatas, itu adalah kode script jQuery.min.js seri terbaru yang saya gunakan untuk membuat tab view widget. Jika pada template Anda sudah terdapat jQuery.min.js walaupun serinya berbeda, kode warna biru diatas tidak perlu lagi Anda masukkan. Cukup satu jQuery.min.js yang ada di template, terserah mau seri berapa, kalau bisa versi yang terbaru.

Tulisan warna merah : Norah Jones, Diana Krall dan seterusnya adalah judul untuk tab view widget, anda bisa ganti sesuai katehori yang ingin ditampilkan pada widget tersebut. Warna biru (146 dan 95) diatas adalah ukuran lebar dan tinggi thumbnail pada satu post kategori, silahkan ukurannya disesuaikan.

7. Kemudian masukkan kode berikut sebelum kode </body> :

<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function(){$(".tabber").hide();$("ul.tab-view li:first").addClass("active").show();$(".tabber:first").show();$("ul.tab-view li").click(function(){$("ul.tab-view li").removeClass("active");$(this).addClass("active");$(".tabber").hide();var activeTab=$(this).find("a").attr("href");$(activeTab).fadeIn();return false})});
//]]>
</script>

8. Langkah selanjutnya adalah bagaimana cara menempatkan tab view widget tersebut pada blog kita.
Jika Anda ingin meletakkan pada bagian atas sebelum post seperti pada demo, cari kode<div id='main-wrapper'>, kemudian letakkan kode berikut ini dibawahnya :

<div id='tabber-wrapper'>
<ul class='tab-view'>
<li><a href='#tab1'><script>document.write(Title1);</script></a></li>
<li><a href='#tab2'><script>document.write(Title2);</script></a></li>
<li><a href='#tab3'><script>document.write(Title3);</script></a></li>
<li><a href='#tab4'><script>document.write(Title4);</script></a></li>
<li><a href='#tab5'><script>document.write(Title5);</script></a></li>
<li><a href='#tab6'><script>document.write(Title6);</script></a></li>
</ul><div class='clear'/>
<div class='tab-wrapper'>
<div class='tabber' id='tab1'>
<script>
document.write(" <script src=\"/feeds/posts/default/-/Norah Jones Lyrics?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script></div>
<div class='tabber' id='tab2'>
<script>
document.write(" <script src=\"/feeds/posts/default/-/Diana Krall?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script></div>
<div class='tabber' id='tab3'>
<script>
document.write(" <script src=\"/feeds/posts/default/-/Sting?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script></div>
<div class='tabber' id='tab4'>
<script>
document.write(" <script src=\"/feeds/posts/default/-/Basia?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script></div>
<div class='tabber' id='tab5'>
<script>
document.write(" <script src=\"/feeds/posts/default/-/Sade Lyrics?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script></div>
<div class='tabber' id='tab6'>
<script>
document.write(" <script src=\"/feeds/posts/default/-/Jamie Cullum Lyrics?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script></div>
<div class='clear'/>
</div></div>

Tulisan warna merah pada kode diatas adalah label atau kategori yang saya tampilkan pada tab view widget, silahkan ganti dengan label Anda sendiri dan sesuaikan dengan judul tab view pada langkah nomer 6 diatas. Dan jika Anda ingin menampilkan widget ini di bawah postingan, letakkan kode tersebut diatas kode berikut ini (jika tidak ada cari yang mirip) :

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

</div>

9. Terakhir, save templates dan lihat hasilnya.

Jika masih ada yang kurang jelas silahkan kunjungi Mas kolis. Selamat mencoba dan semoga bermanfaat.

Filed under Blog, Tutorial 0 komentar

Modifikasi Popular Post untuk Template Gallery

Diposting oleh Unknown

Ini lah caranya:

1. Login ke Blogger dengan akun Anda

2. Setelah itu masuk ke template >> klik Edit HTML jangan lupa centang Expand Widget Templates.

3. 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.

4. Kemudian masuk ke layout >> add a gadget pilih Popular Post pada baris kelima.

5. 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.

6. 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>

7. 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>

8. 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.

Filed under Blog, Tutorial 0 komentar