Featured Post

Artikel Terbaru

Membuat Form Interaktif Menarik Pet Store dengan CSS3

PET STORE atau toko hewan sudah banyak berjamuran di tengah-tengah kehidupan masyarakat yang beraneka ragam. Tentu saja dengan keberadaan ...

02 June 2023

Membuat Form Interaktif Menarik Pet Store dengan CSS3

Membuat Form Interaktif Menarik Pet Store dengan CSS3

Membuat Form Interaktif Menarik Pet Store dengan CSS3

PET STORE atau toko hewan sudah banyak berjamuran di tengah-tengah kehidupan masyarakat yang beraneka ragam. Tentu saja dengan keberadaan komunitas pecinta hewan, keberadaan Pet Store sangatlah dibutuhkan untuk mencukupi segala macam kebutuhan dari sang pemilik hewan peliharaannya. Kucing menjadi primadona keberadaan Pet Store. Mereka para penjual, menjual pernak-pernik yang berkaitan dengan kucing. Mulai kandang, pakan, tempat buang kotoran, dan aksesoris bel yang terlilit di leher kucing.

07 January 2023

Cara Memasang Musik Player di Blogspot dengan CSS3

Cara Memasang Musik Player di Blogspot dengan CSS3

Cara Memasang Widget Musik Player di Blogspot dengan CSS3

MUSIK Player atau MP3 Player yang sering kita gunakan ketika menemani bekerja di dunia online telah menjadi kebutuhan wajib yang ada di instalan komputer kita. Karena dengan musiklah, suasana semakin hangat dan dapat membuat pekerjaan menjadi lebih nikmat dikerjakan. Era musik telah merajalela mulai dari warnet yang sudah melegenda sejak dulu. Warnet mana yang tidak menyediakan musik player dan mendendangkan musik. Pasti dan hampir semua warnet memutar musik ketika melayani para pelanggan warnet. Begitu juga dengan era mulai kaset pita, CD hingga harddisk dan flashdisk.

Kalau semisal Musik Player dipasang di Blog apakah bisa? Jawabannya bisa. Karena sekarang ini saya akan memberikan tutorial bagaimana menampilkan musik player dengan kecanggihan bahasa pemrograman Web yaitu CSS3. Tidak sulit kok, hanya telaten dan disiplin saja ketika menerapkan ilmu, karena Tuhan tidak akan memberikan ujian melebihi kemampuan umatnya. Ehm, sebuah nasehat dari para pemuka agama yang sangat mendalam. Okelah kalau begitu tidak perlu lama-lama kita ngobrolnya. Karena kita akan segera melakukan utak-atik template. Ya template. Bagian terpenting dari blog dengan jutaan coding yang akan siap kita obrak-abrik hehe.

Oh ya sebelumnya. Kalian mesti menyiapkan lagu berformat MP3 ya, lagunya terserah. Mau lagu barat, lagu indonesia, lagu malaysia, lagu manapun boleh. Aliran musik metal, pop, alternatif, dangdut, koplo atau kalian nyanyi sendiri terus rekam dengan format MP3 juga boleh sekali. Yang penting formatnya MP3 ya teman-teman. Ya iyalah MP3 untuk musik, masak MP4 itu khan untuk video :D. Nanti file musik itu kita hosting dan simpan di GoogleDrive saja. Itung-itung masih gratisan khan. Nanti link share download itu kita pakai untuk menarik file musiknya supaya tampil dan dapat didengarkan di blog kita dengan CSS3 tadi yang sudah kita tempel di template.



Cara Memasang Widget Musik Player di Blog

