Featured Post

Artikel Terbaru

Cara Praktis Membuat Sitelink di Search Engine Google

SITELINK pada pencarian Google sering sekali kita temui. Biasanya sitelink ini ada di situs-situs yang sudah punya nama / brand besar. Tap...

25 September 2022

Cara Praktis Membuat Sitelink di Search Engine Google

Cara Praktis Membuat Sitelink di Search Engine Google

Cara Praktis Membuat Sitelink di Search Engine Google

SITELINK pada pencarian Google sering sekali kita temui. Biasanya sitelink ini ada di situs-situs yang sudah punya nama / brand besar. Tapi apakah kalian tahu sitelink itu apa? apa mungkin malah tidak tahu sama sekali?

Cara Membuat Sitelink di Search Engine Google


Itu dia diatas adalah contoh Sitelink. Mungkin pernah khan kalian waktu browsing menemukan model seperti itu. Nah itulah yang dinamakan sitelink. Bagus khan, seperti pohon berakar.

Google sitelink merupakan sub halaman yang ada di bawah URL website halaman pertama atau display yang muncul seketika di halaman pencarian search engine google. Sitelink biasanya berisi link halaman populer yang ada di website tersebut. Google sitelink biasanya muncul ketika kalian melakukan pencarian menggunakan kata kunci suatu nama atau brand khusus.

Algoritma Search Engine Google berupaya mempermudah visitor blog tersebut untuk menjelajahi artikel dengan memilih halaman populer yang ditampilan sebagai sitelink. Daripada mencari di dalam website dengan pencarian yang agak melelahkan, lebih baik dengan sitelink.

Sitelink juga dapat meningkatkan Click Through Rate (CTR), meningkatkan kepercayaan (kredibilitas) pengunjung website, serta meningkatkan brand awareness dari sebuah website.

Lalu bagaimanakah cara membuat sitelink untuk sebuah website?

1. Buat Nama Website yang Unik

3. Lakukan Optimalisasi SEO

4. Buat Internal Link

5. Tingkatkan Brand Awareness

6. Pastikan Struktur dan Navigasi Website yang Jelas

7. Buat Sitemaps XML dan HTML


1. Berilah Nama Website yang Unique

Tidak semua brand website akan mendapatkan sitelink, melainkan hanya brand dengan nama yang unik dan berada di halaman pertama hasil pencarian Google yang akan mendapatkan sitelink. Google sitelink ditampilkan pada pencarian dengan keyword nama brand tertentu.

Contoh : Jasa Masak Indonesia, sebuah website yang bergerak dalam bidang kuliner akan merasa kesusahan mendapatkan sitelink. Lebih baik menggunakan nama yang lebih bernuansa branded yakni misal, SantiCook, atau IndraKitchen. Mungkin seperti itu.

3. Lakukan Optimalisasi SEO

Salah satu cara mendapatkan posisi halaman pertama Google yaitu dengan melakukan optimalisasi SEO (Search Engine Optimization). Optimalisasi SEO dapat dilakukan dengan dua teknik, yakni teknik SEO On Page dan teknik SEO Off Page.
Teknik SEO On Page merupakan teknik optimalisasi yang dilakukan pada website itu. Teknik ini bertujuan memberikan manfaat (value) website bagi visitor, memudahkan visitor melakukan eksplorasi website, membuat visitor betah berada di website, serta mempermudah mesin pencari mengerti dengan struktur website kalian.
Sedangkan SEO Off Page merupakan optimalisasi SEO yang dilakukan di luar website. Maksudnya adalah menaikkan peringkat SERP (Search Engine Result Page), meningkatkan page rage halaman website, membangun kepercayaan dan otoritas website dari mesin pencari dan menaikkan reputasi website.

4. Buat Internal Link

Internal link adalah suatu halaman yang mengarah ke halaman lain dalam satu website (website yang sama). Semakin banyak internal link semakin mudah Google mengetahui halaman populer pada website kamu untuk dijadikan sitelink. Misalnya, bila kalian berulang kali menautkan link ke halaman about, maka Google menilai halaman itu menjadi halaman yang populer pada website.

5. Meningkatkan Brand Awareness

Brand awareness adalah kemampuan konsumen untuk mengidentifikasi dan kemudian mengingat sebuah merek (brand), seperti nama, gambar, logo atau slogan yang digunakan oleh sebuah website itu. Jika orang semakin familiar dengan suatu brand, maka semakin sering pula mereka mencari brand tersebut di Google. Kemudian semakin banyak orang yang mencari brand kalian di Google, semakin mudah untuk kamu mendapatkan sitelink. Lalu bagaimana cara meningkatkan brand awareness?

1. Targetkan kata kunci yang tepat pada halaman website untuk membantu website kalian mudah ditemukan dan mendapatkan posisi yang baik pada mesin pencarian search engine google.
2. Buat konten yang berkualitas untuk optimalisasi SEO sehingga dapat menaikkan posisi website pada mesin pencarian dan menarik perhatian pengunjung supaya betah berlama-lama di website membaca konten yang ada.
3. Buat blog website dengan menyediakan artikel-artikel yang memberikan manfaat (value) bagi visitor.
4. Terus melakukan evaluasi SEO agar kinerja SEO pada website berjalan maksimal.


6. Pastikan Struktur dan Navigasi Website yang Jelas

Dengan struktur dan navigasi website yang jelas akan mempermudah Google melakukan crawling dan indexing untuk dijadikan sitelink. Memiliki halaman (menu) navigasi utama yang lengkap, Homepage, About Us, Contact Us serta Services dan masih banyak lagi.

7. Buat Sitemaps XML dan HTML

Sitemaps XML adalah daftar halaman website yang ditujukan kepada mesin pencari agar website mudah ditemukan. Sedangkan sitemaps HTML adalah daftar halaman website yang ditujukan untuk pengunjung website.

Mendapatkan sitelink memang mutlak dari algoritma Google dan kita tidak dapat membuatnya. Hanya website dengan brand dan reputasi yang baik di Search Engine Google yang akan mendapatkan spesial sitelink ini. Namun setidaknya dengan melakukan 7 cara diatas, bisa sedikit membantu kalian untuk mendapatkan sitelink. Semoga bermanfaat. Salam Blogger.

Bagikan ke teman-teman kamu

24 September 2022

Membuat Halaman Partner Blog Mode Timeline Keren dan Stylish

Membuat Halaman Partner Blog Mode Timeline Keren dan Stylish

Membuat Halaman Partner Blog Mode Timeline Keren dan Stylish

PARTNER blog merupakan hal yang penting dan menjadi salah satu halaman statis yang berada di di halaman depan blog. Terkadang para blogger mencari partner blognya sesuai dengan niche artikel yang ada di blognya. Tapi tidak sedikit juga yang mencari partner blog gado-gado, isinya macam-macam. Silakan saja selama tidak melanggar ketentuan blogger dan dapat menjadi temen online yang mengasyikkan. Bila memungkinkan dapat menjadi teman di dunia nyata.

Mode pertemanan ini juga banyak digunakan dalam widget sosial media, sebut saja Facebook dan Whatsapp. Sedangkan Pinterest dan Twitter mengandalkan follow akun. Dengan semakin banyaknya teman, maka memungkinkan kita dapat menjalin relasi dengan orang lain. Kalau dalam dunia blogger, kita bisa saling sharing ilmu tentang blog. Bagaimana membuat sebuah blog menjadi semakin bagus.

Dalam tutorial kali ini, saya akan memberikan cara membuat widget pertemanan mode Timeline. Dalam mode Timeline ini, akan membentuk sebuah garis kebawah dengan diisi URL blog dan Deskripsi blog. Coba nanti kalian praktekkan cara membuat widget pertemanan ini. Caranya gampang kok tinggal copas doang itu kode dalam halaman statis - Partner - . Nanti akan muncul teman-teman kalian disitu.



Seperti ini cara membuat pertemanan mode Timeline di Blog :

