D'RID-ONE PUTRA MENA-ONE: BMTT

Tampilkan postingan dengan label BMTT. Tampilkan semua postingan

Rabu, 11 Desember 2024

Membuat Navbar MEDSOS di LKSA -- Mungkin bisa diadopsi

</style>
<div class="mastaka_drckhobar">
<div class="drisoma-khobar">
<div class="drsamazhlo">Media Sosial LKSATA</div>
<script src="https://dl.dropboxusercontent.com/u/80436322/autoscroll.js" type="text/javascript"></script>
<script type="text/javascript">
function scrollToBottom(timedelay=0) {
        var scrollId;
        var height = 0;
        var minScrollHeight = 100;
        scrollId = setInterval(function () {
            if (height <= document.body.scrollHeight) {
                window.scrollBy(0, minScrollHeight);
            }
            else {
                clearInterval(scrollId);
            }
            height += minScrollHeight;
        }, timedelay);           
    }
</script>
<script type="text/javascript">
	var nMaxPosts =6;
        var nWidth = 100;
        var nScrollDelay = 60;
        var sDirection = "left";
        var sOpenLinkLocation = "N";
        var sBulletChar = ">>";
</script>
<script src="/feeds/posts/default?alt=json-in-script&callback=RecentPostsScrollerv2&max-results=6" type="text/javascript"></script>
</div>

<div id="drcmedsos">
<a class="facebook" href="https://www.facebook.com/lksataTeA/"></a>
<a class="twitter" href="https://twitter.com/lksataTeA"></a>
<a class="flickr" href="https://www.flick.com/lksataTeA/"></a>
<a class="pinterest" href="https://pinterest.co.id/lksataTeA/"></a>
<a class="googleplus" href="https://jwd.goPlus.co.id/lksataTeA/"></a>
<a class="vimeo" href="https://jwd.vimeo.id/lksataTeA/"></a>
<a class="youtube" href="https://jwd//youtu.be/lksataTeA/"></a>
<a class="mail" href="https://lksa-tauhidulafkar.blogspot.co.id/"></a>
</div>

</div>
=============Selesai=============

Sabtu, 06 Mei 2023

Cara Membuat Kotak Script dan Kotak Scroll Lengkap di postingan Blog Lengkap kode HTML

Assalamualaikum..wrwb?

Pada saat beraktivitas di blog dengan bahasan tentang kode-kode script HTML memang sangat menyenangkan walau dalam pembuatan artikel sedikit menambah teknik properti lagi seperti: kotak script dan kotak scroll tapi itu tidak masalah demi menambah kreasi website/blog lebih hidup, mau bagaimanpun penguasaan dan trik desain kecil-kecilan ini sangat diperlukan sedikit hingga menjadi besar!!

Cara membuat kotak script dan kotak scroll di artikel/postingan blog

Fungsi kotak script

Sebenarnya penggunaan kotak script ini jarang dipakai untuk artikel yang basis tentang berita tips masakan pendidikan olahraga, tapi bagi blog yang membahas kode HTML, kode CSS dan tutorial itu sangay cocok agar penyampaian konten acript tidak bercampur dengan teks sekaligus menambah kesan profesional dan tidak berantakan.

Caranya mudah siapa pun bisa apalagi teman, yang lebih dulu memahami bidang ini.

Di bawah ini saya akan merangkum semua ragam kode untuk membuat kotak warna bisa membantu dan menyokong artikel supaya kelihatan lebih rapi, bagus, sangat cocok teman semua untuk pemakaiannya diblog.

MAU COBA..?

Cara pemasangan kotak script di postingan blog

1. Login ke Bloger teman.

2. Buat satu post baru.

3. Pada post edit HTML (ingat! pada mode HTML)

4. Copy dan pastekan kode scripnya pada tempat yang di inginkan, (sekalian mengedit ukuran, warna sesuai selera)

5. Setelah selesai, silahkan kembali pada Compose, isi kotak dengan tulisan atau script.

6. Selesai! tinggal meneruskan membuat artikelnya.

Langsung saja bagi teman semua yang ingin mendapatkan, atau lagi memerlukan, berikut kumpulan kotak script yang berhasil saya rangkum, secara sederhana, teman tinggal pilih dan bisa dipasang pada postingan.

Info Anda:

Untuk mengganti warna background atau border bisa teman cari warna-warna favorite yang cocok buat teman pilih, untuk merubah warna di

(Kode Warna HTML100 Persen Lengkap Untuk Blog)

Inilah kumpulan Kotak Script dan Kotak scroll bar mudah-mudahan lengkap!

