Costume halaman error 404

404 Adalah Kode Halaman Error yang biasa muncul pada setiap halaman web/blog ketika seorang visitor (pengunjung) mengunjungi url yang tidak ada atau telah di hapus dari web/blog. Nah, kali ini saya ingin berbagi tutorial "Bagaimana Cara Membuat Halaman Error 404" untuk di pasang pada blog sobat dengan sedikit custom dan tambahan jquery.

Untuk sobat yang penasaran bagaimana tampilan halaman 404 yang saya maksud, silahkan lihat Demonya dengan menekan tombol demo di bawah ini :

Demo

Keunggulan

Responsive
Smooth
Support CSS3
Simple & Fast
Menarik dan beda

untuk sobat yang telah menerapkan halaman error 404 tinggal mengganti kode HTMLnya dan CSS dengan HTML dan CSS di bawah ini dan meletakkan jquerynya saja:

untuk yang belum silahkan ikuti langkat penerapannya...

Cara Pemasangan

Langkah 1 - Login Blogger, buka menu Template → Edit HTML lalu simpan kode di bawah ini tepat setelah kode <body> :

<b:if cond='data:blog.pageType != &quot;error_page&quot;'>

Langkah 2 - Simpan kode di bawah ini tepat di atas kode </body> :

</b:if>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
<div id='error-page'>
<!-- Halaman Error -->
<div class='error-404'>
<span class='ref-0' data-delay='282'></span>
<span class='ref-1' data-delay='340'></span>
<span class='ref-2' data-delay='0'></span>
<span class='ref-3' data-delay='4'></span>
<span class='ref-4' data-delay='381'></span>
<span class='ref-5' data-delay='485'></span>
<span class='ref-6' data-delay='5'></span>
<span class='ref-7' data-delay='437'></span>
<span class='ref-8' data-delay='15'></span>
<span class='blank ref-9'></span>
<span class='ref-10' data-delay='339'></span>
<span class='ref-11' data-delay='468'></span>
<span class='ref-12' data-delay='601'></span>
<span class='ref-13' data-delay='55'></span>
<span class='ref-14' data-delay='224'></span>
<span class='ref-15' data-delay='385'></span>
<span class='ref-16' data-delay='2'></span>
<span class='ref-17' data-delay='1'></span>
<span class='blank ref-18'></span>
<span class='blank ref-19'></span>
<span class='ref-20' data-delay='28'></span>
<span class='ref-21' data-delay='132'></span>
<span class='ref-22' data-delay='327'></span>
<span class='ref-23' data-delay='285'></span>
<span class='ref-24' data-delay='74'></span>
<span class='ref-25' data-delay='3'></span>
<span class='ref-26' data-delay='611'></span>
<span class='ref-27' data-delay='50'></span>
<span class='blank ref-28'></span>
<span class='blank ref-29'></span>
<span class='blank ref-30'></span>
<span class='ref-31' data-delay='289'></span>
<span class='ref-32' data-delay='139'></span>
<span class='ref-33' data-delay='29'></span>
<span class='ref-34' data-delay='57'></span>
<span class='ref-35' data-delay='94'></span>
<span class='ref-36' data-delay='133'></span>
<span class='ref-37' data-delay='161'></span>
<span class='blank ref-38'></span>
<span class='blank ref-39'></span>
<span class='ref-40' data-delay='257'></span>
<span class='ref-41' data-delay='286'></span>
<span class='ref-42' data-delay='335'></span>
<span class='ref-43' data-delay='359'></span>
<span class='ref-44' data-delay='382'></span>
<span class='ref-45' data-delay='424'></span>
<span class='ref-46' data-delay='459'></span>
<span class='ref-47' data-delay='486'></span>
<span class='blank ref-48'></span>
<span class='blank ref-49'></span>
<span class='blank ref-50'></span>
<span class='blank ref-51'></span>
<span class='blank ref-52'></span>
<span class='blank ref-53'></span>
<span class='blank ref-54'></span>
<span class='ref-55' data-delay='344'></span>
<span class='ref-56' data-delay='39'></span>
<span class='ref-57' data-delay='75'></span>
<span class='ref-58' data-delay='124'></span>
<span class='ref-59' data-delay='160'></span>
<span class='blank ref-60'></span>
<span class='blank ref-61'></span>
<span class='blank ref-62'></span>
<span class='ref-63' data-delay='328'></span>
<span class='ref-64' data-delay='358'></span>
<span class='ref-65' data-delay='383'></span>
<span class='ref-66' data-delay='438'></span>
<span class='ref-67' data-delay='471'></span>
<span class='ref-68' data-delay='514'></span>
<span class='blank ref-69'></span>
<span class='blank ref-70'></span>
<span class='blank ref-71'></span>
<span class='blank ref-72'></span>
<span class='blank ref-73'></span>
<span class='ref-74' data-delay='67'></span>
<span class='ref-75' data-delay='44'></span>
<span class='ref-76' data-delay='93'></span>
<span class='ref-77' data-delay='145'></span>
<span class='ref-78' data-delay='191'></span>
<span class='blank ref-79'></span>
<span class='ref-80' data-delay='506'></span>
<span class='ref-81' data-delay='241'></span>
<span class='ref-82' data-delay='373'></span>
<span class='ref-83' data-delay='423'></span>
<span class='ref-84' data-delay='469'></span>
<span class='ref-85' data-delay='517'></span>
<span class='ref-86' data-delay='555'></span>
<span class='ref-87' data-delay='602'></span>
<span class='ref-88' data-delay='89'></span>
<span class='blank ref-89'></span>
<span class='ref-90' data-delay='70'></span>
<span class='ref-91' data-delay='56'></span>
<span class='ref-92' data-delay='122'></span>
<span class='ref-93' data-delay='180'></span>
<span class='ref-94' data-delay='225'></span>
<span class='ref-95' data-delay='284'></span>
<span class='ref-96' data-delay='349'></span>
<span class='ref-97' data-delay='386'></span>
<span class='ref-98' data-delay='458'></span>
<span class='blank ref-99'></span>
<span class='ref-100' data-delay='558'></span>
<span class='ref-101' data-delay='612'></span>
<span class='ref-102' data-delay='337'></span>
<span class='ref-103' data-delay='157'></span>
<span class='ref-104' data-delay='51'></span>
<span class='ref-105' data-delay='131'></span>
<span class='ref-106' data-delay='197'></span>
<span class='ref-107' data-delay='256'></span>
<span class='ref-108' data-delay='334'></span>
<span class='blank ref-109'></span>
<span class='ref-110' data-delay='466'></span>
<span class='ref-111' data-delay='530'></span>
<span class='ref-112' data-delay='582'></span>
<span class='ref-113' data-delay='251'></span>
<span class='ref-114' data-delay='564'></span>
<span class='ref-115' data-delay='62'></span>
<span class='ref-116' data-delay='151'></span>
<span class='ref-117' data-delay='219'></span>
<span class='ref-118' data-delay='311'></span>
<span class='blank ref-119'></span>
<span class='ref-120' data-delay='476'></span>
<span class='ref-121' data-delay='539'></span>
<span class='ref-122' data-delay='618'></span>
<span class='ref-123' data-delay='164'></span>
<span class='ref-124' data-delay='37'></span>
<span class='ref-125' data-delay='159'></span>
<span class='ref-126' data-delay='250'></span>
<span class='ref-127' data-delay='356'></span>
<span class='ref-128' data-delay='444'></span>
<span class='blank ref-129'></span>
<span class='blank ref-130'></span>
<span class='blank ref-131'></span>
<span class='blank ref-132'></span>
<span class='blank ref-133'></span>
<span class='ref-134' data-delay='346'></span>
<span class='ref-135' data-delay='454'></span>
<span class='ref-136' data-delay='568'></span>
<span class='ref-137' data-delay='10'></span>
<span class='ref-138' data-delay='72'></span>
<span class='ref-139' data-delay='206'></span>
<span class='blank ref-140'></span>
<span class='blank ref-141'></span>
<span class='ref-142' data-delay='608'></span>
<span class='ref-143' data-delay='85'></span>
<span class='ref-144' data-delay='187'></span>
<span class='ref-145' data-delay='371'></span>
<span class='ref-146' data-delay='527'></span>
<span class='ref-147' data-delay='364'></span>
<span class='ref-148' data-delay='143'></span>
<span class='ref-149' data-delay='324'></span>
<span class='blank ref-150'></span>
<span class='blank ref-151'></span>
<span class='blank ref-152'></span>
<span class='ref-153' data-delay='484'></span>
<span class='ref-154' data-delay='166'></span>
<span class='ref-155' data-delay='280'></span>
<span class='ref-156' data-delay='579'></span>
<span class='ref-157' data-delay='116'></span>
<span class='ref-158' data-delay='436'></span>
<span class='blank ref-159'></span>
<span class='ref-160' data-delay='347'></span>
<span class='ref-161' data-delay='350'></span>
<span class='ref-162' data-delay='193'></span>
<span class='ref-163' data-delay='599'></span>
<span class='ref-164' data-delay='420'></span>
<span class='ref-165' data-delay='11'></span>
<span class='ref-166' data-delay='176'></span>
<span class='ref-167' data-delay='27'></span>
<span class='ref-168' data-delay='626'></span>
<span class='blank ref-169'></span>
<span class='ref-170' data-delay='14'></span>
<span class='ref-171' data-delay='22'></span>
<span class='ref-172' data-delay='117'></span>
<span class='ref-173' data-delay='325'></span>
<span class='ref-174' data-delay='445'></span>
<span class='ref-175' data-delay='221'></span>
<span class='ref-176' data-delay='351'></span>
<span class='ref-177' data-delay='425'></span>
<span class='ref-178' data-delay='23'></span>
<span class='blank ref-179'></span>
<span class='ref-180' data-delay='542'></span>
<span class='ref-181' data-delay='507'></span>
<span class='ref-182' data-delay='202'></span>
<span class='ref-183' data-delay='332'></span>
<span class='ref-184' data-delay='209'></span>
<span class='ref-185' data-delay='616'></span>
<span class='ref-186' data-delay='248'></span>
<span class='ref-187' data-delay='214'></span>
<span class='ref-188' data-delay='263'></span>
<span class='blank ref-189'></span>
<span class='ref-190' data-delay='559'></span>
<span class='ref-191' data-delay='294'></span>
<span class='ref-192' data-delay='502'></span>
<span class='ref-193' data-delay='30'></span>
<span class='ref-194' data-delay='38'></span>
<span class='ref-195' data-delay='42'></span>
<span class='ref-196' data-delay='45'></span>
<span class='ref-197' data-delay='52'></span>
<span class='ref-198' data-delay='58'></span>
<span class='blank ref-199'></span>
<span class='ref-200' data-delay='73'></span>
<span class='ref-201' data-delay='76'></span>
<span class='ref-202' data-delay='90'></span>
<span class='ref-203' data-delay='95'></span>
<span class='ref-204' data-delay='103'></span>
<span class='ref-205' data-delay='118'></span>
<span class='ref-206' data-delay='123'></span>
<span class='ref-207' data-delay='125'></span>
<span class='ref-208' data-delay='134'></span>
<span class='blank ref-209'></span>
<span class='blank ref-210'></span>
<span class='blank ref-211'></span>
<span class='blank ref-212'></span>
<span class='blank ref-213'></span>
<span class='ref-214' data-delay='177'></span>
<span class='ref-215' data-delay='181'></span>
<span class='ref-216' data-delay='189'></span>
<span class='ref-217' data-delay='192'></span>
<span class='ref-218' data-delay='198'></span>
<span class='ref-219' data-delay='200'></span>
<span class='blank ref-220'></span>
<span class='blank ref-221'></span>
<span class='ref-222' data-delay='220'></span>
<span class='ref-223' data-delay='226'></span>
<span class='ref-224' data-delay='229'></span>
<span class='ref-225' data-delay='230'></span>
<span class='ref-226' data-delay='242'></span>
<span class='ref-227' data-delay='252'></span>
<span class='ref-228' data-delay='258'></span>
<span class='ref-229' data-delay='267'></span>
<span class='blank ref-230'></span>
<span class='blank ref-231'></span>
<span class='blank ref-232'></span>
<span class='ref-233' data-delay='287'></span>
<span class='ref-234' data-delay='307'></span>
<span class='ref-235' data-delay='312'></span>
<span class='ref-236' data-delay='326'></span>
<span class='ref-237' data-delay='329'></span>
<span class='ref-238' data-delay='336'></span>
<span class='blank ref-239'></span>
<span class='ref-240' data-delay='144'></span>
<span class='ref-241' data-delay='147'></span>
<span class='ref-242' data-delay='357'></span>
<span class='blank ref-243'></span>
<span class='blank ref-244'></span>
<span class='blank ref-245'></span>
<span class='blank ref-246'></span>
<span class='blank ref-247'></span>
<span class='blank ref-248'></span>
<span class='blank ref-249'></span>
<span class='ref-250' data-delay='387'></span>
<span class='ref-251' data-delay='406'></span>
<span class='ref-252' data-delay='421'></span>
<span class='blank ref-253'></span>
<span class='blank ref-254'></span>
<span class='blank ref-255'></span>
<span class='ref-256' data-delay='446'></span>
<span class='ref-257' data-delay='455'></span>
<span class='ref-258' data-delay='460'></span>
<span class='blank ref-259'></span>
<span class='ref-260' data-delay='470'></span>
<span class='ref-261 nf' data-delay='472'></span>
<span class='ref-262' data-delay='477'></span>
<span class='blank ref-263'></span>
<span class='blank ref-264 nf'></span>
<span class='blank ref-265'></span>
<span class='ref-266' data-delay='513'></span>
<span class='ref-267 nf' data-delay='515'></span>
<span class='ref-268 nf' data-delay='518'></span>
<span class='blank ref-269'></span>
<span class='ref-270' data-delay='532'></span>
<span class='ref-271 nf' data-delay='536'></span>
<span class='ref-272 nf' data-delay='540'></span>
<span class='blank ref-273 nf'></span>
<span class='blank ref-274'></span>
<span class='blank ref-275'></span>
<span class='ref-276 nf' data-delay='562'></span>
<span class='ref-277 nf' data-delay='569'></span>
<span class='ref-278 nf' data-delay='580'></span>
<span class='blank ref-279'></span>
<span class='ref-280' data-delay='583'></span>
<span class='ref-281 nf' data-delay='600'></span>
<span class='ref-282 nf' data-delay='603'></span>
<span class='blank ref-283'></span>
<span class='blank ref-284'></span>
<span class='blank ref-285 nf'></span>
<span class='ref-286' data-delay='620'></span>
<span class='ref-287' data-delay='13'></span>
<span class='ref-288 nf' data-delay='41'></span>
<span class='blank ref-289'></span>
<span class='blank ref-290 nf'></span>
<span class='blank ref-291'></span>
<span class='blank ref-292'></span>
<span class='ref-293 nf' data-delay='461'></span>
<span class='ref-294' data-delay='53'></span>
<span class='ref-295 nf' data-delay='440'></span>
<span class='ref-296 nf' data-delay='585'></span>
<span class='ref-297 nf' data-delay='12'></span>
<span class='ref-298' data-delay='376'></span>
<span class='ref-299' data-delay='246'></span>
<span class='blank ref-300'></span>
<span class='blank ref-301'></span>
<span class='ref-302' data-delay='19'></span>
<span class='ref-303' data-delay='523'></span>
<span class='ref-304' data-delay='109'></span>
<span class='blank ref-305'></span>
<span class='blank ref-306'></span>
<span class='ref-307' data-delay='31'></span>
<span class='ref-308' data-delay='43'></span>
<span class='ref-309' data-delay='46'></span>
<span class='blank ref-310'></span>
<span class='blank ref-311'></span>
<span class='ref-312' data-delay='63'></span>
<span class='ref-313' data-delay='77'></span>
<span class='ref-314' data-delay='92'></span>
<span class='ref-315' data-delay='96'></span>
<span class='ref-316' data-delay='104'></span>
<span class='ref-317' data-delay='120'></span>
<span class='ref-318' data-delay='126'></span>
<span class='blank ref-319'></span>
<span class='ref-320' data-delay='576'></span>
<span class='ref-321' data-delay='113'></span>
<span class='ref-322' data-delay='152'></span>
<span class='ref-323' data-delay='162'></span>
<span class='ref-324' data-delay='178'></span>
<span class='ref-325' data-delay='182'></span>
<span class='ref-326' data-delay='190'></span>
<span class='ref-327' data-delay='194'></span>
<span class='ref-328' data-delay='201'></span>
<span class='blank ref-329'></span>
<span class='ref-330' data-delay='213'></span>
<span class='ref-331' data-delay='222'></span>
<span class='ref-332' data-delay='227'></span>
<span class='ref-333' data-delay='231'></span>
<span class='ref-334' data-delay='243'></span>
<span class='ref-335' data-delay='253'></span>
<span class='ref-336' data-delay='259'></span>
<span class='ref-337' data-delay='269'></span>
<span class='ref-338' data-delay='281'></span>
<span class='blank ref-339'></span>
<span class='ref-340' data-delay='288'></span>
<span class='ref-341 nf' data-delay='308'></span>
<span class='ref-342 nf' data-delay='313'></span>
<span class='ref-343' data-delay='330'></span>
<span class='ref-344 nf' data-delay='338'></span>
<span class='ref-345' data-delay='341'></span>
<span class='ref-346 nf' data-delay='348'></span>
<span class='ref-347' data-delay='352'></span>
<span class='ref-348' data-delay='360'></span>
<span class='blank ref-349 nf'></span>
<span class='ref-350' data-delay='372'></span>
<span class='ref-351' data-delay='374'></span>
<span class='ref-352 nf' data-delay='379'></span>
<span class='blank ref-353'></span>
<span class='blank ref-354'></span>
<span class='blank ref-355'></span>
<span class='ref-356 nf' data-delay='422'></span>
<span class='ref-357' data-delay='426'></span>
<span class='ref-358' data-delay='439'></span>
<span class='blank ref-359'></span>
<span class='ref-360 nf' data-delay='456'></span>
<span class='ref-361' data-delay='462'></span>
<span class='ref-362' data-delay='467'></span>
<span class='ref-363 nf' data-delay='473'></span>
<span class='ref-364' data-delay='478'></span>
<span class='ref-365 nf' data-delay='487'></span>
<span class='ref-366' data-delay='495'></span>
<span class='ref-367' data-delay='509'></span>
<span class='ref-368 nf' data-delay='516'></span>
<span class='blank ref-369'></span>
<span class='blank ref-370 nf'></span>
<span class='blank ref-371 nf'></span>
<span class='blank ref-372'></span>
<span class='ref-373 nf' data-delay='541'></span>
<span class='ref-374' data-delay='554'></span>
<span class='ref-375 nf' data-delay='556'></span>
<span class='blank ref-376'></span>
<span class='ref-377' data-delay='570'></span>
<span class='ref-378 nf' data-delay='581'></span>
<span class='ref-379' data-delay='584'></span>
<span class='blank ref-380'></span>
<span class='blank ref-381'></span>
<span class='ref-382' data-delay='609'></span>
<span class='ref-383' data-delay='614'></span>
<span class='ref-384' data-delay='621'></span>
<span class='blank ref-385'></span>
<span class='blank ref-386'></span>
<span class='ref-387' data-delay='188'></span>
<span class='ref-388' data-delay='512'></span>
<span class='ref-389' data-delay='268'></span>
<span class='blank ref-390'></span>
<span class='blank ref-391'></span>
<span class='ref-392' data-delay='463'></span>
<span class='ref-393' data-delay='17'></span>
<span class='ref-394' data-delay='448'></span>
<span class='blank ref-395'></span>
<span class='ref-396' data-delay='20'></span>
<span class='ref-397' data-delay='353'></span>
<span class='ref-398' data-delay='573'></span>
<span class='blank ref-399'></span>
<span class='ref-400' data-delay='278'></span>
<span class='ref-401' data-delay='33'></span>
<span class='ref-402' data-delay='32'></span>
<span class='ref-403' data-delay='47'></span>
<span class='ref-404' data-delay='54'></span>
<span class='ref-405' data-delay='59'></span>
<span class='ref-406' data-delay='64'></span>
<span class='ref-407' data-delay='78'></span>
<span class='ref-408' data-delay='97'></span>
<span class='blank ref-409'></span>
<span class='ref-410' data-delay='121'></span>
<span class='ref-411' data-delay='128'></span>
<span class='ref-412' data-delay='135'></span>
<span class='ref-413' data-delay='148'></span>
<span class='ref-414' data-delay='154'></span>
<span class='ref-415' data-delay='163'></span>
<span class='ref-416' data-delay='179'></span>
<span class='ref-417' data-delay='183'></span>
<span class='ref-418' data-delay='195'></span>
<span class='blank ref-419'></span>
<span class='ref-420' data-delay='207'></span>
<span class='ref-421 nf' data-delay='216'></span>
<span class='ref-422' data-delay='223'></span>
<span class='ref-423 nf' data-delay='232'></span>
<span class='ref-424 nf' data-delay='245'></span>
<span class='ref-425' data-delay='254'></span>
<span class='ref-426 nf' data-delay='260'></span>
<span class='ref-427' data-delay='271'></span>
<span class='ref-428' data-delay='283'></span>
<span class='blank ref-429 nf'></span>
<span class='ref-430' data-delay='309'></span>
<span class='ref-431' data-delay='315'></span>
<span class='ref-432 nf' data-delay='331'></span>
<span class='blank ref-433'></span>
<span class='blank ref-434'></span>
<span class='blank ref-435'></span>
<span class='ref-436 nf' data-delay='361'></span>
<span class='ref-437 nf' data-delay='365'></span>
<span class='ref-438 nf' data-delay='375'></span>
<span class='blank ref-439'></span>
<span class='ref-440 nf' data-delay='384'></span>
<span class='ref-441' data-delay='388'></span>
<span class='ref-442' data-delay='407'></span>
<span class='ref-443 nf' data-delay='427'></span>
<span class='ref-444' data-delay='441'></span>
<span class='ref-445 nf' data-delay='447'></span>
<span class='ref-446' data-delay='457'></span>
<span class='ref-447' data-delay='464'></span>
<span class='ref-448 nf' data-delay='474'></span>
<span class='blank ref-449'></span>
<span class='blank ref-450 nf'></span>
<span class='blank ref-451'></span>
<span class='ref-452 nf' data-delay='510'></span>
<span class='ref-453 nf' data-delay='519'></span>
<span class='ref-454' data-delay='528'></span>
<span class='ref-455 nf' data-delay='533'></span>
<span class='blank ref-456'></span>
<span class='ref-457' data-delay='543'></span>
<span class='ref-458 nf' data-delay='557'></span>
<span class='ref-459' data-delay='563'></span>
<span class='blank ref-460'></span>
<span class='blank ref-461'></span>
<span class='ref-462' data-delay='586'></span>
<span class='ref-463' data-delay='604'></span>
<span class='ref-464' data-delay='610'></span>
<span class='blank ref-465'></span>
<span class='blank ref-466'></span>
<span class='ref-467' data-delay='538'></span>
<span class='ref-468' data-delay='199'></span>
<span class='ref-469' data-delay='531'></span>
<span class='blank ref-470'></span>
<span class='ref-471' data-delay='508'></span>
<span class='ref-472' data-delay='127'></span>
<span class='ref-473' data-delay='48'></span>
<span class='ref-474' data-delay='488'></span>
<span class='blank ref-475'></span>
<span class='ref-476' data-delay='100'></span>
<span class='ref-477' data-delay='408'></span>
<span class='ref-478' data-delay='319'></span>
<span class='blank ref-479'></span>
<span class='ref-480' data-delay='218'></span>
<span class='ref-481' data-delay='233'></span>
<span class='ref-482' data-delay='49'></span>
<span class='ref-483' data-delay='60'></span>
<span class='ref-484' data-delay='65'></span>
<span class='ref-485' data-delay='82'></span>
<span class='ref-486' data-delay='98'></span>
<span class='ref-487' data-delay='105'></span>
<span class='ref-488' data-delay='130'></span>
<span class='blank ref-489'></span>
<span class='ref-490' data-delay='149'></span>
<span class='ref-491' data-delay='155'></span>
<span class='ref-492' data-delay='165'></span>
<span class='ref-493' data-delay='184'></span>
<span class='ref-494' data-delay='196'></span>
<span class='ref-495' data-delay='203'></span>
<span class='ref-496' data-delay='208'></span>
<span class='ref-497' data-delay='217'></span>
<span class='blank ref-498'></span>
<span class='blank ref-499'></span>
<span class='ref-500' data-delay='255'></span>
<span class='ref-501 nf' data-delay='261'></span>
<span class='ref-502' data-delay='272'></span>
<span class='ref-503' data-delay='290'></span>
<span class='ref-504 nf' data-delay='310'></span>
<span class='ref-505' data-delay='316'></span>
<span class='ref-506 nf' data-delay='333'></span>
<span class='ref-507' data-delay='342'></span>
<span class='blank ref-508'></span>
<span class='blank ref-509 nf'></span>
<span class='ref-510' data-delay='366'></span>
<span class='ref-511' data-delay='377'></span>
<span class='ref-512 nf' data-delay='380'></span>
<span class='blank ref-513'></span>
<span class='blank ref-514'></span>
<span class='blank ref-515'></span>
<span class='ref-516 nf' data-delay='442'></span>
<span class='ref-517' data-delay='449'></span>
<span class='ref-518' data-delay='465'></span>
<span class='blank ref-519'></span>
<span class='ref-520 nf' data-delay='479'></span>
<span class='ref-521' data-delay='489'></span>
<span class='ref-522' data-delay='496'></span>
<span class='ref-523 nf' data-delay='520'></span>
<span class='ref-524' data-delay='529'></span>
<span class='ref-525 nf' data-delay='534'></span>
<span class='ref-526' data-delay='537'></span>
<span class='ref-527' data-delay='545'></span>
<span class='blank ref-528 nf'></span>
<span class='blank ref-529'></span>
<span class='blank ref-530 nf'></span>
<span class='blank ref-531'></span>
<span class='ref-532' data-delay='605'></span>
<span class='ref-533 nf' data-delay='615'></span>
<span class='ref-534' data-delay='623'></span>
<span class='ref-535 nf' data-delay='36'></span>
<span class='ref-536' data-delay='228'></span>
<span class='ref-537' data-delay='561'></span>
<span class='ref-538 nf' data-delay='553'></span>
<span class='ref-539' data-delay='153'></span>
<span class='ref-540' data-delay='81'></span>
<span class='blank ref-541'></span>
<span class='ref-542' data-delay='497'></span>
<span class='ref-543' data-delay='491'></span>
<span class='ref-544' data-delay='390'></span>
<span class='blank ref-545'></span>
<span class='blank ref-546'></span>
<span class='ref-547' data-delay='34'></span>
<span class='ref-548' data-delay='61'></span>
<span class='ref-549' data-delay='66'></span>
<span class='blank ref-550'></span>
<span class='ref-551' data-delay='99'></span>
<span class='ref-552' data-delay='106'></span>
<span class='ref-553' data-delay='137'></span>
<span class='ref-554' data-delay='150'></span>
<span class='ref-555' data-delay='156'></span>
<span class='ref-556' data-delay='167'></span>
<span class='ref-557' data-delay='185'></span>
<span class='ref-558' data-delay='204'></span>
<span class='ref-559' data-delay='210'></span>
<span class='ref-560' data-delay='453'></span>
<span class='ref-561' data-delay='619'></span>
<span class='ref-562' data-delay='247'></span>
<span class='blank ref-563'></span>
<span class='blank ref-564'></span>
<span class='blank ref-565'></span>
<span class='blank ref-566'></span>
<span class='blank ref-567'></span>
<span class='blank ref-568'></span>
<span class='blank ref-569'></span>
<span class='ref-570' data-delay='362'></span>
<span class='ref-571' data-delay='367'></span>
<span class='ref-572' data-delay='378'></span>
<span class='blank ref-573'></span>
<span class='blank ref-574'></span>
<span class='ref-575' data-delay='428'></span>
<span class='ref-576' data-delay='443'></span>
<span class='ref-577' data-delay='450'></span>
<span class='ref-578' data-delay='475'></span>
<span class='blank ref-579'></span>
<span class='ref-580' data-delay='490'></span>
<span class='ref-581 nf' data-delay='498'></span>
<span class='ref-582' data-delay='521'></span>
<span class='blank ref-583'></span>
<span class='blank ref-584 nf'></span>
<span class='ref-585' data-delay='546'></span>
<span class='ref-586' data-delay='565'></span>
<span class='ref-587 nf' data-delay='571'></span>
<span class='ref-588 nf' data-delay='587'></span>
<span class='blank ref-589'></span>
<span class='ref-590' data-delay='617'></span>
<span class='ref-591' data-delay='624'></span>
<span class='ref-592 nf' data-delay='355'></span>
<span class='blank ref-593'></span>
<span class='blank ref-594'></span>
<span class='blank ref-595'></span>
<span class='ref-596 nf' data-delay='129'></span>
<span class='ref-597' data-delay='544'></span>
<span class='ref-598' data-delay='547'></span>
<span class='blank ref-599'></span>
<span class='ref-600' data-delay='276'></span>
<span class='ref-601 nf' data-delay='172'></span>
<span class='ref-602 nf' data-delay='35'></span>
<span class='blank ref-603'></span>
<span class='blank ref-604'></span>
<span class='ref-605' data-delay='101'></span>
<span class='ref-606 nf' data-delay='107'></span>
<span class='ref-607 nf' data-delay='138'></span>
<span class='ref-608' data-delay='158'></span>
<span class='blank ref-609'></span>
<span class='blank ref-610 nf'></span>
<span class='blank ref-611'></span>
<span class='ref-612' data-delay='211'></span>
<span class='ref-613 nf' data-delay='234'></span>
<span class='ref-614' data-delay='249'></span>
<span class='ref-615 nf' data-delay='262'></span>
<span class='ref-616 nf' data-delay='273'></span>
<span class='ref-617 nf' data-delay='291'></span>
<span class='ref-618' data-delay='317'></span>
<span class='ref-619' data-delay='343'></span>
<span class='ref-620' data-delay='354'></span>
<span class='blank ref-621'></span>
<span class='ref-622' data-delay='368'></span>
<span class='ref-623' data-delay='389'></span>
<span class='ref-624' data-delay='409'></span>
<span class='blank ref-625'></span>
<span class='blank ref-626'></span>
<span class='ref-627' data-delay='451'></span>
<span class='ref-628' data-delay='480'></span>
<span class='ref-629' data-delay='492'></span>
<span class='blank ref-630'></span>
<span class='ref-631' data-delay='522'></span>
<span class='ref-632' data-delay='535'></span>
<span class='ref-633' data-delay='548'></span>
<span class='ref-634' data-delay='566'></span>
<span class='ref-635' data-delay='572'></span>
<span class='ref-636' data-delay='589'></span>
<span class='ref-637' data-delay='606'></span>
<span class='ref-638' data-delay='625'></span>
<span class='ref-639' data-delay='613'></span>
<span class='ref-640' data-delay='141'></span>
<span class='ref-641' data-delay='168'></span>
<span class='ref-642' data-delay='215'></span>
<span class='ref-643' data-delay='622'></span>
<span class='ref-644' data-delay='588'></span>
<span class='ref-645' data-delay='550'></span>
<span class='ref-646' data-delay='392'></span>
<span class='ref-647' data-delay='394'></span>
<span class='ref-648' data-delay='68'></span>
<span class='blank ref-649'></span>
<span class='ref-650' data-delay='102'></span>
<span class='ref-651' data-delay='108'></span>
<span class='ref-652' data-delay='140'></span>
<span class='blank ref-653'></span>
<span class='blank ref-654'></span>
<span class='blank ref-655'></span>
<span class='ref-656' data-delay='212'></span>
<span class='ref-657' data-delay='235'></span>
<span class='ref-658' data-delay='264'></span>
<span class='blank ref-659'></span>
<span class='ref-660' data-delay='292'></span>
<span class='ref-661' data-delay='318'></span>
<span class='ref-662' data-delay='345'></span>
<span class='blank ref-663'></span>
<span class='blank ref-664'></span>
<span class='blank ref-665'></span>
<span class='ref-666' data-delay='410'></span>
<span class='ref-667' data-delay='429'></span>
<span class='ref-668' data-delay='452'></span>
<span class='blank ref-669'></span>
<span class='ref-670' data-delay='493'></span>
<span class='ref-671' data-delay='499'></span>
<span class='ref-672' data-delay='524'></span>
<span class='ref-673' data-delay='549'></span>
<span class='ref-674' data-delay='567'></span>
<span class='ref-675' data-delay='574'></span>
<span class='ref-676' data-delay='590'></span>
<span class='ref-677' data-delay='607'></span>
<span class='ref-678' data-delay='71'></span>
<span class='blank ref-679'></span>
<span class='ref-680' data-delay='511'></span>
<span class='ref-681' data-delay='244'></span>
<span class='ref-682' data-delay='560'></span>
<span class='blank ref-683'></span>
<span class='blank ref-684'></span>
<span class='blank ref-685'></span>
<span class='ref-686' data-delay='69'></span>
<span class='ref-687' data-delay='83'></span>
<span class='ref-688' data-delay='110'></span>
<span class='blank ref-689'></span>
<span class='blank ref-690'></span>
<span class='blank ref-691'></span>
<span class='ref-692' data-delay='205'></span>
<span class='ref-693' data-delay='236'></span>
<span class='ref-694' data-delay='265'></span>
<span class='ref-695' data-delay='274'></span>
<span class='ref-696' data-delay='293'></span>
<span class='ref-697' data-delay='320'></span>
<span class='ref-698' data-delay='363'></span>
<span class='ref-699' data-delay='369'></span>
<span class='ref-700' data-delay='391'></span>
<span class='blank ref-701'></span>
<span class='ref-702' data-delay='430'></span>
<span class='ref-703' data-delay='481'></span>
<span class='ref-704' data-delay='494'></span>
<span class='ref-705' data-delay='500'></span>
<span class='ref-706' data-delay='525'></span>
<span class='ref-707' data-delay='551'></span>
<span class='ref-708' data-delay='575'></span>
<span class='ref-709' data-delay='591'></span>
<span class='blank ref-710'></span>
<span class='ref-711' data-delay='21'></span>
<span class='ref-712' data-delay='9'></span>
<span class='ref-713' data-delay='270'></span>
<span class='ref-714' data-delay='80'></span>
<span class='ref-715' data-delay='79'></span>
<span class='ref-716' data-delay='593'></span>
<span class='ref-717' data-delay='25'></span>
<span class='ref-718' data-delay='84'></span>
<span class='ref-719' data-delay='111'></span>
<span class='ref-720' data-delay='115'></span>
<span class='ref-721' data-delay='173'></span>
<span class='ref-722' data-delay='186'></span>
<span class='ref-723' data-delay='237'></span>
<span class='ref-724' data-delay='266'></span>
<span class='ref-725' data-delay='275'></span>
<span class='ref-726' data-delay='295'></span>
<span class='ref-727' data-delay='321'></span>
<span class='ref-728' data-delay='370'></span>
<span class='blank ref-729'></span>
<span class='ref-730' data-delay='411'></span>
<span class='ref-731' data-delay='431'></span>
<span class='ref-732' data-delay='482'></span>
<span class='blank ref-733'></span>
<span class='blank ref-734'></span>
<span class='blank ref-735'></span>
<span class='ref-736' data-delay='577'></span>
<span class='ref-737' data-delay='592'></span>
<span class='ref-738' data-delay='526'></span>
<span class='blank ref-739'></span>
<span class='ref-740' data-delay='314'></span>
<span class='ref-741' data-delay='18'></span>
<span class='ref-742' data-delay='24'></span>
<span class='blank ref-743'></span>
<span class='blank ref-744'></span>
<span class='blank ref-745'></span>
<span class='ref-746' data-delay='142'></span>
<span class='ref-747' data-delay='169'></span>
<span class='ref-748' data-delay='238'></span>
<span class='blank ref-749'></span>
<span class='ref-750' data-delay='277'></span>
<span class='ref-751' data-delay='296'></span>
<span class='ref-752' data-delay='322'></span>
<span class='ref-753' data-delay='393'></span>
<span class='ref-754' data-delay='412'></span>
<span class='ref-755' data-delay='432'></span>
<span class='ref-756' data-delay='483'></span>
<span class='ref-757' data-delay='501'></span>
<span class='ref-758' data-delay='552'></span>
<span class='blank ref-759'></span>
<span class='ref-760' data-delay='594'></span>
<span class='ref-761' data-delay='323'></span>
<span class='ref-762' data-delay='16'></span>
<span class='blank ref-763'></span>
<span class='blank ref-764'></span>
<span class='blank ref-765'></span>
<span class='ref-766' data-delay='86'></span>
<span class='ref-767' data-delay='112'></span>
<span class='ref-768' data-delay='170'></span>
<span class='blank ref-769'></span>
<span class='blank ref-770'></span>
<span class='blank ref-771'></span>
<span class='blank ref-772'></span>
<span class='blank ref-773'></span>
<span class='blank ref-774'></span>
<span class='blank ref-775'></span>
<span class='blank ref-776'></span>
<span class='ref-777' data-delay='503'></span>
<span class='ref-778' data-delay='578'></span>
<span class='ref-779' data-delay='595'></span>
<span class='blank ref-780'></span>
<span class='blank ref-781'></span>
<span class='ref-782' data-delay='136'></span>
<span class='ref-783' data-delay='415'></span>
<span class='ref-784' data-delay='87'></span>
<span class='ref-785' data-delay='114'></span>
<span class='ref-786' data-delay='171'></span>
<span class='ref-787' data-delay='239'></span>
<span class='ref-788' data-delay='279'></span>
<span class='ref-789' data-delay='297'></span>
<span class='blank ref-790'></span>
<span class='blank ref-791'></span>
<span class='blank ref-792'></span>
<span class='blank ref-793'></span>
<span class='blank ref-794'></span>
<span class='blank ref-795'></span>
<span class='ref-796' data-delay='435'></span>
<span class='ref-797' data-delay='91'></span>
<span class='ref-798' data-delay='174'></span>
<span class='blank ref-799'></span>
<span class='ref-800' data-delay='40'></span>
<span class='ref-801' data-delay='240'></span>
<span class='ref-802' data-delay='298'></span>
<span class='ref-803' data-delay='395'></span>
<span class='ref-804' data-delay='413'></span>
<span class='ref-805' data-delay='433'></span>
<span class='ref-806' data-delay='434'></span>
<span class='ref-807' data-delay='504'></span>
<span class='ref-808' data-delay='596'></span>
<span class='blank ref-809'></span>
<span class='ref-810' data-delay='119'></span>
<span class='ref-811' data-delay='417'></span>
<span class='ref-812' data-delay='88'></span>
<span class='blank ref-813'></span>
<span class='blank ref-814'></span>
<span class='blank ref-815'></span>
<span class='ref-816' data-delay='396'></span>
<span class='ref-817' data-delay='414'></span>
<span class='ref-818' data-delay='505'></span>
<span class='blank ref-819'></span>
<span class='ref-820' data-delay='6'></span>
<span class='ref-821' data-delay='146'></span>
<span class='ref-822' data-delay='300'></span>
<span class='blank ref-823'></span>
<span class='blank ref-824'></span>
<span class='blank ref-825'></span>
<span class='ref-826' data-delay='397'></span>
<span class='ref-827' data-delay='416'></span>
<span class='ref-828' data-delay='597'></span>
<span class='blank ref-829'></span>
<span class='blank ref-830'></span>
<span class='ref-831' data-delay='302'></span>
<span class='ref-832' data-delay='175'></span>
<span class='ref-833' data-delay='299'></span>
<span class='ref-834' data-delay='398'></span>
<span class='ref-835' data-delay='418'></span>
<span class='ref-836' data-delay='598'></span>
<span class='ref-837' data-delay='7'></span>
<span class='blank ref-838'></span>
<span class='blank ref-839'></span>
<span class='ref-840' data-delay='301'></span>
<span class='ref-841' data-delay='399'></span>
<span class='ref-842' data-delay='419'></span>
<span class='blank ref-843'></span>
<span class='blank ref-844'></span>
<span class='blank ref-845'></span>
<span class='ref-846' data-delay='303'></span>
<span class='ref-847' data-delay='400'></span>
<span class='ref-848' data-delay='8'></span>
<span class='blank ref-849'></span>
<span class='blank ref-850'></span>
<span class='blank ref-851'></span>
<span class='blank ref-852'></span>
<span class='blank ref-853'></span>
<span class='blank ref-854'></span>
<span class='blank ref-855'></span>
<span class='blank ref-856'></span>
<span class='ref-857' data-delay='26'></span>
<span class='ref-858' data-delay='304'></span>
<span class='ref-859' data-delay='401'></span>
<span class='blank ref-860'></span>
<span class='blank ref-861'></span>
<span class='blank ref-862'></span>
<span class='ref-863' data-delay='305'></span>
<span class='ref-864' data-delay='402'></span>
<span class='ref-865' data-delay='306'></span>
<span class='ref-866' data-delay='403'></span>
<span class='ref-867' data-delay='404'></span>
<span class='ref-868' data-delay='627'></span>
<span class='blank ref-869'></span>
<span class='blank ref-870'></span>
<span class='blank ref-871'></span>
<span class='blank ref-872'></span>
<span class='blank ref-873'></span>
<span class='blank ref-874'></span>
<span class='blank ref-875'></span>
<span class='ref-876' data-delay='628'></span>
<span class='ref-877' data-delay='405'></span>
<span class='ref-878' data-delay='629'></span>
<span class='blank ref-879'></span>
</div>
<!-- #404 -->
</div>
</b:if>

