Category: Blogging

Cara dan Fungsi Penggunaan Tag Textarea Form HTML

Ilustrasi

Objek form textarea digunakan untuk membuat teks input yang dapat berisi lebih dari satu baris input. Tag textarea mirip dengan tag teks jenis input, tetapi memiliki keuntungan berisi banyak baris. Biasanya, tag textarea digunakan untuk entri yang panjang, seperti komentar, deskripsi, atau catatan.

Untuk menggunakan Textarea, kita hanya mengambil label Textarea sebagai berikut:

<textarea></textarea>

Hasil

Teks dapat disisipkan di antara tag pembuka dan penutup yang akan ditampilkan sebagai bidang awal text area sebagai berikut:

<textarea>Contoh</textarea>

Hasil

Contoh

Meskipun tidak diperlukan, tetapi jika text area digunakan dalam formulir, atribut name bertindak sebagai identitas tag textarea. Identitas ini diperlukan selama pemrosesan sisi server (misalnya menggunakan PHP). Atribut name ini akan menjadi variabel untuk menyimpan nilai yang dipilih oleh pengguna. Atribut name ditempatkan di dalam tag textarea:

<textarea name=”contoh”>contoh</textarea>

Hasil

contoh

Untuk membatasi tampilan lebar kolom (cols) dan tinggi baris (rows) dari zona teks. Nilai yang dimasukkan adalah jumlah karakter yang menjadi lebar kotak teks. Misalkan kita mengatur atribut cols = “40”, maka kotak teks akan memiliki lebar karakter 40. Namun, lebar ini tidak akan tepat 40 karakter, karena akan tergantung pada font serta jenis karakter yang diinput.

Contoh penggunaan atribut cols dan rows:

<textarea cols=”40″>Contoh</textarea>

<textarea cols=”40″ rows=”10″>Contoh</textarea>

Hasil

Contoh

Contoh

Atribut disabled dan readonly digunakan untuk membuat kotak teks tidak dapat digunakan. Penggunaan atribut ini biasanya dipadukan dengan javascript agar bekerja secara maksimal. Misalnya, kotak teks hanya dapat diisi jika pengguna telah mengisi bidang lain. Kedua atribut ini hanya memiliki 1 nilai yaitu dirinya sendiri yang ditulis dengan disabled = “disabled” dan readonly = “readonly”. Berikut adalah contoh penulisannya:

<textarea readonly=”readonly”>Contoh</textarea>

<textarea disabled=”disabled”>Contoh</textarea>

Hasil

Contoh

Contoh

Meskipun dua kotak teks yang memiliki atribut ini tidak dapat digunakan, keduanya akan terlihat berbeda. Atribut yang dinonaktifkan akan membuat kotak teks menjadi abu-abu, sedangkan atribut read-only akan terlihat seperti kotak teks biasa. Oleh karena itu, atribut nonaktif biasanya sering digunakan karena akan memberikan kesan kepada pengguna bahwa kotak teks tidak dapat digunakan.

Selain atribut name, value, column, rows, disabled dan read-only, kita juga dapat menggunakan atribut umum seperti id dan class dalam tag textarea. Id dan tag class akan diperlukan untuk pemrograman HTML menggunakan JavaScript dan CSS. Terkadang kotak teks diperlukan untuk memasukkan formulir yang membutuhkan kalimat panjang seperti komentar.

December 19, 2021
CSS Button HTML

CSS Button HTML

Button is one of the html elements that are often found on a website, this element is usually used to submit forms or it could be for other things. Here are some interesting button options:

<!– HTML !–>
<button class=”button-1″ role=”button”>Button 1</button>
<!– CSS !–>
<style>
.button-1 {
background-color: #EA4C89;
border-radius: 8px;
border-style: none;
box-sizing: border-box;
color: #FFFFFF;
cursor: pointer;
display: inline-block;
font-family: “Haas Grot Text R Web”, “Helvetica Neue”, Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 500;
height: 40px;
line-height: 20px;
list-style: none;
margin: 0;
outline: none;
padding: 10px 16px;
position: relative;
text-align: center;
text-decoration: none;
transition: color 100ms;
vertical-align: baseline;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
}

.button-1:hover,
.button-1:focus {
background-color: #F082AC;
}
</style>

<!– HTML !–>
<button class=”button-2″ role=”button”>Button 2</button>
<!– CSS !–>
<style>
.button-2 {
background-color: rgba(51, 51, 51, 0.05);
border-radius: 8px;
border-width: 0;
color: #333333;
cursor: pointer;
display: inline-block;
font-family: “Haas Grot Text R Web”, “Helvetica Neue”, Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 20px;
list-style: none;
margin: 0;
padding: 10px 12px;
text-align: center;
transition: all 200ms;
vertical-align: baseline;
white-space: nowrap;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
}
</style>

<!– HTML !–>
<button class=”button-3″ role=”button”>Button 3</button>
<!– CSS !–>
<style>
.button-3 {
appearance: none;
background-color: #2ea44f;
border: 1px solid rgba(27, 31, 35, .15);
border-radius: 6px;
box-shadow: rgba(27, 31, 35, .1) 0 1px 0;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: inline-block;
font-family: -apple-system,system-ui,”Segoe UI”,Helvetica,Arial,sans-serif,”Apple Color Emoji”,”Segoe UI Emoji”;
font-size: 14px;
font-weight: 600;
line-height: 20px;
padding: 6px 16px;
position: relative;
text-align: center;
text-decoration: none;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
vertical-align: middle;
white-space: nowrap;
}

.button-3:focus:not(:focus-visible):not(.focus-visible) {
box-shadow: none;
outline: none;
}

.button-3:hover {
background-color: #2c974b;
}

.button-3:focus {
box-shadow: rgba(46, 164, 79, .4) 0 0 0 3px;
outline: none;
}

.button-3:disabled {
background-color: #94d3a2;
border-color: rgba(27, 31, 35, .1);
color: rgba(255, 255, 255, .8);
cursor: default;
}

