B

l

o

g

g

e

r

Amatiran

♥

[Read More...]

Kumpulan Efek Gambar Dengan CSS

Banyak Sekali Image EFek pake CSS, Tapi saya mau share beberapa aja ya, kalo kurang Komentar Aja, ntar saya Tanggapi .
Oke sob,
Langsung aja deh, Cekidot

1. Membuat Border berubah Warna saat Di Hover/Sorot
Kode CSSnya :

.f403_img-efek {
border:1px solid #fff;
  }
.f403_img-efek:hover {
border:1px solid blue;
  }

Kode HTMLnya :

<img class="f403_img-efek" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7o-s-p4PHosU0AlfrCMOiQG4EWpszmP6CDkNqxN8FmzOhYZZ3Z8aaheQQXv1_l5yfrPziJxxC7TyKrIxQRw0hnuE_2DHno62sU-N2OUzsP8xzoOH_UNMZnaP3JMcx8Q76GQkeoM0IXLGb/s1600/main-logo.png" />

Keterangan :
1. Kode warna Merah adalah Kode Panggilan Script
2. Kode Warna Biru adalah URL Gambar Kalian
Demo :


2. Mengubah Background dan Border berubah Warna
CSS :

 .f403_img-efek-2{
border:5px solid #ccc;
  }
.f403_img-efek-2:hover {
  background-color:blue;
border:5px solid #ddd;
  }

 HTML : 

<img class="f403_img-efek-2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7o-s-p4PHosU0AlfrCMOiQG4EWpszmP6CDkNqxN8FmzOhYZZ3Z8aaheQQXv1_l5yfrPziJxxC7TyKrIxQRw0hnuE_2DHno62sU-N2OUzsP8xzoOH_UNMZnaP3JMcx8Q76GQkeoM0IXLGb/s1600/main-logo.png" />

Demo :


3. Dashed Border Image
CSS :

.f403_img-efek-3 {
border:2px solid #ccc;
  }
.f403_img-efek-3:hover {
border:2px dashed #000;
  }

HTML :

<img class="f403_img-efek-3" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7o-s-p4PHosU0AlfrCMOiQG4EWpszmP6CDkNqxN8FmzOhYZZ3Z8aaheQQXv1_l5yfrPziJxxC7TyKrIxQRw0hnuE_2DHno62sU-N2OUzsP8xzoOH_UNMZnaP3JMcx8Q76GQkeoM0IXLGb/s1600/main-logo.png" />

Demo :



4. Dotted Image Border

CSS :

.f403_img-efek-4 {
border:2px solid #ccc;
  }
.f403_img-efek-4:hover {
border:2px dotted #000;
  }

HTML :

<img class="f403_img-efek-4" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7o-s-p4PHosU0AlfrCMOiQG4EWpszmP6CDkNqxN8FmzOhYZZ3Z8aaheQQXv1_l5yfrPziJxxC7TyKrIxQRw0hnuE_2DHno62sU-N2OUzsP8xzoOH_UNMZnaP3JMcx8Q76GQkeoM0IXLGb/s1600/main-logo.png" />

Demo :


5. Auto Zoom Image with Shadow Color

CSS :

    .f403_img-efek-5 {
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    margin: 0 10px 5px 0;
    position: relative;
    padding: 3px;
    width: 125px;
    height: 125px;
    -moz-Photoz3-shadow:0px 0px 10px rgba(0, 0, 0, 0.3);
    -webkit-Photoz3-shadow:0px 0px 10px rgba(0, 0, 0, 0.3);
    -webkit-transform: rotate(-15deg);
    }


    .f403_img-efek-5:hover{
    -webkit-transform:scale(1.1);
    -moz-transform:scale(1.1);
    -o-transform:scale(1.1);
    box-shadow:0px 0px 10px blue;
    -webkit-box-shadow:0px 0px 10px blue;
    -moz-box-shadow:0px 0px 10px blue;
    opacity: 1;
    z-index: 2;
    position: relative;
    -moz-transform: rotate(0deg);
    -moz-transform: scale(1.25);
    -webkit-transform: rotate(0deg);
    -webkit-transform: scale(1.25);

HTML :

<img class="f403_img-efek-5" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7o-s-p4PHosU0AlfrCMOiQG4EWpszmP6CDkNqxN8FmzOhYZZ3Z8aaheQQXv1_l5yfrPziJxxC7TyKrIxQRw0hnuE_2DHno62sU-N2OUzsP8xzoOH_UNMZnaP3JMcx8Q76GQkeoM0IXLGb/s1600/main-logo.png" />

Demo :



6. Membuat Gambar Berputar saat di Sorot/Hover

[Read More...]

Mengubah Blog Nofollow Menjadi Dofollow

Apasih Blog Dofollow Itu ?
Blog dofollow adalah memberikan perintah kepada bot google untuk mengindex semua url yang ada pada blog maupun web kita, yang dimana setting untuk dofollow telah kita buat pada kode html blog kita.
Wah .. Keliatanya asik bgt ya, Pasti banyak Komentar yang datangdi blog kita, blog saya udah dofollow Belum ya ?
klo menurut saya udah, soalnya banyak Link yang udah terindex di Google hehehe ..

Cara membedakan Blog Dofollow dengan Nofollow gimana Sih ?
Gampang sob,
1. Lihat komentar Artikel kalian.
2. Kalian Block Nama orang yang Komentar di Blog kita
3. Klik kanan --> Lihat Kode sumber Teks Yang dipilih/View Source Code
4. Kalian cari aja ada Tulisan rel='nofollow' atau nggk ada, biasanya kalo bukan tulisan Nofollow berarti Blog itu bukan Blog Nofollow atau juga kalo gk ada tulisan rel='...' itu juga bisa di anggap Dofollow tapi itu belum memungkinkan, Kalo menurut saya sih kedua2nya bener hehehe ..

Sekarang ke Topik berikutnya, wakakakaka .
Cara bikin Blog Nofollow Berubah menjadi Dofollow hahhhaayyy ..

1. Masuk ke dasboard > design > edit html, lalu centang Expand Widget Templates, setelah itu cari kode html berikut :

<a expr:href='data:comment.authorUrl' rel='nofollow'> 

2. Ganti Tulisan nofollow Menjadi Dofollow


Source Image : hatetepe://www.Google.com/
Source Artikel : Bikin sendiri sob hehehe ..

Selesai deh,

Insyaallah Bermanfaat..

[Read More...]

CSS Efek Kertas Lipat

Assalamu'alaikum ..
sobat Bloggers .. kali ini saya mau kasih tau cara bikin Kertas kelipet pinggiranya Pake CSS ..
lansung aja ya gk usah pake penjelasan, soalnya dah Ngantuk sob ..

1. Biasa lah login Blog dulu
2. Rancangan --> Edit HTML
3. Cari Elemen ]]></b:skin> 
4. Masukan CSS berikut di atas code Elemen tadi

/*
--------------------------
Standar tampilan
--------------------------
*/

.note {
  position:relative;
  width:30%;
  padding:1em 1.5em;
  margin:2em auto;
  color:#fff;
  background:#97C02F;
  overflow:hidden;
}

.note:before {
  content:"";
  position:absolute;
  top:0;
  right:0;
  border-width:0 16px 16px 0;
  border-style:solid;
  border-color:#fff #fff #658E15 #658E15;
  background:#658E15;
  -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
  -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
  box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
  display:block; width:0; /* Firefox 3.0 damage limitation */
}

/*
--------------------------
Opsi untuk memberikan efek rounded corner
dengan menambahkan class "rounded"
--------------------------
*/

.note.rounded {
  -webkit-border-radius:5px 0 5px 5px;
  -moz-border-radius:5px 0 5px 5px;
  border-radius:5px 0 5px 5px;
}

