Create Rounded Corners with Border-Radius

Create Rounded Corners with Border-Radius atau Membuat Garis Lengkung

Postingan tutorial blog ini mengenai Create Rounded Corners with Border-Radius atau Membuat Garis Lengkung dengan css.
Disini saya hanya menjelaskan prinsip dari Border Radius atau Membuat Garis Lengkung dengan css di beberapa browser.
Perlu kamu ketahui bahwa kode html pada setiap browser untuk Border Radius atau Membuat Garis Lengkung dengan css itu berbeda.
Berikut penjelasan Create Rounded Corners with Border-Radius atau Membuat Garis Lengkung pada beberapa browser.

- Border Radius atau Membuat Garis Lengkung pada Mozilla Firefox

-moz-border-radius

Contohnya : -moz-border-radius-topright:15px;

- Border Radius atau Membuat Garis Lengkung pada Webkit (Safari) atau yang biasa disebut Google Chrome

-webkit-border-radius

Contohnya : -webkit-border-top-left:15px;

- Border Radius atau Membuat Garis Lengkung pada Opera

border-radius

Contohnya : border-radius:15px;

Berikut beberapa model Create Rounded Corners with Border-Radius atau Membuat Garis Lengkung pada Mozilla Firefox, Webkit (safari)dan Opera:

-moz-border-radius:15px; -webkit-border-radius:15px; border-radius:15px; border:5px solid #BDDC12;

-moz-border-radius-topright:15px; -moz-border-radius-bottomright:15px; -webkit-border-top-right-radius:15px; -webkit-border-bottom-right-radius:15px; border-top-right-radius:15px; border-bottom-right-radius:15px; border:5px solid #BDDC12;

-moz-border-radius-topleft:15px; -moz-border-radius-topright:15px; -webkit-border-top-left-radius:15px; -webkit-border-top-right-radius:15px; border-top-left-radius:15px; border-top-right-radius:15px; border:5px solid #BDDC12;

-moz-border-radius-topleft:15px; -moz-border-radius-bottomright:15px; -webkit-border-top-left-radius:15px; -webkit-border-bottom-right-radius:15px; border-top-left-radius:15px; border-bottom-right-radius:15px; border:5px solid #BDDC12;

-moz-border-radius-topright:15px; -moz-border-radius-bottomright:15px; -moz-border-radius-bottomleft:15px; border-top-right-radius:15px; border-bottom-right-radius:15px; border-bottom-left-radius:15px; border:5px solid #BDDC12; padding:10px;

Jika ingin melihat border radius circle atau membuat lingkaran dengan border radius klik DISINI

Create Rounded Corners with Border-Radius atau Membuat Garis Lengkung dengan css ini bisa di gunakan untuk posting, widget,dll.

Membuat Link Dengan Animasi Tooltip

Membuat Link Dengan Animasi Tooltip

Tutorial Blog Membuat Link Dengan Animasi Tooltip ini sangat berguna karena blog atau website kamu akan terlihat elegan saat pengunjung menyorot sebuah link akan mengeluarkan animasi.

Berikut adalah Membuat Link Dengan Animasi Tooltip :
- Login akun blogger kamu
- Pilih Rancangan kemudian edit html
- Copy dan Paste kode di bawah ini di atas kode </head>

