ngescript: Tutorial

Tampilkan postingan dengan label Tutorial. Tampilkan semua postingan

Cara Membuat Tulisan Dalam Kotak Di Blog

Ngeblog dan membuat artikel adalah rutinitas bagi seorang Blogger setiap hari,dari mulai menentukan judul,membuat artikel sampai mempublikasikan hasil karyanya adalah hal yang biasa bagi mereka. Bagi blogger membuat postingan dengan baik dan rapih merupakan sesuatu yang harus diterapkan pada setiap artikel yang dibuat,contohnya Cara Membuat Tulisan Dalam Kotak Di Blog dengan membuat isi konten yang rapih dam menarik tentunya dapat nilai seo pada mesin pencarian terlihat bagus dan juga dilihat oleh pengunjung pun akan merasa betah berlama-lama di blog kita.

pada kesempatan kali ini ngescipt ingin membahas tentang membuat tulisan dalam kotak agar terlihat rapih dan enak dilihat oleh pengunjung blog jika memang kotak/bingkai tulisan itu dibutuhkan,untuk membuat kotak untuk tulisan ini sangat mudan dan simpel. Bagi teman yang ingin mengetahui cara membuat kotak tulisan bisa lihat langkah nya dibawah ini.

Langkah membuat tulisan dalam kotak

1. Masuk ke Blogger - Buat Entri Baru

2. Mulailah menetukan judul artikel dan lanjut membuat artikel pada mode Compose

3. Saat ingin memasukkan kode tulisan dalam kotak,masuk ke mode HTML dan pastekan kode script yang ingin dipasang pada postingan

4. Untuk melanjutkan menulis artikel,kembalikan ke mode Compose seperti pada no 2 dan lihat hasilnya jika berhasil akan ada kotak untuk menulis didalamnya

Setelah kita selesai membuat kotak tersebut beserta artikelnya silahkan teman Pratinjau dahulu dan jika sesuai harapan silahkan Publikasikan artikel yang teman buat tadi,tutorial diatas tentang memasang kode script pada postingan. Jika teman sudah mengerti cara memasangnya,kita lanjut pada jenis kotak tulisan/border.

Baca Juga : Membuat Widget Kotak Search Terlengkap

Jenis Border dan Kode Script Untuk Tulisan

Ada berbagai jenis kotak yang unik untuk membuat tulisan pada kotak dan menarik untuk diterapkan agar setiap postingan yang membutuhkan border tersebut dapat terlihat menarik dan rapih,untuk jenis nya teman bisa lihat dibawah ini.

Kotak Border Berwarna Hijau

<div style="border: 3px #04B45F Double; padding: 10px;background-color:#FFFFFF; text-align: left;"> ngescript </div>

Kotak Border Yang Bisa Disesuaikan

<textarea cols="60" onclick="this.focus();this.select()" readonly="readonly" rows="1">ngescript

Kotak Border Background Biru

<p style="border: 1px solid rgb(204, 204, 204); padding: 15px; display: block; background-color: #cfe2f3; text-align: center;"> ngescript </p>

Kotak Border Background Samar

<div style="border: 1px solid #CCC; margin: 10px 0px; padding: 10px; width: auto; height: auto; background-color: #FBFBEE; text-align: left;">ngescript</div>

Kotak Border Background Biru Tua

Kotak Abu-abu Siku Melengkung

<p style="border: solid 1px #aaa; background: #ccc; padding: 15px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; margin: 0; text-align: justify; line-height: 23px; color: black; font-size: 18px">ngescript</p>

Kotak Border Putih Abu-abu

<p style="border: dashed 2px #eceff5; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #1a356e; font-size: 18px">ngescript</p>

Kotak Border Orange Putus-putus

Kotak Background Kuning

<div style="border: 2px #006400 ridge; padding: 10px; background-color: GOLD; text-align: left;"> ngescript</div>

Kotak background Kuning Putus Pendek