(Semua kode berada dalam kotak masing-masing tinggal mengcopynya)

#. Kotak text- center/tilisan di tengah bayang-bayang/hidden.

<div style="background-color: deepskyblue; border-radius: 7px; box-shadow: 10px 10px 0 rgba(0 , 0 , 0 , 0.16) , 0 2px 10px 0 rgba(0 , 0 , 0 , 0.12); color: black; font-size: 18px; font-weight: bold; margin: 0.5rem 0 1rem; overflow: hidden; padding: 20px; position: relative; text-align: center; transition: 0.25s;">TULISAN DISINI</div>

#. Text center hidden bayang-bayang rendah.

TULISAN DISINI</div>

</div>

Keterangan dari atas sampai bawah:

kuning -box-shadow/efek-bayangan

Violet -radius/lengkung>>bisa diatur

Blue -background>>bisa diatur

Red - border, solid sisi/ lis>>bisa di atur(warna dan ukuran)

Green -tinggi (khusus sistem scroll)

#. Kotak solid-samping kiri/t-align left)

<div style="-moz-border-box: 10px; -webkit-border-box: 10px; background-color: ghostwhite; border-left: 5px solid red; padding: 20px; t-align: left;">
<span style="color: black;"><span style="font-family: "trebuchet ms" , sans-serif;">TULISAN DISINI </span>

#. Kotak script warna Green (t-align -left)

<div style="-moz-border-box: 10px; -webkit-border-box: 10px; background-color: #6ddb98; border-left: 7px solid green; padding: 20px; t-align: left;">
<span style="color: black;"><span style="font-family: 'Trebuchet MS', sans-serif;">TULISAN DISINI </span></div>

#. Sederhana dengan ghostwhite

<div style="-moz-border-box: 10px; -webkit-border-box: 10px; background-color: ghostwhite; border-left: 7px solid rosybrown; padding: 20px; t-align: left;">
<span style="color: black;"><span style="font-family: "trebuchet ms" , sans-serif;">TULISAN DISINI </span>

#Kotak script tanpa lis border-left(warna bisa disesuaikan)

<div style="-moz-border-box: 10px; -webkit-border-box: 10px; background-color: turquoise; border-left: 10px solid #4fee0f; border: 10px; padding: 10px; t-align: left;">Tulis script di sini! </div>

#. Kotak script dengan radius sudut=10px+border-left=10px

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-left: 10px solid #2288dd; border radius: 10px; padding: 10px; t-align: left;">TULISAN DI SINI</div>

#. Kotak doble-bolder >>vertical/tinggi, menyesuaikan.

<div style="background-color: azure; border: 3px #1780dd double; padding: 10px; text-align: left;"> TULISAN DISINI<br /></div> </div>

# Kotak dengan singgle padding border black

<div style="background-color: ivory; border: 2px solid #444; padding: 10px; text-align: left;">
TULISAN DISINI
</div>

#. Kotak dengan radius border 4px >> ukuran dan warna bisa disesuaikan

<div style="-moz-border-radius: 8px; -webkit-border-radius: 8px; background-color: aliceblue; border-radius: 8px; border: 4px solid #999; padding: 10px; t-align: left;">
TULISAN DISINI</div>

#.Kotak border-dotted 2pk dan warna bisa disesuaikan.

<div style="background-color: lightcyan; border: 2px #1b1a76 dotted; padding: 10px; text-align: left;">
TULISAN DISINI</div>

#.Kotak dengan border-dashed>>2px

<div style="background-color: mistyrose; border: 2px #610b38 dashed; padding: 10px;">
TULISAN DISINI</div>

#. Kotak radius 10 px webkit-border-doble 4px

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: lightskyblue; border-radius: 10px; border: 4px double #fff; padding: 10px; t-align: left;">
TULISAN DISINI</div>

#. Kotak dengan border padding-outset/t-align 10px

Rabu, 22 Maret 2023

BMTT 2023

Rumus Posting Video

Kamis, 30 Juni 2022

Rumus:Thumbnail - Pakupayung

Rumus bmtt / html (bahasa mesin tingkat tinggi - high text machine language)

container ==> konteneur
thumb ==> pakupayung
big ==> besarbadag
featured ==> fituran

.konteneur a { float: left; margin: 20px;}

.konteneur a:hover .pakupayung {
  -webkit-box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
  -moz-box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
  box-shadow: 0px 0px 15px rgba(0,0,0,0.5);}
 
.konteneur a:hover .besarbadag {top: 260px;}

.besarbadag {position: absolute;
  top: 260px;
  left: 20px;
 
  -webkit-transition: top 1s ease;
  -moz-transition: top 1s ease;
  -o-transition: top 1s ease;
  -ms-transition: top 1s ease;
  transition: top 1s ease;}

