PUSTAKA MIZTIZ

Membuat efek Link Nudging Pada Label dengan CSS3

Untuk yang kali ini saya postingkan tentang efek Link nudging atau link yang memiliki efek bergeser saat disorot dengan kursor,sebelum membuatnya jangan lupa tambah gadget Label terlebih dahulu jika belum ada gadget labelnya.

Untuk cara membuatnya ikuti langkah-langkah berikut :

1. Login blogger

2. Rancangan, Elemen laman

3. Cari kode ]]></b:skin> dan simpan CSS berikut diatasnya :

#label1 .widget-content ul li :hover {margin-left: 10px;

padding-left: 5px; background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0.40) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.40))); background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.40) 100%); background: -o-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.40) 100%); background: -ms-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.40) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=1 ); background: linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0.40) 100%);

-moz-transition: all 0.70s ease-out; /* FF4+ */

-o-transition: all 0.70s ease-out; /* Opera 10.5+ */

-webkit-transition: all 0.70s ease-out; /* Saf3.2+, Chrome */

-ms-transition: all 0.70s ease-out; /* IE10? */display: block;

}

Tambahan :

* Yang perlu anda perhatikan adalah bagian ID label1 , bisa saja nama ID label pada blog anda label2, dst.

* Untuk bisa menentukkan nama dari ID lihat atau cari seperti kode dibawah ini:

<b:widget id='Label1' locked='false' title='Label' type='Label'/>

* yang berwarna biru itu adalah nama ID nya, jadi tinggal disesuaikan saja nama ID nya pada bagian langkah Ke-3.

4. Simpan.

Belajar Dasar Dasar JavaScript

Selamat pagi,siang,atau malam Rekan rekan kita lanjutkan pemrograman web setelah HTML dan CSS, Selanjutnya yaitu :

JAVASSCRIPT

1 Penulisan Java Script

Kode Java Script dituliskan pada file HTML.Terdapat dua cara untuk menuliskan kode-kode Java Script agar dapat ditampilkan pada halaman HTML, yaitu :

Java script ditulis pada file yang sama

Untuk penulisan dengan cara ini, perintah yang digunakan adalah

<SCRIPT LANGUANGE =”JavaScript” >program java script disini</SCRIPT>. Perintah tersebut biasanya diletakkan diantara Tag <BODY>…</BODY>

<HTML>
<HEAD><TITLE>……….</TITLE>
</HEA>
<BODY>
<SCRIPT LANGUAGE=”Javascript”>
kode javascript disini

</SCRIPT>
kode HTML disini

</BODY>
</HTML>

b) Javascript ditulis pada file terpisah
Kode Javascript bisa juga kita buat dalam file terpisah dengan tujuan agar dokumen HTML isinya tidak terlalu panjang. Atribut yang digunakan adalah

<SCRIPT src=”namafile.js”>…</SCRIPT>

Diantara tag <SCRIPT………> dan <SCRIPT> tidak diperlukan lagi kode Javascriptnya karena sudah dibuat dalam file erpisah. File yang mengandung kode Javascript berekstensi .js

1.4 Program Pertama Javascript

Pada bagian ini kita akan membuat program dengan menggunakan Javascript.

Program ini akan menampilkan teks “ Belajar Pemrograman Javascript”

<HTML>
<BODY>
<SCRIPT language="JavaScript">

</SCRIPT>
</BODY>

</HTML>

Berikut diberikan beberapa contoh program sederhana dengan menggunakan Javascript

<HTML>
<BODY>
<B>Bagian Pertama ini ditulis dengan HTML!</B>
<P>
<SCRIPT language="JavaScript">

</SCRIPT>
<P>
<B>Bagian Terakhir dari dokumen HTML, ditulis setelah Script!</B>
</BODY>
</HTML>

<HTML>
<HEAD><TITLE>BElajar Javascript Yuuuuuu</TITLE>
</HEAD>
<BODY BGCOLOR="gray">
<SCRIPT language="JavaScript">