1. Masuk ke Dashboard Blogger
2. Pilih Tema
3. Klik Sesuaikan : Edit HTML ini langsung masuk ke template
4. Cari kode ]]></b:skin> dan tempelkan kode dibawah ini diatas kode ]]></b:skin> tadi.
.audioPlayer{background:#fbfbfb;width:100%;height:auto;font-family:"Noto Sans",sans-serif;border-radius:15px}
.audioPlayer audio::-webkit-media-controls-panel{background:#fbfbfb}
.audioContainer{padding:10px 10px 10px 10px}
.titleTrack{color:#444;font-weight:bold}
.audioPlayer audio{width:100%}
.audioPlayer audio::-webkit-media-controls-current-time-display{color:#f74545}
.audioPlayer audio::-webkit-media-controls-time-remaining-display{color:#777}
.audioPlayer audio::-webkit-media-controls-timeline{background:#fafafa;margin-left:20px;margin-right:10px;border-radius:50px}

.Alifa .audioPlayer{background:#2d2d30}
.Alifa .titleTrack{color:#eee}
.Alifa .audioPlayer audio::-webkit-media-controls-panel,.drK .audioPlayer audio::-webkit-media-controls-timeline{background:#888}
.Alifa .audioPlayer audio::-webkit-media-controls-current-time-display,.drK .audioPlayer audio::-webkit-media-controls-time-remaining-display{color:#000}


Terus simpan ya di template itu teman-teman kodenya. Setelah itu kita akan menuju ke postingan untuk menempelkan kode yang nanti untuk menampilkan widgetnya di postingan. Begini kodenya.
<div class="audioPlayer">
  <div class="audioContainer">
    <!-- Audio 1 -->
    <span class="titleTrack">Heart - Alone</span>
    <div class="audioList">
      <audio controls="controls" src="https://docs.google.com/uc?export=open&id=1ExL6XulajeGOtpn6GEHBfbemVYbUfq_2"></audio>
    </div>
    <!-- Audio 2 -->
    <span class="titleTrack">Guns N Roses - Knockin on Heavens Door</span>
    <div class="audioTrack">
      <audio controls="controls" src="https://docs.google.com/uc?export=open&id=1t0MzA46DdIMmW3FLbFJ1eOhe5R7T-xfQ"></audio>
    </div>
     <!-- Audio 3 -->
    <span class="titleTrack">Collective Soul - Run</span>
    <div class="audioTrack">
      <audio controls="controls" src="https://docs.google.com/uc?export=open&id=1_VhfjpNqYR3Q1fPMFUME_jtviPHI5Lw_"></audio>
    </div>
  </div>
</div>


Itu kodenya punya saya dan sudah saya taruh di DEMO. Silakan lihat dulu demonya ya.



Sekarang kita mulai untuk mendapatkan kode musiknya yang sudah kita taruh di googledrive tadi ya.

Cara Membuat Link Audio Musik di Googledrive dengan Mudah

1. Masuk ke GOOGLEDRIVE
2. Pilih BARU
3. Pilih UPLOAD FILE
Diamkan saja dulu karena nanti jadinya seperti ini dibawah kodenya :

https://drive.google.com/file/d/1ExL6XulajeGOtpn6GEHBfbemVYbUfq_2/view?usp=share_link



4. Pilih file audio yang ingin digunakan
5. Setelah terupload, klik kanan file dan pilih BAGIKAN



6. Pada bagian bawah pilih saya SIAPA SAJA YANG MEMILIKI LINK
7. Salin link yang sudah disediakan disitu



Catatan :
Untuk tulisan yang sudah saya beri mark berwarna yaitu untuk :

https://docs.google.com/uc?export=open&id=1ExL6XulajeGOtpn6GEHBfbemVYbUfq_2
https://docs.google.com/uc?export=open&id=1t0MzA46DdIMmW3FLbFJ1eOhe5R7T-xfQ
https://docs.google.com/uc?export=open&id=1_VhfjpNqYR3Q1fPMFUME_jtviPHI5Lw_


Yang saya tebeli itu adalah file yang sudah kita upload dan kita ambil linknya. Sekarang tinggal save saja ya.

Catatan lagi :
Musik bisa ditambahin lagi ya bawahnya dengan ini kodenya :
<!-- Audio 4 -->
<span class="titleTrack">Judul Musik Kamu - Penyanyinya</span>
<div class="audioTrack">
<audio controls="controls" src="https://docs.google.com/uc?export=open&id=URL Musik di Googledrive"></audio>
</div>


Untuk membuat musik memutar secara otomatis ketika blog dibuka kalian mesti mengganti controls="controls" menjadi autoplay="autoplay"

Sekian saja teman-teman, semoga bermanfaat dan blog kalian bisa digunakan untuk mendengarkan musik favorit kalian. Silakan lanjutkan kerjaan kalian ya. Salam hangat. Sukses Blogger.

Bagikan ke teman-teman kamu

18 December 2022

Memasang Tombol Download Film Drama Korea beserta Keterangannya

Memasang Tombol Download Film Drama Korea beserta Keterangannya

Memasang Tombol Download Film Drama Korea beserta Keterangannya

TOMBOL download yang ada di web film gratis sekarang telah mengalami pergeseran yang semula biasa saja, menjadi tombol donwload yang sangat bervariasi. Aneka ragam tombol download itu hasil kreasi si pemilik website. Bentuk tombol download bisa bermacam-macam variasinya.

Disamping tombol download tersebut, biasanya juga terdapat keterangan berupa format film dan tempat hosting atau penyimpanan film itu berada misal di GoogleDrive, AceBox, iBox, UploadForever dan sebagainya. Format film yang ditampilkan mulai dari ukuran 240p, 360p, 480p, 720p hingga 1080p bahkan 4k. Yang saya sebut terakhir sudah masuk kategori Ultra HD dan ketika ditampilkan di layar desktop PC atau Laptop, maka film akan menampikan resolusi gambar terbaik, jernih dan bening dengan resolusi memanjakan mata. Membuat sejuk pandangan mata yang melihat.

Seperti halnya website yang berisi film-film drama korea, kali ini saya akan memberikan tutorial tentang memberikan Kreasi Tombol Download pada Website



Okelah kalau begitu kita mulai saja.

Memasang Tombol Download Film Drama Korea beserta Keterangannya

1. Kalian masuk ke Dashboard Blogger
2. Kemudian klik Tema
3. Setelah masuk ke template, cari kode ]]></b:skin> dan tempelkan kode dibawah ini tepat diatas dari kode ]]></b:skin> tersebut.
.alifa-download{font-size:12px;font-weight:bold;font-color:#000; background:none repeat scroll 0% 0% #00000;padding:10px;margin:10px 0}
.alifa-download ul{margin:0;padding:0;list-style:outside none none}
.alifa-download ul li{background:none repeat scroll 0% 0% #FFE4B5;margin-bottom:2px;line-height:26px;padding:0 5px;font-size:16px}
.alifa-download ul li strong{background:#CD853F;border-right:2px solid #F5F5F5;width:150px;display:block;float:left;margin-left:-5px;margin-right:2px;color:#FFF;padding:0 5px;text-align:left}


4. Setelah itu masuk ke postingan yang sudah tersedia artikel tentang film yang akan diberikan link untuk download. Pastikan film itu sudah diberi sinopsis atau alur cerita meski sedikit saja sebagai gambaran untuk pengunjung bahwa dia telah membaca dan mengetahui alur cerita secara garis besarnya lewat sinopsis tersebut. Ini kodenya :
<div class="alifa-download">
   <ul>
      <li style="text-align: center;">
         <strong>360p</strong>
         <a href="URL kalian" target="_blank" rel="nofollow noopener">Acebox</a> |
         <a href="URL kalian" target="_blank" rel="nofollow noopener">Drive</a> |
         <a href="URL kalian" target="_blank" rel="nofollow noopener">iBoxs</a> |
         <a href="URL kalian" target="_blank" rel="nofollow noopener">Mirror</a>
      </li>
      <li style="text-align: center;">
         <strong>480p</strong>
         <a href="URL kalian" target="_blank" rel="nofollow noopener">Acebox</a> |
         <a href="URL kalian" target="_blank" rel="nofollow noopener">Drive</a> |
         <a href="URL kalian" target="_blank" rel="nofollow noopener">iBoxs</a> |
         <a href="URL kalian" target="_blank" rel="nofollow noopener">Mirror</a>
      </li>
      <li style="text-align: center;">
         <strong>720p</strong>
         <a href="URL kalian" target="_blank" rel="nofollow noopener">Acebox</a> |
         <a href="URL kalian" target="_blank" rel="nofollow noopener">Drive</a> |
         <a href="URL kalian" target="_blank" rel="nofollow noopener">iBoxs</a> |
         <a href="URL kalian" target="_blank" rel="nofollow noopener">Mirror</a>
      </li>
      <li style="text-align: center;">
         <strong>1080p</strong>
         <a href="URL kalian" target="_blank" rel="nofollow noopener">Acebox</a> |
         <a href="URL kalian" target="_blank" rel="nofollow noopener">Drive</a> |
         <a href="URL kalian" target="_blank" rel="nofollow noopener">iBoxs</a> |
         <a href="URL kalian" target="_blank" rel="nofollow noopener">Mirror</a>
      </li>
      <li style="text-align: center;">
         <strong>4k</strong>
         <a href="URL kalian" target="_blank" rel="nofollow noopener">Acebox</a> |
         <a href="URL kalian" target="_blank" rel="nofollow noopener">Drive</a> |
         <a href="URL kalian" target="_blank" rel="nofollow noopener">iBoxs</a> |
         <a href="URL kalian" target="_blank" rel="nofollow noopener">Mirror</a>
      </li>
   </ul>
</div>


Catatan :
Untuk tulisan URL kalian adalah URL download yang akan ditempel semisal dari Googledrive atau semacamnya. Langsung saja copy dan taruh di URL kalian tadi yang sudah disebutkan.


Sekian ya teman-teman tutorialnya. Meski singkat, tapi bermanfaat dan dapat membantu orang lain yang akan mendownload film drakor yang telah kalian simpan file nya di file hosting kesayangan kalian. Tapi ingat, membajak adalah cara curang mendapatkan cuan yang dilegalkan. Tetap hati-hati, apalagi yang punya adsense, karena Google tidak main-main kalau soal klaim hak cipta. Siapkan mental dan kreasimu. Ketemu besok lagi di artikel yang lain yang tentunya bermanfaat. Terima kasih. Salam Blogger.



Bagikan ke teman-teman kamu

11 December 2022

Cara Terbaru Menampilkan Widget Hantu Casper Melayang di Blog (Update)

Cara Terbaru Menampilkan Widget Hantu Casper Melayang di Blog (Update)

Cara Terbaru Menampilkan Widget Hantu Casper Melayang di Blog (Update)

HANTU Apakah kalian pernah melihat hantu? Ayo dimana? Apa di video Youtube, atau di film-film. Ya tentu saja hantu tidak berkutat pada media digital tersebut, tapi dimana tempat pun ada. Bahkan sekarang ada juga film yang mengambil kisah tentang hantu seperti "KKN di Desa Penari" dan juga "Sewu Dino" hemmm serem kali ya.

Seringnya hantu-hantu itu ada di pohon-pohon besar dan keramat. Dan juga di tempat atau rumah kosong tanpa penghuni serta kuburan. Disitulah para hantu bermunculan mengganggu manusia yang kebetulan melewatinya. Terkadang berupa Pocong atau Kuntilanak dan bisa juga Genderuwo, mereka yang sering menampakkan diri dan menakuti manusia.

Terus apa hubungannya hantu sama blog ya? sepertinya berhubungan deh. Karena kali ini kita akan menampilkan widget hantu melayang dari pojok kanan bawah menuju ke kiri atas halaman blog kita. Jadi hantu itu akan melayang dari bawah pojok kanan blog hingga naik ke kiri atas blog. Seolah-olah hantu itu melayang dan membikin seram tampilan blog kita hehe.



Hem keren ya. Iya dong. Dan sekarang saya akan berbagi dengan widget ini supaya kalian bisa menggunakannya di blog yang kalian punya. Mudah kok, tinggal copy, paste dan save blog. Jadi deh.

Penasaran dengan widget ini. Tidak ada salahnya kalian membaca sampai tuntas ya. Jangan setengah-setengah nanti tidak jadi lho widgetnya. Yups kita mulai saja tutorial berikut ini. Silakan sambil santai aja mempraktekkannya.

Cara Terbaru Menampilkan Hantu Casper di Blog (Update)

1. Kalian masuk ke Dashboard Blogger
2. Kemudian pilih Tema
3. Lalu klik Sesuaikan : Edit HTML
4. Tempelkan kode dibawah ini diatas kode ]]></b:skin>
5. Berikut ini kodenya.
body {
  background-color: #000;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -64.5px;
  margin-top: -85.5px;
}

.ghost {
  animation: float 3s ease-out infinite;
}

@keyframes float {
  50% {
     transform: translate(0, 20px);
  }
}
.shadowFrame {
  width: 130px;
  margin-top: 15px;
}
.shadow {
  animation: shrink 3s ease-out infinite;
  transform-origin: center center;
  ellipse {
    transform-origin: center center;
  }
}

@keyframes shrink {
  0% {
    width: 90%;
    margin: 0 5%;
  }
  50% {
    width: 60%;
    margin: 0 18%;
  }
  100% {
    width: 90%;
    margin: 0 5%;
  }
}


Selanjutnya kalian tinggal tempelin kode dibawah ini ke Tata Letak Blogger. Saya kira kalian sudah mahir dimana letak tersebut. Ini dia kodenya.
<div class="container">
<svg class="ghost" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="127.433px" height="132.743px" viewBox="0 0 127.433 132.743" enable-background="new 0 0 127.433 132.743"
	 xml:space="preserve">
<path fill="#FFF6F4" d="M116.223,125.064c1.032-1.183,1.323-2.73,1.391-3.747V54.76c0,0-4.625-34.875-36.125-44.375
	s-66,6.625-72.125,44l-0.781,63.219c0.062,4.197,1.105,6.177,1.808,7.006c1.94,1.811,5.408,3.465,10.099-0.6
	c7.5-6.5,8.375-10,12.75-6.875s5.875,9.75,13.625,9.25s12.75-9,13.75-9.625s4.375-1.875,7,1.25s5.375,8.25,12.875,7.875
	s12.625-8.375,12.625-8.375s2.25-3.875,7.25,0.375s7.625,9.75,14.375,8.125C114.739,126.01,115.412,125.902,116.223,125.064z"/>
<circle fill="#013E51" cx="86.238" cy="57.885" r="6.667"/>
<circle fill="#013E51" cx="40.072" cy="57.885" r="6.667"/>
<path fill="#013E51" d="M71.916,62.782c0.05-1.108-0.809-2.046-1.917-2.095c-0.673-0.03-1.28,0.279-1.667,0.771
	c-0.758,0.766-2.483,2.235-4.696,2.358c-1.696,0.094-3.438-0.625-5.191-2.137c-0.003-0.003-0.007-0.006-0.011-0.009l0.002,0.005
	c-0.332-0.294-0.757-0.488-1.235-0.509c-1.108-0.049-2.046,0.809-2.095,1.917c-0.032,0.724,0.327,1.37,0.887,1.749
	c-0.001,0-0.002-0.001-0.003-0.001c2.221,1.871,4.536,2.88,6.912,2.986c0.333,0.014,0.67,0.012,1.007-0.01
	c3.163-0.191,5.572-1.942,6.888-3.166l0.452-0.453c0.021-0.019,0.04-0.041,0.06-0.061l0.034-0.034
	c-0.007,0.007-0.015,0.014-0.021,0.02C71.666,63.771,71.892,63.307,71.916,62.782z"/>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="18.614" cy="99.426" r="3.292"/>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="95.364" cy="28.676" r="3.291"/>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="24.739" cy="93.551" r="2.667"/>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="101.489" cy="33.051" r="2.666"/>
<circle fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" cx="18.738" cy="87.717" r="2.833"/>
<path fill="#FCEFED" stroke="#FEEBE6" stroke-miterlimit="10" d="M116.279,55.814c-0.021-0.286-2.323-28.744-30.221-41.012
	c-7.806-3.433-15.777-5.173-23.691-5.173c-16.889,0-30.283,7.783-37.187,15.067c-9.229,9.736-13.84,26.712-14.191,30.259
	l-0.748,62.332c0.149,2.133,1.389,6.167,5.019,6.167c1.891,0,4.074-1.083,6.672-3.311c4.96-4.251,7.424-6.295,9.226-6.295
	c1.339,0,2.712,1.213,5.102,3.762c4.121,4.396,7.461,6.355,10.833,6.355c2.713,0,5.311-1.296,7.942-3.962
	c3.104-3.145,5.701-5.239,8.285-5.239c2.116,0,4.441,1.421,7.317,4.473c2.638,2.8,5.674,4.219,9.022,4.219
	c4.835,0,8.991-2.959,11.27-5.728l0.086-0.104c1.809-2.2,3.237-3.938,5.312-3.938c2.208,0,5.271,1.942,9.359,5.936
	c0.54,0.743,3.552,4.674,6.86,4.674c1.37,0,2.559-0.65,3.531-1.932l0.203-0.268L116.279,55.814z M114.281,121.405
	c-0.526,0.599-1.096,0.891-1.734,0.891c-2.053,0-4.51-2.82-5.283-3.907l-0.116-0.136c-4.638-4.541-7.975-6.566-10.82-6.566
	c-3.021,0-4.884,2.267-6.857,4.667l-0.086,0.104c-1.896,2.307-5.582,4.999-9.725,4.999c-2.775,0-5.322-1.208-7.567-3.59
	c-3.325-3.528-6.03-5.102-8.772-5.102c-3.278,0-6.251,2.332-9.708,5.835c-2.236,2.265-4.368,3.366-6.518,3.366
	c-2.772,0-5.664-1.765-9.374-5.723c-2.488-2.654-4.29-4.395-6.561-4.395c-2.515,0-5.045,2.077-10.527,6.777
	c-2.727,2.337-4.426,2.828-5.37,2.828c-2.662,0-3.017-4.225-3.021-4.225l0.745-62.163c0.332-3.321,4.767-19.625,13.647-28.995
	c3.893-4.106,10.387-8.632,18.602-11.504c-0.458,0.503-0.744,1.165-0.744,1.898c0,1.565,1.269,2.833,2.833,2.833
	c1.564,0,2.833-1.269,2.833-2.833c0-1.355-0.954-2.485-2.226-2.764c4.419-1.285,9.269-2.074,14.437-2.074
	c7.636,0,15.336,1.684,22.887,5.004c26.766,11.771,29.011,39.047,29.027,39.251V121.405z"/>
</svg>
  <p class="shadowFrame"><svg version="1.1" class="shadow" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="61px" y="20px"
	 width="122.436px" height="39.744px" viewBox="0 0 122.436 39.744" enable-background="new 0 0 122.436 39.744"
	 xml:space="preserve">
<ellipse fill="#EF3D23" cx="61.128" cy="19.872" rx="49.25" ry="8.916"/>
    </svg></p>
</div>


Nah jikalau sudah tinggal save saja dan lihat tampilan blog kalian pastinya sudah jadi. Dibawah ini saya tampilkan kondisi jadi dari Casper si Hantu lucu dan suka menolong ini hehe.



Menampilkan Widget Hantu Melayang di Blog

Cara Menampilkan Ikon Hantu Melayang di Blog

Caranya : Kalian copas kode dibawah ini di Tata Letak, terus pilih Tambah HTML/Javascript. Dan terakhir save dan publish blog kamu. Jadi dah. Oh iya ini dia kodenya.

<a href="https://alifacode.com" target="_blank"><img id="hantu" style="width:70px;z-index:9;position:fixed;right:-75px;top:5px;filter:alpha(opacity=60);-moz-opacity:0.7;-webkit-opacity: 0.7;opacity: 0.7;" border="0" src="https://blogger.googleusercontent.com/img/a/AVvXsEiZwSD6R81TCQWdaYuY04RJI6au_50wEd0YOZWexm7gOiBTW7ed9PoibiNiMrX5Ha5dLX6KFcyvRbl1w50EwpV5gGJCj0aM6fRTwbbHjdJ3sPVqM07eYzWI6pqWPWs5ewFuqMG4uvnTKcRg3eswwDktsKCfnDwxCxRbemfupj-NM3zet55UjmdIG4cf"/></a>
<script language="JavaScript">
var hantu_right = -75;
var hantu_top = 500;
var hantu_dir = 1;
var tNoHantu;
function startHantu() {
	clearTimeout(tNoHantu);	
	setInterval("moveHantu()",300);
}
function moveHantu() {
	hantu_right = hantu_right + 2;
	if(hantu_right>document.width+60) hantu_right = -40;	
	if(hantu_dir==1) hantu_top = hantu_top + 1; else hantu_top = hantu_top - 1;
	if(hantu_top>10) hantu_dir = 0;
	if(hantu_top<3) hantu_dir = 1;	
	document.getElementById('hantu').style.right = hantu_right + "px";
	document.getElementById('hantu').style.top = hantu_top + "px";
}
tNoHantu = setInterval("startHantu()",1200);
</script>


Nah jadi khan widgetnya dan muncul. Silakan kalian praktekkan. Tapi jangan takut lho ya kalau nanti ada hantu yang muncul hehe. Ya enggak takut dong ya karena kalian semua adalah pemberani. Terima kasih sekali lagi yang sudah bersedia mampir disini, membaca artikel yang sudah kami tulis disini berjudul Menampilkan Widget Hantu Melayang

Bagikan ke teman-teman kamu

09 December 2022

Tutorial Membuat Efek Daun Berjatuhan di Halaman Blog (Update)

Tutorial Membuat Efek Daun Berjatuhan di Halaman Blog (Update)

Tutorial Cara Membuat Daun Berjatuhan di Halaman Muka Blog

DAUN berjatuhan di halaman muka blog. Trik yang mungkin sudah mulai usang kali ya. Karena trik ini banyak digunakan oleh para blogger jaman dulu ketika blog masih hijau. Sekarang trik ini sepertinya jarang dipakai, meski terlihat beberapa saja blogger yang menggunakannya. Tapi tidak papalah karena saya akan berbagi tutorial cara membuatnya.

Di malam ini saya akan berbagi cara membuat daun berjatuhan di blog, dan sebelumnya saya sudah membuatnya pada tutorial yang ada dibawah ini. Tapi karena saya utak-atik lagi, jadinya saya kemukakan lagi cara membuatnya. Agak berbeda dari yang sudah ada. Dan nanti kalian tinggal mempraktekkannya saja. Daun-daun ini akan berjatuhan dengan irama yang teratur, menurut saya seperti itu. Pokoknya kalian praktekkan saja ya, saya tidak perlu menjelaskan panjang lebar.



Okelah kalau begitu kita mulai saja.

Tutorial Membuat Efek Daun Berjatuhan di Halaman Blog (Update)

1. Kalian masuk ke Dashboard Blogger
2. Kemudian klik Tema
3. Setelah masuk ke template, cari kode ]]></b:skin> dan tempelkan kode dibawah ini tepat diatas dari kode ]]></b:skin> tersebut.
body {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOqAYx_EWybWkdj5XFGuSUbOW6Wx8tPBxb7Rd5uADV89kMCDNaZr2jvYCIoSJ-QzRTAboIkolpBH0mQQFZUUxMIBXWBdLlmTelx0tFbk9FWX1knkqiy-1F_eo1XI-ZTzYcXN3hpdTr8oL2jh9X8IaLw8VfZzpGdx0t916zdKbX4KKJ7IbvqdEYZ_rg/s1600/Daun%20Berjatuhan.jpg) no-repeat fixed;
    background-size: 100% 100%;
}

::-webkit-scrollbar
{
    width: 0.5vw;  /* for vertical scrollbars */
    height: 0.5vw; /* for horizontal scrollbars */
}

::-webkit-scrollbar-track
{
    background: rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-thumb
{
    background: rgba(0, 0, 0, 0.5);
}

.container {
    width: 100%;
    height: 100%;
}

.leaf0, .leaf1{
    position: fixed;
    background: url("https://image.ibb.co/h57i1d/Black_Leaf0.png") no-repeat;
    background-size: contain;
    z-index: -500;
    display: none;
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
}

.leaf1 {
    position: fixed;
    background: url("https://image.ibb.co/fA8Z7J/Black_Leaf1.png") no-repeat;
    background-size: contain;
    z-index: -500;
    display: none;
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
}

.snowflake0 {
    background: url("https://image.ibb.co/iG6yZy/Snowflake0.png") no-repeat;
    position: fixed;
    width: 10px;
    height: 10px;
    background-size: contain;
    z-index: -500;
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
}

.tree {
    visibility: hidden;
    position: fixed;
    top: 15vh;
    left: 2vw;
    height: 25vh;
    width: 22vw;
    background: red;
}

.sky {
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    height: 10vh;
    width: 100vw;
    background: skyblue;
}


4. Setelah itu temukan lagi kode </body> dan tempelkan kode dibawah ini tepat di atas kode </body> tadi itu.
<script type='text/javascript'> 
//<![CDATA[
window.addEventListener('load',
    function () {
                let numLeaves = 60;
                let numSnow = 50;
                let curLeaves = 0;
                let curSnow = 0;

                let didScroll = false;

                function scrolled() {
                    didScroll = true;
                    window.removeEventListener("scroll", scrolled);
                }

                window.addEventListener("scroll", scrolled);

                let wait = 800;

                setInterval(function() {
                    if(didScroll) {
                        didScroll = false;
                        let cur = (document.documentElement.scrollTop || document.body.scrollTop);
                        let loc = cur / ((document.documentElement.scrollHeight || document.body.scrollHeight) - window.innerHeight) * 100;
                        if (loc < 25) {
                            numLeaves = 60;
                            numSnow = 0;
                            wait = 800;
                        } else if (loc < 50) {
                            numLeaves = 100;
                            numSnow = 20;
                            wait = 500;
                        } else if (loc < 75) {
                            numLeaves = 20;
                            numSnow = 110;
                            wait = 300;
                        } else {
                            numLeaves = 35;
                            numSnow = 25;
                            wait = 1000;
                        }
                        window.addEventListener("scroll", scrolled);
                    }
                }, 750);

                /*
                                PROCEDURE TO CONTROL BACKGROUND ANIMATIONS
                                 */

                let height = document.documentElement.clientHeight;

                let width = Math.max(
                    document.documentElement.clientWidth,
                    document.body.scrollWidth,
                    document.documentElement.scrollWidth,
                    document.body.offsetWidth,
                    document.documentElement.offsetWidth
                );

                window.addEventListener("resize", function () {
                    height = document.documentElement.clientHeight;


                    width = Math.max(
                        document.documentElement.clientWidth,
                        document.body.scrollWidth,
                        document.documentElement.scrollWidth,
                        document.body.offsetWidth,
                        document.documentElement.offsetWidth
                    );
                });

                let dir = [];
                let speed = [];
                let grav = [];
                let wind = [];
                let rot = [];
                let delta = [];

                function createChild(parent, childName) {
                    let bound = parent.getBoundingClientRect();
                    let startX = ((Math.random() * (bound.right - bound.left)) + bound.left) + "px";
                    let startY = ((Math.random() * (bound.bottom - bound.top)) + bound.top) + "px";

                    let newChild = document.createElement("div");

                    newChild.style.top = startY;
                    newChild.style.left = startX;
                    newChild.style.transform = randomRotate();
                    let z = newChild.style.transform.split(" ")[2].replace("rotateZ(", "").replace("deg)", "");
                    grav.push(Math.random() / 6 + 0.3);
                    speed.push(Math.random() / 6 + 1);
                    if (childName === "leaf") {
                        wind.push(Math.random() / 4 + 0.5);
                        newChild.className = childName + Math.floor(Math.random() * 2);
                        let random = Math.random() * 15;
                        newChild.style.width = (60 - random) + "px";
                        newChild.style.height = (60 - random) + "px";
                    } else {
                        wind.push(0.2);
                        newChild.className = childName + Math.floor(Math.random());
                        let random = Math.random() * 5;
                        newChild.style.width = (10 - random) + "px";
                        newChild.style.height = (10 - random) + "px";
                    }
                    rot.push(Math.random() / 4 + 0.4);
                    delta.push(Math.random() * 40 - 20);
                    if (z < 90) {
                        dir.push(-1);
                    } else {
                        dir.push(1);
                    }

                    document.getElementsByClassName("container")[0].appendChild(newChild);
                    $(newChild).fadeIn("slow");
                }

                function randomRotate() {
                    let x = Math.random() * 10;
                    let y = Math.random() * 30 - 15;
                    let z = Math.random() * 180;
                    return "rotateX(" + x + "deg) rotateY(" + y + "deg) rotateZ(" + z + "deg)";
                }

                //Animates the children of a given parent to fall
                function animate(parent) {

                    if (curLeaves < numLeaves) {
                        let bound = (numLeaves - curLeaves);
                        for (let i = 0; i < bound; i++) {
                            setTimeout(function () {
                                createChild(document.getElementsByClassName("tree")[0], "leaf");
                            }, (wait * i));
                            curLeaves++;
                        }
                    }

                    if (curSnow < numSnow) {
                        let bound = (numSnow - curSnow);
                        for (let i = 0; i < bound; i++) {
                            setTimeout(function () {
                                createChild(document.getElementsByClassName("sky")[0], "snowflake");
                            }, ((wait + 100) * i));
                            curSnow++;
                        }
                    }

                    for (let i = 0; i < parent.children.length; i++) {
                        let child = parent.children[i];
                        let z = child.style.transform.split(" ")[2].replace("rotateZ(", "").replace("deg)", "");
                        let dx = speed[i];
                        let dy = Math.random() * 2 * Math.abs(Math.cos(z * Math.PI / 180));
                        if (child.className.indexOf("leaf") >= 0) {
                            child.style.top = (child.style.top.replace("px", "") - (0.2 * Math.sin(z / 180 * Math.PI)) + grav[i] + "px");
                        } else {
                            child.style.top = (child.style.top.replace("px", "") - 0 + grav[i] + "px");
                        }
                        child.style.left = (child.style.left.replace("px", "") - 0 - (0.1 * Math.sin(z / 180 * Math.PI)) + (dir[i] * speed[i] * 1.5) + wind[i]) + "px";

                        if ((child.style.top.replace("px", "") - 0 + dy) > height || (child.style.left.replace("px", "") - 0 + dx) > width || (child.style.left.replace("px", "") - 0 + dx) < -100) {
                            parent.removeChild(child);
                            dir.splice(i, 1);
                            speed.splice(i, 1);
                            wind.splice(i, 1);
                            grav.splice(i, 1);
                            rot.splice(i, 1);
                            delta.splice(i, 1);
                            if (child.className.indexOf("leaf") >= 0) {
                                curLeaves--;
                            } else {
                                curSnow--;
                            }
                            i--;
                        } else {
                            if (z >= 92 && dir[i] === -1) {
                                if (speed[i] > 0) {
                                    speed[i] -= speed[i] / 50;
                                }
                            } else if (z >= 100 && dir[i] === 1) {
                                if (speed[i] < 1.1) {
                                    speed[i] += 0.02;
                                }
                            } else if (z <= 80 && dir[i] === -1) {
                                if (speed[i] < 1.1) {
                                    speed[i] += 0.03;
                                }
                            } else if (z <= 88 && dir[i] === 1) {
                                if (speed[i] > 0) {
                                    speed[i] -= speed[i] / 50;
                                }
                            }

                            if (z <= 92 && z >= 88) {
                                speed[i] = 1 + (Math.random() / 4);
                            }

                            if ((z <= 140 && dir[i] === -1 && speed[i] > 0.22) || (z >= 20 && dir[i] === 1 && speed[i] > 0.22)) {
                                z = z - (dir[i] * rot[i]);
                            }

                            if (z >= 110 && speed[i] <= 0.2 && dir[i] === -1) {
                                dir[i] = 1;
                            } else if (z < 70 && speed[i] <= 0.2 && dir[i] === 1) {
                                dir[i] = -1;
                            }

                            let x = child.style.transform.split(" ")[0].replace("rotateX(", "").replace("deg)", "");
                            if (x > 0 + delta[i] && dir[i] === -1) {
                                x = x - Math.random() / 2;
                            } else if (x < 40 + delta[i] && dir[i] === 1) {
                                x = x - 0 + Math.random() / 2;
                            }

                            let y = child.style.transform.split(" ")[1].replace("rotateY(", "").replace("deg)", "");
                            if (y > 0 + delta[i] && dir[i] === -1) {
                                y = y - Math.random() / 2;
                            } else if (y < 40 + delta[i] && dir[i] === 1) {
                                y = y - 0 + Math.random() / 2;
                            }

                            child.style.transform = "rotateX(" + x + "deg) rotateY(" + y + "deg) rotateZ(" + z + "deg)";
                        }
                    }
                }

                setInterval(function () {
                    animate(document.getElementsByClassName("container")[0]);
                }, 10);

                /*
                END OF PROCEDURE
                 */
                

    }, false);
//]]> 
</script> 


Kemudian terakhir tempelkan kode ini di Tata Letak, Tambah HTML Javascript dan taruh di situ.
<div class="container"></div>
<div class="tree"></div>
<div class="sky"></div>


Catatan :
Harap Back Up template blog kalian bila ingin utak-atik template ya. Supaya nanti ketika ada kerusakan template karena error, bisa dikembalikan seperti semula.


Saya sertakan demo dibawah ini ya



Nah sudah khan dan sekarang tinggal nikmati hasilnya. Sudah cukup dulu ya tutorialnya. Oh iya. Untuk menampilkan efek itu, kalian mesti menempelkan kode ini juga di atas kode </head>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js' type='text/javascript'/>


--------

Efek Daun Berguguran dengan Javascript

LAMA tutorial ini saya sampaikan dan sudah saya persembahkan trik ini lagi yaitu tentang Membuat Efek Daun Berguguran di Halaman Blog : Update. Efek ini memunculkan untaian dedaunan yang sedang berguguran dan beda dari yang saya buat tutorial sebelumnya.

Memang sudah banyak yang menggunakan trik ini sebagai penghias blog mereka. Selain menambah keindahan tentu saja dengan script ini bisa juga untuk menandakan musim apa sekarang. Hem apa bisa?

Kite memasangnya bisa menyesuaikan kondisi cuaca di luar sana. Contoh, bila di daratan Eropa sedang memulai musim dingin salju, maka pasanglah trik Efek Salju Berjatuhan di Halaman Blog. Dan ketika musim gugur maka pasanglah trik ini. Sesuai dengan keadaan dimana musim gugur tiba, dedaunan banyak yang bejatuhan.

Sungguh menarik bukan. Karena dengan memasang efek ini saja blog kalian pasti akan menjadi unik. Dan tenang saja karena script ini ringan dan tidak memberatkan blog kalian.

Dengan file yang telah dihost dari cdn.jsdelivr, kemungkinan kecil loading akan lambat. Malah sebaliknya, script apapun tidak berpengaruh secara signifikan, karena cdn jsdelivr sudah mengcompress file script menjadi kecil dan ringan.

Bila kalian mau memasang trik ini di blog kalian, tidak ada salahnya mencoba mengutak-atik template kalian dan menempelkan kode yang akan kami berikan dibawah ini. Tapi jangan lupa "back up dulu template kalian. Karena bila terjadi kesalahan, template kalian bisa dikembalikan seperti semula."

Okelah sekarang kita mulai saja ya.

Efek Daun Berguguran dengan Javascript


Caranya adalah dengan : Masuk ke Dashboard Blogger, terus klik Tema, kemudian pilih Sesuaikan : Edit HTML, dan cari kode </body>. Kemudian tempelkan kode dibawah diatas kode </body> yang sudah disebutkan tadi.

<script src='https://cdn.jsdelivr.net/gh/Alifacode/backupmaster@main/alifacode-update-daun-berguguran.js' type='text/javascript'/>


Atau dengan masuk ke Tata Letak kemudian pilih Tambah HTML/Javascript dan tempelkan kode diatas di konten kosong yang tersedia. Terakhir save dan publikasikan. Pasti sudah jadi.

Untuk contohnya bisa dilihat :



Nah sudah jadi khan. Lebih bagus lagi bila trik ini jangan dicampur dengan trik lain yang sudah saya buat sebelumnya yaitu Trik Efek Salju Berjatuhan di Blog. Karena nanti akan terasa penuh dan malah kurang enak dipandang mata. Jadi cukup satu saja memasang scriptnya.


Sekian artikel dari kami yang berjudul Efek Daun Berguguran dengan Javascript yang dapat kami berikan. Selamat berkarya dan tetap semangat utak atik blognya. Supaya blog kalian semakin bagus dan unik. Sekian dan terima kasih. Wassalam.

Bagikan ke teman-teman kamu

08 December 2022

Membuat Bendera Merah Putih Berkibar di Angkasa dengan CSS3

Membuat Bendera Merah Putih Berkibar di Angkasa dengan CSS3

Membuat Bendera Merah Putih Berkibar di Angkasa dengan CSS3

BENDERA Merah Putih adalah bendera Nasional Kebangsaan Kita. Sebagai warga negara Indonesia yang baik, semestinya kita mewarisi gen keturunan dari para Pahlawan kita untuk menjunjung tinggi nilai kebangsaan. Dan kali ini saya sebagai Blogger akan memberikan cara membuat Bendera Merah Putih Berkibar di Angkasa dengan CSS3. Dalam penerapannya, kita hanya membutuhkan property HTML dan CSS3 saja tanpa ada embel-embel tambahan seperti Javascript misalnya.

Bendera Merah Putih membentuk obyek berupa kotak dan bergradient warna. Pada property ini, bisa ditambahkan radius atau sudut lengkung maupun tidak ditambahkan juga tidak papa sehingga hasil akhirnya nanti si obyek akan memiliki sudut lancip saja. Efek bendera merah putih yang akan saya berikan tutorialnya ini memang tidak jauh dari CSS3. Seperti biasa CSS memang menjadi obyek utama dari sekian banyak artikel-artikel di website ini. Jadi stay tune ya.



Dalam tutorial kita kali ini, saya akan membahas tentang pemberian efek bergradient warna warni pada bendera merah putih. Nantinya obyek itu akan berbentuk lancip pada keempat sudutnya dan berwarna merah serta putih. Sehingga akan menambah kesan yang estetik dari sebuah desain dengan bahasa pemrograman CSS3. Memang lumayan bagus untuk ukuran sebuah gradient warna. Karena warna solid sudah mainstream digunakan oleh beberapa blogger. Sehingga kali ini akan kita buat sebuah obyek dengan gradasi warna dan akan membentuk bendera bangsa kita Indonesia.


Yuk mulai saja tutorialnya :

Membuat Bendera Merah Putih Berkibar di Angkasa dengan CSS3

1. Masuk ke Tema
2. Terus pilih Sesuaikan : Edit HTML pada tahap ini kita akan menuju ke template
3. Kemudian cari kode ]]></b:skin> dan tempelkan kode dibawah ini diatas kode ]]></b:skin> tersebut
.page {
  padding: 40px;
   
}
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: Helvetica, Arial, sans-serif;
}

