Saya sering sekali merasakan kebingungan ketidak akan memasukan sebuah kode dengan penempatan kode berbeda dengan kata-kata lainnya. Dan belum menemukan caranya dan akhirnya saya mencari bagaimana caranya agar bisa menjadi lebih spesifikan agar telihat berbeda ketika pengunjung membaca artikel tentang cara-cara lainnya.
Dan inilah beberapa kode script dan model yang bisa kalian coba pada artikel kalian sendiri ya. Berikut beberapa script yang mungkin berguna untuk anda:
1. Model kesatu
2. Model kedua
3. Model Ketiga
4. Model Keempat
5. Model Kelima
6. Model Keenam
7. Model Ketujuh
8. Model Kedelapan
9. Model Kesembilan
10. Model Kesepuluh
11. Model Kesebelas
Dan inilah beberapa kode script dan model yang bisa kalian coba pada artikel kalian sendiri ya. Berikut beberapa script yang mungkin berguna untuk anda:
1. Model kesatu
<div style="border: 1px solid #444; padding: 10px; background-color: #eaeaea; text-align: left;">
Kode Script Anda Di Sini
</div>
Kode Script Anda Di Sini
</div>
2. Model kedua
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-left: 5px solid #2288dd; border-radius: 10px; padding: 10px; t-align: left;">Kode Script Anda Disini</div>
3. Model Ketiga
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-radius: 10px; border: 4px solid #999; padding: 10px; t-align: left;">Kode Script Anda Disini</div>
4. Model Keempat
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffe599; border-radius: 10px; border: 2px dashed #aaa; padding: 10px; t-align: left;">Kode Script Anda Disini</div>
5. Model Kelima
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #6fa8dc; border-radius: 10px; border: 4px double #fff; padding: 10px; t-align: left;">Kode Script Anda Disini</div>
6. Model Keenam
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #a2c4c9; border-radius: 10px; border: 4px outset #fff; padding: 10px; t-align: left;">Kode Script Anda Disini</div>
7. Model Ketujuh
<div style="border: 2px #610B38 dashed; padding: 10px; background-color:#57AA52; tex>t-align: left;"> Kode Script Anda Disini</div>
8. Model Kedelapan
<div style="border: 2px #1B1A76 dotted; padding: 10px; background-color:#c2c2c2; text-align: left;"> Kode Script Anda Disini</div>
9. Model Kesembilan
<div style="border: 3px #5f200e double; padding: 10px; background-color: #82CAFA; text-align: left;"> Kode Script Anda Disini</div>
10. Model Kesepuluh
<div style="border: 2px #006400 inset; padding: 10px; background-color: #d5839f; text-align: left;"> Kode Script Anda Disini</div>
11. Model Kesebelas
<div><form name="copy">
<div align="center">
<i class="icon-copy">
<input onclick="javascript:this.form.txt.focus (); this.form.txt.select ();" type="button" value="Copy All" </div><div align="center"></div>
<p align="center"><textarea style="widht: 150px; height: 50px" name="txt" rows="35" wrap="virtual" cols="25">Ganti teks yang ini yah gan</textarea></p>
</div></form>
<div align="center">
<i class="icon-copy">
<input onclick="javascript:this.form.txt.focus (); this.form.txt.select ();" type="button" value="Copy All" </div><div align="center"></div>
<p align="center"><textarea style="widht: 150px; height: 50px" name="txt" rows="35" wrap="virtual" cols="25">Ganti teks yang ini yah gan</textarea></p>
</div></form>
Dengan cara :
- Copy script box code dari beberapa jenis tampilan di atas
- Paste pada Menu Tab HTML Artikel Entri
-Ganti kode yang berwarna (Merah) yang bertulisan (Kode Script Anda Disini) dengan script yang anda inginkan
INGAT!
Bisa kalian ubah dan edit sesuai yang kalian inginkan. Kreasikan dengan beberapa bagian di bawah ini :
- Mengganti ukuran sudut lengkungan : border-radius: 10px ada 3 ganti semua
- Mengganti warna background : background-color: #codewarna
- Merubah ketebalan border / garis tepi kolom : border: 4px
Bisa kalian ubah dan edit sesuai yang kalian inginkan. Kreasikan dengan beberapa bagian di bawah ini :
- Mengganti ukuran sudut lengkungan : border-radius: 10px ada 3 ganti semua
- Mengganti warna background : background-color: #codewarna
- Merubah ketebalan border / garis tepi kolom : border: 4px
Dan lihatlah hasilnya dengan mengklik Compose kembali pada bagian membuat Entri/Postingan.
Dan Jika kalian tidak ingin repot ketika memasukan kodenya. Pakai saja cara ini
.post-body blockquote {
margin: 10px 10px 10px 20px;
padding: 10px 15px 10px 15px;
line-height: 1.6em;
color:#000000 ;
background:url(http://icon-icons.com/icons2/259/PNG/128/ic_format_quote_128_28348.png)no-repeat top right#fff;
border: 1px solid #FF00FB;
border-left: 15px solid #8bc01d;}
margin: 10px 10px 10px 20px;
padding: 10px 15px 10px 15px;
line-height: 1.6em;
color:#000000 ;
background:url(http://icon-icons.com/icons2/259/PNG/128/ic_format_quote_128_28348.png)no-repeat top right#fff;
border: 1px solid #FF00FB;
border-left: 15px solid #8bc01d;}
INGAT!!
Kalian bisa mengganti semua warna dengan warna yang kalian inginkan dan kalian tinggal mencari kode warna saja.
color:#000000 : Silahkan gantri sesuai dengan warna font yg di inginkan .
Silahkan sobat ganti tulisan yg berwarna Biru dengan URL background blockquote yg sobat inginkan.
#FF00FB : Silahkan ganti sesuai dengan warna garis yg di inginkan.
#8bc01d : Ganti sesuai dengan warna garis tebal kiri yg sobat inginkan.
Kalian bisa mengganti semua warna dengan warna yang kalian inginkan dan kalian tinggal mencari kode warna saja.
color:#000000 : Silahkan gantri sesuai dengan warna font yg di inginkan .
Silahkan sobat ganti tulisan yg berwarna Biru dengan URL background blockquote yg sobat inginkan.
#FF00FB : Silahkan ganti sesuai dengan warna garis yg di inginkan.
#8bc01d : Ganti sesuai dengan warna garis tebal kiri yg sobat inginkan.
Semoga bermanfafat
Terima kasih anda telah membaca artikel Cara Menambahkan Script Kode Pada Postingan. Jika anda kurang paham silahkan berkomentar dibawah & Ada baiknya jika artikel ini bermanfaat Share ke saudara atau teman anda.
Wow nice artikel, bermanfaat sekali.
ReplyDeleteWikimedan - Informasi Berita Saat Ini
Makasih bang, masih dalam proses belajar.
DeleteBerikan link agar saya bisa jalan-jalan ke blog agan :)
makasih gan. akhrinya nemu disni..
ReplyDeleteMakasih gan, masih dalam proses belajar.
DeleteBerikan link agar saya bisa jalan-jalan ke blog agan :)
Terimaksih tutorialnya langsung saya praktekkan di halaman link exchang.
ReplyDeleteOke semoga berhasil gan yah 😁👍
Delete