0 MENAMBAHKAN FRAME DAN BACKGROUND PADA BLOCKQUOTE

Lihat gambar berikut:

Jadi, blockquote semacam kutipan atau cara untuk membuat sebuat tulisan lebih menonjol dibanding tulisan lain dalam sebuah post.

Untuk membuat blockquote, tinggal block tulisan (lihat no.1) dan klik tanda kutip ( " ) seperti pada nomor 2.

Lalu bagaimana membuat frame dan background pada blockquote secara otomatis??

Blockquote dengan frame dan background

1. Login ke akun blogger

2. Template >> Edit HTML

3. Cari kode berikut dengan cara tekan ctrl dan huruf F secara bersamaan pada keyboard PC kamu

]]></b:skin>

4. Masukkan kode berikut sebelum atau di atas kode ]]></b:skin>

Untuk frame dengan background warna atau tanpa gambar:

.post blockquote {
background:#FF4848;

padding: 5px;
Border: 2px dashed #0000CE;

moz-border-radius: 25px 10px / 10px 25px;

border-radius: 25px 10px / 10px 25px;

colour:#0000CE;

}

Untuk frame dengan background gambar:

.post blockquote {
background:url(masukkan url gambar);
padding: 5px;
Border: 2px dashed #0000CE;

moz-border-radius: 25px 10px / 10px 25px;

border-radius: 25px 10px / 10px 25px;

colour:#0000CE;
}

FF4848 - warna background kotak blockquote
2 - ketebalan garis border kotak
dashed - style garisan border. Bisa diganti dengan dashed, solid atau dotted
          solid adalah garisan lurus, ___________
          dotted adalah garisan titik-titik, …………………….
          dashed adalah garisan putus-putus, _ _ _ _ _ _ _
0000CE- warna garis border. Rujuk kod warna di bawah
*Untuk kode warna bisa cari di SINI

*Url gambar bisa cari di SINI

5. Save dan lihat hasilnya

Selamat mencob

0 Cara Mengatasi Konten Artikel Yang Menembus Bidang Posting

Ketika kita menerbitkan atau mem-posting suatu artikel, semestinya kalimat dalam artikel yang diterbitkan secara otomatis dipindah ke baris kedua, ketiga, dan seterusnya bila telah mencapai batas kanan bidang posting, sehingga akhirnya membentuk suatu alinea yang tertata rapi. Namun bukan tidak mungkin diantara sobat Blogger ada yang pernah mengalami hal seperti ini, yaitu ketika menerbitkan sebuah artikel yang di dalamnya mengandung konten kode HTML, CSS, Java Script, dan atau kode yang lain, tapi yang terjadi pada konten tersebut malah menembus atau melewati batas bidang posting. Dan bahkan terkadang malah menimpa konten yang terdapat pada sidebar sisi bagian kanan.

*Klik pada gambar untuk memperbesar tampilan.

Coba perhatikan gambar di atas. Pada gambar di atas (dalam hal ini adalah bagian yang ditandai dengan gambar anak panah) dapat dilihat bahwa terdapat konten dari artikel tersebut yang melewati batas bidang posting, dan bahkan sampai menembus bidang sidebar sebelan kanan. Hal tersebut terjadi karena script yang terdapat dalam konten artikel tidak dapat diratakan secara otomatis untuk membentuk suatu alinea, sehingga akhirnya menembus batas bidang posting.

Ada beberapa jenis browser atau peramban yang dapat meratakan secara otomatis konten dalam bentuk script sehingga tidak melewati batas bidang posting dan akhirnya membentuk suatu alinea. Namun pada browser tertentu konten dalam bentuk script tidak dapat diratakan secara otomatis untuk membentuk suatu alinea, sehingga akhirnya menembus atau melewati batas bidang posting.

Berdasarkan uraian tersebut, maka perlu dilakukan antisipasi agar konten tidak lagi menembus batas bidang posting apabila artikel dibuka dengan menggunakan peramban yang tidak mendukung perataan script secara otomatis. Dimana hal ini dapat dilakukan dengan menambahkan bingkai dengan scroll untuk konten yang dimaksud, sehingga akhirnya konten tidak lagi menembus batas bidang posting seperti yang tampak pada gambar di bawah ini.

