Blog Ponsel Si Oon: Tutorial Blog & WapBuilder

Cara Buat Pop Up Login

Assalamu Alaikum Wr.Wb

Hai sahabat Mickey Pada kesempatan malam hari ini .. admin Blog Oon akan berbagi cara buat Pop Up Login yang sebelumnya sudah memposting <a href="https://oon23.blogspot.co.id/2016/10/cara-buat-basic-modal-dialog-box.html">CARA BUAT BASIC MODAL DIALOG BOX</a> dan sekarang akan sedikit berbagi soal cara buat Pop Up Login .. guna nya untuk sebuah wapsite / website yang mengkhususkan tempat sign up / sign in untuk para membernya ( kurang lebih nya seperti itulah ) .. tapi sebelumnya sudah pada tahu belum ni semuanya ?? ..

Sebagian besar dari pembaca mungkin sudah tahu apa iti Pop Up ?? .. apa lagi jika sobat adalah seorang blogger dan masternya codding .. tentunya sudah faham dan tau dengan semua hal yang berurusan dengan codding .. dan mendengar kata pop up tentunya sudah tidak asing lagi .. bahkan bisa menciptakan / membuat yang jauh lebih keren dari pada apa yang mau admin bagikan ini .. tetapi buat sobat yang belum tahu apa itu pop up .. khusus nya untuk buat pop up login .. dan tidak tau cara buat nya .. berikut akan admin kasih contoh nya dan cara buat nya .. yang mungkin bisa sobat gunakan .. jika suatu waktu membutuhkan untuk di web / wap form sobat .. kalau ini menurut sobat bermanfaat .. dan dibawah ini contoh pembuatan nya ..

Gimana .. setelah lihat hasilnya .. sudah tahu kan .. apa yang saya maksud ?? .. yang saya maksud ini .. sama halnya seperti pop up / jendela munculan like box fb / follow G+ / follow twitter dan sebagainya .. akan tetapi bedanya .. jika like box fb dsb .. dapat muncul dengan menggunakan beberapa code yakni HTML / CSS / JS .. dan akan muncul ditiap kali blog di buka .. contoh nya seperti pada blog ini .. pop up follow G+ akan muncul ditiap kali membuka blog / halaman / postingan dengan otomatis .. yang sebelum nya sudah di setting untuk tampil sekian detik nya .. tapi jenis modal login ini .. akan muncul secara manual .. atau kata lain .. jika sobat mengklik tombol button tersebut barulah pop up login tersebut tampil .. kurang lebih nya silahkan klik tombol di bawah ini .. untuk mengetahui hasil nya .. dengan mengklik tombol button Login

input[type=text], input[type=password] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

button {
    background-color: #ff1493;
    color: white;
    padding: 14px 17px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
}

button:hover {
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

.cancelbtn {
    width: auto;
    padding: 10px 18px;
    background-color: #ff1493;
}

.imgcontainer {
    text-align: center;
    margin: 24px 0 12px 0;
}

img.avatar {
    width: 30%;
    border-radius: 30%;
}

.container {
    padding: 10px;
}

span.psw {
    float: right;
    padding-top: 3px;
    padding-bottom: 20px;
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
       display: block;
       float: bottom;
    }
    .cancelbtn {
       width: 40%;
    }
}
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    padding-top: 3px;
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 3px auto; /* 14% from the top and centered */
    border-radius: 6px;
    width: 90%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
    /* Position it in the top right corner outside of the modal */
    position: absolute;
    right: 10px;
    top: 0;
    bottom: 30px;
    color: #ff1493;
    font-size: 40px;
    font-weight: bold;
}

/* Close button on hover */
.close:hover,
.close:focus {
    color: black;
    cursor: pointer;
}

/* Add Zoom Animation */
.animate {
    -webkit-animation: animatezoom 0.6s;
    animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
    from {-webkit-transform: scale(0)} 
    to {-webkit-transform: scale(1)}
}

@keyframes animatezoom {
 from {transform: scale(0)} 
 to {transform: scale(1)}
}
</style>

<button onclick="document.getElementById('id01').style.display='block'">Login</button>

<div id="id01" class="modal">

<form class="modal-content animate" action="http://dp-bbm23.blogspot.com">
×
 <div class="imgcontainer">
 <img alt="Avatar" class="avatar" src="https://lh3.googleusercontent.com/-fRzhkMCnZNs/AAAAAAAAAAI/AAAAAAAAABM/Tvy_iRHUfSY/s80-c/photo.jpg">
 </div>

<div class="container">
 <label>Username</label>
 <input type="text" placeholder="Enter Username" name="uname" required>

