Beranda  ›  Posts

Add attractive CSS Text box for website and Blog


Lihat dan hitung, seberapa banyak aplikasi Android yang Anda instal di smartphone Anda? 

Pernahkah terbersit di benak Anda bagaimana cara membuat aplikasi-aplikasi tersebut?

Apakah Anda Saat Ini Ingin Sekali Bisa Bikin Aplikasi Android Sendiri? Seperti aplikasi game edukasi, media pembelajaran, aplikasi berbasis sensor, aplikasi multimedia, dan lain sebagainya?

Tetapi

1. Tidak Ngerti Coding
2. Tidak Tahu Computer Programming
3. Tidak Paham Bahasa Pemrograman Android
4. Dan Sama Sekali Bukan Lulusan IT?

Jangan Khawatir ...
Ternyata, bikin aplikasi Android itu SANGAT MUDAH, bahkan bagi Pemula sekalipun.

Sekarang Anda bisa bikin aplikasi Android dengan Cepat, bahkan TANPA HARUS CODING.

Tak peduli apapun latar belakang Anda, bikin aplikasi Android itu MUDAH, semudah bermain Puzzle.

Anda Hanya Perlu 4 Langkah berikut ini :

1. Drag & drop komponen-komponen yang dibutuhkan
2. Percantik tampilan aplikasi dengan mengatur layout dan desain tampilan
3. Susun blok-blok kode programnya, dan
4. Build aplikasi Anda jadi file instalasi *.APK

Lantas, Bagimana Cara Memulainya?
Mudah kok, karena sudah hadir untuk Anda Di Sini :


Video tutorial yang membahas cara membuat aplikasi Android dengan sangat MUDAH, CEPAT, & TANPA CODING menggunakan tools App Inventor 2. 
Text Areas or Text boxes are useful for including special characters or codes.I have posted some tutorials about Text Boxes in my past tutorials.I created another attractive text box for your website and blog.I created it using CSS and HTML by adding hovering effects.You can add this attractive CSS text box on your site by following below simple steps.You can see the demo of this text box in below.Also i have rendered some useful and pretty text boxes for your site.Some of them are given below.

Read Also :-

  1. 10 Pleasant text boxes for your Website and Blog
  2. Add colorful text box for your blog and website
  3. How to add Stylish Text box to your Blog
  4. Text area with selecting All with a Button
  5. Text boxes with background color and Image
  6. How to Create Disabled text area with HTML
  7. How to create Auto selecting Text boxes


Demo


How to add Text box on your website/blog

OK.. Here is how to add above attractive text box on your blog/website.First i explain you how to add this text box in your blog.Follow below instructions.

1. Sign in to your Blogger account.
2. Go to Blogger Dashboard >> Template.
3. Now click on "Edit HTML" button.
4. Blogger team have improved HTML template editor before few days.So To find ]]></b:skin> tag, click on HTML editor anywhere.Now press Ctrl+f (for Mac computers,press Command+F).Then paste ]]></b:skin> code and press Enter button.Then you can see the highlighted ]]></b:skin> code.
5.Now paste below CSS codes just above/before ]]></b:skin> code.



#bl_txtarea {
width:600px;
height:100px;
background-color:#DCE4BC;
color:#3C3C3C;
border:1px solid  #C8B96A;
opacity:0.6;
box-shadow:2px 3px 4px 2px hsla(198,20,100,0.4);
border-radius:2px;
-moz-border-radius:2px;
font-family:arial,verdana, helvetica,serif;
font-size:12px;
font-weight:normal;
padding:4px 2px 4px 3px;
margin:3px 3px 2px;
}
#bl_txtarea:hover {
font-weight:bold;
opacity:0.9;
box-shadow: 2px 3px 4px 2px hsla(139,88,68,0.7);
color:#050605;
border:radius:0px;
-moz-border-radius:0px;
background-color:#C1FFB7;
padding:3px 1px 3px 2px;
}

6.Now save your Template.

You are almost done.Now you can add above Text box on your blog anywhere on your blog,even blog posts and on blog pages.Just paste below HTML code on source code editor(Edit HTML) and make below customization.


<textarea id="bl_txtarea" readonly="readonly">
Type your Text
</textarea>

Customizations

If you want to let visitors to edit the text or codes inside the Text area,just remove readonly="readonly" attribute and value.

After you paste above code on the Source code editor,revert to "compose" mode and type your text or code instead of Type your Text .

Now I'm going to explain how to add this Text box on website.you must add some extra codes,when you add this on a website.Add above CSS code between <style type="text/css">---</style> tags  just above </head> tag on your Template. After adding this codes, it will look like this.

..................
<head>
<style type="text/css">
Above CSS codes in 5th step .....
............................
</style>
</head>
..................

Then add above HTML code in 6th   between <body> and </body> tags where text box appears.That's all.If you have any question on customizing this text box or adding,feel free to ask me anything.Happy blogging pals :)

Pengelola Blog : ABDUL WAHAB

Judul : Add attractive CSS Text box for website and Blog
Ditulis oleh : Kejutan Internet pada hari
Rating Blog : 5 dari 5
Terima kasih Anda telah membaca artikel tentang Add attractive CSS Text box for website and Blog
Anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel ini sangat bermanfaat bagi Blog dan teman-teman anda.
Namun jangan lupa harap memberikan link aktif dofollow yang mengarah ke URL ini ya
https://kejutaninternet.blogspot.com/2013/04/add-attractive-css-text-box-for-website.html

Dan Terima kasih sekali lagi atas kunjungan Anda.

Kritik dan saran atau apapun bisa anda sampaikan melalui kotak komentar.
Dan mohon maaf jika komentar atau pertanyaan tidak bisa cepat saya respon,
karena Saya tidak bisa selalu online selama 24 Jam.


Mau Di Buatkan Blog Siap Pakai Seperti Ini ?.

Artikel Terkait

Next
« Prev Post
Previous
Next Post »