.button-3:active {
background-color: #298e46;
box-shadow: rgba(20, 70, 32, .2) 0 1px 0 inset;
}
</style>

<!– HTML !–>
<button class=”button-4″ role=”button”>Button 4</button>
<!– CSS !–>
<style>
.button-4 {
appearance: none;
background-color: #FAFBFC;
border: 1px solid rgba(27, 31, 35, 0.15);
border-radius: 6px;
box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset;
box-sizing: border-box;
color: #24292E;
cursor: pointer;
display: inline-block;
font-family: -apple-system, system-ui, “Segoe UI”, Helvetica, Arial, sans-serif, “Apple Color Emoji”, “Segoe UI Emoji”;
font-size: 14px;
font-weight: 500;
line-height: 20px;
list-style: none;
padding: 6px 16px;
position: relative;
transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
vertical-align: middle;
white-space: nowrap;
word-wrap: break-word;
}

.button-4:hover {
background-color: #F3F4F6;
text-decoration: none;
transition-duration: 0.1s;
}

.button-4:disabled {
background-color: #FAFBFC;
border-color: rgba(27, 31, 35, 0.15);
color: #959DA5;
cursor: default;
}

.button-4:active {
background-color: #EDEFF2;
box-shadow: rgba(225, 228, 232, 0.2) 0 1px 0 inset;
transition: none 0s;
}

.button-4:focus {
outline: 1px transparent;
}

.button-4:before {
display: none;
}

.button-4:-webkit-details-marker {
display: none;
}
</style>

<!– HTML !–>
<button class=”button-5″ role=”button”>Button 5</button>
<style>
/* CSS */
.button-5 {
align-items: center;
background-clip: padding-box;
background-color: #fa6400;
border: 1px solid transparent;
border-radius: .25rem;
box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: inline-flex;
font-family: system-ui,-apple-system,system-ui,”Helvetica Neue”,Helvetica,Arial,sans-serif;
font-size: 16px;
font-weight: 600;
justify-content: center;
line-height: 1.25;
margin: 0;
min-height: 3rem;
padding: calc(.875rem – 1px) calc(1.5rem – 1px);
position: relative;
text-decoration: none;
transition: all 250ms;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
vertical-align: baseline;
width: auto;
}

.button-5:hover,
.button-5:focus {
background-color: #fb8332;
box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
}

.button-5:hover {
transform: translateY(-1px);
}

.button-5:active {
background-color: #c85000;
box-shadow: rgba(0, 0, 0, .06) 0 2px 4px;
transform: translateY(0);
}
</style>

<!– HTML !–>
<button class=”button-6″ role=”button”>Button 6</button>
<style>
.button-6 {
align-items: center;
background-color: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: .25rem;
box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
box-sizing: border-box;
color: rgba(0, 0, 0, 0.85);
cursor: pointer;
display: inline-flex;
font-family: system-ui,-apple-system,system-ui,”Helvetica Neue”,Helvetica,Arial,sans-serif;
font-size: 16px;
font-weight: 600;
justify-content: center;
line-height: 1.25;
margin: 0;
min-height: 3rem;
padding: calc(.875rem – 1px) calc(1.5rem – 1px);
position: relative;
text-decoration: none;
transition: all 250ms;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
vertical-align: baseline;
width: auto;
}

.button-6:hover,
.button-6:focus {
border-color: rgba(0, 0, 0, 0.15);
box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
color: rgba(0, 0, 0, 0.65);
}

.button-6:hover {
transform: translateY(-1px);
}

.button-6:active {
background-color: #F0F0F1;
border-color: rgba(0, 0, 0, 0.15);
box-shadow: rgba(0, 0, 0, 0.06) 0 2px 4px;
color: rgba(0, 0, 0, 0.65);
transform: translateY(0);
}
</style>

<!– HTML !–>
<button class=”button-7″ role=”button”>Button 7</button>
<style>
.button-7 {
background-color: #0095ff;
border: 1px solid transparent;
border-radius: 3px;
box-shadow: rgba(255, 255, 255, .4) 0 1px 0 0 inset;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: inline-block;
font-family: -apple-system,system-ui,”Segoe UI”,”Liberation Sans”,sans-serif;
font-size: 13px;
font-weight: 400;
line-height: 1.15385;
margin: 0;
outline: none;
padding: 8px .8em;
position: relative;
text-align: center;
text-decoration: none;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
vertical-align: baseline;
white-space: nowrap;
}

.button-7:hover,
.button-7:focus {
background-color: #07c;
}

.button-7:focus {
box-shadow: 0 0 0 4px rgba(0, 149, 255, .15);
}

.button-7:active {
background-color: #0064bd;
box-shadow: none;
}
</style>

<!– HTML !–>
<button class=”button-8″ role=”button”>Button 8</button>
<!– CSS!–>
<style>
.button-8 {
background-color: #e1ecf4;
border-radius: 3px;
border: 1px solid #7aa7c7;
box-shadow: rgba(255, 255, 255, .7) 0 1px 0 0 inset;
box-sizing: border-box;
color: #39739d;
cursor: pointer;
display: inline-block;
font-family: -apple-system,system-ui,”Segoe UI”,”Liberation Sans”,sans-serif;
font-size: 13px;
font-weight: 400;
line-height: 1.15385;
margin: 0;
outline: none;
padding: 8px .8em;
position: relative;
text-align: center;
text-decoration: none;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
vertical-align: baseline;
white-space: nowrap;
}

.button-8:hover,
.button-8:focus {
background-color: #b3d3ea;
color: #2c5777;
}

.button-8:focus {
box-shadow: 0 0 0 4px rgba(0, 149, 255, .15);
}

.button-8:active {
background-color: #a0c7e4;
box-shadow: none;
color: #2c5777;
}
</style>

