Berkreasi membuat tulisan marquee keren dengan menambah css

                                            

Cara membuat efek marquee

Biasanya default efek marquee di buat dengan kode html berikut.
<marquee>SELAMAT DATANG DI BLOG ANDOELSEAN</marquee>,hasilnya seperti di bawah ini. SELAMAT DATANG DI BLOG ANDOELSEAN Namun pada postingan saya kali ini saya akan menambahkan kode css,untuk memperindah efek marquee,sehingga hasilnya akan menjadi seperti di bawah ini.

SELAMAT DATANG DI BLOG ANDOELSEAN,SILAHKAN BACA ARTIKEL MENARIK LAINYA

Code untuk membuat marquee seperti di atas adalah:

<div class="marqueeart2">
<marquee style="color: white; font-family: Times New Roman; font-size: 30px; text-shadow: 2px 2px 4px #000;">SELAMAT DATANG DI BLOG ANDOELSEAN,SILAHKAN BACA ARTIKEL MENARIK LAINYA</marquee></div>
<style>
.marqueeart2 {
border-radius:6px;
border:1px solid #1E90FF;
border-left:5px solid #1E90FF;
border-right:5px solid #1E90FF;
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #00A3EF 100%);
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #00A3EF 100%);
background-image: -o-linear-gradient(top, #FFFFFF 0%, #00A3EF 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #00A3EF 100%);
background-image: linear-gradient(to bottom, #FFFFFF 0%, #00A3EF 100%);
}
</style>

Untuk menggunakan kode di atas,pada saat akan memasukan effect marque pada postingan beralih dulu dari mode Compose ke HTML,kalau belum mengerti lihat gambar dibawah ini. . ! !

Nah jika anda ingin mengedit kode marquee'nya,silahkan ganti kode yang berwarna sesuai yang anda inginkan. .

KETERANGAN:

• Kode yang berwarna ORANGE di atas adalah untuk kata-kata dalam marquee,silahkan ganti dengan kata-kata yang anda inginkan. 
• Border-radius:itu untuk sudut lengkung pada kotak marquee,nilai 6px bisa anda ganti dengan yang anda inginkan 
• Border:untuk garis tepi pada kotak marquee,silahkan disesuaikan nilai dan warnanya sesuai yang anda inginkan 
• Border-left:itu untuk border sebelah kiri silahkan atur ketebalan dan warnanya. 
• Border-right:Untuk border sebelah kanan 
• Dan kode yang berwarna MERAH,itu untuk css background gardient,silahkan anda ganti sesuai yang anda inginkan,kalau gak tau bagaimana caranya membuat css background gardient silahkan buat 

Nah saya rasa cukup sampai disini dulu tutorial tentang cara berkreasi membuat tulisan marquee dengan menambah css,selamat mencoba dan berksperimen.

Text box keren untuk postingan di blogger

Membuat text box untuk postingan di blog,sangat mudah gan hanya perlu beberapa kode CSS dan HTML,untuk mengatur bentuk box dan untuk menggunakan kotak pesan tersebut pada saat kita membuat postingan,tex box ini tidak jauh berbeda dengan fungsi massage box pada blogger,sama-sama untuk meletakan kata-kata pada kotak,sehingga pembaca blog akan lebih mudah memahami maksud dari si penulis postingan,apalagi bila kita akan membuat postingan tutorial,tentunya tex box akan sangat membantu kita dalam menjelaskan atau memberikan instruksi pada pembaca blog kita,nah pada postingan saya kali ini saya akan berbagi tips atau cara membuat text box atau kotak pesan keren untuk postingan di blog,lebih jelasnya silahkan screenshot disamping,seperti itulah text box yang akan kita buat. .dengan 4 warna abu-abu,merah,kuning,hijau,oke langsung ke caranya saja sob.

Cara membuat text box

Salin kode CSS di bawah ini dan pastekan tepat di atas kode ]]></b:skin> pada tempelate anda

.box {
height:auto;
margin:15px auto;
line-height:1.1 !important;
font-size:15px;
padding:5px;
width:300px;
text-align: justify;
}
.abu2 {
background:#999;
outline:4px solid #888;
outline-offset:1px;
border:2px dashed #666;
}
.merah {
background:#e00;
outline:4px solid #d00;
outline-offset:1px;
border:2px dashed #a00;
}
.kuning {
background:#FD0;
outline:4px solid #FC0;
outline-offset:1px;
border:2px dashed #FA0;
}
.hijau {
background:#0C0;
outline:4px solid #080;
outline-offset:1px;
border:2px dashed #0A0;
}

Kalau sudah memasang kode CSS di atas,sekarang save tempelate anda dan untuk menggunakan di postingan gunakan HTML di bawah ini.pastikan saat anda ingin memasukan kode HTML dibawah ini,beralih ke mode HTML dulu bukan Compose.

<div class='hijau'>

Masukan konten atau kata-kata untuk text box anda disini

</div>

KETERANGAN: Kode yang berwarna hijau itu adalah tema untuk tex box yang akan anda gunakan,silahkan diganti dengan tema tex box yang akan anda gunakan seperti:

• abu2
• merah
• kuning
• hijau

Sesuai warna text box yang dimasukan pada tempelate tadi,hanya ada 4 warnaabu2,merah,kuning,dan hijau.

MEMBUAT 3D TEXT EFFECT DENGAN CSS

Cara mudah dan simple,membuat 3D text efek pada blog hanya perlu menambahkan beberapa kode CSS dan HTML,Mungkin lagi ada yang mencari artikel tentang cara membuat 3D text effect,pada postingan saya kali ini saya akan membahas tentang cara membuat 3D text effect menggunakan CSS, . .

                                       

membuat 3d text effect

• Masuk ke edit tempelate anda
• Copy CSS di bawah ini dan pastekan diatas ]]></b:skin> pada tempelate anda.

text3D {font-size: 75px;font-family:verdana;color:#fff;
-webkit-transition: all .7s ease-out; 
-moz-transition: all .7s ease-out; 
-o-transition: all .7s ease-out; 
transition: all .7s ease-out;
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);}

• Kalau sudah memasang kode CSS di atas langsung save tempelate anda
• Untuk menggunakan Efek 3D gunakan tag HTML di bawah ini

<text3D>Masukan text anda disini</text3D>

Nah begitulah cara membuat 3D text efek pada blog,selamat mencoba dan selamat berksperimen