Archive for May 2012

Unknown Add Comment

Unknown

Membuat Efek Daun Berjatuhan di Blog

Unknown Add Comment

Unknown

Membuat Efek Daun Berjatuhan di Blog | Tutorial Blog

Seperti halnya Memberi Efek Hujan Salju di Blog, efek daun jatuh ini juga menambah daya tarik buat pengunjung blog, trik ini menggunakan kode javascript, jadi sedikit memperberat loading blog.
Sebaiknya jangan tambahkan efek ini kalau di blog sobat sudah menggunakan efek video slide, pemutar music mp3 online atau penggunaan script animasi yang lain. Jadi pertimbangkan baik-baik sebelum menggunakan sebuah efek javascript.

Berikut Cara Membuat Efek Daun Berjatuhan :

Login ke dashboard blogger anda.
Klik Template > Edit HTML.
Lalu klik Proceed dan centang Expand widget template.
Cari kode </head> pada template dengan menggunakan Ctrl+F.
Copy kode javascript dibawah ini dan letakkan tepat diatas kode </head>.
<script src='http://wadah-tutorial.googlecode.com/files/leaf.js' type='text/javascript'/>
Save template anda dan lihat hasilnya.

Segitu aja Sob, selamat mencoba Membuat Efek Daun Berjatuhan di Blog.

Bikin widget komentar dengan gambar avatar

Unknown Add Comment

Unknown

Recent Comments widget dengan Avatar untuk Blogger / Blogspot. Dengan hadirnya fitur baru yaitu Threaded Comments, Blogger pun mengubah Comments API yang memungkinkan menampilkan avatar pada widget Recent Comments / Komentar Terakhir.

Script untuk menampilkan avatar pada komentar terakhir atau recent comment, dibuat oleh Harish. Saya share disini buat-rekan rekan blogger. Contohya pada gambar dibawah ini, atau lihat Komentar Sahabat di blog ini.

Cara menampilkan Avatar pada Reccent Comments Blogger

1. Buat widget baru HTML/JavaScript
2. Simpan kode dibawah ini pada widget, berikan judul terserah anda.

<style type="text/css">
    ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
    .w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
    .w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
    .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
    .w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
    .w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
 numComments  = 5,
 showAvatar  = true,
 avatarSize  = 30,
 roundAvatar = true,
 characters  = 30,
 defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
 hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b-recent-comments-w-gravatar.js"></script>
<script type="text/javascript" src="http://blog.kangismet.net/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>

3. Perhatikan kode diatas, kode yang berwarna merah bisa disesuaikan dengan selera Anda :

numComments = 5, (jumlah komentar yang ditampilkan)
showAvatar = true,
avatarSize = 30, (ukuran avatar dalam pixel)
roundAvatar = true,
characters = 30, (jumlah karakter yang ditampilkan)
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm", (url avatar)
hideCredits = true;

4. Ganti blog.kangismet.net dengan blog Anda, ganti max-results=5, sesuai jumlah komentar yang
ditampilkan.
5. Simpan.

Semoga tutorial cara menampilkan avatar pada recent comments blogger ini bisa membantu mempercantik blog anda. smile

[sumber]

Bikin share button facebook/twitter/g plus melayang paling gampang

Unknown Add Comment

Unknown

Lagi-lagi "Share Button", hehehe, Yups, Mengapa saya suka banget posting artikel seperti ini sama sobat, karena share button seperti like facebook dan tweet cukup ampuh dalam mendongkrak popularitas dan kunjungan ke blog kita. Apalagi buat newbie blogger, takutnya keseleo belajar SEO, hehehe.

Langsung Saja ya....
Masuk ke akun Blogger > Rancangan > Tata letak > Tambah Gadget > HTML/Javascript, kemudian masukkan kode di bawah ini;