<style type='text/css'> a.tooltip span { display:none; padding:5px 5px; margin-left:3px; margin-top:10px; width:170px; font-size:12px; line-height:150%; } a.tooltip:hover span{ display:inline; position:absolute; background:#B5E21A; border:1px solid #FFFFFF; -moz-border-radius: 20px; -webkit-border-radius: 20px; color:#fff; } </style>

- Gunakan kode berikut untuk memasang link dengan animasi tooltip tadi

<a class="tooltip" href="http://www.ulil-amri.com" style="color: red;" target="_blank"><span> DOWNlOAD HERE</span>Tutorial Blogger</a>

Untuk Melihat contohnya,sorot link di bawah ini.

DOWNlOAD HERETutorial Blogger

Trik Untuk Merubah Mouse di Blog atau Website

Trik Untuk Merubah Mouse di Blog atau Website

Trik Untuk Merubah Mouse di Blog atau Website ini hanyalah menggunakan teknik sederhana dalam css.
Kita hanya menambah kode stlye pada tulisan atau link di blog kamu.
Kebanyakan blogger berkeinginan untuk merubah gaya kursor blog pada saat menyorot link dan teks.

Berikut tutorial blog Merubah Mouse di Blog atau Website.

Untuk melihat contoh cursor maka sorot pada tulisan tutorial blog.


- Cursor hand | kursor tangan

Tutorial Blog

- Cursor text | kursor teks

Tutorial Blog


- Cursor crosshair | kursor tanda tambah

Tutorial Blog


- Cursor wait | kursor menunggu

Tutorial Blog

- Cursor move | kursor gerak

Tutorial Blog

- Cursor help | kursor tanda tanya

Tutorial Blog


- Cursor not-allowed | kursor dilarang

Tutorial Blog


Itu aja dulu ya., Trik Untuk Merubah Mouse di Blog atau Website.
Kode di atas adalah kursor yang umum di gunakan dalam website.

Jika ingin memesan atau mengetahui kode kursor yang biasa kalian lihat baik di website atau di komputer kamu.

Silahkan komentar saja !!!

Cara Membuat Post Body Hover

Cara Membuat Post Body Hover

Cara Membuat Post Body Hover berguna untuk sebagai animasi pada postingan blog kamu.
Caranya cukup mudah hanya dengan copy dan paste kode post body dan paste saja di template kamu.

Berikut Tutorial Blog Cara Membuat Post Body Hover :
- Login akun BLogger kamu
- Pilih rancangan kemudian edit html
- Centang expand template widget
- Back up html untuk mengamankan template apabila terjadi galat atau kesalahan dalam mengedit atau desain blog kamu.
- Simak Tutorial Blog di bawah ini

Caranya cukup mudah hanya dengan copy dan paste kode post body kemudian paste kode html post body tadi di template kamu.

Setelah kamu paste tambahkan kode :hover

Misalkan kode html post body aku seperti di bawah ini

.post-body{background:#3B5998 url(link image 1) center repeat;}

kemudian untuk post hover body seperti ini

.post-body:hover{background:#FFFFFF url(link image 2) center repeat;}

Perhatikan perbedaan kode html di atas,saya menambahkan kode hover,background warna dan background gambar yang berbeda.

Begitulah yang dimaksud dengan post hover,terjadi perbedaan antara sebelum mouse menyorot postingan blog kamu dengan saat mouse menyorot postingan kamu.

Terkesan memberikan sebuah animasi pada postingan blog kamu.

Sebuah Tutorial Blog yang singkat tapi sangat berguna untuk postingan blog kamu.

Membuat Page View Terlihat Banyak Pengunjung

Membuat Page View Terlihat Banyak Pengunjung

Membuat Page View Terlihat Banyak Pengunjung ini bukanlah sebuah tutorial blog tapi adalah sebuah trik menipu pengunjug.
Loh kenapa begitu sob,kok bisa membohongi pegunjug?
Iya,karena page view atau statistik website atau blog bukan hanya dari pengunjung blog kita.
bingung ya?

Contoh :

aku pasang sebuah widget flag counter atau statistik akan tetapi aku bukan pasang widget statistik dari blog melainkan memasang widget statistik dari blog atau website lain.
Mulai mengerti kan?
Bisa saja kita pasang widget statistik dari kaskus
bahkan bisa kita pasang lebih dari 1 website di blog kita

Silahkan mencoba !!!

Kegunaan Wapsite Wen.ru Sebagai Tempat Upload

Kegunaan Wapsite Khususnya bagi Blogger

Kegunaan wapsite bagi blogger adalah sebagai tempat upload Javascript,Image (png,jpg,gif,dll),sis,sisx,jar,rar,dll.
Kebanyakan dari blogger melupakan hal ini padahal wapsite adalah sebuah situs yang biasa di buat dari hp dan simple.
Tentunya ringan untuk di akses karena di khusus kan untuk pembuat website dari hp.

Berikut tutorial untuk membuat wapsite dan sekaligus mendapatkan tempat uploadnya:




1. register di wen.ru ,jika tidak bisa di akses oleh mozilla maka instal pengaya ini
di mozilla kamu
2. login ke akun wen.ru
3. ikuti langakah screenshot ini


4. setelah login,pilih wexplorer kemudian pilih add selanjutnya create folder.Tulis nama folder kamu
5. bukalah folder yang telah kamu buat tadi kemudian pilh add setelah itu pilih secret code
6. simpan secret code yang telah kamu dapatkan tadi
7. buka link ini yang merupakan link external upload dari wen.ru
8. tuliskanlah secret code dan nama folder yang telah kamu buat tadi
9. setelah kamu upload file kamu maka link downloadnya seperti ini

Contoh: http://amricow.wen.ru/amri/your file name
nama file yang aq upload unit-converter-length.jpg
maka jadinya seperti ini:


kelebihan dari upload wen.ru ini,kamu bisa upload javascript kamu,sis,sisx,rar,gambar,dll dan bisa di lakukan tanpa login.
cukup hanya mengingat secret code dan nama folder kamu.

aku membuat ini agar mudah di akses hanya dengan cara membuat iframe link external upload dari wen.ru di blog aku.
Lihat disini iframe yang telah aku buat.

HTML Encrypt

Membuat Recent Post dengan Efek Marquee

Membuat Recent Post dengan Efek Marquee

Membuat Recent Post dengan Efek Marquee ini cukup mudah caranya,hanya dengan copy dan paste kode Membuat Recent Post dengan Efek Marquee di bawah ini ke gadget atau html/javascript di blog kamu.

<script type='text/javascript'> //<![CDATA[ function RecentPostsScrollerv2(json) { var sHeadLines; var sPostURL; var objPost; var sMoqueeHTMLStart; var sMoqueeHTMLEnd; var sPoweredBy; var sHeadlineTerminator; var sPostLinkLocation; try { sMoqueeHTMLStart = "\<marquee onmouseover=\"this.stop();\" onmouseout=\"this.start();\" "; if( nWidth) { sMoqueeHTMLStart = sMoqueeHTMLStart + " width = \"" + nWidth + "%\""; } else { sMoqueeHTMLStart = sMoqueeHTMLStart + " width = \"100%\""; } if( nScrollDelay) { sMoqueeHTMLStart = sMoqueeHTMLStart + " scrolldelay = \"" + nScrollDelay + "\""; } if(sDirection) { sMoqueeHTMLStart = sMoqueeHTMLStart + " direction = \"" + sDirection + "\""; if(sDirection == "left" || sDirection =="right") { //For left and right directions seperate the headilnes by two spaces. sHeadlineTerminator = "  "; } else { //For down and up directions seperate headlines by new line sHeadlineTerminator = "\<br/\>"; } } if(sOpenLinkLocation =="N") { sPostLinkLocation = " target= \"_blank\" "; } else { sPostLinkLocation = " "; } sMoqueeHTMLEnd = "\</MARQUEE\>" sHeadLines = ""; for(var nFeedCounter = 0; nFeedCounter < nMaxPosts; nFeedCounter++) { objPost = json.feed.entry[nFeedCounter]; for (var nCounter = 0; nCounter < objPost.link.length; nCounter++) { if (objPost.link[nCounter].rel == 'alternate') { sPostURL = objPost.link[nCounter].href; break; } } sHeadLines = sHeadLines + "\<b\>"+sBulletChar+"\</b\> \<a " + sPostLinkLocation + " href=\"" + sPostURL + "\">" + objPost.title.$t + "\</a\>" + sHeadlineTerminator; } document.write(sMoqueeHTMLStart + sHeadLines + sMoqueeHTMLEnd ) } catch(exception) { alert(exception); } } //]]> </script> <script style="text/javascript"> var nMaxPosts = 20; var sBgColor; var nWidth; var nScrollDelay = 180; var sDirection="left"; var sOpenLinkLocation="Y"; var sBulletChar="*"; </script> <script style="text/javascript" src="http://tutorial-blog-amricow.blogspot.com/feeds/posts/default?alt=json-in-script&callback=RecentPostsScrollerv2"></script>

Setelah kamu copy dan paste kode Membuat Recent Post dengan Efek Marquee di atas maka ganti tulisan http://tutorial-blog-amricow.blogspot.com dengan link blog kamu.
bagaimana?
mudahkan Membuat Recent Post dengan Efek Marquee !!!!
Untuk melihat contoh Membuat Recent Post dengan Efek Marquee ini bisa di lihat di atas postingan ini.

Tutorial Mengganti Background Blog dan Membuat Background Transparan di Blog

Tutorial Mengganti Background Blog dan Membuat Background Transparan di Blog

Kebanyakan blogger sangat senang mengganti background untuk membuat blog dia lebih dinamis tetapi ada juga blogger yang ingin tampilan blog transparan ,katanya lebih keren.
Semua itu tergantung selera sobat blogger.

Berikut Tutorial Mengganti Background Blog dan Membuat Background Transparan di Blog :

1. Carilah kode di bawah ini di template kamu,jangan lupa centang expand template widget

body {

atau

body{

2. Jika sudah ketemu maka akan terlihat seperti ini

body {
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
font-size: 15px; font-weight: bold;
background: #fff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT7DCbQ3IsRaig9jMQfJvw4SipYehyphenhyphenUeTM4rCTwgR3-YLD2WJ0ie5CQLjFBfyxlKBJPO_wA0DBiQg2ItGmprFyFl9Ce56kIBjUitelAL7pwEFz1R6EQMiNu0lY3_Y1KILa4dqP5K10Ic0/s1600/Bleach.jpg") center fixed;
}

3. Pada tulisan kode background di atas merupakan warna dan gambar background blog saya.
background saya memiliki warna background putih yang tertuliskan di atas dengan kode html #fff

4. Jika Membuat background blog kamu menjadi transparan maka kodenya seperti ini

body {
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
font-size: 15px; font-weight: bold;
background:transparent;
}

5. Jika ingin mengganti background blog kamu maka kodenya seperti ini

body {
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
font-size: 15px; font-weight: bold;
background:#fff url("masukkan background kamu") center fixed;
}

== ganti tulisan masukkan background kamu dengan link atau url background kamu ==

Jika masih tidak mengerti,silahkan beri komentar di bawah ini.

Cara Membuat Judul Posting Berjalan

Cara Membuat Judul Posting Berjalan

Berikut tutorial blog ini mengenai Cara Membuat Judul Posting Berjalan :

1. Login akun blogger kamu
2. Pilih rancangan kemudian edit html
3. Centeng expand template widget
4. Cari kode di bawah ini di dalam template kamu dengan menggunakan Ctrl + f
5. Back up template kamu untuk mengamankan apabila ada kesalahan

<b:if cond='data:post.title'> <h3 class='post-title entry-title'><b:if cond='data:post.link'> <a expr:href='data:post.link'><data:post.title/></a> <b:else/> <b:if cond='data:post.url'><a expr:href='data:post.url'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> </b:if> </h3></b:if>

6. Jika sudah ketemu,ganti dengan kode yang di bawah ini

<b:if cond='data:post.title'> <h3 class='post-title entry-title'><marquee behavior='alternate' onmouseout='this.start()' onmouseover='this.stop()'> <b:if cond='data:post.link'> <a expr:href='data:post.link'><data:post.title/></a> <b:else/> <b:if cond='data:post.url'><a expr:href='data:post.url'><data:post.title/></a><b:else/> <data:post.title/> </b:if> </b:if> </marquee> </h3></b:if>

7. Klik pratinjau dan lihat hasilnya,jika gagal pilih bersihkan edit dan jika berhasil pilih simpan template .

Good Luck !!!

Merubah Tulisan ReadMore dengan Gambar

Merubah Tulisan ReadMore dengan Gambar

Merubah Tulisan ReadMore dengan Gambar ini hanyalah menambah kode menampilkan gambar sebagai pengganti tulisan readmore kalian sebelumnya.




Tutorial :



- Login akun blogger kamu
- Pilih rancangan kemudian edit html kemudian centang expand template widget
- Cari kode di bawah di template kamu

<p><data:post.body/></p>

- Jika sudah ketemu maka ganti tulisan readmore kamu dengan kode di bawah ini

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6YBIiwzKfRCmUCtQ6lb24o7JyJLFi5pSfND_lHwQVpCO0g_NPZJ5Qm44aSNR_WiPmAK7SRvhfYFsRp3Vz4EZnmuB10b1wk9_kNRgY067gFpmiQrTLJPvOXI3DmGtfAUw0NOUGVAy7Pjc/s1600/read_more%25281%2529.jpg'"/>

- Save dan lihat hasilnya

Membuat Navigasi Breadcrumd di Blog

Membuat Navigasi Breadcrumd di Blog

Kegunaan dari Membuat Navigasi Breadcrumd di Blog adalah sebagai navigasi yang mempermudah pengunjung untuk membaca artikel blog kita dan Navigasi Breadcrumd berada tepat di atas postingan kita. Contohnya bisa di lihat dari screenshoot di atas.

Berikut tutorial Membuat Navigasi Breadcrumd di Blog :

1. Login akun blogger kamu
2. Pilih rancangan kemudian edit html dan centang expand template widget akan tetapi backup terlebih dahulu template kamu untuk mengamankan template blog kamu apabila adalah kesalahan
3. Cari kode ]]></b:skin> di template kamu dengan cara menggunakan Ctrl+f
4. Copy dan paste kode di bawah ini di atas kode ]]></b:skin>

.breadcrumbs { padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:95%; line-height: 1.4em; border-bottom:4px double #cadaef; }

5. Cari kode <div class='post hentry'> yang di atasnya ada kode seperti ini <b:includable id='post' var='post'> maka akan terlihat seperti di bawah ini

<b:includable id='post' var='post'> <div class='post hentry'>

6. Copy dan paste kode di bawah ini di bawah kode <div class='post hentry'>

<b:if cond='data:blog.homepageUrl == data:blog.url'><b:else/><b:if cond='data:blog.pageType == "item"'><div class='breadcrumbs'>Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'> , </b:if></b:loop></b:if> » <data:post.title/></div></b:if></b:if>

7. Save dan lihat blog kamu

Membuat Widget atau Gambar Berada di Pojok

Membuat Widget atau Gambar Berada di Pojok

Berikut adalah tutorial blog mengenai Membuat Widget atau Gambar Berada di Pojok bawah kanan , Membuat Widget atau Gambar Berada di Pojok bawah kiri , Membuat Widget atau Gambar Berada di Pojok atas kanan , Membuat Widget atau Gambar Berada di Pojok atas kiri .

1. Kode Css Membuat Widget atau Gambar Berada di Pojok atas kanan

#amricow_pojok { position:fixed;_position:absolute;top:0px; right:0px; clip:inherit; _top:expression(document.documentElement.scrollTop+ document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

2. Kode Css Membuat Widget atau Gambar Berada di Pojok atas kiri

#amricow_pojok { position:fixed;_position:absolute;top: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. Kode Css Membuat Widget atau Gambar Berada di Pojok bawah kiri

#amricow_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); }

4. Kode Css Membuat Widget atau Gambar Berada di Pojok bawah kanan

#amricow_pojok { position:fixed;_position:absolute;bottom:0px; right:0px; clip:inherit; _top:expression(document.documentElement.scrollTop+ document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

5. Cara penggunaan Membuat Widget atau Gambar Berada di Pojok sebagai berikut :

- Login akun blogger kamu
- Pilih rancangan kemudian edit html dan centang expand template widget
- Copy dan paste kode css yang kamu inginkan di bawah kode ]]></b:skin>
- Setelah itu copy dan paste kode html di bawah ini sebelum kode </body> atau bisa juga kamu copy dan paste kode html di bawah ini di gadget atau widget (html/javascript)