<label>Password</label>
 <input type="password" placeholder="Enter Password" name="psw" required>

<button type="submit">Login</button> 
 <input type="checkbox" checked="checked"> Remember me
 </div>

<div class="container" style="background-color:#fafafa">
 <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
 Forgot <a href="#">password ??</a>
 </div>
 </form>
</div>

Nah itulah hasilnya .. seperti yang sobat lihat .. gimana .. kira - kira masih ada yang mau lanjutin gak nih baca nya ?? .. dan kira - kira ada yang penasaran pengen buat juga gk tuh ?? .. ya udah .. langsung saja dibawah ini .. admin kasih tahu cara buat nya ..

<div style="background: #eeeeee; border: 1px solid #dddddd; margin: 1em 1 em 1em 1em; padding: 1em 1em 1em 1em; width:233px;height:auto;border-radius:4px;box-shadow:0 3px 2px 0 #ccc;"> <button class="button button5">Code Css / Html</button> 
<blockquote>
<!DOCTYPE html> 
<html> 
<title>oon23.blogspot.co.id</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://0ch423.wapgem.com/oka/modal01/code.css"/> 
<body>

<button onclick="document.getElementById('id01').style.display='block'" class="oka23-btn oka23-pink oka23-large">Login</button>

<form class="oka23-container" action="form.html"> 
 <div class="oka23-section"> 
 <label><b>Username</b></label> 
 <input class="oka23-input oka23-border oka23-margin-bottom" type="text" placeholder="Enter Username" name="usrname" required> 
 <label><b>Password</b></label> 
 <input class="oka23-input oka23-border" type="password" placeholder="Enter Password" name="psw" required> 
 <button class="oka23-btn-block oka23-pink oka23-section oka23-padding" type="submit">Login</button> 
 <input class="oka23-check oka23-margin-top" type="checkbox" checked="checked">Remember me 
 </div>

</form> 
 <div class="oka23-container oka23-border-top oka23-padding-4 oka23-light-grey"> 
 <button onclick="document.getElementById('id01').style.display='none'" type="button" class="oka23-btn oka23-pink">Cancel</button> 
 <span class="oka23-right oka23-padding oka23-hide-small">Forgot<a href="#">password ??</a></span> 
 </div> 
 </div> 
 </div> 
</div>

</body> 
</html>
</blockquote> 
<button class="button button5">By : Ocha</button></div>

Itulah code dan cara buat nya .. dan saya rasa tidak perlu lagi banyak penjelasan ya .. karena disana juga udah full color .. jadi tentunya tahu code mana aja nya yang perlu di copy .. dan admin rasa cukup sampe disini dulu perjumpaan kita kali ini .. kurang lebih nya mohon di maklum aja .. jika ada salah - salah kata dalam penulisan .. dan terimakasih sudah baca dari awal sampe akhir .. mengenai Cara Buat Pop Up Login .. semoga bermanfaat dan sampe ketemu lagi dilain waktu dan kesempatan .. See You Next Time !!!

Tag : #Pop Up, #Pop Up Like Box, #Pop Up Like Box Fb #Pop Up Like Box Facebook, #Pop Up Follower, #Pop Up Follow G+, #Pop Up Follow Google+, #Pop Up Tweet, #Pop Up Twitter, #Pop Up Dialog, #Pop Up Window, #Pop Up Dialog Box, #Cara, #Cara Buat, #Cara Membuat, #Cara Buat Basic Modal ( Dialog Box / Pop Up Window, #Cara Buat Basic Modal Dialog Box, #Basic, #Basic Modal, #Pop Up Login, #Sign in, #Sign Up, #Login, #Log Out, #Cara Buat Pop Up Login

Cara Buat Pop Up Login

Assalamu Alaikum Wr.Wb Hai sahabat Mickey Pada kesempatan malam hari ini .. admin Blog Oon akan berbagi cara buat Pop Up Login yang seb...

Cara Buat Basic modal Dialog Box

Assalamu Alaikum Wr.Wb

Hai sahabat Mickey Pada kesempatan malam hari ini .. admin Blog Oon akan berbagi cara buat Basic modal ( dialog box / popup window ) sebagian besar dari pembaca mungkin sudah tahu apa iti dialog box ?? Atau Pop Up ?? .. apa lagi jika sobat adalah seorang blogger dan masternya codding .. tentunya sudah faham dan tau dengan semua hal yang berurusan dengan codding .. dan mendengar kata pop up tentunya sudah tidak asing lagi .. bahkan bisa menciptakan / membuat yang jauh lebih keren dari pada apa yang mau admin bagikan ini .. tetapi buat sobat yang belum tahu apa itu modal dialog pop up dan tidak tau cara buat nya .. berikut akan admin kasih contoh nya dan cara buat nya .. yang mungkin bisa sobat gunakan .. jika suatu waktu membutuhkan .. kalau ini menurut sobat bermanfaat .. dan dibawah ini contoh pembuatan nya ..