</SCRIPT>
</BODY>

</HTML>

Objek document mempunyai dua metode untuk menuliskan teks, yaitu write dan writeln. Metode write digunakan untuk menuliskan teks tanpa ganti baris, sedangkan metode writeln digunakan untuk menuliskan teks dengan ganti baris.

Berikut diberikan contoh Program Javascript yang diletakkan di file lain dan dipanggil melalui suatu file HTML

File isi.js

document.writeln("<CENTER>");
document.writeln("<HR WIDTH=600 COLOR=Black>");
document.writeln("<H1>INDONESIA,KALIMANTAN BARAT</H1>");
document.writeln("<H2>PONTIANAK<H2>");
document.writeln("<H3>PURNAMA<H3>");
document.writeln("<HR WIDTH=600 COLOR=Black>");

document.writeln("</CENTER>");

File HTML

<HTML>
<BODY>
<B>Contoh ini menggunakan Javascript yang diambil dari File lain..</B>
<P>
<SCRIPT language="JavaScript" src="isi.js"></SCRIPT>
</BODY>

</HTML>

1.5 Komentar

Sama seperti bahasa pemrograman lain. Javascript juga menyediakan fasilitas untuk menuliskan komentar, komentar ini berguna bila nantinya anda atau orang lain membaca program.

Pemberian komentar dalam Javascript dapat dilakukan dengan dua cara yaitu dengan menuliskan komentar setelah tanda garis miring dua kali, contoh :

//ini komentar

atau

/*ini juga komentar */

Apa itu SEO ?

SEO atau Search Engine Optimization merupakan langkah/kiat menuju pengoptimalan sebuah blog dalam hal ini masalah Search Engine

Sebagus apapun sebuah situs,jika tak dapat direkam/ditangkap/di index oleh mesin pencari,sama halnya dengan kebohongan.

Dengan ter index mesin pencari,kemungkinan situs kita akan di lihat oleh seluruh orang di dunia ini akan semakin besar.Banyak kami jumpai blog yang bagus,namun kurang optimalnya kiat dalam peng index an.

Dibawah ini salah satu langkah peletakkan meta tags agar ter index mesin pencari :

Kode ini cukup anda letakkan di bawah kode <head>.

<meta content='nama anda' name='Author'/> <meta content='Tulis Diskripsi Blog' name='description'/> <meta content='Tulis Kata Kunci Blog' name='keywords'/> <meta content='follow, all' name='robots'/>

Atau jika anda ingin menambah meta yang lain,coba kunjungi di sini,

Cara Membuat Related Post Di bawah Postingan

Sebelum kita mulai,terlebih dahulu agar fungsi dari related post ini semakin maksimal sebaiknya sobat blogger memperhatikan dalam hal pemasangan nya, berikut kira-kira tips nya:

1.Rapi, Jangan asal naruhnya.

2.Tampilannya menarik perhatian, anda beri warna yang mencolok juga menarik perhatian, tapi sudahkah menyatu dengan keseluruhan warna blog?

3.Ada efek tertentu saat bagian tersebut disorot mouse, ini berkaitan juga dengan point dua yaitu "CAPER" alias cari perhatian.

4.Penempatan yang benar, karena saya pernah mencoba dulu menempatkan related post ini di sidebar dan ternyata kurang efektif karena menjadi kurang diperhatikan. Atau penempatan yang terlalu kebawah juga kurang efektif, karena terlalu jauh dari artikel.

Sudah mengerti?? kalau begitu, mari kita lajutkan. Hehe...hahaha.hohoho..(ga jelas)

Pertama cari kode dibawah ini pada template anda, ingat sebelumnya centang "Expand Widget Templates".

Cari tag di bawah ini :

kalau sudah ketemu silahkan copy kode berikut ini, kemudian paste dibawah kode tadi.