<style type="text/css">
#sharebutton {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}
#sharebutton .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div id='sharebutton' title="Get this from blogbelajar2.blogspot.com">
<div class='sbutton' id='fb'>
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>
<div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script>
</div>
<div class='sbutton' id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div> <div class='sbutton' id='digg' style='margin-left:3px;width:48px'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script>
<a class="DiggThisButton DiggMedium"></a>
</div>
<div class='sbutton' id='gplusone'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
</div>
<div style="clear: both;font-size: 8px;text-align:center;">Get<a href="http://blogbelajar2.blogspot.com/2012/03/cara-membuat-share-button-like-tweet.html">widget</a></div>
</div>
<!-- share button melayang sisi kiri End –>

[sumber]

Bikin label/kategori jadi 2 kolom atau lebih

Unknown Add Comment

Bikin label/kategori jadi 2 kolom atau lebih

Unknown

Saya disini tidak akan banyak basa-basi bahkan tidak ada, jadi langsung ke pembahasan Cara Membuat Label Blogger Menjadi 2 Kolom :
1. Login ke akun Blogger
2. Klik Rancangan
3. Pada menu Elemen Halaman, klik tambah gadget di sidebar blog.
4. Pilih Widget Label dan pastikan tampilannya pada bentuk Daftar.
5. Kemudian klik Simpan.

Sampai disini, blog Anda sudah memiliki label. Namun tampilannya masih dalam bentuk default (list/ daftar dalam 1 kolom). Sekarang cara membuat label tersebut menjadi 2 kolom kita hanya menggunakan sebuah css, tidak ada script lain.
Pembagian label menjadi 2 kolom dengan menggunakan css adalah sebagai berikut :
1. Login ke akun Blogger, jika sudah login tidak perlu login lagi (karena link sign in tidak ada, yang ada hanya link sign out)
2. Pilih dan klik Rancangan
3. Selanjutnya Klik Edit HTML
4. Backup seluruh kode template ke dalam notepad.
5. Cari kode ]]>, lalu letakan kode berikut di atas kode tersebut

#Label1 li { float:left; width:45%; }

6. Klik Pratinjau dan lihat apakah terjadi perubahan pada widget label blog Anda (menjadi 2 kolom). Jika belum, coba perkecil
nilai width pada kode diatas sampai Anda menemukan nilai yang tepat, sehingga widget label dalam blog Anda menjadi 2 kolom.
7. Jika sudah selesai dan tidak terjadi kesalahan, klik Simpan.

Sekian dan terimakasih.........

[sumber]

Cara membuat menu label/kategori dropdown untuk menghemat tempat

Unknown Add Comment

Unknown

Setelah beberapa hari absen,akhirnya minggu ini saya dapat memposting artikel di blog aku yang makin parah ini.Agar blog ini masih dianggap sahabat sama paman Google danBlogger,yach..mau ga mau ya harus mau,..

Daripada ngemeng terus,langsung ke topiknya yuk! yup! Cara membuat dropdown label,anda pasti tahu seperti apa bentuk label pada umumnya kurang lebih akan seperti gambar dibawah ini:

label dropdown, menu label dropdown cara membuatnya

sedangkan jika cara untuk menghilangkan angka pada label, saya yakin sobat sudah tau caranya.

Membuat Label Drop Down

Nah,langsung ke topik!Jika sebelumnya anda masih bingung seperti apa si Dropdown Label tersebut?
Perhatikan gambar label dropdown dibawah ini,dari blog saya yang lain.

Cara Membuat Label Blog Berupa Dropdown.

Gimana?udah maksud khan label yang berupa/berbentuk dropdown? Ok!untuk membuatnya ikuti langkah-langkah berikut :

Pertama,pergi ke Dashboard,lalu pilih Tata Letak,kemudian kllik tab Edit HTML.
Jangan lupa contreng tulisan Expand Widget Templates,selanjutnya cari kode berikut:

<ul><b:loop values='data:labels' var='label'><li><b:if cond='data:blog.url == data:label.url'><data:label.name/><b:else/><a expr:href='data:label.url'><data:label.name/></a></b:if>(<data:label.count/>)</li></b:loop></ul>

Gunakan Ctrl+F untuk mempermudah pencarian,kode yang bercetak tebal diatas,hanya sebagai 'patokan' aja agar mudah dalam pencarian.

