Hallo! Selamat Datang di Marketplace produk digital, Freelancer terbaik di indonesia (68497 Members, 790 Products, 5357 Topic, 13048 Comments)

Menampilkan gambar artikel swarakalibata seperti selang seling

Dibuat
Login Terakhir 12 Hari lalu,
Telah Dilihat 1612 Kali
Lawumedia Indonesia Mengatakan : Sultan Account
  1. Assalamualaikum Warahmatullahi Wabarakatuh... mau tanya saya ingin menampilkan artikel berita seperti gambar yang saya lampirkan itu gimana ya mas. mohon bantuannya?
Ada 1 File Kiriman :
1. Capture53.PNG (127 KB)

Ada 4 Jawaban

PHPMU.COM Support
commented on 20 Jul 2019 21:52:07
  1. Assalamualaikum,.. tinggal dikondisikan saja mas begini :
  2. if ($no%2==0){ $posisi = 'float:right'; }else{ $posisi = ''; }
  3. jadi pada division foto ditempel saja variable posisinya,
  4. ex : <div style='$posisi' class='article-photo'>
  5.  
  6. hasilnya setelah saya cobakan pada swarakalibata Ci,
  7. bisa dilihat dari screenshot dibawah ini.
Terdapat 1 File dilampirkan :
1. swarakalibata_image_position.png (1 MB)
Lawumedia Indonesia
commented on 20 Jul 2019 21:56:06
  1. Assalamualaikum,.. kalau misalnya menggunakan bootstrap coding htmlnya seperti ini gimana mas?
  2.  
  3. <section class="section bg-light" id="services">
  4. <div class="container">
  5. <div class="row">
  6. <div class="col-lg-5">
  7. <img src="https://www.sonusfaber.com/wp-content/uploads/2019/06/FB_blogpost-2.jpg" style="width: 100%">
  8. </div>
  9. <div class="col-lg-7">
  10. <h4>Judul Label</h4>
  11. <p>Possiamo essere dovunque nel mondo, ma alcune canzoni ci riportano immediatamente in Italia. Diversi artisti, alcuni molto noti </p>
  12. </div>
  13. </div>
  14. <div class="row" style="margin-top: 30px">
  15. <div class="col-lg-7">
  16. <h4>Judul Label</h4>
  17. <p>Possiamo essere dovunque nel mondo, ma alcune canzoni ci riportano immediatamente in Italia. Diversi artisti, alcuni molto noti </p>
  18. </div>
  19. <div class="col-lg-5">
  20. <img src="https://www.sonusfaber.com/wp-content/uploads/2019/06/FB_blogpost-2.jpg" style="width: 100%">
  21.  
  22. </div>
  23. </div>
  24. <div class="row" style="margin-top: 30px;">
  25. <div class="col-lg-5">
  26. <img src="https://www.sonusfaber.com/wp-content/uploads/2019/06/FB_blogpost-2.jpg" style="width: 100%">
  27. </div>
  28. <div class="col-lg-7">
  29. <h4>Judul Label</h4>
  30. <p>Possiamo essere dovunque nel mondo, ma alcune canzoni ci riportano immediatamente in Italia. Diversi artisti, alcuni molto noti </p>
  31. </div>
  32. </div>
  33. <p style="margin-top: 20px"><a href="#">Sea More Product >></a></p>
  34. </div>
  35. </section>
PHPMU.COM Support
commented on 20 Jul 2019 22:05:52
  1. Assalamualaikum,.. jadinya nanti gini, perhatikan baris 15 :
  2. <section class="section bg-light" id="services">
  3. <div class="container">
  4. <div class="row">
  5. <div class="col-lg-5">
  6. <img src="https://www.sonusfaber.com/wp-content/uploads/2019/06/FB_blogpost-2.jpg" style="width: 100%">
  7. </div>
  8. <div class="col-lg-7">
  9. <h4>Judul Label</h4>
  10. <p>Possiamo essere dovunque nel mondo, ma alcune canzoni ci riportano immediatamente in Italia. Diversi artisti, alcuni molto noti </p>
  11. </div>
  12. </div>
  13.  
  14. <div class="row" style="margin-top: 30px">
  15. <div class="col-lg-5 pull-right">
  16. <img src="https://www.sonusfaber.com/wp-content/uploads/2019/06/FB_blogpost-2.jpg" style="width: 100%">
  17. </div>
  18. <div class="col-lg-7">
  19. <h4>Judul Label</h4>
  20. <p>Possiamo essere dovunque nel mondo, ma alcune canzoni ci riportano immediatamente in Italia. Diversi artisti, alcuni molto noti </p>
  21. </div>
  22. </div>
  23.  
  24. <div class="row" style="margin-top: 30px;">
  25. <div class="col-lg-5">
  26. <img src="https://www.sonusfaber.com/wp-content/uploads/2019/06/FB_blogpost-2.jpg" style="width: 100%">
  27. </div>
  28. <div class="col-lg-7">
  29. <h4>Judul Label</h4>
  30. <p>Possiamo essere dovunque nel mondo, ma alcune canzoni ci riportano immediatamente in Italia. Diversi artisti, alcuni molto noti </p>
  31. </div>
  32. </div>
  33. <p style="margin-top: 20px"><a href="#">Sea More Product >></a></p>
  34. </div>
  35. </section>
Lawumedia Indonesia
commented on 20 Jul 2019 22:18:48
  1. Assalamualaikum,.. ok mas terima kasih banyak
Maaf, Untuk Memberikan Komentar Anda Harus Login !!!

Online