.besarbadag fituran {  top: 260px;
  left: 20px;
  z-index: -3;}
</style>

Hasil tampilan:
container ==> konteneur thumb ==> pakupayung big ==> besarbadag featured ==> fituran

Sabtu, 07 Mei 2022

BULANUHDUD _ BUKA LAYAR PENUH DUD!

Tampilan Penuh Layar

Klik tombol "Buka Layarpenuh" untuk mode ful skrin. Tutup dengan cara klik tuts "Esc" di kibot, atau dengan mengklik tombol "Tutup Layarpenuh" saja.

Buka Layarpenuh Tutup Layarpenuh

Materi artikel BMTT -- dikopi lansung rumus bahasa mesin tingkat tinggi yang terdapat pada bagian antara 3 tanda seru !!!---YA INI--!!! dikopas langsung. Dihalaman postingan baru ditampilan html atau di halaman baru juga bisa dicoba.

Oh ya, kata "bulanuhdud" bisa diganti dengan kata lain yang sesuai dengan selera anda. Terima kasih.

Wassalam.

Untuk sekripnya di bawah ini. Semoga bermanfaat. Wassalam yang ke 2x.

!!!<div>
<h2>Tampilan Penuh Layar</h2>
<p>Klik tombol "Buka Layarpenuh" untuk mode ful skrin. Tutup dengan cara klik tuts "Esc" di kibot, atau dengan mengklik tombol "Tutup Layarpenuh" saja.</p>
<tombol onclick="bukaLayarpenuh();">Buka Layarpenuh</tombol>
<tombol onclick="tutupLayarpenuh();">Tutup Layarpenuh</tombol>

/* IE11 */
:-ms-fullscreen {
  background-color: yellow;
}

/* Standard syntax */
:fullscreen {
  background-color: yellow;
}

/* Style the tombol */
tombol {
  padding: 20px;
  font-size: 20px;
  background: yellow;
}
</style>!!!

Jumat, 18 Februari 2022

Ngoding - Atribusi | Kuring

<b:section class='footer' id='footer'>
        <b:widget id='HTML12' locked='false' title='Duridwan TeA Maps' type='HTML'>
          <b:widget-settings>
            <b:widget-setting name='content'><div>
<iframe frameborder='0' height='350' marginheight='0' marginwidth='0' scrolling='no' src='https://maps.google.co.id/maps?f=q&source=s_q&hl=en&geocode=&q=Cianjur,MTs.+Tauhidul+Afkar,+East+Java,+Indonesia&
aq=0&oq=MTs.+Tauhidul+Afkar+s&sll=-6.711942,107.059229&sspn=-6.700842,107.059100&ie=UTF8&hq=&hnear=MTs.+Tauhidul+Afkar,+Hanjawar,+Cianjur,+East+Java,+Indonesia&t=m&z=14&ll=-6.711942,107.059229&output=embed' width='100%'></iframe>
</div></b:widget-setting>
          </b:widget-settings>
          <b:includable id='main'>
  
  <b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

<b:include name='quickedit'/>
</b:includable>
        </b:widget>
        <b:widget id='Attribution1' locked='false' title='' type='Attribution'>
          <b:widget-settings>
            <b:widget-setting name='copyright'><![CDATA[Syukur dan Terima Kasih Kepada ((A)) Alloh SWT. Copyright © 2015 - 2022. Desainer ((D)) <a href="https://duridwancjg.boxmode.io">Duridwancjg TeA</a>]]></b:widget-setting>
          </b:widget-settings>
          <b:includable id='main'>
    <div class='widget-content' style='text-align: center;'>
      <b:if cond='data:attribution != ""'>
       <data:attribution/>
      </b:if>
    </div>

<b:include name='quickedit'/>
  </b:includable>
        </b:widget>
      </b:section>
 <div class='credits'>
  
<a expr:href='data:blog.homepageUrl'><data:blog.title/></a> | Design by <a href='http://duridwangurunatafkar.blogspot.com'> Duridwangurunatafkar</a> | Adopted by: <a href='http://duridwancjg.boxmode.io'> Duridwan Cijagong</a>
    </div>

Jumat, 26 November 2021

BMTT drivegoogle kuring

Bahasa Mesin Tingkat Tinggi nu patula patali sareng drivegoogle

Judul - DriveGoogle Di preview, view, tanya download, download langsung ----✋✊

Tulis bmtt anda di sini..!

Praktek langsung ....

kopas kode diantara --!rumus!--..