Gimana .. setelah lihat hasilnya .. sudah tahu kan .. apa yang saya maksud ?? .. yang saya maksud ini .. sama halnya seperti pop up / jendela munculan like box fb / follow G+ / follow twitter dan sebagainya .. akan tetapi bedanya .. jika like box fb dsb .. dapat muncul dengan menggunakan beberapa code yakni HTML / CSS / JS .. dan akan muncul ditiap kali blog di buka .. contoh nya seperti pada blog ini .. pop up follow G+ akan muncul ditiap kali membuka blog / halaman / postingan dengan otomatis .. yang sebelum nya sudah di setting untuk tampil sekian detik nya .. tapi jenis modal ini .. akan muncul secara manual .. atau kata lain .. jika sobat mengklik tombol button tersebut barulah pop up modal tersebut tampil .. kurang lebih nya silahkan klik tombol di bawah ini .. untuk mengetahui hasil nya .. dengan mengklik Open Modal

.oka23-container {
padding:20px;
border-radius: 50px #ffd700;
margin:5px;
width: auto;
height: auto;
}

.oka23-btn, .w3-btn-block {
border:none;
display:inline-block;
outline:0;
padding:6px 16px;
vertical-align:middle;
overflow:hidden;
text-decoration:none!important;
color:#fff;
font-size: 19px;
background-color:#ff1493;
text-align:center;
cursor:pointer;
white-space:nowrap;
}
.oka23-btn:hover, .oka23-btn-block:hover, .oka23-btn-floating:hover, .oka23-btn-floating-large:hover {
box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}

.oka23-modal-content {
margin:20px;
background:#000;
border-radius:20px;
color:#fff;
padding:10px;
outline:0;
width:auto;
height:auto;
text-align:justify;
font-size:14px;
}
.oka23-closebtn {
text-decoration:none;
float:right;
font-size:35px;
font-weight:bold;
color:inherit;
width:20px;
height:20px;
}
.oka23-closebtn:hover, .oka23-closebtn:focus {
color:#ff1493;
text-decoration:none;
cursor:pointer;
}

</style>

<center><button onclick="document.getElementById('id01').style.display='block'" class="oka23-btn">Open Modal</button>

<div id="id01" class="oka23-modal">
<div class="oka23-modal-content">
×
 <div class="oka23-container">
 <h2>Contoh Modal Pop Up 01</h2>
 <hr> 
Ini Adalah Contoh Modal Pop Up 01 .. Dengan Background hitam ..

Author : Oka Deris ( Blog Ponsel Si Oon ) 
Url : https://oon23.blogspot.com
 </div>
 </div>
 </div></center>

Nah itulah hasilnya .. seperti yang sobat lihat .. gimana .. kira - kira masih ada yang mau lanjutin gak nih baca nya ?? .. ya udah barang kali keburu males bacanya .. langsung saja dibawah ini .. admin kasih tahu cara buat nya ..

<div style="background: #eeeeee; border: 1px solid #dddddd; margin: 1em 1 em 1em 1em; padding: 1em 1em 1em 1em; width:233px;height:auto;border-radius:4px;box-shadow:0 3px 2px 0 #ccc;"> <button class="button button5">Code Css / Html</button> 
<blockquote>
<!DOCTYPE html> 
<html> 
<title>oon23.blogspot.co.id</title> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://0ch423.wapgem.com/oka/modal01/code.css"> 
<body>

<div class="oka23-container"> 
 <h2>Contoh Modal Pop Up 01</h2> 
 <button onclick="document.getElementById('id01').style.display='block'" class="oka23-btn">Open Modal</button>

<div id="id01" class="oka23-modal"> 
 <div class="oka23-modal-content"> 
 <div class="oka23-container"> 
 <span onclick ="document.getElementById('id01').style.display='none'" class="oka23-closebtn">& times ;</span> 
 <p>Ini Adalah Contoh Modal Pop Up 01 .. Dengan Background hitam ..</p>

<p>Author : Oka Deris ( Blog Ponsel Si Oon ) 
Url : https://oon23.blogspot.com</p> 
 </div> 
 </div> 
 </div> 
</div>

</body> 
</html>
</blockquote> 
<button class="button button5">By : Ocha</button></div>

