Membuat Kotak Scroll SEO di Blog dengan Kode Eksternal CSS

Diantara kalian yang membuat artikel Postingan Blog, pastinya ada yang ingin meletakkan kode Script atau kalimat yang panjang. Permasalahan pada kode Script atau kalimat panjang  adalah Panjangnya teks Script atau kode tersebut yang tidak cukup dengan lebar halaman artikel postingan blog, sehingga kode script atau kalimat panjang  yang untuk satu baris menjadi dua baris. Tentu saja Hal tersebut menjadi masalah bila yang membaca kode script atau kalimat panjang  tersebut menganggap dua kode script atau dua kalimat panjang yang berbeda yang terletak di baris yang berbeda, padahal hanya satu kode script atau kalimat panjang  yang sama tapi menjadi dua baris. Atas Dasar hal tersebut Penulis membuat Artikel tentang Membuat Kotak Scroll SEO di Blog dengan Kode Eksternal CSS.

Kegunaan Kode Eksternal CSS disini dalam membuat Kotak Scroll di Blog untuk mengoptimalkan SEO Artikel Postingan Blog. Di Banyak Situs Web Artikel tentang cara membuat kotak scroll sudah banyak bertebaran, tapi sebagian besar menggunakan Kode Inline CSS yang buruk bagi SEO. Jadi Bagaimana Cara Membuat Kotak Scroll SEO di Blog dengan Kode Eksternal CSS ?

Persiapan Kode Eksternal CSS untuk membuat Kotak Scroll SEO di Blog.

Pertama-tama kita menuju ke bagian Tema Blog terus ke bagian edit HTML. Selanjutnya Tekan “Tombol Ctrl + F” lalu cari kata “.post-body” atau yang mirip dengan kata tersebut . Setelah ketemu, kita letakkan kode eksternal CSS nya untuk membuat kotak scroll dibawah “.post-body”  atau bisa juga langsung kita letakkan sebelum kode </style> atau diantara kode skin di bagian edit html template blog ( untuk kode skin penulis tidak tahu bentuk kodenya ha ha ). Kode Eksternal CSS nya seperti dibawah ini :

.post-body p{width:150%;margin-bottom:10px;margin-top:5px;margin-left:5px;margin-right:5px;}
.ph{border:1px solid black;width:100% ;height:auto;overflow-y:hidden;overflow-x:scroll;}
.pv{padding: 5px 5px 5px 5px;border:1px solid black;width:100% ;height:60px;overflow-y:scroll;overflow-x:hidden;}

Perhatikan gambar dibawah ini



Setelah selesai meletakkan Kode CSS Ekternal untuk membuat Kotak scroll  SEO, kita klik simpan. Perlu diketahui disini, bila kita tidak menemukan kata “.post-body” tapi  yang mirip dengan kata tersebut, kita perlu merubah juga kode eksternal CSS untuk membuat kotak scroll dimana kata “.post-body” dirubah menjadi kata yang mirip dengan “.post-body”.

Penggunaan Kode eksternal CSS untuk membuat kotak Scroll SEO di Artikel Blog.

Hal Pertama yang perlu kita lakukan agar pembuatan kotak scroll SEO tidak berantakan yaitu copy paste dahulu Kode Script atau kalimat panjang yang ingin kita jadikan informasi dalam artikel di bagian Compose. Setelah itu kita pasang pemanggilan kode eksternal CSS dibawah ini pada  bagian html artikel postingan.



Kode pada gambar diatas merupakan kode  pemanggilan Eksternal CSS untuk membuat kotak Scroll SEO secara Horizontal dan Kotak Scroll SEO secara Vertikal. Terkadang kode <p>teks kalimat panjang</p> hilang  yang menyebabkan kotak scroll  horizontal error dikarenakan kita sering mengotak-atik atau bolak-balik klik compose-html artikel psotingan blog. Untuk itu pastikan kode <p>teks kalimat panjang</p> tetap ada atau tidak hilang.

Demikianlah Artikel tentang Membuat Kotak Scroll SEO di Blog dengan Kode Eksternal CSS, semoga bermanfaat.

Share this Membuat Kotak Scroll SEO di Blog dengan Kode Eksternal CSS article :

Facebook Twitter Google+

Artikel Terkait Membuat Kotak Scroll SEO di Blog dengan Kode Eksternal CSS

TENTANG PENULIS

Nanang Sugiarto

Penulis seorang Programmer Aplikasi Database Vb6 dan Blogger. Situs Web yang dibuat Penulis yaitu : Nanang Sugiarto WorkShop, Tutorial VB6 Sugiarto, Tutorial Microsoft Office Sugiarto, dan Seputar Pengetahuan Pangan.