Widget Semut Berjalan Di Blog

Hallo, ketemu dengan saya lagi saya akan memposting cara membuat Semut Berjalan Di Blog tapi tenang bukan semut beneran kok jadi santai aja :D dan akan mempercantik blog sobat langsung saja


Cara Memasang Widget Semut Berjalan Di Blog

Langkah 1 : Silahkan Anda Login ke Akun Blogger Sobat
Langkah 2 : Klik Tata Letak
Langkah 3 : Tambah Gadget
Langkah 4 : Pilih HTML/JavaScipt
Langkah 5 : Pastekan kode Script di bawah ini

<div style="display:scroll; position:fixed; top:150px; center:20px;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiy79Me_JADVgv4cAkCmfhep4K0ys30XRmYLcbs5gpRJ_-aOH6U5dskvnWjj_MHZcbmPIklU8c25YtforxOazXShWZBXHJ8deqLzbUX1ZTb1QnKgQS1zLFRrEAWKi4jYDZrVtgdk96gum-j/s1600/semutfuny.gif" /></div>

Langkah 6 : Simpan dan Lihat Hasilnya

KETERANGAN
1. kode top:150px adalah jarak dari atas, silahkan kalo mau dibawah ganti top menjadi bottom
2. kode center:20px adalah jarak ditengah, jika sobat ganti left atau right maka letaknya disamping kiri atau kanan.

Berikut adalah bentuk jadinya :

Read Full Story...

Cara Mendapatkan Link In di Alexa

Alexa dapat menghitung semua kegiatan lalu lintas blog anda, jadi dengan begitu sobat dapat mengetahui apakah blog anda sudah bagus trafiknya atau tidak. Alexa tidak hanya menghitung lalu lintas blog saja, tetapi alexa juga menyediakan widget untuk blog baik itu blogspot maupun wordpress dan alexa juga menyediakan toolbar untuk browser yang dipakai di komputer sobat. Dan ternyata banyak para blogger yang memiliki Alexa Rank yang bagus mengikuti cara yang satu ini, penasaran kan sama caranya.


Caranya sangatlah mudah, anda hanya tinggal copy link yang berada di bawah ini dengan syarat anda harus menghapus link pada peringkat 1 dari daftar, lalu pindahkan yang tadinya nomor 2 menjadi nomor 1, nomor 3 menjadi nomor 2, nomor 4 menjadi nomor 3, dst. Kemudian masukan link blog anda sendiri pada urutan paling bawah (nomor 10). Dan silahkan ajak teman anda untuk mengikuti cara ini serta sebarkan cara ini ke banyak Situs Jejaring Sosial anda.

1. google.co.id
2. youtube.com
3. facebook.com
4. boytriks.blogspot.com
5. kotakcara.co.cc
6. perjuangansemut.co.cc
7. bloggertrick.blogspot.com
8. pasargamer.blogspot.com
9. rubikblogger.blogspot.com
10. escdace.blogspot.com

Keterangan :

Jika sobat mampu mengajak 5 orang saja untuk mengcopy artikel ini maka jumlah backlink yang akan didapat adalah :

Posisi 10, jumlah backlink = 1

Posisi 9, jumlah backlink = 5

Posisi 8, jumlah backlink = 25

Posisi 7, jumlah backlink = 125

Posisi 6, jumlah backlink = 625

Posisi 5, jumlah backlink = 3.125

Posisi 4, jumlah backlink = 15.625

Posisi 3, jumlah backlink = 78.125

Posisi 2, jumlah backilnk = 390.625

Posisi 1, jumlah backlink = 1.953.125

Dan nama dari alamat blog sobat juga bisa diubah sesuai dengan kata kunco yang sobat inginkan yang dapat menarik perhatian untuk di klik. Dari segi SEO anda sudah mendapatkan 1.953.125 backlink dan efeknya jika pengunjung mengklik link anda maka anda akan mendapat trafik yang tambahan.

Semoga bermanfaat dan selamat mencoba.

Read Full Story...

Cara Membuat Background Animasi

