Haloo! Selamat Datang di Komunitas Private Training Web Development (47333 Members, 446 Projects, 3622 Topic, 9891 Comments)

Butuh karyawan baru? atau seorang Web Developer (Part-time/Freelance/Full-time), cari disini : Members Area Jobs!
Menampilkan gambar artikel swarakalibata seperti selang seling
Ahmad Adzan Azari Mengatakan : Members -
Rate Topic :
  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)
Robby Prihandaya Mengatakan :
Admin -
  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.

Ada 1 File Kiriman :
1. swarakalibata_image_position.png (1 MB)
Ahmad Adzan Azari Mengatakan :
Members -
  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>

Robby Prihandaya Mengatakan :
Admin -
  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>

Ahmad Adzan Azari Mengatakan :
Members -
  1. Assalamualaikum,.. ok mas terima kasih banyak

Maaf, Untuk Memberikan Komentar Anda Harus Login !!!