<!– HTML !–>
<button class=”button-9″ role=”button”>Button 9</button>
<!– CSS!–>
<style>
.button-9 {
align-items: center;
appearance: none;
background-color: #fff;
border-radius: 24px;
border-style: none;
box-shadow: rgba(0, 0, 0, .2) 0 3px 5px -1px,rgba(0, 0, 0, .14) 0 6px 10px 0,rgba(0, 0, 0, .12) 0 1px 18px 0;
box-sizing: border-box;
color: #3c4043;
cursor: pointer;
display: inline-flex;
fill: currentcolor;
font-family: “Google Sans”,Roboto,Arial,sans-serif;
font-size: 14px;
font-weight: 500;
height: 48px;
justify-content: center;
letter-spacing: .25px;
line-height: normal;
max-width: 100%;
overflow: visible;
padding: 2px 24px;
position: relative;
text-align: center;
text-transform: none;
transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1),opacity 15ms linear 30ms,transform 270ms cubic-bezier(0, 0, .2, 1) 0ms;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
width: auto;
will-change: transform,opacity;
z-index: 0;
}

.button-9:hover {
background: #F6F9FE;
color: #174ea6;
}

.button-9:active {
box-shadow: 0 4px 4px 0 rgb(60 64 67 / 30%), 0 8px 12px 6px rgb(60 64 67 / 15%);
outline: none;
}

.button-9:focus {
outline: none;
border: 2px solid #4285f4;
}

.button-9:not(:disabled) {
box-shadow: rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px;
}

.button-9:not(:disabled):hover {
box-shadow: rgba(60, 64, 67, .3) 0 2px 3px 0, rgba(60, 64, 67, .15) 0 6px 10px 4px;
}

.button-9:not(:disabled):focus {
box-shadow: rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px;
}

.button-9:not(:disabled):active {
box-shadow: rgba(60, 64, 67, .3) 0 4px 4px 0, rgba(60, 64, 67, .15) 0 8px 12px 6px;
}

.button-9:disabled {
box-shadow: rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px;
}
</style>

<!– HTML !–>
<button class=”button-10″ role=”button”>Button 10</button>
<!– CSS!–>
<style>
.button-10 {
appearance: button;
background-color: #1899D6;
border: solid transparent;
border-radius: 16px;
border-width: 0 0 4px;
box-sizing: border-box;
color: #FFFFFF;
cursor: pointer;
display: inline-block;
font-family: din-round,sans-serif;
font-size: 15px;
font-weight: 700;
letter-spacing: .8px;
line-height: 20px;
margin: 0;
outline: none;
overflow: visible;
padding: 13px 16px;
text-align: center;
text-transform: uppercase;
touch-action: manipulation;
transform: translateZ(0);
transition: filter .2s;
user-select: none;
-webkit-user-select: none;
vertical-align: middle;
white-space: nowrap;
width: 18%;
}

.button-10:after {
background-clip: padding-box;
background-color: #1CB0F6;
border: solid transparent;
border-radius: 16px;
border-width: 0 0 4px;
bottom: -4px;
content: “”;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: -1;
}

.button-10:main,
.button-10:focus {
user-select: auto;
}

.button-10:hover:not(:disabled) {
filter: brightness(1.1);
}

.button-10:disabled {
cursor: auto;
}
</style>

<!– HTML !–>
<button class=”button-11″ role=”button”>Button 11</button>
<!– CSS!–>
<style>
.button-11 {
background: #FF4742;
border: 1px solid #FF4742;
border-radius: 6px;
box-shadow: rgba(0, 0, 0, 0.1) 1px 2px 4px;
box-sizing: border-box;
color: #FFFFFF;
cursor: pointer;
display: inline-block;
font-family: nunito,roboto,proxima-nova,”proxima nova”,sans-serif;
font-size: 16px;
font-weight: 800;
line-height: 16px;
min-height: 40px;
outline: 0;
padding: 12px 14px;
text-align: center;
text-rendering: geometricprecision;
text-transform: none;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
vertical-align: middle;
}

.button-11:hover,
.button-11:active {
background-color: initial;
background-position: 0 0;
color: #FF4742;
}

.button-11:active {
opacity: .5;
}
</style>

<!– HTML !–>
<button class=”button-12″ role=”button”>Button 12</button>
<!– CSS!–>
<style>
.button-12 {
appearance: none;
background-color: #000000;
border: 2px solid #1A1A1A;
border-radius: 15px;
box-sizing: border-box;
color: #FFFFFF;
cursor: pointer;
display: inline-block;
font-family: Roobert,-apple-system,BlinkMacSystemFont,”Segoe UI”,Helvetica,Arial,sans-serif,”Apple Color Emoji”,”Segoe UI Emoji”,”Segoe UI Symbol”;
font-size: 16px;
font-weight: 600;
line-height: normal;
margin: 0;
min-height: 60px;
min-width: 0;
outline: none;
padding: 16px 24px;
text-align: center;
text-decoration: none;
transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
width: 19%;
will-change: transform;
}

.button-12:disabled {
pointer-events: none;
}

.button-12:hover {
box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
transform: translateY(-2px);
}

.button-12:active {
box-shadow: none;
transform: translateY(0);
}
</style>

<!– HTML !–>
<button class=”button-13″ role=”button”>Button 13</button>
<!– CSS!–>
<style>
.button-13 {
appearance: none;
background-color: transparent;
border: 2px solid #1A1A1A;
border-radius: 15px;
box-sizing: border-box;
color: #3B3B3B;
cursor: pointer;
display: inline-block;
font-family: Roobert,-apple-system,BlinkMacSystemFont,”Segoe UI”,Helvetica,Arial,sans-serif,”Apple Color Emoji”,”Segoe UI Emoji”,”Segoe UI Symbol”;
font-size: 16px;
font-weight: 600;
line-height: normal;
margin: 0;
min-height: 60px;
min-width: 0;
outline: none;
padding: 16px 24px;
text-align: center;
text-decoration: none;
transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
width: 19%;
will-change: transform;
}