<div style="border: 2px #006400 dotted; padding: 10px; background-color: GOLD; text-align: left;"> ngescript</div>

Kotak Background Kuning Kuning Hitam

<div style="border: 2px #006400 dashed; padding: 10px; background-color: GOLD; text-align: left;"> ngescript </div>

Kotak Disisipkan

<div style="border: 2px #006400 solid; padding: 10px; background-color: GOLD; overflow: auto; height: 50px; width: 600px; text-align: left;">ngescript </div>

Kotak Tabel 4 Kolom

<table border="1" style="width: 400px;"> <tbody> <tr> <td align="center">http://ngescript.blogspot.com/ </td> <td align="center">ngescript </td> </tr> <tr> <td align="center">http://ngescript.blogspot.com/ </td> <td align="center">ngescript </td> </tr> </tbody></table>	ngescript
http://ngescript.blogspot.com/	ngescript

Kotak Biru Sisi kiri Siku Melengkung

<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;">ngescript</div>

Kotak Sisi Shadow

<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;">ngescript</div>

Kotak Border Teks Disembunyikan

<span><span style="font-style: italic;"><span style="font-style: italic;"><div style="height: 200px; width: 500px; font: 16px/26px Georgia,Garamond,Serif; overflow: scroll;">ngescriiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiipt
< /div></span></span></span>

Catatan : Ganti kata ngescipt pada setiap kode dengan kata-kata yang ingin dituliskan

Semoga teman semua menemukan kotak yang sesuai dengan yang diharapkan pada blog ngescript ini ya dan menerapkannya pada blog teman sesuai keinginan. Jika ada pertanyaan dan saran silahkan gunakan kolom komentar untuk bertanya. Terima kasih sudah membaca artikel ngescript ini

Salam

ngesript

Cara Mengatasi H1 Really Bad Di Chkme.com Dengan Mudah

Bagi Blogger yang berkecimpung dalam dunia koding pasti gak asing lagi dengan web Chkme.com, apa sih itu Chkme.com ? . Chkme.com adalah situs yang menganalisa SEO pada setiap template,serta dapat mengetahui apa ang kurang pada kode template sehingga kita dapat mengetahuinya dengan mudah. Disini juga kita dapat mengetahui Cara Mengatasi H1 Really Bad Di Chkme.com Dengan Mudah,perlu teman ketahui. Jika template yang kita gunakan memiliki H1 yang kurang bagus dengan mendapatkan warning H1 : Zero,this is Really Bad pada blog yang menggunakan image logo bisa tidak dapat terdeteksi oleh mesin pencari/search engine seperti Google dan lain nya.

Baca Juga : Cara Cek Blog berkualitas Dengan Tool

Sebagai contoh blog ngescript saat belum menambahkan kode pembuka <h1> dan kode penutup </h1> pada bagian <div id='header-inner'> ,seperti pada gambar dibawah ini.

Sunggu diluar dugaan walaupun mendapatkan persentase SEO 100% seperti pada gambar dibawah ini,ternyata terdapat kekurangan yang cukup riskan jika dibiarkan,tapi setelah menambahkan <h1> pada kode html menjadi lebih baik.

" Terus bagaimana cara penempatan kode tersebut? "

Cukup mudah untuk teman mempraktekkan pada template masing-masing,seperti yang ngescript jelaskan diatas. Teman hanya perlu menambahkan kode <h1> sebagai pembuka dan kode </h1> sebagai penutup.

Sebelum memasang kode <h1> dan </h1> mendapatkan warning H1 : Zero, that is Really Bad,tapi setelah ngescript menambahkan kode pada HTML jadi seperti ini

Berikut langkah penempatan kode pada HTML

1. Masuk ke Dasboard

2. Klik Template - Edit HTML

3. Cari kode <div id='header-inner'> kemudian tambahkan kode <h1> dan </h1> seperti gambar berikut ini,sebelum ditambahkan kode <h1> dan </h1>

Sesudah menambahkan kode <h1> dan </h1> seperti contoh gambar dibawah ini