Anda mungkin pernah bermimpi atau pernah melihat blog dengan background Animasi (yang bisa bergerak). Saya melihat pada Blog teman saya sekelas saya Fandy Gunawan menggunakan animasi background bi blog nya maka saya akan mengeshare cara membuat nya.. Cekidoottt

Cara Membuat Animasi Blackground Di Blog :

Langkah 1 : Login Kedalan Akun Blogger Anda.
Langkah 2 : Klik Rancangan --> Edit HTML --> Expand Template Widget.
Langkah 3 : Cari Kode </head> (CTRL + F)
Langkah 4 : Kemudian Copy Kode di bawah ini dan taruh tepat diatas kode </head>

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

KETERANGAN : Jika Anda Sudah Pernah Menaruh Kodee JQuery, maka jangan ikuti langkah diatas / dilewati

Langkah 5 : Copy Kode dibawah ini dan taruh tepat diatas kode </head>

<script type='text/javascript'>
//<![CDATA[
$(function(){
// ***
// Scrolling background
// ***
// height of background image in pixels
var backgroundheight = 4000;

// get the current minute/hour of the day
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();

// work out how far through the day we are as a percentage - e.g. 6pm = 75%
var hourpercent = hour / 24 * 100;
var minutepercent = minute / 30 / 24 * 100;
var percentofday = Math.round(hourpercent + minutepercent);

// calculate which pixel row to start graphic from based on how far through the day we are
var offset = backgroundheight / 100 * percentofday;

// graphic starts at approx 6am, so adjust offset by 1/4
var offset = offset - (backgroundheight / 1);

function scrollbackground() {
// decrease the offset by 1, or if its less than 1 increase it by the background height minus 1
offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;
// apply the background position
$('body').css("background-position", "50% " + offset + "px");
// call self to continue animation
setTimeout(function() {
scrollbackground();
}, 70
);
}
// Start the animation
scrollbackground();
});

//]]>
</script>

Langkah 6 : Copy Kode Dibawah ini Untung Memasang Gambar Background Animasi

<style>
body {
background: black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe9isojXJM2WGFAQP86yG4UuGZRbaTGFwtaR4LDpvVrLDgnii9dp0c4p772fDRMhDojoebhEPWt-WH3EdeECufH4ouDejLs3R8Xp6BrVgVPguDk2elDwb0OtdV6GMjS3QqYvE3Xdy4aaTS/s800/animated%2520stars.gif) repeat center; background-attachment: fixed;
}
</style>

Langkah 7 : Simpan dan lihat Hasilnya

KETERANGAN : Anda dapat mengganti Animasi Background dengan pilihan dibawah ini. ganti kode warna kuning dengan kode background yang anda inginkan.
Berikut ada beberapa pilihan:

RED MATRIK

Kodenya : http://i1113.photobucket.com/albums/k514/S4NDMOTION/matrix_red_inner.gif

PLURP

Kodenya : http://i1113.photobucket.com/albums/k514/S4NDMOTION/1-purp1.gif

LIGHTNING

Kodenya : http://i1113.photobucket.com/albums/k514/S4NDMOTION/32-riem.gif

STAR

Kodenya : http://i1113.photobucket.com/albums/k514/S4NDMOTION/animated_background_a2.gif

Read Full Story...

Cara Membuat Gambar Slide Show

APA ITU SLIDE SHOW ?
Slideshow adalah cara terbaik untuk memamerkan foto Anda, posting fitur, gambar dan materi lain seperti Anda wish. Kami mencari sebuah tutorial tentang menambahkan nivo slider ke blogger tapi banyak dari Anda mendapatkan masalah saat menambahkannya ke blogger blog . Itulah mengapa saya dianggap berbagi gambar penuh dan mudah disesuaikan slider / gallery.

PENDAPAT SAYA TENTANG WIDGET SLIDE SHOW.
Ini adalah slider sederhana gambar dengan banyak pilihan seperti dimensi menyesuaikan, play, pause, interval antara berikutnya dan sebelumnya slide dan beberapa naskah options.The lain galeri ini diambil dari dynamicdrive dan saya telah membuat beberapa perubahan sehingga Anda dapat dengan mudah menambahkannya ke instalasi blog.