6. Kode Html Membuat Widget atau Gambar Berada di Pojok

<div id="amricow_pojok"><a href="http://tutorial-blog-amricow.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia8IO5cQJGds7gu2kUTNPUYHItOSGMpd0ajmFDt50JutgquGW7HheWY_SwIzdJAIEYXoX4zwo988A7kq1dh5THH0Scg_qi3VvNPB1oLIzH6KbYVRfrYTxIQmPZOh_LURP0EpBNdbJob5c/s1600/PasangGambardiPojokBlog.jpg" border="0" /></a>Letakkan kode html kamu disini </div>

7. Save dan lihat hasilnya.

Membuat Link Berkedip Warna Warni

Membuat Link Berkedip Warna Warni

Tutorial blog kali ini adalah mengenai cara Membuat Link Berkedip Warna Warni

Caranya :

1. Login akun blogger kamu
2. Pilih rancangan kemudian edit html
3. Cari kode </head> di template kamu
4. Copy dan paste kode di bawah ini di bawah kode </head>

<script src='http://amricow-file.googlecode.com/files/colorful.js'></script>

Cara Memasang atau Menyisipkan Gambar di Judul Posting Blog

Cara Memasang atau Menyisipkan Gambar di Judul Posting Blog

Berikut tutorial Cara Memasang atau Menyisipkan Gambar di Judul Posting Blog yang berguna untuk memperindah blog kamu. Jika berminat ikuti tutorial di bawah ini.