.note.rounded:before {
  border-width:8px;
  border-color:#fff #fff transparent transparent;
  -webkit-border-bottom-left-radius:5px;
  -moz-border-radius:0 0 0 5px;
  border-radius:0 0 0 5px;
}

5. Simpan Template
6. Untuk memanggil CSS di atas di butuhkan Code HTML, Di bawah ini adalah Code HTMLnya

<div class='note'>
Tulisan Loe Disini
</div>

<div class='note rounded'>
Tulisan Loe Disini ..
</div>

DEMO :

Lorem Ipsum bla bla bla ..

Lorem Ipsum Bla bla bla ..

[Read More...]

3D Button CSS3

Halo sobat Blogger ,,
sebelum saya tidur, saya mau posting 3D button ah .
langsung aja dah udah ngantuk Cekidot ..

1. Login ke Blogger Kalian Masing²
2. Rancangan --> Edit HTML
3. Cari Elemen code ]]></b:skin>
4. Masukan Code CSS3 Di bawah ini di atas Code b:skin tadi

.button3 {
  cursor:pointer;
  margin:10px 0px;
  background:#0CA2F2;
  padding:10px 15px;
  margin:4px 2px;
  font:bold 16px Arial,Sans-Serif;
  color:#fff;
  text-decoration:none;
  outline:none;
  text-shadow:0px -1px 0px #0474C2;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  border-radius:5px;
  -webkit-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 3px 0px #297EB9,
    0px 5px 8px rgba(0,0,0,0.4);
  -moz-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 3px 0px #297EB9,
    0px 5px 8px rgba(0,0,0,0.4);
  box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 3px 0px #297EB9,
    0px 5px 8px rgba(0,0,0,0.4);
}

.button3:hover {
  -webkit-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.4),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 3px 0px #0396FC,
    0px 5px 8px rgba(0,0,0,0.4);
  -moz-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.4),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 3px 0px #0786DE,
    0px 5px 8px rgba(0,0,0,0.4);
  box-shadow:inset 0px 0px 20px rgba(255,255,255,0.4),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 3px 0px #297EB9,
    0px 5px 8px rgba(0,0,0,0.4);
}

.button3:active {
  position:relative;
  top:2px;
  -webkit-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 1px 0px #297EB9,
    0px 3px 3px rgba(0,0,0,0.4);
  -moz-box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 1px 0px #297EB9,
    0px 3px 3px rgba(0,0,0,0.4);
  box-shadow:inset 0px 0px 20px rgba(255,255,255,0.3),
    inset 0px -1px 0px rgba(255,255,255,0.3),
    0px 1px 0px #297EB9,
    0px 3px 3px rgba(0,0,0,0.4);
}

5. Simpan Template.
6. Untuk mengaktifkanya, masukan Kode HTML di bawah Ini di mana aja Terserah kalian mau di posting di widget terserah kalian pokoknya

<a class='button3' href='#'>Pencetan 3 Dimensi Coy</a>

Demo :

Pencetan 3 Dimensi Gue Coy

[Read More...]

CSS Circle Menu

Assalamu'alaikum ..
apa kabar sobat Blogger ? pasti baik aja kan ?
kali ini saya mau ngasih Tutorial Cara membuat CSS Circle Menu. Tau gk ? Pasti Tau donk, Bisa kalian bayangin kan ? menunya bentuknya Bulet gitu hehehe ..
Langsung Aja Deh ke tutorialnya Cekidot ..

1. Login Blogger Kalian
2. Rancangan --> Edit HTML
3. Cari Elemen Code ]]></b:skin>

4. Masukan CSS di bawah ini Di atas Elemen Code tadi

.menubunder{
width: 100%;
overflow:hidden;
}

.menubunder ul{
margin: 0;
padding: 0;
font: bold 14px Verdana;
list-style-type: none;
text-align: center;
}

.menubunder li{
display: inline;
margin: 0;
}

.menubunder li a{
display:inline-block;
text-align:center;
text-decoration: none;
color: white;
background:#b72d23;
margin: 0;
margin-right:5px;
width:100px;
height:100px;
border-radius: 400px;
-moz-border-radius: 400px;
-webkit-border-radius: 400px;
}

.menubunder a span{
position:relative;
top:40%;
}

.menubunder li a:visited{
color: white;
}

.menubunder a:hover{
background: #a71b15;
}

5. Simpan Template
6. Untuk memanggil CSS, Dibutuhkan HTML code, Masukan Code HTML Di bawah ini Untuk memanggil CSS Dimana aja, diwidget, dipostingan dll.

<div class="menubunder">
<ul>
<li><a href="#">Link Loe</a></li>
<li><a href="#">Link Loe</a></li>
<li><a href="#">Link Loe</a></li>
<li><a href="#">Link Loe</a></li>
<li><a href="#">Link Loet</a></li>
</ul>
</div>

7. Finish. Silahkan lihat sendiri Hasilnya,

Lihat Demo Di Bawah Ini :

• Link Gue
• Link Gue
• Link Gue
• Link Gue
• Link Gue

[Read More...]

CSS Rounded Corners

Assalamu'alaikum wr.wb
eh .. Ketemulagi di hari yang sama. Sebelumnya saya Posting CSS3 Menu With Gradient Background Color, kali ini saya mau posting yang lain nee ..
CSS Rounded Corners, Pantes nee buat Blockquote Blog kamu ..
langsung Ke tutornya sobat Cekidot ..

1. Login Blogger Kalian.
2. Rancangan --> Edit HTML
3. Cari Elemen ]]></b:skin
4. Masukan Code CSS Di bawah ini di atas Code tadi ..

