Navigation Menu

Hi There, I am

About Me


click here..

Social media

Instagram

Diberdayakan oleh Blogger.

Sosial Media ( Sticky! )

Komentar Terbaru

Tentang

All Connect

Kutipan

Saya pikir semua orang harus belajar coding, Karena coding mengajarkan anda berpikir.
– Steve Jobs, pendiri Apple.
Kebijaksanaan di Facebook adalah meng-hire coder berkualitas sebanyak mungkin. Tapi pasar saat ini tidak menyediakan stock yang cukup..
– Mark Zuckerberg, pendiri Facebook.
Anda tidak harus menjadi jenius untuk bisa coding. Pertambahan, pengurangan... itu sudah cukup!.
– Bill Gates, pendiri Microsoft.
Coders yang hebat adalah rock star masa kini! Titik!.
– Will.i.am, anggota Black Eyed Peas.
Gak usah liatin gue gan, di cuekin aja... ©ZonnaCyber has Post | Comment
Back to top

Twitter Bird

Foto

Tampilkan postingan dengan label WIdget. Tampilkan semua postingan

Cara Membuat Title Blog Bergerak

Bloger adalah sarana yang paling tepat untuk mempostingkan artikel atau coretan kita. salah satu cara membuat pengunjung tertarik adalah dengan mendesain template blog.kali ini saya akan membagikan cara membuat title blog bisa bergerak. kita bisa membuat nya di blog atau web site

Pertama masuk account blog kalian
kemudian klik Rancangan - Edit HTML 
cari kode </head> .Gunakan Ctrl + F untuk memudahkan pencarian.
Cara membuatnya dengan masukan script di bawah ini sebelum atau diatas kode </head> :

  • <script type="text/javascript">
    var judul="Titlebar bergerak .anti kerut anti bocor by cybersonic";
    var kecepatan=100;
    var refresh=null;
    function judul_bergerak()
    {
    document.title=judul;
    judul=judul.substring(1,judul.length)+judul.charAt(0);
    refresh=setTimeout("judul_bergerak()",kecepatan);
    }
    judul_bergerak();
    </script>
Kode diatas bisa dipasang di antara <head> dan </head>  atau diantara <body> dan </body> . Tetapi saya sarankan disimpan diantara  <head> dan </head>.

Info:
judul: Title yang akan bergerak ( warna hijau ), ganti/edit dengan title yang Anda inginkan. (default Titlebar bergerak .anti kerut anti bocor by cybersonic)
kecepatan: kecepatan title bergerak ( warna coklat ), bisa di set dengan nilai lain. (default 100) semakin kecil angka yang di gunakan maka akan semakin cepat. dan semakin besar angka yang digunakan maka kecepatan nya akan semakin rendah.

Ganti Background Blog dari Postingan pake JavaScript

Pengen dong tiap kali lo posting, suasana blog termasuk Gambar Background sesuai sama isi postingan lo? ya se'enggak-nya sesuai sama gaya lo deh :D

Normalnya JavaScript buat ngeganti Gambar Background itu kaya gini kira-kira..

<script>

document.body.style.backgroundImage='url(http://blogdowallpaper.files.wordpress.com/2009/04/skate_boy_1024_blogdowallpaper.jpg)';

</script>

Kalo mau pake "Timer/Pewaktu"

biar nunggu dulu beberapa saat (misal 20 detik) baru Gambar Backgroundnya berubah..

<script>

setTimeout("document.body.style.backgroundImage='url(http://blogdowallpaper.files.wordpress.com/2009/04/skate_boy_1024_blogdowallpaper.jpg)'",20000);

</script>

Kalo pengen Gambar Backgroundnya "FullScreen"

biarpun gambar yang lo punya ukurannya kecil sekalipun tetep aja bakalan di tampilin se"layar penuh"..

<style type="text/css">

body {
 width: 100%;
-moz-background-size:100%;
     background-size:100%;
-moz-background-origin:content;
     background-origin:content;
 background-position:top center;
 background-attachment:fixed;
}

</style>


<script>

setTimeout("document.body.style.backgroundImage='url(http://blogdowallpaper.files.wordpress.com/2009/04/skate_boy_1024_blogdowallpaper.jpg)'",20000);


</script>

Warning

Kalo diBlog elo ada "Script Random Background Image"nya kemungkinan besar CSS buat nge-bikin FullScreen diatas bakalan "ketiban" (gak jalan)

Tapi elo gak usah nangis

Ganti aja "Script Random Background Image"nya jadi kaya gini..

<script type='text/javascript'>
var bg = [
"http://ALAMAT-GAMBAR.jpg",
"http://ALAMAT-GAMBAR.jpg",
"http://ALAMAT-GAMBAR.jpg"
];

function gantiBg(){
  var bgLeng = bg.length-1;
  var i = Math.floor(Math.random()*bgLeng);
  document.body.style.backgroundImage='url('+bg[i]+')';
}

gantiBg();
</script>

NB: script ini juga bisa ko dipasang di postingan, coba aja..

Kalo mau Gambar Backgroundnya "Gonta-ganti sendiri"

(misal Gonta-ganti sendiri tiap 20 detik), tinggal nambahin aja "Timer"

<script type='text/javascript'>
var bg = [
"http://ALAMAT-GAMBAR.jpg",
"http://ALAMAT-GAMBAR.jpg",
"http://ALAMAT-GAMBAR.jpg"
];

