1 Tutorial Cara Membuat Kotak Script Dalam Postingan Blogger Dengan Mudah

By Anonim | At September 13, 2018 | Label : Text Box | 1 Comments

Membuat Text Box Dalam Postingan - Dalam dunia blogger, selain konten yang berkualitas, tampilan blog yang menarik juga sangat dibutuhkan untuk membuat rasa nyaman pengunjung saat membaca artikel tersebut. Begitupun dengan informasi penting dalam artikel juga sangat diperhatikan dalam penulisannya, entah dengan menambahkan blockquote, cetak tebal dan sebagainya.

Salah satunya adalah penambahan kotak script atau text box yang disematkan ditengah-tengah penulisan. Seperti kotak/box yang berisikan script html, quote menarik maupun hal penting lainnya dengan dibingkai didalam kotak.

Seperti blog yang bertemakan tentang tutorial blogging, biasanya akan banyak mengunakan kotak/box semacam ini. Tujuannya biar terlihat menarik dan lebih tertata rapi, juga agar informasi berupa quote atau script html bisa mudah di copy-paste oleh pengunjung.

Baca juga Tutorial Cara Membuat Efek Zoom Otomatis Pada Gambar DI Blog

Cara Membuat Text Box Dalam Postingan Blog

Untuk cara membuat dan menyematkan Text Box dalam sebuah artikel cukup mudah. Langkah awal yang harus dilakukan adalah login dasboard blogger, buat laman post baru.

Pindah mode Compose ke mode HTML, copy script dibawah ini dan paste-kan di laman HTML tersebut

<div style="background-color: white; border: 3px #fffff double; padding: 10px; text-align: center;">
membuat text box dengan mudah </div>

Maka akan tampak seperti gambar dibawah ini.

Jika dilihat dari mode compose akan terlihat seperti ini

*Keterangan :

• padding 10px maksudnya panjang kotak kebawah dan untuk lebarnya mengikuti lebar dari theme blog

• backgroung-color :white digunakan untuk mengubah warna background dalam kotak

• text-align:center digunakan untuk merubah posisi tulisan dalam kotak, Anda bisa mengantinya dengan left atau right

• border: 3px untuk merubah ketebalan kotak dan #fffff (Hitam) untuk merubah warna kotak sedangkan Double merupakan bentuk kotak anda bisa menghilangkan kode ini atau mengantinya dengan script Outset, Dashed, Ridge, Dotted, Solid, dan Groove

Contoh kotak mengunakan Script Double dengan warna kotak aquamarin (#7FFFD4)

Contoh kotak mengunakan Script Dashed dengan warna kotak Brown (#A52A2A)

Contoh kotak mengunakan Script Dotted dengan warna kotak Pink (#FF1493)

Contoh kotak mengunakan Script Groove dengan warna kotak Merah (#FF0000)

Anda juga bisa membuat Kotak script atau Text box dengan variasi scroll, syaratnya tulisan didalam kotak box lebih banyak hingga melebihi batasan besarnya kotak. Atau dengan membuat ukuran text box nya lebih kecil.

Baca juga Panduan Menautkan (Embed) Status Instagram Kedalam postingan Blogger

Untuk membuat variasi seperti itu, Anda bisa menambahkan script height dan width kotak box juga menambahkan script overflow. Seperti contoh dibawah ini:

INI ADALAH CONTOH KOTAK SCROLL. SILAHKAN ANDA GANTI TULISAN INI DENGAN TULISAN ANDA

Kode Script yang MazzTutor masukkan sebagai berikut :

<center><div style="background-color: white; border: 3px double; height: 80px; overflow: auto; padding: 10px; text-align: center; width: 200px;">INI ADALAH CONTOH KOTAK SCROLL. SILAHKAN ANDA GANTI TULISAN INI DENGAN TULISAN ANDA</div></center>

Ubah Height: 80px dan width: 200px sesuai dengan kebutuhan, juga jangan lupa tambahkan script overflow: auto agar kotak box scroll bisa muncul.


Sumber: http://mazztutor.blogspot.com

0 Cara Membuat dan Menambahkan Header Right Untuk Masang Iklan

By Anonim | At September 11, 2018 | Label : LAYOUT | 0 Comments

Sesuai dengan gambar diatas. Itu merupakan hasil tambahan header menjadi 2. Biasa digunakan para blogger untuk menaruh iklan space. sayapun juga memasang iklan disitu. Template bawahan blogger tidak menyediakan itu, jadi kita membuatnya sendiri. Pada gambar diatas kolom sebelah kanan merupakan kolom yang akan kita buat/tambahan, kolom tambahan tersebut bisa kita gunakan untuk pasang Iklan atau lainnya terserah untuk apa anda inginkan, karena pada dasarnya kolom pada header sebelah kanan yang akan kita buat tersebut berfungsi sama dengan sidebar blog. Oke langsung saja kita praktekan :

Cara Pertama :

1. Buka Blogger - Login Blogger.
2. Dashboard - Template - Edit HTML.
3. Temukan kode ]]></b:skin>
4. Copy-Paste kode berikut ini, dan Letakkan diatas kode ]]></b:skin>

 

