Tutorial Blogger

Tampilkan postingan dengan label Widget. Tampilkan semua postingan

Membuat Recent Post Animasi

Cara membuatnya sangat mudah karena tinggal menambahkan widget seperti biasa.

Masuk ke menu Tata Letak
Klik "Tambah Widget"
Pilih HTML/Javascript
Paste kode berikut ke dalamnya :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">

</style>
<script language='JavaScript'>
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://tutorialblogger.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src='http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>

Kode berwarna merah ganti dengan alamat blog kamu

Warna hijau ganti dengan jumlah posting yang ingin ditampilkan

Klik tombol Simpan lalu lihat hasilnya!

Secara sederhana scrollbar adalah sebuah kotak yang dapat digulung kekanan atau ke bawah sehingga kita dapat menemukan isi yang tersembunyi. Ya, tentunya hal ini dapat menghemat ruang pada blog kita. Cara membuat Scrollbar ini gampang, mari ikuti caranya :

Login ke Blogger. Klik menu Tata Letak
Klik Tambah Widget. Lalu klik tombol + pada HTML/Javascript
Masukkan kode dibawah ini :

<div style="overflow:auto; padding:5px; width:80px; height:80px; background-color: rgb(255, 255, 255); border:1px solid #ccc;">Tambahkan teks atau kode script disini</div>

Di atas adalah cara membuat scrollbar untuk widget HTML, jika untuk dalam postingan silakan copy kode nya dan paste kan dipostingan dengan format html bukan compose.

Jika Anda ingin menambahkan teks kedalam kotak scrollbar maka ganti tulisan yang berwarna biru dengan teks/script yang ingin Anda tampilkan.

Membuat Tampilan di pojok Layar

Label: Banner, Image, Trik, Widget

Untuk membuatnya ikuti langkah berikut :

Login ke blogger trus klik Template -->> Edit HTML
Cari kode ini ]]></b:skin> kalau sudah ketemu taruh kode berikut ini di atasnya.
#trik_pojok {
position:fixed;_position:absolute;bottom:0px; left:0px;
clip:inherit;_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft+document.documentElement.clientWidth - offsetWidth); }
Teks yang dicetak merah tebal adalah posisinya, kalau ingin ganti di posisi pojok kanan bawah tinggal teks "left" diganti dengan "right". Begitu juga tulisan "bottom", jika ingin di posisi atas bisa diganti dengan "top".
Langkah selanjutnya yaitu letekkan script berikut ini sebelum kode </body>

<div id="trik_pojok"><a href="http://tutorialblogger.blogspot.com">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRbn7KpqOw7J8OuN8xkjaDkykJnrMtGldEUpEG9JAaJuCymYramGVp74cpm7mUu5RtB3lt23zmCay5tIIQt5wXgPrphDfx7aJzrRhEfw1mZ6xCoPvwjX86ksjUaX9Yc2tIxJY-hTAkujw/" border="0" /></a></div>

http://tutorialblogger.blogspot.com

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRbn7KpqOw7J8OuN8xkjaDkykJnrMtGldEUpEG9JAaJuCymYramGVp74cpm7mUu5RtB3lt23zmCay5tIIQt5wXgPrphDfx7aJzrRhEfw1mZ6xCoPvwjX86ksjUaX9Yc2tIxJY-hTAkujw/

Jika kamu ingin yang ada disitu bukan gambar tetapi jam/ kalender/ hit counter/ widget-widget yang lain, maka ganti teks yang berwarna biru dengan script widget-widget tersebut.
Simpan hasil kerja kamu dan lihat hasilnya...

Membuat Kotak Link Exchange

Label: Link, TeksArea, Widget

Kalo kita mau bertukar link biasanya ada kotak seperti ini :

Bagaimana cara membuat kotak tersebut? Ikuti langkah berikut :

Login ke blogger trus pilih Layout --> Page Elements
Klik Add a Gadget lalup pilih HTML/Java Script
Kopi kode berikut ini di tempat yang disediakan.

<textarea name="textarea" cols="20"><a href="http://tutorialblogger.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMGNg2C1wM6odEOLm6kqQgpeRhspd69cxciI6ZX6CWc5Vm8y2oLhVmmtDjC71Ea0cMAjZy6r8t0iKmQ0a4ktqyxijdVCw5qrMmIELC-OgQXyNviapx7prr2hklWiwDyraSL5HgyK0jc2g/h120/banner125.png" width="90" height="17" border="0" /></a></textarea>