function gantiBg(){
  var bgLeng = bg.length-1;
  var i = Math.floor(Math.random()*bgLeng);
  document.body.style.backgroundImage='url('+bg[i]+')';

  setTimeout("gantiBg()",20000);
}

gantiBg();

</script>

Cara Membuat Buku Tamu Keren Melayang Di Blog


Hallo Sobat, Kali ini saya akan memberi tutorial Cara Membuat Buku Tamu Melayang Keren Di Blog Versi Anonymous Revenge Sendiri. Chat Box atau biasa disebut Buku Tamu ini berfungsi sebagai pengganti komentar, namun cara ini lebih ampuh dan instan alias cepat. untuk membuatnya sobat tidak usah bingung karena saya akan memberikan Cara Membuat Buku Tamu Melayang Di Blog. Baiklah tidak perlu berpanjang lebar kita langsung mulai saja yuk...
Sebelum membuat Buku Tamu Sobat harus masuk ke http://chatwing.com atau http://www.cbox.ws/
gunanya apa? untuk mengambil Script code yang akan dimasukkan ke Blog Kita. Saya sarankan Sobat buat di ChatWing Saja lebih keren dan lebih aman. untuk cara mengambil Script Code Buku Tamu nya Sobat Login Dahulu atau Daftar. 
- Setelah masuk Sobat pilih Buat Kotak Obrolan

