Home / WordPress / Trik Mudah Cara Memasang Script HTML Di WordPress

Trik Mudah Cara Memasang Script HTML Di WordPress

Trik Mudah Cara Memasang Script HTML Di WordPress – Cara memasang script HTML ini bisa diterapkan di WordPress.com dan WordPress.org. Yang nantinya script HTML tersebut bisa kita pasang di Halaman Posting dan di Widget.

Baca Juga : Cara Mengganti Tampilan Background WordPress

Script HTML tidak bisa dipasang begitu saja, jika kita menginginkan yang tampil adalah bentuk kode. Artinya cara pasang script HTML disini adalah bukan untuk dijalankan. Jadi ada trik khusus agar script HTML bisa ditampilkan di halaman posting dan di widget.

Trik-Mudah-Cara-Memasang-Script-HTML-Di-WordPress

Selain script HTML seperti kode CSS, PHP, Javascipt, jika kita ingin menampilkannya di halaman dan di widget harus menambahkan kode khusus. Contoh sebuah blog yang menyajikan tutorial WordPress. Tentunya trik menampilkan kode pada tutorialnya sangat diperlukan.

Cara Memasang Script HTML Di WordPress.com

Lalu apa bedanya WordPress.com dan WordPress.org ? Ya jelas beda, karena di WordPress.com kita tidak bisa menambahkan Plugin. Memang kenapa dengan Plugin ? Di WordPress.org untuk menampilkan kode seperti HTML, PHP, CSS, dan Javascript dapat memanfa’atkan sebuah Plugin. Contoh Plugin untuk menampilkan kode di WordPress.org adalah Syntax Highlighter.

Nah kalau di WordPress.com untuk menampikan kode kita siasati agar bisa menerapkannya juga layaknya WordPress.org.

Untuk WordPress.com agar bisa memasang kode HTML dan lainnya, caranya seperti yang akan saya terangkan dibawah ini. Misalnya saya akan memasang kode HTML berikut di halaman posting atau wirdget.

<a title="Berbagi Info & Tips Trik Menarik" href="http://info-menarik.net/" target="_blank"><img src="http://info-menarik.net/wp-content/uploads/2014/11/header_new.png" alt="Info_UpToDate" /></a>

Maka sebelum Anda copy paste ke halaman posting atau widget, agar kode HTML diatas bisa ditampilkan bukan dijalankan, ganti dulu kode-kode berikut :

Kode  <  Ganti dengan  &lt;

Kode  >  Ganti dengan  &gt;

Kode    Ganti dengan  &quot;

Contoh jika Anda sudah merubahnya setiap kode yang saya jelaskan diatas, kira-kira nanti kode HTMLnya akan seperti ini :

&lt;a title=&quot;Berbagi Info & Tips Trik Menarik&quot; href=&quot;http://info-menarik.net/&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot http://info-menarik.net/wp-content/uploads/2014/11/header_new.png&quot; alt=&quot;Info_UpToDate&quot; /&gt;&lt;/a&gt;

Nah jika sudah Anda rubah, sekarang kode HTML tersebut bisa Anda pasang di halaman posting atau di widget WordPress. Namun agar kode berjalan normal ketika di copy paste, terutama pada bagian tanda kutifnya () maka tambahkan pada awal script <code> dan akhir script </code>.

<code>&lt;a title=&quot;Berbagi Info & Tips Trik Menarik&quot; href=&quot;http://info-menarik.net/&quot; target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://info-menarik.net/wp-content/uploads/2014/11/header_new.png&quot; alt=&quot;Info_UpToDate&quot; /&gt;&lt;/a&gt;</code>

Setelah semuanya beres, sekarang Anda copy paste kodenya ditempat yang ingin Anda tampilkan. Misal di halaman posting, maka tempatkan kode pada mode Text.

Agar proses pengerjaan merubah kode HTML lebih cepat, maka sebaiknya gunakan pihak ketiga untuk merubahnya. Tool converter HTML to Text saya rekomendasikan web www.textfixer.com.

Modifikasi juga tampilan kode HTMLnya dengan background atau ditambah garis pinggir.

<a title="Berbagi Info & Tips Trik Menarik" href="http://info-menarik.net/" target="_blank"><img src="http://info-menarik.net/wp-content/uploads/2014/11/header_new.png" alt="Info_UpToDate" /></a>

Maka kodenya adalah sebagai berikut :

<p style="overflow: auto; background-color: #eaf9d4; text-align: center; border: 3px solid #999999; padding: 5px;">letakkan script HTML disini</p>

<a title="Berbagi Info & Tips Trik Menarik" href="http://info-menarik.net/" target="_blank"><img src="http://info-menarik.net/wp-content/uploads/2014/11/header_new.png" alt="onesetia82" /></a>

Maka kodenya adalah sebagai berikut :

<p style="overflow:auto;width:auto;height:60px;">letakkan script HTML disini</p>

Cara memasang script HTML di WordPress sudah selesai. Langkah selanjutnya mari kita bahas cara memasang script HTML di WordPress.org.

Seperti yang sudah disinggung diawal paragraf, bahwa untuk WordPress.org cara memasang kode HTML, PHP, CSS, dan Javasript bisa memanfa’atkan sebuah Plugin. Dari sekian banyak Plugin untuk memasang kode Syntax diantaranya adalah Syntax Highlighter by Alex Mills. Anda bisa dapatkan Plugin Syntax Highlighter by Alex Mills dulu, lalu installkan di WordPress.