#splash {
  background: #cc1f2f;
  background-repeat: repeat-y;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  animation: splash 3s ease-in;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

#loader {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%,0);
}

#loader:after {
  content: '';
  position: absolute;
  left: 50%;
  margin-left: -8px;
  bottom: -170px;
  width: 3px;
  background: #fff;
  background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);
  height: 200px;
}

#loader:before {
  content: '';
  position: absolute;
  left: 50%;
  margin-left: 8px;
  bottom: -190px;
  width: 3px;
  background: #000;
  background: linear-gradient(to bottom, rgba(0,0,0,.2) 0%, rgba(0,0,0,.2) 50%, rgba(0,0,0,0) 100%);
  height: 200px;
}

#splash .anim {
  height: 100%;
  position: absolute;
  left: 50%;
  width: 100px;
  transform: translate(-50%,100%);
  animation: loader 4s linear;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

@keyframes loader {
  0% {
    transform: translate(-50%,110%);
  }
  30% {
    transform: translate(-50%,50%);
  }
  100% {
    transform: translate(-50%,0%);
  }
}

@keyframes splash {
  0% {
    transform: translate(0%,0%);
  }
  50% {
    transform: translate(0%,0%);
  }
  100% {
    transform: translate(0%,-100%);
  }
}


Catatan :
Untuk menempelkan diatas kode skin template jangan sampai salah taruh ya, dan usahakan Back Up Template dulu seperti biasa.