- Setelah itu Pilih Warna Tampilan Buku Tamu
Kemudian Klik Gunakan, Lalu Klik Opsi Tersematkan, Dan Ambil Iframe Code 
Selanjutnya, Masuk Blogger ----> Tata Letak ----> Tambah Gadget -----> HTML/Javascript
Masukkan Kode Ini 
<style type="text/css">
#gb{
position:fixed;
top:120px;
z-index:+1000;
}* html #gb{position:relative;}
.gbtab{
height:150px;
width:50px;
float:left;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGe9gpCLzYKRk1b_LrnnySfIT_ZjVoHG7C8xrNkwK6eMjR1xsS8rbmaEdmvjDVVopmiSRxfDu9sRv4tPOlWJnsSCESBFJKinp9DjVniF2ip0D0iLIyM-NAYCR2JAVFXIxUTLQTY8PaAVwq/s1600/gb-oren.png') no-repeat;
}
.gbcontent {
float:left;
border:1px solid #000000;
-moz-border-radius-bottomleft:5px;
-webkit-border-radius-bottomleft:5px;
-o-border-radius-bottomleft:5px;
-khtml-border-radius-bottomleft:5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-topleft: 5px;
background: #F2F2F2; url() no-repeat bottom;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 51-w) : moveGB(30-w, 0);
gb.opened = !gb.opened;
}function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 25 ? 25 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 5);}
}</script>
<div id="gb">
<div class="gbtab" onmouseover="showHideGB()"> </div>
<div class="gbcontent">
<center>
Masukkan Code ChatWing Sobat Tadi<br />
<div style="text-align:center">
<span style="float:right; color:#ff0000;">Get this <a target="_blank" href="http://anonymous-revenge.blogspot.com/2013/08/cara-membuat-buku-tamu-keren-melayang.html">  widget! </a></span>
</div>
</center></div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (50-gb.offsetWidth).toString() + "px";
</script>
</div>
Keterangan:
Orange: Warna Border/ Garis Tepi Kotak
Biru: Warna Background Wilayah Buku Tamu
Hijau: onmouseover adalah kode untuk membuat kotak auto hide jika Sobat ingin mengubahnya menjadi klik mouse sobat bisa ubah dari onmouseover menjadi onclick
Kuning: Masukkan Iframe Code Buku Tamu yang Sobat buat tadi di ChatWing
Merah: Url Gambar, Untuk Memilih Gambar Lainnya Silahkan Pilih Gambar yang saya buat dan sediakan xD kalo kurang banyak bisa komentar, Maaf kalo buatan saya kurang bagus atau jelek :)
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGe9gpCLzYKRk1b_LrnnySfIT_ZjVoHG7C8xrNkwK6eMjR1xsS8rbmaEdmvjDVVopmiSRxfDu9sRv4tPOlWJnsSCESBFJKinp9DjVniF2ip0D0iLIyM-NAYCR2JAVFXIxUTLQTY8PaAVwq/s1600/gb-oren.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJSmUmEJatiX8w4BPtl_ldOCXRHmtjr6mmYL9aKtXJe2rHQuVaMDC5BkuUoScoPmMUhj25x8G3RQ2gFF1wwan8HgIv6Wa1tcwMAyKAwoXk_MTzh19-4D1TPoeUKu0XyDzQFNN2vgF_oiQD/s1600/bt-biru.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPtJB50k4Y6jVb7Z_u8ih11uVsklhyowIOU8_7w5MwGe1K13xpFlxWQxN2q_gzU7QPjlFr86bGwKLYYJSIbXN34ysu85YDGSAnj2689c66MCBne_86A8ZHWwxAlJDT5XPKk4uN9F7Le7cF/s1600/bt-hijau.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDbclVf8Iid5i96VigzAr2_xawUbTwL0pMrepAqvXzh76ArfScWHzNf01wuBSpSpWb0v28tRsLKSWQlOjQ3d0o7XRPr6m1Xf5QAhz1PaL0otxeZjtyDq1VHgPfmPDTiqmic_1gvI3mUB_j/s1600/bt-kuning.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNv2bbqqtzWwqh50bEljnTNR3T4RuveU4OVLJ2ImAOakR_7ZjT7U7mBM-as4xUZSEuNq8pP86uEseOcansL44_xDc3TuP2KcwKT1ejDZLc5FBC3iBlPY7ScZ3FhAfr3r9ALcYZ5Ip0MiZ1/s1600/bt-merah.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRvHGw9NCIDqtYHGUoB6SMlFVE1Pft3a2q5VHgwNIwCDRzP0O1hreyQG8ECH-6imIMMYk2lckiZ7Yc_q4JJ0-Mpj-4MB0YXfRUkKd5PvhdwG1g2GCd-M1EP4LT_Amvv3L6NpcVrn9R-HzF/s1600/bt-oren.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEumhz_H4hymfjTgVqZJ2ualGtt_rgMZfJc6YxCLUJceg4YcM_SvaVFafzi0c9fwS8EffqU6tN0Y_IOCXRtazqHOt66NZ_9-FTBkHr7oR1miIPG59QibXtuwlH8bDOuN00ARGGkJSvhIqx/s1600/gb-biru.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs4aOP6r2thrgonttdl3NHbkiGX4AyToWNAndAOSnldEKjVK2asf4nqKRKpBowJkyhVuNIJ-jbnVTl05KNZN09mm8lW2p1IZ_GHEjEkblyvDiv9y1Z9zNbwQ5ClZ7QwoB3eMX1oJ-ewZny/s1600/gb-hijau.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb7XIoR9FLIm2TjyqcEdUO47RMKCRDTKWyW6pNcTONCl5GZ64lfs1OLbUKsPdd6RULK-lv_ZL6aNhphFMjSGpbLNGBqJzyQyFWRdxeofYAhtfOsx3tnXTylwW0bHoJrRkE_GhDzpO7isaB/s1600/gb-kuning.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgecJQjivN6Z4z4Xm27xQ7VLIyN1qIGpW5i-yAq-C2mrH-gkT1GEqMdaqjfbwIAg6CZ0HhkeRGuGcl-o50OR4Y5JqW5sVumHPyT5kMg2xktX0Sg-LjcQMJGqlLevhTQ5tPFH9VuR19ox_Up/s1600/gb-merah.png


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpqw1XxCXzGUzpK001z2ooz3GAFLq92i3Sq8bqPaqqU2_5bTDZWr4EyeJtMBsCXgZc0XuxMVVnwPSW9th5X6EGewr4ZyY_53uD0wwR8T6rfQa_4oZkhiooxBirkrBJkGBJIe0dvzK0JWAS/s1600/chat+biru+tua.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinCq-hJQHvzkvSh9DSQubtwhhYqewc3nbzFhgEPdNmo7Lf_teDJGkXC5lRO-xyzWyStaY6ew9a60BUr00CAc_ePxkzlGDD6Tm4Ou8sCCvM46wiYHWy6DntHz_OyLN9Zrf1rKONkiFVb7XI/s1600/chat+hijau.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiugtFqBoLBFrB2pYVhdK0lE-yZnIGfL60wc7JBMxoXKaqe6I8RY3NEYpWu85RMwTplrThd9v0qk1QjzyADtbFeD37YF1xQ51MKt5cfQxLCks9Ig4EK7LYFnLEEYlU6QA6Wsa4IlKzw6YDU/s1600/chat+kuning.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvU2mqDoCL8H1jFIevQ3p1_PL1DZ86QYHv-qHhR5xcCwY_x0j3Wjb8sv-n9mYQxHJBN3r-kFS1kMxfUd3y5DY_HXhM_zwSLgs5AfsptzKYU9iwDqe6_RkKIPdFPZqzcT_HP6KD58BoYwTL/s1600/chat+ungu.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJCmi0mv3rQpGRwRzJO1TbvdQvY7ayFfD08AO5ocFb7dEsHpIiMjd1mro7BpK7LA2S5f-BiIKVVkSHE7gCsNSGq8CyYWesxPkiwlNhjzZ0WN2oNpS99kLepzjR90z-cndWRMwXdhzKtzX-/s1600/chat-merah.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLgOg6d6iQj259bbzJi9HTa75IpPe8h2WFBI88HpIi40QSrWYtTnFmJ0ASv6w3pyfrQLT9OXIsFHjLylXGKIk3iSu2oX531ib-aR6Ut3qFF-fIhzrvCzkP_01aSVm8SzyMn1wL-UsIXjW5/s1600/buk+utamu+biru+tua.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZjArZ8h3hMQNg8PES0cfY9gCi29RmA4ZJEStdlElGruhr6R8lPXV-bhkWlCgkfc8d3na3G0yhZ3KFt00Oz5IJ37TqdAdP1Bk8qqGxAM8YAepJYeEcZZ5wrFc8HJXlLOybekkgUrHg5r6R/s1600/buku+tamu+hijau.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcXHuczaI4Ge7RvWiUe7C2n4g_tZANBv-RVdO06-KeVWlfAk7EhBApho1CKdkmYw88b6zuQlywLQOe_SYwyzczqXszTJJah0frZm0HA4b-_0WpPoK37w2ZEmlTT0U7CTtHrej_-jhhs1Ym/s1600/buku+tamu+kuning.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipiHU0btXWtJkC3ocoKnU_5EIKxyK5KaFxp9wxEr-RWZC0lZnbx0tqyxVFDXChibtFjUaQ7q-SwRd5pGXeg54KEnS5RftLz9012VKlmI2K1uTHWGgs5bkFXkgq7Ks5E0LUvfHT1N6cUAY-/s1600/buku+tamu+merah.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSwbPRGOg4rUaaw_ZDGcfiIFEACioa5ozIUgv8uhfvEuv9kye4ar0mZwkUqyLFmqsFYtPtMWq1GGJDcpVKiJFAz15Mgymupu-nFhmRlGJ1K-E7KcLVa7NKKwTojEUeXvJZM_6U-wbL3PXG/s1600/buku+tamu+ungu.png
Oke Setelah Itu Simpan, Liat Hasilnya XD.
NB: Jika Gambar Kurang Banyak Sobat Bisa Minta Warna yang diinginkan lewat Komentar, Insya allah Saya Buatkan
Demikianlah artikel hari ini yang dapat saya sampaikan, kurang lebihnya mohon dimaafkan atau barangkali jika kurang jelas bisa komentar!!
Keywords: Cara Membuat Buku Tamu Melayang Keren Di Blog - Cara Membuat Buku Tamu - Cara Membuat Buku Tamu Melayang Di Blog - Cara Memasang Chat Box Di Blog - Cara Membuat Chat Box Melayang Di Blog - Cara Membuat Chat Box Keren Melayang Di Blog - Cara Memasang Guest Book Di Blog - Cara Membuat Guest Book Melayang Diblog - Cara Membuat Guest Book Keren Melayang Di Blog - Cara Membuat Guest Book Melayang Keren Di Blog.

