Tampilkan postingan dengan label Trik. Tampilkan semua postingan
Tampilkan postingan dengan label Trik. Tampilkan semua postingan

Script No Klik Kanan dan CoPas

1

Bookmark and Share

Kali ini Tutorial Blogger akan memberikan trik "Anti CoPas dan Klik Kanan"

Ini script untuk "Anti CopAs", diletakkan bawah kode <head>
<script type="text/JavaScript">
//courtesy of tutorialblogger.blogspot.com
function killCopy(e) {
return false
}
function reEnable() {
return true
}
document.onselectstart=new Function ("return false")
if (window.sidebar) {
document.onmousedown=killCopy
document.onclick=reEnable
}
</script>

sedangkan untuk "Anti klik kanan"

<script language="JavaScript">
<!--
//Disable right mouse click Script
//By Tutorial Blogger ( elevenjune90@gmail.com This e-mail address is being protected from spambots. You need JavaScript enabled to view it ) w/ mods by DynamicDrive
//For full source code, visit http://www.dynamicdrive.com
var message="Sorry, you can't Right Click!!!";
///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}
function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}
if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}
document.oncontextmenu=new Function("alert(message);return false")
// -->
</script>

NB: script untuk blogger, bisa langsung ditaruh di tambah gadget, untuk yang laen di taruh di bawah kode <head>.

Read More >>

Cara Memasang File Flash

0

Bookmark and Share
Untuk memasang flash ke dalam blog cukuplah mudah. Yang diperlukan yaitu file flash yang biasanya ber-ekstensi .swf lalu upload file tersebut ke hosting. File animasi flash tersebut bisa dijadikan hiasan pada blog atau bisa juga dijadikan hiasan di header sehingga membuat blog menjadi lebih animatif. Untuk memasang flash pada blog caranya sebagai berikut :
  1. Login ke blogger kemudian pilih menu "Tata Letak".
  2. Kemudian klik link "Tambah gadget" dimana akan ditempatkan animasi flash.
  3. Pilih "HTML/Javascript" kemudian taruh script berikut : 
<embed src="http://blogoholic.info/wellcome.swf" quality="high" bgcolor="white" width="500" height="100" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi? P1_Prod_Version=ShockwaveFlash"></embed>
* Ubah "http://blogoholic.info/wellcome.swf" dengan alamat file flash kamu yang telah ditaruh di hosting.
* Ubah width="500" height="100" dengan ukuran dari file flash Anda.


Read More >>

Membuat Recent Post Animasi

1

Bookmark and Share
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">
<!--
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/post.jpg) repeat-x;
border:1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}
-->
</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!

Read More >>

Mengetahui Data Visitor Blog

0

Bookmark and Share
Bagi sebagian pemilik blog, ingin sekali mengetahui data-data dari para pengunjung blognya. Hal tersebut ditunjukkan dengan adanya bermacam-macam pernak-pernik yang ada di blognya, seperti misalnya "Hit Counter", "Site Track Meter", dll. Buat kamu, ada sebuah layanan masyarakat dari "Google", namanya Google Analytics. Bagi yang sering bermain di dunia maya mungkin tahu apa itu Google Analytics, berikut ini tentang Google Analytics :

Google Analytics berbeda dengan Hit Counter. Hit Counter biasanya hanya menghitung jumlah pengunjung yang datang Sedangkan Google Analytics, tidak hanya menghitung jumlah para pengunjung tapi juga data-data yang lainnya tentang pengunjung tersebut.

Daftar disini http://google.com/analytics

Setelah itu kopi kode/script tersebut, lalu login ke blogger Klik Template -->> Edit HTML. Paste kode/script yang udah di copy kedalam tag HTML yaitu sebelum tag </body> jangan lupa disimpan.

Kembali lagi ke google.com/analytics, kamu harus mengklik Check Status dulu. Kalo udah berhasil maka akan ada tandanya, kalo belum ya dicoba lagi.

Datanya baru akan muncul satu hari kemudian, jadi ini bukan seperti hit counter yang datanya akan langsung berubah tiap detik tapi data-data google.com/analytics ini akan muncul tiap ganti hari.

Read More >>

Mencari siapa yang mencuri artikel blog kita

1

Bookmark and Share
Waktu kita tidak sengaja menemui situs bagus. Situs buat mengetahui siapa yang telah menjiplak artikel di blog kita. Caranya cukup mudah, tidak perlu mendaftar, hanya memasukkan alamat/ URL blog Anda lalu tekan tombol "GO", tunggu sebentar lalu langsung keluar siapa yang mengambil atau copy paste artikel blog Anda. Kalau untuk mengetahui siapa yang menjiplak artikel atau postingan tertentu maka yang kamu masukkan ke sana adalah link dari judul postingan Anda, jadi nanti akan ketahuan siapa yang menjiplak postingan tersebut.
Tapi untuk yang versi gratis hanya bisa mengetahui beberapa saja, jadi nggak bisa mengetahui semua yang mengcopy paste blog kita. Tapi lumayan untuk mengintip sedikit... bagi yang ingin tahu ini alamatnya COPYSCAPE.
Terima kasih.