Setelah ketemu,hapus kode tersebut,dan gantilah dengan kode di bawah ini:

<select onchange='location=this.options[this.selectedIndex].value;'><option>Pilih Kategori</option> <b:loop values='data:labels' var='label'> <option expr:value='data:label.url'><data:label.name/> (<data:label.count/>) </option> </b:loop> </select><b:loop values='data:labels' var='label'><option expr:value='data:label.url'><data:label.name/>(<data:label.count/>)</option></b:loop></select>

Tulisan 'Pilih Kategori' bisa anda ganti sesuai keinginan,setelah itu,Simpan Template,Selesai,dan lihat hasilnya! :D

[sumber]

TRIK MEMPERCEPAT LOADING WEB DAN BLOG

Unknown Add Comment

Unknown

Dalam membikin agar web atau blog menjadi ringan sangatlah mudah apabila kita memahami dengan benar.
Dikesempatan ini saya mau memberikan beberapa tips agar web atau blog menjadi ringan seperti blog UTAMA SAYA INI.
Adapun yang saya terapkan adalah sebagai berikut:

1. MINIMALKAN HTTP REQUESTS
80% Waktu respon sebuah web atau pun blog dihabiskan pada front-end,kebanyakan untuk mendownload semua komponen yang akan ditampilkan dihalaman anda contohnya:
Gambar,Flash,Javacript,CSS,PHP,HTML..dsb.
Dengan mengurangi jumlah komponen yang harus didownload browser,anda mengurangi jumlah HTTP Request yang diperlukan web atau blog anda salah satunya menyederhanakan
desain halaman anda.Selain itu anda bisa juga mencoba metode berikut ini :
- Menggabungkan file,misalnya menyatukan semua CSS anda ke dalam sebuah singel stylesheet.dengan demikian setiap proses HTTP hanya perlu merequest 1 CSS saja.
- Tekhnik CSS Sprites,Yaitu menggabungkan semua background-image anda kedalam sebuah singele image yang penggunaanya didefinisikan melalui proferty CSS background-image dan backgroun position.

2. OPTIMASI CSS SPRITES
Kalian bisa juga mengoptimasi CSS sprites agar ukurannya lebih kecil.Salah satunya dengan menyusun image didalamnya secara horizontal.
Kemudian kalian juga bisa menggabungkan warna-warna yang sama dalam satu CSS spirite untuk menjaga perhitungan warna tetap rendah,idealnya dibawah 256 warna agar bisa pas dengan format PNG 8.
Terakhir jangan tinggalkan gap yang terlalu lebar antara image-image di CSS sprite kalian agar bisa lebih mobile friendly.Hal ini akan mengurangi memori yang diperlukan sebuah
user agent untuk melakukan dekompresi gambar kedalam pixel.
Coba bayangkan jika gambar 100 X 100 sama dengan 10 ribu pixel,maka 1000 X 1000 sama dengan 1 juta pixel.

3. OPTIMASI GAMBAR
Setelah anda mendesainer membuat gambar selesai untuk halaman web atau blog kalian,ada beberapa hal yang bisa kita lakukan sebelum mengirim gambar tersebut ke server,
melalui FTP antara lain caranya:
- Konversi GIF ke PNG (PNG 8) dan lihatlah ukuran filenya apakah bisa dihemat,biasanya sih bisa kalau ingin praktis kalian bisa coba DISINI.
- Bisa juga kalian coba tool optimasi seperti PNG CRUSH KLIK DISINI...

4. HINDARI SCALE GAMBAR DI HTML
Jangan upload gambar yang lebih besar dari yang anda butuhkan meskipun kalian bisa mengatur atributnya lewat HTML.

5. USAHAKAN FAVICON.ICON KECIL
Fhoto atau gambar favicon.ico pasti letaknya di root server kalian,meskipun kecil dan seringkali diabaikan ternyata favicon.ico bisa juga mengganggu
urutan download.Contohnya di IE (Internet Explorer).Ketika user agent kalian meminta komponen tambahan pada proses loading,Favicon akan di download dulu sebelum komponen tambahan tersebut.
Untuk meredam efek negative penggunaan favicon,pastikan ukuran dibawah 1k kalau perlu optimasi dulu.