Cara Mudah Membuat Widget Slide Show Di Blogger Keren Banget :

Langkah 1 : Silahkan Anda Login ke Akun Blogger Sobat
Langkah 2 : Klik Tata Letak
Langkah 3 : Tambah Gadget
Langkah 4 : Pilih HTML/JavaScipt
Langkah 5 : Pastekan kode Script di bawah ini


<style type="text/css">
#simplegallery2 {
 //CSS for sample Gallery
position: relative;
 visibility: hidden;
 border: 5px solid black;
 margin: auto;
}

#simplegallery2 .gallerydesctext {
 //CSS for description DIV of Example 1 (if defined)
text-align: left;
 padding: 2px 5px;
 font-family: calibri;
}
</style>

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

<script type="text/javascript" src="http://code.helperblogger.com/image-gallery.js">
</script>

<script type="text/javascript">
var mygallery2=new simpleGallery({
 wrapperid: "simplegallery2", //ID of main gallery container,
 dimensions: [400, 275], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
 imagearray: [

 ["LINK FOTO 1 DISINI", "#", "_new", "DESKRIPSI FOTO DISINI"],

 ["LINK FOTO 2 DISINI", "#", "_new", "DESKRIPSI FOTO DISINI"],

 ["LINK FOTO 3 DISINI","#", "_new", "DESKRIPSI FOTO DISINI"],

 ["LINK FOTO 4 DISINI", "#", "_new", "DESKRIPSI FOTO DISINI"],

 ["LINK FOTO 5 DISINI", "#", "_new", "DESKRIPSI FOTO DISINI"]
 ],
 autoplay: [true, 2500, 2], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
 persist: true,
 fadeduration: 1000, //transition duration (milliseconds)
 oninit:function(){ //event that fires when gallery has initialized/ ready to run
 },
 onslide:function(curslide, i){ //event that fires after each slide is shown
 //curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
 //i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
 }
})
</script>
<div id="simplegallery2"></div>

Langkah 6 : Simpan dan Lihat Hasilnya

KETERANGAN
1. Jika Ingin Jenis Font Berganti Ubah calibri menjadi font lainnya.
2. Ubah Ukuran Gambar 400 adalah lebar dan 275 adalah tinggi.
3. Ubahlah LINK FOTO DISINI dengan Link Url Foto Anda.
4. Ganti # dengan Link yang ingin anda tambahkan dengan gambar tertentu.
5. Ganti DESKRIPSI FOTO DISINI dengan deskrepsi foto anda. Jika anda tidak mau menambahkan deskrepsi foto mak hapuslah DESKRIPSI FOTO DISINI.
6. Untuk mengubah interval waktu antara slide selanjutnya dan sebelumnya kemudian edit 2500

Read Full Story...

Widget Unik Telur Ceplok Di Blog

Hallo Sobat Blogger ketemu lagi dengan saya maaf kalo saya jarang posting karena Saya lagi sibuk maen Game nih.... Heeeeheee Alah kok jadi Curhat. Baiklah kali ini saya akan memposting Widget Unik lagi nih yang Sebelumnya saya memposting Widget Unik Banjir Di Blog udah di coba belum,, kalo belum dicoba dong apa milih yang widget ini.
Blog sobat hampir sama seperti penggorengan kalau menggunakan widget yang satu ini, hee..Telur ceplok ada dimana-mana, bikin laper, bikin risih, tapi unik..Buat sobat blogger yang ingin menambahkan widget telur cepluk ini ke blog nya. Silahkan ikuti langkah dibawah ini :


Langkah 1 : Silahkan Anda Login ke Akun Blogger Sobat
Langkah 2 : Klik Tata Letak
Langkah 3 : Tambah Gadget
Langkah 4 : Pilih HTML/JavaScipt
Langkah 5 : Pastekan kode Script di bawah ini