Sliding Social icons with Hover effect for Blogger


Once you have seen the demo we can move on with the tutorial for adding this widget to your blogger blog.

Adding the HTML/CSS through Layout

For adding this widget in your blog go to Blog Title → Layout → Add Widget → HTML/JavaScript and paste the below code in the box.

<div class="abt-social-slide">
<ul>
<li><a class="facebook" href="#" target="_blank">Facebook</a></li>
<li><a class="twitter" href="#" target="_blank">Twitter</a></li>
<li><a class="google-p" href="#" target="_blank">Google plus</a></li>
<li><a class="rss" href="#" target="_blank">Rss</a></li>
</ul>
</div>
<style>
.abt-social-slide ul li{list-style:none;border-bottom:none;padding:0}
.abt-social-slide li a{width:59px;height:59px;float:left;text-indent:-99999px;border:solid 1px #222121;border-radius:5px;-webkit-transition:All .3s ease-out;-moz-transition:All .3s ease-out;-o-transition:All .3s ease-out;margin:5px 5px 10px;padding:0}
.abt-social-slide li a.facebook{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqDTOdQ1u780vTaWZVDlRmHhzN1lgTHW2C4m-JUc64aZpguwamJG5DGo4loDNCJid8Mxbff2f1G-krKflqNAb_WO6CGzySvelhjEKBUi4MSo1WEg82l2RifkmooqFSrQTIxhO7plh_9g/s1600/facebook.png) no-repeat 0 -88px}
.abt-social-slide li a.facebook:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqDTOdQ1u780vTaWZVDlRmHhzN1lgTHW2C4m-JUc64aZpguwamJG5DGo4loDNCJid8Mxbff2f1G-krKflqNAb_WO6CGzySvelhjEKBUi4MSo1WEg82l2RifkmooqFSrQTIxhO7plh_9g/s1600/facebook.png) no-repeat 0 0}
.abt-social-slide li a.twitter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpSWM-IgwCCygcK-3TKMNAtLhoPfe_ePOsDNhB9oymQOTHdrUlOFlKDj3FF1eg-fBcimjhPPeMcJ0ZVRBfCxkSOjHr2AptKH9kCsPBSwcNLeO-NCdb5s15ya_RTpRz9ahvsdu3rL6YHA/s1600/twitter-1.png) no-repeat 0 -88px}
.abt-social-slide li a.twitter:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpSWM-IgwCCygcK-3TKMNAtLhoPfe_ePOsDNhB9oymQOTHdrUlOFlKDj3FF1eg-fBcimjhPPeMcJ0ZVRBfCxkSOjHr2AptKH9kCsPBSwcNLeO-NCdb5s15ya_RTpRz9ahvsdu3rL6YHA/s1600/twitter-1.png) no-repeat 0 0}
.abt-social-slide li a.google-p{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwkApPCo9ayvfJKgSVKcyd_jPRjzgOAvjIPy3AE8h8Oep0mZSNmf6HDJZGev2CSpNj9jzxYK5nE8Ld78YRi0Tuno7ZLKONbBmIH8BQvqfmnaW64iv785voK9wa-B8JFM0T5_bSmd44cQ/s1600/google.png) no-repeat 0 -88px}
.abt-social-slide li a.google-p:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwkApPCo9ayvfJKgSVKcyd_jPRjzgOAvjIPy3AE8h8Oep0mZSNmf6HDJZGev2CSpNj9jzxYK5nE8Ld78YRi0Tuno7ZLKONbBmIH8BQvqfmnaW64iv785voK9wa-B8JFM0T5_bSmd44cQ/s1600/google.png) no-repeat 0 0}
.abt-social-slide li a.rss{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7GZVCI6IVpC9mo4Ljj5w6ZlnJIRk7zH8IrOxnR4tK0j5EiqwOXw3TK7xHqdUmJniH2leoE5onRw5LoplQS6IvIuzFJVKwMM4l2KszEUaVPhQKkbdtVEe-rqqDNnNqqgMPYxOaoxluPw/s1600/twitter.png) no-repeat 0 -88px}
.abt-social-slide li a.rss:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7GZVCI6IVpC9mo4Ljj5w6ZlnJIRk7zH8IrOxnR4tK0j5EiqwOXw3TK7xHqdUmJniH2leoE5onRw5LoplQS6IvIuzFJVKwMM4l2KszEUaVPhQKkbdtVEe-rqqDNnNqqgMPYxOaoxluPw/s1600/twitter.png) no-repeat 0 0}
</style>

