Effect Zoom Gambar MouseOver

Assalamualaikum Wr. Wb.

Jumpa Lagi pada kesempatan yang berbahgia ini Mantab's Blog sendiri akan berbagi masalah Tutorial Blog untuk sobat semua kali ini saya sendiri memposting masalah Cara Membuat Effect Gambar Membesar Saat Disentuh Mouse , effect zommer ini memang adalh cara mempercantik dan memperindah blog sangat banyak sekali tips atau cara karena dengan ada tutorial yang demikian blog kita akan terlihat indah atau bagus, emang sich tutorial ini sangat banyak di internet terutama blogger, Efect zommer ini adalah satu tips agar gambar di blog membesar pada saat di sorot mouse, jika gambar ukuran small maka dengan ada efect zoom ini gambar akan membesar pasti keren lo ... seperti blog saya sendiri yang telah saya pasang

Nah, Penasaran Kan ,Oke langsung pada pembahasan atau cara ...

1. Login ke akun blogger sobat.
2. Pilih Template
3. Pilih Edit HTML >> Lanjutkan >> Kasih centang "Expand Template Widget".
4. Cari kode ]]></b:skin> untuk mempermudah gunakan F3 atau Ctrl F.
5. Letakan kode di bawah ini tepat di atas kode ]]></b:skin>

.post img:hover {
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transform: scale(1.3);
-o-transform: scale(1.3);
-webkit-transform: scale(1.3); } 

Demikian yang bisa saya share dan sobat bisa  lihat hasilnya.Semoga postingan saya kali ini tentang Cara Membuat Effect Gambar Membesar Saat Disentuh Mouse dapat bermanfaat.

Sumber : http://djal-destar.blogspot.com/2013/03/cara-membuat-effect-gambar-membesar.html

More√

Memberi Effect Bergerak pada Tulisan dan Gambar di Blog

Yap , Assalamualaikum Wr. Wb.

Maaf baru update karena banyak kesibukan dan mood yang kurang dalam mengerjakan blog ini :D

Kali ini singkat saja yaak , saya mau memberi sedikit script untuk tulisan dan gambar agar bergerak :3
Contoh tulisan awalnya seperti ini ...

Lalu bisa di tambahkan script di bawah ini ~___~ :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script><script type='text/javascript'> $(document).ready(function()  { $('a').hover(function() { $(this).animate({ marginLeft:  '10px' }, 400); }, function() { $(this).animate({ marginLeft: 0 }, 400); }); });</script>

Ntar jadinya yaa kayak seperti ini deh :3

Bingung jelasinny , kalo gambar emang sulit di bedain :D
Kalau mau liat Live Preview aja langsung yaak :3 di http://rijalul.id-fb.com 

Sekian tutor singkat dari saya , apabila kurang jelas bisa contact info saja yaak :D
Wassalamualaikum Wr. Wb.

More√

Pasang Music di Blog

Music Player yang satu ini dapat ditampilkan pada blog tanpa mengganggu tampilan blog secara keseluruhan. Hanya dengan menampilkan Musik Player ini akan menggangu tampilan judul blog. Maksudnya, walaupun telah diatur judul blog akan berganti dengan judul postingan, jika dipasang Music Player ini yang tampil hanya judul/title blog.
Kelemahan lainnya, music Player ini tidak dapat menerima seluruh alamat/url MP3, terutama dari hosting gratisan seperti Ziddu.com maupun 4shared.com.
Sementara ini, admin menggunakan file mp3 yang disimpan pada Google site yang ternyata dapat berfungsi dengan baik.
Bagi anda yang ingin menampilkan Music Player dari SCM MusicPlayer dan tidak memiliki URL/alamat MP3 yang dapat diterima oleh SCM Music Player, terlebih dahulu anda harus menyimpan file MP3 ke Google Site. Caranya buka UPLOAD FILE JS DI GOOGLE SITES

Setelah memiliki file MP3 yang disimpan pada Google Site, ikuti tips berikut ini :

1. Buka Situs SCM Music Player
2. Pada halaman awal anda dapat memilih skin/tampilan dari Music Player.
   
   
   
   
   
   Klik tombol Next setelah memilih skin.


