Cara Memasang HTML5 Game Online Untuk Blogger

Memasang game HTML5 internet web browser online di blog, wordpress atau website diharapkan bisa membuat betah pengunjung berlama lama di situs anda. Cara ini juga merupakan salah satu trik guna meningkatkan traffic dan menurunkan rasio bounce rate situs.

Game internet web browser mudah dimainkan tanpa perlu diunduh dan dipasang, cukup menggunakan browser untuk bisa mulai memainkan game berbasis HTML5 dengan gratis. Game internet browser dapat menjadi sebuah hiburan yang menyenangkan untuk pengisi waktu senggang dan juga bisa menjadi salah satu solusi praktis untuk menghilangkan kejenuhan.

Game internet browser telah banyak mengalami peningkatan baik dari sisi grafis maupun dari sisi gameplay. Browser terbaru jaman sekarang sudah banyak mengalami peningkatan sehingga mampu menjalankan game 2D dan 3D dengan baik. Genre dari game browser sudah sangat beragam mulai dari game yang ringan sampai game massive RPG online.

Umumnya agar bisa memainkan game internet browser, pengunjung hanya perlu mengunjungi situs penyedia game internet browser. Nah agar situs web atau blog anda bisa memiliki fitur game internet browser anda cukup meng-embed game internet browser yang sekiranya dapat menarik minat pengunjung terhadap game tersebut.

Oke, secara default admin sudah siapkan widget game internet browser, jika hanya menggunakan embed maka hanya satu game yang bisa diperlihatkan pada satu halaman blog dan itupun cukup memakan ruang halaman blog, maka dari itu admin sudah persiapkan widget game yang mampu menampung banyak game pada satu halaman blog dengan tampilan widget yang kekinian dan super premium.

Tenang widget game ini hanya menampilkan daftar permainan jadi tidak akan memberatkan loading blog anda, ketika pengunjung sudah memilih game yang ingin dimainkan baru kode embed game mulai di streaming.

Sebagai contoh untuk widget game seperti yang terlihat di bawah ini.

Hex-GL Race

Play Game

Widget game codeflare memiliki tampilan yang sudah responsive dan juga mudah dalam pemasangan dan konfigurasi kode script. Adapun fitur-fitur premium pendukung lainnya sebagai berikut.

Bisa di custom untuk menampilkan daftar permainan yang banyak.
Full responsive sehingga bisa ditampilkan pada berbagai perangkat pengguna.
Menggunakan inline box window sehingga dapat menurunkan rasio bounce rate situs atau blog.
Tampilan widget daftar game bisa ditempatkan pada sidebar blog dengan ukuran 250px sampai 400px.
Penambahan atau pengurangan daftar game dapat dengan mudah dikonfigurasi.
Random preview agar widget terlihat atraktif dan dinamis.

Gimana sobat blogger, tertarik untuk memasang widget game online browser ini ? oke buat yang berminat langsung aja menuju tutorial pemasangan widget di bawah ini. Jangan lupa untuk like, comment dan subscribe yaa agar bisa saling kunjung dan berdiskusi lebih lanjut seputar blogging.

Informasi Singkat

Game browser adalah video game yang dimainkan melalui World Wide Web menggunakan browser web. Game-game ini menjangkau semua genre dan bisa single-player atau multi-player. Mereka biasanya free-to-play.

Beberapa game browser juga tersedia dalam bentuk lain: sebagai aplikasi seluler, game PC, atau di konsol. Bagi pengguna, keuntungan dari versi browser adalah tidak harus menginstal game; browser secara otomatis mengunduh konten yang diperlukan dari situs web game. Namun, versi browser mungkin memiliki lebih sedikit fitur atau grafik yang lebih rendah dibandingkan dengan yang lain, yang biasanya merupakan aplikasi asli.

Ujung depan game browser adalah apa yang berjalan di browser pengguna. Ini diimplementasikan dengan teknologi web standar HTML, CSS, JavaScript, dan WebAssembly. Selain itu, WebGL memungkinkan grafik yang lebih canggih. Di bagian belakang, banyak teknologi server dapat digunakan.