After adding the code change # to your desired URL and save the widget. Finally save the template.

You are done now. Now you and your visitors can see this awesome sliding social icons with Hover effect in your blogger blog.

Cara Lengkap Membuat Efek Lipatan Kertas Di Ujung Blog


Berbagi pengalaman pribadi membuat lipatan kertas pada ujung kanan blog yang menurut saya agak lumayan bikin pusing sob, maklumlah pemula,, heheheheee,,,,
Setelah berkali-kali mencoba merubah kode java scriptnya, akhirnya selesai juga, dan lihat hasilnya di ujung kanan blog saya, [sedikit pamer, heheheheee,, ]
bagi sobat yang berminat untuk membuat lipatan kerta pada ujung blog seperti blog saya [tenag aja yang saya bagi tidak ada foto jelek saya kok,, heheheheee,,, ] silakan ikuti lankah-langkah berikut ini ya sobat:
1. Silahkan Login ke akun blogger sobat.

2. Lalu masuk ke design Template, klik Edit HTML

3. Seperti Biasa Centang Expand Template Widget
4. Kemudian cari kode berikut </body>
5. Setelah ketemu silakan Sobat copy dan letakkan kode di bawah ini tepat di atas kode  </body>

<script type='text/javascript'>var tujuan =&#39;http://Alamat Url Feeds Sobat&#39;</script>
<script src='http://petir-project.googlecode.com/files/ktb4.js' type='text/javascript'/>
6. Coba sobat pertinjau terlebih dahulu (Sekiranya sudah yakin baru di save ya sob)
Keterangan:
  • Kode warna hijau: ganti dengan URL Feeds sobat
  • Kode warna biru: ganti apabila sobat ingin mengganti gambar sesuai selera sobat.
Ikuti langkah-langkah berikut ini bila sobat ingin mengganti gambarnya.
Bagi sobat yang ingin mengganti gambarnya silakan download dulu scriptnya disini.  
1. Setelah sobat selesai download silakan sobat buka script tersebut dengan Notepad.
2. Untuk merubah gambar yang berukuran kecil (gambar saat lipatan tertutup) sobat cari url berikut dalam text dan silakan ubah dengan URL gambar sobat:
http://petir-project.googlecode.com/files/fedkcl.png 
(Upload gambar di code.google.com atau situs upload lainya untuk mendapatkan URL gambar)
3. Untuk merubah gambar yang berukuran besar (gambar saat lipatan terbuka) sobat ubah URL berikut dengan URL gambar sobat:
http://petir-project.googlecode.com/files/feed.png
4. Setelah selesai merubah kode URL gambar tersebut Sobat Save Text, selanjutnya silakan sobat upload text tersebut dan ganti url http://petir-project.googlecode.com/files/ktb4.js dengan URL hasil upload sobat tadi.

NB: sedikit saran apabila sobat ingin merubah gambar, sebaiknya ukuran gambar harus sesuai dengan gambar semula untuk hasil yang lebih baik.
Selamat mencoba ya sobat,,

Cara Membuat Widget Menu TAB View Pada Blog

Loading yang ringan pada blog merupakan salah satu cara untuk membuat orang senang berkunjung di blog kita, apalagi ditambah artikel-artikel yang keren, pastinya pengunjung akan membanjiri blog sobat. Cara agar loading blog kita cepat (tidak lemoet) adalah dengan memperingkas tampilan dan tidak terlalu banyak widget, salah satu caranya adalah dengan membuat widget Menu TAB View.
Menu TAB view merupakan widget tambahan berbentuk tab. Dengan cara menggunakan tab view kita dapat menghemat sidebar pada blog kita sehingga kita tidak perlu menambahkan banyak widget yang akhirnya akan memberatkan loading pada blog kita.

Untuk tampilan tab view ini lebih trendi dan menarik, tapi ini bukan berarti tampilan untuk tab view yang lama buruk. Nah, mari kita langsung ke bagaimana cara untuk membuat tab view pada blog.

1. Silahkan Login ke blog sobat
2. Masuk ke tab Perancangan lalu pilih edit HTML
3. Seperti biasa centang "Expand widget templates" untuk menghindaran apabila terjadi kesalahan.
4. Silahkan cari kode ]]></b:skin> Tekan CTRL+F untuk mengeluarkan kotak pencarian
5. Setelah ketemu kode diatas silahkan letakkan kode dibawah ini di atas kode ]]></b:skin>



5. Letakkan kode dibawah ini diatas kode </head>



6. Save template
7. Masuk ke tab Elemen laman
8. Tambahkan widget HTML/JavaScript
9. Silahkan letakkan kode dibawah ini di dalam widget HTML/JavaScript



Setelah itu simpan dan lihat hasilnya.