3. Halaman selanjutnya anda diminta untuk memasukkan judul lagu berta URL/alamat lagu pada format yang tersedia. Url bisa melalui pada saat kita mendownload lagu , ataupun bisa melewati YOUTUBE. 
   
   
   
   
   
   Anda dapat memasukkan lagu dengan jumlah sesuai koleksi file MP3 yang anda miliki (tidak dibatasi)
   Klik tombol Next setelah anda selesai memasukkan judul dan URL lagu yang ingin ditampilkan.


4. Pada langkah ketiga, anda dapat mengatur penampilan Music Player sesuai keinginan.
   
   1. Auto Start, pilih yes agar begitu blog dibuka musik akan langsung bermain.
   2. Shuffle Playback boleh anda pilih yes atau no
   3. Default Volume, pilih volume berapa yang anda inginkan.
   4. Placement of Player Bar, anda pilih sesuai letak yang diinginkan untuk menampilkan . Sebaiknya pilih bottom agar tidak terlalu menggangu tampilan blog.
   5. Show Playlist by Devault : pilih no. Jika anda memilih yes akan mengganggu tampilan blog.
   6. Setelah selesai dengan pengaturan diatas, klik tombol Done.
      


5. Langkah terakhir, silahkan anda copy script untuk menampilkan Musik Player, kemudian masukkan pada blog anda.
   

CARA MEMASUKKAN MUSIC PLAYER DARI SCM KEDALAM BLOG

1. Masuk Dasbor blog anda.
2. Pilih Rancangan - Elemen Halaman.
3. Klik Tambah Gadget
4. Pilih HTML/JavaScript
5. Masukkan script yang anda copy tadi pada kolom yang tersedia
6. Simpan.

Read more: http://epg-studio.blogspot.com/2012/04/pasang-musik-dari-scm-music-player.html#ixzz2O5I23wPB

More√

Thread Comment CSS Keren

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Tutorial kali ini, insyaAllah saya akan kembali membagikan kode CSS untuk dua modifikasi threaded comment blogger. Modifikasi berikut terhitung sebagai versi ke-3 dan ke-4 threaded comment yang pernah saya posting diblog ini, karena sebelumnya saya sudah pernah membagikan dua modifikasi yang berbeda.

Saya sematkan kata menarik dan keren pada modifikasi threaded comment kali ini bukan tak beralasan, sebab modifikasi ini telah memikat hati saya dan mungkin hal yang sama akan berlaku bagi anda pecinta warna. Ya karena letak dominan modifikasi kali ini pada permainan CSS background color dan CSS border.

Tertarik untuk mengganti threaded comment default blogger diblog anda dengan modifikasi threaded comment colored style ini? Silahkan ikuti langkah-langkah berikut:

Tutorial berikut hanya untuk blog yang telah mengaktifkan sistem threaded comment blogger. Jika anda belum mengaktifkan sistem threaded comment diblog anda, silahkan ikuti terlebih dahulu tutorial panduannya disini

CARA MENAMBAHKAN KODE CSS MODIFIKASI THREADED COMMENT

• Setelah login ke akun blogger anda
• Pada dasbor klik Template --> edit HTML
• Klikk Ctrl+F dan cari kode ]]></b:skin>
• Tambahkan kode CSS berikut diatas kode ]]></b:skin>

KODE CSS THREADED COMMENT MENARIK VERSI 3

