Thursday, 4 September 2014

CARD GAMES WITH DRAG AND DROP WITH JQUERY AND HTML

CARD GAMES WITH DRAG AND DROP WITH JQUERY AND HTML



-------------------------------------------------------------------------------------------------------------
COPY AND PASTE BELOW CODE:
READ MORE:
http://fbgadgets.blogspot.co.uk/2014/09/DragAndDropHtmlGame.html
http://fbgadgets.blogspot.co.uk/2014/09/drag-and-drop-html-game_4.html
http://fbgadgets.blogspot.co.uk/2014/09/DragAndDropHtmlGameImages.html
http://fbgadgets.blogspot.co.uk/2014/09/DragAndDropHtmlGame.html
http://fbgadgets.blogspot.co.uk/2014/09/drag-and-drop-with-jquery-and-html.html
http://fbgadgets.blogspot.co.uk/2014/09/drag-and-drop-images-above-box-to-below.html
http://fbgadgets.blogspot.co.uk/2014/09/drag-and-drop-images-above-box-to-below_5.html
-------------------------------------------------------------------------------------------------------------


<!doctype html>
<html lang="en">
<head>

<title>A jQuery Drag-and-Drop Number Cards Game</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

<style>
/* Add some margin to the page and set a default font and colour */
body {
margin:30px;
font-family:"Georgia",serif;
line-height:1.8em;
color: #333;
}
/* Give headings their own font */
h1,h2,h3,h4 {
font-family: "Lucida Sans Unicode","Lucida Grande",sans-serif;
}
/* Main content area */
#content {
margin:80px 70px;
text-align:center;
-moz-user-select:none;
-webkit-user-select:none;
user-select: none;
}
/* Header/footer boxes */
.wideBox {
clear:both;
text-align:center;
margin:70px;
padding:10px;
background:#ebedf2;
border:1px solid #333;
}
.wideBox h1 {
font-weight:bold;
margin:20px;
color:#666;
font-size: 1.5em;
}
/* Slots for final card positions */
#cardSlots {
margin:50px auto 0 auto;
background: #ddf;
}
/* The initial pile of unsorted cards */
#cardPile {
margin:0 auto;
background:#ffd;
}
#cardSlots,#cardPile {
width:910px;
height:120px;
padding:20px;
border:2px solid #333;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
-moz-box-shadow:0 0 .3em rgba(0,0,0,.8);
-webkit-box-shadow:0 0 .3em rgba(0,0,0,.8);
box-shadow: 0 0 .3em rgba(0,0,0,.8);
}
/* Individual cards and slots */
#cardSlots div,#cardPile div {
float:left;
width:58px;
height:78px;
padding:10px;
padding-top:40px;
padding-bottom:0;
border:2px solid #333;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
margin:0 0 0 10px;
background:#fff;
}
#cardSlots div:first-child,#cardPile div:first-child {
margin-left:0;
}
#cardSlots div.hovered {
background:#aaa;
}
#cardSlots div {
border-style:dashed;
}
#cardPile div {
background:#666;
color:#fff;
font-size:50px;
text-shadow:0 0 3px #000;
}
#cardPile div.ui-draggable-dragging {
-moz-box-shadow:0 0 .5em rgba(0,0,0,.8);
-webkit-box-shadow:0 0 .5em rgba(0,0,0,.8);
box-shadow: 0 0 .5em rgba(0,0,0,.8);
}
/* Individually coloured cards */
#card1.correct {
background:red;
}
#card2.correct {
background:brown;
}
#card3.correct {
background:orange;
}
#card4.correct {
background:yellow;
}
#card5.correct {
background:green;
}
#card6.correct {
background:cyan;
}
#card7.correct {
background:blue;
}
#card8.correct {
background:indigo;
}
#card9.correct {
background:purple;
}
#card10.correct {
background: violet;
}
/* "You did it!" message */
#successMessage {
position:absolute;
left:580px;
top:250px;
width:0;
height:0;
z-index:100;
background:#dfd;
border:2px solid #333;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
-moz-box-shadow:.3em .3em .5em rgba(0,0,0,.8);
-webkit-box-shadow:.3em .3em .5em rgba(0,0,0,.8);
box-shadow:.3em .3em .5em rgba(0,0,0,.8);
padding: 20px;
}
</style>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>

