Dwi Agung Wicaksono: JavaScript
D
Dwi Agung Wicaksono
Beranda
7

Kontak

  • facebook.com/agung.ibm
  • agung.ibm@gmail.com
  • +628 53-yang-lain-kpn2

Memuat...

Memuat...
Showing posts with label JavaScript. Show all posts
Showing posts with label JavaScript. Show all posts

blogger widget
Secara default bila kita menambahkan widget pada blog akan muncul pada bagian homepage dan juga pada bagian halaman halaman post lainnya. Untuk membuat widget hanya tampil pada halaman tertentu atau juga menyembunyikan widget pada halaman tertentu sesuai yang kita hendaki, kita bisa lakukan dengan menambahkan kode perintah tertentu pada template. Menyembunyikan widget biasanya digunakan pada halaman-statis yang memerlukan ruang tersendiri di blog, seperti halaman Contact, About Me, Sitemap, Tukar Link atau halaman lainya yang kita kehendaki. Atau mungkin juga Anda hanya ingin menampilkan widget-widget tersebut hanya di homepage saja. Untuk mempermudah kita bahas satu persatu sebagai berikut :


Kode perintah dibawah disisipkan pada bagian widget yang ingin kita tampilkan pada halaman utama atau homepage, dibawah ini langkah dan Kode yang perlu ditambahkan adalah sebagai berikut. 


  • Menampilkan elemen/widget hanya dihalaman Utama/Hompage :
<b:if cond='data:blog.url == data:blog.homepageUrl'> 
...........
</b:if>
  • Menyembunyikan elemen/widget di Halaman Utama/Hompage :
<b:if cond='data:blog.url != data:blog.homepageUrl'>
...........
</b:if>
  •  Menampilkan elemen/widget hanya di Staticpages :
<b:if cond='data:blog.pageType == "static_page"'>
...........
</b:if> 
  • Menyembunyikan elemen/widget di Staticpages :
<b:if cond='data:blog.pageType != "static_page"'>
...........
</b:if>  
  • Menampilkan elemen/widget hanya di Itempages (Postingan) :
<b:if cond='data:blog.pageType == "item"'>
...........
</b:if>
  • Menyembunyikan elemen/widget di Itempages (Postingan) :
<b:if cond='data:blog.pageType != "item"'>
...........
</b:if>
  • Menampilkan elemen/widget hanya Pada Archivepages :
<b:if cond='data:blog.pageType == "archive"'>
............
</b:if>
  • Menyembunyikan elemen/widget di Archivepages :
<b:if cond='data:blog.pageType != "archive"'>
............
</b:if>
  • Menampilkan elemen/widget pada URL Postingan Tertentu :
<b:if cond='data:blog.url == "URL Postingan"'>
............
</b:if>
  •  Menyembunyikan elemen/widget  di URL Postingan Tertentu :
<b:if cond='data:blog.url != "Alamat Postingan"'>
.............
</b:if>
note :
perhatikan Kode
"
==" untuk menampilkan 
sedangkan Kode "!=" untuk menyembunyikan

Contoh Untuk menampilkan elemen/widget hanya di Homepage Saja.

Kodenya :
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- ISI dari elemen atau Widget -->
</b:if>

Contoh pemasangan :
<b:widget id='HTML1' locked='false' title='Nama title' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Kode yang saya Blok warna Merah adalah batas dari penggunaan kode.
Kode yang saya Blok warna Kuning adalah kodenya.

Atau

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
/* -- Ini adalah CSS style -- */
</style>

<script type='text/javascript' >
//Ini adalah kode JavaScript
</script>
</b:if>

Dengan menerapkan teknik menampilkan dan menyembunyikan widget pada halaman tertentu diatas maka sekarang Anda bisa mengatur dan meletakannya widget yang ada di blog sesuai dengan keinginan anda.
OK,.. Cukup sekian tutorial dari saya hari ini mengenai Cara menampilkan dan menyembunyikan widget pada halaman tertentu. Apabila ada pertanyaan silahkan corat coret di kolom komentar,.
Selamat mencoba dan semoga berhasil.....
Kritik dan Saran Anda di sini
Anda dan lainnya
1 komentar
Anda dan lainnya
1 komentar

Langsung saja buat Sobat yang belum tahu tentang Cara Membuat / Edit Template, Atau Membuat Template Blogspot..
Pada Dasarnya Susunan Template hanyalah Seperti ini..

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' x
mlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>

<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
Di Sini Tempat Pengaturan Style Nya
 ]]></b:skin>
<script type='text/javascript'>//<![CDATA[
Di Sini Tempat Pengaturan script Nya
/*]]>*/</script>
</head>
<body>

<b:section id='global'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>

</body></html>