Di masa lalu, banyak game dibuat dengan Adobe Flash, tetapi tidak dapat lagi dimainkan di browser utama, seperti Google Chrome, Safari, dan Firefox. Beberapa game ini telah disimpan dalam aplikasi khusus.

Sumber : Wikipedia

DAFTAR ISI

Cara Pemasangan Widget Pada Blogger

Contoh Penggunaan Widget Pada Blogger

Cara Mendapatkan Alamat URL iFrame Game

#1 Cara Pemasangan Widget Pada Blogger

Pemasangan kode widget game online cukup mudah bisa di copy-paste secara manual bisa juga dengan menekan tombol Add to Blogger yang berada di bawah kotak kode ini. Widget game online bisa dipasang sebagai widget blog bisa juga diletakan di dalam artikel blog.

PERINGATAN

Perhatian ! jangan lupa untuk memasang plugin jQuery terbaru, jQuery UI dan FontAwesome 4.7 agar kode javascript dan icon bisa berfungsi dengan baik. Jika anda menggunakan custom domain atau platform blog selain blogspot maka anda perlu mendownload ketiga plugin tersebut, kemudian taruh ke dalam platform website server atau blog yang anda gunakan.

Login ke blogspot untuk masuk ke dashboard blog.
Pilih Tata Letak kemudian pilih Tambahkan Gadget.
Pilih HTML/Javascript
Taruh kode pada kotak widget, setelah selesai tekan tombol Save