#comments {
padding:10px;
}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4{background:#1aa1e2;}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #1aa1e2;border-right:20px solid transparent;width:0;height:0;line-height:0}
h4#comment-post-message {
display:none;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height:1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.comment .avatar-image-container {
border:1px solid #B6B6B6;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
max-height:60px;
margin-top:-10px;
width:60px;
position:relative;
z-index:70;
border:4px double #1aa1e2;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
-moz-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
-webkit-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
box-shadow:0 2px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
}

.comments .comments-content {
padding:5px;
font-size:11px;
}
.comment .comment-block {
margin-left:75px !important;
min-height:84px;
text-align:left;
}
.comment .comment-header {
background:none repeat scroll 0 0 #5D974C;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
color:#333;
font-size:12px;
font-weight:normal;
margin-left:60px;
}
.comment .comment-header a {
color:#fff !important;
text-decoration:none;
}
.comment .comment-content {
background:none repeat scroll 0 0 #FEFFF9;
border-bottom:2px solid #1aa1e2;
font-size:12px;
margin:0 0 30px;
padding:5px 5px 10px 10px;
text-align:left;
}
.comment .comment-actions a {
color:#860000;
display:inline-block;
line-height:1;
margin:0 3px;
padding:3px 6px !important;
text-decoration:none;
}
.comment-header cite {
background:none repeat scroll 0 0 #FD7000;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
color:#fff;border: 2px solid white;
padding:2px 5px;
position:relative;
z-index:99;
margin-left:-20px;
}
cite.blog-author {
background:none repeat scroll 0 0 #490077 !important;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
.icon.blog-author {
display:none !important;
background:url("") no-repeat scroll 0 0;
margin-left:90px;
width:60px !important;
height:60px !important;
position:absolute;
right:5px;
bottom:5px;
top:10px;
}
.comment .comment-header {
color:#333;
font-size:12px;
font-weight:bold;
}
.comment .avatar-image-container img {
border:medium none !important;
height:60px !important;
width:60px !important;
max-height:60px !important;
max-width:60px !important;
}
.comment .comment-actions a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
background:none repeat scroll 0 0 #1aa1e2 !important;
color:#FFF !important;
display:inline-block !important;
line-height:1 !important;
margin-top:-10px !important;
margin-right:2px !important;
padding:3px 6px !important;
text-decoration:none !important;
font-size:14px;
}
.comment .comment-actions a:hover {
background:#860000 !important;
text-decoration:none !important;
}
.comments {
font-size:1em;
color:#000;
}
.comments .continue a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
background:none repeat scroll 0 0 #04B404 !important;
color:#FFF !important;
display:inline !important;
line-height:1 !important;
margin-top:10px !important;
margin-right:2px !important;
padding:3px 6px !important;
font-size:13px;
}
.comments .continue a:hover {
background:#860000 !important;
color:#FFF;
text-decoration:none;
}
.item-control {
display:inline-block;
}
.comments .continue {
border-top:2px solid transparent !important;
}
#comment-editor {
width:103% !important;
}
.comment-form {
width:100%;
max-width:100%;
}
.comments .thread-toggle {
margin-bottom:10px;
}
.comments .comment-thread.inline-thread .comment {
margin:0 0 5px 15%;
}

KODE CSS THREADED COMMENT KEREN VERSI 4

#comments {
padding:10px;
}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4{background:#1aa1e2;}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #1aa1e2;border-right:20px solid transparent;width:0;height:0;line-height:0}
h4#comment-post-message {
display:none;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height:1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.comment .avatar-image-container {
border:1px solid #B6B6B6;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
max-height:60px;
margin-top:-10px;
width:60px;
position:relative;
z-index:70;
border:4px double #1aa1e2;- webkit-border-radius:100px;
-moz-border-radius: 100px; border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4); 
box-shadow: 0 1px 3px rgba(0, 0, 0, .4); 
} 
.comments .comments-content {
padding:5px;
font-size:11px;
}
.comment .comment-block {
margin-left:75px !important;
min-height:84px;
text-align:left;
}
.comment .comment-header {
background:none repeat scroll 0 0 #5D974C;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
color:#333;
font-size:12px;
font-weight:normal;
margin-left:60px;
}
.comment .comment-header a {
color:#fff !important;
text-decoration:none;
}
.comment .comment-content {
background:none repeat scroll 0 0 #FEFFF9;
border-bottom:2px solid #1aa1e2;
font-size:12px;
margin:0 0 30px;
padding:5px 5px 10px 10px;
text-align:left;
}
.comment .comment-actions a {
color:#860000;
display:inline-block;
line-height:1;
margin:0 3px;
padding:3px 6px !important;
text-decoration:none;
}
.comment-header cite {
background:none repeat scroll 0 0 #FD7000;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
color:#fff;border: 2px solid white;
padding:2px 5px;
position:relative;
z-index:99;
margin-left:-20px;
}
cite.blog-author {
background:none repeat scroll 0 0 #490077 !important;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
.icon.blog-author {
display:none !important;
background:url("") no-repeat scroll 0 0;
margin-left:90px;
width:60px !important;
height:60px !important;
position:absolute;
right:5px;
bottom:5px;
top:10px;
}
.comment .comment-header {
color:#333;
font-size:12px;
font-weight:bold;
}
.comment .avatar-image-container img {
border:medium none !important;
height:60px !important;
width:60px !important;
max-height:60px !important;
max-width:60px !important;
}
.comment .comment-actions a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
background:none repeat scroll 0 0 #1aa1e2 !important;
color:#FFF !important;
display:inline-block !important;
line-height:1 !important;
margin-top:-10px !important;
margin-right:2px !important;
padding:3px 6px !important;
text-decoration:none !important;
font-size:14px;
}
.comment .comment-actions a:hover {
background:#860000 !important;
text-decoration:none !important;
}
.comments {
font-size:1em;
color:#000;
}
.comments .continue a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
background:none repeat scroll 0 0 #04B404 !important;
color:#FFF !important;
display:inline !important;
line-height:1 !important;
margin-top:10px !important;
margin-right:2px !important;
padding:3px 6px !important;
font-size:13px;
}
.comments .continue a:hover {
background:#860000 !important;
color:#FFF;
text-decoration:none;
}
.item-control {
display:inline-block;
}
.comments .continue {
border-top:2px solid transparent !important;
}
#comment-editor {
width:103% !important;
}
.comment-form {
width:100%;
max-width:100%;
}
.comments .thread-toggle {
margin-bottom:10px;
}
.comments .comment-thread.inline-thread .comment {
margin:0 0 5px 15%;
}

