Display and Hide Text,Images in Web pages

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 Android Tanpa Coding untuk Pemula"

Video tutorial yang membahas cara membuat aplikasi Android dengan sangat MUDAH, CEPAT, & TANPA CODING menggunakan tools App Inventor 2. 

You can impress your readers by adding special effects to text and images in your web pages. Controlling transparency we can make images more attractive to visitors. Also using CSS we can change the default color scheme of hypertext (Links). Withal Image galleries and slide shows can enjoy the visitors. Now in these days, animating Images or .GIF images are very popular among people.  If you’re a fan of Google plus social network, you could encounter awesome animating images posted by many people.  These animating images changed the way of web design go. So we can make use of new technologies to improve site’s performances such as using CSS gradients than images. Rollover image effect is another way to save the space of web page. In my previous posts, I rendered some specific tricks to add to your website/blog. In this time I will show you how to add hide/show effect to text and images. It will save the space of your web pages and help users for preventing the confusion of seeing the stuff in your blog :p

You can hide some word phrases, quotes, HTML, CSS or JavaScript codes and even images. As an example click on below "Open/Close" button.You can see a sentence appear after clicking on button.

Hey,It's looking good!

Now check out below example where i have hidden the quote.

A blog (a contraction of the words web log)[1] is a discussion or informational site published on the World Wide Web and consisting of discrete entries ("posts") typically displayed in reverse chronological order (the most recent post appears first). Until 2009 blogs were usually the work of a single individual, occasionally of a small group, and often covered a single subject. More recently "multi-author blogs" (MABs) have developed, with posts written by large numbers of authors and professionally edited. MABs from newspapers, other media outlets, universities, think tanks, interest groups and similar institutions account for an increasing quantity of blog traffic. The rise of Twitter and other "microblogging" systems helps integrate MABs and single-author blogs into societal newstreams. Blog can also be used as a verb, meaning to maintain or add content to a blog.
-Wikipedia

Below example will show you how many space can you save by using this method.

<div id='google_translate_element'/>
<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: '<data:pageLanguage/>',
autoDisplay: 'true',
layout: google.translate.TranslateElement.InlineLayout.<data:layout/>
}
, 'google_translate_element');
}
</script>
<script src='//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'/>

Want to hide one or more images ? So check below example.

Now lets see how you can use this method in your website/blog.

<div id="PBT-fn" style="display: none;">
YOUR MESSAGE GOES HERE
</div>
<button onclick="if(document.getElementById('PBT-fn') .style.display=='none') {document.getElementById('PBT-fn') .style.display=''}else{document.getElementById('PBT-fn') .style.display='none'}" title="Click to show/hide" type="button">Open/Close</button>
<br />

• Replace YOUR MESSAGE GOES HERE with the code to be implemented or plain text to be shown. 
• Replace Open/Close with the name which is appearing on the button.

How it works ?

This trick works well on any browser which support for JavaScript. We used JavaScript DOM and CSS to hide and show the div element.When someone click on the button, JavaScript checks that the ID's style (PBT-fn) is "display:none;" or not. Though we have added the CSS display property with the value 'none'. So the hidden element will be shown when the user click on the button. We can override the element by adding internal block of CSS codes.

Leave your questions, views and comments below.

Pengelola Blog : ABDUL WAHAB

Judul : Display and Hide Text,Images in Web pages
Ditulis oleh : Kejutan Internet pada hari
Rating Blog : 5 dari 5
Terima kasih Anda telah membaca artikel tentang Display and Hide Text,Images in Web pages
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/09/display-and-hide-textimages-in-web-pages.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