#header, body#layout #header {width:300px;display:inline-block;float:left;}
#header-right, body#layout #header-right {width:468px;display:inline-block;float:right;padding:15px;}
#header-right .widget {margin:0;}

Catatan:
Angka 300px (untuk space nama blog/logo di kiri) dan 468 (untuk space iklan di kanan) bisa diubah. Kalau ragu, biarkan seperti itu.

5. Jika sudah? Temukan lagi kode <a expr:href='data:blog.homepageUrl'><data:title/></a>

Maka Hasilnya Seperti ini :

<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>
</b:widget>
</b:section>
</div>
</div>

Screenshoot :

6. Copy & Paste kode berikut dan letakkan diantara kode </b:section> dan </div>

<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>

Maka Jika digabungkan hasilnya akan seperti ini :

<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>
</b:widget>
</b:section>
<b:section id='header-right' showaddelement='yes'/>
<div style='clear: both;'/>
</div>
</div>

7. Simpan Template!
8. Silakan Buka Tata Letak Apakah Berhasil. Jika Berhasil Silakan Pasang Iklan Sesuka Anda.

Untuk Percobaan Pasang Iklan di Blogger Anda :

1. Buka Tata Letak.
2. Header Right. ( Tata Letak Yang Barusan di Tambahkan )
3. Copy & Paste kode berikut untuk pasang iklan.

<!-- Start banner code MayCyber-Download -->
<div style="width: 428px; text-align: center; font-family: verdana; font-size: 10px;"><a href="http://rumahweb.com"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH-tFA4n-PB8paT9wBJ4KazC3uEs28Zckb9Mt6BKU-LHBT61N6dQIJ8cQui4uUqSmwdRVnuqHa7YKacwjPs53P0WMwlUfWrfE0UvoKuuMjtsjcr5jUaKqyhGXwGo8yx_GC7uZj-I5ATWVF/s1600/beli+domain+custom+blog.jpg" width="628" height="70" title="Custom Your Domain!" /></a><br /></div>

4. Simpan!

Bagaimana? Mudah bukan, Jika terjadi kesalahan jangan ragu-ragu untuk berkomentar, nanti saya akan memberi solusinya. Sekian dari saya, Semoga Bermanfaat!

© MayCyber-Download

0 2 Cara Mudah Menambahkan Efek Bayangan Pada Gambar Blogger

By Anonim | At September 10, 2018 | Label : POST IMG | 0 Comments

Cara Mudah Membuat dan Menambahkan Efek Bayangan Pada Gambar Blogspot- agar gambar postingan terlihat seperti ada banyangnya dalam bahasa koding maka kita harus memberinya sebuah efek yang bernama shadow , bukan pak shadow tetangga kalian ya ? hehhe . Sesuai namanya efek shadow ini berfungsi untuk memberikan gambar seolah - olah ada kayak bayangan hantu gitu , dimana kita cukup meletakan fungsi di dalam css