Langsung masuk ke Halaman Statis dan tempelkan kode dibawah ini disitu. Di mode HTML ya jangan mode Compose.
<center><h1><font color="white">Partner Alifacode.com</font></h1></center><br/>
<div class="Buka">
<ul class="BlogList">
<li class="ArticleTeaser">
<h3 class="ArticleTeaser-title">
<a href="https://alifacode.com/" target="_blank" title="Trik dan Tips Ngeblog">Alifacode.com</a></h3>
<div class="ArticleTeaser-bubble">
</div>
<div class="ArticleTeaser-date">
|Tutorial Dan Cara blogging untuk pemula | Tips SEO | Cara membuat blog  | Google adsense|</div>
</li>
<li class="ArticleTeaser">
<h3 class="ArticleTeaser-title">
<a href="http://rsikotamagelang.com/" target="_blank" title="RSI Kota Magelang">RSIKotaMagelang.com</a></h3>
<div class="ArticleTeaser-bubble">
</div>
<div class="ArticleTeaser-date">
Blog yang Berisikan tentang Rumah Sakit | Kesehatan | Obat-obatan | dan Jadwal Dokter Praktek</div>
</li>
<li class="ArticleTeaser">
<h3 class="ArticleTeaser-title">
<a href="https://www.google.com/" target="_blank" title="Blog Kalian ?">Blog Kalian ?</a></h3>
<div class="ArticleTeaser-bubble">
</div>
<div class="ArticleTeaser-date">
Mari Gabung Untuk Menjadi Bagian Dari Partner Blog Ini.</div>
</li>
</ul>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js" type="text/javascript"></script>
<br />
<br />
<script>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://cdn.jsdelivr.net/gh/Alifacode/backupmaster@main/Part.css");
//]]>
</script>
<script src="https://cdn.jsdelivr.net/gh/Alifacode/backupmaster@main/Part.js" type="text/javascript"></script>


Nah sudah tutorialnya disajikan diatas. Silakan untuk kalian mempraktekkannya. Terima kasih yang sudah mampir kesini. Semoga jadi ya prakteknya.



Bagikan ke teman-teman kamu

23 September 2022

Tutorial Cara Membuat Background Gambar di Blog

Tutorial Cara Membuat Background Gambar di Blog

Tutorial Cara Membuat Background Gambar di Blog

BACKGROUND pada blog bisa beraneka ragam. Gambar yang ditempelkan bisa diambil dari gambar yang bertebaran di internet tapi bisa juga gambar hasil kreasi sendiri atau desain sendiri. Dalam penerapannya, kita hanya menempelkan beberapa kode CSS di template blog kita.

Gambar yang saya pasang adalah Sanji -anggota Mugiwara One Piece-. Sanji beserta flagnya saya sertakan sebagai background gambar disini. Nanti kalian bisa ganti sesuka hati kalian. Ukurannya pada gambar itu adalah p : 1.637 px dan l : 3.508 px. Jadi kalian tinggal sesuaikan saja gambarnya nanti jangan sampai kekecilan atau kebesaran ya.



Langsung saja ya :

Cara Membuat Background Tampilan Display Blog


1. Masuk ke Dashboard Blogger
2. Klik Tema
3. Pilih Sesuaikan : Edit HTML
4. Temukan kode ]]></b:skin> dan tempelkan kode dibawah ini diatas kode ]]></b:skin> tersebut
body{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3LzX5QzzdT2-XIPZF0eZH288pyeElIvHB8kJOtlkTIpmEtAckGeMc1G0eJATteAk6-mebkeT8i9m9opyTRpe9jDYYZFCNpL1ym9B2VA_yqjU944nCTJCXZwaj40QlUql9qjG73g-x1IQyAoENy1Y_Je4IHGzF5LbXhBhFWYgjQzMcYP4aJMjrrOqc/s800/SANJI%20BACKGROUND.jpg),url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIULvd6SihG1gEtlugJ3eUTMYHwop_SjYnWHcYoEZH0aq16uaa9IzhXh9xFA1_rsgPc2eTfSq9i4ABR61YKmz7U3cP8MN6AkkFA1Gmo3ljp5VKF4VHjIM4xQBnf69XgEHU3iv9eCcE8owObCsTnltQ71R7dgUHlrAOUwYLcBE-sWHj9wcPq8Rn5XkB/s800/SANJI%20BACKGROUND%202.jpg)!important;background-repeat:no-repeat!important;background-attachment:fixed!important;background-position:top left,top right!important;background-size:auto auto,auto auto!important}


Catatan :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib9HqItcNrG8XxVjTKzo-QfSlaEgrdMeKWpzv002eQDz4jaIxTx1ZT5Jp3WOCOkUkiLDAfTSCykXARp5feYNT1NSYv406XzzrFTLFSTikm3O5P8Xf0-cpafDYAcuNZ-vCNv3UsdLqFOtXIBN3sdXz5pdjtH68N_HL3HLiFnhGam2BOyQzklmiLlUvN/s800/SANJI%20BACKGROUND.jpg -- Diganti dengan gambar kalian sendiri

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIULvd6SihG1gEtlugJ3eUTMYHwop_SjYnWHcYoEZH0aq16uaa9IzhXh9xFA1_rsgPc2eTfSq9i4ABR61YKmz7U3cP8MN6AkkFA1Gmo3ljp5VKF4VHjIM4xQBnf69XgEHU3iv9eCcE8owObCsTnltQ71R7dgUHlrAOUwYLcBE-sWHj9wcPq8Rn5XkB/s800/SANJI%20BACKGROUND%202.jpg -- Diganti dengan gambar kalian sendiri


Demonya ada dibawah :



Selanjutnya adalah memberikan background gambar tunggal pada background blog. Saya mencoba pada tempplate tutorial yang sudah saya modifikasi supaya bisa terpasang gambar pada background blog itu. Caranya hampir sama dengan yang sudah saya beri tutorialnya diatas. Sehingga hanya dirubah pada bagiannya sedikit saja. Untuk mencobnya silakan ikuti tutorialnya berikut ini :

1. Masuk ke Dashboard Blogger
2. Klik Tema
3. Pilih Sesuaikan : Edit HTML
4. Temukan kode ]]></b:skin> dan tempelkan kode dibawah ini diatas kode ]]></b:skin> tersebut
body {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAWK5Tdy9rkhMGyyeU70wfCUcVv6P3hSTiUs0igqnTYpPuZfbafl36Kdj7v5huJbbVIyWZOYFN2uWRhCy9pFSHYGZiqP2hw-N_mNMjZiU26tWVyx43QVojcaM1g9wNDEFEaMQguOaxofZHv7qnvKtuwLceHmUF9-9fW-S7cMiB7CsrvrCh8idOdNn4/s1600/background-kedua-di-blog.jpg);margin:auto;padding:auto;font:80% Arial, Sans-serif;text-align: center;color:#000;}


Demonya ada dibawah :



Catatan : Gambar yang ada di background adalah gambar pemilik yang berhak cipta penuh. Alifacode.com hanya sekedar menampilkan untuk contoh blog tutorial. Tidak ada maksud mengklaim secara individu dari kepemilikan tersebut. Terima kasih.

Bagikan ke teman-teman kamu

18 September 2022

Membuat Widget Kalender Beserta Catatan Harian dengan CSS3

Membuat Widget Kalender Beserta Catatan Harian dengan CSS3

Membuat Widget Kalender Beserta Catatan Harian dengan CSS3

KALENDER penting buat mencatat kegiatan kita. Karena dengan kalender, kita dapat mengetahui tanggal berapa hari ini, ada kegiatan apa dan ada acara apa. Semua memo itu tertulis rapi dalam catatan yang terdapat dalam kalender baik itu kalender konvensional maupun kalender elektronik. Dan sekarang bahkan sudah merambah ke dunia bahasa pemrograman koding CSS yaitu dengan Membuat Widget Kalender Beserta Catatan Harian dengan CSS3.

Trik ini murni menggunakan HTML, CSS3 dan Javascript. Ketiga bahasa pemrograman web itu sudah terbilang handal menurut saya. Dengan perpaduan yang selaras, kita dapat mengkreasikan berabagai macam tampilan web menjadi atraktif. Sehingga memang pemahamaan akan ketiga bahasa pemrograman web tadi harus kalian ketahui sebisa mungkin kalian kuasai. Dengan begitu, kalian nanti bisa memodifikasi widget kalender sesuai keinginan hati kalian dalam mengkreasikannya.



Sejauh ini terdapat beberapa website yang menyediakan widget kalender ini. Dan widget itu sudah banyak digunakan para blogger untuk mempercantik tampilan blognya. Selain memperindah tampilan, kalender berfungsi juga sebagai pengingat waktu berupa hari tanggal, bulan dan tahun pada waktu sekarang, masa lampau dan masa yang akan datang. Dengan teknologi yang semakin canggih semua itu sudah terwujud di berbagai perangkat tidak terkecuali website atau blog.

Penggunaan widget ini terus terang saja akan sedikit banyak memakan resourcer bandwidth kecepatan blog. Sehingga secara tidak langsung dapat menurunkan kecepatan loading blog. Tapi mungkin dengan kreasi sedikit dari CSS3 yang sudah terbilang ringan, saya kira itu semua dapat teratasi dengan baik. Hingga nanti kecepatan blog tidak turun drastis secara langsung. Tapi tetap stabil dan terhitung cepat. Kita mulai saja tutorialnya ya.

Membuat Widget Kalender Beserta Catatan Harian dengan CSS3

Tutorialnya :


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
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