6. DEFINISIKAN STYLESHEETS PADA HEAD SCRIPT KALIAN
Memindahkan stylesheet agar didefinisikan pada bagian HEAD dari script kalian bisa membuat halaman web atau blog kalian lebih cepat ditampilkan.
Sebab hal ini memungkinkan user agent melakukan render halaman secara pararel.Ketika browser menampilkan halaman secara pararel maka header,navigation,bar,logo dsb
semuanya akan berperan sebagai respon yang bisa menjaga agar user mau menunggu halaman kalian tampil sepenuhnya.
Strategi ini pas diterapkan untuk halaman dengan bvanyak konten dan untuk user dengan koneksi internet yang agak lambat.

7. LETAKKAN JAVASCRIPT DIBAGIAN BAWAH SCRIPT KALIAN
Masalah yang disebabkan oleh javascript adalah mereka memblock download secara paralel,makanya ketika sebuah javascript sedang didownload,browser tidak akan
mendownload konten yang lain maka pindahkan saja javascript kalian ke bagian bawah halaman kalau nyatanya javascript kalian kurang responsif.

8. LETAK JAVASCRIPT DAN CSS TERPISAH DARI SCRIPT KALIAN
Javascript dan CSS yang diletakkan jadi satu (Inline) dengan script HTML akan didownload berulang kali setiap dokumen HTML akan ditampilkan.
dengan cara ini jumlah HTML request memang bisa dikurangi namun ukuran dokumen HTML kalian akan bertambah,dilain pihak jika javascript dan CSS ditaruh pada file
yang terpisah dari dokumen HTML kalian akan menambah jumlah request HTML kalian.
Namun file external yang berisi javascript atau CSS ini bisa di cache oleh browser sehinggga tidak perlu didownload lagi.

9. HINDARI PEMAKAIAN CSS EXPRESSIONS
CSS expression adalah salah satu cara yang ampuh (namun berbahaya)agar property CSS bisa ditampilkan dengan dinamis.
Bukan hanya ketika halaman di-render atau di rezise saja tapi juga ketika halaman di scroll dan ketika user menggeser mouse,menggeser mouse menghasilkan
lebih dari 10.000 kali evaluasi makanya jika property CSS kalian memang harus ditampilkan secara dinamais daripada dengan CSS expression gunakan saja Event Handler.

10.OPTIMASI JAVASCRIPT DAN CSS KALIAN
Proses optimasi javascript dan CSS berhubungan dengan praktek penghapusan karakter,code,coment,spasi,baris baru,tab margin,dsb yang tidak diperlukan oleh
javascript atau CSS kalian.
Tujuannnya agar ukuran filenya bisa jadi lebih kecil,hal ini bisa meningkatkan waktu respon sebab ukuran file yang harus didownload jadi berkurang.
Untuk melakukan optimasi kalian bisa mempergunakan SOFTWARE INI..
Buat menunjukkan letak-letak optimasi yang memungkinkan pada javascript kalian,dan YUI COMPRESSOR KLIK DISINI..
untuk CSS kalian.

Nah sekian dulu yang bisa aku share ke teman-teman semua agar web ataupun blog kita bisa lebih cepat waktu loadingnya dan kita juga tidak bisa mengesampingkan sinyal internet tentunya.

Memberi Efek Hujan Salju di Blog

Unknown Add Comment

Unknown

Memberi Efek Hujan Salju di Blog | Tutorial Blog

Rasanya udah lama saya ga post, baru sekarang bisa update blog, jadi pada kesempatan ini saya akan berbagi salah satu cara untuk mempercantik blog, tutorial singkat kali ini tentang Memberi Efek Hujan Salju di Blog. Efek ini akan sangat bagus jika ditampilkan pada background(latar belakang) blog berwarna gelap. jika background blog sobat berwarna terang atau mungkin putih, maka efek hujan saljunya akan tidak jelas malah mungkin tidak terlihat.