Itulah code dan cara buat nya .. dan saya rasa tidak perlu lagi banyak penjelasan ya .. karena disana juga udah full color .. jadi tentunya tahu code mana aja nya yang perlu di copy .. dan admin rasa cukup sampe disini dulu perjumpaan kita kali ini .. kurang lebih nya mohon di maklum aja .. jika ada salah - salah kata dalam penulisan .. dan terimakasih sudah baca dari awal sampe akhir .. mengenai Cara Buat Basic modal ( dialog box / popup window ) .. semoga bermanfaat dan sampe ketemu lagi dilain waktu dan kesempatan .. See You Next Time !!!

Tag : #Pop Up, #Pop Up Like Box, #Pop Up Like Box Fb #Pop Like Box Facebook, #Pop Up Follower, #Pop Up Follow G+, #Pop Up Follow Google+, #Pop Up Tweet, #Pop Up Twitter, #Pop Up Dialog, #Pop Up Window, #Pop Up Dialog Box, #Cara, #Cara Buat, #Cara Membuat, #Cara Buat Basic Modal ( Dialog Box / Pop Up Window, #Cara Buat Basic Modal Dialog Box, #Basic, #Basic Modal

Cara Buat Basic modal Dialog Box

Assalamu Alaikum Wr.Wb Hai sahabat Mickey Pada kesempatan malam hari ini .. admin Blog Oon akan berbagi cara buat Basic modal ( dialog b...

Mitos Seputar Blogging Dan Sejarah Berdirinya Blogger.com

Assalamu Alaikum Wr.Wb

Hai sahabat Mickey kali ini admin Blog Oon akan berbagi mengenai mitos dan sejarah berdirinya blogger.com .. untuk sebagian besar blogger tentunya ini bukanlah hal yang baru terdengar .. namun akan tetapi bagi para pembaca maupun blogger - blogger pemula .. mungkin belum tau sejak kapan blogger.com berdiri ?? .. nah maka dari itu pada kesempatan siang ini .. admin akan sedikit membahas nya .. dengan tujuan para pengguna internet semua tahu .. ya walaupun mungkin untuk sebagian orang .. ini tidak penting .. tetapi tidak ada salahnya kan .. sedikit berbagi dari apa yang admin tahu ?? :) ..

Ok next .. untuk mempersingkat waktu .. langsung saja ke inti pembahasan kita kali ini .. yaitu mengenai Mitos Seputar Blogging Dan Sejarah Berdirinya Blogger.com ..

Mitos Seputar Blogging ..

Blog kini menjadi media sharing yang populer dipakai banyak orang di Internet .. Meski populer .. masih banyak orang yang berpandangan lain soal blogging .. Sebagian menganggap blog tidak lebih dari sekadar buku harian online .. Sebagian lagi menganggap blog tidak kredibel dijadikan sumber informasi .. dan argumen - argumen lainnya .. Benarkah demikian ?? .. Berikut ini 4 mitos blogging yang umum .. dari tahun - ketahun ( yang lalu ) .. dari apa yang admin ketahui ..

Mitos : 
<ul><li>Blog identik dengan remaja yang curhat pengalaman pribadi</li>
<li>Nggak ada yang baca blog ??</li>
<li>Blog tidak bisa menghasilkan uang</li>
<li>Mengapa ngeblog ?? buat website saja ??</li></ul>

<hr/>

<ul><li>Blog identik dengan remaja yang curhat pengalaman pribadi</li></ul>

Pada awal kemunculannya .. blog memang banyak dipakai sebagai 'buku' harian online .. Orang bisa berbagi cerita .. pemikiran dan kegiatan mereka dengan teman dan keluarga .. ( Tapi itu dulu ) .. beberapa tahun yang lalu ..

Saat ini blog sudah berkembang menjadi sebuah platform manajemen konten yang efisien .. Modal yang dibutuhkan hanya keterampilan menulis dan mengemas informasi agar lebih informatif dan bermanfaat buat orang lain ..

Sebuah blog profesional bahkan bisa bersaing dengan koran / majalah atau website lain .. Selain itu saat ini perusahaan di seluruh dunia banyak yang mengadopsi blog sebagai media pemasaran dan hubungan eksternal dengan pelanggan ..

<ul><li>Nggak ada yang baca blog ??</li></ul>

Siapa bilang ?? .. Beberapa studi market menyatakan bahwa blog kini sudah dapat dianggap sebagai media mainstream .. Artinya, blog dianggap bisa dijadikan acuan sumber informasi .. Tentu tidak semua blog bisa dijadikan sebagai media mainstream ..

Nah .. salah satu contoh blog media mainstream adalah Engadget .. sebuah blog profesional yang fokus pada informasi seputar gadget dan elektronik konsumen .. Blog ini berhasil memposisikan diri sebagai salah satu acuan informasi bagi pembaca .. Dan kini sudah banyak blog - blog profesional yang lahir dengan bermacam topik ..