.button-13:disabled {
pointer-events: none;
}

.button-13:hover {
color: #fff;
background-color: #1A1A1A;
box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
transform: translateY(-2px);
}

.button-13:active {
box-shadow: none;
transform: translateY(0);
}
</style>

<!– HTML !–>
<button class=”button-14″ role=”button”>Button 14</button>
<!– CSS!–>
<style>
.button-14 {
align-items: center;
appearance: none;
background-image: radial-gradient(100% 100% at 100% 0, #5adaff 0, #5468ff 100%);
border: 0;
border-radius: 6px;
box-shadow: rgba(45, 35, 66, .4) 0 2px 4px,rgba(45, 35, 66, .3) 0 7px 13px -3px,rgba(58, 65, 111, .5) 0 -3px 0 inset;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: inline-flex;
font-family: “JetBrains Mono”,monospace;
height: 48px;
justify-content: center;
line-height: 1;
list-style: none;
overflow: hidden;
padding-left: 16px;
padding-right: 16px;
position: relative;
text-align: left;
text-decoration: none;
transition: box-shadow .15s,transform .15s;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
white-space: nowrap;
will-change: box-shadow,transform;
font-size: 18px;
}

.button-14:focus {
box-shadow: #3c4fe0 0 0 0 1.5px inset, rgba(45, 35, 66, .4) 0 2px 4px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
}

.button-14:hover {
box-shadow: rgba(45, 35, 66, .4) 0 4px 8px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
transform: translateY(-2px);
}

.button-14:active {
box-shadow: #3c4fe0 0 3px 7px inset;
transform: translateY(2px);
}
</style>

<!– HTML !–>
<button class=”button-15″ role=”button”>Button 15</button>
<!– CSS!–>
<style>
.button-15 {
align-items: center;
appearance: none;
background-color: #FCFCFD;
border-radius: 4px;
border-width: 0;
box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
box-sizing: border-box;
color: #36395A;
cursor: pointer;
display: inline-flex;
font-family: “JetBrains Mono”,monospace;
height: 48px;
justify-content: center;
line-height: 1;
list-style: none;
overflow: hidden;
padding-left: 16px;
padding-right: 16px;
position: relative;
text-align: left;
text-decoration: none;
transition: box-shadow .15s,transform .15s;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
white-space: nowrap;
will-change: box-shadow,transform;
font-size: 18px;
}

.button-15:focus {
box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
}

.button-15:hover {
box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
transform: translateY(-2px);
}

.button-15:active {
box-shadow: #D6D6E7 0 3px 7px inset;
transform: translateY(2px);
}
</style>

<!– HTML !–>
<button class=”button-16″ role=”button”>Button 16</button>
<!– CSS!–>
<style>
.button-16 {
background-color: #222;
border-radius: 4px;
border-style: none;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: inline-block;
font-family: “Farfetch Basis”,”Helvetica Neue”,Arial,sans-serif;
font-size: 16px;
font-weight: 700;
line-height: 1.5;
margin: 0;
max-width: none;
min-height: 44px;
min-width: 10px;
outline: none;
overflow: hidden;
padding: 9px 20px 8px;
position: relative;
text-align: center;
text-transform: none;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
width: 19%;
}

.button-16:hover,
.button-16:focus {
opacity: .75;
}
</style>

<!– HTML !–>
<button class=”button-17″ role=”button”>Button 17</button>
<!– CSS!–>
<style>
.button-17 {
background-color: #fff000;
border-radius: 12px;
color: #000;
cursor: pointer;
font-weight: bold;
padding: 10px 15px;
text-align: center;
transition: 200ms;
width: 16%;
box-sizing: border-box;
border: 0;
font-size: 16px;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
}

.button-17:not(:disabled):hover,
.button-17:not(:disabled):focus {
outline: 0;
background: #f4e603;
box-shadow: 0 0 0 2px rgba(0,0,0,.2), 0 3px 8px 0 rgba(0,0,0,.15);
}

.button-17:disabled {
filter: saturate(0.2) opacity(0.5);
cursor: not-allowed;
}
</style>

<!– HTML !–>
<button class=”button-18″ role=”button”>Button 18</button>
<!– CSS!–>
<style>
.button-18 {
background-color: #c2fbd7;
border-radius: 100px;
box-shadow: rgba(44, 187, 99, .2) 0 -25px 18px -14px inset,rgba(44, 187, 99, .15) 0 1px 2px,rgba(44, 187, 99, .15) 0 2px 4px,rgba(44, 187, 99, .15) 0 4px 8px,rgba(44, 187, 99, .15) 0 8px 16px,rgba(44, 187, 99, .15) 0 16px 32px;
color: green;
cursor: pointer;
display: inline-block;
font-family: CerebriSans-Regular,-apple-system,system-ui,Roboto,sans-serif;
padding: 7px 20px;
text-align: center;
text-decoration: none;
transition: all 250ms;
border: 0;
font-size: 16px;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
}

.button-18:hover {
box-shadow: rgba(44,187,99,.35) 0 -25px 18px -14px inset,rgba(44,187,99,.25) 0 1px 2px,rgba(44,187,99,.25) 0 2px 4px,rgba(44,187,99,.25) 0 4px 8px,rgba(44,187,99,.25) 0 8px 16px,rgba(44,187,99,.25) 0 16px 32px;
transform: scale(1.05) rotate(-1deg);
}
</style>

<!– HTML !–>
<button class=”button-19″ role=”button”>Button 19</button>
<!– CSS!–>
<style>
.button-19 {
align-items: center;
background-color: #fff;
border-radius: 12px;
box-shadow: transparent 0 0 0 3px,rgba(18, 18, 18, .1) 0 6px 20px;
box-sizing: border-box;
color: #121212;
cursor: pointer;
display: inline-flex;
flex: 1 1 auto;
font-family: Inter,sans-serif;
font-size: 1.2rem;
font-weight: 700;
justify-content: center;
line-height: 1;
margin: 0;
outline: none;
padding: 1rem 1.2rem;
text-align: center;
text-decoration: none;
transition: box-shadow .2s,-webkit-box-shadow .2s;
white-space: nowrap;
border: 0;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
}

.button-19:hover {
box-shadow: #121212 0 0 0 3px, transparent 0 0 0 0;
}
</style>

<!– HTML !–>
<button class=”button-20″ role=”button”>Button 20</button>
<!– CSS!–>
<style>
.button-20 {
background-color: #13aa52;
border: 1px solid #13aa52;
border-radius: 4px;
box-shadow: rgba(0, 0, 0, .1) 0 2px 4px 0;
box-sizing: border-box;
color: #fff;
cursor: pointer;
font-family: “Akzidenz Grotesk BQ Medium”, -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 16px;
font-weight: 400;
outline: none;
outline: 0;
padding: 10px 25px;
text-align: center;
transform: translateY(0);
transition: transform 150ms, box-shadow 150ms;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
}

.button-20:hover {
box-shadow: rgba(0, 0, 0, .15) 0 3px 9px 0;
transform: translateY(-2px);
}

@media (min-width: 768px) {
.button-20 {
padding: 10px 30px;
}
}
</style>

Notes: Get the code by clicking the button will copy the code and paste the code in the column below. Check the code is working or not

Paste Code

December 19, 2021
Cara Menampilkan Judul Postingan Saja di Halaman Utama/Home Page Blogspot

Tangkapan Layar | Contoh

Postingan kali ini sudah ane terapin nih diblog ini dan cukup mudah cara untuk memastikannya. Sobat hanya tinggal klik halaman depan blog ane dan akan terlihat posting yang ada dihalaman depan blog ane hanya dengan Judul Posting aja & satu lagi setiap tips dan trik blog yang ane sajikan diposting blog sudah diuji coba sebelumnya dan berhasil. hehehe

Nah sekarang bagi Sobat yang berminat atau pengen mencoba silahkan ikuti langkah-langkah dibawah ini tapi sebelumnya lebih baik Sobat mendownload template Sobat Sebelum Memulai.

1. Login ke Blogger.com -> Desain/Rancangan -> Edit HTML -> tambahkan kode di bawah sebelum kode </head>

2. Copy/paste kode dibawah ini dan letakkan di atas kode </head>

<style type=’text/css’>

<b:if cond=’data:blog.pageType != "static_page"’><b:if cond=’data:blog.pageType !=

"item"’>

.post-body {display:none;}

.post-footer {display:none;}

.comment-link {display:none;}

.post img {display:none;}

.post blockquote {display:none;}

.post blockquote p {display:none;}h2.date-header {display:none;}

.post-labels {display:none;}

.post-rating {display:none;}

</b:if></b:if>

</style>

3. Klik Save Template, Selesai dan Lihat Hasilnya.

Keterangan: Trik ini menurut beberapa pakar SEO, Untuk meringankan loading blog Sobat. Loading ringan akan menambah SEO di Google.

December 18, 2021
How to Make Responsive Floating Adsense Ads under the Blog

Screenshot

On this occasion laborblog.my.id will try to give tips on how to make floating ads easily. If you want to place floating ads, you have to be careful, don’t let these ads disturb your blog visitors.

Sticky fixed ads placed at the bottom of the screen have a pretty solid click-through rate. Because of its performance, blog visitors will continue to see ads even if the article is scrolled down or up. , it will have a higher clickthrough potential (CTR). So how do you make a floating ad? Let’s see the tips below.

Easy Ways to Make Floating Adsense Ads

1. Open Blogger and Theme

The first thing to do is go to blogger.com, then select a theme and edit the html code.

Warning! : Before modifying the blog template, it is recommended to make a backup first, if there is an error it can be fixed immediately.

2. Create Responsive Ads and Edit Code

The second way, create a new ad in responsive format, then copy the adsense code into the text as marked below.

<script type=’text/javascript’> $(document).ready(function() {$('img#closed').click(function(){$('#btm_banner').hide(90);});}); </script>

<!–start: floating ads–>

<div id=’floatads’ style=’width:100%;margin:auto; text-align:center;float:none;overflow:hidden; display:scroll;position:fixed; bottom:0;z-index:9999′>

<div><a id=’close-floatads’ onclick=’document.getElementById('floatads').style.display = 'none';’ style=’cursor:pointer;’><img alt=’close’ src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhclRDQZWqGVHmf1si9GTOlj-GAtAcNDA2TWpO4mrgttAwRDvOT74pcD_lBPspiNxF2SAO_EnysDgYmVA0EAVD4iR3yQ2AIstgUwROXMqEdoKhXk0fQhwWVmwhL2-JwQBjqzzdLNmqsK14/s1600/btn_close.gif’ title=’close button’/></a></div>

<div style=’text-align:center;display:block;max-width:728px;height:auto;overflow:hidden;margin:auto’>

<!–Script iklan–>

[Masukaniklandisini]

<!–Akhir script iklan–>

</div>

</div>

<!–end: floating ads–>

3. Put the above code above </body>

When finished creating the script above, copy and paste it above the code </body>

4. Save

If the steps are done correctly, it will look like this .

Accordingly the article “How to Make Responsive Floating Adsense Ads under the Blog” may be useful. If there is a tutorial that is not clear, you can leave a comment below. Happy reading and blogging…

December 17, 2021
Cara Membuat Iklan Adsense Melayang Responsive dibawah Blog

Tangkapan Layar | Istimewa

Pada kesempatan kali ini saya akan memberikan tips cara membuat floating ads dengan mudah. Jika Anda ingin memasang iklan melayang, Anda harus berhati-hati, jangan sampai iklan tersebut mengganggu pengunjung blog Anda.

Iklan melayang tetap (sticky fixed ads) yang ditempatkan di bagian bawah layar memiliki nilai rasio klik-tayang yang cukup solid. Karena kinerjanya, pengunjung blog akan terus melihat iklan meskipun artikel di-scroll ke bawah atau ke atas. , itu akan memiliki potensi klik-tayang (RKT) yang lebih tinggi. Nah bagaimana cara membuat iklan melayang nya bro? Yuk simak tipsnya di bawah ini.

Cara Mudah Membuat Iklan Adsense Melayang

1. Buka Blogger dan Theme

Hal pertama yang harus dilakukan adalah masuk ke blogger.com, lalu pilih theme dan edit kode htmlnya.

Peringatan ! : Sebelum memodifikasi template blog, saran saya buat backup dulu, jika ada kesalahan bisa segera diperbaiki.

2. Buat Iklan Responsive dan Edit Kode

Cara kedua, buat iklan baru dalam format responsive, lalu copy kode adsense ke teks yang saya tandai di bawah ini.

<script type=’text/javascript’>
$(document).ready(function() {$('img#closed').click(function(){$('#btm_banner').hide(90);});});
</script>

<!–start: floating ads–>

<div id=’floatads’ style=’width:100%;margin:auto; text-align:center;float:none;overflow:hidden; display:scroll;position:fixed; bottom:0;z-index:9999′>

<div><a id=’close-floatads’ onclick=’document.getElementById('floatads').style.display = 'none';’ style=’cursor:pointer;’><img alt=’close’ src=’https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhclRDQZWqGVHmf1si9GTOlj-GAtAcNDA2TWpO4mrgttAwRDvOT74pcD_lBPspiNxF2SAO_EnysDgYmVA0EAVD4iR3yQ2AIstgUwROXMqEdoKhXk0fQhwWVmwhL2-JwQBjqzzdLNmqsK14/s1600/btn_close.gif’ title=’close button’/></a></div>

<div style=’text-align:center;display:block;max-width:728px;height:auto;overflow:hidden;margin:auto’>

<!–Script iklan–>

[Masukaniklandisini]

<!–Akhir script iklan–>

</div>

</div>

<!–end: floating ads–>

3. Letakkan Kode Diatas diatas </body>

Setelah selesai membuat skrip di atas, salin dan letakkan di atas kode </body>

4. Simpan

Apabila langkah demi langkah dilakukan dengan tepat, maka akan terlihat seperti ini.

Demikian artikel “Cara Membuat Iklan Adsense Melayang Responsif dibawah Blog” semoga bermanfaat. Jika ada tutorial yang kurang jelas bisa comment dibawah. Selamat membaca dan ngeblog…

December 16, 2021
Cara Mencegah Copy Paste Artikel Kecuali Kode dan Blockquote

Ilustrasi

Mencegah tindakan copy paste artikel dapat dilakukan dengan mudah dengan plugin atau script tertentu, lalu bagaimana cara mencegah copy paste kecuali tanda kutip atau kode pada artikel tersebut?

Tindakan mengcopy paste konten blog orang lain mungkin bukan hal yang aneh lagi Saat ini banyak blogger yang menginginkan kesuksesan instan tanpa kerja keras.

Untuk menghasilkan uang dengan blogging, kita membutuhkan lalu lintas. Traffic dapat dicapai dengan menyajikan konten viral atau berkualitas. Sayangnya, tidak semua blogger yang mengharapkan hasil langsung ingin bersusah payah membuat konten mereka sendiri.

“Kalau ada yang mudah kenapa khawatir, toh semua yang ada di internet itu gratis, sudah jadi resikonya”. saya kira, ini adalah kalimat pembelaan dari banyak blogger yang melakukan kecurangan.

Bagaimana mencegah copy dan paste posting blog?

Ada cara mudah untuk mencegah orang lain menyalin postingan yang kita buat. laborblog.my.id sendiri sudah membuat cara untuk mencegah blogger mengcopy paste konten dengan menambahkan script tertentu. Cukup dengan menambahkan kode berikut di gadget HTML/JAVASCRIPT, pengunjung tidak akan bisa menggunakan shortcut CTRL+A untuk memilih konten artikel.

<script src=’demo-to-prevent-copy-paste-on-blogger_files/googleapis.js’></script> <script type=’text/javascript’> if (typeof document.onselectstart!=”undefined” ) { document.onselectstart=new Function (“return false” ); } else { document.onmousedown=new Function (“return false” ); document.onmouseup=new Function (“return true” ); } </script>

Selain itu, anda juga dapat menambahkan kode berikut untuk mencegah pencuri mengambil gambar dalam artikel dan menonaktifkan klik kanan menggunakan mouse.

<script language=JavaScript>
var message=”©laborblog.my.id 2021″; //Ganti dengan pesan kamu sendiri
function clickIE4() {
if (event.button==2) {
alert (message);
return false;
}
}
function clickNS4(e) {
if (document.layers||document.getElementById&&!document.all) {
if (e.which==2||e.which==3) {
alert(message);
return false;
}
}
}
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
} else if (document.all&&!document.getElementById) {
document.onmousedown=clickIE4;
}
document.oncontextmenu=new Function(“alert(message);return false”)
</script>