<style>
.boxMainUIGame{width:100%;position:relative;}
.mainFrmGame{background:#f5f5f5;height:320px;line-height:inherit;padding:5px;border:1px solid #0083da;}
.mainFrmGame,.headerFrmGame,.leftHeaderGame,.titleHeaderGame,.rightHeaderGame,.footerFrmGame{
display:block;
}
.boxMainUIGamePlay{
border:1px solid #0083da;
margin:0;
padding:0;
}
.mainFrmGame{font-family:'Roboto',sans-serif;}
.headerFrmGame{
font-size:16px;
font-weight:600;
height:30px;
position:relative;
padding:0;
color:#fff;
cursor:pointer;
}
.leftHeaderGame{border-radius:5px 0 0 0;}
.rightHeaderGame{border-radius:0 5px 0 0;}
.leftHeaderGame,.rightHeaderGame{
width:10%;
transition: color .3s, background-color .3s linear .3s;
}
.rightMenuGameClose{
width:5%;
transition: color .3s, background-color .3s linear .3s;
}
.leftHeaderGame,.titleHeaderGame,.rightHeaderGame,.titleHeaderGamePlay,.rightMenuGameClose{
float:left;
box-sizing:border-box;
padding-top:6px;
text-align:center;
background:#0083da;
}
.leftHeaderGame,.titleHeaderGame,.rightHeaderGame,.titleHeaderGamePlay,.rightMenuGameClose{height:30px;}
.leftHeaderGame,.rightHeaderGame,.rightMenuGameClose{color:#fff;}
.titleHeaderGame{width:80%;}
.titleHeaderGamePlay{width:95%;}
#gameSourceIframe{border:none;overflow:hidden;box-sizing:border-box;margin:0;padding:0;z-index:+9999;background:#ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYnSXC9RAhc4elYdkTUW3lZMp8zALX-NstZQg9PQcJqHQPainuS0pY9M5yr7vDY0X-783q1XdbM4BXJmhsNoVl-UdvOPt31Yabm9Sxo1ECr30adTnw2HSWm8G9RK0q3KzLM8eEnJWZ3QQ/s0/ajax_loader.gif)no-repeat center center;}
#contentGamePlay{width:100%;height:100%;box-sizing:border-box;display:inline-block;}

/* Content Image Game */
.imgCFGame img{
position:absolute;
left: 50%;
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
animation:flyHoverCFGame 2s ease infinite;
}
.contentGame{
background: linear-gradient(270deg, #a14f4f, #a19f4f, #4fa159, #4fa0a1, #4f51a1, #834fa1, #a14f85, #8c8c8c);
background-size: 1600% 1600% !important;
-webkit-animation: AnimationName 20s ease infinite;
-moz-animation: AnimationName 20s ease infinite;
-o-animation: AnimationName 20s ease infinite;
animation: AnimationName 20s ease infinite;
}

/* Content Form Game */
.contentFrmGame,.imgCFGame{margin:0;width:100%;height:260px;}
.contentFrmGame{
position:relative;
display:block;
overflow:hidden;
}

/* Footer Form Style */
.leftfooterFrmGame{
text-align:center;
height:30px;
padding:5px 0;
box-sizing:border-box;
cursor:pointer;
border-radius:0 0 5px 5px;
}

/* Animasi */
@-webkit-keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@-o-keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@keyframes AnimationName {
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@keyframes flyHoverCFGame{0%,100%{top:calc(50% - 10px);}50%{top:calc(50% + 20px);}}
.headerFrmGame:hover > .leftHeaderGame,.headerFrmGame:hover > .rightHeaderGame,.headerFrmGame:hover > .rightMenuGameClose {background:orange;color:#000;}
.headerFrmGame:hover > .rightMenuGameClose {background:red;color:#000;}
.rightHeaderGame:hover > i,.leftHeaderGame:hover > i, .leftDateAst:hover > i,.rightDateAst:hover > i,.rightMenuGameClose:hover > i{
-webkit-animation: scaleDir .7s linear infinite;
animation: scaleDir .7s linear infinite;
}
#fBtnGamePlay:hover > i{-webkit-animation: rotate-scale-up-hor 0.65s linear both;animation: rotate-scale-up-hor 0.65s linear both;}
#fBtnGamePlay:hover::before, #fBtnGamePlay:focus::before, #fBtnGamePlay:active::before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
border-radius:0 0 5px 5px;
}

/* Button Game Play */
#fBtnGamePlay:active,#fBtnGamePlay:focus{top:1px;}
#fBtnGamePlay:hover{color:#333;}
#fBtnGamePlay::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:orange;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
#fBtnGamePlay{
color:#fff;
font-size:16px;
font-weight:600;
float:left;
background:#0083da;
width:100%;
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
position: relative;
text-decoration:none;
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}

/* Custom Background Image */
.contentGame0{
background-color:transparent;
background-position:center center;
background-size:14px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='rgb(40,40,40)' viewBox='0 0 100 169.5'%3E%3Cpolygon points='50,34.75 93.5,59.75 93.5,109.75 50,134.75 6.5,109.75 6.5,59.75'%3E%3C/polygon%3E%3Cpolygon points='0,-50 43.5,-25 43.5,25 0,50 -43.5,25 -43.5,-25'%3E%3C/polygon%3E%3Cpolygon points='100,-50 143.5,-25 143.5,25 100,50 56.5,25 56.5,-25'%3E%3C/polygon%3E%3Cpolygon points='0,119.5 43.5,144.5 43.5,194.5 0,219.5 -43.5,194.5 -43.5,144.5'%3E%3C/polygon%3E%3Cpolygon points='100,119.5 143.5,144.5 143.5,194.5 100,219.5 56.5,194.5 56.5,144.5'%3E%3C/polygon%3E%3C/svg%3E");
}
</style>

<div class="boxMainUIGame">

<div class="mainFrmGame">
<div class="headerFrmGame">
<div id="leftMenuGame" class="leftHeaderGame"><i class="fa fa-chevron-left" aria-hidden="true"></i></div>
<div class="titleHeaderGame"><div id="titleHeaderGame"><i class="fa fa-space-shuttle" aria-hidden="true"></i> Hex-GL Race</div></div>
<div id="rightMenuGame" class="rightHeaderGame"><i class="fa fa-chevron-right" aria-hidden="true"></i></div></div>
<div id="frmGameElement" class="contentFrmGame"></div>
<div class="footerFrmGame">
<div id="fBtnGamePlay" class="leftfooterFrmGame" onclick="startBoxGamePlay()";>Play Game <i class="fa fa-caret-right" aria-hidden="true"></i></div>
</div></div>

</div>
<div id="boxMainUIGamePlay" class="boxMainUIGamePlay" style="display:none;">
<div class="headerFrmGame">
<div class="titleHeaderGamePlay"><div id="titleHeaderGameText"></div></div>
<div id="rightMenuGameClose" class="rightMenuGameClose" onclick="closeBoxGamePlay()" title="Close Game Box"><i class="fa fa-times" aria-hidden="true"></i></div></div>
<div id="contentGamePlay">
<iframe id="gameSourceIframe" src="" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" allowfullscreen><p>Your browser does not support iframes.</p></iframe>
</div></div>

<script>
//<![CDATA[
var cfGameSrc = new Array();var cfGameImg = new Array();var contentAPTGame=new Array();var cfGameBgImg=new Array();

/* Game Image */
cfGameImg[0]="URL image 1";
cfGameImg[1]="URL image 2";
cfGameImg[2]="URL image 3";

/* Game Background Image */
cfGameBgImg[0]="class name for bg 1";
cfGameBgImg[1]="class name for bg 2";
cfGameBgImg[2]="class name for bg 3";

/* Game iFrame URL */
cfGameSrc[0]="URL iFrame Game Source 1";
cfGameSrc[1]="URL iFrame Game Source 2";
cfGameSrc[2]="URL iFrame Game Source 3";

/* Game Menu Text Navigation */
contentAPTGame[0]='<i class="fa fa-space-shuttle" aria-hidden="true"></i> Nama Game 1';
contentAPTGame[1]='<i class="fa fa-motorcycle" aria-hidden="true"></i> Nama Game 2';
contentAPTGame[2]='<i class="fa fa-motorcycle" aria-hidden="true"></i> Nama Game 3';

/* Form Game Code */
for(var frmGameElm=0;frmGameElm < cfGameImg.length;frmGameElm++){
$('#frmGameElement').append('<div id="contentGame'+frmGameElm+'" style="display:none;"><div class="imgCFGame"><img src="'+cfGameImg[frmGameElm]+'"/></div></div>')
if(cfGameBgImg[frmGameElm]=="" || cfGameBgImg[frmGameElm]==undefined || cfGameBgImg[frmGameElm]==null){
$("#contentGame"+frmGameElm).addClass('contentGame');
}else{$("#contentGame"+frmGameElm).addClass(cfGameBgImg[frmGameElm]);}}
function posGameScreenWidth(w){
var width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
var left = (Math.floor((width/2)) - Math.floor((w/2)));
return left;
}
function posGameScreenHeight(h){
var height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;
var top = (Math.floor((height/2)) - Math.floor((h/2)));
return top;
}
var gameSrcPlayNow='';
function startBoxGamePlay(){
if(clearRandomGameAppCard==true){clearTimeout(showRandomGameAppCard);clearRandomGameAppCard=false;}
if(gameSrcPlayNow!=$("#gameSourceIframe").prop('src')){$("#gameSourceIframe").attr("src","");}
$("#fBtnGamePlay").attr("onclick","");
disabledAppGameNav();
for(var i=0;i < cfGameSrc.length;i++){
if(contentAPN1Game==i){$("#gameSourceIframe").attr("src",cfGameSrc[i]);}
}
centerBoxGamePlay();
$("#boxMainUIGamePlay").slideDown("slow");
gameSrcPlayNow=$("#gameSourceIframe").prop('src');
}
function closeBoxGamePlay(){
enableAppGameNav();
$("#boxMainUIGamePlay").slideUp();
$("#contentGamePlay").html();
$("#fBtnGamePlay").attr("onclick","startBoxGamePlay()");
$("#gameSourceIframe").attr("src","");
if(clearRandomGameAppCard==false){showRandomGameAppCard=setTimeout(showRandomGameCard, 10000);clearRandomGameAppCard=true;}
}
window.addEventListener("resize", centerBoxGamePlay);
function centerBoxGamePlay() {
var width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
var height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;
if(width <= 800 || height <= 600){
var leftX=posGameScreenWidth(width);
var topY=posGameScreenHeight(height);
var sw=(window.innerWidth-$(window).width());
$("#gameSourceIframe").css({"width":width-sw+"px","height":height-32+"px"});
$("#boxMainUIGamePlay").css({"width":width-sw+"px","height":height-2+"px","position":"fixed","top":topY+"px","left":leftX+"px","z-index":"+9999999999999999999999999"});
}else{
var wx=0;var wy=0;
if(contentAPN1Game==8){
wx=900;wy=610;
var leftX=posGameScreenWidth(wx);
var topY=posGameScreenHeight(wy);
}else{
wx=800;wy=600;
var leftX=posGameScreenWidth(wx);
var topY=posGameScreenHeight(wy+10);
}
$("#gameSourceIframe").css({"width":wx+"px","height":wy-30+"px"});
$("#boxMainUIGamePlay").css({"width":wx+"px","height":wy+"px","position":"fixed","top":topY+"px","left":leftX+"px","z-index":"+9999999999999999999999999"});
}}
var contentAPN1Game=0;var contentAPN2Game=0;var contentAPN3Game=0;
function navPageLeftGame(){
if(clearRandomGameAppCard==true){clearTimeout(showRandomGameAppCard);clearRandomGameAppCard=false;}
if(contentAPN1Game == contentAPTGame.length-1){contentAPN2Game=0;}else{contentAPN2Game=contentAPN1Game+1;}
$("#contentGame"+contentAPN1Game).hide("slide",{direction : 'left'}, 500);
$("#titleHeaderGame").hide("slide",{direction : 'left'}, 500,
function (){$("#titleHeaderGame,#titleHeaderGameText").html(contentAPTGame[contentAPN2Game]);});
$("#contentGame"+contentAPN2Game).delay(800).show("slide",{direction : 'right'}, 500,);
$("#titleHeaderGame").delay(300).show("slide",{direction : 'right'}, 500);
contentAPN1Game=contentAPN2Game;
if(clearRandomGameAppCard==false){showRandomGameAppCard=setTimeout(showRandomGameCard, 10000);clearRandomGameAppCard=true;}
}
function navPageRightGame(){
if(clearRandomGameAppCard==true){clearTimeout(showRandomGameAppCard);clearRandomGameAppCard=false;}
if(contentAPN1Game == 0){contentAPN2Game=contentAPTGame.length-1;}else{contentAPN2Game=contentAPN1Game-1;}
$("#contentGame"+contentAPN1Game).hide("slide",{direction : 'right'}, 500);
$("#titleHeaderGame").hide("slide",{direction : 'right'}, 500,
function (){$("#titleHeaderGame,#titleHeaderGameText").html(contentAPTGame[contentAPN2Game]);});
$("#contentGame"+contentAPN2Game).delay(800).show("slide", 500);
$("#titleHeaderGame").delay(300).show("slide", 500);
contentAPN1Game=contentAPN2Game;
if(clearRandomGameAppCard==false){showRandomGameAppCard=setTimeout(showRandomGameCard, 10000);clearRandomGameAppCard=true;}
}
function enableAppGameNav(){
$("#rightMenuGame").attr("onclick", "navPageRightGame()");
$("#leftMenuGame").attr("onclick", "navPageLeftGame()");
}
function disabledAppGameNav(){
$("#rightMenuGame").attr("onclick", "");
$("#leftMenuGame").attr("onclick", "");
}
var showRandomGameAppCard;
var clearRandomGameAppCard=false;
function showRandomGameCard(){
if(clearRandomGameAppCard==false){clearRandomGameAppCard=true;}
contentAPN2Game=Math.floor(Math.random()*contentAPTGame.length);
$("#contentGame"+contentAPN1Game).hide("slide",{direction : 'right'}, 500);
$("#titleHeaderGame").hide("slide",{direction : 'right'}, 500,
function (){$("#titleHeaderGame,#titleHeaderGameText").html(contentAPTGame[contentAPN2Game]);});
$("#contentGame"+contentAPN2Game).delay(800).show("slide", 500);
$("#titleHeaderGame").delay(300).show("slide", 500);
contentAPN1Game=contentAPN2Game;
showRandomGameAppCard=setTimeout(showRandomGameCard, 10000);
}
$("document").ready(function(){enableAppGameNav();showRandomGameCard();});
//]]>
</script>

KETERANGAN
Pada Kode :
/* Game Image */
cfGameImg[0]="URL image 1";
cfGameImg[1]="URL image 2";
cfGameImg[2]="URL image 3";

Merupakan kode variabel untuk URL gambar untuk avatar yang mewakili game tersebut. Format gambar bisa menggunakan PNG transparan, GIF Animasi, bisa juga menggunakan JPG. Ukuran gambar yang digunakan untuk tinggi gambar sebaiknya tidak melebihi 260px, batas dari lebar gambar maksimal setidaknya mengikuti lebar dari lokasi kotak widget yang digunakan.

Pada Kode :
/* Game Background Image */
cfGameBgImg[0]="class name for bg 1";
cfGameBgImg[1]="class name for bg 2";
cfGameBgImg[2]="class name for bg 3";

Merupakan kode variabel untuk nama spesifik class dari gambar latar belakang yang ingin digunakan. Nama class ini digunakan sesuai dengan lokasi dari kotak yang mewakili game tersebut.

Pada Kode :
/* Game iFrame URL */
cfGameSrc[0]="URL iFrame Game Source 1";
cfGameSrc[1]="URL iFrame Game Source 2";
cfGameSrc[2]="URL iFrame Game Source 3";

Merupakan kode variabel untuk URL iFrame dari game tersebut. Harap gunakan alamat URL asli game browser sehingga iFrame tidak diarahkan ke situs lain.

Pada Kode :
/* Game Menu Text Navigation */
contentAPTGame[0]='<i class="fa fa-space-shuttle" aria-hidden="true"></i> Nama Game 1';
contentAPTGame[1]='<i class="fa fa-motorcycle" aria-hidden="true"></i> Nama Game 2';
contentAPTGame[2]='<i class="fa fa-motorcycle" aria-hidden="true"></i> Nama Game 3';

Merupakan kode variabel untuk nama judul game yang digunakan, nama judul game bisa dikombinasikan dengan penggunaan icon dari fontawesome. Kode icon fontawesome bisa dilihat disini FontAwesome 4.7

#2 Contoh Penggunaan Widget Pada Blogger

Apabila anda masih bingung untuk melakukan konfigurasi, maka silakan dilihat kode konfigurasi yang blog codeflare gunakan di bawah ini. Jika ingin langsung menggunakan widget game online dari konfigurasi ini maka silakan di copy-paste kode di bawah ini kedalam kotak widget blog anda atau silakan tekan tombol Add to Blogger untuk mempermudah pemasangan widget.

Berikut widget game online yang digunakan pada blog codeflare. Konfigurasi yang digunakan widget game online di bawah ini, menggunakan 9 pilihan game dengan beberapa konfigurasi background agar menambah daya tarik tampilan widget.

Harap dipastikan ketiga kode plugin sudah dipasang pada website atau blog anda agar widget game online bisa berjalan dengan baik.

<div class="boxMainUIGame">

<div class="mainFrmGame">
<div class="headerFrmGame">
<div id="leftMenuGame" class="leftHeaderGame"><i class="fa fa-chevron-left" aria-hidden="true"></i></div>
<div class="titleHeaderGame"><div id="titleHeaderGame"><i class="fa fa-space-shuttle" aria-hidden="true"></i> Hex-GL Race</div></div>
<div id="rightMenuGame" class="rightHeaderGame"><i class="fa fa-chevron-right" aria-hidden="true"></i></div></div>
<div id="frmGameElement" class="contentFrmGame"></div>
<div class="footerFrmGame">
<div id="fBtnGamePlay" class="leftfooterFrmGame" onclick="startBoxGamePlay()";>Play Game <i class="fa fa-caret-right" aria-hidden="true"></i></div>
</div></div>

</div>
<div id="boxMainUIGamePlay" class="boxMainUIGamePlay" style="display:none;">
<div class="headerFrmGame">
<div class="titleHeaderGamePlay"><div id="titleHeaderGameText"></div></div>
<div id="rightMenuGameClose" class="rightMenuGameClose" onclick="closeBoxGamePlay()" title="Close Game Box"><i class="fa fa-times" aria-hidden="true"></i></div></div>
<div id="contentGamePlay">
<iframe id="gameSourceIframe" src="" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" allowfullscreen><p>Your browser does not support iframes.</p></iframe>
</div></div>

#3 Cara Mendapatkan Alamat URL iFrame Game

Secara umum untuk menaruh game web browser kalian cukup meng-embed kode URL yang diberikan situs penyedia game web browser, namun untuk bisa dipasangkan menggunakan widget game online codeflare maka kalian cukup mengambil alamat URL iFrame-nya saja dan masukan kedalam variabel javascript sesuai dengan keterangan yang diberikan pada kode di atas.

Oke untuk lebih jelasnya berikut langkah-langkah untuk mendapatkan url iframe game web browser.

Cari situs penyedia game web browser menggunakan google search engine dengan kata kunci "embed game browser".

Masuk ke situs tersebut dan pilih game yang akan di embed, klik tombol embed jika ada atau klik terlebih game tersebut kemudian pilih menu embed jika ada. Pada menu pilihan embed cukup copy URL direct link saja.

Jika tidak terdapat pilihan embed namun ingin mencoba mendapatkan game web browser tersebut untuk bisa ditaruh kedalam web atau blog kalian maka diperlukan sedikit trik untuk bisa mendapatkan URL dari iFrame game tersebut.

Caranya cukup mudah, jika kalian menggunakan PC atau Laptop silakan kalian coba untuk masuk kedalam situs game tersebut, mainkan game tersebut untuk beberapa saat untuk benar-benar mendapatkan link URL iFrame-nya. Tekan F12 pada tombol keyboard untuk membuka developer tools kemudian pilih Elemen dan cari kode HTML iFrame kemudian pada attribut source merupakan kode URL dari iFrame tersebut, silakan kalian copy URL tersebut.

Pada beberapa kasus ada beberapa game yang tidak kompatible dengan perangkat mobile, sebisa mungkin carilah game yang memiliki fitur responsive sehingga bisa dimainkan di semua perangkat pengunjung blog.

Oh iya pastikan juga game tersebut tidak mengandung script iframe breaker dan script redirect link yang dapat mengarahkan pengunjung blog kalian ke halaman pengembang game tersebut.

Demikian artikel blog tentang Cara Memasang Game Online Untuk Blogger terima kasih sudah berkunjung, jangan lupa Like, Share dan Subscribe, untuk pertanyaan, kritik ataupun saran silakan ditulis pada kotak komentar di bawah. Apabila ada kata-kata yang kurang berkenan atau informasi yang kurang akurat, harap dimaklumi. Akhir kata Semoga Bermanfaat.

Keyword

Blog, Blogger, Blogspot, Widget, Gadget, Script, Code, CSS, HTML, Javascript, Game, Launcher, List, InnerWindow, iFrame, Source, Cara, Tutorial, Buat, Bikin, Pasang, Game, Permainan, HTML5, CSS3, Library, Plugin, Jquery

Incoming Search Term

HTML5 Game Launcher, Pasang Box Untuk Menampilkan Game Browser HTML5, Cara Menampilkan Game Javascript Pada Halaman Blogger atau Website Pribadi, Cara Bikin Game untuk Halaman Blog, Bikin Blog Keren Dengan Memasang Game Online, Cara Pasang Widget Game Browser Online Dengan Mudah, Tutorial Pasang Game HTML CSS Javascript diBlog, Kumpulan Game Internet Gratis Untuk Blogger, Game yang dipasang di halaman blog, Game 2d dan 3d pada halaman artikel blog, cara pasang game di blog, Cara Memasang Game Online Di Blog Gratis Keren Terbaru, Cara Mudah Memasang Game di Blog, Cara Praktis Memasang Game Online di Blog, Cara Pasang Game Di Blog, cara membuat game di blog anda, Cara memasang / memasukkan game ke dalam blog, Cara Memasang Game Online Di Blog [Blogger] Paling Mudah

Main Settings

Header Ads

Cara Memasang HTML5 Game Online Untuk Blogger

No comments

Post Top Ad

Author Details

Post Bottom Ad

Insviral

Top Users

Comments

Top Pages

Formulir Kontak

Subscribe

Popular

Category