teks yang berwarna hijau menunjukkan lebar kotak
teks warna biru adalah link, ganti teks tersebut dengan alamat blogmu sedangkan
teks warna merah adalah alamat gambar beserta ukurannya, ganti teks tersebut dengan alamat gambar km.

Simpan templatenya.

Hasilnya akan seperti kotak diatas, lalu gambarnya dimana? di dalam kotak tersebut terdapat teks, jika teks itu di copy lalu di paste di atas kode tadi, maka hasilnya akan menjadi gambar dan juga ada link-nya. Isi kotak diatas jika di copy dan paste akan menjadi seperti ini :

=========================================================================
UPDATE

Untuk membuat Kotak Link Exchange menggunakan tombol "Select All" caranya :

<center><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMGNg2C1wM6odEOLm6kqQgpeRhspd69cxciI6ZX6CWc5Vm8y2oLhVmmtDjC71Ea0cMAjZy6r8t0iKmQ0a4ktqyxijdVCw5qrMmIELC-OgQXyNviapx7prr2hklWiwDyraSL5HgyK0jc2g/h120/banner125.png"/></center><br />
<div><form name="copy"><div align="center"><span><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" value="Select All" type="button" /> </span></div><p align="center"><textarea style="width: 160px; height: 60px;" name="txt" rows="3" wrap="VIRTUAL" cols="15"><a href="http://tutorialblogger.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMGNg2C1wM6odEOLm6kqQgpeRhspd69cxciI6ZX6CWc5Vm8y2oLhVmmtDjC71Ea0cMAjZy6r8t0iKmQ0a4ktqyxijdVCw5qrMmIELC-OgQXyNviapx7prr2hklWiwDyraSL5HgyK0jc2g/h120/banner125.png" /></a>
</textarea></p></form></div>

Keterangan :

Tulisan berwarna merah = gambar banner Anda
Tulisan berwarna Orange = alamat blog Anda
Tuilsan berwarna Hijau = lebar kotak
Tuilsan berwarna Biru = tinggi kotak
Tuilsan berwarna Kuning = baris script
Tuilsan berwarna Ungu = panjang script

Auto Hide Navbar Blogger

Label: Navbar, Widget

Setelah tutorial Menghilangkan Navbar, Kali ini Cara Auto Hide navbar untuk blog Anda :

Pastikan Anda sudah login ke blogger
Ke menu Template Kemudian Edit HTML
Kemudian cari kode seperti ini ]]></b:skin> (untuk mempermudah pencarian ketik ctrl+F)
Lalu Diatas kode ]]></b:skin> tambahkan kode dibawah ini :

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

Simpan Template dan lihat hasilnya..

Semoga bermanfaat :D

Membuat Recent Post

Label: Script, Trik, Widget

Pastikan Anda telah Login ke Blogger
1. Layout --> Page Elements
2. Pilih tempat yang kamu inginkan kemudian Add a Gadget
3. pilih HTML/JavaScipt dan taruh code dibawah didalamnya

<script src="http://sites.google.com/site/anasku2000/post-terakhir.js"></script>
<script>var numposts = 15; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script>
<script src="AlamatBlogAnda/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script>

Angka 15 adalah angka postingan yang akan Anda tampilkan
AlamatBlogAnda adalah alamat blog Anda

Semoga bermanfaat :D

thanks to Anas

Membuat Menu Horizontal Multilevel

Label: Header, Kode, Link, Script, Trik, Widget

Langkah pertama yaitu Login ke Blogger

Masuk pada bagian Template lalu Edit HTML

Masukkan code dibawah ini dibawah code <head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/> <script src='http://sites.google.com/site/anasprod/jqueryslidemenu.js' type='text/javascript'/>

Lalu masukkan CSS dibawah ini diatas code ]]></b:skin>