4. Terakhir Simpan Template

Setelah kita menambahkan kode tersebut pada HTML,cobalah untuk cek kembali pada situs Chkme.com dan lihat perubahan pada Heading 1 template yang teman gunakan apakah ada perubahan dan jika ada perubahan pada letak logo blog silahkan atur kembali margin atau padding pada HTML di header img.

Setelah ngescript menerapkan kode tersebut akhirnya mendapatkan H1 : 1,that is Good yang artinya tidak ada masalah pada H1 sehingga kemungkinan terdeteksi atau terindek mesin pencari akan lebih besar,lihat contoh gambar ngescript mengalami perubahan yang baik.

Sekian pembahasan tentang memperbaiki atau mengatasi H1 Really Bad,semoga informasi ini dapat bermanfaat bagi teman yang mengalami hal serupa seperti yang ngescript alami dan dapat mengatasinya dengan mudah. Terima kasih sudah berkunjung dam membaca artikel ini,jika ada pertanyaan mengenai artikel ini silahkan berkomentar yang relevan dan bijak.

Salam

ngescript

Cara Membuat Daftar Isi Dengan Tanda Tag New

Pada kesempatan kali ini ngescrip akan membahas tentang Cara Membuat Daftar Isi Dengan Tanda Tag New,untuk seorang blogger perlu adanya daftar isi pada blog miliknya agar saat pengunjung blog mencari artikel di blog milik kita tidak merasa kebingungan untuk mencarinya. Dengan adanya Daftar isi atau biasa ditulis blog-blog pada umumnya dengan nama Sitemap.

Baca Juga : Widget yang wajib dan tidak dipasang diblog

Penting adanya memasang widget Daftar isi/Sitemap karena jika kita benar-benar ingin dibesarkan dalam arti ingin didaftarkan ke Google Adsense sarat wajib yang harus dipenuhi antara lain about,contact,disclaimer,privacy policy,term of service dan juga tidak ketinggalan Sitemap agar pengunjung blog merasanyaman dan tidak susah untuk mendapatkan informasi diblog yang kita miliki.

Kembali pada pembahasan yang akan ngescript jelaskan,cara membuat daftar isi dengan tanda tag disisi kanan judul artikel. Untuk lebih jelasnya teman simak tutorial berikut ini.

Memasang Daftar Isi Dengan Tanda Tag New

Mempermudah dan membuat nyaman pengunjung penting bagi blogger,karena dengan adanya widget seperti daftar isi dan sejenisnya pad blog yang kita miliki akan membuat blog kita disukai dan dikunjungi oleh pengunjung karena mudah untuk dirayapi. Contoh gambar blog ngescript dengan daftar isi tag new

Langkah Memasang Widget Daftar Isi Seperti Ini

Masuk ke bagian Dasboard
Kemudian klik Laman - Laman Baru
Tulis judul dan masukkan kode dibawah ini

Terakhir simpan dan lihat hasilnya pada daftar isi teman tentunya harus memiliki postingan dulu ya.

Catatan : Ganti tanda berwarna hijau dengan nama blog teman.

Cukup mudah bukan untuk membuat daftar isi sederhana dengan tag new dan sedikit informasi widget ini juga mendaftarkan postingan perlabel sehingga dapat mempermudah pengunjung untuk mencari artikel yang diinginkan.

Semoga tutorial ini dapat bermanfaat dan menambah pengetahuan kita tentang membuat widget daftar isi serta menjadi berkah bagi ngescript dengan mendapatkan pahala yang melimpah,aamiin. Tidak lupa ngescript ucapkan terima kasih untuk teman yang sudah berkunjung ke blog yang sederhana ini,jika ada kritik dan saran jangan sungkan untuk teman sampaikan agar ngescript dapat mengetahui kekurangan pada blog ini dan terus memperbaiki pada postingan-postingan berikutnya.

Salam

ngescript

Cara Membuat Notifikasi Seperti Google Plus