<b:if cond='data:blog.pageType == "item"'>

<H2>Artikel Terkait:</H2>

<DIV class='rbbox'>

<DIV style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>

<DIV id='albri'/>

<SCRIPT type='text/javascript'>

var homeUrl3 = "<data:blog.homepageUrl/>";

var maxNumberOfPostsPerLabel = 4;

var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 100;

maxNumberOfLabels = 3;

function listEntries10(json) {

var ul = document.createElement('ul');

var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?

json.feed.entry.length : maxNumberOfPostsPerLabel;

for (var i = 0; i < maxPosts; i++) {

var entry = json.feed.entry[i];

var alturl;

for (var k = 0; k < entry.link.length; k++) {

if (entry.link[k].rel == 'alternate') {

alturl = entry.link[k].href;

break;

}

}

var li = document.createElement('li');

var a = document.createElement('a');

a.href = alturl;

if(a.href!=location.href) {

var txt = document.createTextNode(entry.title.$t);

a.appendChild(txt);

li.appendChild(a);

ul.appendChild(li);

}

}

for (var l = 0; l < json.feed.link.length; l++) {

if (json.feed.link[l].rel == 'alternate') {

var raw = json.feed.link[l].href;

var label = raw.substr(homeUrl3.length+13);

var k;

for (k=0; k<20; k++) label = label.replace("%20", " ");

var txt = document.createTextNode(label);

var h = document.createElement('b');

h.appendChild(txt);

var div1 = document.createElement('div');

div1.appendChild(h);

div1.appendChild(ul);

document.getElementById('albri').appendChild(div1);

}

}

}

function search10(query, label) {

var script = document.createElement('script');

script.setAttribute('src', query + 'feeds/posts/default/-/'

+ label +

'?alt=json-in-script&callback=listEntries10');

script.setAttribute('type', 'text/javascript');

document.documentElement.firstChild.appendChild(script);

}

var labelArray = new Array();

var numLabel = 0;

<b:loop values='data:posts' var='post'>

<b:loop values='data:post.labels' var='label'>

textLabel = "<data:label.name/>";

var test = 0;

for (var i = 0; i < labelArray.length; i++)

if (labelArray[i] == textLabel) test = 1;

if (test == 0) {

labelArray.push(textLabel);

var maxLabels = (labelArray.length <= maxNumberOfLabels) ?

labelArray.length : maxNumberOfLabels;

if (numLabel < maxLabels) {

search10(homeUrl3, textLabel);

numLabel++;

}

}

</b:loop>

</b:loop>

</SCRIPT>

</DIV>

<script type="text/javascript">RelPost();</script>

</DIV>

</b:if>

Lalu simpan.

AKShell - Belajar Dan Publish Script JavaScript Berbasis Apps online

Jika Anda akan memulai sebuah proyek JavaScript, akan lebih baik untuk menggunakan layanan AkShell web daripada menginstal dari pengembangan web . Ini memberikan sisi server pengembangan dan hosting, dengan IDE online yang dirancang khusus untuk aplikasi berbasis kode JS dan script.

Anda hanya perlu menyediakan kode dan AkShell akan menangani sisanya. Ini menggunakan open source PostgreSQL yang memungkinkan menafsirkan hampir semua konstruksi SQL, sehingga database pengelolaan pekerjaan proyek berbasis Java script Anda akan mudah dan bebas dari konflik database tertentu. Git konsol terintegrasi dalam membuat manajemen kode mudah bagi pengguna. Selain itu, pengguna juga dapat berkolaborasi dengan satu sama lain di GitHub untuk mengambil saran dan modul pertukaran kode untuk mempercepat proses pembangunan.