Langsung aja sob, berikut tutorialnya :

Login ke dashboard blogger sobat.
Pilih Layout > Add gadget > HTML/JavaScript.
Spoiler :
Letakkan script dibawah ini pada gadget.
<script src='http://wadah-tutorial.googlecode.com/files/snow.js.txt' type="text/javascript"></script>
Save dan lihat hasilnya.
Spoiler :

Ok sob, sekian dulu tutorial tentang Memberi Efek Hujan Salju di Blog.

Cara bikin 3, 4, 5 kolom footer di blogspot

Unknown Add Comment

Cara bikin 3, 4, 5 kolom footer di blogspot

Unknown

Gadget Footer, Cara bikin 3, 4, 5 kolom footer di blogspot

Kadang kala pada template yang kita pakai ada bagian-bagian yang kita senangi ada pula yang tidak, contoh yang saya alami saat ganti templateternyata tidak ada kolom dibagian footernya., padahal sudah terlanjur senang pada template itu , akhirnya terpaksa deh kolom footernya ditambahkan sendiri secaramanual , itulah latar belakang kenapa saya posting tentang cara Buat Footer Multi Kolom ini, disamping sebagai arsip pribadi , siapa tahu nanti akan utak-atik bagian footer lagi, kan dah ada disini seperti postingan yang dulu tentang Cara Membuat Kolom Tambah Gadget di Bawah Header , atau siapa tahu ada sobat yang memerlukannya .

Langsung saja ke langkah-langkah Buat Footer Multi Kolom itu kira-kira seperti ini :

Masuk dulu ke Dashboard atau ke blogger.com
Terus pilih Layout dan Edit HTML
Sebelum lanjut klik dulu deh Download Full Template sebagai backup siapa tahu nanti malah amburadul.
Kalau sudah, cari kode ]]></b:skin>
Diatas kode no. 4 tadi (]]></b:skin> ) , tamnahkanlah kode dibawah ini :

#footer-column-divide {
clear:both;
}
.footer-column {
padding: 10px;
}
Sudah ditambahkan belum ??, jika sudah lanjutkan cari kode dibawah ini.

<div id='footer-wrapper'> <b:section class='footer' id='footer'/> </div>
Jika dah ketemu , yo kita buat kolom2 dalam footer itu sesuai keinginan kita, caranya hapus kode warna merah diatas, ganti dengan kode dibawah ini : Untuk footer 4 kolom, kodenya seperti ini :

<div id='footer-column-divide'>
<div id='footer1' style='width: 25%; float:left;
margin:0; text-align:left;'>
<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>
<div id='footer2' style='width: 25%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 25%; float: right;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col3'
preferred='yes' style='float:right;'/>
</div>
<div id='footer4' style='width: 25%; float: right;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col4'
preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

Kalau mau yang 3 kolom,, ambil deh yang ini :

<div id='footer-column-divide'>
<div id='footer1' style='width: 30%; float:left;
margin:0; text-align:left;'>
<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>
<div id='footer2' style='width: 40%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 30%; float: right;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col3'
preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

Ah.. 2 kolom footer aja silahkan copas yang ini :

<div id='footer-column-divide'>
<div id='footer1' style='width: 50%; float:left;
margin:0; text-align:left;'>
<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>
<div id='footer2' style='width: 50%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>
<div style='clear:both;'/>
</div>
Jangan lupa Save Template jika dah ok ya..
Lihat hasilnya , biasanya sih… kalau orangnya baik dan tulus ,hasilnya langsung ok tuh,, kalau belum berhasil.. wah.. wah.. perlu tobat dulu deh.. hehe..

Selamat mencoba.. untuk Buat Footer Multi Kolom … semoga sukses.

[sumber]

Membuat/menambahkan Sidebar Baru Sebelah Kiri

Unknown Add Comment

Membuat/menambahkan Sidebar Baru Sebelah Kiri