<script language="javascript"> nd_mode="eggs"; nd_vAlign="bottom"; nd_hAlign="right"; nd_vMargin="10"; nd_hMargin="10"; nd_target="_blank"; </script> <script language="javascript" src="http://blogtrikdantips-blogspot.googlecode.com/files/efektelur.js"></script>

Langkah 6 : Simpan dan Lihat Hasilnya

Read Full Story...

Widget Unik Banjir Di Blog

Banjir...Banjir...Banjir..Musim hujan begini sudah pasti banyak daerah-daerah yang terkena banjir, terutama kota jakarta tercinta ini. Sobat rumah nya tidak terkena banjir kan ? kalau sudah terkena banjir, siap-siap saja semua aktifitas sobat bakal terganggu. Postingan kali ini, masih berkaitan dengan widget-widget unik yang bisa sobat tambahkan di blog sobat
Widget ini sangat unik, bahkan karena terlalu unik, sepertiya jarang ada yang memakai widget ini, tapi kalau sobat ingin blognya terlihat berbeda dengan yang lain, tidak ada salahnya sobat pakai yang satu ini

Langkah 1 : Silahkan Anda Login ke Akun Blogger Sobat
Langkah 2 : Klik Tata Letak
Langkah 3 : Tambah Gadget
Langkah 4 : Pilih HTML/JavaScipt
Langkah 5 : Pastekan kode Script di bawah ini


<script language="javascript">
nd_mode="flood";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_target="_blank";
</script>
<script language="javascript" src="https://blogtrikdantips-blogspot.googlecode.com/files/efek_banjir.js"></script> 

Langkah 6 : Simpan dan Lihat Hasilnya

Read Full Story...

Mengenal Alexa

Apakah Alexa Rank Itu Dan Apa Manfaat Alexa Rank Pada Blog

Alexa Rank adalah sebuah situs yang beralamat di www.alexa.com yang menyediakan fasilitas informasi tentang rangking/peringkat suatu situs, yang didasarkan pada jumlah trafik pengunjung yang masuk ke situs tersebut. Yang mana semakin besar trafficnya maka semakin tinggi peringkat dari situs tersebut dan juga sebaliknya semakin kecil traffiknya maka semakin rendah lah peringkat dari situs tersebut, hal ini sangatlah perlu diketahui oleh seorang blogger yang memang ingin menjadikan situsnya sebagai lahan bisnis.

Alexa Rank mempunyai nilai peringkat dari nilai terkecil yaitu angka 1 ( satu ) sampai dengan seterusnya ( nilai berjuta-juta ) yang mana dalam perhitungan sistem di Alexa Rank apabila semakin kecil nilai Alexa Rank situs anda maka semakin baguslah peringkat situs tersebut.


Pada saat postingan ini saya keluarkan situs yang ada dibawah inilah yang masuk dalam 10 daftar posisi teratas dalam versi Global dari Alexa Rank.
Google.com
Facebook.com
Youtube.com
Yahoo.com
Baidu.com
Wikipedia.org
Live.com
Blogspot.com
Twitter.com
QQ.com
Dan untuk peringkat Catatan Pena hanya dapat puas untuk bertengger pada posisi sementara yaitu seperti gambar yang anda lihat dibawah ini yach lumayan lah daripada loe manyun...hehehe.

Berandai-andai nih...bisa gak ya blog saya ini Catatan Pena mengalahkan situs google.com atau facebook.com ? wuakakakakak...angan-angan tukang cendol...mimpi aja kali yeee...!!!  oke kita lanjut...!

Pertanyaan kita seberapa pentingkah Alexa Rank tersebut..?

Menurut saya penting / tidaknya Alexa Rank pada situs kita tergantung pada si pemilik situs tersebut, apabila situs tersebut anda ciptakan bertujuan untuk mencari uang tentu peringkat situs kita dalam Alexa Rank wajib anda perhitungkan, dikarnakan bagusnya Alexa Rank situs anda menggambarkan bahwa situs anda tersebut populer dan berakibat banyaknya Advertiser yang ingin memasang iklan di situs anda, namun apabila situs yang anda buat hanyalah untuk iseng-iseng saja tentulah Alexa Rank tidaklah begitu penting.