Cara Membuat Notifikasi Seperti Google Plus - Kali ini ngescript ingin membahas tentang membuat notifikasi seperti Google Plus yang biasanya kita lihat pada pojok kanan atas pada header Google+ ,dengan memasang notifikasi seperti itu kita dapat mengetahui komentar terbaru.

Dengan memasang notifikasi juga dapat mempercepat respond kita jika ada orang yang berkunjung dam memberi kan komentar,kita sebagai pemilik blog tersebut dapat dengan cepat membalas komentar pengunjung dan nilai dimata pengunjungpun blog kita tidak terlihat mati dengan merespont komentar mereka secara cepat.

Seperti ini lah tampilan notifikasi Google Plus yang sudah ngescript tandai pada pojok kanan atas milik Google Plus kita,disini kita akan memasang notifikasi serupa pada blog pribadi kita agar kita bisa melihat komentar terbaru dan membalassnya dengan cepat dan mudah.

ngescrip sudah mengaplikasikan notifikasi seperti Google Plus dan ini adalahpenampakannya pada blog ngescript

Terlihat belum sempurna karena notifikasi tertimpa oleh menu laman namun ngescript akan segera merapihkan bagian menu dengan notifikasi tersebut agar terlihat lebih menarik dan rapih agar tidak terlihat berantakan.

Langkah memasang kode script pada Edit HTML sebagai berikut :

Masuk pada bagian Dasboard blog.
Pilih Template - Edit HTML.
Copy paste kode ini diatas </Head>, jika kode ini sudah terpasang pada template lewati saja dan lanjut pada langkah berikutnya.

Kemudian copy kode ini diatas ]]></b:skin> atau diatas </style>.

/* Notifikasi Komentar ----------------------------------------------- */ #cm-total { position:fixed; top:14px; right:0; width:188px; text-align:left; z-index:9999; cursor:pointer; } .total-counter { background-color:#d11919; color:white; padding:1px 4px; font-family:Arial,Sans-serif; font-size:11px; border-radius:5px; font-weight:bold; } #notif { position:fixed; top:20px; right:180px; z-index:9999; height:22px; width:19px; opacity:.4; cursor:pointer; } #notif:hover { opacity:1; } .close-notif { position:fixed; top:92px; right:20px; z-index:9999; cursor:pointer; display:none; } #cm-container { width:355px; position:fixed; top:67px; right:0; z-index:9999; background-color:#e5e5e5; padding:60px 20px 10px 20px; color:#666; box-shadow:0 4px 15px -4px rgba(0,0,0,.4) !important; text-align:left; border:1px solid rgba(0,0,0,.2); background-clip:padding-box; display:none; } #cm-container:before { content:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEile4MYf7GIrsy2FGov63Sx-rmcxuwykCk2uDl9Vd-b7H68BBNtocNO65PFhuiIAgPyJJz_ktzCieFoTFZhnUX9_p2ouuwIrTJXQTXyXDSK1Ar_EOzZ8DhOYnwSveTscpoV5NgNC0e0kj4/s1600/arrow-notif.png'); position:absolute; top:-14px; left:196px; } #cm-container:after { content:"Komentar Terbaru"; position:absolute; top:22px; left:150px; text-align:center; font:normal 14px Arial; color:#333; } .cm-outer { margin:0 auto; padding:0; font-size:11px; text-align:left; font:normal 12px Arial; } .cm-outer ul{ margin-bottom:5px; } .cm-outer li { padding:9px 10px 14px; list-style:none; clear:both; position:relative; border-radius: 3px; box-shadow: 0 1px 2px rgba(0,0,0,.2); background-color: white; margin-bottom:10px; } .cm-text {color:#797979;} .cm-outer {margin:0 0 5px} .cm-header {margin: 4px 0 8px 90px;font-size:11px;font-weight:normal !important;} .cm-header a {color:#262626;text-decoration:none;font-size:14px;font-weight:bold} .cm-header a:hover {color:#74a2c3;text-decoration:none;} .cm-outer .cm-content {overflow:hidden} .cm-content {margin-left:90px} .cm-outer img { display:block; float:left; background:#ececec url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMfHpKhu5HOWZZf6ZnYrSUztv4u_y7YSysU4lvykWjfc124XKk07upryywVl9_4bPkRrs4BYctwzKhroKBQEUh51PedZ8qyLk6yDFx-ckd-vwwagdg12yxVAJOPJ46DuC3IAzB0FVYB-A/s1600/anon80.png') no-repeat 50% 50%; overflow:hidden; border-radius:3px 0 0 3px; position:absolute; top:0; left:0; } .cm-footer {margin-top:7px;} .cm-footer a {color:#5886a7;text-decoration:none;} .cm-footer a:hover {color:#74a2c3;text-decoration:none;} div.cm-header img[src='http://img1.blogblog.com/img/openid16-rounded.gif'] { content: url(http://2.bp.blogspot.com/-8NurYzHIoWQ/Ujc_oLurXII/AAAAAAAAFek/XhAm-oLwg7Q/s80-c/gravatar.png); }