<ul><li>Blog tidak bisa menghasilkan uang</li></ul>

Kata siapa ?? TechCrunch, Problogger, Engadget adalah beberapa di antaranya yang berhasil meraup penghasilan dari blog mereka .. Kunci sukses ngeblog adalah fokus .. konsisten dan unik .. Asalkan Anda fokus dan konsisten mengelolanya .. percayalah akan semakin banyak yang mengunjungi blog Anda .. Namun ingat, selain fokus dan konsisten .. Anda juga harus menyuguhkan konten yang berkualitas dan bermanfaat untuk orang lain ..

Sebelum membuat blog .. tentukan topik apa yang akan Anda ulas .. apakah Anda memang tertarik dengan topik tersebut karena nanti akan berhubungan dengan konsistensi Anda menulis .. Jika tak suka dengan topiknya .. bisa jadi Anda juga jarang mengupdate blog tersebut ..

Jika tulisan Anda dinilai berkualitas .. tidak menutup kemungkinan Anda akan diundang jadi pembicara atau menulis buku/ artikel di website lain .. Ketenaran sebuah blog tidak bisa dibangun dalam hitungan jam atau hari .. jadi dedikasikan sedikit waktu Anda setiap hari untuk blogging ..

<ul><li>Mengapa ngeblog ?? buat website saja ??</li></ul>

Blog menawarkan banyak keunggulan dibandingkan website tradisional .. Tidak seperti membuat sebuah website .. proses membuat blog sangatlah mudah .. Anda tidak perlu menjadi seorang yang ahli di bidang pemrograman .. Anda bahkan tidak perlu memikirkan bagaimana desain tampilannya karena blog punya banyak theme yang bisa didapatkan secara gratis maupun berbayar ..

Content management system yang ditawarkan blog juga sangat mudah .. Blog juga memudahkan interaksi antar pembaca .. artinya blog bisa dikatakan dapat mewakili sebuah platform yang sangat efisien untuk membangun sebuah komunitas ..

Nah .. itu lah tadi seputar mitos blogging .. yang dapat admin rangkum dari apa yang di baca / diketahui .. menurut mu apa tanggapan soal blogging ?? Dan mitos apa sajakah yang sobat ketahui soal blogging ini ?? .. sekarang kita lanjut ke pembahasan berikutnya .. yaitu sejarah berdirinya blogger.com .. simak ulasan nya dibawah ini ..

Sejarah Berdirinya Blogger.com ..

Blog merupakan singkatan dari "web log" adalah bentuk aplikasi web yang menyerupai tulisan - tulisan ( yang dimuat sebagai posting ) .. pada sebuah halaman web umum .. Tulisan - tulisan ini seringkali dimuat dalam urut terbalik ( isi terbaru dahulu baru kemudian diikuti isi yang lebih lama ) .. meskipun tidak selamanya demikian .. Situs web seperti ini biasanya dapat diakses oleh semua pengguna Internet sesuai dengan topik dan tujuan dari si pengguna blog tersebut ..

Blog mempunyai fungsi yang sangat beragam .. dari sebuah catatan harian .. media publikasi dalam sebuah kampanye politik .. sampai dengan program - program media dan perusahaan - perusahaan .. Sebagian blog dipelihara oleh seorang penulis tunggal .. sementara sebagian lainnya oleh beberapa penulis .. Banyak juga weblog yang memiliki fasilitas interaksi dengan para pengunjungnya .. seperti menggunakan buku tamu dan kolom komentar yang dapat memperkenankan para pengunjungnya untuk meninggalkan komentar atas isi dari tulisan yang dipublikasikan .. namun demikian ada juga yang sebaliknya atau yang bersifat non-interaktif ..

Situs - situs web yang saling berkaitan berkat weblog .. atau secara total merupakan kumpulan weblog sering disebut sebagai blogosphere .. Bilamana sebuah kumpulan gelombang aktivitas .. informasi dan opini yang sangat besar berulang kali muncul untuk beberapa subyek atau sangat kontroversial terjadi dalam blogosphere .. maka hal itu sering disebut sebagai blogstorm atau badai blog ..

Ada lebih 10 juta lebih blog yang bisa ditemukan di Internet .. Dan masih bisa berkembang lagi .. karena saat ini ada banyak sekali software .. tool dan aplikasi Internet lain yang mempermudah para blogger ( sebutan pemilik blog ) .. untuk merawat blognya .. Selain merawat dan terus melakukan pembaharuan di blognya . para blogger yang tergolong baru pun masih sering melakukan blogwalking .. yaitu aktivitas dimana para blogger meninggalkan link di blog atau situs orang lain seraya memberikan komentar ..