Alexa rank juga berpengaruh pada pengunjung atau pembaca blog anda, jika Alexa Rank Anda bagus tentunya mereka akan lebih antusias dan loyal terhadap blog tersebut dan pembaca akan semakin meningkat. Dan untuk memasang widged Alexa Rank di blog anda bisa membaca artikel saya berikutnya tentang Cara Memasang Alexa Rank Di Blog, demikianlah sedikit penjelasan mengenai Alexa Rank.

Read Full Story...

Cara Membuat Tanda Tangan

Cara Memasang Tanda Tangan di Blog - Apa kabar sobat blogger! Senang di pagi yang cerah ini saya kembali menyapah sobat blogger... Hmmm. sekedar info, mungkin beberapa hari kedepan ane tak mungkin ngapdet posting serutin ini jadi kali ini saya akan kasih tutorial cara memasang tanda tangan dengan selengkap - lengkapnya.
Pada postingan sebelumnya kita telah membahas tentang Kumpulan Efek - Efek Blog, dan kali ini setelah sekain lama tersimpan di draft akhirnya artikel ini di Poskan dengan judul Cara Bikin Tanda Tangan di Blog. Mungkin di antara sobat blogger sudah pernah melihat hiasan yang satu ini, biasanya diletakkan di bagian bawah postingan yang semakin menegaskan bahwa sobat adalah pemilik resminya. Bagi sobat yang tertarik, silahkan ikuti tutorial berikut.


Cara Memasang / Membuat Tanda Tangan di Blog
1. Kunjungi situs http://mylivesignature.com//
2. Klik pada tombol bertuliskan Proceed untuk membuat tanda tanda tangan tanpa perlu registrasi
3. Setelah itu, klik tulisan Using the signature creation wizard

4. Silahkan masukkan nama sobat di kotak yang di sediakan dan klik Next Step
5. Pilih jenis huruf yang di inginkan dan klik Next Step
6. Setelah itu, tentuhkan ukuran tanda tangan yang di inginkan dan klik Next Step
7. Kemudian sobat akan melihat tampilan seperti berikut yang bertanda bahwa tanda tangan sobat akan segera jadi. Pilih warna background dan warna tanda tangan yang di inginkan


Tambahan :
Untuk warna background direkomendasikan menggunakan background ( latar ) transparan agar nantinya cocok dengan semua warna.

8. Atur kemiringan ( slope ) teks dan klik Next Step
9. Nah dengan demikian maka tanda tangan online sobat telah berhasil dibuat


Tambahan :
Klik Copy Image Location untuk mengambil URL gambarnya
Klik Save Image As untuk mendownload Tanda Tangannya.

Read Full Story...

Cara Membuat Likebox Melayang

Cara Membuat Facebook Likebox Melayang (Slide) dipinggir Blog, Terupdate!!

Hallo sahabat blogger ketemu lagi dengan saya Ian Angga Dewantoro, gimana nih kabarnya kali ini saya akan memposting tentang tutorial blogger nih, sebenarnya saya ingin memposting tentang android tetapi males upload apk nya :D heheh kapan kapan aja ya....
Oke langsung saja Cekidow Cekidow......

Cara Membuat Facebook Likebox Melayang di pinggir Blog :

Langkah 1 : Login ke Blogger Anda
Langkah 2 : Klik Menu Rancangan --> EDIT HTML
Langkah 3 : Download dulu Template Anda
Langkah 4 : Cari Kode </head> ( Gunakan CTRL + F)
Langkah 5 : Kemudian copy kode dibawah ini dan taruh tepat dibawah kode </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

PERINGATAN :
Jika Sudah Terdapat kode tersebut di Blog anda maka step 1 - 6 ini tidak perlu / tidak perlu dilakukan