<script type="text/javascript">

var correctCards = 0;
$( init );

function init() {

  // Hide the success message
  $('#successMessage').hide();
  $('#successMessage').css( {
    left: '580px',
    top: '250px',
    width: 0,
    height: 0
  } );

  // Reset the game
  correctCards = 0;
  $('#cardPile').html( '' );
  $('#cardSlots').html( '' );

  // Create the pile of shuffled cards
  var numbers = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
  numbers.sort( function() { return Math.random() - .5 } );

  for ( var i=0; i<10; i++ ) {
    $('<div>' + numbers[i] + '</div>').data( 'number', numbers[i] ).attr( 'id', 'card'+numbers[i] ).appendTo( '#cardPile' ).draggable( {
      containment: '#content',
      stack: '#cardPile div',
      cursor: 'move',
      revert: true
    } );
  }

  // Create the card slots
  var words = [ 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten' ];
  for ( var i=1; i<=10; i++ ) {
    $('<div>' + words[i-1] + '</div>').data( 'number', i ).appendTo( '#cardSlots' ).droppable( {
      accept: '#cardPile div',
      hoverClass: 'hovered',
      drop: handleCardDrop
    } );
  }

}

function handleCardDrop( event, ui ) {
  var slotNumber = $(this).data( 'number' );
  var cardNumber = ui.draggable.data( 'number' );

  // If the card was dropped to the correct slot,
  // change the card colour, position it directly
  // on top of the slot, and prevent it being dragged
  // again

  if ( slotNumber == cardNumber ) {
    ui.draggable.addClass( 'correct' );
    ui.draggable.draggable( 'disable' );
    $(this).droppable( 'disable' );
    ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
    ui.draggable.draggable( 'option', 'revert', false );
    correctCards++;
  } 
  
  // If all the cards have been placed correctly then display a message
  // and reset the cards for another go

  if ( correctCards == 10 ) {
    $('#successMessage').show();
    $('#successMessage').animate( {
      left: '380px',
      top: '200px',
      width: '400px',
      height: '100px',
      opacity: 1
    } );
  }

}

</script>

</head>

<body>

<div class="wideBox">
<h1>Drag-and-Drop with jQuery: Your Essential Guide</h1>
<h2>A Number Cards Game</h2>
</div>

<div id="content">
<div id="cardPile"> </div>
<div id="cardSlots"> </div>
<div id="successMessage">
<h2>You did it!</h2>
<button onclick="init()">Play Again</button>
</div>
</div>

</body>
</html>

-----------------------------------------------------------------------------------------------------------------------
HOW ADD IMAGES IN THIS GAME JUST REPLACE JAVA CODE
http://stackoverflow.com/questions/20978897/jquery-drag-and-drop-how-to-add-image-into-variable
-------------------------------------------------------------------------------------------------------------------- var numbers = [ 1, 2, 3, 4, 5, 6 ];
var imgs = [ '/images/1.gif','/images/2.gif','/images/3.gif','/images/4.gif','/images/5.gif','/images/6.gif' ];

 numbers.sort( function() { return Math.random() - .5 } );

 for ( var i=0; i<6; i++ ) {
$('<div><img  src="' + imgs[numbers[i] - 1] + '" alt="alt"/></div>').data( 'number', numbers[i] ).attr( 'id',         
   'card'+numbers[i] ).appendTo( '#cardPile' ).draggable( {
  containment: '#content',
  stack: '#cardPile div',
  cursor: 'move',
  revert: true
 } );

}
------------------------------------------------------------------------------------------------------------------------
HOW ADD IMAGES IN THIS GAME JUST REPLACE JAVA CODE
http://stackoverflow.com/questions/20978897/jquery-drag-and-drop-how-to-add-image-into-variable
--------------------------------------------------------------------------------------------------------------------


<!doctype html>
<html lang="en">
<head>

<title>A jQuery Drag-and-Drop Number Cards Game</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style>
/* Add some margin to the page and set a default font and colour */
body {
margin:30px;
font-family:"Georgia",serif;
line-height:1.8em;
color: #333;
}
/* Give headings their own font */
h1,h2,h3,h4 {
font-family: "Lucida Sans Unicode","Lucida Grande",sans-serif;
}
/* Main content area */
#content {
margin:80px 70px;
text-align:center;
-moz-user-select:none;
-webkit-user-select:none;
user-select: none;
}
/* Header/footer boxes */
.wideBox {
clear:both;
text-align:center;
margin:70px;
padding:10px;
background:#ebedf2;
border:1px solid #333;
}
.wideBox h1 {
font-weight:bold;
margin:20px;
color:#666;
font-size: 1.5em;
}
/* Slots for final card positions */
#cardSlots {
margin:50px auto 0 auto;
background: #ddf;
}
/* The initial pile of unsorted cards */
#cardPile {
margin:0 auto;
background:#ffd;
}
#cardSlots,#cardPile {
width:910px;
height:120px;
padding:20px;
border:2px solid #333;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
-moz-box-shadow:0 0 .3em rgba(0,0,0,.8);
-webkit-box-shadow:0 0 .3em rgba(0,0,0,.8);
box-shadow: 0 0 .3em rgba(0,0,0,.8);
}
/* Individual cards and slots */
#cardSlots div,#cardPile div {
float:left;
width:58px;
height:78px;
padding:10px;
padding-top:40px;
padding-bottom:0;
border:2px solid #333;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
margin:0 0 0 10px;
background:#fff;
}
#cardSlots div:first-child,#cardPile div:first-child {
margin-left:0;
}
#cardSlots div.hovered {
background:#aaa;
}
#cardSlots div {
border-style:dashed;
}
#cardPile div {
background:#666;
color:#fff;
font-size:50px;
text-shadow:0 0 3px #000;
}
#cardPile div.ui-draggable-dragging {
-moz-box-shadow:0 0 .5em rgba(0,0,0,.8);
-webkit-box-shadow:0 0 .5em rgba(0,0,0,.8);
box-shadow: 0 0 .5em rgba(0,0,0,.8);
}
/* Individually coloured cards */
#card1.correct {
background:red;
}
#card2.correct {
background:brown;
}
#card3.correct {
background:orange;
}
#card4.correct {
background:yellow;
}
#card5.correct {
background:green;
}
#card6.correct {
background:cyan;
}
#card7.correct {
background:blue;
}
#card8.correct {
background:indigo;
}
#card9.correct {
background:purple;
}
#card10.correct {
background: violet;
}
/* "You did it!" message */
#successMessage {
position:absolute;
left:580px;
top:250px;
width:0;
height:0;
z-index:100;
background:#dfd;
border:2px solid #333;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
-moz-box-shadow:.3em .3em .5em rgba(0,0,0,.8);
-webkit-box-shadow:.3em .3em .5em rgba(0,0,0,.8);
box-shadow:.3em .3em .5em rgba(0,0,0,.8);
padding: 20px;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript">