Read More >>

Membuat Scrollbar untuk Blog

0

Bookmark and Share
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 :
  1. Login ke Blogger. Klik menu Tata Letak
  2. Klik Tambah Widget. Lalu klik tombol + pada HTML/Javascript 
  3. 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.

Read More >>

Membuat Tampilan di pojok Layar

0

Bookmark and Share

Untuk membuatnya ikuti langkah berikut :
  1. Login ke blogger trus klik Template -->> Edit HTML
  2. 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); }
  3. 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".
  4. Langkah selanjutnya yaitu letekkan script berikut ini sebelum kode </body>
  5. <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" adalah link. ganti dengan link kamu.
    "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRbn7KpqOw7J8OuN8xkjaDkykJnrMtGldEUpEG9JAaJuCymYramGVp74cpm7mUu5RtB3lt23zmCay5tIIQt5wXgPrphDfx7aJzrRhEfw1mZ6xCoPvwjX86ksjUaX9Yc2tIxJY-hTAkujw/" adalah lokasi gambar. ganti dengan lokasi gambar kamu.

  6. 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.
  7. Simpan hasil kerja kamu dan lihat hasilnya...

Read More >>

Membuat Recent Post

0

Bookmark and Share
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&amp;alt=json-in-script&amp;callback=rp">
</script>
Angka 15 adalah angka postingan yang akan Anda tampilkan
AlamatBlogAnda adalah alamat blog Anda


Semoga bermanfaat :D


thanks to Anas
Read More >>

Memasang Save as PDF

0

Bookmark and Share
Banyak cara untuk menarik pengunjung datang keblog kita, salah satunya memasang sava page as pdf di blog kita, dengan adanya layanan ini mungkin pengunjung akan dimanjakan dengan output yang berbentuk pdf. Anda pasti masih ingat dengan layanan Fasilitas Print, ya tujuannya hampir sama, artikel kita bisa disimpan dan di baca sewaktu - waktu dengan format artikel yang bagus dan rapi dari pada menggunakan save page as browser.

Berikut langkah - langkah Memasang Save Page As PDF di Blog :
  1. Silahkan mendaftar dulu di http://web2.pdfonline.com,
  2. Kalau sudah silahkan singup, isi data temen - temen sesuai form yang sudah disediakan,
  3. Langsung aja klik button generate the javascript
  4. Maka otomatis scriptnya akan muncul dibawahnya, 


Semoga bermanfaat :D
Read More >>

Membuat Menu Horizontal Multilevel

0
Langkah pertama yaitu Login ke Blogger

Masuk pada bagian Template lalu Edit HTML

Masukkan code dibawah ini dibawah code <head>
<!--[if lte IE 7]> <style type="text/css"> html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/ </style> <![endif]-->
<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
Read More >>

Membuat Floating Box

0

Bookmark and Share
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
Read More >>

Membuat Fasilitas Print di Blog

0

Bookmark and Share
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 Print this page

Tanpa tulisan : print this page

Semoga bermanfaat :D


Read More >>

Cara Membuat Komentar Facebook

0
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 == &quot;item&quot;'> <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 == &quot;item&quot;'>
<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
Read More >>

Cara Membuat Label Cloud Putar - Cloud Blogumus

2