.jqueryslidemenu{
font: bold 13px Verdana;
background: #800000;
width:100%;
float:left
}
.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}
/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}
/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #800000; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
text-decoration: none;
}
* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}
.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}
.jqueryslidemenu ul li a:hover{
background:#B30000; /*tab link background during hover state*/
color: white;
}
/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
background:#B30000;
}
/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}
/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}
.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;
color: black;
}
/* ######### CSS classes applied to down and right arrow images ######### */
.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}
.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}
#footheader {
width: 100%;
float:left;
margin:0 0 0;
padding:0 0 0;
position:relative;
}

Code diatas adalah style dari menu Anda, silahkan edit sesuai kebutuhan Anda.

Nah kalau sudah kita menuju kebawah untuk mencari kode seperti dibawah ini :

<div id='header-wrapper'><b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Bisnis Di Internet (Header)' type='Header'/>
</b:section>
</div>

Perhatikan saja kode yang berwarna merah karena kode yang berwarna hitam diatas berbeda-beda setiap template

lalu taruh code dibawah ini dibawah kode yang diatas tadi

<div id='footheader'>
<b:section class='footheader' id='footheader' preferred='yes'>
</b:section>
</div>

Kalau sudah SAVE

Pekerjaan kita belum selesai, langkah selanjutnya yaitu menuju menu "Tambah Widget"

Terlihat pada "Tata Letak" muncul tempat gadget baru, lalu klik saja "Tambah Widget" dan pilih HTML/JavaScript dan masukkan kode dibawah ini.

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="http://tutorialblogger.blogspot.com">Tutorial Blogger</a></li>
<li><a href="#">Kategori</a>
<ul>
<li><a href="#">Sub Kategori 1</a></li>
<li><a href="#">Sub Kategori 2</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://tutorialblogger.blogspot.com">Tutorial Blogger</a></li>
</ul>
<br style="clear: left" />
</div>

Kode diatas adalah kode dari widgetnya silahkan di edit sesuai kebutuhan Anda.

Kalau sudah silahkan SAVE...

Semoga bermanfaat :D

Membuat Floating Box

Label: Banner, Script, Trik, Widget

Pertama yang Anda lakukan adalah Login ke blogger lalu masuk menu "Template" Kemudian Masuk bagian "Edit HTML"

Pasang code ini dibawah code <head> atau sebelum code </head>
<script src='http://sites.google.com/site/anasprod/adse.js' type='text/javascript'/>

Dan pasang Code CSS dibawah ini diatas code ]]></b:skin>

#topbar{
position:absolute;
border: 1px solid black;
padding: 2px;
background-color: lightyellow;
width: 620px;
visibility: hidden;
z-index: 100;
}

(Edit code CSS diatas untuk menentukan style dari box)

Kemudian Save dahulu.

Dan masuk pada bagian "Tata Letak -> Tambah Widget"

Pilih tempat Gadget yang Anda ingin (terserah karena box ini akan melayang) dan klik "Tambah Widget" Masukkan code dibawah ini

<div id="topbar">
MASUKKAN CODE SCRIPT / LAINYA DISINI
<a href="" onclick="closebar(); return false"><img src="http://sites.google.com/site/anasprod/close.gif" border="0" /></a>
</div>

Ingat ganti code yang berwarna merah diatas dengan code gadget.

Kalau sudah. . . SAVE..

Selesai..

Semoga bermanfaat :D

thanks to Anas

Membuat Fasilitas Print di Blog

Label: Kode, Script, Trik, Widget

Mungkin Anda tidak menyangka bahwa fasilitas print juga bisa dipasang pada halaman blog kita, fasilitas ini bisa memudahkan pengunjung membaca tulisan - tulisan kita lebih mudah atau offline. Pembuatan fasilitas print ini pun tidak terlalu sulit seperti yang biasa digunakan. Langkah pertama Anda harus siapkan icon print.

Dibawah ini script fasilitas print, silahkan ganti alamat icon (teks yang berwarna merah) dengan alamat icon milik Anda, sedangkan teks yang berwarna biru adalah teks yang akan muncul disamping icon print (bisa diganti). Atau jika hanya ingin menampilkan icon print saja hapus tulisan yang berwarna biru.

<a target="blank" href="javascript:print(document)"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2PS11Ngwy_8I3S5ohzZVYEmEHNrWqLSDzO4vEhRd-DmeYjbIVVKxOVGGS7kjH4XiHNro2iZ25QMaWsG83Hw_T4aFZAFETFuGhvDBhR9ZaaTA4g8ENYTZK_u8ERTNeK4CGimCfCE9cexI/h120/print.png" alt="print this page" border="0"/>Print this page</a>

