Cara Memasang Traffic Rank di Blog

Assalamu'alaikum..
Kali ini Dion Cyber Blog akan menjelaskan ke teman-teman blogger tentang cara memasang traffic rank di blog kalian.
Traffic rank adalah suatu program untuk mengetahui seberapa kualitas website kita. Misalnya google merupakan situs yang nomor satu, jadi kita bisa mengetahui website kita merupakan situs nomor ke berapa.

Langkah-langkah memasang traffic rank di blog:
1. Masuk dulu ke situs ini www.alexa.com
    maka akan muncul seperti berikut.

 2. Lalu klik products.
 3. carilah kalimat 'See Other Tools for Site Owners.' di halaman paling bawah.
     maka akan muncul seperti berikut.

 4. pilih tool 'Alexa Site Widgets'.
     muncul lah seperti di bawah ini.

5. Isi kolom kosong itu dengan website kamu.
6. lalu klik 'build widget'.
7. copy kode html yang muncul. Pilih kode html yang atas jika kamu ingin ukuran yang kecil. Dan pilih yang bawah buat ukuran yang besar.
8. buka blog kamu.
9. klik desain > tata letak > tambahkan gadget
10.cari HTML/JavaScript
11. berilah judul 'traffic rank'
12. lalu paste kode html tersebut di konten.
13. kalau sudah klik tombol simpan dan selasai ;-)

Sekian yah dari saya, semoga artikel 'cara memasang traffic rank di blog' bermanfaat buat kalian. Kalau mau copy paste jangan lupa untuk mencantumkan sumbernya, oke =))
Wassalamua'alaikum.

Read More..

Cara Membuat Fans Page Keren di Blog

Pada kesempatan kali ini saya akan menjelaskan cara membuat fans page di blog, tetapi kali ini fans pagenya tersembunyi atau slide show seperti yang ada di sebelah kanan blog saya ini. pertama anda harus buat fans page terlebih dahulu.

Setelah selesai, anda ikuti langkah-langkah berikut:
1.  Masuk ke Template > Edit Html dan centang expand elemen widget.
2. Cari kode </head> dan letakan kode di bawah ini di atas kode </head> tersebut.

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

3. Save template dan klik tab elemen laman.
4. Klik add gadget, pilih tambah HTML/Javascript dan copy kan kode di bawah ini

<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=URL FANS PAGEANDA&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><a href="http://dioncyber354.blogspot.com/2014/02/cara-membuat-fans-page-keren-di-blog.html">Widget by ™Dion~Cyber™</a></span></div></div>

5. Kemudian Simpan.

Kamu dapat merubah gambar facebook yg disamping dengan merubah text yg berwarna orange dengan URL gambar yg kamu suka
ubah text yg berwarna biru dengan URL page fans milik mu.
jika ingin merubah warna background page fansnya kamu tinggal menggati code yg berwarna ungu dengan kode warna yg kamu suka...
NB : Jika ada masalah silakan tinggalkan komentar. :)

~Selamat Mencoba~

Read More..

Cara Membuat Tombol Back To Top di Blog

Saat kita baca postingan yang panjang banget sampe ke bawah, terus pengen baca lagi dari atas tapi scroll mouse rusak. Apa pernah loe ngalamin hal tersebut gan? Kalo pernah pasti repot karena harus narikin tombol scroll di browser ya gak. Apalagi kalo pake Laptop cuma pake touch pad waduh bikin sebel.

Nah kita sebagai pemilik blog harus cari cara buat mengatasi masalah itu, biar pengunjung blog betah baca postingan kita gan. Caranya ya kita pasang tombol back to top, jadi pengunjung tinggal ngeklik tombol aja kalau pengen balik ke atas gan.

Blog kalian udah ada tombol back to topnya belom? Kalo belom, pasang sekarang juga, tombol back to top ini emang bukan navigasi utama tapi bisa jadi sangat penting buat beberapa pengunjung gan. Gak susah kok membuat tombol back to top di blog gan cuma tinggal nambahin widget tanpa perlu edit HTML.

Kali ini gw bakal share cara membuat tombol back to top di blog yang gampang gan. Kalo loe berminat silahkan langsung disimak cara buatnya gan gak pake ribet. Contohnya kayak yang ada di blog ini posisi tombol ada di kanan gan.

