Jika Engkau

Noah 

Intro: A C#m A C#m

A                  
Apa yang telah terjadi
           C#m
yang telah membuat kau tak mengerti
A
Maaf ku tak sadari
       C#m  
hingga membuat kau ingin pergi

Int: A C#m

A
Saat ku tak bicara
        C#m
berjuta kata yang ku ungkapkan
A
Walau kau tak merasa
      C#m
cinta yang ada begitu nyata

    F#m          E
Ku ingin engkau tahu berartinya dirimu
    F#m          E
Ku tak inginkan kau ragu aku kan bertahan dalam hidupmu

Chorus:

      A
Jika engkau pergi hilang dariku
      C#m
Meninggalkan mimpi dalam tidurku
   Bm          E
bersamamu dan tanpamu

Int: A F#m C#m
      A F#m C#m E

    F#m          E
Ku ingin engkau tahu berartinya dirimu
    F#m          E
Ku tak inginkan kau ragu aku kan bertahan dalam hidupmu

Chorus:

      A
Jika engkau pergi hilang dariku
     C#m
Meninggalkan mimpi dalam tidurku
    Bm        E
bersamamu dan tanpamu
      A
Jika engkau pergi hilang dariku
     C#m
Meninggalkan mimpi dalam tidurku
   Bm         E
bersamamu dan tanpamu

Outro: A C#m Bm E A

MOHON DOA RESTUTA

Cara Mengganti Gambar di Blogspot dengan gambar Sendiri

ara Mengganti Gambar di Blogspot dengan gambar Sendiri. sahabat Info Sinta menrasa bosan dengan Gambar bawaan Blogspot dan bermaksdu menggantinya sesuai keinginan anda, caranya cukup mudah tanpa perlu melakukan perubahan script pada template. Yang perlu anda lakukan cukup upload gambar yang akan diupload, kemudian atur perataan gambar selanjutnya klik tombol "apply to blog " maka secara otomatis gambar background blog akan berganti dengan gambar yang sudah di upload.

Untuk teman-teman yang tertarik mengganti background blog dengan gambar sendiri bisa ikuti prosedur berikut :

1. Login ke blogspot (blogger)

2. Pilih Rancangan - Perancang Template

3. Kemudian Pilih Background

Klik pada kotak "Background Image"

4.Akan tampil kotak dialog seperti di bawah ini.  Klik tombol "Upload Image"

5. Kemudian klik tombol "Choose file" untuk mencari file gambar yang ada di komputer

6. Setelah gambar selesai di upload, atur perataan gambar

 Alignment , tile atau scroll with page

7. Klik tombol Done (lihat gambar langkah 4 diatas)

Klik tombol Apply to Blog

Jika berhasil maka gambar background blog akan berubah dengan gambar sendiri yang telah diupload.

Contoh blog yang menggunakan template blogger designer yang telah diganti bacgroundnya bisa dilihat disini Background Blog

Beberapa fitur lain blogger designer (perancang template blogger) seperti mengatur footer, sidebar, lebar blog , dll bisa dilihat disini blogger template designer

nah sekian artikel saya tentang Cara Mengganti Gambar di Blogspot dengan gambar Sendiri, semoga bisa memberi manfaat buat kita semua

Trik Membuat Kotak Banner

Pada trik blogger kali ini, kita akan mencoba memperbaharui trik sebelumnya dengan menggunakan CSS3. Widget dikustomisasi untuk pemanfaatan banner berukuran 125×125. Setiap kode CSS dapat diletakkan sebelum ]]></b:skin> & HTML dimasukkan ke dalam penambahan gadget atau widget. Mari kita ikuti bersama trik membuat kotak banner yang dimaksud.

Widget Banner I

CSS

/* Area yang akan digunakan untuk memasang Banner */
.kotak-banner {
background:#999;
border:2px solid #c3c3c3;
margin:0 auto 1.7143em;
padding:2% 0 0 3%;
position:relative;
overflow:hidden;
width:300px;
}

/* Tempat untuk memasang Banner di atas kode ini */
.banner {
background:#c3c3c3;
-webkit-box-shadow:0px 2px 5px #666;
-moz-box-shadow:0px 2px 5px #666;
-o-box-shadow:0px 2px 5px #666;
-ms-box-shadow:0px 2px 5px #666;
box-shadow:0px 2px 5px #666;
float:left;
height:135px;
margin-right:3%;
margin-bottom:4%;
position:relative;
width:45.5%;
text-align:center;
-webkit-transition:all 0.5s linear;
-moz-transition:all 0.5s linear;
-o-transition:all 0.5s linear;
transition:all 0.5s linear;
}

/* Memunculkan title image saat di dekati tetikus (mouse) */
.banner a:hover:after {
background-color:rgba(0,0,0,0.25);
font-size:0.875em;
color:#000;
text-decoration:none;
content:attr(title);
left:4%;
bottom:3%;
width:92%;
position:absolute;
z-index:1;
}

.banner img {
margin-top:4%;
width:125px;
height:125px;
}

.banner:hover {
background:#f1f1f1;
-webkit-box-shadow:0px 0px 5px #fff;
-moz-box-shadow:0px 0px 5px #fff;
-o-box-shadow:0px 0px 5px #fff;
-ms-box-shadow:0px 0px 5px #fff;
box-shadow:0px 0px 5px #fff;
}

HTML

<div class="kotak-banner">
  <div class="banner"><a href="###" title="Banner 125x125"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2SvU1lUaMhpgEsJMWoHrDzZ95Q-PSkpcWyz8cUj3lmleKvRK3T8BvmwH3jaqtdVoYNH0WxEnrG5HIClPEYvqTVvQmN511xPcxKuLQhGIn6HuNMA6I-1y7cO5rTQ6h_81F7Msr7Jqxzkk/s800/125x125png.png" alt="Banner"/></a>
  </div>