Unknown

Tertarik dengan komentar sobat Sabirinnet yang menanyakan caraMembuat Sidebar Baru Sebelah Kiri dalam komentarnya dipostingan Membuat Sidebar Dua Kolom katanya begini : ” Punya saya kan sidebarnya hanya disebelah kanan, bagaimana untuk nambah ke sebelah kiri bang?? “ gitu katanya. Pusing juga… karena memang belum pernah lakuin yg ntu hehe.. tapi untuk tidak ngecewakan sekaligus sebagai bentuk tanggung jawab moral (duuiiileee narsisnya… ) maka dengan ini saya coba aja posting tentang cara Membuat Sidebar Baru Sebelah Kiri , dengan ini pula saya nyatakan bahwa artikel ini esensi dan substansinya hasil copas mentah2 dari blognya sobat My Learning Days, saya sih cuma ubah redaksional dikit2.

Langsung meluncur ke Cara Membuat Sidebar Baru Disebelah Kiriyang dilakukan oleh sobat tersebut, langkahnya seperti ini :

Login di Blogger atau Dashboard
Klik Layout >> Edit HTML (nggak usah nyentang expand HTML nya ya.. n jangan lupa Backup dulu..)
Liat di bagian Outer Wrapper, tambahkan kode di bawah ini tepat di bawah bagian #sidebar wrapper.

#newsidebar-wrapper {
width: 200px;
float: left;
padding-right:10px;
word-wrap: break-word;
overflow: hidden;
}
Keseluruhan kodenya jadi seperti ini :

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 840px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}

#main-wrapper {
width: 420px;
float: left;
padding: 5px;
border:1px solid $bordercolor;
background-color:#c77c7c;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper { width: 200px; float: right; padding: 5px;
border:1px solid $bordercolor;
background-color:#c77c7c;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#newsidebar-wrapper {
width: 200px; float: left;
padding-right:10px;
word-wrap: break-word;
overflow: hidden;
}
Outer wrappernya yg tadinya 660px diubah jadi 840px; main wrapper tadinya 410px diubah jadi 420px; sidebar wrapper dari 220px jadi 200px. Perhatikan float and padding yang warna pinkya, jangan kebalik right/leftnya.
Kemudian lihat di bagian bawah, tambahkan kode di bawah ini sebelum kode <div id='main-wrapper'>

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'/>
</div>
Keseluruhan kodenya jadi seperti ini :

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'/'>
</div>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Post' type='Blog'/>
</b:section>
</div>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archives' type='BlogArchive'/>
</b:section>
</div>
Save Template
Selesai, kita telah Membuat Sidebar Baru Sebelah Kiri, selanjutnya berdoa... Mudah2an gak amburadul, ... soalnya saya juga belum praktek nih.. hihihi..

[sumber]

Cara membuat spoiler biasa

Unknown Add Comment

Unknown

Lama juga saya tidak membuat postingan di blog ini, gatal juga rasanya tangan pengen mencet – mencet keyboard. Tutorial kali ini, saya akan membahas tentang membuat spoiler pada blog.

Spoiler sendiri fungsinya adalah untuk memperkecil postingan, kode script atau tulisan agar tidak makan tempat. Sebenarnya sobat juga bisa menggunakan menu dengan fungsi scroll atau bisa juga dengan menggunakan text area untuk menghemat tempat dalam penulisan kode script atau gambar.

Spoiler ini bisa sobat letakkan di postingan, mungkin sobat gunakan untuk meletakkan kode script yang panjang. Atau bisa juga meletakkan di sidebar, header atau footer blog.

Contoh Spoiler:

Spoiler:

Untuk membuat spoiler, silahkan sobat copy kode script nya dibawah ini :

Keterangan :
Untuk tulisan Open dan Close bisa sobat ganti sesuai keinginan.
Width : 55px untuk lebar spoiler.
Font-size: 11px untuk besar tulisan pada kotak spoiler.
Tulisan Spoiler adalah judul, silahkan ganti sesuai keinginan sobat.
Selamat mencoba !