#rnd_container {background: #DFD5B9; margin:1px;}
   
    .rnd_top, .rnd_bottom {display:block; background:#DFD5B9; font-size:1px;}
    .rnd_b1, .rnd_b2, .rnd_b3, .rnd_b4 {display:block; overflow:hidden;}
    .rnd_b1, .rnd_b2, .rnd_b3 {height:1px;}
    .rnd_b2, .rnd_b3, .rnd_b4 {background:#FFFFFF; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC;}
    .rnd_b1 {margin:0 5px; background:#CCCCCC;}
    .rnd_b2 {margin:0 3px; border-width:0 2px;}
    .rnd_b3 {margin:0 2px;}
    .rnd_b4 {height:2px; margin:0 1px;}
   
    .rnd_content {
    display:block;
    border:0 solid #CCCCCC;
    border-width:0 1px;
    padding: 4px;
    background:#FFFFFF;
    color:#000000;
}

Keterangan : Kode Yang Berwarna gnti dengan warna yang kalian inginkan.

5. Simpan Template.
6. Untuk Mengaktifkan CSS Tersebut, kita memerlukan HTML Code, Masukan Kode HTML di bawah ini di Mana aja, di Postingan, Di widget, dan lain-lain.

<div id="rnd_container">
<b class="rnd_top"><b class="rnd_b1"></b><b class="rnd_b2"></b><b class="rnd_b3"></b><b class="rnd_b4"></b></b>
<div class="rnd_content">
Tulisan Loe
</div>
<b class="rnd_bottom"><b class="rnd_b4"></b><b class="rnd_b3"></b><b class="rnd_b2"></b><b class="rnd_b1"></b></b>
</div>

7. Selesai deh.

DEMO :

Tulisan Gue

[Read More...]

CSS3 Menu With Gradient Background Color

Assalamu'alaikum wr. wb .
Ketemu lagi dengan Forbiden-403, Kali ini saya mau share cara Bikin menu With CSS3. Yang membuat menarik menu ini adalah Dengan Desain Background Gradient Color, Oke langsung Aja Ke tutorialnya ya Cekidot ..

1. Login Blogger Kalian
2. Rancangan --> Edit HTML
3. Cari Elemen Code ]]></b:skin
4. Masukan Code CSS Di bawah ini di atas Code b:skin tadi

#menu-bar {
  margin: 0px 0px 0px 0px;
  padding: 6px 6px 0px 6px;
  height: 34px;
  line-height: 100%;
  border-radius: 24px;
  -webkit-border-radius: 24px;
  -moz-border-radius: 24px;
  box-shadow: 2px 2px 3px #666666;
  -webkit-box-shadow: 2px 2px 3px #666666;
  -moz-box-shadow: 2px 2px 3px #666666;
  background: #8B8B8B;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#A9A9A9, endColorstr=#7A7A7A);
  background: -webkit-gradient(linear, left top, left bottom, from(#A9A9A9), to(#7A7A7A));
  background: -moz-linear-gradient(top,  #A9A9A9,  #7A7A7A);
  border: solid 1px #6D6D6D;
}
#menu-bar li {
  margin: 0px 6px 0px 6px;
  padding: 0px 0px 6px 0px;
  float: left;
  position: relative;
  list-style: none;
}
#menu-bar a {
  font-weight: bold;
  font-family: arial;
  font-style: normal;
  font-size: 12px;
  color: #E7E5E5;
  text-decoration: none;
  display: block;
  padding: 8px 20px 8px 20px;
  margin: 0;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  text-shadow: 2px 2px 3px #000000;
}
#menu-bar .current a, #menu-bar li:hover > a {
  background: #0399D4;
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=#EBEBEB, endColorstr=#A1A1A1);
  background: -webkit-gradient(linear, left top, left bottom, from(#EBEBEB), to(#A1A1A1));
  background: -moz-linear-gradient(top,  #EBEBEB,  #A1A1A1);
  color: #444444;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  text-shadow: 2px 2px 3px #FFFFFF;
}
#menu-bar ul li:hover a, #menu-bar li:hover li a {
  background: none;
  border: none;
  color: #666;
  -box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
}
#menu-bar ul a:hover {
  background: #0399D4 !important;
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=#04ACEC, endColorstr=#0186BA);
  background: -webkit-gradient(linear, left top, left bottom, from(#04ACEC), to(#0186BA)) !important;
  background: -moz-linear-gradient(top,  #04ACEC,  #0186BA) !important;
  color: #FFFFFF !important;
  border-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  text-shadow: 2px 2px 2px #FFFFFF;
}
#menu-bar ul {
  background: #DDDDDD;
  filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF, endColorstr=#CFCFCF);
  background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CFCFCF));
  background: -moz-linear-gradient(top,  #FFFFFF,  #CFCFCF);
  display: none;
  margin: 0;
  padding: 0;
  width: 185px;
  position: absolute;
  top: 30px;
  left: 0;
  border: solid 1px #B4B4B4;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-box-shadow: 2px 2px 3px #222222;
  -moz-box-shadow: 2px 2px 3px #222222;
  box-shadow: 2px 2px 3px #222222;
}
#menu-bar li:hover > ul {
  display: block;
}
#menu-bar ul li {
  float: none;
  margin: 0;
  padding: 0;
}
#menu-bar ul a {
  padding:10px 0px 10px 15px;
  color:#424242 !important;
  font-size:12px;
  font-style:normal;
  font-family:arial;
  font-weight: normal;
  text-shadow: 2px 2px 3px #FFFFFF;
}
#menu-bar ul li:first-child > a {
  border-top-left-radius: 10px;
  -webkit-border-top-left-radius: 10px;
  -moz-border-radius-topleft: 10px;
  border-top-right-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topright: 10px;
}
#menu-bar ul li:last-child > a {
  border-bottom-left-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
  -moz-border-radius-bottomleft: 10px;
  border-bottom-right-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -moz-border-radius-bottomright: 10px;
}
#menu-bar:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#menu-bar {
  display: inline-block;
}
  html[xmlns] #menu-bar {
  display: block;
}
* html #menu-bar {
  height: 1%;
}

5. Simpan Template.
6. Untuk Mengaktifkan Menunya, Masukan Kode HTML di bawah ini di mana aja, di postingan, di widget dll.

<ul id="menu-bar">
 <li class="current"><a href="#">Home</a></li>
 <li><a href="#">Products</a>
  <ul>
   <li><a href="#">Products Sub Menu 1</a></li>
   <li><a href="#">Products Sub Menu 2</a></li>
   <li><a href="#">Products Sub Menu 3</a></li>
   <li><a href="#">Products Sub Menu 4</a></li>
  </ul>
 </li>
 <li><a href="#">Services</a>
  <ul>
   <li><a href="#">Services Sub Menu 1</a></li>
   <li><a href="#">Services Sub Menu 2</a></li>
   <li><a href="#">Services Sub Menu 3</a></li>
   <li><a href="#">Services Sub Menu 4</a></li>
  </ul>
 </li>
 <li><a href="#">About</a></li>
 <li><a href="#">Contact Us</a></li>
</ul>

Ganti HTML di atas sesuka hati kalian.
7. Simpan Dan Lihat Hasilnya.

Demo :

• Home
• Products
  
  • Products Sub Menu 1
  • Products Sub Menu 2
  • Products Sub Menu 3
  • Products Sub Menu 4
• Services
  
  • Services Sub Menu 1
  • Services Sub Menu 2
  • Services Sub Menu 3
  • Services Sub Menu 4
• About
• Contact Us

[Read More...]

Awward Ke 4

Alhamdulillah saya mendapatkan Awward yang berbeda dari Awward Yang Sebelumnya,
saya Sampaikan Terima Kasih kepada Black Angel Syndicate yang Telah Memberi Saya Awward.
Saya pribadi sangat senang jika di beri Awward Seperti Ini, Karena ini dapat mempererat Tali pertemanan.

Saya akan Jaga Baik-baik awward Ini sebagai Penghargaan terbaik dari sobat saya ..
saya Mau ngucapin terima kasih lagi ke kk Rama Arif Maulana [Black Angel Syndicate]

[Read More...]

Eksis Dengan Internet Untuk Share Information And Communication

Internet, semua orang tau apa itu Internet.
Internet sudah menjadi bagian Tubuh dari saya, saya sangat membutuhkan Internet Untuk aktivitas Sehari-hari. Banyak sekali Operator yang menyediakan paket Internet Murah, Contohnya axis, axis Menawarkan paket Internet yang murah dan dengan kecepatan Internet yang nggak Nyeselin deh ..
Meskipun sekarang aku nggak pake axis, Tapi dulu saya juga pake axis. Emang gk nyeselin sobat, dengan kecepatan internetnya yang cukup tinggi dan Paket yang Murah. Dengan biaya Rp.10.000 aja kita bisa main Internetan Sepuasynya Seminggu, gimana gk puas tuh.