*Klik pada gambar untuk memperbesar tampilan.

Pada gambar di atas dapat dilihat bahwa konten dalam bentuk script yang terdapat dalam artikel tersebut tidak lagi menembus batas bidang posting, karena telah dibatasi oleh bingkai dengan scroll. Sedangkan untuk membuat bingkai dengan scroll yang akan diterapkan untuk konten, maka dapat dilakukan dengan menambahkan kode di bawah ini.

 cari kode

.post-body blockquote{

 lalu tambahkan kode untuk lebarnya

 overflow: auto;

max-width: auto;

 atau tinginya tambahkan kode berikut ini

 overflow: auto;

max-hight: auto;

<div style="background-color: inherit; border: 1px solid rgb(33, 33, 33); margin: 0px; overflow: auto; padding: 10px; text-align: justify; height: auto; width: auto;">

------------ konten ------------

</div>

Namun perlu diingat bahwa penambahan script tersebut hanya dapat dilakukan dengan menggunakan editor Blogger dalam mode ‘HTML’ dan bukan dalam mode ‘Compose’. Sehingga pada akhirnya setelah artikel diterbitkan, maka konten tidak lagi menembus batas bidang posting apabila artikel dibuka dengan menggunakan peramban yang tidak mendukung perataan script secara otomatis karena konten telah dibatasi oleh sebuah bingkai.

0 Cara membuat blockquote efek hover

Pada entri sebelum ini aku sudah menuliskan tentang cara membuat blockquote pada blog dan sekarang aku akan menuliskan tutorial cara membuat blockquote efek hover apabila anak panah cursor menuju text yang ditandai blockquote terjadi hover caranya sebagai berikut:

1.Login > Dashboard > Template > edit HTML

2.Expand template widget dan tekan F3 atau CTRL + F serentak dan cari kode berikut:

/*  Headings

----------------------------------------------- * /

Di bawah kode di atas terdapat kode berikut (lanjutan posting sebelum ini):

 .post blockquote {
background:#ECFFFF;
padding: 5px;
border: 1px dashed #FFC1E0;
border-left: 5px solid #FFCBB3;
colour:#FFFFFF;
}

Tambahkan kode di bawah ini, atau seperti kode yang aku tandai warna merah di bawah nanti itu kodenya:

 blockquote:hover { border: 1px dashed #eeeeee;
border-left: 10px solid #FF95CA;
box-shadow: inset 0px 0 800px 0 #FFD9EC;
padding: 2px;
-webkit-transition-duration: 1.5s;
border-radius: 10px;
}

Jadinya seperti di bawah ini (lanjutan artikel sebelum ini) letakkan di bawah kode /*  Headings :

.post blockquote {

background:#ECFFFF;

padding: 5px;

border: 1px dashed #FFC1E0;

border-left: 5px solid #FFCBB3;

colour:#FFFFFF;

} 

blockquote:hover {

border: 1px dashed #eeeeee;

border-left: 10px solid #FF95CA;

box-shadow: inset 0px 0 800px 0 #FFD9EC;

padding: 2px;

-webkit-transition-duration: 1.5s;

border-radius: 10px;

}

Contoh gambar:

 

sebelum

sesudah

0 Macam Aneka Warna Tombol (button) Demo Download Dengan Css

Penggunaan tombol demo atapun download dengan menggunakan css warna gradient atau menggunakan gambar/image sebagai bentuk tampilan tombol tentu tidak menjadi persoalan, itu tergantung kita meramu dan menyesuaikan bentuk dan warna yang sesuai dengan latar (background), penggunaan script css untuk membuat tombol/button pada blog akan mempermudah pemilik blog untuk memodifikasi, baik bentuk, ukuran dan warna, mungkin itu salah satu kelebihan dari script menggunakan css.

Dibawah ini ada beberapa macam warna dari tombol yang bisa kalian pergunakan untuk tombol demo atau pun tombol dowload pada blog kalian, tentunya dengan pilihan warna yang ada bisa menyesuaikan dengan latar atau background template kalian (kalau ada yang cocok). Seperti pada postingan sebelumnya mengenai modifikasi tampilan spoiler, pada post tersebut tampilan button spoiler saya modifikasi dengan menggunakan css tombol begitu juga untuk memodifikasi textarea, jika kalian ingin memodifikasi spoiler atau textarea yang kalian pergunakan, kalian bisa menggunakan tombol ini sebagai pengganti tombol spoiler default.

Seperti apa bentuk dan warna tombol demo atau tombol download yang saya share ini, kalian bisa melihatnya dengan meng-klik link demo dibawah ini.

Ada yang terpilih? jika ya, kalian bisa menggunakan script css dan html dibawah ini untuk diterapkan pada blog kalian.

Html

<a href="#" class="tombol">Keterangan</a>

Untuk HTML perhatikan nama selector-nya, dalam contoh menggunakan class="tombol" kalian sesuaikan namanya dengan nama selector yang dipilih, sebagai contoh class="tombol5"

Css Button 1

.tombol1 {
color:#787878;
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
font-weight:bold;
padding:6px 30px;
text-decoration:none;
text-shadow:1px 1px 0px #ffffff;
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
border:1px solid #dcdcdc;
display:inline-block;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff; 
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
background-color:#ededed;
}
.tombol1:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
background-color:#dfdfdf;
}
.tombol1:active {
position:relative;
top:1px;
}

Css Button 2

.tombol2 {
color:#575757;
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
font-weight:bold;
padding:6px 30px;
text-decoration:none;
text-shadow: 0px 1px 0px #B0B0B0;
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
border:1px solid #8c8a8c;
display:inline-block;
-webkit-box-shadow:inset 0px 1px 0px 0px #c9c9c9;
-moz-box-shadow:inset 0px 1px 0px 0px #c9c9c9;
box-shadow:inset 0px 1px 0px 0px #c9c9c9;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #9c9c9c), color-stop(1, #787678) );
background:-moz-linear-gradient( center top, #9c9c9c 5%, #787678 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#9c9c9c', endColorstr='#787678');
background-color:#9c9c9c;
}
.tombol2:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #787678), color-stop(1, #9c9c9c) );
background:-moz-linear-gradient( center top, #787678 5%, #9c9c9c 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#787678', endColorstr='#9c9c9c');
background-color:#787678;
}
.tombol2:active {
position:relative;
top:1px;
}

Css Button 3

.tombol3 {
color:#a8a8a8;
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
font-weight:bold;
padding:6px 30px;
text-decoration:none;
text-shadow:0px 1px 0px #000000;
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
border:1px solid #8a8a8a;
display:inline-block;
-webkit-box-shadow:inset 0px 1px 0px 0px #aba9ab;
-moz-box-shadow:inset 0px 1px 0px 0px #aba9ab;
box-shadow:inset 0px 1px 0px 0px #aba9ab;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #7a7a7a), color-stop(1, #000000) );
background:-moz-linear-gradient( center top, #7a7a7a 5%, #000000 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7a7a7a', endColorstr='#000000');
background-color:#7a7a7a;
}
.tombol3:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #000000), color-stop(1, #7a7a7a) );
background:-moz-linear-gradient( center top, #000000 5%, #7a7a7a 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#7a7a7a');
background-color:#000000;
}
.tombol3:active {
position:relative;
top:1px;
}

Css Button 4

.tombol4 {
color:#b58a0b;
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
font-weight:bold;
padding:6px 30px;
text-decoration:none;
text-shadow:0px 1px 0px #ffee66;
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
border:1px solid #f2cc59;
display:inline-block;
-webkit-box-shadow:inset 0px 1px 0px 0px #fffcbd;
-moz-box-shadow:inset 0px 1px 0px 0px #fffcbd;
box-shadow:inset 0px 1px 0px 0px #fffcbd;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffec64), color-stop(1, #f2cc59) );
background:-moz-linear-gradient( center top, #ffec64 5%, #f2cc59 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffec64', endColorstr='#f2cc59');
background-color:#ffec64;
}
.tombol4:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f2cc59), color-stop(1, #ffec64) );
background:-moz-linear-gradient( center top, #f2cc59 5%, #ffec64 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2cc59', endColorstr='#ffec64');
background-color:#f2cc59;
}
.tombol4:active {
position:relative;
top:1px;
}

Css Button 5

.tombol5 {
color:#b04600;
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
font-weight:bold;
padding:6px 30px;
text-decoration:none;
text-shadow:0px 1px 0px #dbb172;
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
border:1px solid #eeb44f;
display:inline-block;
-webkit-box-shadow:inset 0px 1px 0px 0px #fceaca;
-moz-box-shadow:inset 0px 1px 0px 0px #fceaca;
box-shadow:inset 0px 1px 0px 0px #fceaca;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f1ad0e), color-stop(1, #db7c15) );
background:-moz-linear-gradient( center top, #f1ad0e 5%, #db7c15 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f1ad0e', endColorstr='#db7c15');
background-color:#f1ad0e;
}
.tombol5:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #db7c15), color-stop(1, #f1ad0e) );
background:-moz-linear-gradient( center top, #db7c15 5%, #f1ad0e 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#db7c15', endColorstr='#f1ad0e');
background-color:#db7c15;
}
.tombol5:active {
position:relative;
top:1px;
}

Css Button 6

.tombol6 {
color:#ffc2c2;
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
font-weight:bold;
padding:6px 30px;
text-decoration:none;
text-shadow:0px 1px 0px #9e0b00;
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
border:1px solid #d02718;
display:inline-block;
-webkit-box-shadow:inset 0px 1px 0px 0px #faa199;
-moz-box-shadow:inset 0px 1px 0px 0px #faa199;
box-shadow:inset 0px 1px 0px 0px #faa199;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f24537), color-stop(1, #c62d1f) );
background:-moz-linear-gradient( center top, #f24537 5%, #c62d1f 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f24537', endColorstr='#c62d1f');
background-color:#f24537;
}
.tombol6:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #c62d1f), color-stop(1, #f24537) );
background:-moz-linear-gradient( center top, #c62d1f 5%, #f24537 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#c62d1f', endColorstr='#f24537');
background-color:#c62d1f;
}
.tombol6:active {
position:relative;
top:1px;
}

Css Button 7

.tombol7 {
color:#0f7d1c;
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
font-weight:bold;
padding:6px 30px;
text-decoration:none;
text-shadow:0px 1px 0px #7fc70c;
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
border:1px solid #74b807;
display:inline-block;
-webkit-box-shadow:inset 0px 1px 0px 0px #a4e271;
-moz-box-shadow:inset 0px 1px 0px 0px #a4e271;
box-shadow:inset 0px 1px 0px 0px #a4e271;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #89c403), color-stop(1, #77a809) );
background:-moz-linear-gradient( center top, #89c403 5%, #77a809 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#89c403', endColorstr='#77a809');
background-color:#89c403;
}
.tombol7:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #77a809), color-stop(1, #89c403) );
background:-moz-linear-gradient( center top, #77a809 5%, #89c403 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#77a809', endColorstr='#89c403');
background-color:#77a809;
}
.tombol7:active {
position:relative;
top:1px;
}

Css Button 8

.tombol8 {
color:#11488f;
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
font-weight:bold;
padding:6px 30px;
text-decoration:none;
text-shadow:0px 1px 0px #7cacde;
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
border:1px solid #2893d6;
display:inline-block;
-webkit-box-shadow:inset 0px 1px 0px 0px #bee2f9;
-moz-box-shadow:inset 0px 1px 0px 0px #bee2f9;
box-shadow:inset 0px 1px 0px 0px #bee2f9;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #73b4dd), color-stop(1, #468ccf) );
background:-moz-linear-gradient( center top, #73b4dd 5%, #468ccf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#73b4dd', endColorstr='#468ccf');
background-color:#73b4dd; 
}
.tombol8:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #468ccf), color-stop(1, #73b4dd) );
background:-moz-linear-gradient( center top, #468ccf 5%, #73b4dd 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#468ccf', endColorstr='#73b4dd');
background-color:#468ccf;
}
.tombol8:active {
position:relative;
top:1px;
}

Css Button 9

.tombol9 {
color:#c9c9c9;
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
font-weight:bold;
padding:6px 30px;
text-decoration:none;
text-shadow:0px 1px 0px #660c78;
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
border:1px solid #a511c0;
display:inline-block;
-webkit-box-shadow:inset 0px 1px 0px 0px #e184f3;
-moz-box-shadow:inset 0px 1px 0px 0px #e184f3;
box-shadow:inset 0px 1px 0px 0px #e184f3;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #a780b3), color-stop(1, #87469c) );
background:-moz-linear-gradient( center top, #a780b3 5%, #87469c 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#a780b3', endColorstr='#87469c');
background-color:#a780b3;
}
.tombol9:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #87469c), color-stop(1, #a780b3) );
background:-moz-linear-gradient( center top, #87469c 5%, #a780b3 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#87469c', endColorstr='#a780b3');
background-color:#87469c;
}
.tombol9:active {
position:relative;
top:1px;
}

Semoga macam aneka warna tombol tesebut bisa berguna untuk tampilan blog kalian.

Semoga bermanfaat,

0 Membuat Background Warna Transparan Pada Post

Salah satu unsur utama dalam mendesign tampilan blog adalah garis (border) dan warna (background), gambar (image) merupakan faktor pendukung untuk lebih menekankan maksud dari blog tersebut, dengan membuat background warna transparan atau warna berbeda akan lebih memperlihatkan lapisan-lapisan background dalam template.

Dari tiap lapisan background, jika kita memberi background warna transparan untuk lapisan background didepannya dan lapisan dibelakangnya merupakan background warna, tidak akan berpengaruh banyak, hanya akan merubah warna hasil percampuran warna lapisan depan dan belakang, berbeda jika lapisan belakangnya memiliki objek gambar (background gambar) atau adanya teks, tentu gambar atau teks tersebut akan terlihat tembus pandang atau transparan.

Sebagai contoh objek yang akan diperlihatkan adalah teks (seperti dalam bagian post ini kalau belum saya rubah), pada bagian post tersebut saya memberi warna background dengan warna hitam dan objek teks berwarna hitam, tanpa pemberian efek transparan (transparent) tentu objek teks-nya tidak akan terlihat, karena tertutup warna background.

Bagaimana Cara Memberi Efek Transparan Pada Background Warna

Dalam pengkodean warna css dalam template blog, biasa menggunakan kode HEX seperti ini #000000 yang merupakan kode untuk warna hitam, jika kita menggunakan kode hex dalam background tidak akan memberikan warna yang transparan terhadap objek teks. Untuk memberikan efek transparan terhadap objek teks, kita harus merubah pengkodean warna hex dengan warna RGBA, warna hitam untuk rgba adalah (0, 0, 0,), dengan pengkodean warna (0, 0, 0,) tidak akan menghasilkan warna yang transparan, kita harus tambah perintah opacity dibelakang kode, sebagai ilustrasi saya gambarkan seperti dibawah ini :

background: rgba(0, 0, 0, 0.2);

warna kuning merupakan kode rgba untuk warna hitam, sedangkan kode tambahan yang berwarna biru merupakan kode untuk transparansi.

Bagaimana Merubah Kode HEX Menjadi Kode RGBA

Untuk merubah atau mengetahui kode hex menjadi kode rgba, kalian bisa menggunakan aplikasi photoshop atau menggunakan tools kode warna dalam blog ini pada bagian menu. Dalam tools kode warna situseo blog memuat kode hex, rgba dan hsla, kalian bisa menentukan warna pilihan anda.

Tips ini mungkin ringan bagi kalian, tapi menurut saya, ini merupakan bagian penting dalam mendesign tampilan suatu blog.

Semoga bermanfaat,