Langkah 3 - letakkan kode di bawah ini tepat di atas kode </style> atau css di blog sobat :

#error-page{background-color:#0f0f0f;position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;-webkit-box-shadow:inset 0 2px 5px black,inset 0 2px 10px black;-moz-box-shadow:inset 0 2px 5px black,inset 0 2px 10px black;box-shadow:inset 0 2px 5px black,inset 0 2px 10px black}
.error-404{
     width:800px;
     height:110px;
     position:absolute;
     top:50%;left:50%;
     margin:-55px auto auto -400px;overflow:hidden
}
.error-404 span{
     display:block;
     float:left;
     width:9px;
     height:9px;
     margin:0 1px 1px 0;
     background-color:darkred;opacity:0
}
.error-404 .blank{
     background:none
}
.error-404 .blank.nf-text{
     background-color:darkred
}

@media (max-width:800px){
  .error-404{
     width:400px;
     height:55px;
     margin:-28px auto auto -200px
     }

  .error-404 span{
     width:4px;height:4px
     }
}
@media (max-width:400px){
   .error-404{
     width:240px;
     height:33px;
     margin:-17px auto auto -120px
     }
   .error-404 span{
     width:2px;height:2px
     }
}

Langkah 4 - Simpan kode di bawah ini tepat di atas kode </body> :