Kita Ke Topik Permasalahan, Internet memang sebagai Jalan pintas untuk berbagi Informasi dan Berkomunikasi, Contohnya saja Blog, Kita dapat berbagi Info dengan Blog, selain blog, apa lagi ya ? banyak sobat, kaya Facebook, Twitter, Friendster Selain Untuk Berkomunikasi, Facebook,Twitterm, Friendster juga dapat untuk berbagi Informasi. Kalo pengen Sharing Informasi dan Berkomunikasi lewat Internet, kalo Internetnya LoLa (Loading Lama) gmna ?  Pake axis aja, kan di atas udah ada Penjelasan Tentang Axis. memang axis memberikan penawaran yang Fantastis. Sobat udah tau belum kalo sebenarnya Indonesia adalah pengguna Internet Terbesar No. 4 ? Kalo udah, kita harus membuat Internet diIndonesia Berkembang, Kalo belum, Cari di Google ada kok sobat, Kok Suruh nyari di Google ? klo kamu pake axis, Harus berani sob, Karena axis kan menyediakan Koneksi Internet Yang cukup Ngebut. Kalo saya lihat dari kondisi Blogger, saya Bilang blogger Indonesia blognya keren-keren sob,dari artikelnya yang Informatif, Juga Desainya yang simple and keren, kok jadi ke Blog ya ? soalnya blog kan salah satu media Untuk Berbagi Informasi Dan Berkomunikasi Sob, jadi kita patut berbanggan dengan bangsa kita ini sob.
Cita-cita saya untuk Indonesia ini adalah ingin menjadikan Bangsa Indonesia menjadi bangsa yang maju, melampaui Jepang, Cina, Amerika Serikat, Rusia, dan lainlain. Caranya gimana ? dengan internet, kita pun bisa membuat Indonesia menjadi Bangsa Yang maju, Caranya gimana sob kalo pake blog ? Bikin Blog yang Keren dengan artikel yang Komunikatif, dan Informatif. Pasti Bangsa lain akan mengunjungi blog kita dan bilang blog kita itu keren hehehe ..
Oke sob, kita buat bangsa Indonesia menjadi Bangsa yang Paling maju. Hal apa aja sih yang ingin saya lakukan ?
1. Membuat Website Sendiri dengan Desain Yang keren.

saya ingin membuat Website sendiri dengan Artikel yang berguna, selain itu saya juga ingin membuat wensite yang bisa menyebarkan Informasi, Contoh Infogue.com, saya uudah membuat Desain Websitenya, Saya belum mengasih tau gimana Desainya, tapi suatu saat pasti saya akan kasih tau ke kalian, saya hanya ingin memberikan Polesan Domain pribadi.

2. Membuat Antivirus Online.

Saya ingin membuat Antivirus sendiri, saya juga udah bikin Desain Antivirusnya, tinggal menasih Scriptnya, tapi saya bingung sob, karena saya belum tau gimana cara bikin Scriptnya. Kenapa saya ingin bikin Antivirus Online ? Virus sekarang tidak hanya ada di Komputer aja sob, Di internet juga ada Virusnya, maka dari itu saya ingin membuat Antivirus Online, Berfungsi Untuk memblock Website yang Terkena Virus.

3. Memubat Animasi.

Kalian tau sendiri, Indonesia Belum mahir membuat Animasi, Mungkin cuma Satu Animasi Indonesia Yang menurut saya paling Keren lihat aja videonya di Youtube, Mau Lihat Videonya, Click disini.
Saya juga pengin bikin animasi kaya gitu sob, Tapi susahnya bukan main ternyata, memang Manusia adalah Makhluk sosial, Gk bisa ngerjain apa-apa sendirian, Kita pasti butuh Orang Lain untuk melakukan Suatu hal.
jujur aja sih, saya Paling Suka dengan Animasi 3D, saya sedang Berusaha membuat Animasi tersebut, hanya baru texturenya, pasti suatu Saat saya akan membuat Animasi Yang Keren.

3 hal di atas adalah cita-cita saya Untuk Indonesia Tercinta. Untuk menciptakan cita-cita di atas, saya membutuhkan Koneksi Internet untuk saya.

Mungkin Cukup segitu Artikel Dari saya, Semoga ini bisa menjadi Inspirasi Buat kalian para Sobat Blogger.

[Read More...]

[./Forbiden-403] Berbagi Awward

Alhamdulillah ..
pada Hari Ini, Saya Berhasil membuat sebuah Awward Sederhana, Yang mungkin Di bilang ini Adalah Awward Paling Sederhana dari Awward Sobat² Blogger Yang Lainya.
Saya Berharap, Meskipun Awward Ini sederhana, kita dapat mempererat Tali Pertemanan Antar Sesama Blogger.
Sesuai dengan Gambar, Saya mau kasih Awward ini Ke 10 Sahabat Terbaik Saya di antaranya :

