Cara membuat dalam postingan blog

H

ai Gaes... Masih kurang dengan desain dalam blognya?, Kalau masih disini Om Ipoel akan memberikan salah satu tutorial untuk mempercantik blog sobat.

Tutorial yang Om Ipoel bahas kali ini adalah tentang

Cara membuat box block keren, menarik dan responsive dalam postingan blog

.

Dengan memperindah tampilan blog, bukan tidak mungkin pengunjung blog sobat juga akan betah dan nyaman berlama-lama menelusuri isi blog sobat apabila blog sobat Rapi dan Menarik.

Itu akan menjadi salah satu keuntungan tersendiri nantinya untuk kemajuan blog sobat.

Selanjutnya bagaimana cara membuat box block keren, menarik dan responsive untuk postingan blog, berikut Om Ipoel akan menjelaskan langkah-langkah nya berikut ini.

Cara Membuat box block keren, menarik dan responsive untuk postingan blog

Pertama-tama hal yang harus diingat dalam pembuatan box block kali ini memerlukan FontAwesome agar supaya enak dilihat dan menarik, nah jadi silahkan sobat tambahkan dulu kode link css berikut ini.

• Penerapan link css FontAwesome, Caranya salin kode dibawah ini...

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

• Kemudian tempatkan kode diatas tepat di atas kode </head>.

Apabila blog sobat sudah terdapat link CSS FontAwesome, berapapun versinya maka tidak perlu lagi untuk melakukan langkah diatas, langsung saja ke tahap berikutnya.

Cara Penerapan kode CSS kedalam HTML Template

• Login dulu ke blogger.com
• Pilih Tab Template, Edit HTML
• Selanjutnya sobat Cari Kode </style> atau ]]></b:skin>.
  *Agar cepat dalam mencari kode</style> dan ]]></b:skin>
  cukup tekan tombol pada keyboard CTRL+F lalu isikan kata kunci</style> atau ]]></b:skin> .
  
• Kalau sudah ketemu, masukan kode berikut di atasnya...

/* Block Simple Awesome By Om Ipoel */
.note,.alert,.instruction {position:relative;display:block;font-style:normal;color:#555;padding:15px 18px 15px 48px;background-color:#f8e38d;border-radius:3px;border-bottom:2px solid rgba(0,0,0,.1)}
.note p,.alert p,.instruction p {margin:0px}
.note {background-color:#FCD683}
.alert {background-color:#db6161}
.alert a,.alert code {color:#FFC0A7}
.instruction {background-color:#58C99D}
.instruction a,.instruction code {color:#C4FCE5}
.note:before,.alert:before,.instruction:before {font-family:'FontAwesome';display:block;position:absolute;top:15px;left:16px;color:rgba(0,0,0,.15);font-size:22px;line-height:1}
.note:before {content:"\f040"}
.alert:before {content:"\f071"}
.instruction:before {content:"\f05a"}

• Simpan Template.
• Nah sekarang tinggal pasang kode script HTML kedalam Postingan.

Baca Juga :

Membuat Random Post Dengan Style Thumbnail

Cara penerapan kode HTMLnya kedalam postingan

• Buat postingan baru atau edit postingan sobat yang sudah ada.
• Lalu Pilih Tab HTML jangan yang COMPOSE, kemudian tempatkan kode dibawah ini sesuai keinginan sobat

Kode dan Contoh hasil Box Block NOTE

KODE

<div class="note">ISI CATATAN SOBAT DISINI ...</div>

CONTOH BOX BLOCK NOTE

Didalam CSS nya telah ditambahkan CSS untuk link a, paragraf p dan code .sobat bisa menggunakannya sesuka hati.

Kode dan Contoh hasil Box Block ALERT

KODE

<div class="alert">ISI CATATAN SOBAT DISINI ...</div>

CONTOH BOX BLOCK ALERT

Masih banyak cara lain untuk modifikasi blok seperti ini. Tidak harus menggunakan font icon. sobat juga boleh menggunakan img gambar icon, bisa sesuai selera dan keinginan sobat sendiri.

Kode dan Contoh hasil Box Block INSTRUCTION

KODE

<div class="instruction">ISI CATATAN SOBAT DISINI ...</div>

CONTOH BOX BLOCK INSTRUCTION

Dalam tutorial ini, Om Ipoel tidak menggunakan img atau gambar icon, melainkan menggunakan font-family:'FontAwesome' yang berarti jika sobat yang belum ada FontAwesomenya, maka harus menggunakan FontAwesome, dengan cara simpan kode link dibawah ini diatas </head>

<link href='//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

Ganti ISI CATATAN SOBAT DISINI ... dengan isi catatan sobat sendiri

• SELESAI... Simpan dan Lihat hasilnya

Terima kasih dan sekiaan informasi sederhana yang bisa Om Ipoel bagikan mengenai

Cara Membuat Box Block Keren, Menarik dan Responsive Dalam Postingan Blog

, semoga artikel ini dapat bermanfaat dan juga sedikit memberikan tambahan wawasan buat sobat.

Jangan Lupa SHARE dan SUBSCRIBE dibawah ini, untuk agar blog Om Ipoel ini bertambah rajin dan bersemangat dalam memposting artikel-artikel baru lain yang bermanfaat dan berguna buat sobat Semua.