Walaupun judulnya khusus untuk pengguna Blogger, cara ini juga bisa digunakan oleh pengguna WordPress – cukup tambahkan widget CUSTOM HTML di sidebar atau footer Anda, lalu salin kode di atas dan simpan.

Bagi Anda yang lebih suka menggunakan plugin, Anda juga dapat mencegah copy paste artikel dengan plugin khusus seperti WP Content Copy Protection with Color Design, WP Content Copy Protection atau WP Content Copy Protection, dan No Right Click. secara otomatis sudah bisa melindungi konten blog Anda.

Cara Mencegah Copy Paste Artikel Kecuali Kode dan Blockquote

Satu masalah yang saya temui di kedua metode di atas adalah tidak ada kontrol atas apa yang diblokir – menggunakan skrip atau plugin akan membuat semua item blog tidak dapat disalin, sedangkan jika saya membagikan artikel dengan quote/blockquote atau kode? akan sangat merepotkan pembaca, jika ingin menyalin kode pada artikel tentang tutorial.

Di beberapa plugin terdapat fungsi untuk memfilter bagian artikel mana yang bisa dicopy oleh pembaca, namun sayangnya fungsi ini hanya tersedia pada versi premium, untungnya ada cara yang murah!

Untuk mencegah agar postingan tidak tercopy paste kecuali kode dan tanda kutip (blockquote), kita bisa menambahkan kode CSS berikut di template Blogger

