dezulblog: Javascript

Bagi temans yang yang mempunyai situs blogspot dengan sering memposting kode HTML, CSS, JavaScript atau kode lainnya tentu sudah tidak asing dengan tag pre. Biasanya kode-kode yang dibungkus menggunakan tag pre diperuntukkan untuk postingan tutorial.

Artikel ini akan membahas cara mengembangkan tag pre agar tampilannya berbeda dari yang biasa. Kode inilah juga yang digunakan di situs dezulblog.blogspot.com

Buka Blogger > Template > Klik Edit HTML > Simpan kode CSS di bawah ini sebelum ]]></b:skin> atau </style>

CSS

pre {
    background: #333;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
}

pre.code {
    margin: 20px 25px;
    border-radius: 4px;
    border: 1px solid #292929;
    position: relative;
}

pre.code label {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 13px;
    color: #ddd;
    position: absolute;
    left: 1px;
    top: 15px;
    text-align: center;
    width: 60px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: none;
}

pre.code code {
    font-family: "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
    display: block;
    margin: 0 0 0 60px;
    padding: 15px 16px 14px;
    border-left: 1px solid #555;
    overflow-x: auto;
    font-size: 13px;
    line-height: 19px;
    color: #ddd;
}

pre::after {
    content: "double click to selection";
    padding: 0;
    width: auto;
    height: auto;
    position: absolute;
    right: 18px;
    top: 14px;
    font-size: 12px;
    color: #ddd;
    line-height: 20px;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    transition: all 0.3s ease;
}

pre:hover::after {
    opacity: 0;
    visibility: visible;
}

pre.code-css code {
    color: #91a7ff;
}

pre.code-html code {
    color: #aed581;
}

pre.code-javascript code {
    color: #ffa726;
}

pre.code-jquery code {
    color: #4dd0e1;
}

Berikutnya simpan script di bawah ini sebelum tag penutup </body>

JS

<script type='text/javascript'>

//<![CDATA[
//Pre Auto Selection
$('i[rel="pre"]').replaceWith(function() {
    return $('<pre><code>' + $(this).html() + '</code></pre>');
});
var pres = document.querySelectorAll('pre,kbd,blockquote');
for (var i = 0; i < pres.length; i++) {
  pres[i].addEventListener("dblclick", function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
//]]>
</script>

Script di atas berfungsi untuk menyeleksi otomatis setiap sobat melakukan klik dua kali pada area yang dibungkus tag pre, kbd, dan blockquote.

Setelah itu simpan template.

Untuk penerapan pada postingan, silakan tambahkan kode di bawah ini pada tab HTML post

HTML

<pre class='code code-html'><label>HTML</label><code>... kode 

HTML (yang telah diparse) di sini ...</code></pre>

<pre class='code code-css'><label>CSS</label><code>... kode CSS di sini ...</code></pre>

<pre class='code code-javascript'><label>JS</label><code>... kode JavaScript di sini ...</code></pre>

<pre class='code code-jquery'><label>Jquery</label><code>... kode jQuery di sini ...</code></pre>

Sumber: http://www.arlinadzgn.com/2015/04/simple-pre-code-dengan-seleksi.html

Kali ini kita akan membuat teks dan image secara random dengan javascript. Image dan teks bisa disisipkan link ke halaman atau situs tertentu. Dengan demikian, image dan teks link random ini bisa digunakan untuk keperluan iklan. Teks dan image akan dirandom dan muncul bergantian ketika halaman dibuka atau pengunjung berpindah halaman.

Kode Javascript ini bisa dipasang di widget sidebar, footer, header atau bahkan bagian dipostingan artikel untuk situs blogspot. Untuk pemasangan kode random image dan teks yang dipasang di postingan artikel silakan baca petunjuknya di sini

JS

<script type="text/javascript">

quotes = [];
desc = [];
quotes[0] = "<a class='iklan' target='_blank' href='http://link#0'><h4><img class='imgiklan' src='http://link-image#0'> Judul-Iklan#0</h4></a>";
desc[0] = "Deskripsi-Iklan#0";
quotes[1] = "<a class='iklan' target='_blank' href='http://link#1'><h4><img class='imgiklan' src='http://link-image#1'> Judul-Iklan#1</h4></a>";
desc[1] = "Deskripsi-Iklan#1";
quotes[2] = "<a class='iklan' target='_blank' href='http://link#2'><h4><img class='imgiklan' src='http://link-image#2'> Judul-Iklan#2</h4></a>";
desc[2] = "Deskripsi-Iklan#2";

index = Math.floor(Math.random() * quotes.length);

document.write(quotes[index]);
document.write(desc[index]);

</script>

Catatan
Tentu saja alamat gambar, deskripsi dan link tujuan harus Anda ganti sesuaikan kebutuhan.
Anda bisa menambahkan gambar, deksripsi dan link sebanyak-banyaknya sesuai dengan kebutuhan

dezulblog

Simple Pre Code

Membuat Random Teks dan Image dengan Javascript