Bagaimana Cara Membuat Box Berisi Text di Sela-Sela Artikel Kita ? Dengan HTML dan CSS

Cara Yang Sangat Mudah untuk Membuat Box Berisi Text di Sela-Sela Artikel Pada Postingan.

Sebelum memulai artikel, pastinya kita terbiasa untuk mendalami Informasi dan seputar pengetahuan terlebih dahulu, yaitu kita harus mengetahui apa itu penjelasan dari kode HTML dan CSS dalam dunia Pemograman IT ?, Simak penjelasannya dibawah ini.

Ini adalah Penjelasan HTML ?
HTML bisa disebut Hyper Text Markup Language adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi didalam sebuah penjelajah web Internet dan pemformatan Hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan wujud yang terintergerasi.

Dan Apa itu CSS ?
CSS adalah kependekan dari Cascading Style Sheet. CSS merupakan salah satu kode pemrograman yang betujuan untuk menghias dan mengatur gaya tampilan atau layout halaman web supaya lebih elegan dan menarik. CSS adalah sebuah teknologi internet yang di rekomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996.

Pada artikel ini saya akan memberikan Sedikit informasi yang unik untuk para Blogger Indonesia, saya lihat di group-group Blogger Indonesia, terdapat para awam Blogger yang menanyakan, bagaimana cara membuat Box seperti gambar dibawah ini pada sela-sela artikel, dengan methode menambahkan HTML kode , ini contoh gambarnya :

Box-CSS Untuk Menempatkan Ketikan dengan cantik.
Sumber Lihat : ArticleInfoWeb.

Yaa gambar disamping adalah contoh yang di inginkan oleh para blogger awam indonesia, tetapi bagaimana ya caranya?

Cara-caranya sangat simple anda harus mengikuti penjelasan dibawah ini agar hasilnya sukses dan memuaskan untuk Blog anda.
1. Siapkan Bloggernya.
2. Mulai untuk menulis Artikel New Post.
3. Lalu cobalah anda mengetik sembarang, di bagian Compose.
4. Dan silahkan anda lihat dalam menu HTML disamping Compose nya.

5. Cari kode yang menjulur ke text anda, dan sinkron kan kode <div box="" class="box"> nya diatas text yang ingin anda edit menjadi ada boxnya.
6. Lalu tutup dengan kode </div> disamping kode text yang ingin anda edit menjadi box tadi, agar tidak terjadi pesan error.
7. Lalu langkah terakhir adalah, silahkan test Click Save dan Preview dan anda lihat Hasilnya.

Yaa diatas adalah kode untuk mensinkronkan HTML ke CSS agar menjadi Box dan Bagaimana jika CSS ke HTML ? Okee, sekarang ini saya akan memberikan  kode dari style css nya agar box tersebut bisa tampil dengan sempurna dan sukses.


Kode CSS adalah berikut :

<style>
.box{
background-color:#555;
border-left:10px solid #bbb;
border-radius:10px;
width:90%;
padding:15px 20px;
color:#fff;
}
</style>

Gambar diatas adalah gambar yang sukses untuk membuat boxnya, dengan cara-cara simple yang sudah saya jelaskan.

Penjelasan selanjutnya adalah, jika anda ingin mengganti warna background dari box tersebut, silahkan anda ganti pada style css nya, yaitu dibagian background-color:#555; pada bagian angka atau kode #555 adalah warna dari background tersebut, jika anda ingin mengganti warna background nya dengan kesukaan anda silahkan anda ganti sendiri, anda bingung dengan kode-kode berapa saja untuk mengubah warna ? Silahkan lihat disini :
Kode Warna CSS Lengkap. Visit website disamping.

Click Untuk Memperbesar Gambar.

Dan juga untuk mengganti warna tulisan text yang sudah dimasukkan di boxnya, di style css ada code yaitu color:#fff; penjelasan kode disamping adalah color dari warna text tersebut adalah warna putih atau white. Jika anda ingin mengganti sesuai kesukaan anda dan sesuai kesesuaian background silahkan pilih warna text yang cocok untuk anda disini juga : Kode Warna CSS Lengkap.