Template di atas adalah Template yang masih Ber Bentuk Pondasi,
Alias belum di beri Pengaturan tata letak dan lain sebagainya,,
Karena Tempelate ini baru berisikan Posting saja.
Keterangan:
-Tulisan Warna Merah adalah Letak Pengaturannya.
-Tulisan Berwarna Kuning Adalah Posting Blognya.
-Tulisan Warna Biru adalah ID yang Akan Di atur Lebar Kecilnya Kolom.

Langsung saja buat Sobat yang ingin mencoba Praktek Silahkan di Praktekan,
COPY
template Di atas Dan
PASTE
Ke HTML blog Sobat..
Semoga Bermanfaat...
Kritik dan Saran Anda di sini
Anda dan lainnya
1 komentar
Anda dan lainnya
1 komentar

memperbarui statusnya

How to add and use font awesome icons on Blogger???

Font Awesome merupakan kumpulan icon dan  tombol yang berbasis font. Artinya, ketika sobat membutuhkan ikon di blog, tidak lagi menggunakan gambar / image yang tentunya akan lebih mempercepat loading blog sobat.


Untuk bisa menggunakan Font Awesome ini, sobat harus menyimpan CSSnya di atas </head>
<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>

Cara menggunakan Font Awesome

Untuk menggunakan Font Awesome, sobat harus menambahkan tag <i> kemudian class nya gunakan nama icon.



cara penulisannya :
<i class="icon-css3"></i>
cara penulisannya :
<i class="icon-html5"></i>

Memperbesar Ukuran





<i class="icon-off"></i>
<i class="icon-off icon-large"></i>
<i class="icon-off icon-2x"></i>
<i class="icon-off icon-3x"></i>
<i class="icon-off icon-4x"></i>

Bordered & Pulled Icons

Gunakan kode pull-right atau pull-left untuk disimpan di kanan atau dikiri, dan icon-border untuk membuat kotak diluar icon bendera. Ini hanya sekedar contoh, untuk
<i class="icon-flag icon-3x pull-left icon-border"></i>
Gunakan kode pull-right atau pull-left untuk disimpan di kanan atau dikiri, dan icon-border untuk membuat kotak diluar icon bendera. Ini hanya sekedar contoh, untuk lebih variatif silahkan dicoba sendiri.
Gunakan kode pull-right atau pull-left untuk disimpan di kanan atau dikiri, dan icon-muted untuk membuat ikon menjadi warna muda.
<i class="icon-quote-left icon-4x pull-left icon-muted"></i>
Gunakan kode pull-right atau pull-left untuk disimpan di kanan atau dikiri, dan icon-muted untuk membuat ikon menjadi warna muda.

Animated Spinner

Untuk membuat ikon berputar, seperti animasi loading gunakan kode icon-spin bagus digunakan pada icon-spinner dan icon-refresh

   Ini contoh icon-spinner yang diputar.
<i class="icon-spinner icon-spin icon-2x"></i> Ini contoh <code>icon-spinner</code> yang diputar.

Rotated & Flipped

Ikon juga dapat diputar dengan menentukan derajat putaran, juga bisa dibalik secara vertikal atau horizontal.

  ikon normal
  ikon diputar 90 derajat
  ikon diputar 180 derajat
  ikon diputar 270 derajat
  ikon dibalik secara horizontal
  ikon dibalik secara vertikal
<i class="icon-shield"></i>&nbsp; ikon normal
<i class="icon-shield icon-rotate-90"></i>&nbsp; ikon diputar 90 derajat
<i class="icon-shield icon-rotate-180"></i>&nbsp; ikon diputar 180 derajat
<i class="icon-shield icon-rotate-270"></i>&nbsp; ikon diputar 270 derajat
<i class="icon-shield icon-flip-horizontal"></i>&nbsp; ikon dibalik secara horizontal
<i class="icon-shield icon-flip-vertical"></i>&nbsp; ikon dibalik secara vertikal

Stacked Icons

Ikon juga dapat ditumpuk, Gunakan kode icon-stack sebelum tag ikon, dan kode icon-stack-base sebagai background / di bawah.

icon-twitter di atas icon-check-empty
icon-flag di atas icon-circle
<span class="icon-stack">
<i class="icon-check-empty icon-stack-base"></i><i class="icon-twitter"></i></span><span style="margin-left: 8px;">icon-twitter di atas icon-check-empty
</span>
<span class="icon-stack">
<i class="icon-circle icon-stack-base"></i><i class="icon-flag icon-light"></i></span><span style="margin-left: 8px;">icon-flag di atas icon-circle
</span>

Button

Icon juga dapat diterapkan pada button / tombol.


Reload Checkout Info Delete

<ul class="button">
<li><a class="btn1" href="#"><i class="icon-repeat"></i> Reload</a></li>
<li><a class="btn2" href="#"><i class="icon-shopping-cart icon-large"></i> Checkout</a></li>
<li><a class="btn2" href="#"><i class="icon-info-sign"></i> Info</a></li>
<li><a class="btn1" href="#"><i class="icon-trash icon-large"></i> Delete</a></li>
</ul>
Bukan hanya pada button, icon Font Awesome ini bisa disimpan di berbagai tempat, seperti menu, menu dropdown, form, dan-lain-lain...