Cara Membuat Tombol Back To Top Keren Di Blog

• Pertama masuk ke Blogger lalu pilih Layout terus Add a Gadget dan tambahin HTML/JavaScript gan. Terus tinggal loe pastein kode di bawah ini di kotak kosongnya.

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

<script type="text/javascript" >


var scrolltotop={
    //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
    //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
    controlHTML: '<img src="URL Gambar Back To Top" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
    controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
    anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links

    state: {isvisible:false, shouldvisible:false},

    scrollup:function(){
        if (!this.cssfixedsupport) //if control is positioned using JavaScript
            this.$control.css({opacity:0}) //hide control immediately after clicking it
        var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
        if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
            dest=jQuery('#'+dest).offset().top
        else
            dest=0
        this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
    },

    keepfixed:function(){
        var $window=jQuery(window)
        var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
        var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
        this.$control.css({left:controlx+'px', top:controly+'px'})
    },

    togglecontrol:function(){
        var scrolltop=jQuery(window).scrollTop()
        if (!this.cssfixedsupport)
            this.keepfixed()
        this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
        if (this.state.shouldvisible && !this.state.isvisible){
            this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
            this.state.isvisible=true
        }
        else if (this.state.shouldvisible==false && this.state.isvisible){
            this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
            this.state.isvisible=false
        }
    },
  
    init:function(){
        jQuery(document).ready(function($){
            var mainobj=scrolltotop
            var iebrws=document.all
            mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
            mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
            mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
                .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
                .attr({title:'Scroll Back to Top'})
                .click(function(){mainobj.scrollup(); return false})
                .appendTo('body')
            if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
                mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
            mainobj.togglecontrol()
            $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
                mainobj.scrollup()
                return false
            })
            $(window).bind('scroll resize', function(e){
                mainobj.togglecontrol()
            })
        })
    }
}

scrolltotop.init()

</script>

• Kalo udah di pastein sekarang tinggal di ganti URL Gambar Back To Top sama url gambar punya loe gan lalu di Save. Coba sekarang buka blog loe pasti udah ada tombol back to topnya gan.

Kalo loe gak punya gambar tombolnya ni gw sediain gan, ada yang animasi sama standar tinggal dipilih aja.

Animasi :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizUqKa11XHZeO2-xa8jnoc_9zi4gr-98UYg9yCQZvm3nBG6IN7XbJqN1cF2POpsX45O3e3qu3AEj3vAaCu8PqIrCGbvVQDuXGAkbLLgNU0iZXA2C2-8cqu-YNxvn1OURrJtzdxICUtfWqO/s1600/back+to+top10.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW1EuTmZYeSDrHRaoA7R4fHbZ16vJsBukZWxdgR2U6F4iZasZ5h_w-SfavIipRYzjqdup2gfEARrMuuz0IIW_UTSe0FJX5t6Ccx1gTPMbAfbSioPyqURHo1rTNPhFzfpc307n0T5ZO7B-K/s1600/back+to+top4.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj_zM9cRY5dt0qe-DXgW3zZQHFp4lpMLahPQY6rUFEwI1kYA4Mpp6D1zLy8Yw22ettFx38JEUZJ25tYv_6y6LS81lnpgX6MIZHePS-lVxFEalAtvaDPeMzwPFpD6Myt0jrEEN14eeBQyH5/s1600/back+to+top7.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNTYbIHqPln9yXmueg9-dVqU7PBGQJydbwWATEPh9d6PalWChjMjJX2YH-SMxXrnMnX6qMf4Gp2BOXzODp3HX1z3DGwWW7V5Se3H_lYtLAHahZQn7CMrELLPt0OH6qJJqVGx_8HybOkZFj/s1600/back+to+top9.gif