Cara menggunakan Plugin Syntax Highlighter by Alex Mills cukup mudah, setelah Anda install pluginnya tempatkan kode di mode Visual atau Text Halaman Posting. Dengan shortcodes seperti berikut, setiap tanda (>) ganti dengan tanda (]) :

Contoh Shortcodes PHP :

<php>letakkan script PHP disini</php>

Contoh Shortcodes CSS Autolinks :

<css autolinks="false" classname="myclass" collapse="false" firstline="1" gutter="true" highlight="1-3,6,9" htmlscript="false" light="false" padlinenumbers="false" smarttabs="true" tabsize="4" toolbar="true" title="example-filename.php">letakkan script CSS disini</css>

Contoh Shortcodes Javascript :

<code lang="js">letakkan script Javascript disini</code>

Contoh Shortcodes Sourcecode Language :

<sourcecode language="plain">letakkan script Sourcecode Language disini</sourcecode>

Contoh sekarang saya akan pasang Script PHP footer.php blog ini dengan Shortcodes PHP :

<?php $options = get_option('groovy'); ?>
 </div><!--#page-->
 </div><!--.container-->
 </div>
 <footer>
 <div class="container">
 <div class="footer-content">
 <div class="copyrights">
 <?php mts_copyrights_credit(); ?>
 </div>
 </div><!--.footer-content-->
 </div><!--.container-->
 </footer><!--footer-->
 <?php mts_footer(); ?>
 <?php wp_footer(); ?>
 </body>
 </html>
 <a id="top" href='#'><i class="icon-up-bold"></i></a>
 <script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
 <script type="text/javascript">
 var toper = $('a#top');
 $(window).scroll(function(){
 if ($(this).scrollTop() > 100) {
 toper.fadeIn( 200 );
 } else {
 toper.fadeOut( 200 );
 }
 });
 toper.click(function(){
 $('html, body').animate({scrollTop:0}, 500);
 return false;
 });
 </script>
 <script type="text/javascript">
 var s = skrollr.init();
 </script>

Selamat mencoba dan semoga bermanfa’at.

About InfoMenarik

Berbagi Info & Tips Trik Menarik tentang Seputar EPS-Topik Korea, Kesehatan, Microsoft Office, Pendidikan, Photoshop, Software, Teknologi, WordPress Terlengkap dan Gratis.

20 comments

  1. Thank’s min ilmunya

  2. thanks gan triknya

  3. Terima kasih atas informasinya, atikelnya sangat berguna bagi saya, sebelumnya saya sukar menggunakannya tapi alhamdulillah dengan adanya tutorial ini saya bisa membuatnya

  4. malam gan, newbie mau tanya
    mau coba masukin script tapi bingung taruhnya dimana gan. ada bahasa seperti ini gan Step 2. (Required) Copy the code below and put it in your web page where you want the script to appear.
    makasih gan

    • Maksudnya pasang script untuk menampilkan apa ya mas? Tampilan posting/halaman atau widget? Atau mungkin untuk edit kode PHP misalnya …

  5. Siang mass
    Mau tanya,saya beli domain dan hosting dan saya instal wp di capanel,dan saat saya posting di halaman dengan tulisan tebal/warna itu tidak terjadi perubahan. Apakah dr persi terbaru wp / kesalahan instal.
    Soalnya saya pernah buatt wp di hosting gratis dgn subdomain penggunaan penulisan tebal/warna bisa di post di halaman .
    Tolong Solusinya mas

    • Coba nonaktifkan dulu semua plugin yang terinstall, mungkin saja permasalahannya ada di plugin. Jika masih tetap, coba install ulang CMS WordPressnya dengan cara otomatis dari hosting.

  6. Aku mau nanya mas bagaimana cara memasukkkan html ini ke web:

    • Kan diatas saya rasa sudah dijelaskan dengan lengkap mas. Silakan mas coba teliti lagi artikelnya. Semoga sukses!

  7. Bagaimana cara menampilkan tempat edit html pada wordpress bang.. tempat untuk ganti-ganti script pada wordpress. mohon infonya bang!!

    • Di halaman Rich Text Editor WordPress atau tempat menulis artikel Anda pilih Mode Texts/HTML bukan mode Visual!

  8. Mau tanya mas, saya daftar untuk jadi publisher sulvo, tapi saya diharuskan pasang kode sulvo traffic ke homepage. Caranya bagaimana mas ya? Terima kasih atas jawabannya

  9. Mas mau nanya, kalau mau menambah file php baru yang isinya postingan tersendiri selain di post atau page di wordpress bisa nggak soalnya,.. banyak backlink dari website lama artikelnya diakhiri dengan dotphp

  10. Gan, caranya mengganti nama tombol older post dan ditaruh ditengah gimana ya?
    Ini website saya (maaf saya sertakan web saya) : http://furnitureminimalisjati[dot]com

    • Coba ubah bahasa WordPress dari dari Settings > General yang ada di Dashboard. Jika template mendukung pengubahan bahasa maka yang awalnya “Older posts” akan menjadi “Pos-pos terdahulu”. Namun jika ingin mengubah “Older posts” dengan angka, agan bisa menggunakan plugin WP-Page Navi.

  11. mau tanya soal template gan, ini premium atau bukan, dan belinya dimana? kok responsive banget kayaknya

  12. ini yang saya cari, makasih banyak min udah share caranya. bikin artikel cara menaikkan traffict blog dengan cepat dong min kayak punyamu.

Leave a Reply

Your email address will not be published. Required fields are marked *