CSE Dan Penerapannya


بِسْمِ اللهِ الرَّحْمنِ الرَّحِيمِ

CSE yaitu Custom Search Engine. dan apa maksud dari judul "penerapan" di atas? coba anda lihat ke bawah . berbeda dengan blog lain saya menggunakan related post dengan CSE.. kenapa harus CSE? agar saya tahu berapa link saya yang telah terpajang di mading Google.
nah jika sobat blogger tertarik langsung saja kita masuk ke TKP :

1. masuk blogger - rancangan - Edit HTML - ceklis expand widget dan cari kode berikut :

</data:post.body>

2. setelah itu masukkan kode berikut tepat di bawahnya :

<br/>
<hr/>
<b><blink> Related Post coy</blink> :</b><script src='http://www.google.com/jsapi'/>


    <script type='text/javascript'>


    google.load(&#39;search&#39;, &#39;1&#39;);


    function OnLoad() {


    var customSearchControl = new google.search.CustomSearchControl(&#39;017009654106445155031:lcyrlwjwnom&#39;);


    customSearchControl.draw(&#39;content&#39;);


    customSearchControl.execute(&#39;<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'> OR </b:if></b:loop></b:if>&#39;);}


    google.setOnLoadCallback(OnLoad);


    </script>


    <div id='content' style='height:280px; overflow:auto;'>Loading...</div>

3. sekarang perhatikan kode berwarna merah. itu adalah ID saya. anda silakan ganti dengan ID anda. "nah bagaimana saya tw id saya?" untuk lebih jelasnya anda masuk kemari : http://www.google.com/cse/
nanti anda akan di jerumuskan ke halaman reg untuk membuat CSE anda dan setelah selesai registrasi dan masuk ke halaman baru . perhatikan link di atasnya seperti gambar di bawah ini :


keyword
tadaaaaaaaa!!!

nah itu adalah id anda setelah anda registrasi dan anda kopi pada script di atas tadi.

4. mungkin ada pertanyaan lagi :  

kenapa saya harus mengopi kode yang anda berikan bukkannya kode dari CSE yang sudah saya registrasi dan costumisasi?

jawabannya : ketika anda mengkostum CSE tersebut akan ada style yang nantinya akan menyebabkan eror jika anda check di w3.  (saya sudah coba)  jadi sebaiknya anda mengurangi penggunaan CSS pada bagian ini. karena nantinya widget ini akan mengikuti template bawaan. jadi hasilnya tetap rapi. seperti related post saya di bawah.

dan hasil akhirnya akan jadi seperti berikut :

<div class='post-body entry-content'>
      <data:post.body/>
<br/>
<hr/>
<b><blink> Related Post coy</blink> :</b><script src='http://www.google.com/jsapi'/>

    <script type='text/javascript'>

    google.load(&#39;search&#39;, &#39;1&#39;);

    function OnLoad() {

    var customSearchControl = new google.search.CustomSearchControl(&#39;017009654106445155031:lcyrlwjwnom&#39;);

    customSearchControl.draw(&#39;content&#39;);

    customSearchControl.execute(&#39;<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'> OR </b:if></b:loop></b:if>&#39;);}

    google.setOnLoadCallback(OnLoad);

    </script>

    <div id='content' style='height:280px; overflow:auto;'>Loading...</div>



jangan lupa kode berwarna merah ganti dengan ID anda. selamat mencoba dan semoga berhasil!!!

Blog Dengan Design Frontpage Ala Website

postingan kali ini bertajuk tentang pembuatan front page blog seperti sebuah website. pernahkah sobat kunjungi sebuah web site dan pada front page nya hanya terdapat menu dan content berada pada salah satu menu. ini adalah konsep pembuatan website yg ringan. nah saya pernah mencobanya pada blog saya namun tidak saya pakai lagi karena blog lebih enak di liat langsung ke content "2 d point" tp jika sobat berminat saya akan share sedikit cara pembuatan blog ala website 

 step 1 :
jika sobat ahli dalam membaca html maka akan terbagi 2 page pada template seperti keterangan di bawah


<b:if cond='data:blog.url == data:blog.homepageUrl'>

<!-- (untuk halaman frontpage) -->

<b:else/>

<!-- (untuk halaman blog) -->
 
</b:if> 
 
step 2 :

nah sekarang kita urai menjadi 2 bagian seperti keterangan di atas . 
letakkan kode berikut di bawah <body>

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<!-- (kode HTML untuk halaman frontpage) -->

<b:else/> 
 
 
 kemudian masukan pula ini diatas </body> :

</b:if> 
 
 
 step 3 :
 
Untuk menambahkan widget, masukan kode berikut  (diatas <b:else/>) :

<div id='frontpage-wrapper'>
<b:section class='frontpage' id='frontpage'/>
</div> 
 
 jika sudah di save maka di page elemen anda akan ada tulisan 
"ADD NEW WIDGET/TAMBAHKAN WIDGET BARU""
 
 
step 4 :
 
kode CSS nya sobat buat style baru seperti berikut simpan diatas </head>:

<style type='text/css'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>

/* kode cssnya di sini bro  */

</b:if>
</style>
 

step 5 : anda perhatikan kode merah di atas disana anda isi html dengan format

<div id='frontpage'>
<h1><a href='/'><data:blog.title/></a></h1>
<ul class='nav'>
<li><a href='/'>Home</a><span class='special-character'>/</span></li>
<li><a href='/'>Category</a><span class='special-character'>/</span></li>
<li><a href='/atom.xml'>RSS</a><span class='special-character'>/</span></li>

</ul><!-- end nav -->
<div class='clear'>LongField</div>
 
<div id='terbaru'>
<b:section class='terbaru' id='terbaru1'>
<b:widget id='Feed1' locked='false' title='Recent Post' type='Feed'/>
</b:section>
</div>
<p>LongField
</p>
</div>
 
 yg berwarna kuning bisa anda kreasikan sesuai dengan yg anda inginkan
contohnya dengan menu JQuery atau semacamnya 
tp jangan lupa sebelumnya anda sesuaikan dengan CSS yg anda style warna hijau

Membuat Tombol Add This Pada Blog

Demo coba anda arahkan cursor pada image di samping 

Total Button seluruhnya ente bisa check di sini http://www.addthis.com/bookmark.php

di bawah ini scriptnya anda boleh letakkan di mana saja anda mw asal jangan di celana dalam anda






nah sekarang di simpan dan liat hasilnya

Membuat Daftar Isi blog

Demo nya :

 maaf ane khilaf kebanyakan ane dapat ilmu tp yg ane sendiri pake ane ga sadar jadi ane share dah yg biasa ane pasang di bawah blog ane.. semoga bermanfaat buat sobat blogger




ente cukup GET THIS dan edit content dan ganti link http://unregizter.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;max-results=999 dengan link ente... siip

Membuat Screensaver Blog Dengan Kreasi Sendiri

trik ini mgkn sudah banyak yg tw tp ane sekedar share bwt tmn2 blogger yg blom tw hehe.... mksd jdul diatas adalah membuat modus hemat energy pada blog. jika blog kita dibiarkan beberapa detik maka akan mncul screen saver. itu sudah biasa namun kta bisa memeri sedikit kreasi pada penggunaan scriptnya. contohnya pada blog saya.. saya memberikan animas gif pada screensaver tersebut. coba anda biarkan blog saya selama 20 detik maka akan muncul animasi screensaver. biasanya pada sebuah blog hanya muncul screensaver gelap biasa. tp saya memodifikasi sedikit sehingga pada layar ada gambar animasi gif... di bawah ini adalah scriptnya . perhatikan kode berwarna pink.  kode sesudahnya adalah gambar yg saya taruh pada javascript screensaver sehingga muncul gambar . sobat blogger bisa mengubah gambar tersebut pada kode "http://gambar anda.gif"
setelah iu anda simpan di notepad dengan format screensaver.js . dan kemudian sobat upload di http://code.google.com jika sobat punya akun code.google. jika tidak sobat bisa buat account di sini



var idleTime = 0; var standby = false; function CheckInactivity() { idleTime += 10; if(idleTime > 20) { InitializeStandBy(); } } function InitializeStandBy() { if(!standby) { var h = 0; h = jQuery(window).height(); jQuery("#energysaving").show().css({ height: "0", width: "0", left: "50%", top: "50%" }).animate({ width: "100%", height: h, left: "0", top: "0", opacity: "1" }, 1000); standby = true; } } function StopStandBy() { if(standby) { jQuery("#energysaving").animate({ width: "0", height: "0", opacity: "0", left: "50%", top: "50%" }, 500); setTimeout('jQuery("#energysaving").hide();', 800); standby = false; } } document.write('<link rel="stylesheet" href="http://www.onlineleaf.com/savetheenvironment.css" type="text/css">'); if(typeof(jQuery) == "undefined") { document.write('<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>'); } function InitJQuery() { if(typeof(jQuery) == "undefined") { setTimeout("InitJQuery();", 50); } else { jQuery(function() { jQuery(document).ready(function() { setInterval("CheckInactivity();", 10000); jQuery(this).mousemove(function(e) { idleTime = 0; StopStandBy(); }); jQuery(document).keypress(function(e) { idleTime = 0; StopStandBy(); }); jQuery("body").append('<div id="energysaving"><img src="http://www.lmm.jussieu.fr/~neukirch/work-images/spaghetti/animation_10.gif"></img><p><<---------------------LONGFIELD--------------------->><br /><span>bumi bisa panas komputerpun juga.. tp kalo jaringan internet apa bisa panas juga yaa????? .</span></p><div id="copyrightOnlineLeaf">Copyright 2011 <font style="color: #666666;">www.longfield.co.nr</font> - All reservedkopi panas 2010</div></div>'); jQuery("#energysaving").hide(); }); }); } } InitJQuery();

"http://www.onlineleaf.com/savetheenvironment.css" pada kode di atas juga bisa di modifikasi. saya pernah mengunjungi beberapa blog dan melihat beliau menambahkan css3 sehingga menimbulkan efek khusus. kode ini sobat bisa juga memodifikasi sendiri. dan langkah terakhir stelah sobat mengupload javascript di atas maka buat format seperti di bawah ini



<script src="http://http://longfield21.googlecode.com/files/screensaver.js">
</script>


dan kode setelah src=" sampai tanda kutip terakhir sobat ganti dengan javascript yg telah sobat upload dan letakkan di atas </body>

simpan dan liat hasilnya

Membuat button Box Elegan CSS3

screen shot :

di bawah ini adalah format nge-stel buton. jadi kerangka ringkasnya yaitu <style>-----</style>
anda hanya perlu menentukan type,class atau id yang akan anda pilih dan warna serta efek hover khusus jika anda mw bisa anda kreasikan sendiri...silakan ambil kode merah saja dan letakkan di atas ]]></b:skin>. dan
terlihat di bawah kode warna kuning adalah yang saya pilih "type" karena class saya udah terpake untuk efek lain drpd rombak ulang mending cari alternatif kan?? wkkwkwkwk.. dan penempatan class anda atus sesuai keinginan anda misalkan pada link widget saya di bawah ada tombol pasang widget ini itu juga menggunakan efek css3

 ... yah segitu saja bwt sobat smwa selamat berkreasi

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Button http://fauzilhaqqi.net</title>
    <style type="text/css">
      input[type=button], button {
        /* tempat menambahkan style */
        padding: 5px;
        width: 90px;
        outline-width: 0;
        border: 1px solid #000;
        border-radius: 50px;
        -moz-border-radius: 50px;
 
        -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
        -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
 
        background-image: -webkit-gradient(linear,
            left top, left bottom,
            color-stop(0.0, rgba(255, 255, 255, 0.8)),
            color-stop(0.01, rgba(255, 255, 255, 0.6)),
            color-stop(0.5, rgba(255, 255, 255, 0.3)),
            color-stop(0.5, rgba(255, 255, 255, 0.2)),
            color-stop(1.0, rgba(255, 255, 255, 0.0)));
        background-image: -moz-linear-gradient(top,
            rgba(255, 255, 255, 1.0) 0%,
            rgba(255, 255, 255, 0.6) 1px,
            rgba(255, 255, 255, 0.3) 50%,
            rgba(255, 255, 255, 0.2) 50%,
            rgba(255, 255, 255, 0.0) 100%);
 
        -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.9),
            inset 0px 1px 0px rgba(255, 255, 255, 0.5);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.9),
            inset 0px 1px 0px rgba(255, 255, 255, 0.5);
 
        background-color: #474;
        color: #fff;
        text-shadow: rgba(0, 0, 0, 0.5) 0px -1px 0px;
 
        -webkit-transition: background-color 0.2s ease-in-out,
            color 0.2s ease-in-out,
            -webkit-box-shadow 0.2s ease-in-out;
        -moz-transition: background-color 0.2s ease-in-out,
            color 0.2s ease-in-out,
            -moz-box-shadow 0.2s ease-in-out;
        -o-transition: background-color 0.2s ease-in-out,
            color 0.2s ease-in-out,
            box-shadow 0.2s ease-in-out;
      }
      input[type=button]:hover, input[type=button]:focus,
      button:hover, button:focus {
        -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.9);
        -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.9);
        background-color: #696;
      }
      input[type=button]:active, button:active {
        background-color: #242;
        color: #ccc;
        -webkit-transition-duration: 0.0s;
      }
      body { padding: 20px; }
    </style>
  </head>
  <body>
    <input type="button" value="Login" />
  </body>
</html>

HTML5 Efek Petir

DEMO : http://longfield-html5.blogspot.com/


SSnya :


pada demo ane ga make template xml cuma clasic jadi hasilnya gampang cuma bagaimana caranya supaya bisa jadi header pada template xml ?? ane belom tw juga... mana sore ntar kuliah lagi...ckckck (ho? apa hubungannya??)
scriptnya :





pada kode di atas terdapat kode lebar dan tinggi canvas height="650px" width="930px ini bisa anda sesuaikan sendiri .