1. Login ke akun blog kamu 2. Pilih Rancangan,Tata letak kemudian Pilih edit html dan centang kolom expand template widget 3. Carilah Kode di bawah ini

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

4. Letakan kode dibawah ini diantara kedua kode yang tadi

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKFKrQYgQSRma2LK5K-H479Rc8dmupAcmxT_ql0c6_lG63yRTikPwWWnYNtGBAL0-fofG33VRQQSrHuH8uYzmXuj_MZUqMk6glH37F9esjTVp80gkvra56vKkAa-Nsa3ac87Jehwu0R6g/s400/gambar+di+judul+post.gif" width="45" hight="45" border="0"></img>

5. Hasil yang terlihat akan seperti ini

<a expr:href='data:post.url'><data:post.title/><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKFKrQYgQSRma2LK5K-H479Rc8dmupAcmxT_ql0c6_lG63yRTikPwWWnYNtGBAL0-fofG33VRQQSrHuH8uYzmXuj_MZUqMk6glH37F9esjTVp80gkvra56vKkAa-Nsa3ac87Jehwu0R6g/s400/gambar+di+judul+post.gif" width="50" hight="50" border="0"></img></a>

6. Save atau Pratinjau agar tidak ada kesalahan dalam pengeditan

Nb: sesuaikan ukuran gambar dengan blog kamu agar indah di lihat

