Showing posts with label Networking. Show all posts

Membuat Back to Top dengan jQuery

Written by RA_Syihan on Saturday, November 20, 2010 | Category: Networking, Tips, Trick, Tutorial

Wah, aku kembali lagi nih. kali ini aku kembali dengan blog tutorial yang sudah lama tidak aku tampilkan.

Membuat back to top dengan jquery adalah tema kita hari ini. Walaupun tutorial ini agak "kawak", tapi yang saya share di bawah ini, lebih lengkap dan simple. Back to top kali ini kelihatan lebih halus, karena tidak langsung ke atas, tapi perlahan. dan pastinya, dengan bantuan jquery. mari kita simak pelajaran membuat back to top dengan jquery.

1. Silahkan login ke blogger
2. Kemudian tujulah bagian Racangan
3. Dan pilih yang Edit HTML
4. masukan kode di jquery ini, di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> 
<script type='text/javascript'>
$(function(){
$('a[href*=#top]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body').animate({scrollTop: targetOffset}, 1000);
return false;
}
}
});
});
</script>

5. Kemudian Ganti kode <body> dengan kode <body id='top'>

6. letakan kode di bawah ini, di atas kode </body>

<div id='gotop'>
<a href='#top' title='Go to Top'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcLNl-ZggJE5CMyNmW6Z_4e4ZXzhYboTRFBkkBILUDoOMAts6qRxpHqZoIdjMHgPP1_lLLB-EOy1CpVoMDgcJbTrK0R48v1WEXRouOmpvT3wTcnvV0RKxRp1AgPuQXbuMrHAN73e-QZmq0/s768/top.gif' style='right:20px;bottom:20px;position:fixed'/>
</a>
</div>

7. Selesai, dan silahkan menikmati back to top jquery

Cara Membuat Simple CSS3-jQuery Menu Collapsible

Written by RA_Syihan on Saturday, November 20, 2010 | Category: Networking, Trick, Tutorial

Simple Animated Collapsible Menu menggunakan jQuery-1.3.2.js dan CSS3 merupakan perpaduan menarik yang menggabungkan kesederhanaan script yang berbasis kinerja jQuery dan kemampuan penciptaan animasi dari CSS3. Perpaduan di antara keduanya mampu memberikan suguhan menu vertical yang sangat menarik, atraktif dan memberikan kemampuan fungsi secara maksimal. Kemampuan prima menu ini telah terbukti dengan uji coba yang dilakukan di template blogger dengan hasil cukup menakjubkan baik dari animasi yang tercipta ataupun fungsi dasarnya sebagai sebuah wadah menu. JQuery-1.3.2.js dapat anda ganti pula dengan jQuery-1.3.2.min.js atau jQuery-1.4.2.js dan jQuery-1.4.2.min.js.

Bentuk dasar Animated jQuery-CSS3 Vertical Colapsing Menu berbentuk sederhana dengan kode dasar seperti di bawah ini :

<div>
<ul>
    <li><a href="javascript:;">Menu-1</a>
       <ul>
          <li><a href="">Isi Menu-1</a></li>
       </ul>
    </li>
    <li><a href="javascript:;">Menu-2</a>
       <ul>
          <li><a href="">Isi Menu-2</a></li>
       </ul>
    </li> 
    <li><a href="javascript:;">Menu-3</a>
       <ul>
          <li><a href="">Isi Menu-3</a></li>
       </ul>
    </li>
</ul> 
</div>

Untuk menggunakan menu ini, silahkan jQuery dan javascript collapsible menu disimpan di atas kode <head> secara berurutan dengan bentuk seperti di bawah ini :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript">
  Javascript Collapsible Menu
</script>

</head>

Kode CSS diletakkan dan disimpan di atas kode ]]></b:skin> seperti berikut:

"Kode CSS Animated Collapsible Menu"

]]></b:skin>

xHTML simpan melalui penambahan widget. Setelah
nantinya semua kode dan script terpasang dengan benar, maka sampeyan
tinggal menikmati cantiknya si collapsible menu dan mengisinya dengan
menu-menu atau link-link yang diperlukan untuk di wadahi di sini.

```
Kode CSS Collapsible Menu 
```