Beberapa blogger kini bahkan telah menjadikan blognya sebagai sumber pemasukan utama melalui program periklanan AdSense .. posting berbayar, jualan link, afiliasi dan lain-lain .. Sehingga kemudian muncullah istilah profesional blogger atau problogger .. orang yang menggantungkan hidupnya hanya dari aktivitas ngeblog .. Karena memang faktanya banyak chanel - chanel pendapatan dana baik berupa dolar maupun rupiah dari aktivitas ngeblog ini ..

Blogger atau yang sekarang disebut Blogspot sudah tidak asing lagi di kalangan blogger .. Penyedia layanan blog gratisan ini adalah perusahaan besar yang menyaingi WordPress .. sehingga bisa dibilang merupakan penyedia blog gratisan nomor satu paling laris di dunia ..

Sejarah Berdirinya Blogger ..

Blogger sebenarnya adalah sebuah sistem publikasi blog ( blog publishing system ) .. yang pada awalnya dibuat oleh Pyra Labs pada tanggal 23 Agustus 1999 dan merupakan sebuah dedicated blog-publishing tool .. pertama kali yang diperuntukkan untuk membantu mempopulerkan format tersebut ..

Pada bulan Februari 2003 .. dikarenakan kepopulerannya .. akhirnya Pyra Labs diakuisisi oleh Google .. Akuisisi ini menyebabkan fitur premium yang sebelumnya dikenakan biaya .. kemudian berubah gratis ..

Pada tahun 2004 .. Google mengenalkan layanan barunya â€œPicasaâ€ .. yaitu sebuah aplikasi untuk mengorganisir dan mengedit foto digital .. Layanan ini kemudian diintergrasikan dengan utility sharing foto Hello ke dalam layanan Blogger .. sehingga memungkinkan seorang pengguna blogger untuk memposting foto - foto mereka ke dalam blog yang dibuatnya ..

Dan Pada tanggal 9 Mei 2004 .. â€œBloggerâ€ mendesain ulang tampilan utamanya .. berbagai perubahan dilakukan di dalam Blogger dengan menambahkan berbagai fitur seperti web standards-compliant template .. halaman arsip individu untuk posting .. komentar dan posting menggunankan email ..

Lalu Pada tanggal 14 Agustus 2006 .. â€œBloggerâ€ meluncurkan rilis terbaru dalam â€œversi betaâ€ dengan kode â€œinvaderâ€ .. bersamaan dengan rilis versi Gold .. Ini membuat berpindahnya pengguna Blogger ke server Google dan disertai dengan ditambahkannya beberapa â€œfitur baruâ€ di dalamnya ..

Berikutnya Dalam bulan Desember 2006 .. akhirnya versi terbaru Blogger tersebut tidak lagi dalam â€œversi betaâ€ dan pada â€œbulan Mei 2007â€³ .. Blogger telah benar - benar berpindah ke server Google ..

Nah .. itulah tadi singkatnya cerita mengenai Mitos Seputar Blogging Dan Sejarah Berdirinya Blogger.com yang dapat admin sampaikan .. kurang lebihnya mohon dimaklum saja .. jika ada salah - salah kata .. ataupun penulisan .. sampai ketemu lagi di lain waktu dan lain kesempatan ..

Salam Hangat ..

Tag : #Sejarah, #Mitos, #Blog, #Blogspot, #Blogspot.com #Blogspot.co.id, #Blogger, #Blogging, #Blogwalking, #Blog Sphere, #Blog Storm, #Google, #Google Inc, #Google.com, #Google.co.id, #Mitos Seputar Blogging Dan Sejarah Berdirinya Blogger.com

Mitos Seputar Blogging Dan Sejarah Berdirinya Blogger.com

Assalamu Alaikum Wr.Wb Hai sahabat Mickey kali ini admin Blog Oon akan berbagi mengenai mitos dan sejarah berdirinya blogger.com .. untu...

Macam - Macam Jenis Textarea Dengan Berbagai Bentuk Dan Warna, Berikut Cara Buatnya