Dengan adanya efek shadow pada image artikel blog sobat maka akan membuat kesan blog anda akan terlihat lebih cantik dari sebelumnya , tapi ada orang yang gak suka dengan efek ini , saya tidak tahu apa alasanya , karena selera orang itu beda - beda . Termasuk saya ini orang yang suka efek shado , namun tak memasangnya di blog saya.

Cara Pertama Memberi Efek Bayangan di Gambar Blog

Kalau cara yang pertama ini nanti semua gambar yang ada di dalam postingan blog anda akan secara otomatis ada efek shadownya , jadi anda tak perlu repot ngasih satu persatu pada div gambar secara manual , karena hal itu menyita waktu dan tenaga kita.

1. Pertama silahkan sobat pergi ke editor template blogger seperti biasanya dengan cara memilih menu template => edit html cari kode]]></b:skin>
2. Kemudian pada post gambar kita kasih deh efek shdownya , caranya adalah kita pasang kode dibawah ini tepat diatas kode]]></b:skin>

   .post-body img{background:#FFF;/* the background color around the image */
   padding:15px;/* The Space Between Border and Image */
   border-radius:50% 0;/* Rounded border */
   box-shadow:0 0 15px #000;/* Shadow */
   -moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s}
   .post-body img:hover{border-radius:0;/* This removes the border roundness (value 0) */
   -moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s;cursor:pointer}

3. Simpan Template dan lihat hasilnya

Opsi Kedua Membuat Efek shadw pada Gambar Blog

Kalau sobat hanya pada gambar tertentu yang akan diberikan efek shadow , maka jangan gunakan cara pertama diatas , gunakanlah cara ini , karena cara ini menggunakan cara manual , yang nantinya kita akan memberikan efek bayangan pada gambar yang kita inginkan.

1. Ketika mengupload sebuah gambar pada postingan blog , pada bagian HTML ( bukan compose ) terdapat kurang lebih kode gambar seperti ini

   <div class="separator" style="clear: both; text-align: center;">
   .....bla....bla.....bla.....
   </div>

2. Kemudian kita tambahkan kode box-shadow: 3px 3px 8px #000; ke dalam <div class="separator" style="clear: both; text-align: center;">
3. Sehingga nantinya kodenya akan berubah menjadi power rangers seperti ini :

   <div class="separator" style="box-shadow: 3px 3px 8px #000; clear: both; text-align: center;">

4. Terkahir kita pratinjau terlebih dahulu , jika ada efek banyanganya tinggal publikasikan

Nah itulah 2 Cara Gampang Membuat sekaligus Menambahkan Efek Bayangan Pada Semua Gambar di Blogger . silahkan sobat pilih salah satu dari kedua opsi tersebut , jika suka yang otomatis pakai yang opsi satu , jika pakai yang manual silahkan pakai cara kedua. demikian tutorial memberikan efek shadow pada image blog semoga bermanfaat bagi sobat yang membutuhkan

Sumber: masyadi.com

1 Cara Membuat Tombot Button Pada Tabel

By Anonim | At September 10, 2018 | Label : TOMBOL BUTTON | 1 Comments