Trik Mempercepat Loading Blog | Tutorial Blog

Untuk Mempercepat Loading Blog ada banyak cara yang dapat dilakukan, antara lain dengan cara mengkompress kode CSS/HTML biar ukurannya jadi lebih kecil, meng-Edit Template Supaya Valid XHTML, mengkompress Image supaya lebih optimize, dan lain-lain.

Untuk kali ini saya share cara yang lain, yaitu dengan menggunakan kode script yang dicoding secara khusus untuk mempercepat loading blog. dengan menggunakan kode script ini maka browser tidak akan membaca image/gambar di blog, sehingga dapat meringankan beban server dan mempercepat loading.

Berikut tutorial penggunaan kode script untuk mempercepat loading blog :
  • Masuk ke akun blogger anda
  • Klik pada Template. (jangan lupa backup dulu template anda, untuk menghindari sesuatu yang tidak diinginkan).
  • Selanjutnya, klik Edit HTML dan klik Proceed / Lanjutkan.
  • Beri tanda centang pada Expand Template Widget.
  • Cari kode </head> gunakan CTRL + F pada keyboard.
  • Lalu letakkan kode berikut di atas kode </head>.
    <script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
    <script src='http://wadah-tutorial.googlecode.com/files/superload.js' type='text/javascript'/>
    <script charset='utf-8' type='text/javascript'> $(function() { $(&quot;img&quot;).lazyload({placeholder : &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2tN4p2YjHM-QrJygE8DVzDZunOz81_TRFymkxhQcny8bpj8WmQTRIggBTn8iCN2l8o_G6qr7IUHN6HveowOBC3m4lYR7SEmvQUHz8h-Kn2G7rmqfZEFNGnRpnTcfOo8Fnh8-zOpEbqtc/&quot;,threshold : 200}); }); </script>
  • Terakhir klik Simpan Template.
Sekarang lihat blog Sobat dan rasakan bedanya, semoga bermanfaat...

Tips Mengatasi Pencurian Artikel Blog | Tutorial Blog

Ketika saya menemukan sebuah blog yang mencuri penuh artikel blog saya ini dengan menggandalkan fasilitas import pada feedrss, saya merasa jengkel, karena postingan yang kita ketik sendiri dengan susah payah dengan mudahnya dibajak oleh autoblog yang menggandalkan langganan feed pada blog, apalagi tidak di sertai dengan backlink sumbernya.

Karena itu kita jangan menganggap remeh pengaturan feed pada blog, agar para pencuri artikel tidak leluasa menerapkan aksinya, pada postingan ini saya ingin berbagi trik untuk mengatasi pencurian artikel dengan menyeting feed pada blog kita.

Berikut beberapa cara yang bisa kita terapkan pada blog :

Cara pertama dengan mengubah izin feed blog yang tadinya "penuh" menjadi "singkat".
Dengan cara ini pembajak feed hanya dapat mencopy artikel kita secara terbatas yaitu 400 karakter pertama saja.

Caranya :
  • Login ke Blog sobat.
  • Klik Dasbor > Setelan > Lainnya.
  • Pada "Izinkan Umpan Blog", ganti opsi Penuh menjadi Singkat.
    Tips Mengatasi Pencurian Artikel Blog
  • Simpan Setelan
Cara kedua dengan memberikan link aktif alamat blog sobat pada kolom "Footer Feed Posting".
Ini berguna apabila pembajak feed mencopy penuh artikel sobat, maka dibawah postingan terdapat link aktif yang berfungsi menjadi backlink.

Caranya :
  • Login ke Blog sobat.
  • Klik Dasbor > Setelan > Lainnya.
  • Pada "Footer Feed Posting" klik "Tambahkan".
    Tips Mengatasi Pencurian Artikel Blog
  • Lalu masukan script dibawah ini:
    <a href="URL BLOG">Copyright by: NAMA BLOG</a>
    contoh :
    <a href="http://wadahtutorial.blogspot.com/">Copyright by: Tutorial Blog</a>
  • Simpan Setelan
Cara ketiga dengan menghapus feed pada Blogger.
Dengan cara ini para pembajak feed tidak dapat mencuri artikel anda, karena tidak ada feed yang akan di bajak, namun para pelanggan blog kita tidak dapat mengetaui update artikel baru di blog kita. Jadi dipikir dulu sebelum menerapkan cara ini.

Caranya :
  • Login ke Blog sobat.
  • Klik Dasbor > Setelan > Lainnya.
  • Pada "Izinkan Umpan Blog" pilih "Tak Satupun".
    Tips Mengatasi Pencurian Artikel Blog
  • Simpan Setelan.
Semoga dengan beberapa cara di atas Sobat dapat lebih melindungi blog sobat dari para pembajak feed.

Membuat Text Berjalan | Tutorial Blog

Text Berjalan (Marquee Text) merupakan salah satu trik untuk membuat blog lebih atraktif, trik ini sering di gunakan pada sidebar, footer dan postingan, dengan tujuan untuk memperindah Blog, dan agar pengunjung tidak bosen liat blog kita.
Kali ini saya akan berbagi cara membuat text berjalan.
contoh :
"Selamat Datang Di Blog Saya"

Untuk membuat text diatas sobat cukup Copy kode berikut ini dan Paste pada blog Sobat,
<marquee align="center" direction="left" scrollamount="3" width="60%" height="50">

"Selamat Datang Di Blog Saya"

