Cara Membuat Halaman Partner Keren Ala Kode Ken Di Blogger


Akhirnya saya punya ide lagi buat update artikel lagi yang menarik yah pasti yaitu Cara Membuat Halaman Partner Keren Ala Kode Ken Di Blogger. Walaupun ini Tutorial membuat 4 baris kotak HTML ala Kode Jarwo, tapi saya buat halaman partner keren ala Kode Ken.


Saya sendiri menggunakan kotak seperti ini untuk membuat halaman Partner, tapi Kalian boleh mengubah fungsinya itu tersebut sesuai kenginan Kalian.
Demo
Oke langsung ke bagian tutorialnya agar mempersingkat waktu.

Cara Pembuatannya

1. Pertama, Kita Pergi Ke Blogger >> Halaman >> Halaman Baru.

2. Beri Judul Halaman Dengan Partner Kemudian kita edit dalam mode HTML 

3. Masukan Kode ini di Dalam halaman Edit Mode HTML tersebut yah
<style>

  .list {display:block;height:320px;float:left;background:#1E90FF;border-radius:10px;padding:20px;margin:1% 1% 3%;border-bottom:7px solid #4169E1 ;cursor:pointer}
  .list p {color:#fff !important}
    @media all and (min-width:1000px){.list{width:48%}}
    @media all and (min-width:770px) and (max-width:1000px) {.list{width:31%}.list.terakhir{width:97%;height:300px}}
    @media all and (max-width:770px) {.list{width:48%}}
    @media all and (max-width:545px) {.list{width:98%}}
  .list:hover {background:#4169E1;border-bottom:7px solid #222}
  .list img {width:150px;display:block;margin:0 auto;}
  .list-title {font-size:120%;font-weight:700;text-align:center;margin:10px 0}

</style>

<a href='https://www.mintailmu.com'><div class='list awal'>
   <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixZYHPqFhBaeEx2_LFAYHWL_mPCzeHeIek_ytqY1JKEVsJp6BONKFxvXGft_H2sq275oT5v2ssJC-V3icFNPzuhOm98twrqeU-gIh0iTlSA-1LUWipjZ5k-YG2A92TVm_XWlqCxZni8XV2/s1600/minta+ilmu.png'/>
   <p class='list-title'> Minta Ilmu </p>
   <p class='list-description' font-size='2'> Blog Minta Ilmu Merupakan Blog Yang Berbagi Hal Yang Membantu Dan Menolong Pekerjaan Mu, Mulai Dari Tutorial,Tips,Cara dll, Hanya Ada Di Mintailmu.com </p> 
</div></a>

<div class='list tengah'>
   <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiddHmi_22DrrKbfSw6YKqWH8dCnoW0HRSRZUO0hH2K3o2z9wA5-TmITEtmNQve9NHxniwMYXY_iraLbVIzQOXnfgk5dR05_yWQ2NEkYFQlq1bw7tFKW3704EYe9I-r_kUlWBXQfTQj1gA/s1600/Logo.png'/>
   <p class='list-title'> Judul Kotak 2 </p>
   <p class='list-description'> Deskripsi Kotak 2 </p> </div>

<div class='list tengah'>
   <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiddHmi_22DrrKbfSw6YKqWH8dCnoW0HRSRZUO0hH2K3o2z9wA5-TmITEtmNQve9NHxniwMYXY_iraLbVIzQOXnfgk5dR05_yWQ2NEkYFQlq1bw7tFKW3704EYe9I-r_kUlWBXQfTQj1gA/s1600/Logo.png'/>
   <p class='list-title'> Judul Kotak 3 </p>
   <p class='list-description'> Deskripsi Kotak 3 </p> </div>

<div class='list terakhir'>
   <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiddHmi_22DrrKbfSw6YKqWH8dCnoW0HRSRZUO0hH2K3o2z9wA5-TmITEtmNQve9NHxniwMYXY_iraLbVIzQOXnfgk5dR05_yWQ2NEkYFQlq1bw7tFKW3704EYe9I-r_kUlWBXQfTQj1gA/s1600/Logo.png'/>
   <p class='list-title'> Judul Kotak 4 </p>
   <p class='list-description'> Deskripsi Kotak 4 </p>
</div>
Tips : Tolong Copy Dan Paste Kan Kode yang diatas ini yah semua nya
4. Setelah Kalian Copy dan Pastekan, kalian bisa ganti dengan Gambar, Judul, Dan Deskripsi yang kalian mau. contohnya seperti  gambar yang diatas itu yah.

5. Terakhir, Kalian Save Halaman yang kalian buat tadi dan lihat hasil.

Gampang Bukan Tutorial dari K,ode Ken tentang Cara Membuat Halaman Partner Keren Ala Kode Ken Di Blogger. Kalau masih ada yang bingung mungkin ada yang Error atau nggak bisa, Kalian bisa komentar dibawah ini yah, Sekian Terima Kasih Dari Kode Ken, Sampai jumpa di Artikel Kode Ken Selanjutnya.

Referensi Code : http://www.kodejarwo.com/2017/10/baris-kotak.html

Komentar

Posting Komentar

Postingan populer dari blog ini

Cara Hard Reset Oppo A57 Lupa Pola Tanpa Pc (Recovery)

Gambar
www.Carabayu.com - Salah satu solusi  kiat   mengatasi ganguan  aplikasi   di Oppo A57  merupakan dengan  kiat  hard reset. Kerusakan pada smartphone  barangkali   saja terjadi baik   itu   gangguan aplikasi   maupun   kehancuran   pada hardware. Semua itu   bisa  saja terjadi   karena   kesalahan  pemakai ataupun memang   ketika   beli  sudah   tidak beres Oppo A57  Apabila kerusakan  hanya   pada sistem software  bisa   saja   diatas i  dengan hard reset,   namun   lihat dulu kerusakannya,   sudah   parah atau belum. Nah   apabila   kerusakan   sudah   parah maka sangat dianjurkan  untuk   mengerjakan   flashing lewat PC   a gar   hp normal kembali. Hard Reset Hp Oppo A57 Sebelum mengerjakan flashing sangat dianjurkan untuk memakai hard reset terlebih dahulu karenapada dasa...
Baca selengkapnya

Review P-Store.Net Situs Marketplace Terpercaya

Gambar
pada postingan saya kali ini saya akan me-review  Website Marketplace P-Store.Net  . Disini saya akan berbicara mengenai pengalaman saya yang sudah bertransaksi dan berjualan di  P-Store.Net .  P-Store.Net  adalah sebuah website punyanya Mas Tri Hariyanto dimana website ini kegunaanya untuk berjualan online seperti tokopedia atau bukalapak. Disini kalian bebas mau menjual apa saja tanpa ada batasan , kebanyakan yang di jual mengenai Produk-Produk yang berhubungan dengan Internet tapi tidak menutup kemungkinan untuk menjual produk produk lainnya. Review P-Store.Net Situs Marketplace Terpercaya Kalau Mau Join Silahkan Klik Gambar Di bawah ini ! Click Image Tentang P-Store.Net P-Store.Net merupakan marketplace produk virtual & fisik yang dapat memenuhi kebutuhan anda, kami disini mempertemukan penjual & pembeli dengan sistem yang interaktif namun tetap mengedepankan keamanan & kenyamanan pengguna. P-Store.Net juga didukung oleh sumber daya manusia yang ...
Baca selengkapnya

Pedoman untuk Mengubah Hidup Kamu

Gambar
19 Pedoman untuk Jadi Orang yang Lebih Baik Mengubah Hidup Pedoman itu bagaikan arah mata angin yang harus kita ketahui sebelum berlayar di lautan luas.  Simak 19 pedoman dari #ollie dan coba terapkan di kehidupan sehari-hari yaa.. 1 Mempunyai Kebiasaan yang Baik Pastinya ketika bekerja, selalu ada keluhan, kritikan, tindakan merugikan dan terkadang ada yang membicarakan orang lain dari belakang,begitupun sebaliknya. Hal itu tidak perlu dipedulikan.   Ada ungkapan bahwa tidak ada orang yang kerjanya membicarakan orang lain akan berhasil, dan tak ada pula yang menjadi besar karena mengkritik orang lain setiap harinya. Tetap sabar, jangan  mudah terpengaruh orang lain, dan berprasangka baik.  1 2 Bijak Seperti Matahari Cobalah untuk tak membawa informasi negatif ke dalam pekerjaan.   Jangan mengirimkan ataupun menyebarkan informasi negatif ke media sosial seperti Twitter, Facebook, Line dan lain sebagainya.   Belajarlah dari kebijaksanaan matahari, yang menyi...
Baca selengkapnya