1. Ayriy Zone [http://ayriy.blogspot.com]
2. Black Angel Syndicate [http://blackangelsyndicate.blogspot.com/]
3. Nando Cyber4rt-Crew [http://nandocyber4rt.blogspot.com/]
4. Cirebon-Cyber4rt [http://cirebon-cyber4rt.blogspot.com/]
5. Spenza Sumpiuh [http://spenzasumpiuh.blogspot.com/]
6. Sampeweweh [http://sampeweweh.blogspot.com/]
7. Rama88 [http://rama88.blogspot.com]
8. Icah Banjarmasin [http://www.icahbanjarmasin.com/]
9. Haris Cyber4rt [http://hariscyber4rtcrew.blogspot.com/]
10. Alam Perwira/Underground404 [http://alam-perwira.blogspot.com/ | http://underground404.blogspot.com/]

Semoga Dengan Awward ini, kita bisa mempererat Tali pertemanan ..
bila perlu, yang menerima Awward ini menyebarkan ke 10 sobat Blogger kalian ..
Terima Kasih atas Perhatianya ^_^

[Read More...]

CSS3 Gradient Warning Line

Tutorial CSS yuk ..
udah beberapa Minggu ini saya mengisi hari saya dengan Posting Tutorial CSS, Bukan karenasaya Master, Tetapis, Saya cuma ingin share Pengetahuan CSS yang saya Kuasai.
Nah, Kali ini saya mau bagi ke kalian Cara membuat Gradient Warning Line pake CSS, Mau liat ?
Nee di bawah ini ada :

Teks kamu

Tau kan apa Maksudnya ?
kalo Gk tau, mendingan lewatin aja Tutorial ini heheheh ..
Okeh .. Kita langsung Aja ke Tutorialnya, Cekidot

1. Login Blog Masing²
2. Rancangan --> Edit HTML
3. Cari Kode ]]></b:skin>
4. Masukan Kode CSS di bawah ini di atas Kode b:skin tadi

.medeni {
  background:yellow;
  background:-webkit-repeating-linear-gradient(45deg, yellow 15px, yellow 35px, black 30px, black 60px);
  background:-moz-repeating-linear-gradient(45deg, yellow 15px, yellow 35px, black 30px, black 60px);
  background:-ms-repeating-linear-gradient(45deg, yellow 15px, yellow 35px, black 30px, black 60px);
  background:-o-repeating-linear-gradient(45deg, yellow 15px, yellow 35px, black 30px, black 60px);
  background:repeating-linear-gradient(45deg, yellow 15px, yellow 35px, black 30px, black 60px);
}

5. Simpan Template
6. Untuk Mengaktifkan Kode CSS Di atas, di butuhkan Kode HTML, Masukan Kode HTML di bawah Ini di mana aja, di postingan di widget, and Many More

<div class='medeni'>
Tulisan Loe
</div>

7. Selesai Deh Tutorialnya ..

[Read More...]

Membuat Daftar Isi Berjalan Ke Atas

Selamat Siang Sobat blogger..
Apa kabar ?
baik donk pastinya ..
Di Tanggal 17 Januari ini saya sangat sedih karena saya tidak dapat juara di Lomba Resolusi Juara 2012 yang di adakan oleh Telkom Speedy.
Tapi gpp lah, namanya juga baru pertama kali berpartisipasi hehehe ..
Kali ini saya mau ngasih Tutorial Blog yaitu Membuat Daftar Isi yang Bisa Berjalan Ke Atas,
kaya yang tampak di Screenshot di bawah ini .

(Click Image To Zoom)
Oke deh langsung aja ke tutorialnya, Cekidot ..
1. Login Blogger Kalian Masing²'
2. Rancangan --> Elemen Laman --> Tambah Widget --> HTML/Javascript
3. Tambahkan Kode di bawah ini di widget Tersebut,

<div class='widget-content'>
<marquee direction="down" onmouseover="this.stop()" width="100%" onmouseout="this.start()" scrollamount="2" height="200"><br /><br /><script style="text/javascript" src="http://adesanusi.googlepages.com/daftar-isi.txt"></script><script style="text/javascript">var numposts = 100;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script><script src="http://forbiden-403.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script><br /><br /></marquee>
</div>

4. Simpan
Teks Warna Biru di kode di atas di ganti dengan Alamat Blog Kalian Masing²
Selamat Mencoba,



.::Thanks Visiting::.

[Read More...]

Efek Link Text Menyala saat diSorot/Hover

Tutorial ini sangat Sederhana, hanya menerapkan Beberapa Kode CSS yang Harus di masukan Di atas Elemen ]]></b:skin

1. Login Blogger
2. Cari kode ]]></b:skin

3. Masukan Kode Ini Di atasnya :

a.murub {
color:#ccc;
text-decoration:none;
text-shadow:1px 1px 0px #000,0 0 0px #000,0 0 0px #000,0 0 0px #000;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
transition: all .5s ease-out;
}

a.murub:hover {

  color:#fff;
  text-shadow:0 1px 0px #FF00FF,0 0 3px #FF00FF,0 0 5px #FF00FF,0 0 30px #FF00FF,0 3px 50px #FF00FF;
}

4. Simpan Template
5. Untuk Mengaktifkan Teks Menyalanya anda harus memasukan Kode HTML Berikut Di mana aja, Di postingan atau di Widget Terserah anda ..

<a class="murub" href="#">LINK</a>

Sekian tutorial dari saya ..
Insyaallah Bermanfaat..
Bila Kurang Jelas Komentar ya ..

[Read More...]

CSS Box Shadow

Assalamu'alaikum ..
ee ..
Ketemu lagi di hari yang sama nee ..
Di hari yang Sama nee saya mau Posting Yang Ketigaxxxxx ..
Langsung aja dehh ..
Simak ya Tutorialnya , Buat master lewat aja (jangan Anggap saya Master, Saya juga Masih Belajar alias Newbie)

Tutorial ini untuk memberi Efek Shadow pada Area Tertentu ..
Nee Kode CSSnya :

Untuk yang Bayangan Bagian Luar :

-webkit-box-shadow:10px 10px 7px #222; /* Safari & Chrome */
-moz-box-shadow:10px 10px 7px #222;    /* Firefox */
box-shadow:10px 10px 7px #222;         /* W3C */

Untuk Bayangan Bagian Dalam :

-webkit-box-shadow:inset 10px 10px 7px #222; /* Safari & Firefox */
-moz-box-shadow:inset 10px 10px 7px #222;    /* Firefox */
box-shadow:inset 10px 10px 7px #222;         /* W3C */

10px yang pertama adalah ukuran offset sumbu-X, 10px yang ke dua adalah offset sumbu-Y, 7px adalah tingkat blur, #222 adalah warna bayangan. Kamu juga bisa menuliskan nilai offset negatif untuk membuat bayangan menuju ke arah sebaliknya. Cara penerapannya bisa diletakkan secara top down ataupun inline seperti ini:

Top-Down	Inline
#kotak1 { -webkit-box-shadow:10px 10px 7px #222; -moz-box-shadow:10px 10px 7px #222; box-shadow:10px 10px 7px #222; } ...... <div id='kotak1'>OBJEK</div>	<div style='-webkit-box-shadow:10px 10px 7px #222;-moz-box-shadow:10px 10px 7px #222;box-shadow:10px 10px 7px #222;'> OBJEK </div>

Jelaskan tutorialnya ?
Kalo Belum Jelas Gak usah Di bahas hehehe ..

[Read More...]

CSS3 Media Temple Button

Assalamu'alaikum ..
Kembali Lagi dengan Saya [./Forbiden-403]
Gimana Kabar Kalian Kalian ..
Baik Aja ya ..
sekarang kita mau belajar buat Button Via CSS ..
Langsung aja deh tutorialnya ..
Cekidot ..

1. Login Blog kalian masing²
2. Rancangan --> Edit HTML
3. Cari Kode ]]></b:skin
4. Masukan Kode Ini Di atas Kode tadi

.button {
  cursor:pointer;
  background:#328EC5;
  background:-webkit-linear-gradient(top, #74BCE6 0%, #328EC5 57%);
  background:-moz-linear-gradient(top, #74BCE6 0%, #328EC5 57%);
  background:-ms-linear-gradient(top, #74BCE6 0%, #328EC5 57%);
  background:-o-linear-gradient(top, #74BCE6 0%, #328EC5 57%);
  background:linear-gradient(top, #74BCE6 0%, #328EC5 57%);
  padding:0.75em 1.5em;
  font:normal 1em Calibri,Arial,Sans-Serif;
  text-transform:uppercase;
  color:#fff;
  text-decoration:none;
  text-shadow:0px -1px 0px rgba(0,0,0,0.3);
  -webkit-box-shadow:
    inset 0px 1px 0px rgba(255,255,255,0.5),
    inset 0px -1px 0px rgba(0,0,0,0.4),
    0px 1px 2px rgba(0,0,0,0.7);
  -moz-box-shadow:
    inset 0px 1px 0px rgba(255,255,255,0.5),
    inset 0px -1px 0px rgba(0,0,0,0.4),
    0px 1px 2px rgba(0,0,0,0.7);
  box-shadow:
    inset 0px 1px 0px rgba(255,255,255,0.5),
    inset 0px -1px 0px rgba(0,0,0,0.4),
    0px 1px 2px rgba(0,0,0,0.7);
  -webkit-border-radius:0.7em;
  -moz-border-radius:0.7em;
  border-radius:0.7em;
  border:none;
}

.button:hover {
  background:#399BD6;
  background:-webkit-linear-gradient(top, #88CEF7 0%, #399BD6 57%);
  background:-moz-linear-gradient(top, #88CEF7 0%, #399BD6 57%);
  background:-ms-linear-gradient(top, #88CEF7 0%, #399BD6 57%);
  background:-o-linear-gradient(top, #88CEF7 0%, #399BD6 57%);
  background:linear-gradient(top, #88CEF7 0%, #399BD6 57%);
  -webkit-box-shadow:
    inset 0px 1px 0px rgba(255,255,255,0.5),
    inset 0px -1px 0px rgba(0,0,0,0.5),
    0px 2px 4px rgba(0,0,0,0.4);
  -moz-box-shadow:
    inset 0px 1px 0px rgba(255,255,255,0.5),
    inset 0px -1px 0px rgba(0,0,0,0.5),
    0px 2px 4px rgba(0,0,0,0.4);
  box-shadow:
    inset 0px 1px 0px rgba(255,255,255,0.5),
    inset 0px -1px 0px rgba(0,0,0,0.5),
    0px 2px 4px rgba(0,0,0,0.4);
}

.button:active {
  background:-webkit-linear-gradient(bottom, #88CEF7, #399BD6);
  background:-moz-linear-gradient(bottom, #88CEF7, #399BD6);
  background:-ms-linear-gradient(bottom, #88CEF7, #399BD6);
  background:-o-linear-gradient(bottom, #88CEF7, #399BD6);
  background:linear-gradient(bottom, #88CEF7, #399BD6);
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  box-shadow:none;
}

5. Simpan Template..
6. cara menampilkan Butonya tinggal kalian masukan Kode di bawah ini Di mana aja, Di postingan, Di Widget, Di mana aja deh ..

<a class="button" href="#">Text Anda</a>

7. Selesai ..
Mau lihat Contohnya ?
Di atas Tu ada ..
Yang Tulisan [./Forbide-403]
untuk Edit terserah kalian , Mau ganti warna, apa mau ngapain, terserah kalian ..


Sekian Tutorial Dari Saya ..
Insyaallah Bermanfaat

[Read More...]

Buka AplikasiAndroid menggunakan BlueStacks App Player

(Size : 117mb)

Assalamu'alaikum ..
siang²  gini ..
Enaknya sih tidur.
tapi sehubung ada kegiatan sekolah, jalanin aja deh ..
ahhahaa ,,
kok jadi ngurusin sekolah ya ?
langsung aja deh, Cekidot ..


Aplikasi  ini adalah aplikasi yang dapat menjalankan Aplikasi Android, haha ..
saya paling suka main Angry Birds nee ..
aplikasi ini sangatlah menarik ...
Aplikasi ini seperti Gadget Pada Windows ..


Fitur²nya :

Dapat menjalankan Aplikasi Android di PC dan Full screen pastinya
Mengirim Aplikasi dari Android ke PC melalui BlueStacks Cloud connect
Jalankan 10 aplikasi pre-loaded
install 26 lebih aplikasi Android dalam PC anda

Screenshotnya :






Ya kan kaya Gadget Windows ..
Di pinggiran Gitu ..

Download Aplikasinya Di Bawah Ini :

Download

Jika anda ingin mensinkronisasi aplikasi-aplikasi yang ada di device Android anda ke BlueStacks, anda diharuskan untuk menginstall aplikasi BlueStacks Cloud Connect terlebih dahulu. Anda bisa mendapatkan Aplikasi BlueStacks Cloud Connect secara gratis  

Download Disini

Thanks Downloading ..
Maaf kalo kurang jelas Penjelasanya ..

[Read More...]

New Facebook Emoticons

Hallo Para sobat2 blogger ..
gimana kabar kalian ?
pasti baik donk ..
saya mau share cara membuat New Facebook Emoticons ..
Gimana sih Emoticonsnya ?
penasaran ?
langsung aja, Cekidot

Masih bingung cara pakenya ?
gini nih ..
pertama kalian hapus "Your Text Here" Ganti dengan Tulisan yang kalian inginkan,
kemudian Klik Make Your Emoticons  Kemudian, Copy kode yang muncul di kotak kedua ..
setelah di copy, kalian Paste di Chat kalian ..
Kemudian Enter, Udah deh tinggal nunggu gambarnya muncul,
Gampangkan, gampangkan ?
ya jelas gampang lah ..
Tinggal Copas Doank kok Susah ..
ehhehehehe

[Read More...]

Awward Ketiga

Assalamu'alaikum ..
gimana keadaan Sobat blogger ?
pasti baik aja kan ..
kali ini saya mau post Awward dari sahabat terbaik saya yaitu Iman Sampeweweh
ya . . meskipun sama dengan sebelumnya, tapi ini adalah penghargaan buat saya ..
Penasaran Awwardnya gmna ?
saa kok kaya kemaren cuma yang pemberinya aja yang beda ..



Awward ini pun mau saya bagikan ke 7 sahabat saya ..
yaitu :

1. Pengelana Cyber
2. Crazy Share
3. Harys Cyber4rt
4. Fakryzer The Second Generation
5. Bisnis Online Investasi
6. Ayriy Zone
7. Om-Dayz

Buat yang saya sebutkan Blognya mohon ambil awwardnya ya ..
happy Blogging ..

[Read More...]

Awward Kedua Dari Sobat Blogger

Abis Dapet Awward pertama Dari Sobat Muhamad April Asry, saya mendapatkan Awward kedua dari Nando Firmansyah Meskipun Awwardnya Sama, Tapi gpp lah hehehehe ..


Tuh Awwardnya, emang sama, tapi gpp lah yang penting Happy hehehehe ..
Sama dengan awward yang pertama, awward ini saya bagikan ke 7 sahabatku ..

1. [./Yhonezz Cyber4rt-Crew]
2. Memikat Cahaya
3. ./Boriel Cyber ++==
4. Alam Perwiera Wash Here
5. Black Angel Syndicate
6. Rama88
7. Chilight / Chilight Online

Nahh, buat orang yang saya sebutkan, Tolong ambil Awwardnya ya .. ^_^
Happy Blogging :D =)) ^_^

[Read More...]

Awward Pertama,

Assalamu'alaikum wr.wb
Apa kabar Sobat blogger ?
nggk di sangka saya mendapatkan 3 awward dari sahabat-sahabat saya, saya janji kepada sahabat-sahabat saya yang memberi awward akan selalu saya kunjungi ..
penasaran sama awwardnya ?
nee awwardnya

Awward Pertama ini pemberian dari Muhammad April Asry (Ayriy Zone)

Makasih buat kak Muhammad April Asry,
saya juga membagikan Awward ini ke 7 Sahabatku yang lain

1. Indramayu Cyber Team
2. Catatan Si Virgo Girl
3. ^TMFlazz-Inside^TM
4. Spenza-Sumpiuh

5. Cirebon-Cyber4rt™

6. Jejak Si-Bocah 

7.. --[Zone-Raptor]-- 

Di mohon orang yang saya sebutkan mebgambil Awward Tersebut
Happy Blogging  ^_^

[Read More...]

Bahaya Makan Dan Minum Sambil Berdiri

Islam sangat lengkap mengatur aspek kehidupan manusia, termasuk dalam cara makan. Mencuci tangan sebelum makan, makan dengan tangan kanan, tidak makan sampai kekenyangan, dan tidak makan sambil berdiri—adalah beberapa adab yang sudah dikenal dalam Islam. Namun ternyata, sebenarnya larangan untuk makan sambil berdiri ini juga memiliki hikmah dan rahasia medis tersendiri.
Orang tua sering melarang kita makan dan minum sambil berdiri. Mungkin kedengarannya seperti nasihat biasa saja, tapi ternyata hal itu ada benarnya dan dapat dibuktikan dari segi agama maupun kesehatan. Mau tahu?
Suatu kajian kesehatan akupuntur yang diadakan salah satu ahli akupuntur, membuktikan bahwa air minum yang masuk dengan cara minum sambil duduk lebih baik dibandingkan kita minum dengan cara berdiri.
Air putih yang kita minum saat duduk akan disaring oleh sfringer. Sfringer adalah suatu struktur maskuler (berotot) yang bisa membuka (sehingga air kemih bisa lewat) dan menutup. Setiap air yang kita minum akan disalurkan pada pos-pos penyaringan yang berada di ginjal.
Sebaliknya, jika kita minum air putih dengan cara berdiri, maka air yang kita minum itu masuk tanpa disaring lagi. Air itu bisa langsung menuju kandung kemih. Ketika langsung menuju kandung kemih, maka terjadi pengendapan di saluran ureter.
Karena banyak limbah-limbah yang menyisa di ureter maka hal ini bisa menyebabkan penyakit kristal ginjal. Salah satu penyakit ginjal yang berbahaya. Susah kencing itu penyebabnya.
Selain itu, minum sambil berdiri tidak akan menyegarkan tubuh kita secara optimal dan air yang terserap akan cepat turun ke organ tubuh bagian bawah. Sehingga air tersebut tidak dapat tersebar ke seluruh oragan tubuh yang lain karena tidak sempat terpompa oleh jantung. Padahal seperti yang kita ketahui, 80% lebih dari tubuh kita terdiri dari air!
Adapun apabila kita makan sambil berdiri, maka akan terjadi reflux asam lambung. Dengan kata lain, asam lambung akan naik ke saluran esofagus dan membuat sel-sel kerongkongan teriritasi. Iritasi sel kerongkongan ini dikarenakan pH asam lambung yang sangat asam (pH 1 – 2,5) dan kadang ditandai dengan gejala panas terbakar yang menyesak di dada (disebut sebagai “heartburn”). Bila kita tetap bandel membiasakan makan atau minum sambil berdiri dalam jangka waktu panjang, iritasi sel-sel kerongkongan ini akan berakumulasi dan menyebabkan kanker saluran esofagus. Cara mencegah reflux asam lambung ini adalah dengan makan sambil duduk.
Rasulullah saw bersabda:
Sesungguhnya beliau melarang seseorang minum sambil berdiri, Qotadah
berkata:”Bagaimana dengan makan?” beliau menjawab: “Itu kebih buruk lagi”. (HR.
Muslim dan Turmidzi)

[Read More...]

Ringankan Beban Blog kalian Dengan Lazy Loader

Halo Sobat blogger, ketemu lagi dengan saya [./Forbiden-403] | Share And Enjoy.
saya pengin share sedikit Tips agar kalo masuk ke blog kita itu gk Lelet, kok bisa ? pake apaan ?
Di sini kita pake Script Lazy Loader
Lho, bukanya klo nambah script malah tambah berat ?
Script ini beda, bedanya cari sendiri ya hehehehe ....
Langsung aja deh Cekidot

1. Kalian Login Ke blogger kalian masing²
2. Masuk Rancangan, Di sini kita menggunakan 2 cara, yaitu dengan Edit HTML atau dengan Menambah Widget, Kita lakukan Cara pertama.
Cara Pertama :
(1) Rancangan --> Elemen Laman --> Tambah Gadget --> Pilih HTML/Javascript
(2)Masukan Script Di bawah ini

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript' src='https://sites.google.com/site/jquery01/jquery.lazyload.mini.js?ver=1.5.0'></script>
<script type="text/javascript">
jQuery(document).ready(function($){
if (navigator.platform == "iPad") return;
jQuery("img").lazyload({
effect:"fadeIn",
placeholder: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAIeN4bF-omk0GiZcdm93BX8d5axvnQC63zdo8V7y43w4vyXdxMNo0ZXchgeADxsbub2LRNMwNnbTCs299L41Q79syvcpZJl-Ik3u2bc1VRMfmG34kM1xHak2GYLZCuMJgwyWtdpLyoi8/s1600/grey.gif"
});
});
</script>

(3) Simpan

Cara Kedua :
(1) Rancangan --> Edit HTML --> Centang Expand Template Widget
(2) Masukan Kode Dibawah ini  di atas Kode </head> atau Di atas kode </body>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript' src='https://sites.google.com/site/jquery01/jquery.lazyload.mini.js?ver=1.5.0'></script>
<script type="text/javascript">
jQuery(document).ready(function($){
if (navigator.platform == "iPad") return;
jQuery("img").lazyload({
effect:"fadeIn",
placeholder: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAIeN4bF-omk0GiZcdm93BX8d5axvnQC63zdo8V7y43w4vyXdxMNo0ZXchgeADxsbub2LRNMwNnbTCs299L41Q79syvcpZJl-Ik3u2bc1VRMfmG34kM1xHak2GYLZCuMJgwyWtdpLyoi8/s1600/grey.gif"
});
});
</script>

(3) Simpan Dan Coba test aja kalau gk percaya, Apa bedanya klo di atas Kode head dan body ?
sebenarnya gk beda, hasilnya sama kok, ini udah saya test sendiri, Blog ini pun menggunakan Script Di atas.

3. Lihat Hasilnya. Happy Blogger

Insyaallah Artikel ini Bermanfaat ..

[Read More...]

Bikin Breadchumb Menu + Submenu

Halo para sobat blogger, Gimana kabarnya ? saya harap baik aja yah ..
kali ini saya mau share Sedikit Tutorial Blog Buat yang Junior ataupun Senior Blogger, Tutorialnya adalah Bikin Breadchumb Menu + Submenu yaitu yang diHeader Blog saya, Masih belum Ngerti Juga ?
Liat aja Gambar di bawah ini ..

Click Image To Zoom

Masih gk tau juga ?
mendingan gk usah Bloggeran ..

wkwkwkwk .. Becanda
langsung aja ya ke tutorialnya Cekidot
1. kalian Login keBlog kalian masing²
2. Rancangan --> Edit HTML
3. Cari kode ]]></b:skin>
4. Klo udah ketemu, Masukan Code di bawah ini di atas Kode ]]></b:skin>

/* --------------------- WILAYAH BREADCRHUMB MENU ------------------------ */
* html #breadcrumb{position:absolute}
#breadcrumb{
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQRCMBV-maT6vWHANp39trtulbNdYu-idjtW7A3sMOJ7Zm27kuE90QHu2YMBWk93DHyguOC7_pwnKn6R_U2Ft31qDOip5jmanvor_fS970OmWqtA01u-a0W12h4QoRj2VE9RxJZ0eYvPaq/s1600/bgtopnav.png) repeat-x ;
border-bottom:1px solid #CDCDCD;
z-index:100;
padding-bottom:1px;
width:100%; top:0;
left:0;
overflow:auto;
height:35px; overflow:hidden;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}

#breadcrumb .maxs_logo{
background:url('http://i1094.photobucket.com/albums/i446/aqbarvall/icon2.png') 7px 9px no-repeat;
float:left;
padding-left:7px;
text-align:left;
font-family:Arial; font-size:16px; font-weight:bold; font-style:normal;
color:#4E4E4E; width:125px;
padding-left:30px; padding-top:8px}
#breadcrumb .maxs_logo a{text-decoration:none; color:#ccc; padding-left:21px}
#breadcrumb .maxs_search{float:left; padding-top:7px; margin:0px; text-align:left; font-family:tahoma; font-size:14px; font-weight:bold; font-style:normal; color:#ccc; width:142px}
#breadcrumb .maxs_search a{text-decoration:none; color:#ccc; padding-left:10px; padding:0}
#breadcrumb .maxs_search a:hover{text-decoration:underline; color:#ccc}
#breadcrumb .maxs_navbarmenuleft{float:right; text-align:left; font-family:tahoma; font-size:13px; font-weight:normal; font-style:normal; color:#999; width:468; padding:3px 1px}
#breadcrumb .maxs_addthis {float:left; padding-top:9px;}
#breadcrumb .maxs_fblike {float:left; padding-top:6px; margin-left:5px;}

/* -------------------- KOTAK PENCARIAN ATAS ----------------------- */
#search{border:1px solid #CDCDCD; height:20px; width:130px; padding:0; background:#f6f4f4; }
#search input{border:0; background:none; color:#575757}
#s{font-size:12px; width:120px; padding-left:4px; margin:0; background:none}
#topsearch #search{margin-top:0px;
-moz-border-radius:3px;
-khtml-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
background-color:#EDEDED;
border:1px solid #CDCDCD;}
#topsearch #s{width:105px}

/* --------------------- BEGIN DROPDOWN MENU ------------------------ */

#ini-menu-label {float:right; margin:0px; padding:0; }
.text-style{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJtr2d3EHeFVwVwWS5H-LVHH5v-fdZTmMFZB4rRQaL-aYa0fsuzyroUF8iqkT_yHvvOsfJkN6k9Ue4Wc9qDZOaFhscJ_1fi2kiSR5wqkvvdcFqSwzAZH8_z-GrIflLhV2DCF9ineNEnrU/s1600/separatortop.png) no-repeat;color:#4E4E4E;
display:block;
font-size:12px;
font-family:arial,verdana,georgia;
font-weight:normal;
text-transform:normal; margin:0;
border-left:0px solid #CDCDCD;
padding:8px 5px 13px 7px; height:14px
}
.text-style:hover{color:#0378B2; cursor:pointer;height:14px}

#ini-menu-label ul{float:left; list-style:none; margin:0px; padding:0}
#ini-menu-label li{list-style:none; margin:0px; padding:0px}
#ini-menu-label li a, #ini-menu-label li a:link, #ini-menu-label li a:visited{color:#494949;
display:block;
font-size:12px;
font-family:arial,verdana,georgia;
font-weight:bold;
text-transform:normal;
margin:0; border-left:1px solid #CDCDCD;
padding:1px 8px 6px 8px}

#ini-menu-label li a:hover, #ini-menu-label li a:active{
color:#494949;
padding:1px 8px 6px 8px;
text-decoration:none}

#ini-menu-label li li a, #ini-menu-label li li a:link, #ini-menu-label li li a:visited{
background:#F3F3F3;
width:90px; color:#4E4E4E; font-size:11px;
font-family:arial,Times New Roman;
font-weight:normal;
text-transform:normal;
float:none; margin:0;
padding:1px 8px 1px 8px;
border-top:1px solid #FFF;
border-bottom:1px solid #D5D5D5;
border-left:1px solid #CDCDCD;
border-right:1px solid #CDCDCD;}

#ini-menu-label li li a:hover, #ini-menu-label li li a:active{
background:#D1D2D1;
color:#0378B2;
padding:1px 8px 1px 8px;
border-bottom:1px solid #B2B1B1;}

#ini-menu-label li{float:left; padding:0}
#ini-menu-label li ul{
z-index:999;
position:absolute;
left:-999em;
height:auto;
width:100px;
margin:0;
padding:0}
#ini-menu-label li ul a{width:100px}
#ini-menu-label li ul ul{margin:-31px 0 0 100px}
#ini-menu-label li:hover ul ul, #ini-menu-label li:hover ul ul ul, #ini-menu-label li.sfhover ul ul, #ini-menu-label li.sfhover ul ul ul{left:-999em}
#ini-menu-label li:hover ul, #ini-menu-label li li:hover ul, #ini-menu-label li li li:hover ul, #ini-menu-label li.sfhover ul, #ini-menu-label li li.sfhover ul, #ini-menu-label li li li.sfhover ul{left:auto}
#ini-menu-label li:hover, #ini-menu-label li.sfhover{position:static}

5. klo udah, jangan di Save dlu, Cari kode <body>
6. Masukan Code di bawah ini di bawah kode <body>

<div id='breadcrumb'>
<div class='breadcrumb maxs_logo'>
<b>[./Forbiden-403]</b></div>
<div class='breadcrumb maxs_search'>
<div id='topsearch'>
<div id='search'>
<form action='/search&apos;' id='searchform' method='get' name='searchform'>
<input class='keyword' id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}' onfocus='if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}' type='text' value='Search...'/>
<input src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7dvRsdMK6Q29-gz_UqqXWmSRWDddSsF853cSStfSnWnw6rLS3Te1lCytQtjVW4OZlY1E4QRUjCDApfNzGzHMhnY4aEewYwg3sKeA94puv3GSB2BxHmAJ1Va6q2vptO-UA8Qmu_urr2Y4/s1600/search_c.png' style='border: 0pt none; padding-top: 4px; vertical-align: top;' type='image'/></form>
</div>
</div>
</div>

<div class='breadcrumb maxs_addthis'>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com/pages/Forbiden-403/159624757462562&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;amp;colorscheme=light&amp;height=30' style='border: none; height: 21px; overflow: hidden; width: 85px;'/></div>

<div class='breadcrumb navbarmenuleft'>
<ul id='ini-menu-label'>
<li>
<div class='text-style'>
Downloads &#9660;</div>
<ul>
<li>
<a href='/search/label/Software?max-results=10'>Software</a>
</li>
<li>
<a href='/search/label/Anti%20Virus?max-results=10'>Anti Virus</a>
</li>
<li>
<a href='/search/label/Template?max-results=10'>Blogger Templates</a>
</li>
</ul>
</li>
<li>
<div class='text-style'>
Tutorials &#9660;</div>
<ul>
<li>
<a href='/search/label/Tutorial Blog?max-results=10'>Blog</a>
</li>
<li>
<a href='/search/label/Tutorial Hacking?max-results=10'>Hacking</a>
</li>
<li>
<a href='/search/label/Virus?max-results=10'>Virus</a>
</li>
</ul>
</li>
<li>
<div class='text-style'>
Media &#9660;</div>
<ul>
<li>
<a href='http://www.aqbarvall.my-php.net/'>Simple Site I</a>
</li>
<li>
<a href='http://www.forbiden-403.co.cc/'>Simple Site II</a>
</li>
<li>
<a href='http://www.about-forbiden-403.co.cc/'>About Me</a>
</li>
<li>
<a href='http://facebook.com/rosyd.aqbar'>Facebook</a>
</li>
<li>
<a href='http://www.twitter.com/@Rosyd_Aqbar'>Twitter</a>
</li>
<li>
<a href='http://www.forbiden-403.co.cc/ImageSearch.php'>Image Search</a>
</li>
<li>
<a href='http://www.forbiden-403.co.cc/Game.php'>My Game</a>
</li>
<li>
<a href='/search/label/Music'>My Music</a>
</li>
<li>
<a href='http://www.forbiden-403.co.cc/Photoshop.php'>Photoshop</a>
</li>
<li>
<a href='http://www.forbiden-403.co.cc/CCode.php'>Color Code</a>
</li>
<li>
<a href='http://www.forbiden-403.co.cc/Download.php'>Download List</a>
</li>
<li>
<a href='http://www.facebook.com/forbidenus'>Update Status</a>
</li>
</ul>
</li>
<li>
<div class='text-style'>
Partner &#9660;</div>
<ul>
<li>
<a href='www.file666.com'>File666</a>
</li>
<li>
<a href='http://chilight.blogspot.com'>Chilight</a>
</li>
<li>
<a href='http://rama88.blogspot.com'>Rama88</a>
</li>
<li>
<a href='http://flazz-Inside.blogspot.com'>&#8482;Flazz-Inside&#8482;</a>
</li>
<li>
<a href='http://zonedevil.com'>Zone Devil</a>
</li>
<li>
<a href='http://iblizkecil.com'>Iblizkecil</a>
</li>
</ul>
</li>
<li>
<div class='text-style'>
Support &#9660;</div>
<ul>
<li>
<a href='http://www.googlecode.com/' target='_blank'>Google Code</a>
</li>
<li>
<a href='http://www.ziddu.com/' target='_blank'>Ziddu</a>
</li>
<li>
<a href='http://adf.ly/' target='_blank'>ADF</a>
</li>
<li>
<a href='http://www.mediafire.com' target='_blank'>Mediafire</a>
</li>
<li>
<a href='http://www.blogger.com' target='_blank'>Blogger</a>
</li>
</ul>
</li>
<li>
<div class='text-style'>
Profil &#9660;</div>
<ul>
<li>
<a href='http://www.blogger.com/profile/5972747173229676142.html' rel='nofollow' target='_blank'>Blogger</a>
</li>
<li>
<a href='http://twitter.com/Rosyd_Aqbar' rel='nofollow' target='_blank'>Twitter</a>
</li>
<li>
<a href='http://facebook.com/rosyd.aqbar' rel='nofollow' target='_blank'>Facebook</a>
</li>
</ul>
</li>
</ul>
</div>
</div>

 7. Kalian tinggal Edit sendiri deh, masa saya yang harus Edit, Namanya juga belajar sob, saya juga belajar hehehehe ..
8. Kalo udah di Edit Save deh dan liat Hasilnya.




*eNBe : Hapus Tulisan Read More : "Link Postingan"



Insyaallah Artikel ini Bermanfaat Buat Para Sobat Blogger.

[Read More...]