{{ js }}
<script>
//<![CDATA[
var myApp = angular.module('MyApp', []);
myApp.controller('AppCtrl', function($scope) {
$scope.html = "HTML";
$scope.css = "CSS";
$scope.php = "PHP";
$scope.js = "JS";
});
//]]>
</script>
3. Pegar siguiente codigo CSS arriva de ]]></b:skin>
{{ css }}
/* Code Boxes (HTML, CSS, PHP, JS) */
@import url(https://fonts.googleapis.com/css?family=Roboto:500);
#codebox {
padding: 15px;
font-family: Courier, sans-serif;
font-size: 1em;
line-height: 1.3;
color: #fff;
background-color: #2c3e50;
-webkit-border-radius: 0px 0px 6px 6px;
-moz-border-radius: 0px 0px 6px 6px;
border-radius: 0px 0px 6px 6px;
margin-bottom: 10px;
}
code {
font-family: Courier, sans-serif;
font-size: 1em;color: #000000;
line-height: 1.3;
}
.codeheader {
padding: 5px 5px 5px 10px;
font-family: 'Roboto', sans-serif;
font-size: 1.1em;
color: #fff;
-webkit-border-radius: 6px 6px 0px 0px;
-moz-border-radius: 6px 6px 0px 0px;
border-radius: 6px 6px 0px 0px;
user-select: none;
-ms-user-select: none; /* IE10+, Edge */
-moz-user-select: none; /* Mozilla */
-webkit-user-select: none; /* Safari */
}
#codeheader_html {
background: linear-gradient(to right, #11998e, #38ef7d);
}
#codeheader_css {
background: linear-gradient(to right, #f46b45, #eea849);
}
#codeheader_php {
background: linear-gradient(to right, #642b73, #c6426e);
}
#codeheader_js {
background: linear-gradient(to right, #4e54c8, #8f94fb);
}
4. Guardar Plantilla Blogger
{{ html }}
Hello World!
{{ css }}
Hello World!
{{ php }}
Hello World!
{{ js }}
Hello World!
Como usar estos Box de Codigo para mostrar en nuestras publicaciones en post de Blogger?
Es muy facil. Pegar uno de estos codigos HTML en post cuando estas en modo de escribirlo HTML, dependiendo de que codigo queres mostrar. HTML, CSS, PHP o JS. Tambien se pueden crear nuevas Cajas de Codigo con otros colores mostrando otros idiomas de programacion.
Aqui van los ejemplos de codigo HTML que sse deben pegar en el post de Blogger:
{{ html }}
<div ng-app="MyApp" ng-controller="AppCtrl">
<!-- HTML Box -->
<div class="codeheader" id="codeheader_html">{{ html }}</div>
<div id="codebox">
Hello World!
</div>
{{ css }}
<div ng-app="MyApp" ng-controller="AppCtrl">
<!-- CSS Box -->
<div class="codeheader" id="codeheader_css">{{ css }}</div>
<div id="codebox">
Hello World!
</div>
{{ php }}
<div ng-app="MyApp" ng-controller="AppCtrl">
<!-- PHP Box -->
<div class="codeheader" id="codeheader_php">{{ php }}</div>
<div id="codebox">Hello World!
</div>
{{ js }}
<div ng-app="MyApp" ng-controller="AppCtrl">
<!-- JS Box -->
<div class="codeheader" id="codeheader_js">{{ js }}</div>
<div id="codebox">Hello World!</div>
</div>
Al lugar de la frase Hello World! deben pegar sus codigos para mostrar en el post de Blogger.
Esto es todo. Facil y flexible pàra mostrar o cambiar. Comparten y pongan sus comentarios.
Bienvenidos en este Blog de recuros graficos gratuitos.Este es un centro de material grafico gratuito para todo tipo de proyectos... comerciales personales o proyectos de pruebas y curiocidad.