.post-outer {

-webkit-touch-callout:none;

-webkit-user-select:none;

-khtml-user-select:none;

-ms-user-select:none;

-moz-user-select:none;

}

.post blockquote,.post pre,.post code{

-webkit-touch-callout:text;

-webkit-user-select:text;

-khtml-user-select:text;

-ms-user-select:text;

-moz-user-select:text;

}

Sedangkan untuk pengguna WordPress kamu bisa menggunakan kode berikut:

.entry-content {

-webkit-touch-callout:none;

-webkit-user-select:none;

-khtml-user-select:none;

-ms-user-select:none;

-moz-user-select:none;

}

.entry-content blockquote, .entry-content pre, .entry-content code {

-webkit-touch-callout:text;

-webkit-user-select:text;

-khtml-user-select:text;

-ms-user-select:text;

-moz-user-select:text;

}

CATATAN: Setiap tema/template memiliki class CSS yang berbeda. Dalam kode di atas menggunakan contoh yang paling umum. Jadi, jika kode ini tidak berfungsi, gunakan fungsi INSPECT browser Anda untuk menentukan class yang benar.

December 16, 2021
Cara Memasang Komentar Facebook di Blog atau Web

Tangkapan Layar | Istimewa

Memasang Komentar Facebook ke Blogger dan Web sudah banyak dijelaskan dan digunakan oleh para blogger karena sebagian besar pengguna internet selalu login ke akun Facebook mereka, sehingga memudahkan pengunjung blog untuk berkomentar menggunakan akun Facebook nya.