<ieu bmtt-dimulai[[--!
Drive Google Preview
https://drive.google.com/file/d/Tahdidieutehidfilenudimaksud/preview

Drive Google View
https://drive.google.com/file/d/Tahdidieutehidfilenudimaksud/view

Download - download anyway - bade moal?
https://drive.google.com/uc?id=Tahdidieutehidfilenudimaksud&export=download

Download - download langsung tak perlu tanya - langsung cabut!
https://drive.google.com/uc?export=download&confirm=5365&id=Tahdidieutehidfilenudimaksud
!--]]</diakhiri-bmtt ieu>

Selesai

Judul

Selasa, 02 Maret 2021

Mengenal Elemen Head pada HTML dan Fungsinya

Elemen <head> adalah elemen yang berisi metadata yaitu informasi-informasi halaman web yang tidak ditampilkan pada halaman tersebut. Elemen ini sangat penting dan menjadi salah satu syarat minimal dalam struktur global HTML yang ada di W3C.

Penulisan tag <head> berada di antara tag <html> dan tag <body>. Fungsi elemen head pada HTML adalah menjadi wadah dari elemen metadata lainnya yaitu tag <title>, <meta>, <style>, <link> dan <script>

Elemen `<title>`

Elemen <title> adalah elemen HTML yang berfungsi untuk membuat title atau judul yang tampil pada title bar di web browser. Jadi judul tersebut tidak tampil di halaman web.

1	`<title>Cara membuat website</title>`

Tag <title> sangat penting dalam SEO (Search Engine Optimization) agar halaman web kita mendapatkan ranking yang baik di Google atau search engine lainnya.

Tips menulis judul pada tag <title>:

Tulis singkat yaitu tidak lebih dari 60 karakter.
Judul harus mengandung kata kunci yang ingin kita ranking di search engine.
Judul harus menarik tetapi juga harus sesuai dengan konten halaman web kita.

Elemen `<meta>`

Elemen <meta> adalah elemen yang berisi metadata yang tidak dapat dilihat oleh user tetapi biasanya digunakan oleh mesin untuk mengolah halaman web tersebut atau sebagai informasi tambahan halaman web tersebut.

Berikut ini tag meta yang sering digunakan:

Meta robots

Meta robots digunakan untuk menentukan hak akses pada robot yang datang ke halaman web. Robot disini maksudnya adalah pengunjung halaman web yang bukan manusia tetapi mesin yang mengakses halaman web untuk mendapatkan informasi dari halaman web tersebut.

Contoh memberi akses robot:

1	`<meta` `name="robots"` `content="index, follow"` `/>`

Secara default jika kita tidak menambahkan aturan meta robots maka halaman web kita dapat diakses oleh robots. Kita bisa melakukan block pada robot dengan merubah content menjadi “noindex, nofollow”. Tapi jika website kita ingin muncul di Google maka sebaiknya tidak melakukan block tersebut.

Meta description

Meta description digunakan untuk menambahkan diskripsi singkat tentang konten yang ada pada halaman web tersebut. Diskripsi ini akan ditampilkan pada mesin pencari, jadi sangat disarankan untuk memasukkan meta description ke HTML.

<meta name="description" content="Cara membuat website yang menarik dengan mudah. Dilengkapi dengan gambar dan panduan yang lengkap." />

Tips menulis meta description:

Tulis diskripsi halaman web dengan panjang karakter kurang dari 160 karakter.
Diskripsi lebih baik mengandung kata kunci yang ingin diranking di search engine.
Diskripsi ditulis secara menarik namun harus sesuai dengan konten yang ada di halaman tersebut.

Meta viewport

Meta viewport digunakan membuat halaman web yang responsive. Maksunya adalah halaman web tersebut dapat menyesuaikan dengan device yang digunakan misalnya dibuka di laptop maka tampilan akan menyesuaikan lebar layar laptop, jika dibuka di smartphone maka juga akan menyesuaikan lebar layar smartphone.

Meta viewport yang sering digunakan adalah:

1	`<meta` `name="viewport"` `content="width=device-width, initial-scale=1"` `/>`

Elemen `<style>`

Elemen <style> digunakan untuk mengatur tampilan halaman web dengan menggunakan CSS. Tapi biasanya CSS akan ditempatkan tersendiri pada file. Jadi, tag <style> hanya berisi CSS yang penting saja. CSS akan kita pelajari pada materi CSS tersendiri agar tidak bingung.

<style>
isi kode css
</style>

Elemen `<link>`

Elemen <link> digunakan untuk menghubungkan halaman web tersebut dengan file atau halaman yang lain. Terdapat beberapa macam link yang berkembang saat ini. Diantaranya adalah link icon, canonical, stylesheet dan lainnya.