4. Kemudian menuju ke postingan.
5. Taruh kode dibawah ini di Postingan baru : Catatan -- Pilih HTML bukan Compose ya.
<div class="page">
  <header>
    <h1>Selamat Datang</h1>
    <p>Bendera Sang Saka Merah Putih berkibar di angkasa raya Indonesia.</p>
  </header>
</div>
<div id="splash">
  <div class="anim">
    <div id="loader">
      <svg version="1.1" width="60px" height="70px" viewBox="0 0 60 70">
        <defs>
          <filter id="f1" x="0" y="0">
            <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
          </filter>
        </defs>
        <g id="airplane">
          <path fill="#000" d="M0.677,20.977l4.355,1.631c0.281,0.104,0.579,0.162,0.88,0.16l9.76-0.004L30.46,41.58c0.27,0.34,0.679,0.545,1.112,0.541
          h1.87c0.992,0,1.676-0.992,1.322-1.918l-6.643-17.439l6.914,0.002l6.038,6.037c0.265,0.266,0.624,0.412,0.999,0.418l1.013-0.004
          c1.004-0.002,1.684-1.012,1.312-1.938l-2.911-7.277l2.912-7.278c0.372-0.928-0.313-1.941-1.313-1.938h1.017
          c-0.375,0-0.732,0.15-0.996,0.414l-6.039,6.039h-6.915l6.646-17.443c0.354-0.926-0.33-1.916-1.321-1.914l-1.87-0.004
          c-0.439,0.004-0.843,0.203-1.112,0.543L15.677,17.24l-9.765-0.002c-0.3,0.002-0.597,0.055-0.879,0.16L0.678,19.03
          C-0.225,19.36-0.228,20.637,0.677,20.977z" transform="translate(44,0) rotate(90 0 0)" />
        </g>
        <g id="shadow" transform="scale(.9)">
          <path fill="#000" fill-opacity="0.3" d="M0.677,20.977l4.355,1.631c0.281,0.104,0.579,0.162,0.88,0.16l9.76-0.004L30.46,41.58c0.27,0.34,0.679,0.545,1.112,0.541
      		h1.87c0.992,0,1.676-0.992,1.322-1.918l-6.643-17.439l6.914,0.002l6.038,6.037c0.265,0.266,0.624,0.412,0.999,0.418l1.013-0.004
      		c1.004-0.002,1.684-1.012,1.312-1.938l-2.911-7.277l2.912-7.278c0.372-0.928-0.313-1.941-1.313-1.938h1.017
      		c-0.375,0-0.732,0.15-0.996,0.414l-6.039,6.039h-6.915l6.646-17.443c0.354-0.926-0.33-1.916-1.321-1.914l-1.87-0.004
      		c-0.439,0.004-0.843,0.203-1.112,0.543L15.677,17.24l-9.765-0.002c-0.3,0.002-0.597,0.055-0.879,0.16L0.678,19.03
      		C-0.225,19.36-0.228,20.637,0.677,20.977z" transform="translate(64,30) rotate(90 0 0)" filter="url(#f1)" />
        </g>
      </svg>
    </div>
  </div>
</div>


Nah sekarang saatnya save pekerjaanmu. Untuk demonya bisa dilihat dibawah ini ya



Oke sampai penghujung acara. Semoga jadi ya nanti ketika kalian mempraktekkannya. Sudah larut malam nih. Saatnya istirahat dan besok lanjut kerja lagi. Mata sudah 5 watt. Tangan juga sudah pegal mengetik jadi maaf ya teman-teman bila ada salah kata salah tulis dalam artikel kali ini. Silakan kirim komentar bila ada yang perlu ditanyakan. Terima kasih banyak yang sudah mampir. "Di dunia ini tidak ada yang sempurna, tapi setidaknya perbaikilah dirimu supaya menjadi istimewa." Salam Blogger.

Bagikan ke teman-teman kamu

01 December 2022

Tutorial Memasang Ikon Follow Blog Melayang Floating Follow

Tutorial Memasang Ikon Follow Blog Melayang Floating Follow

Tutorial Memasang Ikon Follow Blog Melayang Floating Follow

FOLLOW Blog atau mengikuti sebuah blog sudah menjadi agenda umum dari seorang blogger terutama yang masih merintis dalam pembuatan blog. Karena dengan menjadi pengikut sebuah blog, maka ia akan mendapatkan update terbaru dari blog yang diikutinya. Sehingga ketika ada artikel terbaru maka follower akan mendapatkan kabar yang terkirim lewat dashboard blog miliknya. Tidak perlu repot-repot lagi untuk melihat artikel lewat display blog.

Penempatan follow blog ikon bisa saja ditampilkan di sidebar, footer, ataupun bagian mana saja dari blog menurut si empunya blog dirasa bagus. Tidak ada dahlil resmi mau ditempelkan dimana, asal masih bisa dilihat dan diklik saja saya rasa cukup untuk sebuah ikon follow blog. Tapi bagaimana ya bila ikon ini melayang di sisi blog atau bahkan mungkin di sudut kiri bawah atau sudut kiri atas dari tampilan homepage blog. Malam ini saya akan memberikan tutorialnya.

Salah satu teman saya di forum Blogger - Ulil - menanyakan hal tersebut. Bagaimana menampilkan ikon follow blog melayang di blog. Maaf ya baru bisa saya berikan tutorialnya, beberapa minggu terakhir di bulan November ini saya dihadapkan pada akreditasi RS. Jadi saya masih kesulitan membagi waktu, jadi baru bisa memberikan tutorialnya malam ini setelah Akreditasi selesai. Okelah tidak perlu basa-basi ya. Langsung saja saya kasih tutorialnya.



Okey, lanjut lagi ya. Now, kita menginjak ke bahasan selanjutnya.

Tutorial Memasang Ikon Follow Blog Melayang Floating Follow

1. Masuk ke Dashboard Blogger
2. Pilih Tema
3. Klik Sesuaikan : Edit HTML
4. Temukan kode ini dalam template. ]]></b:skin>. Setelah ketemu tempelkan kode dibawah ini persis diatas kode ]]></b:skin> tadi.
#follow_blogger {position:fixed; _position:absolute; bottom:230px; left:0px; clip:inherit; _top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft+document.documentElement.clientWidth - offsetWidth);}