<div class="widget-content">
<div class="box">
<h3>
</h3>
<div class="textwidget">
<style type="text/css">
.myButton {
 -moz-box-shadow: 0px 1px 0px 0px #f0f7fa;
 -webkit-box-shadow: 0px 1px 0px 0px #f0f7fa;
 box-shadow: 0px 1px 0px 0px #f0f7fa;
 background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #33bdef), color-stop(1, #019ad2));
 background:-moz-linear-gradient(top, #33bdef 5%, #019ad2 80%);
 background:-webkit-linear-gradient(top, #33bdef 5%, #019ad2 80%);
 background:-o-linear-gradient(top, #33bdef 5%, #019ad2 80%);
 background:-ms-linear-gradient(top, #33bdef 5%, #019ad2 80%);
 background:linear-gradient(to bottom, #33bdef 5%, #019ad2 80%);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#33bdef', endColorstr='#019ad2',GradientType=0);
 background-color:#33bdef;
 -moz-border-radius:6px;
 -webkit-border-radius:6px;
 border-radius:6px;
 display:inline-block;
 cursor:pointer;
 color:#ffffff;
 font-family:arial;
 font-size:15px;
 font-weight:bold;
 padding:0px 24px;
 text-decoration:none;
 text-shadow:0px -1px 0px #5b6178;
}
.myButton:hover {
 background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #019ad2), color-stop(1, #33bdef));
 background:-moz-linear-gradient(top, #019ad2 5%, #33bdef 80%);
 background:-webkit-linear-gradient(top, #019ad2 5%, #33bdef 80%);
 background:-o-linear-gradient(top, #019ad2 5%, #33bdef 80%);
 background:-ms-linear-gradient(top, #019ad2 5%, #33bdef 80%);
 background:linear-gradient(to bottom, #019ad2 5%, #33bdef 80%);
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#019ad2', endColorstr='#33bdef',GradientType=0);
 background-color:#019ad2;
}
.myButton:active {
 position:relative;
 top:1px;
}




.tftable {font-size:9px;color:#000;width:100%;border-width: 1px;border-color: red;border-collapse: collapse;}
.tftable th {font-size:9px;background-color:red;border-width: 1px;padding: 4px;border-style: solid;border-color: #000;text-align:left;}
.tftable tr {background-color:#fff;}
.tftable td {font-size:12px;border-width: 1px;padding: 8px;border-style: solid;border-color: #000;}
.tftable tr:hover {background-color:yellow;}
</style>

<br />
<table border="1" class="tftable">

<tbody>
<tr>
<th><span style="color: black;">NAMA POKER</span></th>
<th><span style="color: black;">M.DEPOSIT</span></th>
<th><span style="color: black;">PENDAFTARAN</span></th>
</tr>
<tr>
<td><b>GARUDAQQ</b></td>
<td>20.000</td>
<td><a class="myButton" href="http://www.kemonas.com/?ref=garuda99" rel="nofollow" target="_blank">Daftar</a></td>
</tr>
<tr>
<td><b>RatuQQ</b></td>
<td>20.000</td>
<td><a class="myButton" href="http://www.ratuqiu.me/" rel="nofollow" target="_blank">Daftar</a></td>
</tr>
<tr>
<td><b>IMCQQ</b></td>
<td>25.000</td>
<td><a class="myButton" href="http://tasqq.com/" rel="nofollow" target="_blank">Daftar</a></td>
</tr>
<tr>
<td><b>IBCQQ</b></td>
<td>50.000</td>
<td><a class="myButton" href="http://ibcqq.me/" rel="nofollow" target="_blank">Daftar</a></td>
</tr>
<tr>
<td><b>365QiuQiu</b></td>
<td>25.000</td>
<td><a class="myButton" href="http://www.365maindomino.com/?ref=qiu365" http:="" rel="nofollow" target="_blank" www.cemeonline.com="">Daftar</a></td>
</tr>
<tr>
<td><b>ADUQQ</b></td>
<td>25.000</td>
<td><a class="myButton" href="http://adukiukiu.co/?ref=4duQQ" rel="nofollow" target="_blank">Daftar</a></td>
</tr>
<tr>
<td><b>RATUCAPSA</b></td>
<td>50.000</td>
<td><a class="myButton" href="http://www.ratucapsa.online/" target="_blank">Daftar</a></td>
</tr>
<tr>
<td><b>ZYNGAQQ</b></td>
<td>25.000</td>
<td><a class="myButton" href="http://www.zynga365.com/?ref=ZyngaQ809" rel="nofollow" target="_blank">Daftar</a></td>
</tr>
<tr>
<td><b>PIALAQQ</b></td>
<td>25.000</td>
<td><a class="myButton" href="http://pialaqq.me/?lang=id&amp;ref=PialaQ99" rel="nofollow" target="_blank">Daftar</a></td>
</tr>
<tr>
<td><b>SBOQQ</b></td>
<td>25.000</td>
<td><a class="myButton" href="http://www.sboqqasia.com/" rel="nofollow" target="_blank">Daftar</a></td>
</tr>
<tr>
<td><b>INIDEWA365</b></td>
<td>50.000</td>
<td><a class="myButton" href="http://www.indodewa365.com/?ref=567289" rel="nofollow" target="_blank">Daftar</a></td>
</tr>
<tr>
<td><b>FT95</b></td>
<td>50.000</td>
<td><a class="myButton" href="http://www.ft95.org/" rel="nofollow" target="_blank">Daftar</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

NAMA POKER	M.DEPOSIT	PENDAFTARAN
GARUDAQQ	20.000	Daftar
RatuQQ	20.000	Daftar
IMCQQ	25.000	Daftar
IBCQQ	50.000	Daftar
365QiuQiu	25.000	Daftar
ADUQQ	25.000	Daftar
RATUCAPSA	50.000	Daftar
ZYNGAQQ	25.000	Daftar
PIALAQQ	25.000	Daftar
SBOQQ	25.000	Daftar
INIDEWA365	50.000	Daftar
FT95	50.000	Daftar

0 Cara Menghapus Credit Link Yang Redirect Pada Template Blog 100% Berhasil

By Anonim | At September 09, 2018 | Label : CREDIT LINK | 0 Comments

Pernahkah anda mengunduh sebuah template lalu anda menggunakannya pada web atau blog anda, namun pada template tersebut terdapat link credit pada bagian bawah atau footer yang bertuliskan nama pembuat template tersebut. Apabila anda mencoba menghapus link tersebut maka secara otomatis web atau blog anda akan mengarah langsung ke halaman web si pembuat template tersebut, karena mereka tidak ingin anda menghilangakan link credit tersebut. Hal tersebut dikarenakan si pembuat template telah menanamkan kode javascript pada template tersebut yang dimana apabila anda menghapus link credit tersebut akan membuat web anda akan mengarahkan otomatis ke halaman web si pembuat template.

Biasanya si pembuat template akan melakukan hal tersebut jika template hasil buatannya dibagikan secara gratis sebagai bentuk respect kepadanya dengan tidak menghilangkan link credit tersebut. Namun, apabila template itu berbayar tentu anda bebas menghapus atau mengubah link credit tersebut.

Sebagai seorang blogger pemula biasanya enggan untuk membeli sebuah template dan selalu menginginkan sesuatu yang gratis. Alhasil, jika anda menggunakan sebuat template yang gratis, maka anda tidak bisa menghilangkan link credit yang ada pada template tersebut.

Namun jangan khawatir, disini saya akan memberikan tips dan trik cara menghilangkan link credit tanpa membuat halaman blog atau web anda mengarahkan kepada halaman si pembuat template.



Ada dua cara melakukan hal tersebut:

1. Menggunakan CSS untuk menyembunyikan credit tersebut

2. Menghapus kode javascript pada template tersebut.


Mari kita bahas satu persatu.


 1. Menggunakan atau menambahkan CSS pada template.


Caranya:


- Buka laman blogger.com dan login ke akun blogger anda.


- Pilih menu Template Kemudian Klik Edit HTML




- Cari Kode link creadit seperti dibawah ini, biasanya terletak pada bagian bawah atau tag footer.






- Kemudian tambahkan kode CSS  style="visibility:hidden;"   seperti pada gambar yang bergaris bawah.

- Kemudia simpan. dan selesai.

Dengan cara itu kita hanya menyembunyikan link credit yang pada pada bagian footer template.




2. Cara Kedua: Menghapus kode javascript pada template.

Caranya:

- Masuk pada bagian Edit Template seperti sebelumnya

- Cari kode seperti gambar dibawah ini




- Blok kode dari tag   //<![CDATA[    sampai    //]]>


- Kemudian tekan tombol Delete atau Hapus.


- Selanjutnya silahkan Hapus kode credit link pada bagian footer seperti gambar dibawah






- Kemudian simpan. Selesai.


Dengan cara ini, anda telah menghapus kode javascript dan credit link pada template.


Silahkan gunakan salah satu cara diatas, anda tidak perlu melakukan kedua-duanya.