Langkah 6 : Simpan
Langkah 7 : Pilih Menu Tata Letak --> Tambahkan Gadget
Langkah 8 : Pilih HTML/JavaScript
Langkah 9 : Kemudian copy kode dibawah ini dan taruh di HTML/JavaScript tadi

<script type="text/javascript">
//<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.w2bslikebox{background: url("http://3.bp.blogspot.com/-KdSAuv-K7HM/To_WXoWHzJI/AAAAAAAAGvg/5UvL10LUe_k/facebook.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/pages/Dunia-ESCDACE/4872867213332421&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=330" scrolling="no" frameborder="0" style="border: medium none; overflow: hidden; height: 330px; width: 245px;background:#fff;"></iframe><span>Get This<a href="http://escdace.blogspot.com/2013/11/cara-membuat-likebox-melayang.html">Widget</a></span></div></div>

Langkah 10 : Simpan dan Lihat Hasilnya

PERINGATAN :
1. Ganti Tulisan Biru dengan gambar yang anda inginkan (Tidak diganti tidak masalah)
2. Ganti Tulisan Aqua dengan URL Fanspage Sobat (Harus Diganti)
3. Tulisan Hijau adalah Ukuran Gambar (Tidak diganti tidak masalah)

Read Full Story...

Cara Membuatulisan Berjalan Seperti di Ketik

Cara Membuat Efek Tulisan Berjalan Seperti di Ketik Full


Cara Membuat Efek Tulisan Berjalan Seperti di Ketik - Setelah kemaren saya share Cara Membuat Widget Sharing Melayang. Efek Tulisan ini seperti halnya kita mengetik di Laptop atau di PC kita. Huruf per huruf akan muncul dengan tahap, sekali lagi sama seperti huruf kalau kita mengetik. Nah bagi sobat yang belum jelas silahkan anda coba saja Oke.. Cekidow Cekidow...

Cara Memasang
Langkah 1 : Login ke Blogger Anda.
Langkah 2 : Klik Tata Letak --> Tambah Gadget --> HTML/JavaScript.
Langkah 3 : Kemudian copy Script berikut ini kedalam box HTML/JavaScript tadi.



<script language="JavaScript">
var text="Selamat Datang di Blog Sederhana ini, Jangan lupa Bisa Tinggalkan Komentar";
var delay=20;
var currentChar=1;
var destination="[none]";
function type()
{
//if (document.all)
{
var dest=document.getElementById(destination);
if (dest)// && dest.innerHTML)
{
dest.innerHTML=text.substr(0, currentChar)+"<blink>_</blink>";
currentChar++;
if (currentChar>text.length)
{
currentChar=1;
setTimeout("type()", 5000);
}
else
{
setTimeout("type()", delay);
}
}
}
}
function startTyping(textParam, delayParam, destinationParam)
{
text=textParam;
delay=delayParam;
currentChar=1;
destination=destinationParam;
type();
}
</script> <div 0px="" 12px="" arial="" color:="" ff0000="" font:="" id="textDestination" margin:="" style="background-color: none;"></div> <script language="JavaScript">
javascript:startTyping(text, 50, "textDestination");
</script>

Langkah 6 : Kemudian Simpan dan Lihat Hasilnya

Catatan : Kode yang saya berikan Warna Kuning bisa diganti sesuka kalian
Script di atas bisa dipasang di post dan juga di sidebar. Untuk di postingan, masukan dengan opsi HTML saat menulis.

Read Full Story...

Cara Membuat Widget Sharing Melayang

Cara Membuat Widget Sharing Melayang di Blog


Hay , kali ini dunia escdace bicara soal blog lagi nih, yaitu tentang Cara Membuat Widget Sharing Melayang Keren di Blog , memang sih widget widget semacam ini yng berfungsi sebagai share sudah banyak di internet, namun ini tidak salahnya saya membuat widget sharing yang berbeda dan sangat membuat pengunjung terhibur,

Jika ingin melihat demonya juga adaa , Silahkan anda lihat di pojok kiri bawah,
Langsung saja tidak usah kebanyakan ngomong, Cekidow Cekidow