Jika anda masih belum paham cara-cara membuat box tersebut dengan kode HTML dan CSS, mari lihat vidio dibawah ini dengan seksama, Jika ada seputar pertanyaan silahkan berkomentar di bawah.

Vidio Cara tutorial :
Simak vidio dengan seksama, agar anda selalu mengerti tentang Topik yang sudah di jelaskan.

Mari anda langsung praktekkan sendiri dengan menyimak vidio diatas, langsung anda praktikkan dengan sedemikian rupa vidio yang sudah di buat. Agar kalian langsung bisa dan mengetahui, dimana posisi kesalahan dan dimana posisi kebenarannya.

Akhir Artikel :
Sekiranya artikel diatas sangat bermanfaat untuk anda, mohon tuangkan kritik dan saran anda untuk blog dan artikel ini, agar penulis selalu tau kepuasan dari Visitor atau Viewer yang sudah berkunjung di situs ini, Komentar dibawah sudah disediakan melalui Sign In media sosial yang anda miliki atau sudah melakukan Sign Up, Semoga bermanfaat untuk anda semua dan Terima Kasih.

Bagaimana Cara membuat Button dengan CSS di Site Button Generator (Simple Scripting)

Bagaimana Cara membuat Button dengan CSS di Site Button Generator (Simple Scripting).

HTML biasanya di gunakan para programmer atau developer untuk membuat Website Project. Biasanya para programmer membuat website untuk client mereka, sesuai design yang ingin mereka punya. Dan programmer akan membuatnya. Dengan pengalaman dan skill programmer, programmer mampu membuat website dengan Responsive atau Baik.

Mari kita ketahui, Apa itu CSS ?

CSS adalah kependekan dari Cascading Style Sheet.CSS merupakan salah satu kode pemrograman yang bertujuan untuk menghias dan mengatur gaya tampilan/layout halaman web supaya lebih elegan dan menarik.CSS adalah sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996.

Dan apa itu HTML ?

Hyper Text Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML. 

Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. 

HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C). HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee Robert ketika mereka bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energi tinggi di Jenewa) Sumber Pernyataan.

Topik dari posting ini adalah, saya akan mengajari anda Bagaimana Cara membuat Button dengan CSS di Site Button Generator (Simple Scripting), dengan sangat mudahnya Button dibuat dengan Include Href CSS yang dibuat oleh HTML. Mari simak penjelasan atau Vidio tutorial dari cara membuat button tersebut dibawah ini.

YouTube Tutorial Vidio :

Silahkan simak vidio ini, jika anda memiliki seputar pertanyaan atau problem, bisa postingkan komentar anda, dan jika anda memiliki ilmu yang lebih pengalaman dari saya, bisa anda posting juga. Click vidio dan untuk memulainya.

Vidio tutorial diatas adalah hasil ilmu saya yang saya pelajari Otodidak dengan template-template blogger atau Website besar. Dan saya ungkapkan di site kali ini. Jika artikel ini bermanfaat, silahkan anda selalu kunjungi Site atau Blogger saya ini. Sekian Terima Kasih.

Artikel : Cara membuat Button dengan CSS di Site Button Generator .

Bagaimana Cara menambahkan Widged Like Fanspage Facebook di Website/Blogger kita?

Menambahkan Widged Like Fanspage Facebook di Website/Blogger menggunakan Script HTML.

Facebook adalah sebuah layanan jejaring sosial yang diluncurkan pada bulan Februari 2004, dan berkantor pusat di Menlo Park, California, Amerika Serikat. Pada September 2012, Facebook memiliki lebih dari satu miliar pengguna aktif, lebih dari separuhnya menggunakan telepon genggam.

Facebook didirikan oleh Mark Zuckerberg bersama teman sekamarnya dan sesama mahasiswa Universitas Harvard, Eduardo Saverin, Andrew McCollum, Dustin Moskovitz, dan Chris Hughes. Keanggotaan situs web ini awalnya terbatas untuk mahasiswa Harvard saja, kemudian diperluas ke perguruan lain di Boston, Ivy League, dan Universitas Stanford. Situs ini secara perlahan membuka diri kepada mahasiswa di universitas lain sebelum dibuka untuk siswa sekolah menengah atas, dan akhirnya untuk setiap orang yang berusia minimal 13 tahun. 

Meski begitu, menurut survei Consumer Reports bulan Mei 2011, ada 7,5 juta anak di bawah usia 13 tahun yang memiliki akun Facebook dan 5 juta lainnya di bawah 10 tahun, sehingga melanggar persyaratan layanan situs ini. (Sumber Penerangan)

Studi Compete.com bulan Januari 2009 menempatkan Facebook sebagai layanan jejaring sosial yang paling banyak digunakan menurut jumlah pengguna aktif bulanan di seluruh dunia. Entertainment Weekly menempatkannya di daftar "terbaik" akhir dasawarsa dengan komentar, "Bagaimana caranya kita menguntit mantan kekasih kita, mengingat ulang tahun rekan kerja kita, mengganggu teman kita, dan bermain Scrabulous sebelum Facebook diciptakan?" Quantcast memperkirakan Facebook memiliki 138,9 juta pengunjung bulanan di AS pada Mei 2011.

Menurut Social Media Today pada April 2010, sekitar 41,6% penduduk Amerika Serikat memiliki akun Facebook.[15]Meski begitu, pertumbuhan pasar Facebook mulai turun di sejumlah wilayah dengan hilangnya 7 juta pengguna aktif di Amerika Serikat dan Kanada pada Mei 2011.

Nama layanan ini berasal dari nama buku yang diberikan kepada mahasiswa pada tahun akademik pertama oleh beberapa pihak administrasi universitas di Amerika Serikat dengan tujuan membantu mahasiswa mengenal satu sama lain. Facebook memungkinkan setiap orang berusia minimal 13 tahun menjadi pengguna terdaftar di situs ini.

Nama layanan ini berasal dari nama buku yang diberikan kepada mahasiswa pada tahun akademik pertama oleh beberapa pihak administrasi universitas di Amerika Serikat dengan tujuan membantu mahasiswa mengenal satu sama lain. 

Contoh Widged Fanspage Facebook yang ingin di letakkan di HTML.

Untuk cara meletakkan Script HTML di Widged Blogger/Website adalah, anda hanya Cukup Copy Paste script dibawah ini di Widged anda (Tata Letak).

<div id="fb-root"></div>