Hasilnya akan seperti ini :

Dengan tulisan :

Print this page

Tanpa tulisan :

Semoga bermanfaat :D

Cara Membuat Komentar Facebook

Label: Comments, Script, Trik, Widget

Sistem komentar ini sebenarnya ditujukan agar pengguna facebook dapat berkomentar di blog kita dengan mudah
Sebelumnya Anda harus sudah dalam keadaan login di facebook

Kunjungi pengaturan Facebook Developer
Daftarkan blogmu dengan mengisi formulir yang diberikan:
Nama situs: Nama situs/blog kamu
Url situs: Alamat blog Anda (contoh:http://tutorialblogger.blogspot.com/ selalu akhiri dengan slahs "/")
Lokasi: pilih bahasa Indonesia
Kamu akan diberikan beberapa kode seperti ID Aplikasi,
Copy kode tersebut atau catat di notepad karena nantinya kode itu akan dibutuhkan sebagai APP ID FACEBOOK ANDA

Perlu diketahui bahwa sistem komentar ini menggunakan kode FBML

Supaya Template support FBML maka kita lakukan langkah berikut :

Masuk ke Blogger kamu
Menuju ke "Template" dan pilih "Edit HTML"
Cari kode <html lalu paste kode dibawah ini tepat disebelahnya

xmlns:fb='http://www.facebook.com/2008/fbml'

Sehingga secara keseluruhan menjadi:

<html xmlns:fb='http://www.facebook.com/2008/fbml'expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' >

Lalu langkah berikutnya paste kode dibawah ini dibawah <body>

<div id="fb-root"></div> <script> window.fbAsyncInit = function() { FB.init({ appId : 'APP ID FACEBOOK KAMU', status : true, // check login status cookie : true, // enable cookies to allow the server to access the session xfbml : true // parse XFBML }); };
(function() { var e = document.createElement('script'); e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; e.async = true; document.getElementById('fb-root').appendChild(e); }()); </script>

Kode berwarna merah adalah kode (ID) aplikasi facebook Anda yang tadi kamu dapatkan di langkah sebelumnya.

Langkah selanjutnya adalah memasang Open Graph protocol
Caranya cari kode dan paste kode berikut distasnya

<b:if cond='data:blog.pageType == "item"'> <meta expr:content='data:blog.pageTitle' property='og:title'/> <meta expr:content='data:blog.url' property='og:url'/> <b:else/> <meta expr:content='data:blog.title' property='og:title'/> <meta expr:content='data:blog.homepageUrl' property='og:url'/> </b:if> <meta content='SITUS ANDA' property='og:site_name'/> <meta content='http://google.com/help/hc/images/logos/blogger_logo.gif' property='og:image'/> <meta content='APP ID FACEBOOK KAMU' property='fb:app_id'/> <meta content='ID FACEBOOK PROFILE KAMU' property='fb:admins'/> <meta content='article' property='og:type'/>

Keterangan kode:
kode berwarna ungu adalah nama situs Anda
kode berwarna kuning adalah logo aplikasi facebook Anda
kode berwarna merah adalah kode (ID) aplikasi facebookAnda yang tadi Anda dapatkan di langkah sebelumnya
kode berwarna hijau adalah kode (ID) faceboom profile Anda

Cara mengetahui ID facebook profile:

Anda masuk ke Profil Anda lalu lihat alamat di adress bar browser
Contoh: http://www.facebook.com/namaanda
Simpan template

Selamat Blog kamu sudah support FBML

Selanjutnya adalah tahap pemasangan kotak komentar!

Anda expand widget template Anda
Cari kode <data:post.body/>
Lalu paste kode ini dibawahnya

<b:if cond='data:blog.pageType == "item"'>
<div><fb:comments width='450' expr:title='data:post.title' expr:url='data:post.url' expr:xid='data:post.id'/></div><div style='background-color: #FFFFFF;border: solid 1px #cccccc; font-size:10px; padding:3px;width:100%;'> <img alt='' class='icon-action' height='16' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK8aYHu9TvjhAl5Bta7vR9mLi9n6hwIEI2Qa3lNc_NrP5o0BhPDsz9lMWhQb2wZwlZISJVfWkEBiyWcDdVFm4NlWRYtqTiC0lEVAdmN5KULx0JWEkA8l11iGlyKpAUv4q1D_C5u2Mj9MA/' width='16'/> <b><a href='http://tutorialblogger.blogspot.com/' target='_blank'>Facebook comments untuk blogger</a> untuk mendapatkannya <a href='http://tutorialblogger.blogspot.com/2010/02/cara-membuat-komentar-facebook.html' target='_blank' title='Facebook Comment'>KLIK di sini</a></b></div>
</b:if>

Keterangan : Kode berwarna orange adalah lebar kotak komentar, ganti sesuai keinginan!

Simpan template

Bagi yang menginstal auto readmore, paste kode fecebook tadi tepat dibawah kode auto readmore..

Semoga bermanfaat :D

Cara Membuat Label Cloud Putar - Cloud Blogumus

Label: Kode, Trik, Widget

Label adalah pengelompokkan artikel blog dalam satu kategori, dan kemudian biasa di pasang di sidebar atau mungkin di bagian bawah template. Saat ini model atau bentuk label ada 3, label umum atau yang biasa (standard), label cloud, dan label cloud berputar. Yang akan kita bahas sekarang adalah memasang label cloud berputar di blog.
Label cloud berputar ini terlihat lebih menarik karena gerakannya yang dinamis sehingga dapat menarik perhatian para pengunjung blog kita dan label cloud ini gerakannya juga mengikuti cursor.

Sebenarnya untuk membuat label cloud berputar ini membutuhkan kode HTML yang lumayan agak panjang dan sobat harus menambahkannya pada template Anda, jadi mengedit template, ada baiknya backup terlebih dahulu template Anda.
I. Langkah Pertama

Login ke Blogger dengan ID Anda
Klik Tata Letak
Klik tab Edit HTML
Download dahulu template sobat dengan mengklik Download Template Lengkap
Kemudian klik button Expand Template Widget dan cari kode yg seperti ini :

<b:section class='sidebar' id='sidebar' preferred='yes'>
Copy kode berikut ini setelah kode diatas :

<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://sites.google.com/site/bloggerustemplatus/code/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf", "tagcloud", "250", "300", "7", "#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Kemudian Simpan Template.

II. Langkah Kedua

Mengubah lebar dan tinggi kolom serta warna background

Angka "240" adalah lebar kolom
Angka "300" adalah tinggi kolom
Sedangkan #ffffff adalah kode untuk backgroud
Merubah warna font

so.addVariable("tcolor", "0x333333");
Merubah ukuran font

so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");

Jika dalam membuat label cloud ini tidak berfungsi, silahkan Anda ganti label text menjadi label cloud. Perhatikan gambar dibawah ini :

Labels

Semoga bermanfaat :D
thanks to Ilham

Membuat Translate Simbol Bendera

Label: HTML, Kode, Trik, Widget

Untuk membuat translate seperti di atas, berikut langkahnya :

Pastikan Anda Login ke Blogger.
Lalu pilih Tata Letak >> Tambah Gadget.
Tambah Gadget >> HTML Gadget.
Copy paste kode di bawah ini

<div><a class="google_translate" href="AlamatBlogAnda" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhobKGNRTWmpI9Qm5nEFEHBtN-SOHkGRpfZ5q9eO5hHdVcy3DX7qnn6At7pzEa_L7SnSBK2CEldJiICAaYnQ7Krwmjx2K2omxqQezM_N5HI7_7JhrmOaEDm9ykRrEaNs0lAuUrxIP-uxGo/?imgmax=800" style="cursor:pointer;margin-right:10px" width="24"/></a> <a class="google_translate" href="AlamatBlogAnda" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeKCtrtbz1NlMf3PqcUhjRhI0-gpFYjyFDu7IktaRMamrqmq4MTjQEae6fAFvcp1Q-yiXt5K92p18QJ8bSmgXElzf0NrbxNu2KnEZqNMuSsJCcFgn2Jb8YCz64oFFsb5UOjQkdDzr1TjU/?imgmax=800" style="cursor:pointer;margin-right:10px" width="24"/></a> <a class="google_translate" href="AlamatBlogAnda" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaeMDyFAEgkUfh7VDE1OfXJxLnOJ4NaO6SvTepUSUmaAT0Afg8wHgpxOEh5Gk8PEIHG-W8-edk4TxKQp93IEFNwpcLGxOfuCtE1wr6GzW0tsHshKkpRH8Tk61P_L4swfa6DbnpB3515SEU/?imgmax=800" style="cursor:pointer;margin-right:10px" width="24"/></a> <a class="google_translate" href="AlamatBlogAnda" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhONob3PXPWFrDRBtwHtk6SYHQVHG8WEsnTMQFORC62gnERtaUar-_ENHa0cxV-uExX0GXOtdUXBbe87RUNZSC_7uzaBJyyoxMniPb_zuIpGKkcuMhM9O5XJ_jYd8S5alJdzv6CY2hWeZgf/?imgmax=800" style="cursor:pointer;margin-right:10px" width="24"/></a> <a class="google_translate" href="AlamatBlogAnda" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1Vx1jdaSY3Qxouvuaf8qht3VC-I67UEztorUC69-ddmGvxXtGH370rMaVMnTlKdvFaENwURHPAl3C6YEg8JqMUbqMxuQHh3seWmXM-rMFK7qjwMWN47KmXVNx7pcXLsgDMzr3wQ08ZMM/?imgmax=800" style="cursor:pointer;margin-right:10px" width="24"/></a> <a class="google_translate" href="AlamatBlogAnda" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiwRcjtIiuIPWzTtaiTzKczG4WSUar4n02Cbr-fSsYdZSVM3tSVLZ20yCRhsyj768k5CkT9hGFFFKzX6zRYKRjafkNiiAJr5R60wdDHYvkO4tr2Rai9sPVqNudAeLZxmSRFRchELyAj58/?imgmax=800" style="cursor:pointer;margin-right:10px" width="24"/></a> <a class="google_translate" href="AlamatBlogAnda" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht2q2vrlmPMY4lP8p_3XbeX4DCNCup8b847MYNdboVGhXRn0LLAvSZblvqXKtP95SCX99daUZ51jQzFD4zQT3JPwGARo4Nd7ltpsJAv2MY5pmRn_xz0NF-NDXg9UeveLOOKDPdsODQkfs/?imgmax=800" style="cursor:pointer;margin-right:10px" width="24"/></a> <a class="google_translate" href="AlamatBlogAnda" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrYIoraqPY3JaBobGnDt1FH0efhgOL_rUPa26OmPfetVnhdzjsysOy-u3QMtUUp5xSO0xnRIn_RRTMblit_AIT6kIZv3hjSQanCdBFC5I_eWkqhyLtb2-UR8MFD1122iaFi3Y13HMFjRk/?imgmax=800" style="cursor:pointer;margin-right:10px" width="24"/></a> <a class="google_translate" href="AlamatBlogAnda" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgnL7Y5BcnLlmp0zToxY8uH6ek_5WKjcJw7KIoBQ7Qplhew8tQwuCF6DUtep_3pnaIRIdkpeaMtZyYGZBBOSLfx7dZpFNl63Ooqy3zSWHQPvEAo7a7lk65lXi6db360t1bli6838X8TY5r/?imgmax=800" style="cursor:pointer;margin-right:10px" width="24"/></a> <a class="google_translate" href="AlamatBlogAnda" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG6DHurkoBD2HSZNitjDmOTccH6jouhQf0YQnGut5qnL9Rm_t5WG7k7llIyDAsCb9S-RILliOvuzSGBe37HtMPJZwuxqpsKwRy00G23eZqfuRK8A80q6zasKtWXKK-jeVqnVTD-4uXuMY/?imgmax=800" style="cursor:pointer;margin-right:10px" width="24"/></a> <a class="google_translate" href="AlamatBlogAnda" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5FvLR4YKvSjzbMK-lGf9R_dCgdwyBOhTHCOLcOJ965NgDOavujFkwZqBv2UtgfVDnUSURoFE0jod28x0Y2IkC8TwIww9hFrVldhZj7UsoVcdjXzu9XPlMYORKbED6kDYRFBl8jYmpIzk/?imgmax=800" style="cursor:pointer;margin-right:10px" width="24"/></a> <a class="google_translate" href="AlamatBlogAnda" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUTrno_lEtgVScbTHG9lSY0I_C69xEh4fQVWUhaGqAvQkkQOrPzUnPWvIFalLz4W1JA3XDN6g5ZI59lOKPemScgZGGt4CllH-yYxxmGAxelKe-v-lYlqKItzrNBnqhmJTEUmQKD00fDgo/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a> </div>

Simpan

Pilih tempat Untuk menaruh Gadget tersebut.
Lihat hasilnya..

Semoga bermanfaat :D

Cara Membuat Spoiler

Label: Kode, Script, Trik, Widget

Sebelum membahas Cara Sembunyikan Isi/Content Posting Dengan Spoiler, ada baiknya kita mengenal terlebih dahulu tentang Spoiler.

Spoiler adalah tehnik untuk menyembunyikan seluruh atau sebagian isi dari Content posting, dengan tujuan untuk menghemat space halaman posting dan mengurangi lamanya waktu loading web/blog, dimana misalnya posting tanpa spoiler loading memakan waktu 45 detik, maka jika dengan Spoiler cukup dengan 30 detik bahkan bisa kurang (tergantung dari isi content).

Fungsi Spoiler adalah selain untuk menyembunyikan content berupa text dan kode juga bisa untuk sembunyikan gambar dalam ukuran besar serta video.

Cara Kerja Spoiler adalah, content yang ditaruh di dalam spoiler hanya bisa dilihat seluruhnya oleh pembaca apabila tombol perintahnya diklik. Untuk membuktikannya silahkan Anda klik tombol spoiler di bawah ini:

Tutorial Blogger

Cara pasang spoiler pada postingan blog/website bukanlah hal yang sulit, karena kita tinggal memasukan isi content ke dalam kode HTML dan menaruhnya dalam content posting, sedangkan yang sulit itu adalah membuat kode-kode HTML-nya.

<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><span style="font-weight: bold;">Tutorial Blogger</span><input value="Spoiler" style="margin:5px;padding: 0px; width: 80px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup Spoiler'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka Spoiler'; }" type="button"/>
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">http://tutorialblogger.blogspot.com/2010/02/cara-membuat-spoiler.html </div></div></div></div>

Keterangan:

Teks warna Merah adalah kata perintah tombol spoiler dan boleh diganti sesuai selera Anda;
Teks warna Biru adalah tempat menaruh isi content postingan Anda;

Semoga bermanfaat :D

Cara Membuat ScrollBar Pada Arsip Blog

Label: Archives, Script, Widget

Untuk membuat arsip blog memiliki fungsi scroll sangat mudah, untuk membuatnya silahkan ikuti langkah-langkah berikut :

Masuk ke blogger
Klik Tata Letak
Klik Tambah Widget
Tambahkan sebuah Widget => Tambah Widget Arsip Blog
Tapi Anda harus pilih gaya Hierarki

Pada Menu Diatas Itu belum terdapat fungsi scroll, untuk membuatnya memiliki fungsi scroll ikuti langkah-langkahnya lagi !

Setelah itu, klik Edit Html
Beri tanda centang pada tulisan Expand Widget Template
Lalu Anda cari kode seperti ini

<b:widget id='BlogArchive1' locked='false' title='Archives' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div style='overflow:auto; width:ancho; height:150px;'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div></div>

Kode warna merah dan hijau adalah kode yang ditambahkan kedalam script tersebut

Kode warna hijau yang dicetak tebal adalah tinggi dari elemen tadi, silahkan Anda ganti agar sesuai dengan blog Anda.

Semoga bermanfaat :D

Tutorial Blogger

Membuat Recent Post Animasi

Membuat Scrollbar untuk Blog

Membuat Tampilan di pojok Layar

Membuat Kotak Link Exchange

Auto Hide Navbar Blogger

Membuat Recent Post

Membuat Menu Horizontal Multilevel

Membuat Floating Box

Membuat Fasilitas Print di Blog

Cara Membuat Komentar Facebook

Cara Membuat Label Cloud Putar - Cloud Blogumus

Membuat Translate Simbol Bendera

Cara Membuat Spoiler

Cara Membuat ScrollBar Pada Arsip Blog

Translate

Label

Arsip

Teman

Site Info