Membuat Efek Animasi Blur Otomatis Di Blog

Membuat Efek Animasi Blur Otomatis Di Blog

1. Log in Ke Blogger Lalu masuk Menu Layout kemudian Edit HTML Centang Kolom Expand Template Widget

2. Tambakan Kode Berikut Tepat Diatas Kode </head>

<script type='text/javascript'> $(document).ready(function(){ $(".post img").hover(function(){ $(this).fadeTo("slow", 0.5); },function(){ $(this).fadeTo("slow", 1.0); }); }); </script>

3. Save dan lihat hasilnya.

Membuat Label Tag Clouds

Tags Clouds adalah sebuah Label yang hurufnya tidak rata maka dari itu dinamakan Tags Clouds yang artinya Tag adalah Label dan Clouds adalah awan jadi Label Tag Clouds adalah Label yang seperti tidak rata. Oleh karena itu Label Tag Clouds ini bisa di masuk dalam kategori search engine optimization.

Berikut cara Membuat Label Tag Clouds

1. Log in Ke Blogger Lalu masuk Menu Layout kemudian Edit HTML

2. Kemudian simpan Code Css dibawah ini diatas Code ]]></b:skin>

/* Label Cloud Styles ----------------------------------------------- */ #labelCloud {text-align:center;font-family:arial,sans-serif;} #labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;} #labelCloud ul{list-style-type:none;margin:0 auto;padding:0;} #labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0} #labelCloud a{text-decoration:none} #labelCloud a:hover{text-decoration:underline} #labelCloud li a{} #labelCloud .label-cloud {} #labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000} #labelCloud .label-cloud li:before{content:"" !important}