Copy kode terakhir terahir diatas </body>.

<div id='cm-container'/> <div id='notif' title='Notifikasi'><img alt='notifikasi' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxJBiiK0AmfTbjv2F9BNHTyIB_qTl4JyrYuKL48OomLvKOAG7fGoiWdsRsumo-DWUGbPRLYXYmvcoru3Z1yanaK-0b_2W29BGWr_xc9m2BH6b0mjbmmvs46yGUJ6iONLhM95ZJ-dI5DLg/s1600/lonceng.png'/></div> <div id='cm-total'/> <div class='close-notif'><img alt='close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfVtSli-greoC4EZO2vgG9_Dz4CFYc2Ru74tnOJblIC8R7S0gp8xwsjx6Zk05y1gKGHqBxMftsIDW9oNE3o0plcbGso39SuW6pWOmjB97rVwLHHQUKFzKS9VNRuvpewDhbi94f9-cgAVM/s1600/delete4.png' title='close'/></div> <script> //<![CDATA[ var originalTitle = document.title; var cm_config = { home_page: "http://ngescript.blogspot.com", max_result: 6, t_w: 80, t_h: 80, summary: 40, new_tab_link: true, ct_id: "cm-container", new_cm: " Komentar Baru!", interval: 30000, alert: true, alert: function(total) { document.getElementById("cm-total").innerHTML = '<strong class=\'total-counter\'>'+total+'</strong>'; document.title = '(' + total + ') ' + originalTitle; } }; $('#notif').click(function(){$('#cm-container, .close-notif').toggle();});$('.close-notif').click(function(){$('#cm-container, .close-notif').hide();});document.getElementById('notif').onclick = function(){document.title = originalTitle;$('#cm-total').hide();};document.getElementById('show-total').onclick = function(){document.title = originalTitle;$('#cm-total').hide();$('#cm-container').show();}; //]]> </script> <script src='https://googledrive.com/host/0B3pi8P5BWqm1OHB4Zks1aWR0Nnc/notif-komen.js' type='text/javascript'/>

Simpan template / Save dan lihat hasilnya pada pojok kanan atas blog milik kita.

Cukup mudah untuk di praktekan pada blog masing-masing agar respont kita terhadap pengunjung blog yang berkomentar lebih siap siaga lagi sehingga pengunjung yang bertanya akan mendapatkan jawaban lebih cepat dari blogger lain yang hanya mementingkan diri sendiri.

Semoga tutorial ini dapat bermanfaat dan memberikan tambahan ilmu untuk kita semua dan untuk kedepannya pasti ngescrip akan terus memberikan informasi yang lebih bermanfaat untuk teman semua,jika ada pertanyaan dan saran bisa berkomentar dengan kolom yang sudah disediakan dibawah. Terima kasih

Selam

ngescript

Popular Posts