Standar

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpTvSYSQjGrbVC8LT4kbFMcJI0G2QVfc2vDTP2HxxgdJiGchFonpdMwsERMIc3LAJMJ_GCKNk-ZSgE7JjeskhugXlzl1sxmi9k6HYpaQ3e5DogFx70I1zYvSBcLv6AbbajQ09rzrf8pPpE/s1600/back+to+top13.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHaaylLz7ghMB-C-bgGy7jrwxyDs5zGZU1gYpZWDjaDFPCThBwyeWE_tgNF6KzbK6XeXnSw7GzcVZ6xfhuhBzayCQGTdhyDiHwW7a_PHTfqL8KYFC8mTn1IYxTzd2q669CIDPYemXrY5TY/s1600/back+to+top14.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFfmbK95v7SKJ9r564bVg_pzWRYeLuB2DTutv7FnMVT8KgeOh13-QA3aEbd6QKmuJ5OaH6VifyngLqx0v_yEq3AZRLiBF-MDmuG7vOHxCW_VHbjhL-JBZMzVOb7DbM7QQgxOOOvyfpXwM2/s1600/back+to+top15.png

Beres gan, gampang kan cara membuat tombol back to top di blognya. Ow ya kalo loe mau rubah kecepatan scrollnya bisa di edit aja scrollduration, semakin besar angkanya semakin lambat gerakan ke atasnya gan.


Sekian dulu yang bisa gw share tentang cara membuat tombol back to top, semoga bermanfaat buat kalian semua. Jangan lupa ninggalin komentar ya gan.

Read More..

Anti Klik Kanan Dengan Gambar | New Version

Kali ini Dion Cyber Blog akan share script anti klik kanan. trick ini di lengkapi dengan tombol close.

Berikut Tutorialnya :

• Login ke blogger
• Pilih menu template >> edit HTML >> lanjutkan
• Cari Kode </body> Lalu letakkan code di bawah ini tepat diatasnya...

<style> .overlay{ background-color:rgba(0,0, 0, .9); position:fixed; top:0px; bottom:0px; left:0px; right:0px; z-index:100; } .box{ position:fixed; height:258px; width:375px; left:-80%; top:22%; background-color:rgba(0,0, 0, .4); background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikRKPoFhQJVdS6Kh_GpUHvTKCUjAprcvlvVgmLr9TksefSl5hVukYX2vt515-vGqTNqs-eQ18-JvDCz3TyFaMmMDlBCvLULbs7t9zdLNUy43g4ih2h-v6Hv7FWecUoQ36ZZimHs-QlJM8p/s1600/a.jpg); color:#777; font:20px arial,sans serif; padding:20px; border:1px solid #222; -moz-box-shadow: 0 1px 5px #000; -webkit-box-shadow: 0 1px 5px #000; z-index:9999; } .close{ float:right; width:36px; height:36px; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrWLqs06zDpKtuE1XtdcWpfwWivqMEHV-p1SdTWVjCDBp1CYjG3Hp-CxQUku6UOz3vpus0EK_rMR5pbhNScDQxKvK_HXtrEMbSvUplvf1SvXiV-UOM8if7rQLmxF7kd0-fMW0K5V802H-x/s1600/close_icon.png) repeat top left; margin-top:-45px; margin-right:-40px; cursor:pointer; } .box h1{ font:60px arial black,sans serif;line-height:0.8em; color:red; } </style>
<script src='http://anthzo.webs.com/2012-blog/disble-right-click.js' type='text/javascript'></script>
<div class='overlay' id='overlay' style='display:none;'>
</div>
<div class='box' id='box'>
<a class='close' id='close'></a>
</div>

• Ubah text yg berwarna kuning dengan url gambar kalian. 
• Gunakan gambar yg berukuran 415 x 298 agar tampilan lebih maksimal
• Setelah itu Simpan HTML milik kalian

Sekarang coba kalian lihat hasilnya, sukses kan.

Read More..

Create Animasi Custom Error 404 file Not Found Page

Untuk hari ini Adithya Blog akan share cara membuat Error 404 file Not Found Page dengan animasi.

Demo

Berikut Tutorialnya :

• Login ke blogger
• Pilih menu template >> edit HTML >> lanjutkan
• Dengan menggunakan ctrl + F, cari kode </body>
• Lalu letakkan kode berikut diatasnya 