5. Setelah itu baru kita tempel kode di atas </body>. Ini dia kodenya.
<div id='follow_blogger'><a href='URL blog kalian disini' target='_blank' title='Follow Us'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaO_Kem6x16GH31fljA515b54dKSet4JARs9OFuFWDTqUInC0ImkL5YGvLJnpr7_q0Pt-K9bNT0TSfCvP0ahfdycQ8axwUmryt3DxFFZEEVtLC7ivRLrLvibuCqFN9wtGWKYNYQu0saJqq6QRT2KMUsQExja1FmaGFJbpzIqv3DH4Hrt_vPSzlzJ-j/s1600/icon-follow-blog.png'/></a></div>


Catatan :
Untuk tulisan URL blog kalian disini --> diisi dengan alamat URL blog kalian misal abc.blogspot.com atau abc.com .. gitu ya teman-teman.


Nah sudah khan. Kalau sudah terpasang nanti akan ada ikon follow blog terpasang di sebelah kiri blog ya. Melayang ditengah-tengah layar desktop komputer kalian. Bisa diklik oleh blogger lain untuk mengikuti blog kalian untuk mendapatkan update artikel terbaru. Sekian tutorialnya terima kasih dan Salam Blogger.

Bagikan ke teman-teman kamu

27 November 2022