Untuk demo bisa lihat pada blog personal saya disini. Demikian tutorial modifikasi threaded comment menarik dan keren versi 3 dan 4 kali ini. Semoga bermanfaat.

ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Sumber : http://www.tipstrikblogging.com/2013/02/dua-modifikasi-threaded-comments-yang.html

More√

Modul Blog SMA Negeri 3 Mojokerto

Baiklah tak usah berlama-lama lagi :D
Di sini saya akan memberikan file Modul Blog untuk SMA Negeri 3 Kota Mojokerto :3 Yang seperti di bawah ini :

Untuk linknya bisa di download DISINI 

Terima kasih :3 Saling berbagi :D

More√

Cara Mengubah Scroll Bar Blog

Cara Merubah Tampilan Scroll Bar di Blog - Bagi Anda yang ingin warna scroll bar Anda berubah seperti warna hitam ataupun warna hijau bisa saja! Dengan menggunakan script CSS Anda bisa merubah scroll bar Anda di Blog Anda. Bisa mempebesarnya ataupun memperkecil scroll bar blog Anda!

Scroll Bar

Caranya Merubah Tampilan Scroll Bar di Blog :

1. Buka Blogger.com > Rancangan > Edit HTML

2. Cari kata ]]></b:skin> dengan menekan tombol CTRL + F

3. Paste code berikut di atas ]]></b:skin>

::-webkit-scrollbar {height:12px;width: 12px;background: #ffffff ;}

::-webkit-scrollbar-thumb {background-color: #9e9e9e ;-moz-border-radius: 10px;border-radius: 10px;}

4. Paste diatas tinggal Anda ganti saja beberapa code yang saya tebalkan, ini berguna untuk mengganti warnanya. Kalau Anda bisa ganti semua kenapa tidak?

NB : Untuk Kode ffffff bisa di ganti dengan warna yang lain untuk warna background scroll. Dan untuk 9e9e9e silahkan di ganti dengan warna scroll yang anda inginkan.

Beberapa browser mungkin tidak support dengan kode ini tapi saya memakai Google Chrome code ini berfungsi kok!

More√

Cara Membuat Read More Otomatis

Membuat Read More Secara Otomatis di Blog - Jika template bawaan anda belum ada fitur Read more atau Baca selengkapnya tidah usah bingung tambahkan saja Script yang akan disajikan dalam Tutorial kali ini. Berikut cara membuat Read More otomatis untuk blog.

Pertama anda masuk dasbord blogger >> lalu pilih rancangan >> Pilih Edit HTML.
Jangan lupa centang Expand Template Widget.
Lalu cari kode </head>  untuk mempermudah pencarian tekan F3.

Masukan kode berikut tepat ditas </head>

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script>

<script type='text/javascript'>

//<![CDATA[

function removeHtmlTag(strx,chop){

if(strx.indexOf("<")!=-1)

{

var s = strx.split("<");

for(var i=0;i<s.length;i++){

if(s[i].indexOf(">")!=-1){

s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);

}

}

strx = s.join("");

}

chop = (chop < strx.length-1) ? chop : strx.length-2;

while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;

strx = strx.substring(0,chop-1);

return strx+'...';

}

function createSummaryAndThumb(pID){

var div = document.getElementById(pID);

var imgtag = "";

var img = div.getElementsByTagName("img");

var summ = summary_noimg;

if(img.length>=1) {

imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';

summ = summary_img;

}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';

div.innerHTML = summary;

}

//]]>

</script>

Belum selesai, cari lagi kode :  <data:post.body/>

Ganti kode  <data:post.body/>, dengan kode di bawah ini :

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>

<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);