3. Lalu simpan Code Dibawah ini tepat dibawah Code <head>

<script type='text/javascript'>// Label Cloud User Variables var cloudMin = 1; var maxFontSize = 20; var maxColor = [0,0,255]; var minFontSize = 10; var minColor = [0,0,0]; var lcShowCount = false; </script>

4. Lalu Scroll Kebawah coba cari Code seperti ini

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

5. Lalu Ganti code diatas dengan Code dibawah Ini

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'><b:includable id='main'><b:if cond='data:title'><h2><data:title/></h2></b:if> <div class='widget-content'><div id='labelCloud'/><script type='text/javascript'> // Don't change anything past this point ----------------- // Cloud function s() ripped from del.icio.us function s(a,b,i,x){ if(a>b){ var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m) } else{ var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a) } return v } var c=[]; var labelCount = new Array(); var ts = new Object; <b:loop values='data:labels' var='label'>var theName = "<data:label.name/>"; ts[theName] = <data:label.count/>; </b:loop> for (t in ts){ if (!labelCount[ts[t]]){ labelCount[ts[t]] = new Array(ts[t]) } } var ta=cloudMin-1; tz = labelCount.length - cloudMin; lc2 = document.getElementById('labelCloud'); ul = document.createElement('ul'); ul.className = 'label-cloud'; for(var t in ts){ if(ts[t] < cloudMin){ continue; } for (var i=0;3 > i;i++) { c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz) } var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz); li = document.createElement('li'); li.style.fontSize = fs+'px'; li.style.lineHeight = '1'; a = document.createElement('a'); a.title = ts[t]+' Posts in '+t; a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')'; a.href = '/search/label/'+encodeURIComponent(t); if (lcShowCount){ span = document.createElement('span'); span.innerHTML = '('+ts[t]+') '; span.className = 'label-count'; a.appendChild(document.createTextNode(t)); li.appendChild(a); li.appendChild(span); } else { a.appendChild(document.createTextNode(t)); li.appendChild(a); } ul.appendChild(li); abnk = document.createTextNode(' '); ul.appendChild(abnk); } lc2.appendChild(ul); </script> <noscript><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></noscript><b:include name='quickedit'/></div> </b:includable></b:widget>

6. Selesai Deh kemudian Save

Cara Membuat Judul Blog Berjalan atau bergerak

Cara Membuat Judul Blog Berjalan atau bergerak

Disini di jelaskan cara membuat judul blog berjalan atau bergerak,walaupun tidak berguna tapi cukup keren juga di lihat.

1. Login ke blogger kemudian ke menu Layout ---> Edit HTML
2. Cari kode/script
<title><data:blog.pageTitle/></title>
3. Ganti kode diatas dengan

