alexa-tracking

Main Content

1024
1024
KASKUS
51
244
https://www.kaskus.co.id/thread/5744bdb8642eb63c608b4567/bikin-kotak-simple-css-begini-gimana-ya-kasih-pulsa-jika-mau
Bikin Kotak Simple CSS Begini, Gimana ya? kasih pulsa jika mau
Sesuai dengan judul, newbie bertanya, lagi mentok juga sih..

Bikin kotak panjang yang di isi tiga elemen macam gambar ini gimana ya?

Bikin Kotak Simple CSS Begini, Gimana ya? kasih pulsa jika mau

Di sisi kiri ada tombol share like fb (ane tinggal masukin script-nya aja), sisi kanan ada dua tombol button sejajar, semua dalam satu kotak panjang itu...

Sesimple itu gan, bisa buatin script html dan css-nya emoticon-Big Grin

Dan jika mau, biarpun gak seberapa, ane bisa kasih pulsa 10rb, kalau ada yang bisa bantu emoticon-Big Grin
Code:
<div style="width:100%; border:3px solid black; padding:3px">
<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard"
data-action="like" data-show-faces="true" data-share="true" style="float:left; width:100px; "></div>
<div style="float:right; width:200px;">
<button id="btn1" name="btn1" style="border:2px solid black; background:orange; color:black; ">Button 1</button>
<button id="btn2" name="btn2" style="border:2px solid black; background:bluesky; color:black; ">Button 2</button>
</div>
</div>
Quote:Original Posted By noshade
Code:
<div style="width:100%; border:3px solid black; padding:3px">
<div class="fb-like" data-href="[URL=https://developers.facebook.com/docs/plugins/]https://developers.facebook.com/docs/plugins/[/URL]" data-layout="standard"
data-action="like" data-show-faces="true" data-share="true" style="float:left; width:100px; "></div>
<div style="float:right; width:200px;">
<button id="btn1" name="btn1" style="border:2px solid black; background:orange; color:black; ">Button 1</button>
<button id="btn2" name="btn2" style="border:2px solid black; background:bluesky; color:black; ">Button 2</button>
</div>
</div>


Gan, ane kan bikin tombol botton1-nya bisa diklik dan ke link lain, cuma pas di cursor button itu, cursornya gak berubah jadi icon klik satu tangan, cara berubahinnya gimana ya? sama dibuat open new tab gimana?

Payah kaskus, masa gak bisa masukin kode emoticon-Nohope

Code:
<button id="btn1">How to Download</button>


Kalau gak muncul diatas, ane SS aja kodenya

Bikin Kotak Simple CSS Begini, Gimana ya? kasih pulsa jika mau
Quote:Original Posted By egie007


Gan, ane kan bikin tombol botton1-nya bisa diklik dan ke link lain, cuma pas di cursor button itu, cursornya gak berubah jadi icon klik satu tangan, cara berubahinnya gimana ya? sama dibuat open new tab gimana?

Payah kaskus, masa gak bisa masukin kode emoticon-Nohope

Code:
<button id="btn1">How to Download</button>


Kalau gak muncul diatas, ane SS aja kodenya

Bikin Kotak Simple CSS Begini, Gimana ya? kasih pulsa jika mau


pake <a> gan, kalo <button> emang ga muncul jari tengahnya emoticon-Hammer2

Quote:Original Posted By egie007


Gan, ane kan bikin tombol botton1-nya bisa diklik dan ke link lain, cuma pas di cursor button itu, cursornya gak berubah jadi icon klik satu tangan, cara berubahinnya gimana ya? sama dibuat open new tab gimana?

Payah kaskus, masa gak bisa masukin kode emoticon-Nohope

Code:
<button id="btn1">How to Download</button>


Kalau gak muncul diatas, ane SS aja kodenya

Bikin Kotak Simple CSS Begini, Gimana ya? kasih pulsa jika mau


di css buttonnya kasih ini gan
Quote:cursor: pointer;
Quote:Original Posted By egie007
Gan, ane kan bikin tombol botton1-nya bisa diklik dan ke link lain, cuma pas di cursor button itu, cursornya gak berubah jadi icon klik satu tangan, cara berubahinnya gimana ya? sama dibuat open new tab gimana?

Payah kaskus, masa gak bisa masukin kode emoticon-Nohope

Code:
<button id="btn1">How to Download</button>


Kalau gak muncul diatas, ane SS aja kodenya

Bikin Kotak Simple CSS Begini, Gimana ya? kasih pulsa jika mau


PM bro no hapenya, kalau emang mau pulsa emoticon-Big Grin

Quote:Original Posted By mast3rdownload
di css buttonnya kasih ini gan