body {
 overflow: hidden;
 font-family: 'HelveticaNeue-UltraLight', 'Helvetica Neue UltraLight', 'Helvetica Neue', Arial, Helvetica, sans-serif;
 font-weight: 100;
 color: rgba(255, 255, 255, 1);
 margin: 0;
 padding: 0;
 background: #4A4A4A;
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}

#calendar {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  width: 420px;
  margin: 0 auto;
  height: 570px;
  overflow: hidden;
}

.header {
  height: 50px;
  width: 420px;
  background: rgba(66, 66, 66, 1);
  text-align: center;
  position:relative;
  z-index: 100;
}

.header h1 {
  margin: 0;
  padding: 0;
  font-size: 20px;
  line-height: 50px;
  font-weight: 100;
  letter-spacing: 1px;
}

.left, .right {
  position: absolute;
  width: 0px;
  height: 0px;
  border-style: solid;
  top: 50%;
  margin-top: -7.5px;
  cursor: pointer;
}

.left {
  border-width: 7.5px 10px 7.5px 0;
  border-color: transparent rgba(160, 159, 160, 1) transparent transparent;
  left: 20px;
}

.right {
  border-width: 7.5px 0 7.5px 10px;
  border-color: transparent transparent transparent rgba(160, 159, 160, 1);
  right: 20px;
}

.month {
  /*overflow: hidden;*/
  opacity: 0;
}

.month.new {
  -webkit-animation: fadeIn 1s ease-out;
  opacity: 1;
}

.month.in.next {
  -webkit-animation: moveFromTopFadeMonth .4s ease-out;
  -moz-animation: moveFromTopFadeMonth .4s ease-out;
  animation: moveFromTopFadeMonth .4s ease-out;
  opacity: 1;
}

.month.out.next {
  -webkit-animation: moveToTopFadeMonth .4s ease-in;
  -moz-animation: moveToTopFadeMonth .4s ease-in;
  animation: moveToTopFadeMonth .4s ease-in;
  opacity: 1;
}

.month.in.prev {
  -webkit-animation: moveFromBottomFadeMonth .4s ease-out;
  -moz-animation: moveFromBottomFadeMonth .4s ease-out;
  animation: moveFromBottomFadeMonth .4s ease-out;
  opacity: 1;
}

.month.out.prev {
  -webkit-animation: moveToBottomFadeMonth .4s ease-in;
  -moz-animation: moveToBottomFadeMonth .4s ease-in;
  animation: moveToBottomFadeMonth .4s ease-in;
  opacity: 1;
}

.week {
 background: #4A4A4A;
}

.day {
  display: inline-block;
  width: 60px;
  padding: 10px;
  text-align: center;
  vertical-align: top;
  cursor: pointer;
  background: #4A4A4A;
  position: relative;
  z-index: 100;
}

.day.other {
 color: rgba(255, 255, 255, .3);
}

.day.today {
  color: rgba(156, 202, 235, 1);
}

.day-name {
  font-size: 9px;
  text-transform: uppercase;
  margin-bottom: 5px;
  color: rgba(255, 255, 255, .5);
  letter-spacing: .7px;
}

.day-number {
  font-size: 24px;
  letter-spacing: 1.5px;
}


.day .day-events {
  list-style: none;
  margin-top: 3px;
  text-align: center;
  height: 12px;
  line-height: 6px;
  overflow: hidden;
}

.day .day-events span {
  vertical-align: top;
  display: inline-block;
  padding: 0;
  margin: 0;
  width: 5px;
  height: 5px;
  line-height: 5px;
  margin: 0 1px;
}

.blue { background: rgba(156, 202, 235, 1); }
.orange { background: rgba(247, 167, 0, 1); }
.green { background: rgba(153, 198, 109, 1); }
.yellow { background: rgba(249, 233, 0, 1); }

.details {
  position: relative;
  width: 420px;
  height: 75px;
  background: rgba(164, 164, 164, 1);
  margin-top: 5px;
  border-radius: 4px;
}

.details.in {
  -webkit-animation: moveFromTopFade .5s ease both;
  -moz-animation: moveFromTopFade .5s ease both;
  animation: moveFromTopFade .5s ease both;
}

.details.out {
  -webkit-animation: moveToTopFade .5s ease both;
  -moz-animation: moveToTopFade .5s ease both;
  animation: moveToTopFade .5s ease both;
}

.arrow {
  position: absolute;
  top: -5px;
  left: 50%;
  margin-left: -2px;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 0 5px 5px 5px;
  border-color: transparent transparent rgba(164, 164, 164, 1) transparent;
  transition: all 0.7s ease;
}