<script language="JavaScript"> var txt="<data:blog.pageTitle/>"; var kecepatan=<span style="color: red;">100/span>;var segarkan=null;function bergerak() { document.title=txt; txt=txt.substring(1,txt.length)+txt.charAt(0); segarkan=setTimeout("bergerak()",kecepatan);}bergerak(); </script></b:include>

Keteranga:teks yang berwarna merah adalah kecepatannya.

Cara Membuat Tombol Home,Back To Top, Bottom dan Refresh atau Reload di Blog

1.Masuk Ke akun Blog Sobat

2.Pada Dasbor Pilih Rancangan-->Edit HTML Dan jangan Lupa Centang Kolo Expand Template Widget

3.Kemudian Cari Kode ]]></b:skin> ( gunakan CTRL F atau F3 untuk memudahkan pencarian )

4.Copy Paste Kode Dibawah Ini Tepat Diatas Kode Tadi

#mangetsu {<br /> position:fixed;_position:absolute;bottom:0px; right:0px;<br /> clip:inherit;<br /> _top:expression(document.documentElement.scrollTop+<br /> document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }<br /> #mangetsu a<br /> {<br /> filter:alpha(opacity=65);<br /> -moz-opacity:0.65;<br /> opacity:0.65;<br /> border:0;<br /> }<br /> #mangetsu img<br /> {<br /> border:0;<br /> }<br /> #mangetsu a:hover<br /> {<br /> filter:alpha(opacity=100);<br /> -moz-opacity:1;<br /> opacity:1;<br /> }

5.Selanjutnya cari kode </body> Dan Letak Kode Dibawah Ini Tepat Diatasnya

<a name='ngisor-dhewe'></a>

6.Langkah Terakhir Tinggal Memasukkan Kode Dibawah Ini Tepat Dibawah Kode <body>

<div id='mangetsu'><table border='0'><tr> <td><a expr:href='data:blog.homepageUrl' title='Home'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBVEIUgQqDXMDred_kO5DmjDJJXBmc4D2daOgF7AvJdL7do8VdGzoxcV3IMb0ZYXb0XnecABL3QQfB9ZD8aGPUpTXF-El_gxvcNlK9B_lHBh8sOGh_UHyaDCCiNTaevlFPnLyRzxogU40/s320/home-icon2.png'/></a></td> <td><a href='#' title='back to top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3wLbwSDssDzwAGyN3-qoG4hzXifGG8fIdQWDsCd0xDsxh9FU1dn1Et9jm5E3YjkQXZZ09rxJ3UjUq-qQDpdyDyOaHtxcsRmadpEovx2ljbeG-wEj9tquCXSripaIFsVn0Gw3Z7dlqUTg/s320/pre-icon1.png'/></a></td> <td><a href='#ngisor-dhewe' title='back to bottom'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS_APlY0DPigiLfVb7VksRRMtYIC5uvz_H8OlHUcwAOP0OZoGRFf1UYxzx59jQ6x9D0glXbsSLYz0PVEheJR3NlkcCQJnk_2qLM-q8tKankgqug2sr-HfsaJq8zdjI2F6Psf0lWR1HBlI/s320/next-icon2.png'/></a></td> </tr> </table></div>

7.Dan Simpan Templatenya



Credit To HTC



PENAMBAHAN Tombol Refresh atau Reload:

menambah tombol reload atau refresh disamping Tombol Home,Back To Top,Dan Bottom di Blog anda.



Copy Paste Script dibawah ini jika ingin memasang  Tombol Home,Back To Top,Bottom dan Refresh atau Reload di Blog anda.

-Masukkan Kode Dibawah Ini Tepat Dibawah Kode <body>

<div id='mangetsu'><table border='0'><tr><td><a expr:href='data:blog.homepageUrl' title='Home'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBVEIUgQqDXMDred_kO5DmjDJJXBmc4D2daOgF7AvJdL7do8VdGzoxcV3IMb0ZYXb0XnecABL3QQfB9ZD8aGPUpTXF-El_gxvcNlK9B_lHBh8sOGh_UHyaDCCiNTaevlFPnLyRzxogU40/s320/home-icon2.png'/></a></td><td><a href='#' title='back to top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3wLbwSDssDzwAGyN3-qoG4hzXifGG8fIdQWDsCd0xDsxh9FU1dn1Et9jm5E3YjkQXZZ09rxJ3UjUq-qQDpdyDyOaHtxcsRmadpEovx2ljbeG-wEj9tquCXSripaIFsVn0Gw3Z7dlqUTg/s320/pre-icon1.png'/></a></td><td><a href='#ngisor-dhewe' title='back to bottom'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS_APlY0DPigiLfVb7VksRRMtYIC5uvz_H8OlHUcwAOP0OZoGRFf1UYxzx59jQ6x9D0glXbsSLYz0PVEheJR3NlkcCQJnk_2qLM-q8tKankgqug2sr-HfsaJq8zdjI2F6Psf0lWR1HBlI/s320/next-icon2.png'/></a></td><td><a href='#' onClick='window.location.reload()' title='Reload page'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZW51F9RtKRAzF8_uJqdXwhlo7DEI2tULc_5Th3x3pZtvENsDNVaqISdXz3MMP8sdisucHaQ-4OHx8M7SoAQ6POi8zULKIHvJImQtFO2f2k1ZEgkc8Y1MCi9mQlfFiDBtai-64VlLz8aw/s320/refresh-icon1.png'/></a></td></tr> </table></div>