Seiring dengan memulai sebuah proyek baru, Anda juga dapat mengimpor file kode ke editor AkShell untuk mengubah mereka. Untuk memulai, kunjungi AkShell untuk membuka editor . Editor mengemulasi antarmuka pengguna IDE yang lain, dengan bar navigasi untuk menelusuri file kode dan jendela utama untuk mengedit file yang dibuka. Sisi kiri menawarkan dua bagian untuk melihat dan membuka file di ruang kerja saat ini dan menjelajahi perpustakaan, lingkungan, dan file kode lainnya masing-masing.

Toolbar utama memungkinkan Anda beralih antara modus berbeda. Untuk mengedit file tersebut, pastikan pilihan Edit diaktifkan. Bersamaan Edit, pilihan Eval dan Komit tersedia untuk mengevaluasi dan mengkompilasi kode. Mengklik Git Git terbuka akan konsol untuk menjalankan perintah. Jika Anda ingin membuka file kode dari lokasi setempat, klik File pada menu bar diikuti dengan Upload File untuk menentukan lokasi file.

Setelah dikodekan aplikasi Java Script, Anda dapat mempublikasikan dari menu App. Sebelum penerbitan aplikasi, periksa pratinjau server hidup dari aplikasi yang dikembangkan atau script dengan mengklik Preview pada toolbar utama. AKShell editor online yang berguna untuk kode aplikasi web JavaScript.

Kunjungi AkShell untuk belajar JavaScript

note: Jujur saya sendiri masih dangkal banget dengan yang beginian,tapi ga apa2 lah itung2 sambil belajar n berbagi...

Blogger Sitemap Generator

Sebelumnya saya sudah pernah membahas tentang cara submit sitmap ke google webmaster,Namun yang saya jelaskan waktu itu hanya tentang cara submit saja,namun dari pengalaman ada kalanya sitemap yang kita submit di tolak oleh google...biar lebih gampang kita gunain Sitemap Generator aja yah.cekidot

Jika sobat submit sitemap manual dengan sitemap dasar, yaitu atom.xml atau rss.xml maka yang akan sobat temukan sewaktu input sitemap di google webmaster adalah ketidakpuasan, kenapa? karena google webmaster hanya membaca 26 artikel sobat saja. Lantas bagaimana jika punya 100 artikel atau lebih? maka dari itu dengan blogger sitemap generator ini mudah-mudahan bisa mengatasi permasalahan tersebut.

Buat sobat yang sudah paham cara mensubmit sitemap ke google wabmaster, bisa langsung ke blogger sitemap generator, silahkan klik disini. Kemudian masukkan alamat url milik sobat, jangan lupa tutup dengan tanda slash ( / ).

Untuk lebih jelasnya, silahkan sobat lihat videonya dibawah ini

Bagaimana?

note: Cukup sekian dan terima 5ribu.

Membuat Recent Post dan Recent Comment

Widget Recent Post berisi judul - judul artikel terbaru di blog kita. Widget post terbaru dapat memberikan informasi kepada pengunjung apa artikel terbaru di blog kita. Sedangkan widget recent Comment berisi comment terbaru dari pengunjung, widget recent comment ini dapat menginformasikan kepada kita apa comment terbaru yang diberikan oleh pengunjung.

Cara membuatnya sebagai berikut :

1. Login >> Tata Letak >> Elemen Halaman >> Tambah gadget.

2. Pilih gadget "Feed", Klik tambahkan ke blog.

3. Masukan alamat feed yang mau anda pasang (URL untuk post terbaru atau URL komentar terbaru).

Recent Post

Contoh : http://NAMA BLOG.blogspot.com/posts/default

Recent Comment

Contoh : http://NAMA BLOG.blogspot.com/feeds/comments/default

4. Klik Lanjutkan.

5. Ganti judul dengan Post terbaru atau Komentar terbaru, dan pilih juga berapa yang anda inginkan (maksimal 5)

6. Klik tombol Simpan Perubahan.

Selesai dan lihat hasilnya...

note: Laper coy,....udah dulu ye...lanjut ntar.owh makanan"i'am comiiiing".hiks