Berikut langkah-langkah Cara Membuat Widget Sharing Melayang Keren di Blog

1. Login ke Blogger Anda.
2. Klik Rancangan --> Edit HTML --> Expand Template Widget
3. Cari kode </body> (Gunakan Ctrl+F)
4. Kemudian copy kode dibawah ini dan taruh tepat diatas kode </body>

<!-- Start Shareaholic Sassy Bookmarks HTML (helperblogger.com)-->
<div class="shr_ss shr_publisher">

</div>
<!-- End Shareaholic Sassy Bookmarks HTML (helperblogger.com) -->
<!-- Start Shareaholic Sassy Bookmarks settings -->
<script type="text/javascript">
var SHRSS_Settings = {"shr_ss":{"src":"//dtym7iokkjlif.cloudfront.net/media/downloads/sassybookmark","link":"","service":"5,7,2,313,38,201,88,74","apikey":"b87f5899d80a5edce8b5e55f58542ef0f","localize":true,"shortener":"bitly","shortener_key":"","designer_toolTips":true,"tip_bg_color":"black","tip_text_color":"white","viewport":true,"twitter_template":"${title} - ${short_link} via @Shareaholic"}};
</script>
<!-- End Shareaholic Sassy Bookmarks settings -->
<!-- Start Shareaholic Sassy Bookmarks script -->
<script type="text/javascript">
(function() {
var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true;
sb.src = ("https:" == document.location.protocol ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-ss.min.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);
})();
</script>

<!-- End Shareaholic Sassy Bookmarks script (helperblogger.com) -->

5. Simpan dan Lihatlah Hasilnya.
Semoga dapat memberikan manfaat...


Sebelum disentuh mouse

Read Full Story...

Cara Membuat Semua Link Terbuka di Tab Baru

Cara Membuat Semua Link Terbuka di Tab Baru


Cara / trik mengatur / setting semua link di di blog terbuka di tab baru atau cara merubah / mengubah / menjadikan semua link terbuka di halaman baru atau cara agar semua link di blog bisa open di tab baru.

Beberapa sebelumnya artikel yang saya share yaitu cara membuat peringatan mentence di blog maka di postingan kali ini saya akan membahas artikel keren yaitu mengenai trik menjadikan semua link terbuka di tab baru. Oke langsung saja. Cekidow Cekidow .....

Link pada suatu blog atau website sangat penting gunanya, yaitu agar pembaca tetap memiliki akses terhadap page referral dimana dia menemukan link baru untuk di-klik. Selain itu, bagi pemilik blog / website hal ini juga menguntungkan karena visitor tidak segera meninggalkan halaman blog / website karena adanya window baru / jendela baru yang harus dibuka.

Selain itu, link terbuka di tab baru pada artikel yang sedang dibaca juga tidak menghilang tergantikan oleh halaman baru dari link yg di-klik oleh visitor. Pembaca tetap dapat membaca artikel hingga selesai sambil melihat referensi link yg terdapat di dalam posting.

Nah, kali ini saya akan memberikan tips tentang bagaimana cara melakukan trik di atas

Berikut cara membuat semua link terbuka di tab baru secara otomatis:

1. Login ke Blogger Anda.

2. Klik Tata Letak --> Tambah Gadget --> Pilih HTML/Java Script.

3. Kemudian copy script berikut ini ke dalam box HTML/Java Script tadi

<!-- code for turning all non-blog links to new page links -->

<script type="text/javascript" language="javascript">

var arr = document.getElementsByTagName("a"); //get all links inthe page

for(var i = 0; i < arr.length; i++)

{

if(arr[i].href.indexOf("http://www.escdace.blogspot.com/") < 0 //not links that are 'inside' blog

&& arr[i].href.indexOf("javascript:") < 0) //not javascript links

arr[i].target = "_blank";

}

</script>

4. Ganti tulisan berwarna aqua tersebut dengan URL Blog Anda.

5. Kemudian Simpan dan Lihat Hasilnya.