Teks Mengikuti Kursor (Text Following Cursor)

<script>//mouse //Circling text trail- Tim Tilton //Website: http://www.tempermedia.com/ //Visit http://www.dynamicdrive.com for this script and more function cursor_text_circle(){ // your message here var msg='welcome to my site'.split('').reverse().join(''); var font='Verdana,Arial'; var size=3; // up to seven var color='#0000FF'; // This is not the rotation speed, its the reaction speed, keep low! // Set this to 1 for just plain rotation w/out drag var speed=.3; // This is the rotation speed, set it negative if you want // it to spin clockwise var rotation=-.2; // Alter no variables past here!, unless you are good //--------------------------------------------------- var ns=(document.layers); var ie=(document.all); var dom=document.getElementById; msg=msg.split(''); var n=msg.length; var a=size*13; var currStep=0; var ymouse=0; var xmouse=0; var props="<font face="+font+" color="+color+" size="+size+">"; if (ie) window.pageYOffset=0 // writes the message if (ns){ for (i=0; i < n; i++) document.write('<layer left="0" top="0" width="+a+" name="nsmsg'+i+'" height="+a+"><center>'+props+msg[i]+'</font></center></layer>'); } else if (ie||dom){ document.write('<div id="outer" style="position:absolute;top:0px;left:0px;z-index:30000;"> <div style="position:relative"> '); for (i=0; i < n; i++) document.write('<div id="iemsg'+(dom&&!ie? i:'')+'" style="position:absolute;top:0px;left:0;height:'+a+'px;width:'+a+'px;text-align:center;font-weight:normal;cursor:default">'+props+msg[i]+'</font></div>'); document.write('</div></div>'); } (ns)?window.captureEvents(Event.MOUSEMOVE):0; function Mouse(evnt){ ymouse = (ns||(dom&&!ie))?evnt.pageY+20-(window.pageYOffset):event.y; // y-position xmouse = (ns||(dom&&!ie))?evnt.pageX+20:event.x-20; // x-position } if (ns||ie||dom) (ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse; var y=new Array(); var x=new Array(); var Y=new Array(); var X=new Array(); for (i=0; i < n; i++){ y[i]=0; x[i]=0; Y[i]=0; X[i]=0; } var iecompattest=function(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body; } var makecircle=function(){ // rotation properties if (ie) outer.style.top=iecompattest().scrollTop+'px'; currStep-=rotation; for (i=0; i < n; i++){ // makes the circle var d=(ns)?document.layers['nsmsg'+i]:ie? iemsg[i].style:document.getElementById('iemsg'+i).style; d.top=y[i]+a*Math.sin((currStep+i*1)/3.8)+window.pageYOffset-15+(ie||dom? 'px' : ''); d.left=x[i]+a*Math.cos((currStep+i*1)/3.8)*2+(ie||dom? 'px' : ''); // remove *2 for just a plain circle, not oval } } var drag=function(){ // makes the resistance y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed); x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed); for (var i=1; i < n; i++){ y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed); x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed); } makecircle(); // not rotation speed, leave at zero setTimeout(function(){drag();},10); } if (ns||ie||dom) if ( typeof window.addEventListener != "undefined" ) window.addEventListener( "load", drag, false ); else if ( typeof window.attachEvent != "undefined" ) window.attachEvent( "onload", drag ); else { if ( window.onload != null ) { var oldOnload = window.onload; window.onload = function ( e ) { oldOnload( e ); drag(); }; } else window.onload = drag; } } cursor_text_circle(); </script>

ganti tulisan welcome to my site dengan yang kamu inginkan. jika mau ganti warna tulisan.,ganti kode warna yang ada di var color='#0000FF';