Sip, done emoticon-Big Grin
Quote:Original Posted By noshade
Code:
<div style="width:100%; border:3px solid black; padding:3px">
<div class="fb-like" data-href="[URL=https://developers.facebook.com/docs/plugins/]https://developers.facebook.com/docs/plugins/[/URL]" data-layout="standard"
data-action="like" data-show-faces="true" data-share="true" style="float:left; width:100px; "></div>
<div style="float:right; width:200px;">
<button id="btn1" name="btn1" style="border:2px solid black; background:orange; color:black; ">Button 1</button>
<button id="btn2" name="btn2" style="border:2px solid black; background:bluesky; color:black; ">Button 2</button>
</div>
</div>


Quote:Original Posted By dickyez
pake <a> gan, kalo <button> emang ga muncul jari tengahnya emoticon-Hammer2


Quote:Original Posted By mast3rdownload
di css buttonnya kasih ini gan


Biar bikin jadi responsive di HP gimana ya?

Untuk sekarang kalau ane buka di HP, tampilan dia sejajar, dempet-dempetan, persis kaya gini

Bikin Kotak Simple CSS Begini, Gimana ya? kasih pulsa jika mau

Ane mau buat, bagian Button1 dan Button2 kegeser kebawah, kaya gini

Bikin Kotak Simple CSS Begini, Gimana ya? kasih pulsa jika mau

Gimana masta biar bisa responsive gitu?
Quote:Original Posted By egie007

Gimana masta biar bisa responsive gitu?


gampangnya pake css framework Bootstrap
di situ ada yg namanya Grid System

itu bisa di gunain buat mencapai yg agan mau..
ada class yg pake embel2 "xs,sm,md atau lg"..
detailnya ada di bagian "Grid options"

di button "like and share" kasih class "col-xs-12 col-sm-4"..sesuai penjelasan di "Grid options"(artinya pas layar <768px gridnya full dan klo >=768px sebesar sepertiganya(12 di bagi 4 = 3) dari besar element parentnya, klo buttonnya di taro di dlm div dgn besar 100px berarti besarnya sepertiga dari 100px)

di button "1 dan 2" kasih class "col-xs-6 col-sm-4""(artinya pas layar <768px gridnya setengah dari besarnya parent karena yg button "like and share" gridnya full jadi button 1 dan 2 otomatis turun, penjelasan yg 'col-sm-4' sama dgn di atas)

klo emang g bisa diakalin pake grid/tetep jelek pas di layar/window kecil..
ada di bootstrap yg namanya Responsive Utility
singkatnya itu ada fungsi missal "visible-sm-block" berarti cuma tampil klo layar <768px
dan "hidden-sm" berarti pas layar <768px kecil di hidden..

selamat mencoba
Quote:Original Posted By egie007






Biar bikin jadi responsive di HP gimana ya?

Untuk sekarang kalau ane buka di HP, tampilan dia sejajar, dempet-dempetan, persis kaya gini

Bikin Kotak Simple CSS Begini, Gimana ya? kasih pulsa jika mau

Ane mau buat, bagian Button1 dan Button2 kegeser kebawah, kaya gini

Bikin Kotak Simple CSS Begini, Gimana ya? kasih pulsa jika mau

Gimana masta biar bisa responsive gitu?


gini buatnya gan, tergantung ukuran yang mau disesuaikan tapi intinya seperti ini (untuk mobile):
Quote:

@media screen and (max-width:320px){
/* CSS styles */
.namaclasslikedansharenya {
float:none;
width:100%;
}
button1 {
float:left;
}
button2{
float:left;
}
}

tinggal sesuaikan dengan coding agan,ntah pakai id,class, atau selector element

untuk buat link new tab tinggal tambahkan atribut di link seperti ini :
<a href="" target="_blank">Link new tab</a>

Quote:Original Posted By egie007






Biar bikin jadi responsive di HP gimana ya?

Untuk sekarang kalau ane buka di HP, tampilan dia sejajar, dempet-dempetan, persis kaya gini

Bikin Kotak Simple CSS Begini, Gimana ya? kasih pulsa jika mau

Ane mau buat, bagian Button1 dan Button2 kegeser kebawah, kaya gini

Bikin Kotak Simple CSS Begini, Gimana ya? kasih pulsa jika mau

Gimana masta biar bisa responsive gitu?


Pake bootstrap aja. gampang.

dari A ~ Z bisa responsive
Quote:Original Posted By otheriz
gampangnya pake css framework Bootstrap
di situ ada yg namanya Grid System

itu bisa di gunain buat mencapai yg agan mau..
ada class yg pake embel2 "xs,sm,md atau lg"..
detailnya ada di bagian "Grid options"