Untuk CSS dan HTMLnya silahkan diacak2 sendiri sob....
Semoga bermanfaat dan selamat berkreasi....

Resource : http://blog.kangismet.net/2013/06/cara-menggunakan-ikon-font-awesome-di.html
Kritik dan Saran Anda di sini
Anda dan lainnya
1 komentar
Anda dan lainnya
1 komentar

Buat para Blogger Saya akan sedikit berbagi bagaimana cara memasang atau membuat Text Generator dengan menggunakan pengaman atau pelindung JavaScript location.href di FORM text generator Anda yang bisa Anda lihat tutorial lengkap dan singkatnya disini..

Oke deh lanjut ke pokok pembahasan..


Pertama Hal yang perlu Anda perhatikan adalah pada bagian :


var result, hr=location.href;
if( hr.search("dwiagungwicaksono.blogspot.com/") == -1 && 
hr.search("file://") == -1 ) result = "Hi! =) Please, contact me to E-mail.";


Keterangan: Jika Anda ingin agar alat ini bekerja di halaman situs Anda, maka Anda harus mengganti Url/Link situs/blog dengan nama situs/blog Anda seperti terlihat pada tag kolom di atas. Untuk izin Publikasi Kontak bisa Anda isi dengan kata-kata yang Anda suka.


dwiagungwicaksono.blogspot.com/
Hi! =) Please, contact me to E-mail.

Kedua Hal yang perlu Anda perhatikan Juga adalah pada bagian :


var normal = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789!#$%&\'()*+-.,/:;<>@=?[]{}~|_';
var changed = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789!#$%&'()*+-.,/:;<>@=?[]{}~|_';


Contoh: Jika Anda ingin membuat text generator seperti yang ada dalam karakter text diatas atau yang lainnya, maka yang harus Anda lakukan adalah mengganti karakter text di bawah menjadi text lain yang ingin Anda buat kedalam text generator:


abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789!#$%&'()*+-.,/:;<>@=?[]{}~|_

dan script di bawah ini adalah Javascript untuk membuat WIDE text generator. jika Anda ingin membuat text generator lainnya sudah saya terangkan caranya di atas.



<//*- -START - - script - - Credit By https://dwiagungwicaksono.blogspot.com/ - -*//>
<script>
function encool() {
    var result, hr=location.href;
    if( hr.search("dwiagungwicaksono.blogspot.com/") == -1 && hr.search("file://") == -1 ) result = "Hi! =) Please, contact me to E-mail.";
 else
    var result = change(document['agungibm']['asli']['value']);
    document['agungibm']['encooled']['value'] = result;
}
var normal = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789!#$%&\'()*+-.,/:;<>@=?[]{}~|_';
var changed = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789!#$%&'()*+-.,/:;<>@=?[]{}~|_';

function change(result) {
    var res = '';
    for (i = 0; i < result['length']; i++) {
        for (var c = result['charAt'](i), j = 0; j < normal['length'] && c != normal['charAt'](j); j++) {;
        };
        res = j < normal['length'] ? res + changed['charAt'](j) : res + c;
    };
    return res;
}
</script>
<//*- - END - - script - - Credit By Dwi Agung Wicaksono - -*//>

Untuk menampilkan form text generator di halaman situs Anda, Silahkan Anda pasang script di atas di halaman tersebut. Lalu di bawahnya Anda pasang juga form nya seperti di bawah ini. Anda bisa memodifikasi bentuk form nya dengan CSS sesuai selera yang Anda suka.



<form name="agungibm" id="agungibm" style="clear:both;">

<div style="float:left;">
<textarea rows="4" cols="58" name="asli" id="asli" onkeyup="encool()" style="width:140px; height:136px;font-family:'lucida grande',tahoma,verdana,arial,sans-serif;"></textarea><br/>
<input type="button" onclick="encool()" value="Ubah">
</div>

<div style="float:top;">
<textarea rows="4" cols="58" name="encooled" id="encooled" style="width:382px; height:136px; font-size:26px;font-family:'lucida grande',tahoma,verdana,arial,sans-serif;">Demo</textarea>
</div>

</form>

Dan jika Anda benar dalam mengedit atau memasangnya, maka Anda bisa melihat hasilnya di bawah ini.

Silahkan di coba Guys.. ≥^.^≤

Saya telah menemukan karakter ini saat online di situs Facebook. Seseorang telah meninggalkan komentar yang digunakan mereka dan itu tampak benar-benar keren dan banyak yang "menyukai" itu. Jadi saya memutuskan untuk membuat text generator itu untuk orang-orang seperti Mereka yang suka hal-hal ini.


Wide teks Generator - ubah teks anda dengan alat ini.


Teks Generator keren lainnya di sini
Anda dan lainnya
1 komentar
Anda dan lainnya
1 komentar
Kumpulan Trik FB