var correctCards = 0;
$( init );

function init() {

  // Hide the success message
  $('#successMessage').hide();
  $('#successMessage').css( {
    left: '580px',
    top: '250px',
    width: 0,
    height: 0
  } );

  // Reset the game
  correctCards = 0;
  $('#cardPile').html( '' );
  $('#cardSlots').html( '' );

  // Create the pile of shuffled cards
 var numbers = [ 1, 2, 3, 4, 5, 6 ];
var imgs = [ 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPcEWSJ3Nu4Qr6VsIhzW_mEJ1XNzv5U_TN-vBMTn0p-hodEF3VjPeN3rns7cO2-ShDyOfiZK_riivZbmH6yCfmQYB6ao5ASyLoKQagRw9Z11qibmuBNph012Iob9-_IKWMpTlAJ4J2PxsP/s1600/book1.gif','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVH_vBkxjeGeOr_JAzPB8OnzbahzTCqbwnTLT7jG7zZSe-GJVWJ4bRVVYB5oBQ8RydaRqGmATMZV6e5bgLtq86MvKFQkR-OvKNisOLLPq9FtiQBGWlVGhVdX95GWPGcMkGwUKJ3QPpGmOK/s1600/book2.gif','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBCed8Rzfkv_Fi7Nt71iHhU6ZxNUyNHWuN5ZiwLr1tHzz-yctSNmZvyeQ7Rx0DLAk1mL809WqZgBrjWsNB_LzG_ciSDzCzbvKXO2RGKV-eOS4oUMJkmmRJitI24DQJHoNcTyS3Z1ChvWQB/s1600/book3.gif','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibD8A2kMAlh2QaMbD9edthhBWJtcmBemstfi00IHRrNPJe3oO_urpTvVG_cTOWaq7FnT3QSTceqtgCKKxK3i3_dbVcyhelkg6FtabfD_QH0o3ZwauPjtJKAp3RS4LSdlmavppocyKLa74r/s1600/book4.gif','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjCj3e5G-DiA5KRRDIyDH0D5EQStZFK3mL1RgFG7huE_BsTNni0hXVHDWvph8OjXqz64zoCt34AIt1ej_IhLds_sm4q03Dry1kAoXyUCsGuu-pZ-nudMiRH1Htp_YuchBXMqBt81ufWASA/s1600/book5.gif','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUGaafq53HE0HQ-LqXkXmC8H6X4XU0WzNIQb2Lmm-G6YlJ4qPbm-hhJvNtBgk8rm9FxI0EkgzJONnpHmdOz0Njufkw_hbhM06nHVYbqNBbULcGq_olE2UcI7DZD2ON7doOLsWrMYeyuiKO/s1600/book6.gif' ];

 numbers.sort( function() { return Math.random() - .5 } );

 for ( var i=0; i<6; i++ ) {
$('<div><img  src="' + imgs[numbers[i] - 1] + '" alt="alt"/></div>').data( 'number', numbers[i] ).attr( 'id',         
   'card'+numbers[i] ).appendTo( '#cardPile' ).draggable( {
  containment: '#content',
  stack: '#cardPile div',
  cursor: 'move',
  revert: true
 } );
}

  // Create the card slots
  var words = [ 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten' ];
  for ( var i=1; i<=10; i++ ) {
    $('<div>' + words[i-1] + '</div>').data( 'number', i ).appendTo( '#cardSlots' ).droppable( {
      accept: '#cardPile div',
      hoverClass: 'hovered',
      drop: handleCardDrop
    } );
  }

}

function handleCardDrop( event, ui ) {
  var slotNumber = $(this).data( 'number' );
  var cardNumber = ui.draggable.data( 'number' );

  // If the card was dropped to the correct slot,
  // change the card colour, position it directly
  // on top of the slot, and prevent it being dragged
  // again

  if ( slotNumber == cardNumber ) {
    ui.draggable.addClass( 'correct' );
    ui.draggable.draggable( 'disable' );
    $(this).droppable( 'disable' );
    ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
    ui.draggable.draggable( 'option', 'revert', false );
    correctCards++;
  }

  // If all the cards have been placed correctly then display a message
  // and reset the cards for another go

  if ( correctCards == 10 ) {
    $('#successMessage').show();
    $('#successMessage').animate( {
      left: '380px',
      top: '200px',
      width: '400px',
      height: '100px',
      opacity: 1
    } );
  }

}

</script>

</head>
<body>

<div class="wideBox">
<h1>Drag-and-Drop with jQuery: Your Essential Guide</h1>
<h2>A Number Cards Game</h2>
</div>

<div id="content">
<div id="cardPile">

</div>
<div id="cardSlots"> </div>
<div id="successMessage">
<h2>You did it!</h2>
<button onclick="init()">Play Again</button>
</div>
</div>

</body>
</html>











Related Post for CARD GAMES WITH DRAG AND DROP WITH JQUERY AND HTML

  • HOW TO GET MALWARE ADD POPUP WITHOUT SOFTWARE --------------------------------------------------------------------------------------------------------- STEP 1: GO TO WINDOW TASK MANAGER STEP 2: OPEN FILE LOCATION AND DE…
  • SYNTAX HIGHLIGHTER BLOGGER TEMPLATE --------------------------------------------------------------------------------------------------------- READ MORE: http://fbgadgets.blogspot.co.uk/2014/08/syntax-highlight…
  • WHACK A RAT CSS GAME ----------------------------------------------------------------------------------------------------------------- ReadMore: https://dzone.com/articles/css3-games-collection htt…
  • MAKE DLL FILE AND OPEN IN VISUAL BASIC 2008-2010 READ MORE: ----------------------------------------------------------------------------------------------------------------------- http://www.solvusoft.com/en/file-ex…
  • CSS SYNTAX HIGHLIGHT CHANGE IN NOTEPAD++ SYNTAX HIGHLIGHTER ------------------------------------------------------------------------------------------------------------------- SYNTAX HIGHLIGHTER LINKS -----------------------------------…
  • IMAGE UPLOAD WITH JAVA WITH PHP CODE ------------------------------------------------------------------------------------------------------ CREATE FOLDER AND CREATE AND SAVE FILES ONE BY ONE IN THIS FOLDER &nb…
  • NOTE PAD ++ SYNTAX HIGHLIGHTER FOR BLOGGER POST --------------------------------------------------------------------------------------------------------------------- NOTE PAD ++ SYNTAX HIGHLIGHTER FOR BLOGGER POST https://…
  • How to open a .DLL or .EXE file in Resource Editor READ MORE: ---------------------------------------------------------------------------------------------------------- http://www.solvusoft.com/en/file-extensions/file-extensio…
  • BOOTSNIPP LOGIN SIGNUP FORM ----------------------------------------------------------------------------------------------------------- READ MORE: http://bootsnipp.com/tags/login http://bootsnipp.com/s…
  • NOTEPAD++ REMOVE UNWANTED LINES ------------------------------------------------------------------------------------------------------------------------------------------------------------ STEP NO : 1 1- CT…
  • RELATED POST WIDGET LIST SHAPE ---------------------------------------------------------------------------------------------------------------- READ MORE: http://fbgadgets.blogspot.co.uk/2013/12/n-relate-pos…
  • HTML CSS GREEN COMMENTS NOTEPAD++ ------------------------------------------------------------------------------------------------------------------------- READ MORE: https://www.youtube.com/watch?v=Abqwpg5mp_U…
  • IMAGE UPLOAD WITH JAVA WITHOUT PHP CODE ------------------------------------------------------------------------------------------------------ COPY AND PASTE BELOW CODE IN NOTE PAD AND SAVE IN HTML FILE -----------…
  • AUTOMATION ANY WEBSITES ------------------------------------------------------------------------------------------------------ READ MORE: https://www.automationanywhere.com/webdataext?r=google&w=…
  • Search Engine Optimization Toolkit UN USED CSS IN GOOGLE   Free SEO Toolkit Start with the free download, review your website, and make changes fast. The SEO Toolkit with its detailed analysis and search engine friendly suggestion…
  • DRAG AND DROP WITH IMAGE ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE: READ MORE: http://fbgadgets.blogsp…
  • RELATED POST WIDGET LIST WITHOUT THUMBNAIL ------------------------------------------------------------------------------------------------------- FIND HEAD  </head> TAG AND PASTE BELOW CODE WHEN W…
  • Recommended Post Slide out for Blogger ---------------------------------------------------------------------------------------------------- RECOMMENDED POST SLIDE OUT FOR BLOG - YouTube ▶ 2:50 https:/…
  • HTML SYNTAX HIGHLIGHTER ----------------------------------------------------------------------------------------------------------------- CODE: -------------------------------------------------------…
  • INSTALL WORD PRESS TEMPLATE Plugins are tools which provide additional functionality to your application. To install a plugin you generally just need to put the plugin file into your 'wp-content/plugins' di…
  • WORD PRESS PARTS -------------------------------------------------------------------------------------------------------- Read More: ----------------------------------…
  • ONLINE ZIP OPNER ---------------------------------------------------------------------------------------------------------- FIND THIS RED WORD IN GOOGLE online zip opener READ MORE: http://onl…
  • SYNTAX HIGHLIGHTER ON LINE FOR BLOGGER ---------------------------------------------------------------------------------------------------------- READ MORE: http://fbgadgets.blogspot.co.u…
  • EDIT IMAGE IN NOTEPAD++ ---------------------------------------------------------------------------------------------------------------------- https://www.google.co.uk/search?q=edit+picture+in+no…
  • FLASH 8 DOWNLOAD DIRECT LINKS TO YOUR FILES ON GOOGLE DRIVE - YouTube ▶ 5:17 https://www.youtube.com/watch?v=ehue47G5ayc 14 hours ago - Uploaded by SAVE MONEY DIRECT LINKS&n…
  • FLASH PLAYER SWF FILE DOWNLOAD ARCHIVES ---------------------------------------------------------------------------------------------------------------- FLASH PLAYER DOWNLOAD FROM ARCHIVES https://helpx.adobe.com/fla…
  • USE ARABIC URDU LANGUAGE IN HTML ------------------------------------------------------------------------------------------------------------- Read More:  13:22 USE ARABIC URDU LANGUAGE IN HTML&n…
  • SCREEN TO GIF ------------------------------------------------------------------------------------------------------------------ Read More:  3:30 PDF HTML IMAGE CONVERTER HD…
  • JAVA COLOR PICKER WITH jQuery UI Slider - Colorpicker jQuery UI Selectable - Serialize #red, #green, #blue { float: left; clear: left; width: 300px; margin: 15px; } #swatch { width: 1…
  • SYNTAX HIGHLIGHTER BLOGGER TEMPLATE ========================================================================= COPY AND PASTE BELOW CODE IN BLOGGER TEMPLATE http://fbgadgets.blogspot.co.uk/2014/08/syntax-h…
  • SYNTAX HIGHLIGHTER BLOGGER TEMPLATE ----------------------------------------------------------------------------------------------------------- READ MORE: http://fbgadgets.blogspot.co.uk/2014/08/syntax-highl…
  • WEBSITE TRANSLATOR AND THUMBNAIL Read More: http://www.worldlingo.com/en/products/instant_website_translator.html http://www.makeathumbnail.com/thumbnail.php http://www.sciweavers.org/free-online-web-to-im…
  • BASIC TEXT OR SCROLL BOX OR IMAGE SRC HTML CODES ------------------------------------------------------------------------------------------------------ CODE 1 ------------------------------------------------------------------…
  • Related PostWidget WithFirst Big Thumbnail ----------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE READ MORE: http://fbgadgets.blogspot.co.u…
Posted by on Thursday, 4 September 2014 at 13:16
Labels: , , , , , , , , , , , , , , , , , , ,

0 comments:

Post a Comment

:) :)) ;(( :-) =)) ;( ;-( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ $-) (b) (f) x-) (k) (h) (c) cheer
Click to see the code!
To insert emoticon you must added at least one space before the code.

Subscribe to: Post Comments (Atom)
FB Gadgets | Template Designed by Fatakat PhotosCoolBThemes.com
Code by : paid web directory

https://www.google.co.uk/search?q=site%3Ablogspot.com+fbgadgets