<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<style>
/* CSS reset */body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0}
html,body{margin:0;padding:0;overflow:hidden;}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
input{border:1px solid #b0b0b0;padding:3px 5px 4px;color:#979797;width:190px}
address,caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:&#39;&#39;}
abbr,acronym{border:0}
#error-not-found{background:#310404 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqZeyBotGRWl-yzdLCLegkzMCtPmVvfkF1k4fwY3dzhpSbYPrhK7MPm3NiSyH4zIgnNsoRuolJ_psM92De74zPHFJansyeubN4jjYf64TWaBjxXgGWPvLA_ijJda7wcf60ShDVJKI55VA/s1600/overlay.png) repeat;font-family:&#39;BebasNeueRegular&#39;;z-index:999999;position:fixed;top:0px;left:0px;width:100%;height:100%;z-index:999999;overflow:hidden;}
.eror-page{background:-webkit-radial-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.3) 35%,rgba(0,0,0,0.7));background:-moz-radial-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.3) 35%,rgba(0,0,0,0.7));background:-ms-radial-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.3) 35%,rgba(0,0,0,0.7));background:radial-gradient(rgba(0,0,0,0.1),rgba(0,0,0,0.3) 35%,rgba(0,0,0,0.7));position:absolute;width:100%;height:100%;left:0px;top:0px;z-index:1000}
#error-not-found h2{position:absolute;top:50%;line-height:100px;height:100px;margin-top:-50px;font-size:100px;width:100%;text-align:center;color:transparent;-webkit-animation:blurFadeInOut 3s ease-in backwards;-moz-animation:blurFadeInOut 3s ease-in backwards;-ms-animation:blurFadeInOut 3s ease-in backwards;animation:blurFadeInOut 3s ease-in backwards}
#error-not-found h2.frame-1{-webkit-animation-delay:0s;-moz-animation-delay:0s;-ms-animation-delay:0s;animation-delay:0s}
#error-not-found h2.frame-2{-webkit-animation-delay:3s;-moz-animation-delay:3s;-ms-animation-delay:3s;animation-delay:3s}
#error-not-found h2.frame-3{-webkit-animation-delay:6s;-moz-animation-delay:6s;-ms-animation-delay:6s;animation-delay:6s}
#error-not-found h2.frame-4{font-size:200px;-webkit-animation-delay:9s;-moz-animation-delay:9s;-ms-animation-delay:9s;animation-delay:9s}
#error-not-found h2.frame-5{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none;color:transparent;text-shadow:0px 0px 1px #fff}
#error-not-found h2.frame-5 span{-webkit-animation:blurFadeIn 3s ease-in 12s backwards;-moz-animation:blurFadeIn 1s ease-in 12s backwards;-ms-animation:blurFadeIn 3s ease-in 12s backwards;animation:blurFadeIn 3s ease-in 12s backwards;color:transparent;text-shadow:0px 0px 1px #fff}
#error-not-found h2.frame-5 span:nth-child(2){-webkit-animation-delay:13s;-moz-animation-delay:13s;-ms-animation-delay:13s;animation-delay:13s}
#error-not-found h2.frame-5 span:nth-child(3){-webkit-animation-delay:14s;-moz-animation-delay:14s;-ms-animation-delay:14s;animation-delay:14s}
.sp-backg{position:absolute;width:470px;height:239px;left:50%;top:50%;margin:-137px 0 0 -141px;background:transparent url(http://www.naturalhealthencyclopedia.com/skin/img/404.png) no-repeat top left;-webkit-animation:fadeInBack 3.6s linear 14s backwards;-moz-animation:fadeInBack 3.6s linear 14s backwards;-ms-animation:fadeInBack 3.6s linear 14s backwards;animation:fadeInBack 3.6s linear 14s backwards;-ms-filter:&quot;progid:DXImageTransform.Microsoft.Alpha(Opacity=30)&quot;;filter:alpha(opacity=30);opacity:0.3;-webkit-transform:scale(2);-moz-transform:scale(2);transform:scale(2)}
.sp-circle-link{position:absolute;left:50%;bottom:5%;margin-left:-50px;text-align:center;line-height:100px;width:100px;height:100px;background:#fff;color:#3f1616;font-size:25px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;-webkit-animation:fadeInRotate 1s linear 16s backwards;-moz-animation:fadeInRotate 1s linear 16s backwards;-ms-animation:fadeInRotate 1s linear 16s backwards;animation:fadeInRotate 1s linear 16s backwards;-webkit-transform:scale(0.8) rotate(0deg);-moz-transform:scale(0.8) rotate(0deg);transform:scale(0.8) rotate(0deg)}
.sp-circle-link:hover{background:#85373b;color:#fff}
/**/@-webkit-keyframes blurFadeInOut{0%{opacity:0;text-shadow:0px 0px 40px #fff;-webkit-transform:scale(1.3)}
20%,75%{opacity:1;text-shadow:0px 0px 1px #fff;-webkit-transform:scale(1)}
100%{opacity:0;text-shadow:0px 0px 50px #fff;-webkit-transform:scale(0)}
}
@-webkit-keyframes blurFadeIn{0%{opacity:0;text-shadow:0px 0px 40px #fff;-webkit-transform:scale(1.3)}
50%{opacity:0.5;text-shadow:0px 0px 10px #fff;-webkit-transform:scale(1.1)}
100%{opacity:1;text-shadow:0px 0px 1px #fff;-webkit-transform:scale(1)}
}
@-webkit-keyframes fadeInBack{0%{opacity:0;-webkit-transform:scale(0)}
50%{opacity:0.4;-webkit-transform:scale(1)}
100%{opacity:0.2;-webkit-transform:scale(2)}
}
@-webkit-keyframes fadeInRotate{0%{opacity:0;-webkit-transform:scale(0) rotate(360deg)}
100%{opacity:1;-webkit-transform:scale(1) rotate(0deg)}
}
/**/@-moz-keyframes blurFadeInOut{0%{opacity:0;text-shadow:0px 0px 40px #fff;-moz-transform:scale(1.3)}
20%,75%{opacity:1;text-shadow:0px 0px 1px #fff;-moz-transform:scale(1)}
100%{opacity:0;text-shadow:0px 0px 50px #fff;-moz-transform:scale(0)}
}
@-moz-keyframes blurFadeIn{0%{opacity:0;text-shadow:0px 0px 40px #fff;-moz-transform:scale(1.3)}
100%{opacity:1;text-shadow:0px 0px 1px #fff;-moz-transform:scale(1)}
}
@-moz-keyframes fadeInBack{0%{opacity:0;-moz-transform:scale(0)}
50%{opacity:0.4;-moz-transform:scale(1)}
100%{opacity:0.2;-moz-transform:scale(2)}
}
@-moz-keyframes fadeInRotate{0%{opacity:0;-moz-transform:scale(0) rotate(360deg)}
100%{opacity:1;-moz-transform:scale(1) rotate(0deg)}
}
/**/@keyframes blurFadeInOut{0%{opacity:0;text-shadow:0px 0px 40px #fff;transform:scale(1.3)}
20%,75%{opacity:1;text-shadow:0px 0px 1px #fff;transform:scale(1)}
100%{opacity:0;text-shadow:0px 0px 50px #fff;transform:scale(0)}
}
@keyframes blurFadeIn{0%{opacity:0;text-shadow:0px 0px 40px #fff;transform:scale(1.3)}
50%{opacity:0.5;text-shadow:0px 0px 10px #fff;transform:scale(1.1)}
100%{opacity:1;text-shadow:0px 0px 1px #fff;transform:scale(1)}
}
@keyframes fadeInBack{0%{opacity:0;transform:scale(0)}
50%{opacity:0.4;transform:scale(1)}
100%{opacity:0.2;transform:scale(2)}
}
@keyframes fadeInRotate{0%{opacity:0;transform:scale(0) rotate(360deg)}
100%{opacity:1;transform:scale(1) rotate(0deg)}
}
</style>
<div class='container'>
<div id='error-not-found'>
<div class='eror-page'>
<div class='sp-backg'/>
<h2 class='frame-1'>Mohon Maaf..!!!</h2>
<h2 class='frame-2'>Halaman Yang Anda Cari Tidak Ada</h2>
<h2 class='frame-3'>Go To Homepage</h2>
<h2 class='frame-4'>Now... !!!</h2>
<h2 class='frame-5'><span>Error 404.!!</span> <span>Page Not</span> <span>Found.</span></h2>
<a class='sp-circle-link' expr:href='data:blog.homepageUrl' title='Home page'>HOME</a>
</div>
</div></div> <!-- end-->
</b:if>

• Jika ingin mengubah pesannya. kamu hanya tinggal mengganti text yg berwarna Hijau dengan pesan yg ingin kamu tampilkan.
• Setelah itu simpan HTML kamu.

Nah sekarang coba kamu cek, apakah berhasil. jika berhasil jangan lupa untuk meninggalkan komentar. karena komentar anda sangat membantu perkembangan blog ini!!

Read More..

Cara Membuat Kolom Scroll

Sesuai dengan judulnya,postingan saya kali ini Cara Membuat Kolom Scroll Pada Blog.Sering kali kita jumpai di blog baik berupa postingan code html,gambar,atau artikel pilihan yang begitu panjang,sehingga hal ini dapat memakan tempat.dan untuk mengatasi hal tersebut ada baik nya kita membuat kolom atau kotak scroll.dengan kolom scroll kita dapat memasukan baik berupa code HTML,gambar,semua artikel ataupun yang lain di dalam nya.dan kita juga dapat mengatur besar kecil ukuran atau pun warna pada kolom scroll.Untuk lebih jelas bagaimana caranya membuat kolom scroll tersebut mari kita coba lihat beberapa bentuk seperti yang dibawah ini:

1.kotak scroll tanpa background biasa

teks pertama
teks kedua
teks ketiga
teks keempat

Kodenya di bawah ini

<div style="font: 12px/26px Georgia,Garamond,Serif; height: 75px; overflow: scroll; width: 450px;"><span style="font-style: italic;"><span style="font-style: italic;">Masukkan teks disini</span></span></div>

2.kotak scroll dengan border tanpa background biasa

Masukkan teks disini
teks pertama
teks kedua
teks ketiga
teks keempat
teks kelima
dan seterus nya

Kodenya di bawah ini

<div style="-goog-ms-box-shadow: 0 0 10px #000000; -moz-box-shadow: 0 0 10px #000000; -webkit-box-shadow: 0 0 10px #000000; border: 6px double #FF00FF; color: #b4040; height: 75px; overflow: auto; padding: 10px; width: 450px;">
Masukkan teks disini</div></div>

3.kotak scroll dengan warna background

Masukkan Tulisan atau teks disini
teks pertama
teks kedua
teks ketiga
teks keempat
teks kelima
dan seterus nya

Kodenya di bawah ini

<div style="background-color: Royalblue; border: 1px solid rgb(191, 189, 189); height: 75px; overflow: auto; padding: 5px; text-align: justify; width: 450px;">Masukkan teks disini</div>

4.kotak scroll dengan textarea

Kodenya di bawah ini

<textarea cols="60" rows="4">Masukkan Tulisan atau teks disini</textarea>

5.kotak scroll dengan border dan background contoh 1

Masukkan teks disini
teks pertama
teks kedua
teks ketiga
teks keempat
teks kelima
dan seterus nya

Kodenya di bawah ini

<div style="text-align: left;"><div style="background: #4169E1; border: 3px solid #008000;height: 75px; overflow: auto; padding: 10px; width: 200px;">Masukkan teks disini</div>

6.kotak scroll dengan border dan background contoh 2

Masukkan teks disini teks pertama teks kedua teks ketiga teks keempat teks kelima dan seterus nya

Kodenya di bawah ini

<div style="text-align: left;"><table border="5" cellpadding="1"><tbody><tr><td><div style="background: #4169E1; border: 2px solid #008000; height: 75px; overflow: auto; padding: 10px; width: 200px;">Masukkan teks disini</div></td></tr></tbody></table>

Keterangan :
Untuk merubah background : Royalblue atau #4169E1
Untuk merubah warna border dan ukurannya : border: 2px solid #008000
Untuk merubah tinggi Scroll : height: 75px
Untuk merubah lebar Scroll : width: 150px
Demikianlah Cara Membuat Kolom Scroll Pada Blog,selamat berkreasi semoga berhasil.salam blogger.

Read More..

Dafrtar Kode Warna HTML Untuk Blogger

Kali ini saya sengaja memuat Daftar Kode Warna HTML / HTML Warna Untuk Blogger. Namun postingan ini saya beri judul Daftar Kode Warna HTML Untuk Blogger namun kode html warna yang saya muat di sini tidak hanya bisa di gunakan untuk blogger saja.

Kode HTML Warna ini nantinya bisa di gunakan sesuai keperluan kita masing-masing, misalnya untuk merubah warna latar belakang blog blogger kita, warna header, footer, warna font, dsb.

Berikut Daftar Kode Warna yang bisa anda gunakan: 

#FFFFFF	#FFFFCC	#FFFF99	#FFFF66	#FFFF33	#FFFF00
#FFCCFF	#FFCCCC	#FFCC99	#FFCC66	#FFCC33	#FFCC00
#FF99FF	#FF99CC	#FF9999	#FF9966	#FF9933	#FF9900
#FF66FF	#FF66CC	#FF6699	#FF6666	#FF6633	#FF6600
#FF33FF	#FF33CC	#FF3399	#FF3366	#FF3333	#FF3300
#FF00FF	#FF00CC	#FF0099	#FF0066	#FF0033	#FF0000
#CCFFFF	#CCFFCC	#CCFF99	#CCFF66	#CCFF33	#CCFF00
#CCCCFF	#CCCCCC	#CCCC99	#CCCC66	#CCCC33	#CCCC00
#CC99FF	#CC99CC	#CC9999	#CC9966	#CC9933	#CC9900
#CC66FF	#CC66CC	#CC6699	#CC6666	#CC6633	#CC6600
#CC33FF	#CC33CC	#CC3399	#CC3366	#CC3333	#CC3300
#CC00FF	#CC00CC	#CC0099	#CC0066	#CC0033	#CC0000
#99FFFF	#99FFCC	#99FF99	#99FF66	#99FF33	#99FF00
#99CCFF	#99CCCC	#99CC99	#99CC66	#99CC33	#99CC00
#9999FF	#9999CC	#999999	#999966	#999933	#999900
#9966FF	#9966CC	#996699	#996666	#996633	#996600
#9933FF	#9933CC	#993399	#993366	#993333	#993300
#9900FF	#9900CC	#990099	#990066	#990033	#990000
#66FFFF	#66FFCC	#66FF99	#66FF66	#66FF33	#66FF00
#66CCFF	#66CCCC	#66CC99	#66CC66	#66CC33	#66CC00
#6699FF	#6699CC	#669999	#669966	#669933	#669900
#6666FF	#6666CC	#666699	#666666	#666633	#666600
#6633FF	#6633CC	#663399	#663366	#663333	#663300
#6600FF	#6600CC	#660099	#660066	#660033	#660000
#33FFFF	#33FFCC	#33FF99	#33FF66	#33FF33	#33FF00
#33CCFF	#33CCCC	#33CC99	#33CC66	#33CC33	#33CC00
#3399FF	#3399CC	#339999	#339966	#339933	#339900
#3366FF	#3366CC	#336699	#336666	#336633	#336600
#3333FF	#3333CC	#333399	#333366	#333333	#333300
#3300FF	#3300CC	#330099	#330066	#330033	#330000
#00FFFF	#00FFCC	#00FF99	#00FF66	#00FF33	#00FF00
#00CCFF	#00CCCC	#00CC99	#00CC66	#00CC33	#00CC00
#0099FF	#0099CC	#009999	#009966	#009933	#009900
#0066FF	#0066CC	#006699	#006666	#006633	#006600
#0033FF	#0033CC	#003399	#003366	#003333	#003300
#0000FF	#0000CC	#000099	#000066	#000033	#000000
#465584	#EEF2F7	#3A4F6C	#00D	#434951	#555
#777	#DFE6EF	#345487	#F5F9FD	#3860BB	#BCD0ED
#C2CFDF	#F0F5FA	#D1DCEB	#003	#900	#CCE9FD
#E4EAF2	#4C77B6	#DFE6EF	#EEF2F7	#F

Nah itulah beberapa kode html warna yang bisa di gunakan blog.

Selain menggunakan kode di atas, kita juga bisa mencari kode warna html menggunakan software html editor (ini cara yang selalu saya gunakan) atau software HTML Color Picker (Link Download nya menyusul).

Read More..