di button "like and share" kasih class "col-xs-12 col-sm-4"..sesuai penjelasan di "Grid options"(artinya pas layar <768px gridnya full dan klo >=768px sebesar sepertiganya(12 di bagi 4 = 3) dari besar element parentnya, klo buttonnya di taro di dlm div dgn besar 100px berarti besarnya sepertiga dari 100px)

di button "1 dan 2" kasih class "col-xs-6 col-sm-4""(artinya pas layar <768px gridnya setengah dari besarnya parent karena yg button "like and share" gridnya full jadi button 1 dan 2 otomatis turun, penjelasan yg 'col-sm-4' sama dgn di atas)

klo emang g bisa diakalin pake grid/tetep jelek pas di layar/window kecil..
ada di bootstrap yg namanya Responsive Utility
singkatnya itu ada fungsi missal "visible-sm-block" berarti cuma tampil klo layar <768px
dan "hidden-sm" berarti pas layar <768px kecil di hidden..

selamat mencoba


Tadi nyoba masukin, jadinya aneh, tinggal tombol How to Download aja yang ada, tombol FB & Report (button2) hilang? apa ada yang salah? seharusnya gimana ya?

PHP Code:
<div style="width:99%; height:25px; border:1px solid #F5F5F5; background-color:#F5F5F5; border-radius:2px;  margin-bottom:-12px; padding:3px">

   <div class="col-xs-12 col-sm-4" class="fb-like" data-href="<?php the_permalink(); ?>" data-layout="standard" data-action="like" data-show-faces="false" data-share="true" style="float:left; width:100px; margin:3px; "></div>

   <div style="float:right; width:220px;">

          <button class="col-xs-6 col-sm-4" id="btn1">How to Download</button>
     
          <div class="col-xs-6 col-sm-4" class="report" style="margin:3px;">
<?php report_video(); ?>
</div>

    </div>

</div>


Quote:Original Posted By mast3rdownload
gini buatnya gan, tergantung ukuran yang mau disesuaikan tapi intinya seperti ini (untuk mobile):


Udah ane bikin begini di style.css, tapi tetep gak berubah apa2, apa nama class, id-nya salah?

PHP Code:
@media screen and (max-width:320px){
/* CSS styles */
.fb-like {
float:none;
width:100%;
}
#btn1 {
float:left;
}
.
report{
float:left;
}



Ini kodenya

PHP Code:
<div style="width:99%; height:25px; border:1px solid #F5F5F5; background-color:#F5F5F5; border-radius:2px;  margin-bottom:-12px; padding:3px">

   <div class="fb-like" data-href="<?php the_permalink(); ?>" data-layout="standard" data-action="like" data-show-faces="false" data-share="true" style="float:left; width:100px; margin:3px; "></div>

   <div style="float:right; width:220px;">

          <button id="btn1">How to Download</button>
     
          <div class="report" style="margin:3px;">
<?php report_video(); ?>
</div>

    </div>

</div>
yang pertama, sesuai petunjuk ..pastikan udh di download dan di include..

yang kedua itu attribute "class"-nya dobel...1 aja..missal <div class="fb-like col-xs-12 col-sm-4" ></div>..untuk class dia bisa multiple..beda dengan ID

yang ketiga..coba pelajarin ini CSS How To..itu agan ada attribute "style"..itu jenisnya CSS Inline..klo yg inline(langsung di "style") itu lebih di pakai atau nge-override yg di internal/external CSS..jadi sementara attribute "style" beserta isinya di hapus aja..

yang keempat..klo pakai framework external coba di baca2 cara penggunaannya..di contohnya di parent element yg punya class="col-*-*" ikut disertain class="row"..
atau coba dengan format ini..
Code:
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-md-4">asdf</div>
<div class="col-xs-6 col-md-4">asdf</div>
<div class="col-xs-6 col-md-4">asdf</div>
</div>
</div>


atau test
Code:
<div class="container-fluid" style="width:99%; height:25px; border:1px solid #F5F5F5; background-color:#F5F5F5; border-radius:2px;  margin-bottom:-12px; padding:3px">
<div class="row">
<div class="fb-like col-xs-12 col-sm-4" data-href="<?php the_permalink(); ?>" data-layout="standard" data-action="like" data-show-faces="false" data-share="true"></div>
<button class="btn btn-default col-xs-6 col-sm-4" id="btn1">How to Download</button>
<div class="report col-xs-6 col-sm-4">
<?php report_video(); ?>
</div>
</div>
</div>
kayak punya ane responsive templatenya berantakan emoticon-Sorry
kalo gak mau pake bootstrap bisa pake flexbox gan ,
dengan asumsi btn 1 dan 2 width nya 50% dari si like and share

Spoiler for HTML:


Spoiler for CSS: