Saturday 16 November 2013

How To Fix "Google-Code-Subversion-Repository" Password Request? Solution!

http://www.bloggingehow.com/2013/02/how-to-fix-google-code-subversion.html
Sumber :

DAFTAR ISI

Thursday 5 September 2013

Auto Read More Posting Blog

Auto readmore tidak menggunakan javascript untuk Blogger

Blogger readmore tetapi memiliki kerajinan cantik, dengan banyak posting blog telah dibuat, readmore untuk setiap posting sangat keras dan sering datang dengan auto readmore blogger javascript. Auto readmore javascript untuk menampilkan hanya sebagian artikel melalui fungsi document.write , isi artikel masih download peramban. Kelemahan dari tidak ramah dengan mesin pencari dan alat terjemahan online, selain artikel panjang tanpa menambahkan readmore pengguna Blogger akan mendapatkan error gratis paging pagination oleh Blogger. Trik Auto Anda readmore memperkenalkan seluruhnya berikut baru, tapi tidak menggunakan javascript untuk menggunakan pernyataan yang disediakan oleh blogger. Ini akan meningkatkan kecepatan Anda ketika browsing indeks halaman blog-gaya, arsip jadi hanya men-download kutipan dari isi artikel.

Langkah-langkahnya adalah:

Langkah 1: Tambahkan kelas untuk menampilkan post-thumbnail. Ada 2 jenis gambar yang ditampilkan di sebelah kiri atau kanan.

1. Menampilkan gambar di sebelah kiri:

Tambahkan kode berikut di dalam kartu ]]></b:skin> :

  . Pasca thumbnail {float: left; margin-right: 20px}

2. Menampilkan gambar di sebelah kanan:

Tambahkan kode berikut di dalam kartu ]]></b:skin> :

  . Pasca thumbnail {float: right; margin-left: 20px}

Langkah 2: Kode Tambah auto readmore. Ada 4 jenis untuk memilih readmore otomatis.

1. Auto readmore dengan foto:

Ganti <data:post.body/> dengan kode berikut:

  <b:if cond='data:blog.pageType != "item"'>
  <b:if cond='data:blog.pageType != "static_page"'>
   <div>
    <b:if cond='data:post.thumbnailUrl'>
     <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
    </ B: if>
    <data:post.snippet/>
   </ Div>
   <div class='jump-link'>
    <a expr:href='data:post.url' expr:title='data:post.title'> <data:post.jumpText/> </ a>
   </ Div>
  <b:else/>
   <data:post.body/>
  </ B: if>
 <b:else/>
  <data:post.body/>
 </ B: if>

2. Auto readmore dengan gambar dan menampilkan gambar default untuk posting ada gambar:

Ganti <data:post.body/> dengan kode berikut:

  <b:if cond='data:blog.pageType != "item"'>
  <b:if cond='data:blog.pageType != "static_page"'>
   <div>
    <b:if cond='data:post.thumbnailUrl'>
     <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
    <b:else/>
     <Img class = 'post-thumbnail' alt = 'tidak ada gambar' src = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRK-EIrAxa_kFMwInJsscssRG4Z4wg3YRqZ3_iVU33LFD1Njq5inNlqp9mXW9iT9KSCErQ0Xw-omzXbWT_YuGo5YSuEMSMbzyjNBV7WD6HLC_3ygIiHE1Y11EpH6NkZHU-OlA63roeq5fu/' lebar height = '72px ' '72px = '/>
    </ B: if>
    <data:post.snippet/>
   </ Div>
   <div class='jump-link'>
    <a expr:href='data:post.url' expr:title='data:post.title'> <data:post.jumpText/> </ a>
   </ Div>
  <b:else/>
   <data:post.body/>
  </ B: if>
 <b:else/>
  <data:post.body/>
 </ B: if>

3. Auto readmore dengan gambar. Tidak readmore dengan artikel terbaru:

Ganti <data:post.body/> dengan kode berikut:

  <b:if cond='data:blog.pageType != "item"'>
  <b:if cond='data:blog.pageType != "static_page"'>
   <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <b:if cond='data:post.isFirstPost == "true"'>
     <data:post.body/>
      <b:if cond='data:post.hasJumpLink'>
       <div class='jump-link'>
        <a expr:href='data:post.url + "#more"' expr:title='data:post.title'> <data:post.jumpText/> </ a>  
       </ Div>
      </ B: if>
    <b:else/>
     <div>
      <b:if cond='data:post.thumbnailUrl'>
       <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
      </ B: if>
      <data:post.snippet/>
     </ Div>
     <div class='jump-link'>
      <a expr:href='data:post.url' expr:title='data:post.title'> <data:post.jumpText/> </ a>
     </ Div>
    </ B: if>
   <b:else/>
    <div>
     <b:if cond='data:post.thumbnailUrl'>
      <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
     </ B: if>
     <data:post.snippet/>
    </ Div>
    <div class='jump-link'>
     <a expr:href='data:post.url' expr:title='data:post.title'> <data:post.jumpText/> </ a>
    </ Div>
   </ B: if>
  <b:else/>
   <data:post.body/>
  </ B: if>
 <b:else/>
  <data:post.body/>
 </ B: if>

4. Auto readmore dengan gambar dan menampilkan gambar default untuk posting ada gambar. Tidak readmore dengan artikel terbaru:

Ganti <data:post.body/> dengan kode berikut:

  <b:if cond='data:blog.pageType != "item"'>
  <b:if cond='data:blog.pageType != "static_page"'>
   <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <b:if cond='data:post.isFirstPost == "true"'>
     <data:post.body/>
      <b:if cond='data:post.hasJumpLink'>
       <div class='jump-link'>
        <a expr:href='data:post.url + "#more"' expr:title='data:post.title'> <data:post.jumpText/> </ a>  
       </ Div>
      </ B: if>
    <b:else/>
     <div>
      <b:if cond='data:post.thumbnailUrl'>
       <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
      <b:else/>
       <Img class = 'post-thumbnail' alt = 'tidak ada gambar' src = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRK-EIrAxa_kFMwInJsscssRG4Z4wg3YRqZ3_iVU33LFD1Njq5inNlqp9mXW9iT9KSCErQ0Xw-omzXbWT_YuGo5YSuEMSMbzyjNBV7WD6HLC_3ygIiHE1Y11EpH6NkZHU-OlA63roeq5fu/' lebar height = '72px ' '72px = '/>
      </ B: if>
      <data:post.snippet/>
     </ Div>
     <div class='jump-link'>
      <a expr:href='data:post.url' expr:title='data:post.title'> <data:post.jumpText/> </ a>
     </ Div>
    </ B: if>
   <b:else/>
    <div>
     <b:if cond='data:post.thumbnailUrl'>
      <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
     <b:else/>
      <Img class = 'post-thumbnail' alt = 'tidak ada gambar' src = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRK-EIrAxa_kFMwInJsscssRG4Z4wg3YRqZ3_iVU33LFD1Njq5inNlqp9mXW9iT9KSCErQ0Xw-omzXbWT_YuGo5YSuEMSMbzyjNBV7WD6HLC_3ygIiHE1Y11EpH6NkZHU-OlA63roeq5fu/' lebar height = '72px ' '72px = '/>
     </ B: if>
     <data:post.snippet/>
    </ Div>
    <div class='jump-link'>
     <a expr:href='data:post.url' expr:title='data:post.title'> <data:post.jumpText/> </ a>
    </ Div>
   </ B: if>
  <b:else/>
   <data:post.body/>
  </ B: if>
 <b:else/>
  <data:post.body/>
 </ B: if>

Layar potongan melalui kartu pos <data:post.snippet/> oleh Blogger. Seperti telah disebutkan dalam posting saya sebelumnya hanya kutipan dari Blogger dari 140 karakter (Blogger telah memperbarui jumlah karakter kartu <data:post.snippet/> dalam widget Blog sekarang kurang dari jumlah karakter Kartu <data:post.snippet/> di PopularPosts widget), cukup pendek dan karakter mengganggu memperhatikan karakter ruang yang harus kehilangan beberapa kata menjadi tidak berarti.

Gambar yang diperoleh melalui perintah data:post.thumbnailUrl . Ini adalah jalan pertama pada gambar artikel telah diubah ukurannya Blogger 72x72 piksel dalam ukuran. Memperhatikan bahwa citra artikel harus upload melalui Insert gambar alat Blogger, atau mendapatkan alamat dan gambar dari foto Picasa harus mengatasi s1600 , s800 ... operasi ukuran alat Blogger baru, Sementara gambar baru muncul. Prosedur di atas atribut alt adalah judul artikel untuk gambar, hal ini membantu meningkatkan SEO untuk blog Anda.

Sebelum melakukan prosedur ini, Anda perlu auto readmore hapus auto readmore kode javascript jika Anda menggunakan offline.

Sumber : http://blog.duypham.info/2011/01/auto-readmore-for-blogger-no-javascript.html

DAFTAR ISI

Membuat Image Zoom

Sekarang kita akan belajar cara membuat image zoom. Image zoom biasanya di gunakan pada blog yang berbasis gambar dan lainnya tergantung kreatifitas anda. Sebelumnya, ada baiknya anda lihat contohnya di bawah.

DEMO

Demo 1:

Demo 2:

Demo 3:

Milla Jojovitch

Demo 4:

Angelina Jolie

Sumber :

DAFTAR ISI

Monday 2 September 2013

multi zoom image

Milla Jojovitch

Sunday 1 September 2013

Membuat Image Slider Berdasarkan Kategori Tertentu

Gambar slideshow yang sering kita lihat di bawah header atau sering disebut sebagai image slider banyak sekali menghiasi halaman pada sebuah blog. Sekarang ini banyak sekali template blogger yang bagus dan dihiasi dengan berbagai macam slider yang tujuannya untuk memperindah tampilan. Permasalahan yang timbul sekarang adalah kita terkadang malas atau kurang teliti dalam memasukkan satu persatu keterangan dalam slider tersebut, baik itu URL gambar maupun URL post yang dituju. Seperti pada tutorial saya sebelumnya mengenai cara membuat slider gambar ala Yahoo, disitu anda harus memasukkan URL dan keterangan slider satu persatu.

Kali ini saya akan memberikan satu solusi berupa tutorial membuat image slider berdasarkan kategori tertentu, dimana Anda tidak perlu lagi memasukkan satu persatu keterangan dalam slider, jadi Anda tinggal mengganti dengan kategori atau label yang ingin ditampilkan dalam slider, gambarnya seperti diatas dan demonya seperti slider yang ada disini. Baik langsung saja pada cara pemasangannya :

Langkah Pertama

Login ke blogger dengan akun anda
Kemudian klik Tata Letak > pilih Edit HTML centang expand widget templates
Jangan lupa backup dulu template anda dengan mengklik Download Template Lengkap.
Letakkan kode berikut di atas kode ]]></b:skin>

#featured{margin-bottom:8px ;margin-right:8px;}
.sliderwrapper{position: relative;overflow: hidden;height: 240px}
.sliderwrapper .contentdiv{visibility: hidden;position: absolute;left: 0;top: 0;padding: 0px;height: 100%;}
.pagination{text-align: left;padding:8px 0px}
.pagination a{font-size:11px;color:#fff;padding: 3px 6px;background:#1b75d6}
.pagination a:hover, .pagination a.selected{color:#dedde5;background-color:#535352}
.featuredPost{width:360px;padding:10px 10px 0;background:#191919;filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;color:#dedde5;position:absolute;bottom:0}
.featuredPost a{color:#fff}
.featuredPost a:hover{color:#dedde5}
.featuredPost h2{margin:0;font-size:12px;line-height:1}
.featuredPost span{font-size:10px}
.featuredPost p{font-size:11px}

Langkah Kedua

Masih dalam dalam posisi Edit HTML. Sekarang letakkan kode berikut ini di atas kode </head>

<script>
//<![CDATA[
/* Script from:http://www.alizainsyahab.co.cc/ */
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieAhthyjhInWGVnaDFkj1yl4smXpZekV-8eJ5QLRO-QWKj-NEAcN2ufluUkm_g_uRuuoWqy6Z6e-SQRZNMhF0iYsgVBRXnHULwIaqvp2WgwOwgfapiWbADudDy5ZVrkHzIzcugchhpdTLd/s300/no%252Bimage.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 100;

numposts1 = 5;
label1 = "blog tutorial";

function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}

function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts1;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split("")[0];break}}

if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent    ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["January","February","March","April","May","Juny","July","August","September","October","November","December"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break;
}}

var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<div class="contentdiv"><div class="sliderPostPhoto"><a href="'+posturl+'"><img width="370" height="240" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"></div></div><div class="featuredPost"><h2><a href="'+posturl+'">'+posttitle+'</a></h2><span>'+daystr+'</span><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';
document.write(trtd);
j++;
}}
//]]>
</script>
Perhatikan kode yang saya beri huruf tebal label1 = "misteri"; itu adalah label atau kategori yang akan ditampilkan di slider, disini saya memilih label misteri. Anda nanti tinggal mengganti dengan label yang diinginkan. Perhatikan juga kode img width="370" height="240" itu adalah lebar dan tinggi slider, silahkan sesuaikan dengan template Anda.
Setelah itu, letakkan kode di bawah ini sebelum kode </body> (letakkan diatasnya saja)

<script src='http://alizainsyahab.googlecode.com/files/contentslider.js'/>
<script>
//<![CDATA[
featuredcontentslider.init({
id: "slider1", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
enablefade: [true, 0.5], //[true/false, fadedegree]
autorotate: [true, 6000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
//]]>
</script>
Langkah terakhir, yaitu untuk memanggil agar slider tersebut tampil di halaman depan anda cari kode <div id='main-wrapper'> jika anda ingin slider tampil di atas main-wrapper seperti pada demo, dan letakkan kode berikut di bawahnya :

<b:if cond='data:blog.pageType == "index"'>
<div id='featured'>
<div class='sliderwrapper' id='slider1'>
<script>
document.write("<script src=\"/feeds/posts/default/-/"+label1+"?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script>
</div>
<div class='pagination' id='paginate-slider1'>
</div>
</div>
</b:if>
Langkah terakhir Save/simpan template, membuat slider image berdasarkan kategori tertentu sudah selesai.

Yang perlu diperhatikan disini adalah kode label1 = "misteri" pada langkah kedua point pertama, misteri adalah label yang ditampilkan dalam slider. Anda bisa menggantinya dengan label atau kategori yang diinginkan. Bagi pengguna template Johny Simple Magazine atau Creating Website Modifikasi, bisa langsung dipraktekkan. Sekian tutorial kali ini jika masih ada yang kurang jelas bisa ditanyakan lewat kotak komentar yang ada di bawah. Selamat mencoba dan semoga bermanfaat.

http://www.dynamicdrive.com/dynamicindex17/featuredcontentslider.htm

Sunday 4 August 2013

Foto Efek Sketsa Pensil

1. Buka photoshopnya. Setelah itu carilah gambar yang akan dijadikan sketsa pensil. Namun kali ini, saya akan menampilkan gambar hewan anjing, Lihat gambar pertama di bawah ini:

2. Setelah gambar pertama tertampilkan, langkah selanjutnya yaitu : Arahkan Mouse anda pada "Layer gambar hewan" dalam hal ini Background

kemudian klik kanan dan pilih "Duplicated Layer". Namakan As: "Doggy 1" tanpa tanda petik

3. Masih tetap di Layer "Doggy 1" buat Gambar menjadi Hitam putih dengan mengKlik Ctrl + Shift + U
Lihat Gambar Kedua ( 2 ) di bawah ini :

4. Setelah gambar berubah menjadi hitam putih, langkah selanjutnya yaitu :

Buatlah duplicated Layer dari "Doggy 1", caranya seperti diatas yaitu klik kanan Layer "Doggy 1" lalu pilih duplicate layer, Lalu beri nama As: "Doggy 2"
Nah sekarang kita punya layer bernama Doggy 2 - klik Ctrl + i maka gambar di Doggy 2 akan berubah menjadi gambar film
Previewnya :

5. Setelah Gambar Ketiga ( 3 ) kita dapatkan.
Selanjutnya yaitu MengBLUR Layer "Doggy 2" dengan cara Arahkan mouse Pada Filter > Blur > Gaussian Blur maka akan keluar jendela pop_up Gaussian blurnya,
setelah itu pada “Radius Pixel” berilah nilai Radius sebesar “5.0” intinya semakin Blur semakin baik cuma harus disesuaikan jangan terlalu Over Blur
kemudian Klik Ok.
Dan lihatlah hasil gambar keempat ( 4 ) di bawah ini :

6. Pada gambar keempat ( 4) jika diperhatikan, gambar tersebut tampak Tidak jelas atau juga memudar.
Namun dari gambar tersebutlah yang Menjadikan gambar lebih jelas setelah terjadinya perpindahan warna.
Oleh sebab itu, untuk langkah terakhirnya yaitu : Pada Layer "Doggy 2" Set Blending modenya ke "Color Dodge" lihat gambar di bawah ini :

Keterangan
Pada gambar disamping ini, ubahlah nama “Normal” menjadi “Color Dodge”

Setelah anda mengubah Mode “Normal” menjadi “Color Dodge” maka, gambar secara langsung akan berubah menjadi sketsa warna pensil, lihat hasil gambar penyelesaiannya di bawah ini :

Perubahan menjadi goresan Pencil

:::Sampai disini dulu tutorial kami, semoga tutorial ini. dapat menambah pengetahuan anda semua dan kami tidak bertanggung jawab atas penyalahgunaannya dan Semoga anda mendapatkan segala manfaat dan kebutuhan anda:::
Selamat belajar Photoshop

Semoga Bermanfaat... ^_^

Sumber : http://www.ilmugrafis.com/photoshop_foto1.php?page=merubah-foto-berwarna-menjadi-sketsa-warna-pensil

Tuesday 30 April 2013

Beban

Ia mengangkat segelas air lalu bertanya pada hadirin, "menurut kalian berapa berat segelas air ini?" Kemudian ia melanjutkan, "Sebenarnya berat gelas itu tergantung pada seberapa lama kalian mengangkatnya. Kalau aku mengangkatnya selama satu menit, maka aku akan baik - baik saja. Kalau aku mengangkatnya selama satu jam, maka tangan kananku akan terasa pegal. Tetapi kalau aku mengangkatnya selama satu hari, kalian akan terpaksa harus memanggilkan ambulan untukku. Sesungguhnya beban yang kita angkat sama, tapi semakin lama kita mengangkatnya akan terasa semakin berat.

Apabila kita setiap waktu mengangkat beban kita, kita tidak akan dapat bertahan, karena beban itu semakin lama akan terasa semakin berat."
Ia melanjutkan, "Apa yang harus kita lakukan adalah, letakkan gelas itu, beristirahatlah sejenak sebelum mengangkatnya lagi."
Kita harus meletakkan beban kita dari waktu ke waktu, agar tubuh kita segar kembali dan mampu menanggung beban itu. Bila kau pulang ke rumah setelah bekerja, tinggalkanlah beban kerja, jangan kau bawa ke rumah. Kau dapat mengangkatnya kembali esok, sementara itu istirahat dan santailah dahulu.
Hidup ini harus dijalani hari demi hari, tidak bisa dirangkap sekaligus.
(Author Unknown)

Sunday 28 April 2013

Kaca mata nenek

Dua anak kecil berbicara tentang kacamata. "Bukankah kau benci memakai kacamata?" tanya seorang anak.
"Tidak," jawab anak yang lain. "Asalkan kacamata itu adalah jenis kacamata yang di kenakan oleh nenekku! Ibuku bilang nenek selalu bisa melihat bila seseorang itu sedang lelah, kecil hati, atau sedih. Dia bisa melihat bila seseorang membutuhkan pertolongan, dia juga bisa mengetahui bila kau memiliki persoalan yang hendak kau utarakan. Tapi yang paling baik, kata mama, nenek selalu dapat melihat kebaikan yang ada pada diri setiap orang.

Anak itu melanjutkan, "suatu hari aku bertanya kepada nenek, bagaimana dia bisa melihat semua itu. Dia berkata, mungkin sampai seusia ini ia telah banyak belajar melihat. Tapi aku yakin, itu pasti karena kacamatanya."
(Alangkah baiknya bila setiap orang dari kita dapat melihat orang lain dari kaca mata nenek anak tersebut! )
(Pengarang tak dikenal)

Wednesday 27 February 2013

Tiga Gaya Menu Navigasi Bertingkat dengan Efek Smooth JQuery

Secara umum ada tiga tipe efek JQuery yang paling populer digunakan, yaitu efek Fade, Show dan Slide. Di sini Saya akan memberikan tiga buah efek dasar JQuery tersebut untuk diterapkan ke dalam sebuah menu navigasi dalam satu desain. Kamu tinggal memilih efek mana yang menurutmu paling cocok.
Agar langkahnya tidak berantakan, maka Saya balik urutannya yaitu mulai dari penempatan kerangka objek, pemodelan dan terakhir pemasangan JQuery:

Langkah Pertama: Penempatan Kerangka Objek dan Pemodelan:

Salin kode berikut ini kemudian letakkan di tempat dimana kamu menginginkan menu navigasi ini ditampilkan:

<div class='hompimenu'>

    <ul>

        <li><a href='#'>BERANDA</a></li>

        <li><a href='#'>JURNAL</a>
            <ul>
                <li><a href='#'>Satu</a></li>
                <li><a href='#'>Dua</a></li>
                <li><a href='#'>Tiga</a></li>
                <li><a href='#'>Empat</a></li>
                <li><a href='#'>Lima</a></li>
            </ul>
        </li>

        <li><a href='#'>KOMENTAR</a>
            <ul>
                <li><a href='#'>Satu</a></li>
                <li><a href='#'>Dua</a></li>
                <li><a href='#'>Tiga</a>
                    <ul>
                        <li><a href='#'>Tiga Satu</a></li>
                        <li><a href='#'>Tiga Dua</a></li>
                        <li><a href='#'>Tiga Tiga</a></li>
                        <li><a href='#'>TIga Empat</a></li>
                        <li><a href='#'>Tiga Lima</a></li>
                    </ul>
                </li>
                <li><a href='#'>Empat</a></li>
                <li><a href='#'>Lima</a></li>
            </ul>
        </li>

        <li><a href='#'>KONTAK</a>
            <ul>
                <li><a href='#'>Satu</a></li>
                <li><a href='#'>Dua</a></li>
                <li><a href='#'>Tiga</a></li>
                <li><a href='#'>Empat</a></li>
                <li><a href='#'>Lima</a></li>
            </ul>
        </li>

    </ul>

</div>

Pelajari beberapa alternatif peletakkan menu navigasi di sini »

Setelah itu salin kode CSS ini, kemudian letakkan tepat di atas kode ]]</b:skin> atau </style>:

/**
 * Copyright Juli 2011 :: Taufik Nurrohman
 * (http://hompimpaalaihumgambreng.blogspot.com)
 */

.hompimenu {
  font:normal 12px Cambria,"Times New Roman",Times,serif;
  line-height:normal;
  text-transform:uppercase;
  margin:5px 0px;
  padding:0px 0px;
  color:white;
  text-decoration:none;
}

.hompimenu ul {
  height:34px;
  line-height:34px;
  background-color:#333;
  margin:0px 0px 10px;
  padding:0px 0px;
  border:2px solid #e6e6e6;
  -webkit-box-shadow:0 1px 5px #000;
  -moz-box-shadow:0 1px 5px #000;
  box-shadow:0 1px 5px #000;
}

.hompimenu li {
  list-style:none;
  margin:0px 0px;
  padding:0px 0px;
  color:white;
  float:left;
  display:inline;
  position:relative;
}

.hompimenu li a {
  display:block;
  background-color:#333;
  border-left:1px solid #444;
  border-right:1px solid #222;
  margin:0px 0px;
  padding:0px 15px;
  color:white;
  text-decoration:none;
  font-weight:bold;
  line-height:34px;
  text-shadow:1px 1px 2px #000;
  outline:none;
}

.hompimenu li ul {
  position:absolute;
  z-index:10;
  left:0px;
  top:100%;
  height:auto;
  margin:0px 0px;
  padding:0px 0px;
  width:170px;
  -webkit-box-shadow:0 1px 5px #000;
  -moz-box-shadow:0 1px 5px #000;
  box-shadow:0 1px 5px #000;
  display:none;
}

.hompimenu li ul a {
  border-left:none;
  border-right:none;
  border-top:1px solid #444;
  border-bottom:1px solid #222;
  display:block;
}

.hompimenu li ul li {
  float:none;
  display:block;
  width:auto;
}

.hompimenu li ul ul {
  top:0px;
  left:100%;
}

.hompimenu li a:focus {
  background-color:#666;
  border-left-color:#777;
  border-right-color:#555;
}

.hompimenu ul li a:focus {
  background-color:#666;
  border-top-color:#777;
  border-bottom-color:#555;
}

.hompimenu li a:hover,
.hompimenu ul li a:hover {color:#ccc;}

Nah, terakhir kamu hanya perlu menentukan efek seperti apa yang menurutmu paling cocok. Pilih salah satu:

Efek SlideDown & SlideUp:

Untuk membuat efek SlideDown - SlideUp, salin kode ini kemudian letakkan tepat di atas kode </head>:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
$(function() {
    $('.hompimenu li').hover(function() {
        $(this).children('ul').filter(':not(:animated)').slideDown(400);
    }, function() {
        $(this).children('ul').slideUp(400);
    });
});
</script>

Efek FadeIn & FadeOut:

Untuk membuat efek FadeIn - FadeOut, salin kode ini kemudian letakkan tepat di atas kode </head>:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
<script type="text/javascript">
$(function() {
    $('.hompimenu li').hover(function() {
        $(this).children('ul').filter(':not(:animated)').fadeIn(400);
    }, function() {
        $(this).children('ul').fadeOut(400);
    });
});
</script>
</script>

Efek Show & Hide:

Untuk membuat efek Show - Hide, salin kode ini kemudian letakkan tepat di atas kode </head>:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
<script type="text/javascript">
$(function() {
    $('.hompimenu li').hover(function() {
        $(this).children('ul').filter(':not(:animated)').show(400);
    }, function() {
        $(this).children('ul').hide(400);
    });
});
</script>
</script>

Khusus untuk kode yang Saya beri garis bawah, jika sudah ada tidak perlu ditambahkan.
Sekarang klik Pratinjau. Jika sudah puas dengan hasilnya, simpan templatemu.

CSS3 Properti Resize

Sedikit Banyak saya ingin membahas dasar-dasar css. tag-tag dan masing-masing kegunaannya...
yap..... semoga saya punya banyak waktu untuk berbagi ilmu dengan anda he he :).

kali ini saya akan membahas properti resize dalam css. Untuk contoh lihat Potongan kode di bawah:

<style>
div.kotak
{
width: 100px;
height: 100px;
border: 1px solid red;
}
</style>
<div class="kotak">
Elemen yang anda letakkan di sini akan di tampilkan dalam sebuah blok bergaris pinggir 1px berwarna merah dengan jenis garis solid/padat. lebar kotak 100px yang di wakili oleh kode width: 100px; dan tingginya juga 100px yang di wakili oleh kode height: 100px;. Jika elemen di dalamnya melebihi dari batasan lebar dan tinggi maka elemen tersebut akan di tampilkan melewati batas garis blok.
</div>

kode di atas akan tampil seperti berikut:

Elemen yang anda letakkan di sini akan di tampilkan dalam sebuah blok bergaris pinggir 1px berwarna merah dengan jenis garis solid/padat. lebar kotak 100px yang di wakili oleh kode width: 100px; dan tingginya juga 100px yang di wakili oleh kode height: 100px;. Jika elemen di dalamnya melebihi dari batasan lebar dan tinggi maka elemen tersebut akan di tampilkan melewati batas garis blok.

Anda Sudah lihat hasilnya kan.....
Dalam sebuah website, css berperan untuk menentukan tampilan. Seperti Contoh di atas elemen <div> dengan class id kotak di atur oleh kode css div.kotak. dimana:
lebarnya/width 100px
tingginya/height 100px
memiliki garis tepi/border 1px
dengan jenis garis padat/solid
dan berwarna merah/red

Karena ukuran kotak hanya (100px X 100px) sedangkan elemen di dalamnya membutuhkan tempat yang lebih luas, maka Elemen di dalamnya di tampilkan melewati kotak 100px X 100px tadi. untuk mengatasi masalah tersebut kita tambahkan Properti overflow. jadi kodenya seperti berikut:

<style>
div.kotak
{
width: 100px;
height: 100px;
border: 1px solid red;
overflow: hidden;
}
</style>
<div class="kotak">
Elemen yang anda letakkan di sini akan di tampilkan dalam sebuah blok bergaris pinggir 1px berwarna merah dengan jenis garis solid/padat. lebar kotak 100px yang di wakili oleh kode width: 100px; dan tingginya juga 100px yang di wakili oleh kode height: 100px;. Jika elemen di dalamnya melebihi dari batasan lebar dan tinggi maka elemen tersebut akan di tampilkan melewati batas garis blok.
</div>

Tampilannya seperti berikut:

Properti overflow berfungsi untuk menangani elemen yang melebihi batas yang sudah di tentukan.
adapun hidden bisa kita sebut nilai properti overflow. hidden berarti sembunyikan. Karena itulah elemen yang melebihi batas 100px X 100px di sembunyikan. namun nilai properti overflow bukan hidden saja.
Berikut nilai-nilai Properti lain berikut Fungsi masing-masing:

visible (terlihat) : Elemen yang melebihi garis akan di tampilkan. jadi terlihat seperti conto pertama.
hidden (sembunyikan) : Elemen yang melebihi batas akan di Sembunyikan.
scroll (gulir) : Elemen yang melebihi batas akan di sembunyikan namun bisa di gulir untuk melihatnya.
auto (otomatis) : Elemen yang melebihi batas akan di sembunyikan dan bisa di gulir namun jika tidak melebihi batas, efek scroll secara otomatis tidak di tampilkan.

Berikut Contoh Masing-masing:
overflow: visible;

overflow: hidden;

overflow: scroll;
Jika elemen melebihi batas

jika elemen tidak melebihi batas

Elemen

overflow: auto;
jika elemen melebihi batas

jika elemen tidak melebihi batas

Elemen

Sekarang kita lanjut ke pembahasan properti resize.properti resize memungkinkan kita untuk merubah ukuran blok yang sudah di tentukan ke ukuran yang kita suka hanya dengan mengklik tepi untuk merubah ukuran dan menggesernya menjadi ukuran yang kita suka. untuk contoh lihat kode berikut:

<style>
div.kotak
{
width: 100px;
height: 100px;
border: 1px solid red;
overflow: scroll;
resize: both;
}
</style>
<br />
<div class="kotak">
Elemen yang anda letakkan di sini akan di tampilkan dalam sebuah blok bergaris pinggir 1px berwarna merah dengan jenis garis solid/padat. lebar kotak 100px yang di wakili oleh kode width: 100px; dan tingginya juga 100px yang di wakili oleh kode height: 100px;. Jika elemen di dalamnya melebihi dari batasan lebar dan tinggi maka elemen tersebut akan di tampilkan melewati batas garis blok.
</div>

Akan Terlihat seperti berikut:

Anda bisa merubah ukuran kotak 100px X 100px di atas dengan mengklik pada pojok kanan bawah kotak, tahan dan geser. itu karena kita menggunakan properti resize. adapun both adalah nilai properti. properti resize juga memiliki beberapa nilai properti. Inilah nilai-nilai properti resize berikut fungsi masing-masing:

both (keduanya) : Memungkinkan anda merubah ukuran kotak secara horisontal dan vertikal.
horizontal (horisontal) : Memungkinkan anda merubah ukuran kotak secara horisontal saja.
vertical (vertikal) : Memungkinkan anda merubah ukuran kotak secara vertikal saja.

untuk Contoh masing-masing silahkan anda buat sendiri......
saya sudah capek mengetik hehe :)
kalau ada pertanyaan bisa anda tinggalkan komentar di bawah....
dan kalau anda ingin copas silahkan. karena saya sendiri juga suka copas artikel orang...
tapi ini murni tulisan saya.

semoga bermanfaat
Sumber :

DAFTAR ISI

Saturday 23 February 2013

Contoh Company Profile

Sumber :

DAFTAR ISI

Saturday 2 February 2013

Standard Sumur Resapan

Salah satu upaya untuk meningkatkan kemampuan tanah meresapkan air hujan yaitu melalui pembuatan sumur resapan.

Salah satu upaya untuk meningkatkan kemampuan tanah meresapkan air hujan yaitu melalui pembuatan sumur resapan. Sumur resapan air khususnya di kawasan pemukiman baik di perkotaan maupun di pedesaan, selain dapat menekan terjadinya banjir, sumur resapan ini juga dapat berfungsi untuk menyediakan cadangan air tanah pada musim kemarau. Dengan sumur resapan ini, air hujan akan ditampung dan diresapkan ke dalam tanah sehingga dapat memperbaiki permukaan air tanah serta mengurangi aliran permukaan. Sementara itu, dengan pembuatan sumur resapan ini akan mampu menekan banjir dan menyediakan air tanah pada musim kemarau sehingga sumur-sumur dan mata air yang ada dapat tetap berair pada saat kemarau.

STANDARISASI SUMUR RESAPAN

Pemerintah pada dasarnya teiah mewajibkan pembuatan sumur resapan di setiap pekarangan rumah. Akan tetapi, banyak dari masyarakat yang belum mengetahui standar sumur resapan air yang balk dan benar. Berdasarkan Standar Nasional Indonesia (SNI) No. 03-2453-2002, dapat diketahui bahwa persyaratan umum yang harus dipenuhi sebuah sumur resapan untuk lahan pekarangan rumah adalah sebagai berikut.

Sumur resapan harus berada pada lahan yang datar, tidak pada tanah berlereng, curam atau labil.
Sumur resapan harus dijauhkan dari tempat penimbunan sampah, jauh dari septic tank (minimum 5 m diukur dari tepi), dan berjarak minimum 1 m dari fondasi bangunan.
Penggalian sumur resapan bisa sampai tanah berpasir atau maksimal 2 m di bawah permukaan air tanah. Kedalaman muka air (water table) tanah minimum 1,5 m pada musim hujan.
Struktur tanah harus mempunyai permeabilitas tanah (kemampuan tanah menyerap air) lebih besar atau sama dengan 2,0 cm/jam (artinya, genagan air setinggi 2 cm akan teresap habis dalam 1 jam), dengan tiga klasifikasi, yaitu sebagai berikut.
- Permeabilitas sedang, yaitu 2,0-3,6 cm/jam.
- Permeabilitas tanah agak cepat (pasir halus), yaitu 3,6-36 cm/jam.
- Permeabilitas tanah cepat (pasir kasar), yaitu lebih besar dari 36 cm/jam.

Untuk bentuk dan ukuran konstruksi sumur resapan air yang ideal dapat mengacu pada SNI No. 03-2459-1991 yang dikeluarkan oleh Departemen Kimpraswil, yaitu berbentuk segi empat atau silinder dengan ukuran minimal diameter 0,8 m dan maksimum 1,4 m serta kedalamannya disesuaikan dengan tipe konstruksi sumur resapan air. Sementara itu, pemilihan bahan bangunan yang dipakai tergantung dari fungsinya, seperti plat beton bertulang tebal 10 cm dengan campuran 1 semen : 2 pasir : 3 kerikil untuk penutup sumur dan dinding bata merah dengan campuran spesi 1 semen : 5 pasir tidak diplester, tebal 1/2 bata. <update>Aturan ini telah direvisi dengan SNI 03-2453-2002 (Tata cara perencanaan sumur resapan air hujan untuk lahan pekarangan).

Jenis-jenis Sumur Resapan

Sumur dengan susunan batu kali (kiri). Sumur dengan susunan batu bata (kanan).

Jenis bangunan sumur resapan cenderung bervariasi. Bentuk dan jenis bangunan sumur resapan dapat berupa bangunan sumur resapan air yang dibuat segi empat atau silinder dengan kedalaman tertentu dan dasar sumur terletak di atas permukaan air tanah. Berikut ini merupakan berbagai jenis konstruksi sumur resapan yang sering dipakai.

Sumur tanpa pasangan di dinding sumur, dasar sumur tidak diisi apa pun (kosong).
Sumur tanpa pasangan di dinding sumur, dasar sumur diisi dengan batu belah dan ijuk.
Sumur dengan susunan batu bata, batu kali atau batako di dinding sumur. Dasar sumur diisi dengan batu belah dan ijuk atau kosong.
Sumur menggunakan besi beton di dinding sumur.
Sumur menggunakan blawong (batu cadas yang dibentuk khusus untuk dinding sumur).

Berbagai konstruksi tersebut memiliki keunggulan dan kelemahan masing-masing. Pemilihannya dapat disesuaikan dengan kondisi batuan/tanah (formasi batuan dan struktur tanah). Selain itu, disesuaikan juga dengan kebutuhan dan anggaran dana yang dimiliki.

Selain berbagai jenis konstruksi di atas, saat ini juga telah ditemukan alternatifjenis sumur resapan yang relatif sederhana berupa lubang resapan biopori (LRB). Secara teknis, LRB merupakan lubang silindris yang dibuat secara vertikal ke dalam tanah dengan diameter 10-30 cm. Kedalamannya tidak melebihi kedalaman muka air tanah yaitu sekitar 100 cm. Pembuatan LRB yang relatif sederhana sangat cocok untuk kawasan pemukiman, balk di kota maupun di desa.

Prinsip kerja lubang resapan biopori (LRB) hampir sama dengan sumur resapan yaitu meresapkan air ke dalam tanah. Air tersebut meresap melalui biopori yang menembus permukaan dinding LRB ke dalam tanah di sekitar lubang. Biopori sendiri merupakan ruangan atau pori dalam tanah yang terbentuk akibat adanya aktivitas makhluk hidup seperti fauna tanah dan akar tanaman.

Jumlah dan ukuran biopori akan terus bertambah mengikuti pertumbuhan akar tanaman serta peningkatan populasi dan aktivitas mikroorganisme tanah. Oleh karena itu, untuk meningkatkan populasi dan mikroorganisme tanah maka LRB diisi dengan bahan organik seperti dedaunan kering dan sampah organik lainnya.

Sumber :

Ali Syahab

Saturday 16 November 2013

How To Fix "Google-Code-Subversion-Repository" Password Request? Solution!

Thursday 5 September 2013

Auto Read More Posting Blog

Auto readmore tidak menggunakan javascript untuk Blogger

Langkah-langkahnya adalah:

Membuat Image Zoom

Demo 1:

Demo 2:

Demo 3:

Demo 4:

Monday 2 September 2013

multi zoom image

Sunday 1 September 2013

Membuat Image Slider Berdasarkan Kategori Tertentu

Sunday 4 August 2013

Foto Efek Sketsa Pensil

Tuesday 30 April 2013

Beban

Sunday 28 April 2013

Kaca mata nenek

Wednesday 27 February 2013

Tiga Gaya Menu Navigasi Bertingkat dengan Efek Smooth JQuery

Langkah Pertama: Penempatan Kerangka Objek dan Pemodelan:

Efek SlideDown & SlideUp:

Efek FadeIn & FadeOut:

Efek Show & Hide:

CSS3 Properti Resize

Saturday 23 February 2013

Contoh Company Profile

Saturday 2 February 2013

Standard Sumur Resapan

STANDARISASI SUMUR RESAPAN

Jenis-jenis Sumur Resapan

Two Reasons why IPS is a "Must Have" for your Network

Search This Blog