Bookmark and Share
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

  1. Login ke Blogger dengan ID Anda 
  2. Klik Tata Letak 
  3. Klik tab Edit HTML 
  4. Download dahulu template sobat dengan mengklik Download Template Lengkap 
  5. Kemudian klik button Expand Template Widget dan cari kode yg seperti ini :
    <b:section class='sidebar' id='sidebar' preferred='yes'>
  6. 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(&quot;http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;250&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
    // uncomment next line to enable transparency
    //so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
    so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
    so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
    so.addVariable(&quot;distr&quot;, &quot;true&quot;);
    so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
    so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
    so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
    so.write(&quot;flashcontent&quot;);
    </script>
    <b:include name='quickedit'/>
    </div>
    </b:includable>
    </b:widget>
  7. 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
Read More >>

Membuat Translate Simbol Bendera

0

Bookmark and Share
English French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified

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


Read More >>

Cara Membuat Efek Heart/Hati

0

Bookmark and Share
Langkah pertama yang harus Anda lakukan adalah Log In ke Blogger lalu masuk menu Template kemudian masuk menu Edit HTML
Lalu taruh Code dibawah ini diatas code </body>

<script src='http://sites.google.com/site/anasku2000/lovingheart.js'></script>

Jika sudah Simpan dan lihat hasilnya...


Semoga bermanfaat :D


thanks to Anas
Read More >>

Dasar-Dasar HTML

0

Bookmark and Share
Jenis Font :
<font face="times new roman">Tulisan Anda</font> =Tulisan Anda
<font face="verdana">Tulisan Anda</font> =Tulisan Anda
<font face="Arial">Tulisan Anda</font> =Tulisan Anda
catatan :
>> Text "Tulisan Anda" adalah teksnya gantilah dengan teks yang Anda inginkan
>> Tulisan yang berwarna merah adalah jenis font, gantilah sesuai dengan keinginan Anda
>> Jika font yang anda pakai tidak terdapat pada sistem pengunjung WFO anda. Jenis font akan menjadi font standar

Ukuran Huruf :
<font size="-2">Teks </font> = Teks
<font size="-1">Teks </font> = Teks
<font size="+1">Teks</font> = Teks
<font size="+2">Teks</font> = Teks
<font size="+3">Teks</font> = Teks

Warna Huruf :
<font color="#FF0000">Warna MERAH </font>
Hasilnya = Warna MERAH
Jika anda ingin mencari Code warna Html silakan kunjungi http://www.colorschemer.com/online.html
Catatan : Text yang berwarna merah adalah Code warna yang dapat kamu ganti dengan kode warna sesuai pilihan kamu

Header :
<H1>CONTOH</H1> =

CONTOH


<H2>CONTOH</H2> =

CONTOH


<H3>CONTOH</H3> =

CONTOH


<H4>CONTOH</H4> =

CONTOH


<H5>CONTOH</H5> =
CONTOH

<H6>CONTOH</H6> =
CONTOH

Variasi Teks :
Teks miring : <i>Teks Miring</i> = Teks Miring
Teks Tebal : <b>Teks Tebal</b> = Teks Tebal
Teks bergaris bawah : <u>Teks Bergaris Bawah</u> = Teks Bergaris Bawah
Text Bergaris : <strike>Teks Salah</strike> = Teks Salah

Efek Pada Teks :
Teks berkedip : <blink>Teks Berkedip</blink> = Teks Berkedip
Teks bergerak dari kanan ke kiri : <marquee>Teks Bergerak</marquee> = Teks Bergerak
Teks bergerak dari atas ke bawah : <marquee direction="down" width="300px" height="50px">Teks Bergerak <br> dari atas ke bawah</marquee> = Teks Bergerak
dari atas ke bawah

catatan :

  • Tanpa value "XXXpx" untuk nilai tinggi dan lebar, sering menyebabkan script tidak berfungsi pada browser Firefox dan Netscape
  • Ganti "down" dengan "up" untuk arah dari bawah keatas.
  • Ganti "down" dengan "right" untuk arah dari kiri ke kanan.
  • Tambahkan scrolldelay="XX" untuk mengatur kecepatan teks
  • Pembatasan area teks bergerak dengan menggunakan width tidak berpengaruh pada browser Firefox dan Netscape


Teks Dengan Link :
Link untuk e-mail : <a href=mailto:mailku@mail.com> e-mailku </a>
Link untuk URL : <a href="URL_adress">situsku.com</a>
Tambahkan "target="_blank" jika anda ingin link tersebut terbuka dengan jendela sendiri.
contoh : <a href="http://tutorialblogger.blogspot.com" target="_blank">Tutorial Blogger</a>

Posisi Teks :
Teks di kiri: <p align=left>Posisi</p>

Posisi


Teks di tengah: <p align=center>Posisi</p>

Posisi
Teks di kanan: <p align=right>Posisi</p>

Posisi




Semoga bermanfaat :D


Read More >>

Cara Menghilangkan Widget Attribution Blogger

0

Bookmark and Share
Untuk menghilangkan Atribut Blogger, caranya cukup simple dan mudah, ikuti Saja langkah dibawah ini.
  • Pastikan Anda sudah login ke Blogger
  • Masuk pada "Template" Lalu "Edit HTML"
  • Masukkan code css dibawah ini diatas code ]]></b:skin>
#Attribution1 {
height:0px;
visibility:hidden;
display:none
}
  • Tinggal SAVE TEMPLATE.

Semoga bermanfaat :D



Read More >>

Cara Mengalihkan Blog

0
Jika Anda membutuhkan tutorial ini ikuti langkah-langkah dibawah ini :
  1. Masuk ke akun Blogger anda yang akan di alihkan
  2. Klik tata letak/rancangan
  3. Klik Edit Html
  4. Cari Kode <head> 
  5. Copy Script Kode Dibawah Ini :
    <meta content='nofollow' name='robots'/>
    <meta content='noindex' name='robots'/>
    <script type='text/javascript'><!--//--><![CDATA[//><!--
    var url = "URL tujuan Anda" (document.images) ? location.replace(url) : location.href = url;//--><!]]></script>
    <meta content='0;URL= URL tujuan Anda' http-equiv='refresh'/>
  6. Paste Script Kode Di atas Tepat Di bawah Kode <head>
  7. Klik Simpan

Keterangan :
Tulisan berwarna Biru : Ganti Dengan URL yang akan di gunakan sebagai tujuan pengalihan.


Semoga bermanfaat :D


Read More >>

Cara Membuat Spoiler

0

Bookmark and Share
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:
  1. Teks warna Merah adalah kata perintah tombol spoiler dan boleh diganti sesuai selera Anda;
  2. Teks warna Biru adalah tempat menaruh isi content postingan Anda;


Semoga bermanfaat :D


Read More >>
 
Tutorial Blogger Design by Trick and Tips Powered by Blogger