</script>

<span class='rmlink' style='float:right;padding-top:20px;'>

<a expr:href='data:post.url'> <b>Read more</b> &#187;&#187;&#160;&#160; </a></span>

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>

</b:if>

Sampai disini lalu save template anda.

Selesai deh, untuk memastikannya coba lihat hasilnya.

Kata Read more warna merah dapat anda ganti dengan kata-kata selera anda, misalnya : Baca selanjutnya.

Demikianlah Tutorial cara Membuat Read More Secara Otomatis di Blog, semoga bermanfaat. Jangan lupa Like-nya.

More√

Arti Script Dalam HTML

Assalamualaikum Wr. Wb.

Kali ini saya menemukan postingan yang cukup menarik yaitu Arti Script HTML yang terdapat di postingan http://mrxsaga.blogspot.com/p/arti-script-pada-html.html :D Ini hanya saya Re-Post sekedar sharing :3 Silahkan langsung saja ini dia.

Berikut contoh Script yang ada pada HTML :

< html>* = Script umum yg wajib digunakan klo mau bikin HTML
< head>* = Script yg digunakan untuk membuat kepala HTML
< title>* = Script untuk judul
< body>* = Script untuk isi HTML
< h1> - < h6>* = Script untuk ukuran font pada title
< p> = Script untuk pemberian paragraf.
< br> = Script untuk pemberian line baru. Seperti enter. 
< b>* = Bold
< i>* = Italic
< u>* = Underline
< strong>* = Huruf menjadi tebal (mirip Bold)
< code>* = Huruf menjadi font Courier
< tt>* = Huruf menjadi font Teletype Writer
< sampp>* = Huruf menjadi font Code
< pre>* = Preformated Text. Semua spasi yang bukan script akan sama letaknya dengan yang ditulis. 
< ul>* = Membuat bullet. Pada line berikutnya harus ditulis < li> sebelum mengetik
< ol>* = Membuat angka. Sama seperti yg diatas
< caption> = Seperti bikin judul. Bedanya ini digunakan di 
< table border> = Gunanya untuk bikin tabel. Kalo selesai bikin tabel, tulisnya 
< tr>* = Membuat baris pada tabel
< td> = Membuat kolom pada tabel
< th> = Table Header, membuat kolom judul 


< table border>,< tr>,< td> dan < th> digunakan bersama klo mo bikin tabel.


< align=....> = Untuk mengatur letak tulisan. Klo kanan, right. Tengah, center dst. Klo mau ngatur letak judul, tulis awalan div. Jadinya < div align=...>