Membuat Ikon Animasi Tim Marvel Avengers dengan CSS3

Membuat Ikon Animasi Tim Marvel Avengers dengan CSS3

Membuat Ikon Animasi Tim Marvel Avengers dengan CSS3

AVENGERS adalah sebuah tim tangguh dari para hero yang ada di bumi. Dalam besutan animasi 3D maupun realistic, keberadaan film ini membuat para penggemar memberikan applaus berlebih. Dan sekarang telah beredar sebuah game petarung aksi-petualangan 2020 yang dikembangkan oleh Crystal Dynamics dan diterbitkan oleh Square Enix yaitu game Marvel Avengers. Berdasarkan tim superhero Marvel Comics the Avengers, game ini terutama terinspirasi oleh literasi grup Marvel Cinematic Universe. Sungguh aduhai pembuatan game yang sangat fantastis ini.

Lihat saja kelihaian para hero yang ada di dalamnya mulai dari Spiderman dengan keandalan jaring laba-labanya, Thor dengan palu petirnya hingga Iron Man sang robot canggih serta Captain America dan masih banyak lagi. Dalam tutorial kali ini, saya akan memberikan cara membuat icon Avengers dengan CSS3. Hem keren deh nantinya. Karena meski berbentuk kartun, tetap saja ikon Marvel Avengers terlihat sempurna dan unik. Untuk arsip saya juga karena saya juga penyuka film dan juga game serta franchise Avengers. Bahkan sangat antusias sekali.