.events {
  height: 75px;
  padding: 7px 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.events.in {
  -webkit-animation: fadeIn .3s ease both;
  -moz-animation: fadeIn .3s ease both;
  animation: fadeIn .3s ease both;
}

.events.in {
  -webkit-animation-delay: .3s;
  -moz-animation-delay: .3s;
  animation-delay: .3s;
}

.details.out .events {
  -webkit-animation: fadeOutShrink .4s ease both;
  -moz-animation: fadeOutShink .4s ease both;
  animation: fadeOutShink .4s ease both;
}

.events.out {
  -webkit-animation: fadeOut .3s ease both;
  -moz-animation: fadeOut .3s ease both;
  animation: fadeOut .3s ease both;
}

.event {
  font-size: 16px;
  line-height: 22px;
  letter-spacing: .5px;
  padding: 2px 16px;
  vertical-align: top;
}

.event.empty {
  color: #eee;
}

.event-category {
  height: 10px;
  width: 10px;
  display: inline-block;
  margin: 6px 0 0;
  vertical-align: top;
}

.event span {
  display: inline-block;
  padding: 0 0 0 7px;
}

.legend {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 30px;
  background: rgba(60, 60, 60, 1);
  line-height: 30px;

}

.entry {
  position: relative;
  padding: 0 0 0 25px;
  font-size: 13px;
  display: inline-block;
  line-height: 30px;
  background: transparent;
}

.entry:after {
  position: absolute;
  content: '';
  height: 5px;
  width: 5px;
  top: 12px;
  left: 14px;
}

.entry.blue:after { background: rgba(156, 202, 235, 1); }
.entry.orange:after { background: rgba(247, 167, 0, 1); }
.entry.green:after { background: rgba(153, 198, 109, 1); }
.entry.yellow:after { background: rgba(249, 233, 0, 1); }

/* Animations are cool!  */
@-webkit-keyframes moveFromTopFade {
  from { opacity: .3; height:0px; margin-top:0px; -webkit-transform: translateY(-100%); }
}
@-moz-keyframes moveFromTopFade {
  from { height:0px; margin-top:0px; -moz-transform: translateY(-100%); }
}
@keyframes moveFromTopFade {
  from { height:0px; margin-top:0px; transform: translateY(-100%); }
}

@-webkit-keyframes moveToTopFade {
  to { opacity: .3; height:0px; margin-top:0px; opacity: 0.3; -webkit-transform: translateY(-100%); }
}
@-moz-keyframes moveToTopFade {
  to { height:0px; -moz-transform: translateY(-100%); }
}
@keyframes moveToTopFade {
  to { height:0px; transform: translateY(-100%); }
}

@-webkit-keyframes moveToTopFadeMonth {
  to { opacity: 0; -webkit-transform: translateY(-30%) scale(.95); }
}
@-moz-keyframes moveToTopFadeMonth {
  to { opacity: 0; -moz-transform: translateY(-30%); }
}
@keyframes moveToTopFadeMonth {
  to { opacity: 0; -moz-transform: translateY(-30%); }
}

@-webkit-keyframes moveFromTopFadeMonth {
  from { opacity: 0; -webkit-transform: translateY(30%) scale(.95); }
}
@-moz-keyframes moveFromTopFadeMonth {
  from { opacity: 0; -moz-transform: translateY(30%); }
}
@keyframes moveFromTopFadeMonth {
  from { opacity: 0; -moz-transform: translateY(30%); }
}

@-webkit-keyframes moveToBottomFadeMonth {
  to { opacity: 0; -webkit-transform: translateY(30%) scale(.95); }
}
@-moz-keyframes moveToBottomFadeMonth {
  to { opacity: 0; -webkit-transform: translateY(30%); }
}
@keyframes moveToBottomFadeMonth {
  to { opacity: 0; -webkit-transform: translateY(30%); }
}

@-webkit-keyframes moveFromBottomFadeMonth {
  from { opacity: 0; -webkit-transform: translateY(-30%) scale(.95); }
}
@-moz-keyframes moveFromBottomFadeMonth {
  from { opacity: 0; -webkit-transform: translateY(-30%); }
}
@keyframes moveFromBottomFadeMonth {
  from { opacity: 0; -webkit-transform: translateY(-30%); }
}

@-webkit-keyframes fadeIn  {
  from { opacity: 0; }
}
@-moz-keyframes fadeIn  {
  from { opacity: 0; }
}
@keyframes fadeIn  {
  from { opacity: 0; }
}

@-webkit-keyframes fadeOut  {
  to { opacity: 0; }
}
@-moz-keyframes fadeOut  {
  to { opacity: 0; }
}
@keyframes fadeOut  {
  to { opacity: 0; }
}

@-webkit-keyframes fadeOutShink  {
  to { opacity: 0; padding: 0px; height: 0px; }
}
@-moz-keyframes fadeOutShink  {
  to { opacity: 0; padding: 0px; height: 0px; }
}
@keyframes fadeOutShink  {
  to { opacity: 0; padding: 0px; height: 0px; }
}


Selanjutnya adalah
4. Tempelkan kode dibawah ini diatas kode </body>.
<script type='text/javascript'> 
//<![CDATA[
 !function() {
  var today = moment();
  function Calendar(selector, events) {
    this.el = document.querySelector(selector);
    this.events = events;
    this.current = moment().date(1);
    this.draw();
    var current = document.querySelector('.today');
    if(current) {
      var self = this;
      window.setTimeout(function() {
        self.openDay(current);
      }, 500);
    }
  }
  Calendar.prototype.draw = function() {
    //Create Header
    this.drawHeader();
    //Draw Month
    this.drawMonth();
    this.drawLegend();
  }
  Calendar.prototype.drawHeader = function() {
    var self = this;
    if(!this.header) {
      //Create the header elements
      this.header = createElement('div', 'header');
      this.header.className = 'header';
      this.title = createElement('h1');
      var right = createElement('div', 'right');
      right.addEventListener('click', function() { self.nextMonth(); });
      var left = createElement('div', 'left');
      left.addEventListener('click', function() { self.prevMonth(); });
      //Append the Elements
      this.header.appendChild(this.title); 
      this.header.appendChild(right);
      this.header.appendChild(left);
      this.el.appendChild(this.header);
    }
    this.title.innerHTML = this.current.format('MMMM YYYY');
  }
  Calendar.prototype.drawMonth = function() {
    var self = this;   
    this.events.forEach(function(ev) {
     ev.date = self.current.clone().date(Math.random() * (29 - 1) + 1);
    });        
    if(this.month) {
      this.oldMonth = this.month;
      this.oldMonth.className = 'month out ' + (self.next ? 'next' : 'prev');
      this.oldMonth.addEventListener('webkitAnimationEnd', function() {
        self.oldMonth.parentNode.removeChild(self.oldMonth);
        self.month = createElement('div', 'month');
        self.backFill();
        self.currentMonth();
        self.fowardFill();
        self.el.appendChild(self.month);
        window.setTimeout(function() {
          self.month.className = 'month in ' + (self.next ? 'next' : 'prev');
        }, 16);
      });
    } else {
        this.month = createElement('div', 'month');
        this.el.appendChild(this.month);
        this.backFill();
        this.currentMonth();
        this.fowardFill();
        this.month.className = 'month new';
    }
  }
  Calendar.prototype.backFill = function() {
    var clone = this.current.clone();
    var dayOfWeek = clone.day();
    if(!dayOfWeek) { return; }
    clone.subtract('days', dayOfWeek+1);
    for(var i = dayOfWeek; i > 0 ; i--) {
      this.drawDay(clone.add('days', 1));
    }
  }
  Calendar.prototype.fowardFill = function() {
    var clone = this.current.clone().add('months', 1).subtract('days', 1);
    var dayOfWeek = clone.day();
    if(dayOfWeek === 6) { return; }
    for(var i = dayOfWeek; i < 6 ; i++) {
      this.drawDay(clone.add('days', 1));
    }
  }
  Calendar.prototype.currentMonth = function() {
    var clone = this.current.clone();
    while(clone.month() === this.current.month()) {
      this.drawDay(clone);
      clone.add('days', 1);
    }
  }
  Calendar.prototype.getWeek = function(day) {
    if(!this.week || day.day() === 0) {
      this.week = createElement('div', 'week');
      this.month.appendChild(this.week);
    }
  }
  Calendar.prototype.drawDay = function(day) {
    var self = this;
    this.getWeek(day);
    //Outer Day
    var outer = createElement('div', this.getDayClass(day));
    outer.addEventListener('click', function() {
      self.openDay(this);
    });
    //Day Name
    var name = createElement('div', 'day-name', day.format('ddd'));

    //Day Number
    var number = createElement('div', 'day-number', day.format('DD'));
    //Events
    var events = createElement('div', 'day-events');
    this.drawEvents(day, events);
    outer.appendChild(name);
    outer.appendChild(number);
    outer.appendChild(events);
    this.week.appendChild(outer);
  }
  Calendar.prototype.drawEvents = function(day, element) {
    if(day.month() === this.current.month()) {
      var todaysEvents = this.events.reduce(function(memo, ev) {
        if(ev.date.isSame(day, 'day')) {
          memo.push(ev);
        }
        return memo;
      }, []);
      todaysEvents.forEach(function(ev) {
        var evSpan = createElement('span', ev.color);
        element.appendChild(evSpan);
      });
    }
  }
  Calendar.prototype.getDayClass = function(day) {
    classes = ['day'];
    if(day.month() !== this.current.month()) {
      classes.push('other');
    } else if (today.isSame(day, 'day')) {
      classes.push('today');
    }
    return classes.join(' ');
  }
  Calendar.prototype.openDay = function(el) {
    var details, arrow;
    var dayNumber = +el.querySelectorAll('.day-number')[0].innerText || +el.querySelectorAll('.day-number')[0].textContent;
    var day = this.current.clone().date(dayNumber);
    var currentOpened = document.querySelector('.details');
    //Check to see if there is an open detais box on the current row
    if(currentOpened && currentOpened.parentNode === el.parentNode) {
      details = currentOpened;
      arrow = document.querySelector('.arrow');
    } else {
      //Close the open events on differnt week row
      //currentOpened && currentOpened.parentNode.removeChild(currentOpened);
      if(currentOpened) {
        currentOpened.addEventListener('webkitAnimationEnd', function() {
          currentOpened.parentNode.removeChild(currentOpened);
        });
        currentOpened.addEventListener('oanimationend', function() {
          currentOpened.parentNode.removeChild(currentOpened);
        });
        currentOpened.addEventListener('msAnimationEnd', function() {
          currentOpened.parentNode.removeChild(currentOpened);
        });
        currentOpened.addEventListener('animationend', function() {
          currentOpened.parentNode.removeChild(currentOpened);
        });
        currentOpened.className = 'details out';
      }
      //Create the Details Container
      details = createElement('div', 'details in');
      //Create the arrow
      var arrow = createElement('div', 'arrow');
      //Create the event wrapper
      details.appendChild(arrow);
      el.parentNode.appendChild(details);
    }
    var todaysEvents = this.events.reduce(function(memo, ev) {
      if(ev.date.isSame(day, 'day')) {
        memo.push(ev);
      }
      return memo;
    }, []);
    this.renderEvents(todaysEvents, details);
    arrow.style.left = el.offsetLeft - el.parentNode.offsetLeft + 27 + 'px';
  }
  Calendar.prototype.renderEvents = function(events, ele) {
    //Remove any events in the current details element
    var currentWrapper = ele.querySelector('.events');
    var wrapper = createElement('div', 'events in' + (currentWrapper ? ' new' : ''));
    events.forEach(function(ev) {
      var div = createElement('div', 'event');
      var square = createElement('div', 'event-category ' + ev.color);
      var span = createElement('span', '', ev.eventName);
      div.appendChild(square);
      div.appendChild(span);
      wrapper.appendChild(div);
    });
    if(!events.length) {
      var div = createElement('div', 'event empty');
      var span = createElement('span', '', 'No Events');
      div.appendChild(span);
      wrapper.appendChild(div);
    }
    if(currentWrapper) {
      currentWrapper.className = 'events out';
      currentWrapper.addEventListener('webkitAnimationEnd', function() {
        currentWrapper.parentNode.removeChild(currentWrapper);
        ele.appendChild(wrapper);
      });
      currentWrapper.addEventListener('oanimationend', function() {
        currentWrapper.parentNode.removeChild(currentWrapper);
        ele.appendChild(wrapper);
      });
      currentWrapper.addEventListener('msAnimationEnd', function() {
        currentWrapper.parentNode.removeChild(currentWrapper);
        ele.appendChild(wrapper);
      });
      currentWrapper.addEventListener('animationend', function() {
        currentWrapper.parentNode.removeChild(currentWrapper);
        ele.appendChild(wrapper);
      });
    } else {
      ele.appendChild(wrapper);
    }
  }
  Calendar.prototype.drawLegend = function() {
    var legend = createElement('div', 'legend');
    var calendars = this.events.map(function(e) {
      return e.calendar + '|' + e.color;
    }).reduce(function(memo, e) {
      if(memo.indexOf(e) === -1) {
        memo.push(e);
      }
      return memo;
    }, []).forEach(function(e) {
      var parts = e.split('|');
      var entry = createElement('span', 'entry ' +  parts[1], parts[0]);
      legend.appendChild(entry);
    });
    this.el.appendChild(legend);
  }
  Calendar.prototype.nextMonth = function() {
    this.current.add('months', 1);
    this.next = true;
    this.draw();
  }
  Calendar.prototype.prevMonth = function() {
    this.current.subtract('months', 1);
    this.next = false;
    this.draw();
  }
  window.Calendar = Calendar;
  function createElement(tagName, className, innerText) {
    var ele = document.createElement(tagName);
    if(className) {
      ele.className = className;
    }
    if(innerText) {
      ele.innderText = ele.textContent = innerText;
    }
    return ele;
  }
}();
!function() {
  var data = [
    { eventName: 'Lunch Meeting w/ Mark', calendar: 'Work', color: 'orange' },
    { eventName: 'Interview - Jr. Web Developer', calendar: 'Work', color: 'orange' },
    { eventName: 'Demo New App to the Board', calendar: 'Work', color: 'orange' },
    { eventName: 'Dinner w/ Marketing', calendar: 'Work', color: 'orange' },
    { eventName: 'Game vs Portalnd', calendar: 'Sports', color: 'blue' },
    { eventName: 'Game vs Houston', calendar: 'Sports', color: 'blue' },
    { eventName: 'Game vs Denver', calendar: 'Sports', color: 'blue' },
    { eventName: 'Game vs San Degio', calendar: 'Sports', color: 'blue' },
    { eventName: 'School Play', calendar: 'Kids', color: 'yellow' },
    { eventName: 'Parent/Teacher Conference', calendar: 'Kids', color: 'yellow' },
    { eventName: 'Pick up from Soccer Practice', calendar: 'Kids', color: 'yellow' },
    { eventName: 'Ice Cream Night', calendar: 'Kids', color: 'yellow' },

    { eventName: 'Free Tamale Night', calendar: 'Other', color: 'green' },
    { eventName: 'Bowling Team', calendar: 'Other', color: 'green' },
    { eventName: 'Teach Kids to Code', calendar: 'Other', color: 'green' },
    { eventName: 'Startup Weekend', calendar: 'Other', color: 'green' }
  ];
  function addDate(ev) {   
  }
  var calendar = new Calendar('#calendar', data);
}();
 //]]> 
</script> 


Terakhir memanggil kode HTML ke dalam tampilan display blog. Dan kalian tinggal membubuhkan kode ini

<div id="calendar"></div>


Nah sudah khan. Sekarang tinggal lihat blog kalian. Pasti sudah ada widget kalendernya. Silakan dipraktekkan ya. Selamat malam. Semoga hari-hari kita menyenangkan. Jangan sampai ada ungkapan "Semoga harimu Senin terus". :D .. Salam Blogger.



Bagikan ke teman-teman kamu

16 September 2022

Script Untuk Mencantumkan Sumber Artikel Ketika Dicopas

Script Untuk Mencantumkan Sumber Artikel Ketika Dicopas

Script Untuk Mencantumkan Sumber Artikel Ketika Dicopas

COPAS dalam dunia tulis menulis adalah sebuah kegiatan untuk menyalin dan kemudian menuangkan tulisan itu lagi ke dalam obyek lain tanpa mengurangi atau menambahi satu kata pun. Begitu dalam dunia blogging, copas adalah sebuah hal untuk menyalin artikel dan kemudian menuangkan kedalam blog lainnya. Meski diperbolehkan tapi dengan syarat, kegiatan copas adalah hal yang tidak baik terkait dengan kreativitas. Sebab, tanpa sadar, kegiatan copas telah membunuh secara perlahan kreativitas sang pengcopas tersebut.

Bila dalam blog yang sudah terkenal dengan tulisannya yang menarik, maka memasang script ini menjadi sebuah kewajiban. Sehingga tulisannya diprotect, setidaknya bila dicopas sudah mencantumkan sumber aslinya. Dengan metode ini, memungkinkan si pemilik tulisan asli sudah mengamankan artikelnya. Sehingga kreativitas dari sang penulis tidak akan diklaim ke pihak lain.



Sudah barang tentu, dengan tutorial ini bisa kita tarik garis lurus bagaimana seorang mengamankan hasil karya seni berupa tulisannya dan gambar yang terpampang di bagian postingan blognya dengan memberikan sumber asli dengan script yang memadai. Bila tidak diberikan script ini, apa jadinya, mungkin saja ada - blog kembaran - yang isinya plek ketiplek / sama persis dengan blog yang telah dicopas. Sungguh tidak kreatif sekali ya khan dengan tindakan ini?

Langsung saja ya kita berikan tutorialnya tentang cara memprotect artikel di postingan blog ini.

Script Untuk Mencantumkan Sumber Artikel Ketika Dicopas

1. Ke Dashboard Blogger
2. Klik Tema
3. Pilih Sesuaikan : Edit HTML
4. Cari kode seperti ini di template : </body> dan tempelkan javascript dibawah ini di atas dari </body>
<script type='text/javascript'>
//<![CDATA[
!function(e,t){var n="getSelection",o="removeAllRanges",i="addRange",l="parentNode",a="firstChild",d="appendChild",r="removeChild",s="test",c="innerHTML";if(e[n]){var p,g,f,h,u,y;t.addEventListener("copy",function(C){for(g=C.target;3===g.nodeType;)g=g[l];if(h=t.createElement("div"),(p=e[n]())&&p.rangeCount&&(p=p.getRangeAt(0))&&(f=p.cloneRange(),p=p.cloneContents())){for(;u=p[a];)h[d](u);if(!/^(pre|code)$/i[s](g.nodeName||"")&&!/(^|\s)no-attribution(\s|$)/i[s](g.className||"")){var v=e.location.href;h[c]+="<br><br>&copy; "+t.title+'<br>Source: <a href="'+v+'">'+v+"</a>"}y=t.createRange(),t.body[d](h),y.selectNodeContents(h),p=e[n](),p[o](),p[i](y),setTimeout(function(){h[l][r](h),p[o](),p[i](f)})}},!1)}}(window,document);
//]]>
</script>


Ada lagi nih

<script> var message="Dilarang dengan Sangat Copas Mengcopas!";
///////////////////////////////////
function clickIE4(){if (event.button==2){alert(message);return false;}} function clickNS4(e){if (document.layers||document.getElementById&&!document.all){if (e.which==2||e.which==3){alert(message);return false;}}} if (document.layers){document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS4;} else if (document.all&&!document.getElementById){document.onmousedown=clickIE4;} document.oncontextmenu=new Function("alert(message);return false")</script>


Kerugian Copas

1. Susah mendapatkan SERP tinggi di Google.
2. Tidak kreatif.
3. Tidak innovatif.
4. Tidak menghargai karya orang lain. Ya setidaknya bila ingin copas, ya edit total lah ya. Jangan sampai sama persis, apalagi hingga titik koma juga dicopas juga. Hadewh.

Bagikan ke teman-teman kamu

14 September 2022

Apakah Adsense Itu? Bagaimana sejarah berdirinya dan Kelebihannya

Apakah Adsense Itu? Bagaimana sejarah berdirinya dan Kelebihannya

Apakah itu Adsense? Bagaimana sejarah berdirinya dan Kelebihannya

ADSENSE Google. Beberapa dari kalian para blogger pasti sudah tidak asing dengan nama Adsense ya. Dikala Youtube dengan Youtubernya dengan penghasilan puluhan hingga ratusan juta dari Iklan, sejak itulah Adsense sering dibahas di blog-blog yang bertebaran di dunia maya. Simpelnya, Adsense adalah wadah para konten kreator entah itu dari Blog - dengan webnya - atau Youtube -dengan videonya- , untuk mendapatkan penghasilan berupa pundi-pundi dollar dari konten yang diuploadnya ke dunia maya.

Memang tidak dapat dipungkiri di jaman sekarang era Youtube, dimana peran video mendominasi dari segi Adsense, tapi bukan berarti kalian tidak dapat memafaatkan blog untuk meraih pundi-pundi dollar. Terus bagaimana caranya, bila kita ingin memonetisasi website kita untuk mendapatkan penghasilan dari internet. Yuk kita bahas disini sama-sama.



Apa itu AdSense?

AdSense atau Google AdSense merupakan sebuah platform iklan dan bagian dari jaringan periklanan yang dimiliki oleh Google.Inc. Platform ini memudahkan para publishernya untuk mendapatkan penghasilan dari websitenya. Para admin website hanya perlu menempelkan kode tertentu dari Adsense untuk ditampilkan dalam websitenya, begitu pula dalam memonetisasi video yang diunggahnya di Youtube.

Google AdSense dalam memasang sebuah iklan dari para partnernya, akan memilih iklan yang paling relevan berdasarkan dari konten dan traffic pengunjung sebuah website. Tapi tidak terbatas itu saja, terkadang iklan yang tidak begitu relevan juga bisa terpasang di blog atau website yang menjadi publisher iklan Google. Disini terdapat dua sisi yang saling menguntungkan satu sama lainnya, kita sebagai publisher memonetisasi iklan dengan memasarkan lewat website kita, sedangkan para pemasang iklan akan membayar sejumlah dollar kepada pihak Google sebagai induk utama Adsense, dan nanti berapa persen penghasilan dari iklan akan masuk ke kantong kita bila kita berhasil memasarkan produknya lewat website kita.

Penghasilan yang akan kita dapatkan juga bervariasi tergantung dari traffic blog dan juga CPC dari kata kunci yang ditargetkan ke pencarian Google.

Sejarah Google AdSense

Mula berdirinya Adsense pada waktu itu bernama "Content Targeting Advertising". Sedangkan nama AdSense merupakan adalah nama yang diadopsi oleh Google setelah beberapa tahun kemudian mengakuisisi Applied Semantics pada April 2003, 19 tahun silam.

Paul Buchheit sang pendiri Gmail, memiliki ide untuk menjalankan sebuah iklan dalam layanan email Google. Ide itu kemudian dikembangkan terus oleh Susan Wojcicki dan didukung oleh Sergey Brin, hingga menjadi produk yang sangat sukses waktu itu. Dikabarkan, berkat dua orang jenius tersebut, AdSense menyumbang sekitar 15% dari total pendapatan Google. Sungguh luar biasa bukan?

Kemudian pada tahun 2009, fitur terbaru Google AdSense adalah fitur untuk mengaktifkan beberapa jaringan untuk menampilkan iklan. Awal tahun 2010, perkembangan Google AdSense mulai menggunakan riwayat pencarian dalam pencocokan kontekstual untuk menawarkan iklan yang lebih relevan. Sekitar tahun 2014, Google AdSense meluncurkan Direct Campaigns, alat di mana penerbit atau publisher dapat langsung menjual iklan. Namun, fitur ini dihentikan pada 2015.

Keunggulan Google AdSense

Beberapa keunggulan Google AdSense adalah sebagai berikut:

1. Google AdSense merupakan layanan pengiklan online yang menyajikan iklan

Salah satu keunggulan dari Google AdSense adalah penyajian iklan yang disesuaikan dengan minat dari pengunjung website. Dengan kesesuaian ini, maka semakin besar peluang pengunjung untuk melakukan klik terhadap iklan yang ditampilkan.
Lalu, apa manfaatnya bagi kita? Tentu saja hal ini akan memancing orang untuk mengklik iklan di website kita karena iklan sudah relevan dengan isi artikel di website. Hal ini akan memperbesar pendapatan kita di kemudian hari.

2. Google AdSense memberikan kendali penuh terhadap iklan yang ditampilkan

Memegang kendali penuh atas jenis iklan yang ditampilkan di web atau platform blog. Kita diberikan kebebasan untuk menentukan iklan apa saja yang relevan dan mau ditempatkan dimana kita suka dan ditempatkan.

3. Google AdSense akan menampilkan iklan yang membayar tinggi

Iklan yang ditampilkan Google AdSense merupakan iklan yang membayar paling tinggi. Sebagai pemberi ruang iklan, dalam hal ini kita tentu diuntungkan. Google AdSense ingin memastikan bahwa kita memperoleh pendapatan yang memuaskan dari website kita.

4. Google AdSense memiliki dukungan berbagai format iklan

Keunggulan lainnya Google AdSense adalah dukungannya ke berbagai jenis format iklan yang ditampilkan. Beberapa format yang didukung antara lain adalah iklan teks, gambar, iklan HTML, iklan video, dan iklan ramah seluler/responsive.

5. Google AdSense memberikan pelaporan terbuka

Terakhir adalah Google AdSense unggul dalam hal pelaporan periklanannya. Google AdSense membuat laporan kinerja untuk memvisualisasikan penghasilan dan kinerja dari akun kita. Dia menawarkan keterbukaan tetapi tetap menjamin keamanan bagi pengiklan dan publisher seperti kita untuk mengiklankan dan memonetisasi konten mereka secara adil dan terbuka.

Cara kerja Google Adsense

Sebelum menggunakan Google AdSense, alangkah baiknya kita mempelajari dan memahami kinerjanya secara keseluruhan. Sehingga nanti kita akan mendapatkan gambaran sedikit tentang bagaimana kita dapat memperoleh penghasilan dari Adsense ini.

Cara kerja Google AdSense adalah seperti di bawah ini:

"Sebagai publisher, pemilik situs web, atau konten kreator YouTube perlu memiliki akun AdSense dengan cara mendaftar dan mendapatkan persetujuan dari Google. Pastikan telah mematuhi kebijakan yang telah ditentukan oleh AdSense."


"Setelah disetujui, kita perlu memasukkan kode kecil langsung di situs web dan AdSense akan secara otomatis mengisi ruang iklan di situs web kita dengan iklan yang paling relevan."


"AdSense memungkinkan pengiklannya bersaing untuk mendapatkan ruang di situs web berdasarkan konten yang kita miliki, serta seberapa besar kemungkinan mereka mendapatkan klik pada iklan mereka dari pengunjung."


"Terakhir, Google menentukan melalui "skor kualitas" pengiklan, melalui Click-Through Rate (CTR). Pengunjung situs web akan mulai mengklik iklan tersebut dan kita sebagai pemilik web akan dibayar untuk itu. Google AdSense bekerja berdasarkan biaya per klik dan bagi hasil. Yang perlu kita lakukan adalah menyiapkan strategi agar iklan tersebut mendapatkan klik sebanyak mungkin dari para visitor."


Terus bagaimana bila kita ingin mendaftar Adsense supaya blog kita bisa terpasangi iklan. Lha ini dibawah sudah ada tutorialnya.

Cara membuat akun Google AdSense

Buka browser.

Kunjungi https://www.google.com/adsense/start.

Klik Mulai.

Masuk ke Akun Google.

Halaman baru akan muncul. Masukkan URL web yang ingin menampilkan iklan yang benar, misalnya alifacode.com.

Pilih apakah ingin AdSense mengirimi bantuan yang disesuaikan dan saran kinerja. Kita dapat memilih opsi “Ya” agar kita dapat memaksimalkan AdSense.

Pilih negara atau wilayah pembayaran. Pastikan memilih negara/wilayah tempat tinggal saat ini.

Tinjau dan setujui Persyaratan dan Ketentuan AdSense.

Klik Mulai menggunakan AdSense.

Selesai. Sekarang kita telah masuk ke akun AdSense baru yang telah kita daftarkan barusan. Blog dan website kita siap mendatangkan cuan. :D . Salam Blogger. Salam Adsense.

Bagikan ke teman-teman kamu

12 September 2022

Tutorial Membuat Border Garis Bergradient Warna Warni

Tutorial Membuat Border Garis Bergradient Warna Warni

Tutorial Membuat Border Garis Bergradient Warna Warni

BORDER garis bergradient warna warni adalah garis yang 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. Border garis yang akan saya berikan tutorialnya ini memang tidak jauh dari CSS. 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 border pada sebuah garis atau obyek. Nantinya obyek itu akan berbentuk oval dan bergradient warna. 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.



Pada prakteknya kita hanya membutuhkan sebuah property yaitu Transform Translate. Silakan buka di www.w3.org untuk lebih lanjut tentang beberapa property CSS3. Disana sudah lengkap dan kalian tinggal mempelajari, saya hanya memberikan tutorial singkatnya saja. Nanti ada Metode 1 dan Metode 2 yang akan saya berikan. Metode 1 dengan sudut lancip pada obyeknya dan bergradient, sedangkan pada Metode 2 adalah sudut tumpul pada obyek bergradient-nya.

Yuk mulai saja tutorialnya :

Membuat Border Garis Bergradient Warna Warni


Metode 1


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
*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
.box{
	height: 300px;
	width: 300px;
	border: 15px solid transparent;
	position: absolute;
	transform: translate(-50%,-50%);
	top: 50%;
	left: 50%;
	border-image:-webkit-gradient(
				linear,
				right top,
				left top,
				from(#ff4b2b),
				to(#ff416c)
			); 
	border-image:linear-gradient(to right, #ff4b2b,#ff416c);
	border-image-slice:1;
	font-size: 30px;
	text-align: center;
	font-family: 'Poppins',sans-serif;
	padding: 110px 0;
}


Catatan :
Untuk memunculkan garis bergradient warna warni maka mesti ditulis seperti ini
Metode 1 : <div class="box">Metode 1</div>
Metode 2 : <div class="box">Metode 2</div>


Metode 2


1. Masih sama, masuk ke Tema dulu
2. Terus pilih Sesuaikan : Edit HTML pada tahap ini kita akan dibawa menuju ke template
3. Kemudian cari kode ]]></b:skin> dan tempelkan kode dibawah ini diatas kode ]]></b:skin> tersebut
*,
*:before,
*:after{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
.box{
	height: 300px;
	width: 300px;
	background-color: white;
	position: absolute;
	margin: auto;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	font-family: 'Poppins',sans-serif;
	font-size: 30px;
	text-align: center;
	padding: 130px 0;
	border-radius: 15px;
}
.box:before{
	position: absolute;
	content: "";
	height: 120%;
	width: 120%;
	background-image: -webkit-linear-gradient(
        to bottom right,
        #ff4b2b,
        #ff416c
		);
	background-image: linear-gradient(
        to bottom right,
        #ff4b2b,
        #ff416c
		);
	left: -10%;
	top: -10%;
	z-index: -1;
	border-radius: 15px;
}


Nah sekarang sudah jadi khan. 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. 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. "Kamu tidak tahu apa yang ada di depan, jadi nikmati saat ini dan hargai setiap momen kehidupan. "Dalam hidup, setiap momen dipenuhi dengan kebahagiaan yang hanya perlu kamu lihat dan nikmati." Salam.

Bagikan ke teman-teman kamu
Cara Memodifikasi Tombol Button Bentuk Love Buah Hati

Cara Memodifikasi Tombol Button Bentuk Love Buah Hati

Modifikasi Tombol Button Bentuk Love Buah Hati

TOMBOL Button bentuk love atau buah hati adalah button menuju link yang dimodifikasi menyerupai buah hati berwarna merah muda atau pink. Kreasi ini menjadi unik karena tidak seperti umumnya bentuk button yang sering dipasang pada postingan di kebanyakan blog.

Button ini biasanya berisi Link menuju ke URL artikel ke blog kita atau kita sering sebut Internal Link, tapi bisa juga menuju ke URL artikel atau URL blog lain dan bisa kita sebut dengan eksternal link. Dengan bentuk button love ini semakin kreatif anchor link yang dipergunakan pada artikel blog.



Perpaduan warna cerah antara merah muda dan merah hati membuat button ini sangat menarik untuk dipasang dan dikreasikan di blog. Terlebih lagi bila dipasang pada artikel yang menyangkut tentang kasih sayang, mungkin ikon button ini semakin menarik lagi. Coba kalian nanti praktekkan yang sudah saya buat tutorialnya ini.

Pada button bentuk lain seperti oval juga sering dipasang pada postingan blog. Seperti yang kalian lihat pada blog ini pada 'DEMO'. Button berbentuk oval memanjang horizontal dengan warna merah muda atau hati. Lumayan stylish untuk ukuran sebuah button bukan?

Terus bagaimana mengaplikasikan bentuk button ini ke postingan blog. Saya akan membantu menerapkan beberapa kode CSS dan HTML untuk dipadukan pada postingan guna menampilkan button yang sangat indah ini. Langsung saja ya ke tutorialnya.

Modifikasi Tombol Button Bentuk Love Buah Hati


1. Seperti biasa masuk saja ke Tema
2. Terus pilih Sesuaikan : Edit HTML pada tahap ini kita akan dibawa menuju ke template
3. Lalu cari kode ]]></b:skin> dan tempelkan kode dibawah ini diatas kode ]]></b:skin> tersebut
body{background-color:#DEB887;padding:0;margin:0;}
input[type="checkbox"]{-webkit-appearance:none;appearance:none;height:120px;width:120px;background:linear-gradient(
to top,#fafafa,#d0d3d8);position:absolute;margin:auto;top:0;bottom:0;left:0;right:0;border-radius:50%;cursor:pointer;outline:none;}
input[type="checkbox"]:before{position:absolute;content:"";height:180px;width:180px;background:linear-gradient(
to bottom,#fafafa,#d0d3d8
);border-radius:50%;z-index:-1;bottom:-30px;left:-30px;box-shadow:0 10px 15px rgba(0,0,0,0.1);}
input[type="checkbox"]:after{position:absolute;content:"";height:210px;width:210px;background:#d6dce3;bottom:-45px;left:-45px;z-index:-2;border-radius:50%;box-shadow:inset 0 0 8px rgba(0,0,0,0.2);}
label{position:absolute;transform:translate(-50%,-50%);top:50%;left:50%;}
label >.fas{font-size:50px;color:#a8aaba;}
input[type="checkbox"]:checked + label >.fas{color:#fe5190;}
input[type="checkbox"]:checked:after{background:linear-gradient(-135deg,#fcace3,#fe5190);}


4. Pilih Tata Letak yang ada di Dashboard Blogger dan masukkan kode dibawah ini di konten Tambah HTML/Javascript disitu. Ini kodenya
<input type="checkbox"id="checkbox"><label for="checkbox"><i class="fas fa-heart"></i></label>




Dan setelah itu semua dilakukan, saatnya save pekerjaan kamu ya. Supaya itu tampil sempurna, teliti lagi kodenya jangan sampai ada yang salah atau keliru taruh. Karena tidak akan tampil bila itu terjadi. Inilah penjelasan dari tutorial membuat Tombol Button Bentuk Love Buah Hati . Lumayan mudah bukan, tinggal copas saja itu kode dan taruh di blog kamu. Terima kasih untuk kalian semua yang sudah mau mampir kesini dan membaca artikel Modifikasi Tombol Button Bentuk Love Buah Hati. Seperti kata orang tua jaman dahulu ya, bahwa teori tanpa praktek adalah hal yang mustahil. Jadi tetaplah semangat. Dan jangan lupa tetap berkreasi apapun yang menjadi inspirasi, karena esok hari akan menanti. Salam.

Bagikan ke teman-teman kamu
Membuat Pencatat Waktu Selain Stop Watch dengan CSS3

Membuat Pencatat Waktu Selain Stop Watch dengan CSS3

Pencatat Waktu Stop Watch dengan CSS3

STOP Watch atau Pencatat Waktu dapat kita temui semisal pada perlombaan lari jarak pendek atau Sprint. Sang juri memegang sebuah alat seperti arloji sebagai pencatat waktu sang pelari sampai ke garis finish. Alat itu penting sekali mengingat selisih sekian mili detik saja sudah menimbulkan dampak yang cuku[ signifikan. Tapi saat ini, bukan stop watch itu yang saya bicarakan. Tapi kali ini saya akan membahas bagaimana membuat Membuat Waktu Stop Watch dengan CSS3.

Dalam aplikasi yang banyak digunakan itu, kita tahu bahwa pencatat waktu sangat penting untuk menentukan keakuratan waktu yang diperlukan pada si pelari untuk mencari garis finish pertama kali mendahului lawan-lawannya. Dari situ bisa tercatat waktu berapa menit dan berapa detik sampai milidetik. Cukup mudah digunakan, tapi sangat besar manfaatnya. Dengan trik CSS3 kali ini, hal itu akan kita wujudkan.



Pada tutorial kali ini saya akan berbagi cara untuk membuat Stop Watch atau Pencatat Waktu dengan CSS3, dimana hasil dari stop watch ini tidak menggunakan seperti aplikasi online tetapi menggunakan bahasa pemrograman Cascading Style Sheet / CSS. Menarik bukan?

Tujuan dengan pembuatan ini adalah ketika kita ingin mencatat waktu, maka kita tinggal melihat blog kita saja : bisa lewat HP dan kebanyakan jaman sekarang memang orang menggunakan HP untuk melihat sebuah blog ketimbang lewat desktop. Tinggal pencet Mulai dan berakhir dengan Berhenti kemudian kita bisa mencatat berapa waktu yang diperlukan untuk menyelesaikan tugas itu.

Okelah tidak lama-lama lagi ya kita ngobrolnya. Kita mulai saja praktek hari ini membuat koding simple ini dan bisa kalian praktekkan di blog kalian nantinya. Supaya blog kalian ada stop watchnya iya khan? :D

Pencatat Waktu Stop Watch dengan CSS3


1. Seperti biasa kita masuk dulu ke Tema
2. Lalu pilih Sesuaikan : Edit HTML dan masuklah kita ke dapur template
3. Cari kode ]]></b:skin> dan tempelkan kode dibawah ini diatas kode ]]></b:skin> tersebut
*,*:before,*:after{padding:0;margin:0;box-sizing:border-box;}
.container{background:linear-gradient(90deg,rgba(8,131,235,1) 0%,rgba(14,159,173,1) 50%,rgba(13,235,184,1) 100%);width:40%;min-width:500px;position:absolute;transform:translate(-50%,-50%);top:50%;left:50%;padding:60px 0;border-radius:10px;}
.timerDisplay{position:relative;width:110%;background:#008B8B;left:-5%;padding:40px 0;font-family:'Roboto mono',monospace;color:#ffffff;font-size:40px;display:flex;align-items:center;justify-content:space-around;border-radius:5px;box-shadow:0 0 20px rgba(0,139,253,0.25);}
.buttons{width:80%;margin:60px auto 0 auto;display:flex;justify-content:space-around;}
.buttons button{padding:10px 20px;background-color:#ffffff;color:#141313;border:none;font-family:'Poppins',sans-serif;font-size:18px;border-radius:5px;cursor:pointer;outline:none;}


4. Masuk ke Tata Letak dan taruh kode dibawah ini di halaman kosong disitu dan kemudian simpan.
<div class="container"><div class="timerDisplay">00:00:00:000</div>
<div class="buttons">
<button id="startTimer">Mulai</button>
<button id="pauseTimer">Berhenti</button>
<button id="resetTimer">Set Awal</button></div></div>


5. Kita tambahkan kode javascriptnya ya. Masuk lagi ke Template dan cari kode </body> dan taruh kode dibawah ini diatas kode </body>. Jangan salah taruh ya nanti tidak dapat muncul stop watchnya.
<script type='text/javascript'>
//<![CDATA[  
let [milliseconds,seconds,minutes,hours] = [0,0,0,0];let timerRef = document.querySelector('.timerDisplay');let int = null;document.getElementById('startTimer').addEventListener('click',()=>{if(int!==null){clearInterval(int);}
int = setInterval(displayTimer,10);}
);document.getElementById('pauseTimer').addEventListener('click',()=>{clearInterval(int);}
);document.getElementById('resetTimer').addEventListener('click',()=>{clearInterval(int);[milliseconds,seconds,minutes,hours] = [0,0,0,0];timerRef.innerHTML = '00:00:00:000 '}
);function displayTimer(){milliseconds+=10;if(milliseconds == 1000){milliseconds = 0;seconds++;if(seconds == 60){seconds = 0;minutes++;if(minutes == 60){minutes = 0;hours++;}};}
let h = hours <10 ? "0"+ hours:hours;let m = minutes <10 ? "0"+ minutes:minutes;let s = seconds <10 ? "0"+ seconds:seconds;let ms = milliseconds <10 ? "00"+ milliseconds:milliseconds <100 ? "0"+ milliseconds:milliseconds;timerRef.innerHTML = ` ${h;}
:${m;}
:${s;}
:${ms;}
`;}
//]]>
</script>


Dan terakhir lihat di blog kamu. Atau kalian bisa lihat dulu di hasil akhir di blog contoh dibawah ini



Oke itu saja yang dapat saya sampaikan hari ini. Saya membuat ini disela waktu ya. Jadi jika ada kata dan kalimat yang tidak sesuai mohon dimaafkan. Disela waktu saya kerjakan, karena pagi hingga sore saya kerja di Rumah Sakit swasta di Kota Magelang. Yups, setelah itu semua dipraktekkan, waktunya simpan pekerjaan kamu ya. Supaya tampil maksimal, mohon teliti lagi kodenya jangan sampai ada yang salah atau keliru taruh. Karena tidak akan tampil bila itu terjadi. Inilah penjelasan dari tutorial membuat Pencatat Waktu Stop Watch dengan CSS3.

Lumayan mudah bukan, tinggal copas saja itu kode dan taruh di blog kamu. Terima kasih untuk kalian semua yang sudah mau mampir kesini dan membaca artikel Pencatat Waktu Stop Watch dengan CSS3. Hidup hanya sekali, maka pergunakanlah waktu singkat ini dengan ilmu yang mumpuni. Karena esok hari akan menyambut kita dengan riang hati. Sorak sorai burung menari menyambut mentari, menghiasi taman hati untuk diri kita sendiri. Selamat berkreasiii. Salam.

Bagikan ke teman-teman kamu

11 September 2022

Cara Memasang Breaking News Responsive di Blog

Cara Memasang Breaking News Responsive di Blog

Breaking News Responsive dengan CSS3

BREAKING News adalah sepenggal berita pilihan yang tampil dalam sesi pembacaan berita utuh pada sebuah media komunikasi. Kehadirannya membuat para penonton tahu akan berita yang sedang hangat atau viral baik di media sosial, media elektronik atau media lainnya. Keberadaan Breaking News ini sangat penting untuk ditampilkan di segala media komunikasi atau berita.

Fungsi Breaking News pada Blog adalah sebagai pemberi info artikel yang sedang trending atau trending news di blog tersebut. Dengan adanya Breaking News, para visitor blog dapat segera tahu apa saja artikel yang menjadi populer di blog yang sedang dibacanya. Sehingga ketika berselancar, paling tidak para visitor sudah tahu inti dari berita yang disampaikan lewat Breaking News. Hingga mereka tidak merasa kerepotan lagi.

Widget Breaking News ini biasanya tampil pada blog yang berisikan dengan tema berita, seperti berita daerah, berita nasional maupun berita mancanegara. Kehadirannya sangat membantu sekali dalam memberikan info sekilas, dan sepertinya widget Breaking News pada blog dengan niche berita memang sangat vital keberadaannya.



Sudah banyak blog yang menyisipkan widget ini, dari segi penampilan berbeda dari yang lainnya, penempatan juga berbeda dan bisa dimodifikasi tergantung kreasi dari si pemilik blog itu sendiri. Dan disini, saya akan memberikan sedikit tutorial penempatan breaking news di blog supaya tampil memikat dan bisa memberikan info sebanyak mungkin dan bermanfaat bagi pengguna.

Breaking News Responsive dengan CSS3


1. Masuk ke Tema
2. Kemudian pilih Sesuaikan : Edit HTML dan masuk kita ke template
3. Cari kode </head> dan tempelkan kode dibawah ini diatas dari kode </head> tersebut. Jangan sampai salah taruh sekali lagi ya, saya mengingatkan. Soalnya ini vital, sekali salah taruh tidak dapat muncul nanti breaking newsnya.
<style type='text/css'>
#breaking-newsticker{margin:15px 0;position:relative}
#post_breakingnews{position:relative;z-index:9;overflow:hidden;padding:8px;width:100%!important;box-sizing:border-box;box-shadow:0 5px 5px -5px #3339}
.breakingnewstitle{float:left;background-color:#008B8B;color:#fff;padding:7px 10px;font-weight:bold;border-radius:4px;text-transform:uppercase;position:relative}
.breakingnewstitle:after{height:0;width:0;position:absolute;content:&quot; &quot;;pointer-events:none;margin-top:1px;border-left:13px solid #008B8B;border-top:10px solid transparent;border-bottom:10px solid transparent;-moz-transform:scale(.9999);margin-left:9px;z-index:9}
.breakingnews marquee{width:80%;position:absolute}
@media screen and (max-width:800px){.breakingnews marquee{width:70%}}
@media screen and (max-width:500px){.breakingnews .breakingnewstitle{width:90px;font-size:11px;font-weight:normal}.breakingnews .breakingnewstitle:after{content:none}.breakingnews marquee{width:55%}}
.breakingnews marquee a{color:#1893fc;margin:0 15px;line-height:2}
#post_breakingnews .breakingnews{width:1120px;max-width:100%;margin:0 auto}
</style>
<script type='text/javascript'>
var url_breaking = &quot;https://alifacode.com&quot;;
var jumlah_post = 10;
var marquee_speed = &quot;5&quot;;
var close_button = false;
var info_text = true;
</script> 


4. Setelah itu dilakukan saatnya kita taruh kode berikut ini diatas kode </body>, kodenya dibawah ini ya
<script src='https://rawcdn.githack.com/Alifacode/backupmaster/f600d04db923a9da3f164584a8493e9e8bc488af/breakingnews.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
document.getElementById("breaking-newsticker").appendChild(document.getElementById("post_breakingnews"));
//]]>
</script>


5. Baru kemudian save ya pekerjaan kamu. Dan untuk menampilkan widget breaking news, maka kita menambahkan kode berikut ini di blog kita di Tata Letak dan taruh di konten kosong disitu.
<div id='breaking-newsticker'/>


Save lagi untuk terakhir kalinya dan sudah tampil itu di blog kamu.

Catatan :
Kata yang dibackground merah muda : https://alifacode.com diganti dengan URL blog kamu
Jumlah post = 10, diganti dengan berapa jumlah post yang kamu suka
Marquee Speed = 5, diganti dengan kecepatan jalan breaking newsnya


Itulah yang dapat saya sampaikan pada tutorial Breaking News Responsive dengan CSS3 kali ini. Semoga berkenan dan dapat berjalan tanpa hambatan breaking newsnya di blog kamu ya. Sekian dan terima kasih. Yesterday is a history, tomorrow is a mistery and today is a gift.

Bagikan ke teman-teman kamu