<a href='/'>Blog Ponsel Si Oon</a> - Macam - Macam Jenis Textarea Dengan Berbagai Bentuk Dan Warna, Berikut Cara Buatnya Hai Sahabat Mickey ?? Kali ini admin <button class="button button5">Blog Oon</button> akan berbagi Cara buat textarea dan juga beberapa jenis / Macam / Bentuk dengan berbagai style dan juga warna .. selebihnya atur - atur lagi sendiri ya .. sesuai dengan selera masing - masing .. seperti hal nya mengganti bingkai ( Dashed / dotted / double / inset / outset / ridge / grove / solid dst ) .. maupun mengganti warna background nya dengan warna - warna kesukaan sendiri .. termasuk mengganti warna text nya .. jika ingin di rubah biar text nya lebih berwarna .. untuk cara nya .. simak di bawah ini .. dan cukup ganti bagian - bagian tertentu .. sesuai yang sudah saya sampaikan di atas .. yaitu mengganti background / bingkai dan juga warna text nya ..

Ok .. baiklah kita lanjut kepembahasan kita kali ini .. di bawah ini akan saya kasih contoh nya dan berikut kode untuk cara buat nya .. namun sebelum di lanjutkan .. kira - kira semua nya sudah tau belum .. apa itu textarea ??? .. sebagian besar blogger maupun pembaca .. tentunya sudah tidak asing lagi dengan yang nama nya textarea .. apa lagi untuk saya sendiri bisa dikatalan sudah bosen mendengarnya hahaha .. karena hampir dari semua wap / blog yang saya punya .. udah berulang kali membahas / memposting soal ini .. akan tetapi .. Pada kesempatan ini saya posting ulang dengan bahasa penyampaian yang berbeda dan tentunya .. dengan model / jenis yang berbeda juga .. dan agak sedikit lebih banyak pula ..

Ok next .. mungkin dari sebagian pembaca masih belum tau Apa itu teks area ?? .. dan bagaimana sih Cara Membuat Text Area ?? .. secara umum teks ( text) area adalah area / daerah untuk menampilkan teks yang baru . Dengan kata lain dengan teks area ini akan ada daerah baru atau ruang baru dalam suaturuangan web/ blog yang memiliki beberapa tujuan .. antara lain memudahkan bagi pengunjung untuk mengkopi teks ( copas text ) atau kode yang sudah disisipkan dalam postingan ( agar gak salah copas ) .. dan kata lain yaitu yang gak kalah penting adalah berguna untuk menyingkat kode HTML/script atau juga teks yang sobat tampilkan agar tidak memakan banyaktempat ( khusus teks area tipe scrool ) ..

Kira - kira kurang lebih nya seperti itulah yang saya tau .. untuk lebih jelas nya lihat saja di bawah .. pastinya bakalan ngerti juga .. apa yang saya katakan tadi hehehe .. dan Untuk membuat text area ini .. sangat mudah .. cara membuatnya sobat hanya memerlukan beberapa kode HTML yang kemudian tulisan / kode yang ingin sobat tampilkan tinggal disisipkan ke dalam kode text areatersebut .. Selain itu .. text area memiliki banyak macam ( seprti yang sudah saya katakan dan seperti judul nya ) .. juga memiliki karakteristik tersendiri .. sehingga sobat dapat memilihnya sesuai denganselera sendiri ..

Ok baiklah .. kebanhakan kata nanti keburu males nerusin baca nya hehehe .. di bawah ini ada beberapa macam text area dan sobat mickey bisa mengunakannya sesuai kebutuhan .. Silahkan pilih, yang manakah text area yang sobat sukai / inginkan ?? ..

<button class="button button5">1. Textarea Standar / Biasa</button> 
Contoh : 
<center><textarea>Ini Contoh textarea standar / biasa

<textarea>Simpan Tulisan sobat disini</textarea>

Contoh :

<textarea cols="20" rows="5">Simpan Tulisan sobat disini</textarea>

Contoh :

<textarea rows="5" cols="25" onclick="this.focus(); this.select();">Simpan Tulisan sobat disini</textarea>

Contoh :

<form name="copy">
<div align="center">
<inputonclick="javascript:this.form.txt.focus();this.form.txt.select();"type="button" value="Select All">
</div>
<divalign="center">

<textarea style="width: 190px;height: 80px;" name="txt" rows="100"wrap="virtual" cols="55">
Simpan Tulisan sobat disini
</textarea>

</div>
</form>

===============

Keterangan :
width: 190px; height: 80px; : ukuran lebar Kolom textarea .. ganti nilai height dan width dengan ukuran lebih besar / lebih kecil ..

ganti rows="100" dan cols="55" seprti halnya mengganti nilai width dan height ..

Simpan Tulisan sobat disini ganti dengan tulisan / code sobat yang mau di simpan di dalam textarea ..

Contoh :

 
Ini Contoh textarea dengan tombol auto block copy paste ( copas ) dengan background dan border

<code>

<div>
<form name="copy">
<div align="center">
<input value="Select All" onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button">
</div>
<div align="center">
</div>