.boxong {
      background: #1c86fe url(http://i36.tinypic.com/2881kxf/gubhugreyot/images/bgCollaps.jpg) top left repeat;
      padding: 8px 3px 3px; 
      float: left;
      margin: 20px 5px 0;
      border: 2px solid #666;
      border-radius: 12px;
      -moz-border-radius: 12px;
      -webkit-border-radius: 12px;
      box-shadow: 1px 4px 15px #000;
      -moz-box-shadow: 1px 4px 15px #000;
      -webkit-box-shadow: 1px 4px 15px #000;
      }
.boxong span {
      font: 16px Droid Serif; 
      font-weight: bold; 
      color: #FFFF99; 
      padding: 5px;
      text-shadow: 1px 4px 2px #000; 
      } .bokongku {  
      font-family: Arial;
      font-size: 11px;
      }
ul#GRcollaps { 
      background: #996600;
      }
ul#GRcollaps, ul#GRcollaps ul {
      list-style-type:none;
      margin: 0;
      padding: 0;
      width: 200px;  
      }
ul#GRcollaps a {
      font: 12px Helvetica;
      display: block;
      text-decoration: none; 
      }
ul#GRcollaps li {
      margin-top: 1px;
      }
ul#GRcollaps li a {
      background: #333; 
      border: 2px solid #6e3502;
      color: #fff; 
      padding: 0.5em;
      -o-transition: all 1s ease-in-out;
      -moz-transition: all 1s ease-in-out;
      -webkit-transition: all 1s ease-in-out;   
      }
ul#GRcollaps li a:hover { 
      border-color: #fff; 
      border-radius: 8px; 
      -moz-border-radius: 8px; 
      -webkitborder-radius: 8px;
      background: #000;
      }
ul#GRcollaps li ul li a { 
      background: #ccc; 
      padding: 0.2em 0.5em;
      color: #000;
      padding-left: 20px;
      -o-transition: all 1s ease-out;
      -moz-transition: all 1s ease-out;
      -webkit-transition: all 1s ease-out;
      border-left: 5px #777 solid; 
      border-right: 3px #ccc solid;
      border-top: 3px #ccc solid; 
      border-bottom: 3px #ccc solid; 
      opacity: 0.8;
      }
ul#GRcollaps li ul li a:hover {
      background: #666;
      border-left: 15px #000 solid; 
      border-right: 3px #000 solid;
      border-top: 3px #000 solid; 
      border-bottom: 3px #000 solid; 
      padding-left: 15px;
      opacity:  1.0;
      color: #fff;
      text-shadow: 1px 1px 1px #000;
      }

```
Javascript Collapsible Menu
```

<script type="text/javascript">
function initMenu() {
$('#GRcollaps ul').hide();
$('#GRcollaps li a').click(
function() {
$(this).next().slideToggle('slow');});}
$(document).ready(function() {initMenu();});
</script>

xHTML Collapsible Menu

<div class="boxong"><span>Daftar Menu</span>
<div class="bokongku">
<ul id="GRcollaps">
    <li>
    <a href="javascript:;">Nasi Goreng</a>
        <ul>
            <li><a href="link">isi menu</a></li>
            <li><a href="link">isi menu</a></li>
            <li><a href="link">isi menu</a></li>
        
 </ul>
    </li>

    <li>
    <a href="javascript:;">Minuman</a>
        <ul>
            <li><a href="link">isi menu</a></li>
            <li><a href="link">isi menu</a></li>
            <li><a href="link">isi menu</a></li>
            <li><a href="link">isi menu</a></li>
            <li><a href="link">isi menu</a></li>
            <li><a href="link">isi menu</a></li> 
        </ul>
    </li>
</ul> </div>
</div

Langkah Pengerjaan

Login to BloGGeR
KLIK Design (Rancangan).
KLIK Edit HTML.
Cari kode <head>, kemudian simpan jQuery-1.3.2.min.js dan javascript Collapsible Menu di atasnya.
Cari kode ]]></b:skin> , kemudian letakkan kode CSS Collapsible Menu di atasnya.
KLIK SAVE/Simpan Template.
Lanjutkan dengan menyimpan xHTML melalui penambahan widget.
Setelah login dan sampai pada Page Elements (Elemen Laman), KLIK Add Gadget (Tambah Gadget) yang berada di sidebar atau yang lain (bebas), kemudian lanjutkan dengan copy-paste xHTML untk disimpan di box penambahan widget, setelah sampeyan KLIK HTML/Javascript.

KLIK

Ganti setiap link dan nama menu dengan milik sampeyan sendiri.
Lebar box collapsible dapat diatur dengan merubah lebar (width) pada syntax ul#GRcollaps, ul#GRcollaps ul {width: 200px;}.

.boxong {margin: 20px 5px 0;}

Kode CSS dapat juga disimpan di widget bersamaan dengan xHTML dengan menambahkan kode seperti di bawah ini.

<style="text/css">

Letakkan kode CSS di sini !

</stye>

Letakkan xHTML di sini!

Cara Membuat Menu Dropdown

Written by RA_Syihan on Saturday, November 20, 2010 | Category: Networking, Trick, Tutorial

Apa sih dropdown menu itu?
Dropdown menu yang seperti ini itu lho :

Nha udah tahu kan? Dengan dropdown menu kita bisa mnghemat space/ruang di blog kita, karena dengan ukuran yang kecil seperti itu bisa menyimpan link dan text yang banyak. Itu bisa diisi dengan arsip, blogroll dll.
Gimana? Mau mencobanya?
Gini nih caranya :

Login ke blogger, trus masuk ke menu "Page Element" trus pilih Add page elements --> HTML/JavaScript. Kemudian masukkan script berikut ini di kocat "Content"

<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Arsip Blog</option>
<option value="Links 1">Text 1</option>
<option value="Links 2">Text 2</option>
</select>

Text yang berwarna merah adalah link. ganti text2 tersebut dengan link2 kamu.
Text yang berwarna biru adalah tulisan yang ditampilkan. Itu juga harus km ganti.

Contohnya seperti ini :

<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Arsip Blog</option>
<option value="http://www.unozoneu.co.cc/2010/11/nightmare-cover-album-avenged-sevenfold.html"> Avenged Sevenfold </option>
<option value="http://www.unozoneu.co.cc/2010/11/download-mp3-guns-n-roses.html"> Guns N' Roses </option>
</select>

maka hasilnya akan seperti ini :

untuk menambahkan menu lagi, tambahkan kode seperti ini :

sebelum kode </select>

Link dalam dropdown menu di atas jika di klik akan membuka link di halaman yang sama. Ini cocok untuk Arsip dan link-link yang masih berhubungan dengan blog tsb.

Ada satu tipe lagi yang jika diklik linknya maka akan membuka window baru tanpa menutup blog kamu. Yang ini cocok untu Blogroll atau Friend link.
Cara mambuatnya seperti diatas tapi ganti kode berikut

ganti dengan kode ini :

hasilnya akan seperti ini :

Gimana? mudah kan?

Cara Membuat Tab View Menu di Sidebar

Written by RA_Syihan on Friday, November 19, 2010 | Category: Networking, Trick, Tutorial

Untuk menghemat tempat, tab view menu sangat efisien dengan ukuran yang relatif kecil tapi bisa memuat banyak space. Hal ini pernah ditanyakan oleh sobat blogger pada kolom komentar beberapa waktu yang lalu tentang bagaimana cara membuat menu di sidebar seperti pada contoh gambar disamping? Mungkin yang dimaksud adalah Cara Membuat Tab View Menu di Sidebar Blogger.

Membuat menu dengan tab view memerlukan kode HTML yang lumayan panjang dan agak ribet, jadi sebaiknya simak baik–baik tutorial ini dan yang paling penting jangan lupa untuk backup template sobat terlebih dahulu.

Jika setelah jadi nanti lebar atau tinggi menu tidak sesuai, silahkan sobat sesuaikan sendiri dengan isi dari menu yang sobat gunakan. Baiklah sekarang silahkan ikuti langkah-langkahnya sebagai berikut:

Login ke Blogger => klik Rancangan/Design => klik Edit HTML, Download Template Lengkap dan kasih tanda centang pada kotak bertuliskan Expand Template Widget
Gunakan tombol Find (Ctrl + F) untuk mencari kode </head>, kemudian letakkan kode javascript di bawah ini sebelum atau di atas kode </head>:

<script type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i   = 0;
do
{
    if (Tab.tagName == "A")
    {
      i++;
      Tab.href      = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
      Tab.className = (i == id) ? "Active" : "";
      Tab.blur();
    }
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i    = 0;
do
{
    if (Page.className == 'Page')
    {
      i++;
      if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
      Page.style.overflow = "auto";
      Page.style.display = (i == id) ? 'block' : 'none';
    }
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
//]]>
</script>
Setelah itu letakkan kode di bawah ini sebelum atau di atas kode ]]></b:skin>:

div.TabView div.Tabs
{
height: 30px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 98px; /*Lebar Menu Utama Atas*/
text-align: center;
height: 30px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #BDBDBD; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight: bold;
color: #000; /* Warna Font Menu Utama Atas */
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #E6E6E6; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #BDBDBD; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #E6E6E6; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
Kemudian Simpan Template.
Langkah selanjutnya, silahkan Anda klik Rancangan/Design => klik Add Gadget/Tambah Gadget => pilih yang HTML/Javascript
Berilah judul pada kolom HTML/Javascript dan masukan kode di bawah ini ke dalam content HTML/Javascript:

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 300px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 300px; height: 300px;">
<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>
<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>
<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
Kemudian Simpan.

Keterangan:

Untuk kode yang berwarna merah adalah lebar dan tinggi menu, silahkan sobat sesuaikan dengan isi;
Kode yang berwarna biru silahkan sobat isi dengan judul - judul dari menu;
Dan yang berwarna ungu, adalah isi dari menu. Anda bisa menambahkan link, gambar, banner, dll.

Demikianlah tutorial tentang Cara Membuat Tab View Menu di Sidebar Blogger ini, semoga bermanfaat.

Membuat Horizontal Menu Keren

Written by RA_Syihan on Wednesday, November 17, 2010 | Category: Networking, Programming, Trick, Tutorial

Horizontal Sliding Menu merupakan sebuah menu horizontal yang terbangun dari penggabungan kinerja CSS dan javascript dengan muatan KODE untuk sebuah menu bisa dikatakan sangat kecil sehingga menu yang sangat menarik ini ditanggung tidak akan membebani loading blog. Penekanan akan loading blog menjadi sangat perlu karena akan menjadi sangat fatal pengaruhnya apabila blog menggunakan terlalu banyak KODE dengan muatan 'nggedabyah', maka semakin lama dengan intensifnya posting ditanggung beban yang harus ditanggung saat loading menjadi semakin bertambah besar yang menjadikan loading menjadi sangat lambat. Loading yang sangat lambat tentunya akan sangat berpengaruh terhadap intensitas pembaca blog untuk mampir menikmati sajian yang dengan susah payah sudah kita postingkan. Anda tinggal menyimpan KODE CSS dan javascript di bagian head dan merubah KODE HTML untuk menu sesuai kebutuhan posting blog kemudian menyimpannya di bagian body atau bisa dilakukan dengan menyimpannya di Edit HTML -> Elemen Laman ->Tambah Gadget ->HTML/Javascript. Mungkin anda tertarik untuk melihatnya terlebih dahulu sebelum menggunakan Horizontal Sliding Menu ini ? Silahkan KLIK DEMO untuk melihatnya!

D E M O

Letakan Kode CSS/Javascript diantara <head> dan </head>

KODE CSS

<style type="text/css"> 
* {
       margin:0; 
       padding:0;
       }
.menu {
       position:relative; 
       background:url(http://i50.tinypic.com/fwovf6.gif); 
       height:32px; 
       width:995px;
       }
.menu ul {
       list-style:none; 
       z-index:10; 
       position:absolute; 
       z-index:100; 
       padding:9px 5px;
       border-bottom:2px solid #fff;
       border-top:2px solid #fff;
       border-left:2px solid #fff;
       border-right:2px solid #fff; 
       }
.menu li {
       float:left;
       font-size:10px;
       font-family: verdana;
       font-weight: bold;
       text-decoration:none;
       }
.menu a, .menu a:active, .menu a:visited {
       text-decoration:none; 
       color:#CCFF00; 
       padding:8px;
       }
.menu a:hover {
       color: #FF0000;
       } 
#slide {
       position:absolute; 
       top:4px; 
       height:28px; 
       background: #0000FF; 
       z-index:10;
       }
</style>

 Javascript

<script type="text/javascript">
/* boggerstuars.blogspot.com - gubhugreyot.blogspot.com */
var menuSlider=function(){
var m,e,g,s,q,i; e=[]; q=8; i=8;
return{
init:function(j,k){
m=document.getElementById(j); e=m.getElementsByTagName('li');
var i,l,w,p; i=0; l=e.length;
for(i;i<l;i++){
var c,v; c=e[i]; v=c.value; if(v==1){s=c; w=c.offsetWidth; p=c.offsetLeft}
c.onmouseover=function(){menuSlider.mo(this)}; c.onmouseout=function(){menuSlider.mo(s)};
}
g=document.getElementById(k); g.style.width=w+'px'; g.style.left=p+'px';
},
mo:function(d){
clearInterval(m.tm);
var el,ew; el=parseInt(d.offsetLeft); ew=parseInt(d.offsetWidth);
m.tm=setInterval(function(){menuSlider.mv(el,ew)},i);
},
mv:function(el,ew){
var l,w; l=parseInt(g.offsetLeft); w=parseInt(g.offsetWidth);
if(l!=el||w!=ew){
if(l!=el){var ld,lr,li; ld=(l>el)?-1:1; lr=Math.abs(el-l); li=(lr<q)?ld*lr:ld*q; g.style.left=(l+li)+'px'}
if(w!=ew){var wd,wr,wi; wd=(w>ew)?-1:1; wr=Math.abs(ew-w); wi=(wr<q)?wd*wr:wd*q;
g.style.width=(w+wi)+'px'}
}else{clearInterval(m.tm)}
}};}();
</script>

Letakan Kode berikut diantara tag <body> dan </body>

Contoh HTML Menu:

<body onload="menuSlider.init('menu','slide')">
<center>
<div class="menu">
 <ul id="menu">
  <li value="1"><a href="#">| Home |</a></li>
  <li><a href="#">| CSS Tutorial |</a></li>
  <li><a href="#">| Javascript |</a></li>
  <li><a href="#">| Image Gallery |</a></li>
  <li><a href="#">| Horizontal Menu |</a></li>
  <li><a href="#">| Vertical Menu |</a></li>
  <li><a href="#">| JQuery |</a></li>
  <li><a href="#">| Template |</a></li>
  <li><a href="#">| Floating Menu |</a></li>
  <li><a href="#">| Animation gif |</a></li> 
 </ul>
<div id="slide"><!-- --></div>
</div>
</center>

Catatan :

Jangan lupa untuk menyelipkan onload="menuSlider.init('menu','slide')" di tag body
Ganti Nama menu seperti Home, Javascript dengan Menu yang kamu butuhkan
Sesuaikan lebar menu dengan panjang/lebar menu yang dibutuhkan dengan merubah nilai width: 995px (pada KODE CSS di bagian ".menu")
Supaya Template lebih ringkas, sebaiknya upload KODE CSS dan Javascript di file hosting dan gunakan KODE seperti dibawah ini di bagian head sebagai pengganti CSS dan javascript.

- <link href="URL.css" rel="stylesheet" type="text/css" />
- <script type="text/javascript" src="URL_javascript.js"></script>

Membuat Efek Blur dengan Opacity

Written by RA_Syihan on Wednesday, November 17, 2010 | Category: Networking, Trick, Tutorial

Nilai opacity sebenarnya merupakan nilai yang menunjukkan tingkat keburaman sebuah gambar. Setiap browser menggunakan standar nilai serta bentuk KODE yang berbeda. Nilai keburaman untuk IE menggunakan nilai diantara 0 s/d 100, sedang untuk Mozilla menggunakan standar nilai 0 s/d 1.0. Apabila nilai terendah digunakan (0=nol), maka gambar akan ditampilkan dalam bentuk transparan. Jadi semakin kecil nilai opacity, maka gambar menjadi semakin buram hingga mencapai bentuk gambar transparan. Dalam penggunaannya, opacity bisa ditempatkan di bagian body atau head bergantung kepada tingkat kebutuhan pengguna. Penempatan yang bersifat permanen dilakukan pada bagian head, sedang penggunaan pada bagian body bersifat temporer. Sifat opacity yang mampu menciptakan banyak fungsi membuatnya banyak digunakan untuk menciptakan effect-effect yang atraktif dan dinamis sehingga tampilan blog menjadi semakin variatif dan menarik.

KODE-KODE di bawah ini merupakan contoh pemanfaatan opacity untuk menciptakan effect blur pada gambar :

1. Penggunaan opacity di bagian head. KODE ini bisa ditempatkan di atas ]]></b:skin>

KODE CSS

<style type="text/css">

.blur img {filter:alpha(opacity=20); -moz-opacity:0.2; opacity:0.2;border:0;}

.blur:hover img {filter:alpha(opacity=100); -moz-opacity:1.0; opacity:1.0; border:0;}

</style>

KODE untuk menampilkan effect opacity saat posting gambar/photo :

<a href="http://gubhugreyot.blogspot.com" class="blur"><img src="http://www.fond-ecran.net/icones/halleberry_004.jpg" border="0" alt="penelopecruz"/></a>

<a href="http://gubhugreyot.blogspot.com" class="blur"><img src="http://www.fond-ecran.net/icones/drewbarrymore_008.jpg " border="0" alt="penelopecruz"/></a>

Catatan :

KODE berwarna hijau merupakan URL gambar yang akan di terbitkan saat posting.

2. Penggunaan opacity di bagian body (di ruang posting) yang bersifat temporer:

<a href="http://gubhugreyot.blogspot.com"><img src="http://www.fond-ecran.net/icones/drewbarrymore_008.jpg" alt="pics" style="filter:alpha(opacity=20); -moz-opacity:0.2; opacity:0.2;border:2;"></a>

Catatan :

Ganti KODE yang berwarna kuning dan hijau dengan yang ingin dipostingkan.

Membuat Elemen Hanya Muncul Pada Posting

Written by RA_Syihan on Wednesday, November 17, 2010 | Category: Networking, Programming, Trick, Tutorial

membuat widget yang hanya muncul saat postingan penuh

Buat judul asal aja ah,,,! tapi yang saya maksud adalah elemen yang hanya muncul saat dalam postingan saja,sedangkan waktu dalam homepage tidak akan terlihat.
lihat perbedaan antara homepage saya dengan postingan yang sedang anda baca ini, dan anda akan melihat iklan(diatas dan di bawah posting), dan pada homepage iklan itu tidak ada bukan? mau tahu cara membuatnya, sangat mudah ternyata. caranya sbb:

1. Pertama-tama login ke Blogger, selanjutnya pilih menu Tata Letak > Edit HTML.

2. Backup dulu templatenya.

3. Centang checkbox Expand Template Widget.(jngn lp download dl demi keamanan)

4. Cari kode dibawah ini:

]]></b:skin>

5. Nah, lalu ketikkan kode berikut ini diatas kode tersebut:

#postonly{
display:none;
border:1px solid #000000;
padding:5px;
margin-top:10px;}

6. Cari kode berikut ini:

</head>

7. Lalu taruh kode berikut ini diatasnya

<b:if cond='data:blog.pageType == "item"'>
<style>
#postonly{display:block; border:1px solid #000000; padding:5px; margin-top:10px;}
</style>
</b:if>

8. Kalau sudah, cari kode berikut ini

<p><data:post.body/></p>

9. Lalu, ketikkan kode berikut dibawah kode diatas.

<div id='postonly'>
Ketikkan kode widget/HTML yang diinginkan disini
</div>

cuma begitu saja, selamat mencoba aja!

Membuat Daftar Isi dan Accordion Pada Blog

Written by RA_Syihan on Tuesday, November 16, 2010 | Category: Networking, Programming, Trick, Tutorial

Biasanya kami memiliki begitu banyak posting di blog kita dan jika kita menggunakan TOC itu akan sangat panjang. Jika kita memiliki TOC sangat panjang, itu membuat pengunjung sulit untuk membaca posting kami. Untuk membuatnya mudah dibaca saya membuat modifikasi dari script sebelumnya Tabel Isi untuk gaya Blogger baru dan saya menggunakan Accordion.Fitur dari script ini:

   1. Efek Accordion
   2. Menampilkan dan menyembunyikan efek
   3. CSS 3
   4. Otomatis tambahkan jquery
   5. Warna yang berbeda untuk konten
   6. Gaya yang berbeda untuk membuka dan menutup
   7. Auto Urutkan judul
   8. Tambahkan Baru! selama 10 entry terbaru