Link icon

Link icon digunakan untuk membuat atau menambahkan icon di sebelah title halaman web. Caranya adalah dengan menghubungkannya pada file ICO atau PNG. Contoh:

1	`<link` `rel="icon"` `href="favicon.png"` `/>`

Penjelasan: Kode di atas akan menambahkan icon dengan gambar bernama favicon.png.

Link canonical

Link canonical digunakan untuk memberi informasi kepada robots bahwa halaman tersebut sama dengan link yang ada pada canonical. Contohnya:

<link rel="canonical" href="https://duridwanwancjg.site.bm/elemen-head-pada-html/" />

Penjelasan: Kode di atas menunjukkan bahwa halaman web tersebut memiliki konten yang sama dengan alamat yang tertera pada link tersebut.

Link stylesheet

Link stylesheet berfungsi untuk menghubungkan halaman web dengan file CSS yang sedang digunakan. Perbedaan antara link stylesheet dan tag <style> terletak pada penempatan kode CSS. Pada link stylesheet, kode CSS berada di luar kode HTML yaitu file CSS tersendiri. Sedangkan pada tag <style>, kode CSS berada di dalam kode HTML atau disebut dengan inline CSS.

<link rel='stylesheet' href='https://duridwanwancjg.site.bm/draset/bmtt/css/drcjgstyle.css' type='text/css' media='all' />

Elemen `<script>`

Elemen <script> digunakan untuk menghubungkan halaman HTML dengan Javascript. Terdapat 2 cara memasukkan javascript pada HTML yaitu dengan inline javascript (javascript berada di dalam HTML) dan external file (javascript berada pada file .js di luar HTML). Javascript akan kita pelajari pada materi Javascript tersendiri agar tidak bingung dalam belajar HTML.

Contoh inline javascript:

<script type='text/javascript'>
isi kode javascript
</script>

Contoh external file:

<script type='text/javascript' src='https://duridwanwancjg.site.bm/draset/bmtt/js/jquery-single.js'></script>

Lihat juga: pengenalan tentang apa itu HTML.

Contoh Kode HTML Elemen `<head>`

<html>
    <head>
        <title>Cara membuat website</title>
        <meta name="robots" content="index, follow" />
        <meta name="description" content="Cara membuat website yang menarik dengan mudah. Dilengkapi dengan gambar dan panduan yang lengkap." />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <style>
            isi kode css
        </style>
        <link rel="icon" href="favicon.png" />
        <link rel="canonical" href="https://duridwanwancjg.site.bm/elemen-head-pada-html#/" />
        <link rel='stylesheet' href='https://duridwanwancjg.site.bm/draset/bmtt/css/drcjgstyle.css' type='text/css' media='all' />
        <script type='text/javascript'>
            isi kode javascript
        </script>
        <script type='text/javascript' src='https://duridwanwancjg.site.bm/draset/bmtt/js/jquery-single.js'></script>       
    </head>
    <body>
        konten website
    </body>
</html>

Kelima tag yang berada di dalam elemen <head> tersebut adalah tag yang paling sering digunakan dalam pembuatan sebuah website. Tag-tag tersebut juga disarankan untuk digunakan karena memiliki fungsi yang penting. Jika ada pertanyaan atau saran silahkan kirim melalui kolom komentar.

DUDI RIDWAN POPI SYAPI'AH

Medsos DRcjgrTeA

Alih Bahasa

Halaman

DRMenuNavigasiBar

menunavngampar

Rabu, 11 Desember 2024

Sabtu, 06 Mei 2023

Cara Membuat Kotak Script dan Kotak Scroll Lengkap di postingan Blog Lengkap kode HTML

Rabu, 22 Maret 2023

Kamis, 30 Juni 2022

Sabtu, 07 Mei 2022

Tampilan Penuh Layar

Jumat, 18 Februari 2022

Jumat, 26 November 2021

Selasa, 02 Maret 2021

Elemen <title>

Elemen <meta>

Elemen <style>

Elemen <link>

Elemen <script>

Contoh Kode HTML Elemen <head>

Posting Populer

DRcjgLink

Duridwan TeA Google Arsip

Tampil Ful Skrin

Tampilan penuh layar

DRLabel

Halaman

MAIN GAME BISA SAMBIL SHOLAWAT/DZIKIR "الله الله الله" ????

Kami segera kembali...

Main Game Sambil Sholawat

DRcjg YouTube TeA

Abah Dadeng

jsrid

Online Apps

HUDHUD AT-TWITERI

Garasi