Kotak dengan Fitur Copy Code

script icon bergetar 3 kolom 2 baris

silahkan buat halaman lalu paste kode di bawah ini

<!DOCTYPE html>

<html>

<head>

	<title>Blog dengan kotak icon</title>

	<style>

		.container {

			display: flex;

			flex-wrap: wrap;

			justify-content: flex-end;

			align-items: flex-start;

			max-width: 800px;

			margin: 0 auto;

			padding: 20px;

		}



		.box {

			width: 30%;

			padding: 20px;

			margin: 10px;

			background-color: #fff;

			border: 1px solid #ccc;

			border-radius: 5px;

			text-align: center;

			position: relative;

			cursor: pointer;

			transition: all 0.3s ease;

		}



		.box:hover {

			transform: translateX(-5px);

			box-shadow: 5px 5px 10px rgba(0,0,0,0.3);

			animation: shake 0.5s;

			animation-iteration-count: infinite;

			animation-timing-function: linear;

		}



		.box:hover img {

			opacity: 0.8;

		}



		.box img {

			max-width: 100%;

			display: block;

			margin: 0 auto;

			transition: opacity 0.3s ease;

			width: 150px;

			height: 150px;

		}



		@keyframes shake {

			0% { transform: translateX(-5px); }

			50% { transform: translateX(5px); }

			100% { transform: translateX(-5px); }

		}

	</style>

</head>

<body>

	<div class="container">

		<div class="box" onclick="location.href='https://sebrangalam.blogspot.com/p/cari-tahu-zodiak-dan-sifat-berdasarkan.html';">

			<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzGnglFkABQtheIhrKrOTcIIDcXCusCHSkyrnG_3X6mSX9akLLtJ6Q-rSJLo5X6vxByE9fOje7J-Fxx8XoZEPIMXJc7R_CbzsXdzKLZRPfBaJBs0fWGIbTK5wlkNsPsWU968e15SIvl-3-n33W0E9DrKk4rGVji2YXn1pHMN8GkURd81w9TxDZFEVEmg/s1600/CARI%20SIFAT%20ZODIA.png" alt="gambar 1">

			

		</div>

		<div class="box" onclick="location.href='https://sebrangalam.blogspot.com/search/label/script?&max-results=10';">

			<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIwt9zONxTgoxiSVCzMW7BpE-f0tPw-nD4Tw4rl0sYEMQO9XgRweE6evycmDQUJBSmK3aUPwZmrgmZGgJ-_Yg2hr9MzEZYiysHb7GOFo60Zq3LZpSXdi1LcSZCt-PyTt9icT_4S_iS_y03TEi06ZdLlGvDj4QhbwL1tYcLUu0ukWhGzrNQrF0b_s=s1600/SCRIPT.png" alt="gambar 2"></div>

	<div class="box" onclick="location.href='https://sebrangalam.blogspot.com/search/label/motivasi?&max-results=10';">

		<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxyI1-SfQ2yWtyPn7EvhkjIATuV7fKPZw8ScV7nJFi0KzSWDk-DTm9MTTnmT0NifLvFhJ4NcNiaANv0wmZkLRfIZKfiHFl-dW9RgKnzQEGmtpJiDmYNYWZdj3wZktzJHHiTrhFlhq-jTG1Rvtz2Qj52L-tD44YjLaZqCCwqbg3iDXAGhD89PvyzAoX9gfSP1T=s1600/MOTIVASI.png" alt="gambar 3">

		

	</div>

	<div class="box" onclick="location.href='https://sebrangalam.blogspot.com/search/label/islam?&max-results=10';">

		<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDcrpPH0EORZBPEKwQAsG5H5Cfy9X0idjJMVf_67LOMZ0DpJtVZKGtMBhL7VHrz4Dro4CB33yOBrhE3MxIcLaOahSd20bgvq8Wnm7__Kz-34sJVcXsqTicTddpHJrlz_Rng17rZ1lr6U8W6Uf-6Jjz6yXvvtM8Wd2QVo6UxjJf8Pw7KOSZFX5u5eAs=s1600/ISLAM.png" alt="gambar 4">

		

	</div>

</div>

  

  </body></html>