<textarea rows="3" cols="20" style="border: 8px inset #ff1493; padding: 0pt 1px; background: #ffd700 none repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; color: #00bfff; line-height: 1.5em; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px;" name="txt" wrap="VIRTUAL">
Simpan Tulisan sobat disini
</textarea>
</form>
</div>

</code>

===============

Keterangan :
Ganti text warna Red dengan tulisan "Pilih Semua" / "Block All" / "Click Here"

Ganti rows="3" cols="20" sesuai keinginan .. rows Nilai tinggi textarea .. dan cols Panjang text area ..

Ganti Warna Deepink #ff1493 / warna Gold #ffd700 dan warna #00bfff dengan warna - warna lain .. sesuai selera / sesuai warna kesukaan masing - masing ..

Ganti Tulisan warna Green ( Simpan Tulisan sobat disini ) .. dengan text / code yang mau sobat simpan didalam textarea ..

Contoh :

<textarea name="code" rows="3" cols="20" style=";color:#ff1493;">
Simpan Tulisan sobat disini
</textarea>

Contoh :

<textarea name="code" rows="3" cols="20" style="border:5px inset #ff1493;">
Simpan Tulisan sobat disini
</textarea>

Contoh :

<textarea name="code" rows="3" cols="20" style="color:#ff1493;border:5px inset #ff1493;">
Simpan Tulisan sobat disini
</textarea<

Contoh :

<textarea name="code" rows="3" cols="20" style="background:#ff1493;">
Simpan Tulisan sobat disini
</textarea>

Contoh :

<textarea name="code" rows="3" cols="20" style="background:#ff1493;border:5px inset #ff1493;">
Simpan Tulisan Sobat disini
</textarea>

Contoh :

<textarea name="code" rows="3" cols="20" style="background:#ff1493;border:5px dashed #ffd700;line-height:1.5em;padding:5px;">
Simpan Tulisan Sobat disini
</textarea>

Contoh :

<textarea name="code" rows="3" cols="20" style="background:#ff1493;border:5px dotted #ffd700;line-height:1.5em;padding:5px;">
Simpan Tulisan Sobat disini
</textarea>

Contoh :

<textarea name="code" rows="2" cols="21" style="background:#000;color:#fff;border:1px solid #ff1493;border-left:20px solid #ff1493;line-height:1.5em;padding:5px;">
Simpan Tulisan Sobat disini
</textarea>

Contoh :

<textarea name="code" rows="2" cols="21" style="background:#000;color:#fff;border:1px solid #ff1493;border-right:20px solid #ff1493;line-height:1.5em;padding:5px;">
Simpan Tulisan Sobat disini
</textarea>

Nah itulah tadi seputar Macam - Macam Jenis Textarea Dengan Berbagai Bentuk Dan Warna, Berikut Cara Buatnya yang dapat Admin sampaikan .. dan dapat admin berikan untuk sobat mickey semuanya .. semoga artikel ini dan membantu dan bermanfaat buat sobat yang membutuhkan nya .. dan terimakasih buat sobat yang udah membacanya dari awal sampe akhir .. sampe ketemu lagi dilain waktu dan lain kesempatan .. See You Next Time #Happy Blogging ^_^

Tag : #Text, #Textarea, #Teks, #Teksarea, #Text Area, #Teks Area, #Jenis textarea, #macam - macam textarea, #cara, #Cara Buat, #Cara membuat, #Cara Buat textarea, #Cara Membuat textarea, #Macam - Macam Jenis Textarea Dengan Berbagai Bentuk Dan Warna, Berikut Cara Buatnya

Macam - Macam Jenis Textarea Dengan Berbagai Bentuk Dan Warna, Berikut Cara Buatnya

Blog Ponsel Si Oon - Macam - Macam Jenis Textarea Dengan Berbagai Bentuk Dan Warna, Berikut Cara Buatnya Hai Sahabat Mickey ?? Kali ini ad...

Nama	Blog URL
Ocha	http://oon23.blogspot.com

Blog Ponsel Si Oon

Cara Membuat Css Loader

Cara Buat Css Toggle Switch

Cara Buat Flip Toggle Switch

Cara Buat Table Dalam Postingan Berikut Contoh Dan Beberapa Model Table

Cara Buat Pop Up Login

Cara Buat Basic modal Dialog Box

Mitos Seputar Blogging Dan Sejarah Berdirinya Blogger.com

Macam - Macam Jenis Textarea Dengan Berbagai Bentuk Dan Warna, Berikut Cara Buatnya

Popular

Labels

Archive

Nama	Blog
Ocha	https://oon23.blogspot.com
Wida	https://so-gaul.blogspot.com