...

</div>

Catatan:

• Copy & paste dimulai kode <div class="banner"> … </div> pada titik, titik,titik (...) untuk menambah banner.
• Ganti kode yang dicetak tebal dengan alamat website/halaman blog tujuan banner.
• Rubah title (warna biru) sesuai dengan title banner. Nah, title inilah yang akan muncul nantinya dalam banner kita, ketika banner di hover.
• Ganti gambar (warna ungu) sesuai dengan alamat gambar (banner) disimpan.
• Tambahkan alt seperti yang dicontohkan pada kode yang diberi warna hijau.

Widget Banner II

CSS

cara pengkodean hampir mirip dengan kode CSS pada “Widget Banner I”, cuma merubah background, border, dan ditambah sedikit variasi transform:scale (warna orange). Berikut gambaran kode CSS keseluruhannya.

.kotak-banner {
border:2px solid #444;
margin:0 auto 1.7143em;;
padding:2% 0 0 3%;
position:relative;
overflow:hidden;
width:300px;
}

.banner {
background:#444;
-webkit-box-shadow:0px 2px 5px #666;
-moz-box-shadow:0px 2px 5px #666;
-o-box-shadow:0px 2px 5px #666;
-ms-box-shadow:0px 2px 5px #666;
box-shadow:0px 2px 5px #666;
float:left;
height:135px;
margin-right:3%;
margin-bottom:4%;
text-align:center;
position:relative;
width:45.5%;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
}

.banner a:hover:after {
background-color:rgba(0,0,0,0.15);
font-size:0.875em;
color:#000;
text-decoration:none;
content:attr(title);
position:absolute;
left:4%;
bottom:3%;
width:92%;
z-index:1;
}

.banner img {
margin-top:4%;
width:125px;
height:125px;
}

.banner:hover {
background:#eee;
-webkit-box-shadow:0px 2px 5px #333;
-moz-box-shadow:0px 2px 5px #333;
-o-box-shadow:0px 2px 5px #333;
-ms-box-shadow:0px 2px 5px #333;
box-shadow:0px 2px 5px #333;
-webkit-transform:scale(1.1,1.1);
-moz-transform:scale(1.1,1.1);
-o-transform:scale(1.1,1.1);
-ms-transform:scale(1.1,1.1);
transform:scale(1.1,1.1);
z-index:5;
}

HTML

Untuk pengkodean dalam HTML sama persis dengan pengkodean pada “Widget Banner I”.

Widget Banner III (Rotasi Banner Random)

CSS

.kotak-banner {
background:#fff;
border:2px solid #d4d4d4;
margin:0 auto 1.7143em;
padding:2% 0 0 3%;
position:relative;
overflow:hidden;
width:300px;
}

.banner {
background:#fafafa;
-webkit-box-shadow:0px 2px 5px #666;
-moz-box-shadow:0px 2px 5px #666;
-o-box-shadow:0px 2px 5px #666;
-ms-box-shadow:0px 2px 5px #666;
box-shadow:0px 2px 5px #666;
float:left;
height:135px;
margin-right:3%;
margin-bottom:4%;
text-align:center;
position:relative;
width:45.5%;
-webkit-transition:all 0.5s linear;
-moz-transition:all 0.5s linear;
-o-transition:all 0.5s linear;
transition:all 0.5s linear;
-webkit-transform:rotate(-2deg);
-moz-transform:rotate(-2deg);
-o-transform:rotate(-2deg);
-ms-transform:rotate(-2deg);
transform:rotate(-2deg);
}

.banner:nth-child(even) {
-webkit-transform:rotate(4deg);
-moz-transform:rotate(4deg);
-o-transform:rotate(4deg);
-ms-transform:rotate(4deg);
transform:rotate(4deg);
}

.banner:nth-child(3n) {
-webkit-transform:none;
-moz-transform:none;
-o-transform:none;
-ms-transform:none;
transform:none;
position:relative;
}

.banner:nth-child(4n) {
-webkit-transform:rotate(-4deg);
-moz-transform:rotate(-4deg);
-o-transform:rotate(-4deg);
-ms-transform:rotate(-4deg);
transform:rotate(-4deg);
}

.banner a:hover:after {
background-color:rgba(0,0,0,0.25);
font-size:0.875em;
color:#000;
text-decoration:none;
content:attr(title);
position:absolute;
left:4%;
bottom:3%;
width:92%;
z-index:1;
}

.banner img {
margin-top:4%;
width:125px;
height:125px;
}

.banner:hover {
background:#fafafa;
-webkit-box-shadow:2px 4px 5px #333;
-moz-box-shadow:2px 4px 5px #333;
-o-box-shadow:2px 4px 5px #333;
-ms-box-shadow:2px 4px 5px #333;
box-shadow:2px 4px 5px #333;
-webkit-transform:scale(1.1,1.1);
-moz-transform:scale(1.1,1.1);
-o-transform:scale(1.1,1.1);
-ms-transform:scale(1.1,1.1);
transform:scale(1.1,1.1);
position:relative;
z-index:5;
}

HTML

Untuk pengkodean dalam HTML sama persis dengan pengkodean pada “Widget Banner I”.

Generalisasi

Anda pun dapat menambah, menghilangkan, & memodifikasi widget banner di atas sehingga sesuai dengan yang Anda inginkan. Berhubungan dengan “Widget Banner III” mungkin akan lebih baik jika diterapkan dalam image gallery. Lebih jelas tentang penggunaan CSS3 transform dalam polaroids—termasuk juga image gallery—dapat dipelajari pada website ZURBexpo.Silakan memilih bentuk widget banner yang Anda kehendaki.