1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Kongregate Games Section 1.0

How to create a basic arcade with Xenforo pages

  1. DRE
    This resource is unsupported 8/9/2012

    This is a basic guide on how to create a Kongregate arcade section and comment the games on your site. Games can be easily added to your default xenforo pages by embedding the games listed on this site: http://www.kongregate.com/games_for_your_site For the purposes of this resource and due to my limited time I can only teach you how to add an index with thumbnails, one game and comments using disqus. You would have to create an account at www.disqus.com if you want to add comments to your arcade. To add link to navbar you should try Jake Bunces Nodes As Tabs addon: http://xenforo.com/community/resources/nodes-as-tabs.9/.

    Example:

    Kongregate Page: http://www.8thos.com/pages/kongregate

    Kongregate Game: http://www.8thos.com/pages/icy-fishes/

    Screenshot:

    kongregate.jpg


    Directions:

    Step 1.

    Extract the zip file and upload the style folder to your forum root.

    Inside is the thumbnails used for this tutorial that I also use on my site.

    Step 2

    In AdminCP click on Applications. Under Node Tree, Click 'Create New Page'

    Fill out the following:

    -Basic Information Tab-

    URL Portion: kongregate
    Title: Kongregate
    Description: Kongregate is an online games hosting website owned by Gamestop Corporation, which allows users to upload user-created Adobe Flash, HTML 5/JavaScript, <br>Shockwave, Java or Unity3D games. It features an API that allows users to submit high scores and in some games, earn achievement badges.
    Select a Parent Node: ( root node )
    Display order: 88


    -Page Options Tab-

    Template HTML:

    Code:
    <html>
    <head>
    <style type="text/css">
    div.img
      {
      margin:2px;
      border:1px solid #b5b9c2;
      height:auto;
      width:auto;
      float:left;
      text-align:center;
      border-radius:5px;
      }
    div.img img
      {
      display:inline;
      margin:3px;
      border:1px solid #ffffff;
      }
    div.img a:hover img
      {
      border:1px solid #B40404;
      }
    div.desc
      {
      text-align:center;
      font-weight:normal;
      width:120px;
      margin:3px;
      }
    </style>
    </head>
    <body>
    <div class="img">
      <a href="pages/bloody-fun-day/">
      <img src="styles/default/games/1.jpg" alt="Bloody Fun Day" />
      </a>
      <div class="desc">Reaper rampage on cute cuddly critters</div>
    </div>
    <div class="img">
      <a href="pages/bunny-flags/">
      <img src="styles/default/games/2.jpg" alt="Bloody Flags" />
      </a>
      <div class="desc">Defend your flag against the enemy</div>
    </div>
    <div class="img">
      <a href="pages/clarences-big-chances/">
      <img src="styles/default/games/3.jpg" alt="Clarence's Big Chances" />
      </a>
      <div class="desc">Help Clarence date his dreamgirl</div>
    </div>
    <div class="img">
      <a href="pages/cuboy-cubeture-2/">
      <img src="styles/default/games/4.jpg" alt="Cuboy: Cubeture 2" />
      </a>
      <div class="desc">Cuboy is lost in time! Oh well.</div>
    </div>
    <div class="img">
      <a href="pages/continuity/">
      <img src="styles/default/games/5.jpg" alt="Continuity" />
      </a>
      <div class="desc">Award-winning tile platformer</div>
    </div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <div class="img">
      <a href="pages/dude-and-zomies/">
      <img src="styles/default/games/6.jpg" alt="Dude and Zombies" />
      </a>
      <div class="desc">Shoot zombies in a dark forest</div>
    </div>
    <div class="img">
      <a href="pages/icy-fishes/">
      <img src="styles/default/games/7.jpg" alt="Icy Fishes" />
      </a>
      <div class="desc">Rescue fishes so you can eat them</div>
    </div>
    <div class="img">
      <a href="pages/nuclear-outrun/">
      <img src="styles/default/games/8.jpg" alt="Nuclear Outrun" />
      </a>
      <div class="desc">Race between zombies and nukes</div>
    </div>
    <div class="img">
      <a href="pages/solipskier/">
      <img src="styles/games/9.jpg" alt="Solipskier" />
      </a>
      <div class="desc">Draw slopes and ski down them</div>
    </div>
    <div class="img">
      <a href="pages/villainous/">
      <img src="styles/default/games/10.jpg" alt="Villainous" />
      </a>
      <div class="desc">Tower conquest. You're the villain</div>
    </div>
    </body>
    </html> 
    Optional Components:
    Log and count visits to this page
    List Child Nodes

    Save Page.


    Step 3

    In AdminCP click on Applications. Under Node Tree, Click 'Create New Page'

    In the Basic Information tab fill out the following:

    -Basic Information Tab-

    URL Portion: bloody-fun-day
    Title: Bloody Fun Day
    Description:
    Code:
    What would Death himself do if he were surrounded by ultra-cute critters? Kill them, of course! You play the reaper, who needs to kill red cuties in order to stay alive. Killing other cuties will help charge super powers that make it easier to get to the red cuties. How long can you survive before the dwindling cutie population stifles your life? You can’t help but have a bloody fun day in this addictive puzzler.
    <br><br>
    <b>Instructions</b>
    <br>
    You are the Reaper! Click an adjacent hexagon to attack it. <br>
    Click one of the buttons along the button to activate your special power (if it has powered up).<br>
    Your health decreases every time you make an attack, but killing red cuties will give you back health.
    Select a Parent Node: Kongregate
    Display order: 1
    Display in node list: Yes

    -Page Options Tab-

    Template HTML:

    Code:
    <div align="center"><div class="messageText ugc baseHtml">
    
    <embed width="600" height="400" base="http://external.kongregate-games.com/gamez/0014/3076/live/" src="http://external.kongregate-games.com/gamez/0014/3076/live/embeddable_143076.swf" type="application/x-shockwave-flash"></embed>
    
    <div id="disqus_thread"></div>
    
    <script type="text/javascript">
        var disqus_shortname = 'yourshortname'; // required: replace example with your forum shortname
    
        (function() {
            var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
            dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
            (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
        })();
    </script>
    <noscript>Please enable JavaScript to view <a href="http://disqus.com/?ref_noscript">comments.</a></noscript></div></div>

    Optional Components:
    Log and count visits to this page
    List Sibling Nodes

    Hit save and your done.

    The new game will now appear in the sidebar of the Kongregate games section.
    bubbl3 and Matthew Hawley like this.

Recent Updates

  1. Unintentionally Responsive