<script>(function(d, s, id) {

  var js, fjs = d.getElementsByTagName(s)[0];

  if (d.getElementById(id)) return;

  js = d.createElement(s); js.id = id;

  js.src = "//connect.facebook.net/id_ID/sdk.js#xfbml=1&appId=483767385088491&version=v2.0";

  fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-like-box" data-href="https://www.facebook.com/GantiLinkFanspageAnda" width="300" height="270"data-colorscheme="light" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"></div>

Perhatikan Tulisan berwarna Biru, https://www.facebook.com/GantiLinkFanspageAnda Link disamping adalah link contoh untuk pemasangan fanspage di Widged. Anda ganti tulisan "GantiLinkFanspageAnda" dengan nama samping Fanspage anda harus sesuai agar muncul dan Sukses untuk di Tampilkan.

Dan angka 300 untuk Width , Height 270 silahkan anda tentukan sendiri sesuai keinginan anda dan kesesuaian template anda.

Letakkan Script diatas jika sudah di Copy Paste menuju Widged yang ada di Blogger anda, Tempatkan sesuai kesesuaian Template.

Contoh Widged yang sudah saya Copy Paste Script di atas.

Jika anda merasa kurang Jelas atau membutuhkan Vidio Tutorial untuk pemasangan Widged fanspage di Blogger/Website kita, anda bisa komentar di tittle Post ini, kami akan menjawab pertanyaan anda, dan mengirimkan Link Vidio secepatnya kepada anda yang masih kurang paham.

Sekian Artikel Hari ini, Semoga bermanfaat, Terima Kasih.

Bagaimana Cara memasang Captcha Google agar Script Tidak terkena Spammer?

Simple, Cara memasang Captcha Google agar Script Tidak terkena Spam Databases.

reCAPTCHA adalah layanan gratis yang melindungi website Anda dari spam dan penyalahgunaan. reCAPTCHA menggunakan mesin analisis risiko maju dan CAPTCHA adaptif untuk menjaga perangkat lunak otomatis dari terlibat dalam kegiatan yang kasar di situs Anda. Hal ini sementara membiarkan pengguna yang sah Anda melewati dengan mudah.

reCAPTCHA menawarkan lebih dari perlindungan hanya spam. Setiap kali CAPTCHA kami diselesaikan, bahwa usaha manusia membantu mendigitalkan teks, keterangan gambar, dan membangun mesin dataset pembelajaran. Hal ini pada gilirannya membantu melestarikan buku, meningkatkan peta, dan memecahkan masalah AI keras.

reCAPTCHA dibangun untuk keamanan. Berbekal keadaan teknologi seni, selalu tetap di garis depan spam dan penyalahgunaan tren pertempuran. reCAPTCHA adalah waspada untuk Anda, sehingga Anda bisa tenang.

Hal ini pada gilirannya membantu melestarikan buku, meningkatkan peta, dan memecahkan masalah AI keras.

Anda yang belum mengerti, apa itu Captcha silahkan simak penjelasan tentang captcha dibawah ini. Yang dikutip dari sumber Wikipedia.

Sebuah CAPTCHA (a akronim untuk "Completely Automated tes Umum Turing untuk memberitahu Komputer dan Manusia Selain") adalah jenis tes tantangan-respon yang digunakan dalam komputasi untuk menentukan apakah atau tidak pengguna adalah manusia. 

Vidio Tutorial :

Istilah ini diciptakan pada tahun 2003 oleh Luis von Ahn, Manuel Blum, Nicholas J. Hopper, dan John Langford.  Jenis yang paling umum dari CAPTCHA pertama kali ditemukan pada tahun 1997 oleh dua kelompok yang bekerja secara paralel: (1) Mark D. Lillibridge, Martin Abadi, Krishna Bharat, dan Andrei Z. Broder; dan (2) Reshef, Raanan dan Solan. Bentuk CAPTCHA mengharuskan pengguna mengetik huruf dari gambar terdistorsi, kadang-kadang dengan penambahan urutan dikaburkan dari huruf atau angka yang muncul di layar. Karena tes ini dikelola oleh komputer, berbeda dengan tes Turing standar yang diberikan oleh manusia, CAPTCHA kadang-kadang digambarkan sebagai uji Turing terbalik.

Prosedur identifikasi pengguna ini telah menerima banyak kritik, terutama dari orang-orang cacat, tetapi juga dari orang lain yang merasa bahwa pekerjaan mereka sehari-hari diperlambat oleh kata-kata yang menyimpang yang sulit dibaca. Dibutuhkan rata-rata orang sekitar 10 detik untuk memecahkan CAPTCHA khas dibutuhkan. Sumber Pernyataan.

ReCAPTCHA baru di sini. Sejumlah besar pengguna Anda sekarang bisa membuktikan mereka adalah manusia tanpa harus memecahkan CAPTCHA. Sebaliknya dengan hanya satu klik mereka akan mengkonfirmasi mereka bukan robot. Kami menyebutnya pengalaman ada CAPTCHA reCAPTCHA. Lihat blog untuk lebih jelasnya.

reCAPTCHA dibangun untuk keamanan. Berbekal keadaan teknologi seni, selalu tetap di garis depan spam dan penyalahgunaan tren pertempuran. reCAPTCHA adalah waspada untuk Anda, sehingga Anda bisa tenang.