25 November 2022

Membuat Display Blog Mencekam Jumat Kliwon dengan CSS3

Membuat Display Blog Mencekam Jumat Kliwon dengan CSS3

Membuat Display Blog Mencekam Jumat Kliwon dengan CSS3

JUMAT kliwon dalam pasaran hari tanggalan jawa adalah malam yang keramat. Tapi disisi lainnya, malam jumat adalah malam istimewa bagi sepasang suami istri untuk memadu kasih dan membuat hubungan hangat pada malam itu, berhubungan intim pada malam jumat kliwon selain mendapatkan kenikmatan juga mendapat berkah katanya sih. Teristimewa dari hari-hari lainnya, karena dalam agama, hari jumat adalah hari yang baik. Ada khan yang disebut bahwa hari jumat adalah hari yang keramat dan suci.

Tapi sebelumnya saya ingin menyapa kalian semuanya. Hai apa kabar. Lama ya tidak ketemu. Maaf ya saya belumm bisa memberikan tutorial bagi kalian semuanya, karena memang satu bulan ke belakang saya sibuk dengan akreditasi di instansi Rumah Sakit tempat saya bekerja. Saya dan jajaran karyawan lainnya sedang melaksanakan ujian akreditasi untuk meningkatkan pelayanan rumah sakit supaya lebih terstandar. Karena dengan pelayanan yang standar maka rumah sakit akan menjadi tujuan utama warga Kota Magelang. Tinggal menunggu nilai yang diberikan oleh pihak Surveyor KARS. Semoga lebih baik ya.