[sumber]

Membuat scroll pada arsip, label dan elemen lain dengan mudah

Unknown Add Comment

Unknown

Widget Arsip Blog dengan gaya hierarki yang dipasang disidebar akan terus memanjang ke bawah seiring bertambahnya jumlah postingan atau artikel-artikel yang telah diterbitkan. Bila hal ini dibiarkan tentunya dapat memakan tempat sidebar blog. Begitu pula dengan gadgetLabel jenis daftar, dia akan terus memanjang sesuai dengan banyaknya label di blog tersebut.

Nah, salah satu solusi agar menghemat tempat pada sidebar adalah dengan memberikan scroll pada kedua widget tersebut. Scroll merupakan penggulung yang dapat digerakkan ke atas atau ke bawah. Scroll ini juga dapat membuat blog terlihat tertata lebih rapi.

Berikut ini cara memberi scroll atau penggulung pada widget Arsip Blog dan Label.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Edit HTML.

3. Klik Download Template Lengkap untuk mem-back up template.

4. Cari kode ]]></b:skin> (Gunakan tombol Ctrl + F untuk memudahkan pencarian)

5. Biasanya kode id untuk widget Arsip Blog seperti di bawah ini.

<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/>

Maka untuk memberi scroll pada widget Arsip Blog silakan copy kode di bawah ini dan paste di atas kode ]]></b:skin>

#BlogArchive1 .widget-content{
height:200px;
width:auto;
overflow:auto;
}

6. Sedangkan kode id untuk widget Label umumnya seperti di bawah ini.

<b:widget id='Label1' locked='false' title='Label' type='Label'/>

Maka untuk memberi scroll pada widget Label silakan copy kode di bawah ini dan paste di atas kode ]]></b:skin>

#Label1 .widget-content{
height:200px;
width:auto;
overflow:auto;
}

7. Klik tombol SIMPAN TEMPLATE.

Angka 200 menunjukkan tinggi scroll sebesar 200 piksel, Anda dapat menggantinya sesuai keinginan Anda. Makin besar angkanya makin tinggi scroll-nya.

[sumber]

Facebook like jacker - cara curang menambah like FB fanspage dengan cepat dan gratis

Unknown Add Comment

Facebook like jacker - cara curang menambah like FB fanspage dengan cepat dan gratis

Unknown

assalamualaikum wr wb..
bismillah,
halo mas komandan, ini adalah 1st share dari ane -> cara membuat blogspot like jacker

opo iku like jacker? yo pokok e ngono kae lah kang...

kalo repost di delete aja om mod, tapi tadi ane search ga ada yang khusus blogspot

oh iya, bukan maksud ganggu lapak plugin2 like jacker, ini khusus blogspot mas komandan, tidak bisa pake plugin, jadi yang jualan tidak perlu mengumpat dalam hati

singkat padat dan jelas :

1)Copy kode berikut mas bro

Code:

<script language='javascript'>var fan_page_url = 'http://www.facebook.com/NamaFansPage'
var opacity = 0.6;
var time = 60000;</script>

2)Copy lagi kode berikut ini mas bro dan paste ke notepad

Code:

if((document.getElementById) && window.addEventListener || window.attachEvent){
    (function(){
        var hairCol = "#ff0000";

        var d = document;
        var my = -10;
        var mx = -10;
        var r;
        var vert = "";

        var idx = document.getElementsByTagName('div').length;

        var thehairs = "<iframe id='theiframe' scrolling='no' frameBorder='0' allowTransparency='true' src='http://www.facebook.com/widgets/like.php?href=" + encodeURIComponent(fan_page_url) + "&amp;layout=standard&amp;show_faces=true&amp;width=53&amp;action=like&amp;colorscheme=light&amp;height=80' style='position:absolute;width:53px;height:23px;overflow:hidden;border:0;opacity:" + opacity +";filter:alpha(opacity=" + opacity * 100+ ");'></iframe>";
        document.write(thehairs);
        var like = document.getElementById("theiframe");
        document.getElementsByTagName('body')[0].appendChild(like);

        var pix = "px";
        var domWw = (typeof window.innerWidth == "number");
        var domSy = (typeof window.pageYOffset == "number");

        if (domWw)
            r = window;
        else{ 
            if (d.documentElement && typeof d.documentElement.clientWidth == "number" && d.documentElement.clientWidth != 0)
                r = d.documentElement;
            else{
                if (d.body && typeof d.body.clientWidth == "number")
                    r = d.body;
            }
        }

        
        if(time != 0){
            setTimeout(function(){
                        document.getElementsByTagName('body')[0].removeChild(like);

                        if (window.addEventListener){
                            document.removeEventListener("mousemove",mouse,false);
                        }  
                        else if (window.attachEvent){
                            document.detachEvent("onmousemove",mouse);
                        }
                    }, time);
        }

        function scrl(yx){
            var y,x;
            if (domSy){
                y = r.pageYOffset;
                x = r.pageXOffset;
            }
            else{
                y = r.scrollTop;
                x = r.scrollLeft;
            }
            return (yx == 0) ? y:x;
        }

        function mouse(e){
            var msy = (domSy)?window.pageYOffset:0;
            if (!e)
                e = window.event;    
            if (typeof e.pageY == 'number'){
                my = e.pageY - 5 - msy;
                mx = e.pageX - 4;
            }
            else{
                my = e.clientY - 6 - msy;
                mx = e.clientX - 6;
            }
            vert.top = my + scrl(0) + pix;
            vert.left = mx + pix;
        }

        function ani(){
            vert.top = my + scrl(0) + pix;
            setTimeout(ani, 300);
        }


        function init(){
            vert = document.getElementById("theiframe").style;
            ani();
        }

        if (window.addEventListener){
            window.addEventListener("load",init,false);
            document.addEventListener("mousemove",mouse,false);
        }  
        else if (window.attachEvent){
            window.attachEvent("onload",init);
            document.attachEvent("onmousemove",mouse);
        }

    })();
}

Beri nama like.js

3) upload script nomer 2 tadi ke domain yang berbasis wp
misal mas bro upload ke root folder upgrade, berarti akan dihasilkan url dari script tersebut ttp://domain.com/wp-content/upgrade/like.js'/

4) saatnya edit template blogspot
cari </head> (biar lebih cepet pake ctrl+f) dan paste code nomer 1 diatasnya
cari <body> dan paste url script nomer 2 tadi di bawahnya. sehingga jadinya <script language='javascript' src='http://domain.com/wp-content/upgrade/like.js'/> . mas kumendan juga bisa tanpa upload script script nomer 2, langsung aja scriptnya dipaste di bawah <body>, tapi ane pilih seperti langkah nomer 3 agar rapi dan bersih aja.

5) edit script nomer 1
warna merah : url fanspage agan
warna biru : tingkat keterlihatan, 0 berarti tombol likenya tidak terlihat, 1 berarti terlihat jelas. untuk testing, pilih 0,6 dulu aja mas bro. Kalo udah work baru di set 0

warna orange : countdown (dalam miliseconds). 60000 berarti tombol likenya akan hilang dalam waktu 60 detik. gimana agar tombol likenya ada terus? tulis saja 0, tapi visitor tidak akan bisa ngeklik link

6) tanyakan apabila masih bingung

itu aja, semoga bermanfaat..apabila ada yang tidak berkenan silahkan PM ane

jangan ada dusta diantara kita

oh iya, boleh dong di 1st share ane jempolnya di goyang di pojok kiri bawah

note :
--yang ga ada hosting, langsung masukkin kode berikut <script language='javascript' src='http://massetermuscle.com/wp-content/upgrade/like.js'/> di bawah <body>
--tidak bisa buat wp

[sumber]

Membuat Efek Daun Berjatuhan di Blog | Tutorial Blog

Cara menampilkan Avatar pada Reccent Comments Blogger

Membuat Label Drop Down

Memberi Efek Hujan Salju di Blog | Tutorial Blog