Cara Membuat Halaman Eror 404 di Blogger
Halaman yang eror atau tidak ditemukan di blog benar-benar membosankan bahkan tidak bermanfaat bagi pengunjung blog. Hanya 1% orang lain akan melanjutkan membuka halaman blog kamu yang lainnya, jika mereka mendapati halaman eror 404 di blogspot.
Kenapa hanya 1% saya bilang ada yang mau melanjutkan membuka halaman blog kamu, sebab mereka hanya mendapatkan tulisan yang tidak berguna contohnya " Eror 404" dan ini sama sekali tidak memberi manfaat sedikit pun bagi yang membukanya.
Dalam tulisan kali ini, kami akan membagikan tutorial untuk kamu, bagaimana membuat desain halaman eror 404 di blog agar lebih menarik dan mudah di pahami pengguna.
Tentu cara ini membuat para pengunjung blog kamu tidak merasa jenuh jika mereka membuka halaman eror 404 karena segi tampilannya akan terlihat lebih berbeda.
Untuk kamu yang ingin melakukan percobaan halaman eror 404 di blog kamu, bisa menggunakan alamat https://namablog.com/404/ atau https://rianseo.com/404/
Membuat Desain Halaman Eror 404 di Blog
Seperti biasa, kamu bisa salin kode HTML nya dulu dikotak bawah ini, sebagai kerangka halaman.
<div class="container"> <p class="textA">Page Not Found</p> <p class="textB">404</p> <a class="textC" href="#">Go Back</a> <svg class="page-not-found" viewBox="0 0 1280 1024"> <title>Page Not Found</title> <g class="hide tri-dots"> <circle cx="406.1" cy="890.7" r="3.5" transform="translate(-361.3 283) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="426.2" cy="878.8" r="3.7" transform="translate(-353.7 290.8) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="424.4" cy="861.8" r="3.7" transform="translate(-346.1 288.1) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="445.8" cy="867.7" r="3.7" transform="translate(-346.5 298.5) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="438.3" cy="851.8" r="3.7" transform="translate(-340.1 293.4) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="453.8" cy="845.8" r="3.7" transform="translate(-335.6 299.8) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="465.2" cy="859" r="3.7" transform="translate(-340.4 306.4) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="483" cy="849.2" r="3.7" transform="translate(-333.9 313.4) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="500.6" cy="840.2" r="3.7" transform="translate(-327.9 320.5) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="517.7" cy="831.5" r="3.7" transform="translate(-322 327.3) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="502.8" cy="821" r="3.7" transform="translate(-318.9 319.4) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="486" cy="829.6" r="3.7" transform="translate(-324.7 312.7) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="469.6" cy="837.8" r="3.7" transform="translate(-330.2 306.1) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="455.3" cy="825.5" r="3.7" transform="translate(-326.2 298.2) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="471.5" cy="817.7" r="3.7" transform="translate(-320.9 304.8) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="487.9" cy="810.2" r="3.7" transform="translate(-315.6 311.4) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="489.8" cy="791.1" r="3.7" transform="translate(-306.7 310.1) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="473.1" cy="798.2" r="3.7" transform="translate(-311.8 303.4) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="456.9" cy="805.7" r="3.7" transform="translate(-317 296.8) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="440.5" cy="813.7" r="3.7" transform="translate(-322.5 290.2) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="442.4" cy="793.8" r="3.7" transform="translate(-313.2 288.9) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="458.6" cy="786" r="3.7" transform="translate(-307.8 295.4) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="475" cy="779.1" r="3.7" transform="translate(-302.9 302.1) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="491.8" cy="772.4" r="3.7" transform="translate(-298 309) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="506.6" cy="784" r="3.7" transform="translate(-301.7 317.1) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="504.6" cy="802.3" r="3.7" transform="translate(-310.2 318.2) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="519.7" cy="812.9" r="3.7" transform="translate(-313.4 326.2) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="534.7" cy="822.9" r="3.7" transform="translate(-316.3 334.1) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="536.8" cy="805.3" r="3.7" transform="translate(-308 333.2) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="539.2" cy="787.7" r="3.7" transform="translate(-299.8 332.3) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="541.8" cy="770.3" r="3.7" transform="translate(-291.5 331.6) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="559.9" cy="763.5" r="3.7" transform="translate(-286.4 339.1) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="556.9" cy="780.7" r="3.7" transform="translate(-294.6 339.6) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="554.5" cy="797.9" r="3.7" transform="translate(-302.7 340.4) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="552" cy="815.2" r="3.7" transform="translate(-310.9 341.2) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="570.5" cy="807.2" r="3.7" transform="translate(-305.2 348.7) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="572.5" cy="790.5" r="3.7" transform="translate(-297.3 347.8) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="589.7" cy="797.2" r="3.7" transform="translate(-298.5 356.4) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="590" cy="782.3" r="3.7" transform="translate(-291.7 354.8) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="608.2" cy="784.4" r="3.7" transform="translate(-290.7 363.4) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="612.4" cy="765.8" r="3.7" transform="translate(-281.7 363.2) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="627.4" cy="776" r="3.7" transform="translate(-284.7 371.2) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="630.6" cy="758.5" r="3.7" transform="translate(-276.4 370.8) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="647" cy="766.1" r="3.7" transform="translate(-278 379) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="664.8" cy="756.4" r="3.7" transform="translate(-271.7 386.1) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="682.7" cy="749.2" r="3.6" transform="translate(-266.4 393.5) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="662.5" cy="737.6" r="3.7" transform="translate(-263.4 383) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="648" cy="747.5" r="3.7" transform="translate(-269.4 377.5) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="643.5" cy="727.1" r="3.7" transform="translate(-260.6 373.2) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="632.9" cy="740.8" r="3.7" transform="translate(-268.1 369.9) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="620.9" cy="729.6" r="3.7" transform="translate(-264.3 363.2) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="626.6" cy="714" r="3.7" transform="translate(-256.6 364.1) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="609.2" cy="701.3" r="3.6" transform="translate(-252.7 354.7) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="606.7" cy="718.2" r="3.7" transform="translate(-260.6 355.4) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="615.7" cy="747.7" r="3.7" transform="translate(-273.1 362.8) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="602.2" cy="735.1" r="3.7" transform="translate(-268.8 355.3) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="583.1" cy="740.9" r="3.7" transform="translate(-273.6 347.2) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="597.9" cy="751.8" r="3.7" transform="translate(-276.9 355.1) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="594.7" cy="767.9" r="3.7" transform="translate(-284.6 355.4) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="574.7" cy="773.4" r="3.7" transform="translate(-289.3 346.9) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="579.2" cy="757.5" r="3.7" transform="translate(-281.6 347.2) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="564" cy="747.1" r="3.7" transform="translate(-278.5 339.2) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="568" cy="730.7" r="3.7" transform="translate(-270.6 339.2) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="571.9" cy="714.5" r="3.7" transform="translate(-262.8 339.2) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="587.4" cy="724.6" r="3.7" transform="translate(-265.7 347.3) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="590.7" cy="708.2" r="3.7" transform="translate(-257.8 347) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="591.4" cy="691.3" r="3.7" transform="translate(-250.1 345.5) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="574.1" cy="698.1" r="3.7" transform="translate(-255.1 338.4) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="574.8" cy="681.2" r="3.7" transform="translate(-247.3 336.8) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="559.1" cy="669.7" r="3.7" transform="translate(-243.8 328.4) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="558.2" cy="686.9" r="3.7" transform="translate(-251.7 329.9) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="542.7" cy="675.8" r="3.7" transform="translate(-248.3 321.6) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="542.5" cy="658.8" r="3.7" transform="translate(-240.6 319.6) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="526.3" cy="682.4" r="3.7" transform="translate(-253.2 314.8) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="522.2" cy="697.3" r="3.7" transform="translate(-260.4 314.6) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="518.7" cy="713.5" r="3.7" transform="translate(-268.2 314.8) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="533.7" cy="725.5" r="3.7" transform="translate(-272 323) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="537.5" cy="709.2" r="3.7" transform="translate(-264.1 322.9) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="541.1" cy="692.9" r="3.7" transform="translate(-256.4 322.8) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="556.3" cy="703.9" r="3.7" transform="translate(-259.7 330.9) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="552.7" cy="720.2" r="3.7" transform="translate(-267.5 331.1) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="548.8" cy="736.6" r="3.7" transform="translate(-275.4 331.1) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="544.9" cy="753.1" r="3.7" transform="translate(-283.3 331.1) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="530" cy="742.2" r="3.7" transform="translate(-280 323.1) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="526.7" cy="759.5" r="3.7" transform="translate(-288.3 323.5) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="524" cy="777" r="3.7" transform="translate(-296.5 324.2) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="521.6" cy="794.8" r="3.7" transform="translate(-304.9 325.1) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="509" cy="765.9" r="3.7" transform="translate(-293.1 316.1) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="512" cy="748.1" r="3.7" transform="translate(-284.7 315.5) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="515.2" cy="730.5" r="3.7" transform="translate(-276.3 315.1) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="501" cy="717.2" r="3.7" transform="translate(-271.8 307.1) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="487.1" cy="704.7" r="3.7" transform="translate(-267.6 299.4) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="473" cy="692.5" r="3.7" transform="translate(-263.6 291.7) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="491" cy="685.7" r="3.7" transform="translate(-258.6 299.1) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="504.9" cy="698.3" r="3.7" transform="translate(-262.8 306.8) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="508.9" cy="678.8" r="3.7" transform="translate(-253.5 306.5) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="509.4" cy="658.3" r="3.7" transform="translate(-244 304.5) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="525.2" cy="666.5" r="3.7" transform="translate(-246 312.6) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="525.8" cy="649.3" r="3.7" transform="translate(-238.1 311) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="510.2" cy="638.9" r="3.7" transform="translate(-235.1 302.7) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="494.3" cy="646.3" r="3.7" transform="translate(-240.2 296.3) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="478.7" cy="654.5" r="3.7" transform="translate(-245.7 290.1) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="477.7" cy="634.1" r="3.7" transform="translate(-236.5 287.4) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="493.3" cy="627.1" r="3.7" transform="translate(-231.6 293.7) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="473.7" cy="616.2" r="3.7" transform="translate(-228.8 283.6) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="456.1" cy="605.3" r="3.7" transform="translate(-225.7 274.4) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="455.7" cy="625.5" r="3.7" transform="translate(-235 276.4) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="435.9" cy="631.7" r="3.7" transform="translate(-240 268.1) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="438.4" cy="612.9" r="3.7" transform="translate(-231.2 267.2) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="438.5" cy="592.7" r="3.7" transform="translate(-221.9 265) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="420" cy="579.2" r="3.2" transform="translate(-217.8 255.1) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="421.9" cy="600.1" r="3.7" transform="translate(-227.1 258.3) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="419.3" cy="619.8" r="3.6" transform="translate(-236.4 259.2) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="418.1" cy="640.2" r="3.6" transform="translate(-245.8 260.9) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="431.9" cy="652.7" r="3.7" transform="translate(-250 268.6) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="448" cy="645.9" r="3.7" transform="translate(-245.1 275.2) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="464.1" cy="642.8" r="3.7" transform="translate(-241.9 282.2) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="461.6" cy="661.1" r="3.7" transform="translate(-250.6 283) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="493.7" cy="666.7" r="3.7" transform="translate(-249.6 298.3) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="476.4" cy="673.6" r="3.7" transform="translate(-254.7 291.1) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="458.8" cy="680.1" r="3.7" transform="translate(-259.5 283.8) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="444.8" cy="666.4" r="3.7" transform="translate(-254.8 276) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="428.4" cy="674" r="3.7" transform="translate(-260.1 269.3) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="416.4" cy="661.3" r="3.5" transform="translate(-255.6 262.5) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="412.6" cy="683.2" r="2.9" transform="translate(-266 263.1) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="424.1" cy="694" r="3.7" transform="translate(-269.7 269.6) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="441.6" cy="686.6" r="3.7" transform="translate(-264.4 276.7) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="436.5" cy="706" r="3.7" transform="translate(-273.8 276.5) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="415.6" cy="709.6" r="3.7" transform="translate(-277.7 267.4) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="412.9" cy="730.2" r="3.4" transform="translate(-287.4 268.4) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="412.3" cy="751.3" r="3.6" transform="translate(-297.1 270.5) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="428.8" cy="742.4" r="3.7" transform="translate(-291.2 277) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="430.7" cy="723.3" r="3.7" transform="translate(-282.3 275.8) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="450.4" cy="717.8" r="3.7" transform="translate(-277.7 284.2) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="455" cy="699.3" r="3.7" transform="translate(-268.7 284.2) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="469" cy="711.4" r="3.7" transform="translate(-272.7 291.9) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="483.2" cy="723.4" r="3.7" transform="translate(-276.6 299.7) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="479.7" cy="741.7" r="3.7" transform="translate(-285.3 300.1) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="497.5" cy="735.7" r="3.7" transform="translate(-280.6 307.6) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="494.4" cy="753.9" r="3.7" transform="translate(-289.3 308.2) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="477" cy="760.1" r="3.7" transform="translate(-294 300.9) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="460" cy="766.8" r="3.7" transform="translate(-298.9 293.9) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="462" cy="748" r="3.7" transform="translate(-290.1 292.7) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="465.1" cy="729.7" r="3.7" transform="translate(-281.5 292.1) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="446.6" cy="735.7" r="3.7" transform="translate(-286.2 284.4) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="444.7" cy="754.5" r="3.7" transform="translate(-295 285.6) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="443.6" cy="774" r="3.7" transform="translate(-304 287.2) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="427.5" cy="782.4" r="3.7" transform="translate(-309.6 280.8) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="428.1" cy="762.4" r="3.7" transform="translate(-300.4 278.9) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="412" cy="771.5" r="3.6" transform="translate(-306.3 272.5) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="411" cy="791.3" r="3.7" transform="translate(-315.5 274.3) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="426" cy="802.5" r="3.7" transform="translate(-318.9 282.3) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="410" cy="811.3" r="3.7" transform="translate(-324.7 276) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="423.8" cy="822.7" r="3.7" transform="translate(-328.4 283.6) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="439.3" cy="833.1" r="3.7" transform="translate(-331.4 291.8) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="422.6" cy="842" r="3.7" transform="translate(-337.3 285.1) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="407.1" cy="831.9" r="3.5" transform="translate(-334.4 277) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="407.1" cy="852.7" r="3.5" transform="translate(-343.9 279.2) rotate(-27.1)" style="fill: #ffe029"/> <circle cx="408" cy="872.1" r="3.7" transform="translate(-352.6 281.8) rotate(-27.1)" style="fill: #ffe029"/> </g> <g class="hide spin-circles"> <path d="M776.3,403.3A151,151,0,0,1,989.8,189.8" style="fill: none;stroke: #00b3ac;stroke-miterlimit: 10;stroke-width: 8px"/> <path d="M989.8,189.8A151,151,0,0,1,776.3,403.3" style="fill: none;stroke: #fff;stroke-miterlimit: 10;stroke-width: 2px"/> <path d="M786.9,392.7c-53-53-52.8-138.9.3-192.1s139.1-53.2,192.1-.3" style="fill: none;stroke: #00b3ac;stroke-miterlimit: 10;stroke-width: 8px"/> <path d="M979.2,200.4c53,53,52.8,138.9-.3,192.1s-139.1,53.2-192.1.3" style="fill: none;stroke: #fff;stroke-miterlimit: 10;stroke-width: 2px"/> <path d="M797.5,382.1c-46.9-46.9-46.7-123.3.6-170.6s123.6-47.5,170.6-.6" style="fill: none;stroke: #00b3ac;stroke-miterlimit: 10;stroke-width: 8px"/> <path d="M968.6,211c46.9,46.9,46.7,123.3-.6,170.6s-123.6,47.5-170.6.6" style="fill: none;stroke: #fff;stroke-miterlimit: 10;stroke-width: 2px"/> <path d="M808.1,371.5c-40.9-40.9-40.6-107.7.8-149.1s108.1-41.8,149.1-.8" style="fill: none;stroke: #00b3ac;stroke-miterlimit: 10;stroke-width: 8px"/> <path d="M958,221.6c40.9,40.9,40.6,107.7-.8,149.1s-108.1,41.8-149.1.8" style="fill: none;stroke: #fff;stroke-miterlimit: 10;stroke-width: 2px"/> <path d="M818.7,360.9c-34.9-34.9-34.4-92,1.1-127.6s92.7-36,127.6-1.1" style="fill: none;stroke: #00b3ac;stroke-miterlimit: 10;stroke-width: 8px"/> <path d="M947.4,232.2c34.9,34.9,34.4,92-1.1,127.6s-92.7,36-127.6,1.1" style="fill: none;stroke: #fff;stroke-miterlimit: 10;stroke-width: 2px"/> <path d="M829.3,350.3c-28.9-28.9-28.3-76.4,1.4-106.1s77.2-30.3,106.1-1.4" style="fill: none;stroke: #00b3ac;stroke-miterlimit: 10;stroke-width: 8px"/> <path d="M936.8,242.8c28.9,28.9,28.3,76.4-1.4,106.1s-77.2,30.3-106.1,1.4" style="fill: none;stroke: #fff;stroke-miterlimit: 10;stroke-width: 2px"/> </g> <g class="hide big-white-circle"> <circle cx="644" cy="482" r="277" style="fill: #fff"/> </g> <g class="hide grow-circles"> <circle cx="940" cy="523" r="27" style="fill: #ffe029"/> <circle cx="708.5" cy="217.6" r="14.5" transform="translate(-21.2 87.8) rotate(-7)" style="fill: #00b3ac"/> <circle cx="725.5" cy="755.6" r="14.5" transform="translate(-86.5 93.8) rotate(-7)" style="fill: #f62c72"/> <circle cx="446.9" cy="181.6" r="16.5" transform="translate(-18.8 55.7) rotate(-7)" style="fill: #00b3ac"/> <circle cx="314.9" cy="348.6" r="16.5" transform="translate(-40.1 40.9) rotate(-7)" style="fill: #f62c72"/> <circle cx="682.6" cy="187.5" r="7.5" transform="translate(-17.7 84.4) rotate(-7)" style="fill: #f62c72"/> <circle cx="328.5" cy="500.6" r="7.5" transform="translate(-58.4 43.7) rotate(-7)" style="fill: #fff"/> <circle cx="364" cy="439" r="27" style="fill: #ffe029"/> </g> <g class="box"> <polygon class="main-container" points="364.4 328.1 888.1 292.8 889.1 635 453.7 698.2 364.4 328.1" style="fill: #fff;stroke: #032c3f;stroke-miterlimit: 10;stroke-width: 24px"/> <polygon points="395 285.6 762 258.9 732.7 336.1 431.6 350.2 395 285.6" style="fill: #ffe029"/> <polygon points="709.7 622 933.7 622.3 960.9 662.9 931.9 700.1 708.7 699.4 709.7 622" style="fill: #ffe029"/> </g> <g class="hide bottom-triangles"> <path d="M646.6,741.1,476.8,822.7a8.6,8.6,0,0,1-12.3-8.4l14.3-187.9c.5-6.2,8.4-10,13.5-6.5L647.8,726.2a8.6,8.6,0,0,1-1.1,14.9ZM482.8,800.6,625.7,732,494.8,642.5Z" style="fill: #f62c72"/> <path class="hide end-tri" fill="#00b3ac" d="M548.3 732.9l-27.9-104.5L687 671l-138.7 61.9z"/> <path class="start-tri" style="transform: translate(5px, -2px)" fill="#00b3ac" d="M477 803l10.7-159L620 734l-144 69z"/> </g> <g class="hide squiggles"> <g class="squiggle-bottom"> <path class="sq-bottom" d="M798,749.1c2.9.1,5.5,2.1,7.1,4.6a33.5,33.5,0,0,1,3.5,8,116.3,116.3,0,0,0,8.3,18.8,7.5,7.5,0,0,0,3,3.4,5.8,5.8,0,0,0,5.1-.5c9.5-5.2,15.4-15.3,24.5-21.2,2.2-1.5,4.9-2.7,7.5-2a9.3,9.3,0,0,1,4.6,3.7c5.8,7.7,7.9,17.5,11.4,26.4,1.1,2.8,2.7,5.8,5.6,6.4s5-1.1,7-2.7c7.9-6.5,14.4-14.7,23-20.3,1.6-1.1,3.5-2.1,5.4-1.7s3.4,2.2,4.6,3.9a67.9,67.9,0,0,1,8.5,18.2c.9,3.2,1.7,6.6,3.5,9.4s5.1,5,8.4,4.5" style="fill: none;stroke: #00b3ac;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 12px"/> <g class="dots-bottom"> <circle cx="802.6" cy="727.5" r="1.6" style="fill: #fff"/> <circle cx="799.1" cy="734.8" r="1.5" style="fill: #fff"/> <circle cx="809.6" cy="734.3" r="1.6" style="fill: #fff"/> <circle cx="807.1" cy="742.3" r="1.6" style="fill: #fff"/> <circle cx="814.7" cy="743.8" r="1.6" style="fill: #fff"/> <circle cx="810.3" cy="752.5" r="1.4" style="fill: #fff"/> <circle cx="818.4" cy="753" r="1.6" style="fill: #fff"/> <circle cx="816.3" cy="761.8" r="1.6" style="fill: #fff"/> <circle cx="825.5" cy="760.1" r="1.6" style="fill: #fff"/> <circle cx="834.1" cy="755.3" r="1.6" style="fill: #fff"/> <circle cx="842" cy="756.3" r="1.6" style="fill: #fff"/> <circle cx="833.9" cy="764.1" r="1.6" style="fill: #fff"/> <circle cx="824.3" cy="768" r="1.6" style="fill: #fff"/> <circle cx="873.7" cy="776" r="1.5" style="fill: #fff"/> <circle cx="868.8" cy="768.1" r="1.6" style="fill: #fff"/> <circle cx="864.2" cy="758.5" r="1.6" style="fill: #fff"/> <circle cx="859.9" cy="748.6" r="1.6" style="fill: #fff"/> <circle cx="849.6" cy="748.4" r="1.6" style="fill: #fff"/> <circle cx="840.7" cy="747.8" r="1.6" style="fill: #fff"/> <circle cx="848" cy="741" r="1.6" style="fill: #fff"/> <circle cx="856.2" cy="739.4" r="1.6" style="fill: #fff"/> <circle cx="864.7" cy="741.4" r="1.6" style="fill: #fff"/> <circle cx="868.3" cy="751.1" r="1.6" style="fill: #fff"/> <circle cx="872.5" cy="760.6" r="1.6" style="fill: #fff"/> <circle cx="879.2" cy="769.2" r="1.6" style="fill: #fff"/> <circle cx="882.6" cy="777.5" r="1.5" style="fill: #fff"/> <circle cx="889.7" cy="772.1" r="1.6" style="fill: #fff"/> <circle cx="888.9" cy="764.3" r="1.6" style="fill: #fff"/> <circle cx="897.4" cy="765.2" r="1.6" style="fill: #fff"/> <circle cx="896" cy="757.3" r="1.6" style="fill: #fff"/> <circle cx="904.7" cy="757.5" r="1.6" style="fill: #fff"/> <circle cx="902" cy="749.8" r="1.6" style="fill: #fff"/> <circle cx="910.7" cy="749.1" r="1.6" style="fill: #fff"/> <circle cx="914.7" cy="759" r="1.6" style="fill: #fff"/> <circle cx="918.9" cy="768.5" r="1.6" style="fill: #fff"/> <circle cx="923" cy="778.1" r="1.6" style="fill: #fff"/> <circle cx="928.3" cy="786.7" r="1.5" style="fill: #fff"/> <circle cx="937.4" cy="786.1" r="1.5" style="fill: #fff"/> <circle cx="932" cy="778.9" r="1.6" style="fill: #fff"/> <circle cx="927.1" cy="770.2" r="1.6" style="fill: #fff"/> <circle cx="923.2" cy="761" r="1.6" style="fill: #fff"/> <circle cx="918.7" cy="752.1" r="1.6" style="fill: #fff"/> </g> </g> <g class="squiggle-top"> <path class="sq-top" d="M403.3,245.7c-3.3.5-6.6-1.7-8.4-4.5s-2.6-6.2-3.5-9.4a67.9,67.9,0,0,0-8.5-18.2c-1.1-1.7-2.6-3.5-4.6-3.9s-3.8.6-5.4,1.7c-8.5,5.6-15,13.9-23,20.3-2,1.6-4.5,3.3-7,2.7s-4.5-3.6-5.6-6.4c-3.5-9-5.6-18.7-11.4-26.4a9.3,9.3,0,0,0-4.6-3.7c-2.6-.7-5.3.5-7.5,2-9.1,5.9-15,16-24.5,21.2a5.8,5.8,0,0,1-5.1.5,7.5,7.5,0,0,1-3-3.4,116.3,116.3,0,0,1-8.3-18.8,33.5,33.5,0,0,0-3.5-8c-1.6-2.4-4.2-4.4-7.1-4.6" style="fill: none;stroke: #f62c72;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 12px"/> <g class="dots-top"> <circle cx="389" cy="270.1" r="1.5" transform="matrix(0.03, -1, 1, 0.03, 106.66, 650.38)" style="fill: #fff"/> <circle cx="392.7" cy="263.2" r="1.5" transform="translate(117.1 647.4) rotate(-88.2)" style="fill: #fff"/> <circle cx="382.4" cy="263.4" r="1.5" transform="translate(107.1 637.2) rotate(-88.2)" style="fill: #fff"/> <circle cx="385.1" cy="255.6" r="1.5" transform="translate(117.4 632.4) rotate(-88.2)" style="fill: #fff"/> <circle cx="377.8" cy="254" r="1.5" transform="translate(112 623.5) rotate(-88.2)" style="fill: #fff"/> <circle cx="382.3" cy="245.6" r="1.4" transform="translate(124.6 619.9) rotate(-88.2)" style="fill: #fff"/> <circle cx="374.4" cy="244.9" r="1.5" transform="matrix(0.03, -1, 1, 0.03, 117.75, 611.44)" style="fill: #fff"/> <circle cx="376.7" cy="236.4" r="1.5" transform="translate(128.5 605.5) rotate(-88.2)" style="fill: #fff"/> <circle cx="367.8" cy="237.8" r="1.5" transform="translate(118.4 597.9) rotate(-88.2)" style="fill: #fff"/> <circle cx="359.3" cy="242.3" r="1.5" transform="translate(105.7 593.7) rotate(-88.2)" style="fill: #fff"/> <circle cx="351.6" cy="241" r="1.5" transform="translate(99.6 584.7) rotate(-88.2)" style="fill: #fff"/> <circle cx="359.8" cy="233.6" r="1.5" transform="translate(114.8 585.8) rotate(-88.2)" style="fill: #fff"/> <circle cx="369.2" cy="230.2" r="1.5" transform="translate(127.4 591.9) rotate(-88.2)" style="fill: #fff"/> <circle cx="321.4" cy="220.9" r="1.5" transform="translate(90.4 535.2) rotate(-88.2)" style="fill: #fff"/> <circle cx="326" cy="228.7" r="1.5" transform="translate(87 547.3) rotate(-88.2)" style="fill: #fff"/> <circle cx="330.1" cy="238.2" r="1.5" transform="translate(81.5 560.5) rotate(-88.2)" style="fill: #fff"/> <circle cx="334" cy="248" r="1.5" transform="translate(75.6 573.9) rotate(-88.2)" style="fill: #fff"/> <circle cx="344" cy="248.5" r="1.5" transform="translate(84.8 584.4) rotate(-88.2)" style="fill: #fff"/> <circle cx="352.6" cy="249.3" r="1.5" transform="translate(92.2 593.8) rotate(-88.2)" style="fill: #fff"/> <circle cx="345.4" cy="255.7" r="1.5" transform="translate(78.8 592.8) rotate(-88.2)" style="fill: #fff"/> <circle cx="337.3" cy="257" r="1.5" transform="translate(69.7 585.9) rotate(-88.2)" style="fill: #fff"/> <circle cx="329.1" cy="254.8" r="1.5" transform="translate(64 575.6) rotate(-88.2)" style="fill: #fff"/> <circle cx="325.9" cy="245.2" r="1.5" transform="translate(70.4 563.2) rotate(-88.2)" style="fill: #fff"/> <circle cx="322.1" cy="235.9" r="1.5" transform="translate(76.1 550.4) rotate(-88.2)" style="fill: #fff"/> <circle cx="315.9" cy="227.3" r="1.5" transform="translate(78.7 535.9) rotate(-88.2)" style="fill: #fff"/> <circle cx="312.8" cy="219.2" r="1.5" transform="translate(83.8 524.9) rotate(-88.2)" style="fill: #fff"/> <circle cx="305.8" cy="224.2" r="1.5" transform="matrix(0.03, -1, 1, 0.03, 71.97, 522.7)" style="fill: #fff"/> <circle cx="306.3" cy="231.9" r="1.5" transform="translate(64.9 530.7) rotate(-88.2)" style="fill: #fff"/> <circle cx="298.1" cy="230.7" r="1.5" transform="translate(58 521.3) rotate(-88.2)" style="fill: #fff"/> <circle cx="299.2" cy="238.4" r="1.5" transform="translate(51.4 529.9) rotate(-88.2)" style="fill: #fff"/> <circle cx="290.7" cy="238" r="1.5" transform="matrix(0.03, -1, 1, 0.03, 43.62, 520.99)" style="fill: #fff"/> <circle cx="293.1" cy="245.5" r="1.5" transform="translate(38.4 530.7) rotate(-88.2)" style="fill: #fff"/> <circle cx="284.6" cy="245.9" r="1.5" transform="translate(29.8 522.6) rotate(-88.2)" style="fill: #fff"/> <circle cx="281.1" cy="236.2" r="1.5" transform="translate(36.1 509.7) rotate(-88.2)" style="fill: #fff"/> <circle cx="277.3" cy="226.8" r="1.5" transform="translate(41.8 496.8) rotate(-88.2)" style="fill: #fff"/> <circle cx="273.6" cy="217.4" r="1.5" transform="matrix(0.03, -1, 1, 0.03, 47.66, 483.94)" style="fill: #fff"/> <circle cx="268.7" cy="208.9" r="1.4" transform="translate(51.4 470.8) rotate(-88.2)" style="fill: #fff"/> <circle cx="259.8" cy="209.2" r="1.5" transform="translate(42.5 462.2) rotate(-88.2)" style="fill: #fff"/> <circle cx="264.8" cy="216.4" r="1.5" transform="translate(40.1 474.2) rotate(-88.2)" style="fill: #fff"/> <circle cx="269.4" cy="224.9" r="1.5" transform="translate(36 487) rotate(-88.2)" style="fill: #fff"/> <circle cx="272.8" cy="234" r="1.5" transform="matrix(0.03, -1, 1, 0.03, 30.27, 499.33)" style="fill: #fff"/> <circle cx="277" cy="242.8" r="1.5" transform="translate(25.5 512) rotate(-88.2)" style="fill: #fff"/> </g> </g> </g> <g class="hide grow-crosshairs"> <path d="M983.1,582.2h-9v-9a5.9,5.9,0,0,0-11.9,0v9h-9a5.9,5.9,0,1,0,0,11.9h9v9a5.9,5.9,0,0,0,11.9,0v-9h9a5.9,5.9,0,0,0,0-11.9Z" style="fill: #f62c72"/> <path d="M997,452.5h-6.2v-6.2a4.1,4.1,0,0,0-8.2,0v6.2h-6.2a4.1,4.1,0,0,0,0,8.2h6.2v6.2a4.1,4.1,0,1,0,8.2,0v-6.2H997a4.1,4.1,0,1,0,0-8.2Z" style="fill: #fff"/> <path d="M382.4,704.4h-5.6v-5.6a3.7,3.7,0,0,0-7.3,0v5.6h-5.6a3.7,3.7,0,1,0,0,7.3h5.6v5.6a3.7,3.7,0,1,0,7.3,0v-5.6h5.6a3.7,3.7,0,0,0,0-7.3Z" style="fill: #fff"/> <path d="M363.3,137.4h-5.6v-5.6a3.7,3.7,0,1,0-7.3,0v5.6h-5.6a3.7,3.7,0,1,0,0,7.3h5.6v5.6a3.7,3.7,0,1,0,7.3,0v-5.6h5.6a3.7,3.7,0,1,0,0-7.3Z" style="fill: #fff"/> </g> <g class="hide left-lines"> <line x1="381.1" y1="507.1" x2="272.1" y2="598" style="fill: none;stroke: #f62c72;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 6px"/> <line x1="384.1" y1="521.1" x2="275.1" y2="611.9" style="fill: none;stroke: #f62c72;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 6px"/> <line x1="387.2" y1="535.1" x2="278.2" y2="625.9" style="fill: none;stroke: #f62c72;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 6px"/> <line x1="390.2" y1="549.1" x2="281.2" y2="639.9" style="fill: none;stroke: #f62c72;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 6px"/> <line x1="393.2" y1="563.1" x2="284.2" y2="653.9" style="fill: none;stroke: #f62c72;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 6px"/> <line x1="396.3" y1="577.1" x2="287.3" y2="667.9" style="fill: none;stroke: #f62c72;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 6px"/> <line x1="399.3" y1="591" x2="290.3" y2="681.9" style="fill: none;stroke: #f62c72;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 6px"/> <line x1="402.3" y1="605" x2="293.3" y2="695.9" style="fill: none;stroke: #f62c72;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 6px"/> <line x1="405.4" y1="619" x2="296.4" y2="709.9" style="fill: none;stroke: #f62c72;stroke-linecap: round;stroke-miterlimit: 10;stroke-width: 6px"/> </g> <g class="hide top-triangles"> <polygon points="593 168.6 659.5 244.5 497.1 255.2 593 168.6" style="fill: #f62c72"/> <polyline points="659.5 234.5 657.3 213.9 590.7 138 494.8 224.6 497.1 245.2 497.1 245.2 593 158.6 659.5 234.5" style="fill: #ffe029"/> </g> <g class="hide words"> <text transform="translate(471.5 329.1) rotate(-2.9)" style="font-size: 40px;fill: #032c3f;font-family: Futura-CondensedMedium, Futura">P</text> <text transform="translate(486.4 328.4) rotate(-2.9)" style="font-size: 40px;fill: #032c3f;font-family: Futura-CondensedMedium, Futura">A</text> <text transform="translate(502.6 327.5) rotate(-2.9)" style="font-size: 40px;fill: #032c3f;font-family: Futura-CondensedMedium, Futura">G</text> <text transform="matrix(1, -0.05, 0.05, 1, 521.22, 326.59)" style="font-size: 40px;fill: #032c3f;font-family: Futura-CondensedMedium, Futura">E</text> <text transform="matrix(1, -0.05, 0.05, 1, 535.73, 325.85)" style="font-size: 40px;fill: #032c3f;font-family: Futura-CondensedMedium, Futura"> </text> <text transform="matrix(1, -0.05, 0.05, 1, 544, 325.43)" style="font-size: 40px;fill: #032c3f;font-family: Futura-CondensedMedium, Futura">N</text> <text transform="translate(562.7 324.5) rotate(-2.9)" style="font-size: 40px;fill: #032c3f;font-family: Futura-CondensedMedium, Futura">O</text> <text transform="translate(582.1 323.5) rotate(-2.9)" style="font-size: 40px;fill: #032c3f;font-family: Futura-CondensedMedium, Futura">T</text> <text transform="matrix(1, -0.05, 0.05, 1, 595.15, 322.83)" style="font-size: 40px;fill: #032c3f;font-family: Futura-CondensedMedium, Futura"> </text> <text transform="translate(603.4 322.4) rotate(-2.9)" style="font-size: 40px;fill: #032c3f;font-family: Futura-CondensedMedium, Futura">F</text> <text transform="translate(617.5 321.7) rotate(-2.9)" style="font-size: 40px;fill: #032c3f;font-family: Futura-CondensedMedium, Futura">O</text> <text transform="translate(636.6 320.7) rotate(-2.9)" style="font-size: 40px;fill: #032c3f;font-family: Futura-CondensedMedium, Futura">U</text> <text transform="translate(655.1 319.8) rotate(-2.9)" style="font-size: 40px;fill: #032c3f;font-family: Futura-CondensedMedium, Futura">N</text> <text transform="matrix(1, -0.05, 0.05, 1, 673.8, 318.83)" style="font-size: 40px;fill: #032c3f;font-family: Futura-CondensedMedium, Futura">D</text> <text transform="translate(742 682.9)" style="font-size: 60px;fill: #032c3f;font-family: Futura-CondensedMedium, Futura">GO <tspan x="69.1" y="0" style="letter-spacing: 0.0029296875em">B</tspan><tspan x="94" y="0" style="letter-spacing: -0.0068359375em">A</tspan><tspan x="118" y="0">CK</tspan></text> <text transform="translate(479.2 549.5)" style="font-size: 180px;fill: #032c3f;font-family: Futura-CondensedExtraBold, Futura;font-weight: 700">4<tspan x="108.3" y="0" style="letter-spacing: -0.0009765625em">0</tspan><tspan x="216.4" y="0">4</tspan></text> </g> </svg> </div>Letakan kode HTML ini, tepat dibagian bawah kode
</head> Jika tidak bisa, ganti posisi letakan kodenya di atas kode </head> Biasanya setiap template blogger memiliki perbedaan.Salin lagi kode CSS dibawah ini, sebagai pendukung tampilan agar lebih keren.
body {
height: 100vh;
background: #88DCD5;
display: grid;
font-family: 'Roboto Condensed', sans-serif;
}
.container {
position: relative;
height: 600px;
width: 750px;
margin: auto;
}
.container svg {
height: 100%;
}
p, a {
margin: 0;
position: absolute;
text-decoration: none;
text-transform: uppercase;
color: #032C3F;
font-size: 24px;
}
.textA {
top: 169px;
left: 257px;
transform: rotate(-3deg);
}
.textB {
font-weight: 700;
font-size: 135px;
top: 209px;
left: 273px;
transform: rotate(-2deg);
}
.textC {
top: 370px;
left: 428px;
font-size: 30px;
transform: rotate(1deg);
}
Klik SIMPAN tema, dan cek tampilannya menggunakan link seperti contoh halaman eror 404 yang saya jelaskan diatas tadi.Design by Jaimey Rosen
Kode HTML / CSS / JavaScript
Browser Chrome, Edge, Firefox, Opera, Safari
Dibawah ini juga ada beberapa tampilan design halaman eror 404 yang sudah kami kumpulkan dari berbagai macam nara sumber dan pastinya bisa digunakan untuk blog versi Blogspot.
Kumpulan Contoh Design Halaman Eror 404 Blog
See the Pen
Error 404 with pure CSS: Monument Valley inspiration by Sussie Casasola (@SusCasasola)
on CodePen.
Cara menggunakannya sama saja seperti pada langkah contoh pertama tadi, kamu hanya perlu menyalin kode HTML, CSS dan JavaScript yang ada di kolom kotak codepen.
Infirasi dari freefrontend.com/html-css-404-page-templates/
Akhir Kata
Jika ada pertanyaan maupun eror dalam pemasangan jangan lupa untuk menulis komentarnya agar bisa kami bantu.
Lebih dari itu, sampai disini saja tutorial yang dapat kami sampaikan tentang design halaman eror 404 yang bisa digunakan kehalaman blog, Jangan lupa juga follow blog ini untuk bisa mendapatkan beberapa informasi menariknya yang terkait dengan dunia blogging.
Posting Komentar untuk "Cara Membuat Halaman Eror 404 di Blogger"
Kami memiliki kebijakan dalam berkomentar di Blog ini :
— Dilarang promosi suatu barang
— Dilarang jika memasang link aktif di komentar
— Dilarang keras melakukan promosi iklan
— Dilarang menulis komentar yang berisi sara, bully atau cemuhan
NB :Komentar yang melanggar tidak akan ditampilkan
Kebijakan komentar yang bisa Anda temukan selengkapnya disini
Dukungan :
Jika menyukai dengan artikel blog kami, silahkan Ikuti blog ini