Cara menggunakan sangat mudah. Buat Static Page.Masukkan script dalam mode Html

<link href="http://abu-farhan.com/script/acctoc/acc-toc.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"></script>
<script src="http://www.oblo.web.id/feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>

<script type="text/javascript">
var accToc=true;
</script>
<script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript"></script>

ganti kata yang di tandai hijau dengan blogmu

lihat DEMO disini

gambar Berikut adalah cara membuat halaman di blogger

sumber

Cara Membuat Gambar Marquee(Gambar Berjalan)

Written by RA_Syihan on Tuesday, November 16, 2010 | Category: Networking, Programming, Trick, Tutorial

Gambar yang berjalan sama halnya dengan teks berjalan (marquee) bedanya hanya antara gambar dengan teks, nah sekarang kita langsung aja ke TKP.....

Nah....buat yang pengen bikin gambar bergerak seperti diatas, ikuti langkah - langkahnya sebagai berikut :

Seperti biasa login di blogger, lalu masuk ke layout kemudian page element.

Klik add new page element --> HTML/JavaScript. Untuk letaknya terserah anda, mau diletakkan di sidebar, footer, atau dimana saja juga bisa.

Copy Paste kode dibawah ini :

<marquee  onmouseout="this.start()" direction="up"  align="center" scrollamount="2" onmouseover="this.stop()" width="100%"  height="100"><img  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCax2ZZNzJ0Rp6fp8uUR9uB6CzWoZRvFFZi3CWsSWl1ORSxCXGJw5xQKyMVomXv29DxdkSPS2H78zUrLuLkexHzLibxi4CE03n5lfZNYuTGdVsEOptLEsnhW1n-JkgSu7tNUrS174erDgh/s400/Firefox.jpg"  alt=""/>

<img  src="http://static.technorati.com/pix/fave/btn-fave2.png"  alt="" />

</marquee>

Text yg berwarna merah adalah kode HTML untuk gambar. Untuk mengganti gambarnya, silahkan ganti text yg berwarna merah tebal dengan url gambar anda.
Text yg berwarna hijau tebal, adalah arah bergerak gambar. Untuk mengganti arahnya, silahkan ganti kata "up" dengan "down", "left" atau "right".

Save dan Selesai..

::::TIPS::::

Gambar bergerak tersebut bisa juga disimpan di postingan. Caranya, ketika memposting klik edit html lalu masukan kode seperti diatas.

Untuk menampilkan gambar beserta link-nya, silahkan masukan script di bawah ini.

Membuat Menu Navigasi Dengan CSS3 Menu

Written by RA_Syihan on Tuesday, November 16, 2010 | Category: Informasi, Networking, Programming, Teknologi, Tips, Trick, Tutorial

Sekarang ini untuk membuat menu navigasi yang keren kita tidak lagi membutuhkan waktu yang lama dan kode-kode yang lumayan panjang. Cukup dengan aplikasi "gratis" CSS3 Menu kita sudah dapat membuat menu navigasi yang cantik dan enak dilihat.

CSS3 Menu merupakan sebuah aplikasi untuk membuat sebuah menu navigasi yang keren dengan menggunakan CSS dan tanpa Javascript. Menu ini dapat berjalan dengan baik pada Firefox, Opera, Chrome dan Safari. Fungsi dropdown-nya juga dapat berjalan pada browser yang tidak kompatibel dengan CSS3 seperti IE7+. Untuk keterangan lebih jelasnya bisa dilihat di website resminya http://css3menu.com/ .

Fitur-fitur aplikasi:

Tidak memerlukan JavaScript
Jadi dapat berjalan pada browser dengan Javascript yang dinonaktifkan atau browser yang tanpa dukungan Javascript sama sekali.
Dukungan properti-properti yang keren
Properti-properti yang disediakan antara lain: Multi-level menu dropdown dengan sudut yang bulat, properti kotak-bayangan dan teks-bayangan. Terdapat pula properti lainnya seperti opacity, backround dan warna font, gradien linier dan gradien radial CSS3.
Multi kolom submenu
Tinggal menentukan jumlah baris dan kolom yang ingin dibuat.
Ukuran kecil
Tidak menggunakan file-file tambahan. Sehingga tidak memakan waktu lama saat load halaman.
Dukungan browser modern
Didukung semua browser modern (kecuali IE6).
Interface GUI
Mempunyai user interface yang memungkinkan kita untuk membuat menu tanpa perlu menulis coding yang kompleks, cukup dengan beberpa klik saja
Dsb.

Tentu saja yang namanya aplikasi yang gratisan pasti mempunyai keterbatasan. Jadi untuk menggunakan fitur-fitur dari CSS3 Menu yang lebih lengkap, kita diharuskan mengeluarkan biaya untuk membelinya. Namun untuk ukuran aplikasi "gratisan" CSS3 menu ini sudah cukup mumpuni untuk sekedar membuat menu navigasi yang "mewah" dan "keren" :)

Efek Gradient Pada Box

Written by RA_Syihan on Tuesday, November 16, 2010 | Category: Networking, Trick, Tutorial

Kalau boleh jujur, sebenarnya akhir-akhir ini aku selalu posting tentang CSS3 karena sedang gak punya ide untuk posting yang lain. Uhm... Jadi untuk sementara ini cuma bisa post tentang CSS3 sambil mendalami hal apa saja yang bisa dilakukan dengan CSS3.
Sama seperti post kategori sebelumnya, gunakan browser versi terbaru yang support CSS3 (untuk trik kali ini gunakan Firefox atau Safari) dan gak disarankan memakai Internet Explorer, supaya mendapatkan hasil terbaik.

Kode penyusun Gradient kurang lebih

background: -moz-linear-gradient(top, #48F908, #FFCCCC);

kalu tidak yang ini:

background: -webkit-gradient(linear, left top, left bottom, from(#48F908), to(#FFCCCC);

Kode berwarna hijau adalah warna background yang pertama, sedangkan yang berwarna merah adalah kode warna yang kedua.

ini dia contoh efek gradientnya
Keren kan????

Jadi gak perlu pake gambar buat bikin efek gradient kan?
Selamat berkreasi kawan!

Mengatur Jarak Judul Posting dari Header

Written by RA_Syihan on Monday, November 15, 2010 | Category: Networking, Trick, Tutorial

Apakah anda kurang puas dengan posisi judul posting blog anda? Misalnya terlalu dekat atau terlalu jauh dari header. Gambar di bawah ini adalah contoh dari judul posting yang terlalu mepet ke header (judul postingnya: Koor Pentagona+)

Mengatur Jarak Judul Posting dari Header

Nah, jika anda ingin mengaturnya, maka bisa dilakukan dengan cara berikut:

1. Masuklah ke halaman Dasbor blog anda lalu klik Rancangan.

2. Kemudian klik pada Edit HTML.

3. Untuk berjaga-jaga jika terjadi kesalahan sebaiknya backup dulu template anda dengan mengklik Download Template Lengkap.

4. Kemudian carilah kode: #main-wrapper

5. Agar lebih mudah mencarinya tekan (Ctrl + F) pada keyboard lalu tekan Enter. Maka akan muncul kotak Find. Ketiklah kode yang akan dicari pada kotak tersebut lalu tekan Enter, maka secara otomatis akan muncul kode yang dicari dalam keadaan terseleksi dengan warna hijau.

6. Kemudian tambahkanlah kode ini di bawahnya (posisi barisnya tidak menjadi masalah): padding-top: 20px; Jika diterjemahkan arti kode ini adalah: jarak judul posting ke batas atas (header) adalah 30 pixels. Gantilah angkanya sesuai keinginan anda. Setelah kode tersebut ditambahkan maka penulisannya akan menjadi seperti ini:

#main-wrapper {
background:#ffffff;
float:left;
margin-left:0px;

padding-top:20px;

padding-left:30px;
padding-right:30px;

7. Jika sudah kliklah SIMPAN TEMPLATE dan tunggu hingga proses selesai.