07 November 2022

Tutorial Membuat Bintang Bertaburan di Blog dan Hover Image

Tutorial Membuat Bintang Bertaburan di Blog dan Hover Image

Membuat Bintang Bertaburan di Blog dan Hover Image

BINTANG bertaburan di blog dan hover image. Maksudnya adalah tampilan halaman blog itu dipenuhi dengan bintang yang gemerlap serta hover image yang terletak di tengah-tengah blog. Ketika image disorot mouse akan serta merta keluar sebuah tulisan yang menindih gambar yang telah dihover tersebut. Sekalian saya berikan tutorial jamak, atau dua sekaligus. Bintang bertaburan dan Hover image. Pantengin terus ya.

Biasanya gemerlap bintang ada di angkasa tuh. Nah untuk yang sekarang kita coba memberikan variasi pada blog dengan menampilkan bintang gemerlap juga. Asyik sih menurut saya. Karena tampilan blog kita akan semakin menarik dan meriah. Pada tutorial sebelumnya saya pernah menampilan Kelelawar Beterbangan di Blog di artikel Kelelawar Beterbangan ini. Sekarang giliran bintang gemerlap. Kalau salju juga sudah saya buat dalam artikel Salju Berjatuhan. Oke khan?



Sekarang saatnya kita buat tutorial selanjutnya.

Bintang Bertaburan dan Hover Image


1. Masuk ke Dashboard Blogger
2. Pilih Tata Letak
3. Klik Tambah HTML/Javascript
4. Tempelkan kode dibawah ini di konten kosong disitu
<figure class="snip0016">
<img height="200" width="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQnn-88OsXjDbnihAxpJz_EPm6UvyV0SfYtn6K8ypTcHNz2rSRpPq51b03akUsmQVwMNd_3IZD_buyXgsYqKNWh2GCGxyy7XQemczG932BKLH9x9OJA2J867JX-AbOM3mI1V3L8PUE2Ui1SY3R5JcVXMSxoqJcNgPd0bgS-NCPbJzQYWB5QNCnw3fT/s320/alifacode-membuat-bintang-bertaburan-di-blog-dan-hover-image.webp" alt="Alifacode.com Trik dan Tips Ngeblog"/>
<figcaption>
<h2>Alifacode.com <span>Tips</span> & Trik Ngeblog</h2>
<p>Dapatkan tutorial menarik di website ini</p>
<a href="#"></a>
</figcaption>			
</figure>


5. Masuk ke template. Temukan kode ]]></b:skin> dan tempelkan kode dibawah ini diatas kode ]]></b:skin> tadi.
@import url(https://fonts.googleapis.com/css?family=Raleway:400,200,300,800);
figure.snip0016 {
  font-family: 'Raleway', Arial, sans-serif;
  color: #fff;
  position: relative;
  overflow: hidden;
  margin: 10px;
  min-width: 220px;
  max-width: 310px;
  max-height: 220px;
  width: 100%;
  background: transparent;
  text-align: left;
}
figure.snip0016 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
figure.snip0016 img {
  max-width: 100%;
  opacity: 1;
  width: 100%;
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
}
figure.snip0016 figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 30px;
  width: 100%;
  height: 100%;
}
figure.snip0016 figcaption::before {
  position: absolute;
  top: 30px;
  right: 30px;
  bottom: 30px;
  left: 100%;
  border-left: 4px solid rgba(255, 255, 255, 0.8);
  content: '';
  opacity: 0;
  background-color: rgba(255, 255, 255, 0.5);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-transition-delay: 0.6s;
  transition-delay: 0.6s;
}
figure.snip0016 h2,
figure.snip0016 p {
  margin: 0 0 5px;
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s,-webkit-transform 0.35s,-moz-transform 0.35s,-o-transform 0.35s,transform 0.35s;
}
figure.snip0016 h2 {
  word-spacing: -0.15em;
  font-weight: 300;
  text-transform: uppercase;
  -webkit-transform: translate3d(30%, 0%, 0);
  transform: translate3d(30%, 0%, 0);
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
figure.snip0016 h2 span {
  font-weight: 800;
}
figure.snip0016 p {
  font-weight: 200;
  -webkit-transform: translate3d(0%, 30%, 0);
  transform: translate3d(0%, 30%, 0);
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
figure.snip0016 a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  color: #ffffff;
}
figure.snip0016:hover img {
  opacity: 0.3;
}
figure.snip0016:hover figcaption h2 {
  opacity: 1;
  -webkit-transform: translate3d(0%, 0%, 0);
  transform: translate3d(0%, 0%, 0);
  -webkit-transition-delay: 0.4s;
  transition-delay: 0.4s;
}
figure.snip0016:hover figcaption p {
  opacity: 0.9;
  -webkit-transform: translate3d(0%, 0%, 0);
  transform: translate3d(0%, 0%, 0);
  -webkit-transition-delay: 0.6s;
  transition-delay: 0.6s;
}
figure.snip0016:hover figcaption::before {
  background: rgba(255, 255, 255, 0);
  left: 30px;
  opacity: 1;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

html {
  height: 100%;
}
body {
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  height: 75%;
}

.star {
  --size: 20vmin;
  --holes: calc(var(--size)*.495);
  width: var(--size);
  aspect-ratio: 1/1;
  position: fixed;
  background: white;  
  --mask: radial-gradient(var(--holes) at var(--holes) var(--holes), #0000 99%,#000) calc(var(--holes)*-1) calc(var(--holes)*-1);
  -webkit-mask: var(--mask);
  mask: var(--mask);
  border-radius: 50%;
  animation: sparkle 1s linear forwards;
}
@keyframes sparkle {
  0% { transform: scale(0); }
  25% { opacity: 1; }
  100% { opacity: 0; }
}

html {
  background: #112;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: 100vh;
}


Terakhir tempelkan kode dibawah ini diatas kode </body>. Ini masih di template ya.
<script type='text/javascript'> 
//<![CDATA[
function addStar() {
  var s = document.createElement('div')
  s.className = 'star'
  s.style.setProperty('--size', Math.random()*10 + 3 + 'vmin')
  s.style.left = Math.floor(Math.random()*100) + '%'
  s.style.top = Math.floor(Math.random()*100) + '%'
  s.onanimationend = function() { this.remove() }
  document.body.appendChild(s)
}
setInterval(addStar,50)
//]]> 
</script>


Kalau semua sudah dilakukan tinggal save dan publikasikan. Jadi khan. Untuk contoh saya kasih dibawah ini.

Bagikan ke teman-teman kamu