اريد طريقة تحويل قالب html الي قالب بلوجر

tdimdev · 26 أكتوبر 2019

انا معي قوالب html,css,js واريد تحويلها قالب يعمل مع بلوجر{xml}

مثلا هذا الكود

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Basic Drag and Drop</title>
<style>
body {
  font-size: 0.8em;
}
[data-draggable="target"] {
  float: left;
  list-style-type: none;
  width: 42%;
  height: 7.5em;
  overflow: hidden;
  margin: 0 0.5em 0.5em 0;
  padding: 0.5em;
  border-radius: 0.2em;
  background: #ddd;
  box-sizing: border-box;
}
[data-draggable="target"].dragging {
  background: #eee;
  border: 3px dashed #0088ff;
}
[data-draggable="item"] {
  float: left;
  max-width: 50px;
  cursor: pointer;
  list-style-type: none;
  background: #0088ff;
  padding: 2em;
  margin: 5px;
  border-radius: 0.2em;
  line-height: 1.3;
}
</style>
</head>
<body>
<ol data-draggable="target">
  <li data-draggable="item"></li>
  <li data-draggable="item"></li></ol>

<ol data-draggable="target">
  <li data-draggable="item"></li>
  <li data-draggable="item"></li>
</ol>

<ol data-draggable="target">
  <li data-draggable="item"></li>
  <li data-draggable="item"></li>
</ol>

<ol data-draggable="target">
  <li data-draggable="item"></li>
  <li data-draggable="item"></li>
</ol>
  <script>
(function()
{
	if (!document.querySelectorAll || !('draggable' in document.createElement('span')) ||  window.opera) { 
    return; 
  }
	for (var 
    items = document.querySelectorAll('[data-draggable="item"]'), 
		len = items.length, 
		i = 0; i < len; i ++) {
		  items[i].setAttribute('draggable', 'true');
  }
	var item = null;
	document.addEventListener('dragstart', function(e) {
		item = e.target;
		e.dataTransfer.setData('text', '');
	}, false);
	document.addEventListener('dragover', function(e) {
		if (item) e.preventDefault();
	});	
  document.addEventListener('dragenter', function(e){
    if(e.target.getAttribute('data-draggable') == 'target') {
      e.target.className = 'dragging';
    }
  });
  document.addEventListener('dragleave', function(e){
    if(e.target.getAttribute('data-draggable') == 'target') {
      e.target.className =  '';
    }
  });
	document.addEventListener('drop', function(e)	{
		if(e.target.getAttribute('data-draggable') == 'target') {
			e.target.appendChild(item);
            e.target.className =  '';
			e.preventDefault();
		}
	});
	document.addEventListener('dragend', function(e) {
		item = null;
	});
})();
</script>

</body>
</html>