Nah, demikianlah sobat postingan mengenai cara membuat semua link terbuka di tab baru. Semoga bermanfaat buat semua.

Read Full Story...

Cara Membuat Maintence di Blog

Cara Membuat Peringatan Maintence di Blog Anda

Tampilan Peringatan Maintence atau Blog anda sedang dalam perbaikan adalah cara yang tepat untuk memberitahukan pengunjung bahwa Blog sedang ada perbaikan. Jadi jika anda ingin megedit Template atau Bereksperimen Gadget, anda bisa mencoba cara ini. Saya juga kerap menggunakan cara ini :D

Langsung saja kita mencoba Cara Membuat Peringatan Maintence di Blog Anda;

1. Login ke Blogger anda
2. Klik Menu Template --> Edit HTML
3. Kemudian Cari kode ]]></b:skin> (Untuk mempermudah gunakan Ctrl + F )
4. Copy kode berikut ini dan letakan tepat di atas kode ]]></b:skin>


html {
height: 100%;
background: url(http://masnegoro.files.wordpress.com/2011/10/perbaikan02.jpg) no-repeat center 50%;
margin: 0;
}
body {
display: none;
}

5. Simpan dan Lihat Hasilnya

Catatan :

- Link gambar yang berwarna aqua ganti dengan gambar anda sendiri atau dapat memilih gambar di bawah ini

http://ic-reload.com/wp-content/uploads/2012/11/MasihDalamPerbaikanKartun-300x240.png

Read Full Story...

Cara Membuat Scrollbar Presentase di Blog

Cara Membuat Scrollbar Presentase di Blogspot


Scrollbar Presentase - Sebenernya tutorial ini tidak terlalu penting buat di ikutin,tapi tutorial ini hanya untuk mempercantik tampilan blog kita saat pengunjung terus menerus scroll kebawah. Nah dengan kita memasang Presentase Scrollbar ini ,pengunjung akan melihat berapa persen halaman yang telah di scroll, apabila sampai bawah di scroll maka akan menjadi 100% dan apabila paling atas maka akan menjadi 0%. Jadi lebih unik kan blog kita apabila di pasang scrollbar presentase ini.

Mungkin tutorial ini sudah banyak yang share,namun barangkali belum ada yang tahu,maka kali ini saya share ulang tentunya dengan bahasa saya sendiri dan saya meminta maaf jika tutorial yang saya buat belum maksimal atau terlalu rumit cara pemasangannya. Tapi jika benar sobat mengalami kesulitan sobat bisa tanyakan langsung d kolom komentar. Tutorial nya juga mudah kok.


Langkah ke 1 : Login keakun blogger sobat.
Langkah ke 2 : Pergi ke Template kemudian Edit HTML
Langkah ke 3 : Copy kode dibawah ini lalu pastekan di atas ]]></b:skin> (Gunkan CTRL + F)


/* Presentase scroll */
 #scroll {
  display: none;
  position: fixed;
  top: 0;
  right: 20px;
  z-index: 500;
  padding: 3px 8px;
  background-color: #2187e7;
  color: #fff;
  border-radius: 3px;
}
#scroll:after {
  content: " ";
  position: absolute;
  top: 50%;
  right: -8px;
  height: 0;
  width: 0;
  margin-top: -4px;
  border: 4px solid transparent;
  border-left-color: #2187e7;
}

Langkah 4 : Cari kode </head> lalu pastekan kode dibawah ini dibawah kode </head> tadi.

<div id='scroll'></div>

Langkah 5 : Cari kode </body> lalu pastekan javascript dibawah ini tepat diatas </body>

<script type='text/javascript'>
//<![CDATA[
var scrollTimer = null;
$(window).scroll(function() {
   var viewportHeight = $(this).height(),
       scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
       progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
       distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
    $('#scroll')
        .css('top', distance)
        .text(' (' + Math.round(progress * 100) + '%)')
        .fadeIn(100);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#scroll').fadeOut();
    }, 1500);
});
//]]>
</script>


Langkah 6 : Simpan dan lihat hasilnya.

Read Full Story...