Berikut cara memasang komentar Facebook di blog Anda.

LANGKAH:

1. Masuk ke akun blogger.

2. Pilih menu template – Edit HTML.

3. Cari kode (CTRL+F) ini <div class=’comments’ id=’comments’>

4. Lalu masukkan kode di bawah ini, di bawah kode <div class=’comments’ id=’comments’>

<div title=’Comments made with Facebook’><fb:comments-count expr:href=’data:post.url’/> Comments </div> <div title=’Comments from Blogger’><data:post.numComments/> Comments </div> <div class=’clear’/></div> <div><p><b:if cond=’data:blog.pageType == “item”‘></p> <div id=’fb-root’/><fb:comments expr:href=’data:post.url’ num_posts=’2′ width=’400’/></b:if></div>

5. Cari dan ganti kata “ID FACEBOOK ANDA” dengan ID Facebook atau ID Fan Page Anda.

6. Simpan template, dan coba. Semoga berhasil

December 15, 2021
Bagaimana Cara Menghilangkan Kode ?m=1 atau ?m=0 Url Blogger

Ilustrasi

Pernahkah Anda memperhatikan bahwa URL blog pada platform Blogger memiliki kode unik yang diakhiri dengan (?m=1 atau ?m=0) dan kode tersebut secara otomatis ditampilkan ketika Anda mengakses URL dari home sebuah blog. Misalnya, blog ini memiliki URL home https://www.laborblog.my.id/?m=1 atau https://www.laborblog.my.id/?m=0.

Jadi apa arti dari kode-kode ini?

Kode akhiran ini hanya dimaksudkan untuk menunjukkan identitas perangkat yang digunakan seseorang untuk mengakses blog. Jika kode akhiran ditampilkan ?m=1, berarti Anda mengakses blog melalui perangkat seluler, jika kode ditampilkan ?m=0 berarti Anda mengakses blog melalui perangkat PC.

Mengapa Kode Akhiran ?m=1 Url Blogger Dihilangkan?

Salah satu alasan utama mengapa kode akhiran ?m=1 harus dihilangkan adalah karena kode tersebut dapat mengakibatkan duplikat konten di blog. Juga, menghapus kode url blogger dapat meningkatkan SEO di blog itu sendiri, yang masih dipercaya oleh beberapa blogger.

Namun, apakah itu benar? Dan apakah benar ini berhubungan langsung dengan SEO?

Menurut pendapat saya atau pribadi, pernyataan seperti di atas yang menyarankan kode ?m=1 atau ?m=0 dapat menyebabkan duplikat konten di blog tidak benar tetapi juga tidak sepenuhnya salah.

Pendapat para Blogger hanyalah sebagian dari spekulasi dan asumsi sederhana bahwa mereka mungkin hanya akan mengalami kesulitan ketika URL blog mereka masih memiliki lampiran ?m=1 atau ?m=0. Jadi menurut mereka penyebabnya kira-kira seperti ini.

Fakta bahwa kebanyakan blogger mengabaikan poin ini dan kebanyakan blogger lain tidak pernah mengalami masalah seperti duplikat konten yang disebabkan oleh kode akhiran ?m=1 atau ?m=0.

Logika saya mengatakan itu seperti trik peringkas URL blog, terutama platform blogger, di mana semua URL yang dapat diakses home memiliki kode akhiran ?m=1 atau ?m=0. Jadi dengan menghilangkan kode tersebut, URL blog terlihat pendek dan rapi.

Selain itu, dapatkah kode-kode ini berhubungan dengan SEO? Bahkan ada yang mengatakan bahwa menghilangkan kode akhiran dapat meningkatkan SEO pada sebuah blog. Ini pendapat yang agak tidak relevan dan ternyata menghilangkan kode akhiran ?m=1 atau ?m=0 tidak bisa menaikkan atau menurunkan rangking blog.