</marquee>
Kata "Selamat Datang Di Blog Saya" dapat Anda ganti dengan tulisan yang Sobat inginkan, selain tulisan Sobat juga bisa menggunakannya untuk Link ataupun image.

Keterangan :
  • Direction "Left" : text akan bergerak ke kiri, klo Sobat pengen gerak ke kanan, ganti dengan "right", "up" = ke Atas atau "Down" Gerak ke bawah.
  • Scrollamount="3" : Kecepatan geraknya, silakan diganti.
  • Width : Lebar area marquee.
  • Height : Tinggi area marquee.
Silakan dicoba Sob, Semoga bermanfaat...

Membuat Tulisan Berkedip | Tutorial Blog

Selain Text Berjalan (Marquee Text) untuk memperindah Blog, Sobat juga bisa menggunakan trik yang satu ini untuk untuk membuat blog lebih atraktif.

* Selamat Datang *
  • Untuk membuat text seperti diatas caranya gampang Sob, cukup copy kode dibawah ini.
    <a style="color: #ff0000; font-size: 22px; text-decoration: blink;">
    Tulisan Anda…
    </a>
    Lalu paste ke mode html tulisan anda.
    Ket :
    color: #ff0000 = kode warna tulisan, ganti dengan kode warna yang Anda inginkan.
    font-size: 22px = ukuran tulisan, atur sesuai keinginan Anda.
  • Untuk merubah posisi text, Sobat dapat menambahkan kode berikut :
    <p style="text-align: center;">
    kode
    </p>
    Ket :
    text-align: center = Posisi text di tengah, untuk memindahnya ke kanan sobat dapat mengganti dengan "right" atau "left" (kiri).
    Sebagai contoh saya menggunakan kode berikut :
    <p style="text-align: center;">
    <a style="color: ff0000; font-size: 22px; text-decoration: blink;">* Selamat Datang *</a>
    </p>
    Maka hasilnya akan seperti ini :
Selamat Mencoba Sob, Semoga Bermanfaat...

Memasang Tombol Like Facebook Pada Tiap Postingan | Tutorial Blog

Berikut cara memasang tombol like Facebook pada tiap postingan di blogspot :
  • Login ke blogger Anda dan klik Rancangan > Edit HTML.
  • Pastikan kotak Expand Template Widget dicentang.
  • Cari kode ini <data:post.body/>, supaya lebih mudah gunakan Ctrl + F
  • Setelah kode di atas ditemukan, Paste kode di bawah ini. Letakan sebelum atau sesudah kode <data:post.body/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'><div><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/></div> </b:if>
  • Klik Simpan Template.
  • Sekarang coba lihat masing-masing postingan Anda.
Ok, Selamat Mencoba...

Memasang Like Box Facebook | Tutorial Blog

Pada postingan yang lalu saya berbagi tentang cara Memasang Tombol Like Facebook Pada Tiap Postingan, untuk kali ini saya bahas cara Memasang Like Box Facebook di Blogspot dan Wordpress.com
Sebelum memasang widget Like Box Facebook, Sobat harus mempunyai akun facebook dan membuat fans page terlebih dulu.
Untuk langkah membuat fans page facebook dapat Sobat ikuti tutorial ini:
  • Login ke Facebook. Lalu buka link http://www.facebook.com/pages/create.php?
  • Selanjutnya pilih salah satu icon, biar lebih mudah pilih Merek atau Produk.
    Tutorial Blog,Widget
  • Pilih Kategori dan isi nama blog Anda pada kolom dibawahnya. Beri centang pada Saya menyetujui Ketentuan Halaman Facebook. Lalu klik Mulai.
    Tutorial Blog,Widget
  • Terus ikuti perintahnya sampai selesai, yang perlu di ingat alamat fans page Anda, lihat gambar :
    Tutorial Blog,Widget
Selanjutnya Cara Membuat dan Memasang Like Box Facebook di Blogspot :
  • Buka http://developers.facebook.com/docs/reference/plugins/like-box/
  • Pada kotak Facebook Pages URL (?), masukkan url dari fans page sobat.
    Contoh : http://www.facebook.com/pages/Tutorial-Blog/176280822460028
  • Tentukan Width / lebar dari box yang ingin Sobat tampilkan. Jika sudah selesai klik Get Code.
    Tutorial Blog,Widget
  • Pilih IFRAME. Dan Copy kode yang diberikan.
    Tutorial Blog,Widget
  • Login ke blogger
  • Pilih Rancangan > Edit Laman > Tambah Gadget > HTML/JavaScript, dan pastekan kode tadi di kolom Konten.
    Tutorial Blog,Widget
    Jika belum bisa menambah widget silakan baca Memasang Widget / Gadget di Blogspot
  • Save / Simpan dan lihat hasilnya.
Cara Memasang Like Box Facebook di WordPress :
  • Login ke wordpress Anda, Masuk ke Appearance > Widget.
    Tutorial Blog,Widget
  • Cari widget Facebook Like Box, Drag ke sidebar.
    Tutorial Blog,Widget
  • Isi Facebook Page URL dengan alamat URL pages facebook Sobat,
    Contoh : http://www.facebook.com/pages/Tutorial-Blog/176280822460028
  • Tentukan lebar box sesuai lebar sidebar, atur pada Width.
  • Klik Simpan / Save.
    Tutorial Blog,Widget
  • Selesai. Sekarang lihat halaman Blog Anda.