< colspan=....> = Untuk menggabungkan sekian kolom menjadi satu. (Isi bagian yang ksg. Kalau diisi dengan 3, maka 3 kolom menjadi satu

< rowspan=...> = Untuk menggabungkan sekian baris menjadi satu. (Isi bagian yang ksg. Kalau diisi dengan 5, maka 5 baris menjadi satu

< cellpadding=...> = Untuk memberi jarak antara setiap konten spt. kolom dan baris. (Isi bagian yang ksg. Semakin tinggi nilai yang diberikan semakin jauh jaraknya. Biasa diletakkan sesudah < table>. Sehingga menjadi < table cellpadding=...>

< width=...> = Untuk melebarkan tabel. Diisi dengan angka biasa maupun persentase
< font size=...> = Untuk mengubah ukuran font. (+) untuk memperbesar, (-) untuk memperkecil.
Contoh : < font size=+2>

< font face="......"> = Untuk mengubah tipe font. Untuk mempermudah, buka MS Word. Karena bagian ini case sensitive. Contoh : < font face="Comic Sans MS">


< a href="......"> = Untuk menyisipkan Hyperlink

Contoh script title :

< html>

< head>

< title>Judul Website< /title>

< /head>

< body>

< h1> h1 akan membuat tulisan berubah ukuran< /h1>

< h2> h2 akan membuat tulisan berubah ukuran< /h2>

< h3> h3 akan membuat tulisan berubah ukuran< /h3>

< h4> h4 akan membuat tulisan berubah ukuran< /h4>

< h5> h5 akan membuat tulisan berubah ukuran< /h5>

< /body>

Contoh script font :

< html>
< head>
< title>Mengubah style font< /title>
< /head>
< body> 
< b>Tulisan tebal< /b>
< br> 
< i>Tulisan miring< /i>
< br> 
< u>Garis bawah< /u>
< br>
< strong>Mirip seperti bold< /strong>
< br>
< code>Font mirip Courier< /code>
< br>
< em>Mirip seperti italic< /em>
< br>
< tt>Font teletype writer< /tt>
< br>
< sampp>Mirip kode< /sampp>
< br>
< center>Tulisan ditengah-tengah< /center>
< /body>
< /html>

Contoh script tabel :

< html>
< head>
< title>Tabel sederhana
< /head>
< body>
< table border=1>
< tr>
< td>Kolom pertama
< td>Kolom kedua
< td>Kolom ketiga
< /tr>
< tr>
< td>Satu
< td>Dua
< td>Tiga
< /tr>
< /body>
< /html>


*di akhir script, ketikkan script dengan slash untuk mengakhiri fungsi script.
Contoh : < b>Contoh Tulisan< /b>


Sebenarnya script-script ini tidak menggunakan spasi, terpaksa menggunakannya karena Script tsb. akan bergerak kalo mengetiknya dgn benar.

Sumber : http://mrxsaga.blogspot.com/p/arti-script-pada-html.html

More√

Loading Page dengan CSS3 by Djogzs

Assalamualaikum Wr. Wb.


Di sini saya akan mengshare karya yang membuat saya kagum :) Yaitu buatannya kak Djogzs :D Ini adalah Loading Page dengan CSS3 yang menarik :v Sudah saya pasang di BLOG saya sebagai Demonya xi xi xi :v Jika ada yang bermint bisa contact saya untuk pemasangan (Jika dekat :v) Atau contact kak Djogzs selaku creatornya :D

Nah jika ingin utak atik sendiri bisa langsung ke Linknya saja : http://djogzs.blogspot.com/2013/01/loading-page-dengan-css3-animasi.html

Maaf saya tidak bisa memberikan tutorial ini langsung dari blog saya, karena apa ? Karena saya menghormati pemilik aslinya :v

Sekian dari saya apabila ada kekurangan mohon maaf yang sebesar besarnya :v

Wassalamualaikum Wr. Wb.

More√

Mempercepat Loading Blog dengan Lazy Load

Assalamualaikum Wr. Wb.

Saya kali ini akan memberikan cara yaitu Salah satu cara mempercepat loading blog adalah dengan menunda penampilan gambar-gambar selama beberapa saat ketika sebuah blog di load oleh browser.

Dengan demikian kerja browser akan menjadi lebih ringan dan halaman blog menjadi lebih cepat terbuka.

Lazy Loading pada blogspot sangat mudah diterapkan, cukup dengan menyisipkan javascript dan jquery maka teknik ini akan dapat bekerja dengan sempurna.

Lazy Loading Blogger

Untuk menggunakan Lazy Loading Images pada blogspot, cukup sisipkan kode berikut tepat diatas </body>:

<!--:[ LAZY LOAD START ]:-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
<script src='http://mu5lim.googlecode.com/files/lazyload.js' type='text/javascript'/>
<script type='text/javascript'>
      $(function() {
          $(&quot;img&quot;).lazyload({placeholder : &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYEioA0ni-lCtXOt78FRV7__x4JcOG24YGR74RV6DeMOGekEY6dFTXd9Xq6pzoEsyE-XgWZgqhGmb11TgkHtetedh1ZfCmx3a6UqOgxTY9xddzEi7Jeu72lyALgn62NH4CVGnqyLf1DuQ/s1600/lazybg.png&quot;});
      });
</script>
<!--:[ LAZY LOAD END ]:-->

More√

Tukar Link

Assalamualaikum Wr. Wb.

Seperti logo di atas yaitu " Tukar Link Yuk! ", di sini saya akan memberikan sebuah page untuk saling bertukar link satu sama lain agar saling mengenal dan mengetahui blog masing-masing :3. Kalau ingin Link Blognya saya cantumkan, bisa Contact lewat 

>> Facebook << 

 >> Twitter << 

Atau tulis di komentar saja :v

Daftar Link :

• http://rijalul.id-fb.com 
• http://newlanicious.blogspot.com
• http://yussuffantastic.blogspot.com
• http://bayumanggalaputra.blogspot.com
• http://highac.blogspot.com/
• http://musikitukeren.blogspot.com/
• http://clints01.blogspot.com
• http://noikun.blogspot.com
• http://thephatar.blogspot.com

Jika ingin silahkan contact saya :3 Terima Kasih :v

More√

Cara Membuat Blog Archive dengan Scroll

Assalamualaikum Wr. Wb.

Kali ini saya akan memberikan tips yaitu tentang Cara Membuat Blog Archive Dengan Scroll.~ Hari ini saya akan membagi tips dan trik blogger yaitu bagaimana Cara Membuat Blog Archive Dengan Scroll. blog archive dengan scroll yaitu cara meminimalis tampilan blog archive agar tidak terlalu panjang. cara ini juga dapat membuat blog tidak begitu berat bila dibuka. bila sobat blog ingin mencobanya silahkan. saya akan memberikan tutorial caranya langkah pertama login blogspot anda. 

Berikut Cara Membuat Blog Archive Dengan Scroll p;:


Cari kode ]]></b:skin> dengan menggunakan Ctrl + F
Kemudian, letakkan kode berikut di atas kode ]]></b:skin>

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