<script type='text/javascript'>
(function(d){
   var e=d(window),c=d(".error-404 span"),b=d(".error-404 span[data-delay]"),a=b.length;c.css("opacity",0);
     e.on("load",function(){b.each(function(){var f=d(this),g=parseInt(f.data("delay"),10);
     setTimeout(function(){f.animate({opacity:1},600)},g*50)});
     setTimeout(function(){c.each(function(f){if(!d(this).attr("data-delay")){d(this).attr("data-delay",f)}var g=d(this),h=parseInt(g.data("delay"),10);
     setTimeout(function(){if(g.hasClass("nf")){g.addClass("nf-text").animate({opacity:1},800)}else{g.animate({opacity:0.02},800)}},h*10)})},(a*50)+1000)})})
(jQuery);
</script>

Terakhir - Simpan Template!

Untuk mencoba tinggal tuliskan http://nama-blog-sobat.blogspot.com/404 ( ganti nama-blog-sobat dengan alamat blog sobat )

Pastikan pada template blog sobat di atas kode <head> sudah terpasang jquery library seperti <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/> atau versi terbaru lainnya.

Selesai, sekian saja tentang custome halaman error 404 bloggernya Semoga Bermanfaat!

Tidak ada komentar :

Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag ...KODE ANDA DI SINI...
Untuk menyisipkan script, gunakan ...KODE SCRIPT ANDA...
Untuk menyisipkan gambar, gunakan tag ...URL GAMBAR ANDA ...
Untuk menyisipkan judul, gunakan tag ...JUDUL ANDA...
Untuk menyisipkan catatan, gunakan tag ...CATATAN ANDA...
Untuk menciptakan efek tebal gunakan tag ...TEKS ANDA...
Untuk menciptakan efek huruf miring gunakan tag ...TEKS ANDA...

Konversi KodeOOT