Selamat Mencoba . . .

Mempercepat Loading Blog | Tutorial Blog

Mempercepat Loading Blog merupakan salah satu cara untuk meningkatkan jumlah Pageview, jika loading blog Sobat cepat maka pengunjung akan merasa nyaman, karena apa yang ingin di baca akan cepat di tampilkan, sehingga Traffic Blog juga akan meningkat.
Berikut ini beberapa tips untuk mempercepat loading blog versi Tutorial Blog :
  • Jangan terlalu banyak membuat label blog
  • Kurangi script dari pihak ketiga baik itu berupa widget ataupun kode-kode iklan
  • Gunakan widget atau banner seperlunya dan buang yang tidak penting.
  • Compress CSS biar ukurannya jadi lebih kecil
  • Kompress Image supaya lebih optimize
  • Gunakan template yang simple dan tidak banyak meload gambar
  • Edit Template Supaya Valid XHTML
Kiranya itu saja, moga aja benar, kalau ada yang salah tolong di koreksi, jika ada yang mau menambahkan silakan tulis di kotak komentar.
Sekian Artikel tentang Mempercepat Loading Blog.

Mempercepat Loading Blog dengan Kompress Image | Tutorial Blog

Untuk mempercepat loading blog, selain dengan Compress CSS kita juga perlu mengkompress gambar / image, Anda bisa menggunakan image optimizer dari www.imageoptimizer.net. untuk menggunakannya anda bisa ikuti tutorial dibawah ini:
  • Siapkan gambar yang akan di optimize.
  • Buka www.imageoptimizer.net.
  • Klik Browse dan pilih gambar yang akan di optimiskan
  • Tentukan ukuran lebar dan tinggi gambar.
  • Lalu klik Optimize Now.
    Tutorial Blog, Seo Tool
  • Pada halaman selanjutnya klik Download to your Computer.
    Tutorial Blog, Seo Tool
    selesai...
Untuk lebih cepat Sobat bisa Download softwarenya dan instal pada komputer Sobat.
Download

Untuk langkah mengoptimiskan image :
  • Klik kanan pada image pilh Optimize Image As...
    Tutorial Blog, Seo Tool
  • Kemudian atur lebar dan tingginya, Lalu klik Optimize
    Tutorial Blog, Seo Tool
    Ok selesai
Silakan di coba Sob, Semoga bermanfaat...

Tool Untuk Mengetahui Kecepatan Loading Blog | Tutorial Blog

Untuk mengetahui kecepatan loading blog, Anda bisa menggunakan tool page speed, Tool ini memberikan keterangan tentang kecepatan loading sebuah blog saat di tampilkan. Sebagian ada juga yang memberikan keterangan tentang apa saja yang perlu di optimasi pada blog Anda. Dibawah ini akan saya berikan beberapa alamat situs yang menyediakan tool untuk mengecek kecepatan loading blog :

Buat Sobat yang ingin mengetahui loading blognya silakan dicoba situs diatas, buat yang ingin menambah silakan tulis di komentar.
Sepertinya cukup segini aja artikel dari saya tentang Tool untuk mengetahui kecepatan loading Blog.

Widget untuk Mengetahui Pengunjung Blog | Tutorial Blog

Feedjit (Widget untuk Mengetahui Pengunjung Blog) | Untuk mengetahui siapa dan dari mana saja pengunjung blog kita, kita dapat menggunakan Widget yang satu ini. widget ini juga membantu kita untuk mengetahui waktu kunjungan di blog.
Langkah pemasangan Widget ini pada Wordpress dan Blogspot tidak sama, karena Wordpress.com tidak mengizinkan kode Javascript, oleh sebab itu pada tutorial ini akan saya bahas cara memasang Feedjit di Wordpress.com dan Blogspot.com
Berikut langkah memasang Widget untuk Mengetahui Pengunjung Blog :
  • Memasang di WP.com :
  1. Masuk ke http://feedjit.com/joinimg/, akan muncul halaman awal dari website penyedia.
    Tutorial Blog, Feedjit
  2. Tentukan lebar dan berapa entri yang ingin Sobat tampilkan, lalu klik Apply.
    Tutorial Blog, Feedjit
  3. Selanjutnya, copy kode dalam kotak
    Tutorial Blog, Feedjit
  4. Lalu paste ke dalam widget Sobat. dan klik Save.
    Tutorial Blog, Feedjit
    selesai
  • Memasang di Blogspot :
  1. Masuk ke http://feedjit.com/plansPricing/
  2. Klik Sign Up pada Feedjit Completely Free
    Tutorial Blog, Feedjit
  3. Pada halaman selanjutnya atur tampilan widget seperti keinginan Anda.
    Tutorial Blog, Feedjit
  4. Pada bagian untuk menginstall di blog pilih Other Blog or website. lalu klik GO!
    Tutorial Blog, Feedjit
  5. Lalu Copy kode yang diberikan
    Tutorial Blog, Feedjit
  6. Selanjutnya login ke blogger, klik Rancangan > Elemen Laman
    Tutorial Blog, Feedjit
  7. Pilih Tambah Gadget > HTML / JavaScript
    Tutorial Blog, Feedjit
  8. Paste Kode dari Feedjit, dan klik Simpan
    Tutorial Blog, Feedjit
    Selesai...
Kiranya sampai disini tutorial tentang memasang Widget untuk Mengetahui Pengunjung Blog