Setelah di copas kode di atas lalu simpan template.. : )

Semoga berhasil

 Catatan : 
height:100px; adalah tinggi dari widget scroll. Ganti dengan tinggi widget scroll yang anda inginkan

Sumber : http://blogeko3.blogspot.com/2012/06/cara-membuat-blog-archive-dengan-scroll.html 

More√

Cara Mengganti Template

Assalamualaikum Wr. Wb.

Sebagaimana kita ketahui bahwa sekarang blogger telah berganti wajah baik di halaman home atau member areanya. Fitur dan menu-menunya tetap. Perubahan hanya pada tampilan. Perubahan tampilan ini sempat membingungkan saya terutama menu untuk mengganti templatenya. Untuk blogger pemula or newbi mungkin ini sangat penting.

Baiklah sobat. Saya akan jelaskan secara singkat bagaimana Cara mengganti Template di Blogspot Versi Terbaru.

Sebelum masuk ke cara di bawah, sebelumnya anda harus mendownload Template-Template kesukaan anda atau yang sesuai dengan anda. Untuk template tersebut bisa kunjungi web seperti :

1. http://www.zoomtemplate.com/

2. http://www.freewebtemplates.com/

3. http://www.themesbase.com/

4. http://www.freecsstemplates.org/

5. http://www.templatemonster.com/

6. http://www.free-css-templates.com/

7. http://blogtemplate4u.com/

8. http://blogger-templates.blogspot.com/

9.  http://myfreetemplatehome.com/

10. http://www.e-webtemplates.com/

11. http://www.oswd.org/

1. Buka dan login ke blogger.com lalu klik blog yang akan anda ganti templatenya.

2. Klik menu Template yang ada di sebelah kiri member area

3. Klik Cadangkan/pulihkan yang ada di sebelah kanan atas dan akan muncul window baru.

4. Di kolom yang tersedia klik Browse.

5. Pilih file template yang sudah anda simpan tadi lalu klik Enter.

6. Klik tombol Unggah.
7. Selesai. Template anda sudah berganti. Mudah bukan? 

    Semoga Bermanfaat

More√