Jawaban paling logis dari pernyataan di atas adalah jika Anda ingin meningkatkan SEO blog Anda, maka buatlah konten yang berkualitas, yang dengan sendirinya sudah cukup untuk meningkatkan peringkat blog Anda di serp engine research.

Jadi mengapa saya terus berbagi Bagaimana cara menghilangkan Kode ?m=1 atau ?m=0 ?

Alasannya sangat sederhana, saya ingin membagikan tip ini untuk Anda yang ingin mempersingkat url atau tautan blog agar lebih pendek saat login dari perangkat seluler atau desktop. Sekali lagi, saya menekankan bahwa dengan kode ?m=1 atau ?m=0 tidak akan mempengaruhi SEO blog Anda.

Oleh karena itu sebelum mencoba cara ini ada baiknya anda membaca artikel diatas terlebih dahulu agar anda tidak gagal paham nantinya.

Cara Menghilangkan Kode ?m=1 atau ?m=0

1. Silahkan buka akun Blogger Anda masing-masing.

2. Lalu pergi ke bagian Tema > Edit Html. Kemudian salin dan tempel kode di bawah ini tepat di atas </body>

<script type=’text/javascript’>
var uri = window.location.toString();if (uri.indexOf("?m=1","?m=1") > 0) {var clean_uri = uri.substring(0, uri.indexOf("?m=1"));window.history.replaceState({}, document.title, clean_uri);}
</script>

3. Simpan tema dan coba akses url blog, kode akhiran tidak akan lagi dilampirkan ke url blog Anda.

Cukup sekian artikel tentang “Bagaimana Cara Menghilangkan Kode ?m=1 atau ?m=0 Url Blogger”. Semoga bermanfaat. Terima kasih

December 15, 2021
Membuat Gambar Supaya Selalu Mengikuti Kursor

Ilustrasi

Trik gimana cara membuat gambar selalu berada di pojok (bisa atas, bawah, kiri, kanan) meskipun “scroll bar” ditarik kemana-mana. “Scroll bar” itu apa sih? itu lho kotak kecil panjang yang ada disamping itu, yg biasanya ditarik kebawah dan keatas supaya bisa ngelihat isi blog yang kepanjangan.

Bisa gambar atau photo Sobat, animasi, Jam, Hit Counter, Shoutbox, Kalender, Adsense, Iklan, Widget-widget dan lain-lain. Nha udah tahu kan maksudnya. Kalo dah tahu dan pingin mencobanya mari ikuti trik berikut ini:

1. Login ke blogger trus klik Layout Edit HTML

2. Cari kode ini ]]></b:skin> kalo dah ketemu taruh kode berikut ini di atasnya.

#trik_pojok { position:fixed;_position:absolute;bottom:0px; left:0px; clip:inherit; _top:expression(document.documentElement.scrollTop+ document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth – offsetWidth); }

3. Text yang dicetak tebal adalah posisinya, kalo pingin ganti di posisi pojok kanan bawah tinggal text “left” diganti dengan “right”. Begitu juga tulisan “bottom”, jika pingin di posisi atas bisa diganti dengan “top”.

4. Langkah selanjutnya yaitu letakkan script berikut ini sebelum kode </body>

<div id=”trik_pojok”>

<a href=”https://www.laborblog.my.id”>

<img src=”https://iili.io/7OtYoF.gif”; border=”0″ />

</a>

</div>

Keterangan: “https://www.laborblog.my.id” adalah link. ganti dengan link Sobat. “https://iili.io/7OtYoF.gif” adalah lokasi gambar Sobat. ganti dengan lokasi gambar Sobat.

5. Jika Sobat pingin yang ada disitu bukan gambar tetapi jam/kalender/hit counter/widget-widget yg lain, maka ganti text yang berwarna merah dengan script widget-widget tersebut.

6. Simpan hasil kerja Sobat dan lihat hasilnya.

December 12, 2021
Cara Membuat Widget Youtube di Blogspot dan Web

Ilustrasi

Punya channel Youtube? Jangan lupa untuk mempromosikan channel tersebut di website Anda.

Ada berbagai cara untuk mempromosikan channel YouTube di website. Misalnya dengan rutin membagikan video Anda di website, mengajak pembaca web untuk menjadi subscriber, atau bisa juga dengan menampilkan widget YouTube subscribe button di website.

Dengan menampilkan widget ini, pengunjung web kita bisa langsung subscribe channel kita. Tertarik memasang widget YouTube subscribe button di blog?

Berikut langkah-langkah membuat widget YouTube subscribe button:

1. Kunjungi situs berikut : https://developers.google.com/youtube

2. Di bagian subsribe button , klik add a button.

3. Isi form yang tersedia.

Channel name or id : isi dengan ID channel YouTube Anda. Untuk mengetahui ID channel, klik link ID.

Selanjutnya Anda diarahkan ke halaman baru, Anda bisa copy ID channel Anda.

Layout dan theme : tentukan tampilan tata letak dan tema button Anda.

Subscribe count : tentukan apakah ingin menampilkan jumlah subscriber atau tidak.

4. Di bagian bawah halaman, Anda bisa melihat preview button Anda.

5. Silakan copy kode yang sudah disediakan. Kode inilah yang akan kita pasang di website/blog.

Memasang Widget YouTube Subscribe Button di Website/Blog

Anda tinggal menambahkan kode tadi ke web Anda. Tentu, setiap web punya pengaturan yang berbeda. Bagi pengguna WordPress, Anda tinggal menambahkan kode tadi ke sidebar web Anda.

Untuk menambahkan kode ke sidebar, Anda bisa pakai widget text. Untuk mengakses pengaturan widget, masuk ke menu appearance > widgets.

Sedangkan bagi pengguna Blogger, Anda dapat menambahkan kodenya melalui gadget HTML/Java Script.

Jika langkah-langkah sudah dilakukan dengan tepat, maka akan terlihat seperti ini

dan bantu padamkan tombol merahnya ya kak. Selamat Mencoba & Semoga Bermanfaat… ^_^

December 11, 2021