Asrar Coding Notes: Coding paling stable setakat 11-11-2016 3:48pm.

Coding ini paling stabil setakat ini.
Yang belum selesai:

Widget posts ikut label
Toggle window di sebelah kanan page
Banner
Integrasi dengan javascript

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title>
<b:if cond='data:blog.pageType == "index"'>
<data:blog.pageTitle/>
<b:else/>
<b:if cond='data:blog.pageType != "error_page"'>
<data:blog.pageName/> | <data:blog.title/>
<b:else/>
Page Not Found | <data:blog.title/>
</b:if>
</b:if>
</title>
<b:skin>
<![CDATA[

* {
box-sizing: border-box;
}
.row::after {
content: "";
clear: both;
display: block;
}
[class*="col-"] {
float: left;
padding: 15px;
}
[class*="col-"] {
width: 100%;
}

.center{
margin: 0 auto;
}

.nomargin{
margin:0
}

.nopadding{
padding:0
}
@media only screen and (min-width: 768px) {

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

body {
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjClokbBoMcanWhdc7-KZzZAs8s5cd_PBhqg6k_3MjfaHrChdIMGizft9qeDRkg5e4ua6skqS1B3u3NdF02fZAHmoQZlO6wbXf6J7fg_yUsv-tJbU9EaQuZe9VfAA7gFdtOrHboUJva3mO2/s1600/sihitamtam.png') fixed;
font-family:arial;
margin:0;
padding:0;
width:100%;
}

#main-container{
margin:0 auto;
padding:0;
background:white;
padding:0
}

}

/* Header */

header{
order:1;
}

#top-header{
background:#57595A;
border-top: 3px red solid;
}

#menu, #social-media{
display:inline-block;
margin: 0;
padding: 0;
}

#menu{
padding-left:30px;
}

.menu-item{
display: inline-block;
padding: 7px 10px;
color: #E0E0E0;
font-size:100%;
font-weight: bold;
}

.menu-item:hover{
background:red;
color:white;
}

#social-media{
text-align: right;
}

.social{
display: inline-block;
padding: 7px 10px;
background-color: #3A3A3A;
color: #57595A;
font-weight: bold;
margin:0;
}

.social:hover{
color:white;
}

.facebook:hover{
background-color: #3b5998;
}

.twitter:hover{
background-color: #1da1f2;
}

.insta:hover{
background-color: #405de6;
}

#ad-top img{
width:100%;
}

#logo img{
padding-left: 30px
}

#ad-top{
text-align: right;
}

#cat-menu {
background: #EEEEEE;
padding: 0 15px;
}

#cat-menu a{
text-decoration:none;
font-weight: bold;
}

#cat-menu .btn{
background-color: #EEE;
transition: background-color 0.5s; color 0.5s;
color:black
}

#cat-menu .btn:hover{
background-color: red;
color: white;
}

#cat-menu .cat-menu-1{
display:inline-block;
}

#cat-menu > .cat-menu-1 > a > div.btn{
padding: 15px;
}

#cat-menu > .cat-menu-1 > div{
display:none;
margin-top: -30px;
-webkit-transition: margin-top 2s;
transition: margin-top 2s;
}

#cat-menu .cat-menu-1:hover > div {
display: block;
position: absolute;
margin-top: 0;
margin: 0;
background-color: #CCC;
z-index: 1;
}

#cat-menu .cat-menu-1:hover > div > div.cat-menu-2 > a > div.btn{
padding: 15px
}

#cat-menu .cat-menu-1:hover > div > div.cat-menu-2:hover > a > div.btn{
background:red;
color:white;
display: block;
}

#cat-menu .cat-menu-1:hover > div > div.cat-menu-2 > div{
display: none;
}

#cat-menu .cat-menu-1:hover > div > div.cat-menu-2:hover > div {
display: block;
position: absolute;
background-color: #AAA;
z-index: 1;
}

#cat-menu .cat-menu-1:hover > div > div.cat-menu-2:hover > div > div.cat-menu-3 > a > div.btn{
padding:15px;
}

div.contoh{
width: 10px;
height: 10px;
background-color: yellow;
transition: width 2s, height 5s;
}

div.contoh:hover{
width: 400px;
height: 500px;
}

/* Content */

#content{
order:2;
}

.jump-link{
text-align:right;
}

.jump-link a {
background: red ;
padding: 10px ;
color: white ;
text-decoration: none ;
border-radius: 22px ;
}

/* Article */

article {
}

post-title{
}

/* Sidebar */

aside {

}

aside h2 {
background: #262424;
font-family: sans-serif;
border-bottom: 2px solid #F2B25C;
color: white;
padding: 2px;
}

.sidebar h2{
color: #FFF;
margin: 0 0 10px 0;
padding: 6px;
text-transform: uppercase;
position: relative;
background: #FF120C;
font-size: 14pt;
}

.widget h2:after{
content: no-close-quote;
position: absolute;
width: 0px;
height: 0px;
bottom: -6px;
left: 22px;
border-left: 6px solid rgba(0, 0, 0, 0);
border-right: 6px solid rgba(0, 0, 0, 0);
border-top: 6px solid #FF120C;
}

/* Footer */

footer {
order:3;
}

@-webkit-keyframes fade-down-in,
@keyframes fade-down-in{
from {background:white}
to {background:grey}
]]>

</b:skin>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" />
</head>
<body class="row">

<div class="col-1">
</div>

<div id="main-container" class="col-10 center">



<header>
<div id="top-header" class="row">
<div id="menu" class="col-8">
<a href="#"><div class="menu-item" style="background:red;color:white"><i class="fa fa-send" aria-hidden="true"></i> KIRIM BERITA</div></a>
<a href="http://asrarcodes.blogspot.my"><div class="menu-item">Utama</div></a>
<a href="#"><div class="menu-item">Tentang</div></a>
<a href="#"><div class="menu-item">Hubungi</div></a>
</div>
<div id="social-media" class="col-4">
<a href=""><div class="social facebook"><i class="fa fa-facebook-official" aria-hidden="true"></i> Facebook</div></a>
<a href=""><div class="social twitter"><i class="fa fa-twitter" aria-hidden="true"></i> Twitter</div></a>
<a href=""><div class="social insta"><i class="fa fa-instagram" aria-hidden="true"></i> Instagram</div></a>
</div>
</div>
<div id="website-brand" class="row">
<div id="logo" class="col-3">
<a href="http://asrarcodes.blogspot.my"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv69XCIOv16kv5ojO4l4884eZzIBB8aUZvF2wh2pQwFdp09Mo5H0S9I4j4NWXpCQenyjziRY7T8WrZi_EQyuW1kWIg9f761kP6ilv00nV-t2gD_lRhJoKLC5E73Po4U0w9H0L8wZ4DpQM/s1600/logo.jpg" /></a>
</div>
<div id="ad-top" class="col-9">
<img src="http://demo.tagdiv.com/newsmag/wp-content/uploads/2014/08/rec728.jpg" />
</div>
</div>
<div id="category-menu" class='Row'>
<div id="cat-menu" class="col-12">
<div class="cat-menu-1">
<a href="home"><div class="btn special"><span><i class="fa fa-home" aria-hidden="true"></i></span></div></a>
</div>
<div class="cat-menu-1">
<a href="trending"><div class="btn"><i class="fa fa-fire" aria-hidden="true"></i> TRENDING</div></a>
</div>
<div class="cat-menu-1">
<a href="world"><div class="btn">DUNIA</div></a>
<div>
<div class="cat-menu-2">
<a href="afrika"><div class="btn">AFRIKA</div></a>
</div>
<div class="cat-menu-2">
<a href="usa"><div class="btn">AMERIKA SYARIKAT</div></a>
</div>
<div class="cat-menu-2">
<a href="amerikautara"><div class="btn">AMERIKA UTARA</div></a>
</div>
<div class="cat-menu-2">
<a href="asiabarat"><div class="btn">ASIA BARAT</div></a>
</div>
<div class="cat-menu-2">
<a href="china"><div class="btn">CHINA</div></a>
</div>
<div class="cat-menu-2">
<a href="eropah"><div class="btn">EROPAH</div></a>
</div>
<div class="cat-menu-2">
<a href="turki"><div class="btn">TURKI</div></a>
</div>
</div>
</div>
<div class="cat-menu-1">
<a href="nasional"><div class="btn">NASIONAL</div></a>
<div>
<div class="cat-menu-2">
<a href="borneo"><div class="btn">BORNEO</div></a>
</div>
<div class="cat-menu-2">
<a href="selatan"><div class="btn">SELATAN SEMENANJUNG</div></a>
</div>
<div class="cat-menu-2">
<a href="tengah"><div class="btn">TENGAH SEMENANJUNG</div></a>
</div>
<div class="cat-menu-2">
<a href="timur"><div class="btn">TIMUR SEMENANJUNG</div></a>
</div>
<div class="cat-menu-2">
<a href="utara"><div class="btn">UTARA SEMENANJUNG</div></a>
</div>
</div>
</div>
<div class="cat-menu-1">
<a href="hiburan"><div class="btn">HIBURAN</div></a>
</div>
<div class="cat-menu-1">
<a href="sukan"><div class="btn">SUKAN</div></a>
</div>
</div>
</div>
</header>



<div id="content" class="row">



<aside id="left-sidebar" class="col-2">
<div>
<b:section class='sidebar' id='sidebar1' maxwidgets='' showaddelement='yes'>
<b:widget id='Profile1' locked='false' title='Tajaan' type='Profile' visible='true'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<b:if cond='data:team'> 
<ul>
<b:loop values='data:authors' var='i'>
<li><a class='profile-name-link g-profile' expr:href='data:i.userUrl' expr:style='"background-image: url(" + data:i.profileLogo + ");"'><data:i.display-name/></a></li>
</b:loop>
</ul>

<b:else/> 

<b:if cond='data:photo.url != ""'>
<a expr:href='data:userUrl'><img class='profile-img' expr:alt='data:messages.myPhoto' expr:height='data:photo.height' expr:src='data:photo.url' expr:width='data:photo.width'/></a>
</b:if>

<dl class='profile-datablock'>
<dt class='profile-data'>
<a class='profile-name-link g-profile' expr:href='data:userUrl' expr:style='"background-image: url(" + data:profileLogo + ");"' rel='author'>
<data:displayname/>
</a>
<b:if cond='data:hasgoogleprofile'>
<br/>
<div class='g-follow' data-annotation='bubble' data-height='20' expr:data-href='data:userUrl'/>
</b:if>
</dt>

<b:if cond='data:showlocation'>
<dd class='profile-data'><data:location/></dd>
</b:if>

<b:if cond='data:aboutme != ""'><dd class='profile-textblock'><data:aboutme/></dd></b:if>
</dl>
<a class='profile-link' expr:href='data:userUrl' rel='author'><data:viewProfileMsg/></a>
</b:if>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
<div>
<b:section class='sidebar' id='sidebar2' maxwidgets='' showaddelement='yes'>
</b:section>
<b:section class='sidebar' id='sidebar3' maxwidgets='' showaddelement='yes'>
</b:section>
</div>
</aside>


<div class="col-7">
<div id="banner-placeholder">
<b:if cond='data:blog.pageType == "index"'>
<div>
<b:section class='banner' id='banner' maxwidgets='1' showaddelement='no'>
</b:section>
</div>
</b:if>
</div>

<article>
<div>
<b:section class='main' id='main' preferred='yes' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'></b:widget>
</b:section>
</div>
<div class="row">
<div class="col-12 nomargin nopadding">
<b:section class='main sidebar' id='post1' preferred='yes' showaddelement='yes'>

</b:section>
</div>
</div>
<div class="row">
<div class="col-6 nomargin nopadding">
<b:section class='main sidebar' id='post2' preferred='yes' showaddelement='yes'>
<b:widget id='HTML2' locked='false' title='Games' type='HTML' visible='true'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<script> document.write('<div class="recent-post-title"><h2><a href="/search/label/<data:content/>?max-results=10"><data:title/></a></h2></div>');
</script> </b:if>
<div class='widget-content'>
<div class='news_pictures'>
<ul class='news_pictures_list'>

<script>

document.write("<script src=\"/feeds/posts/default/-/<data:content/>?orderby=published&alt=json-in-script&callback=mythumb\"><\/script>");
</script>
</ul>
</div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
</div>
<div class="col-6 nomargin nopadding">
<b:section class='main sidebar' id='post3' preferred='yes' showaddelement='yes'>
<b:widget id='Profile4' locked='false' title='Tajaan' type='Profile' visible='true'>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<b:if cond='data:team'> 
<ul>
<b:loop values='data:authors' var='i'>
<li><a class='profile-name-link g-profile' expr:href='data:i.userUrl' expr:style='"background-image: url(" + data:i.profileLogo + ");"'><data:i.display-name/></a></li>
</b:loop>
</ul>

<b:else/> 

<b:if cond='data:photo.url != ""'>
<a expr:href='data:userUrl'><img class='profile-img' expr:alt='data:messages.myPhoto' expr:height='data:photo.height' expr:src='data:photo.url' expr:width='data:photo.width'/></a>
</b:if>

<dl class='profile-datablock'>
<dt class='profile-data'>
<a class='profile-name-link g-profile' expr:href='data:userUrl' expr:style='"background-image: url(" + data:profileLogo + ");"' rel='author'>
<data:displayname/>
</a>
<b:if cond='data:hasgoogleprofile'>
<br/>
<div class='g-follow' data-annotation='bubble' data-height='20' expr:data-href='data:userUrl'/>
</b:if>
</dt>

<b:if cond='data:showlocation'>
<dd class='profile-data'><data:location/></dd>
</b:if>

<b:if cond='data:aboutme != ""'><dd class='profile-textblock'><data:aboutme/></dd></b:if>
</dl>
<a class='profile-link' expr:href='data:userUrl' rel='author'><data:viewProfileMsg/></a>
</b:if>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
</div>
</article>
</div>



<aside id="right-sidebar col-3">
<div>
<b:section class='sidebar' id='sidebar4' maxwidgets='' showaddelement='yes'>
</b:section>
</div>
<div>
<b:section class='sidebar' id='sidebar5' maxwidgets='' showaddelement='yes'>
</b:section>
<b:section class='sidebar' id='sidebar6' maxwidgets='' showaddelement='yes'>
</b:section>
</div>
</aside>

</div>



<footer>
<div>
<div>
<b:section class='footer1' id='footer1' maxwidgets='' showaddelement='yes'>
</b:section>
</div>
<div>
<b:section class='footer2' id='footer2' maxwidgets='' showaddelement='yes'>
</b:section>
</div>
<div>
<b:section class='footer3' id='footer3' maxwidgets='' showaddelement='yes'>
</b:section>
</div>
</div>
<div class="copyrights">
Copyrights © 2015 1Media.my
</div>
</footer>

</div>

</body>
</html>
<b:if cond='data:blog.pageType == "index"'> <data:blog.pageTitle/> <b:else/> <b:if cond='data:blog.pageType != "error_page"'> <data:blog.pageName/> | <data:blog.title/> <b:else/> Page Not Found | <data:blog.title/> </b:if> </b:if> <![CDATA[ * { box-sizing: border-box; } .row::after { content: ""; clear: both; display: block; } [class*="col-"] { float: left; padding: 15px; } [class*="col-"] { width: 100%; } .center{ margin: 0 auto; } .nomargin{ margin:0 } .nopadding{ padding:0 } @media only screen and (min-width: 768px) { .col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} .col-4 {width: 33.33%;} .col-5 {width: 41.66%;} .col-6 {width: 50%;} .col-7 {width: 58.33%;} .col-8 {width: 66.66%;} .col-9 {width: 75%;} .col-10 {width: 83.33%;} .col-11 {width: 91.66%;} .col-12 {width: 100%;} body { background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjClokbBoMcanWhdc7-KZzZAs8s5cd_PBhqg6k_3MjfaHrChdIMGizft9qeDRkg5e4ua6skqS1B3u3NdF02fZAHmoQZlO6wbXf6J7fg_yUsv-tJbU9EaQuZe9VfAA7gFdtOrHboUJva3mO2/s1600/sihitamtam.png') fixed; font-family:arial; margin:0; padding:0; width:100%; } #main-container{ margin:0 auto; padding:0; background:white; padding:0 } } /* Header */ header{ order:1; } #top-header{ background:#57595A; border-top: 3px red solid; } #menu, #social-media{ display:inline-block; margin: 0; padding: 0; } #menu{ padding-left:30px; } .menu-item{ display: inline-block; padding: 7px 10px; color: #E0E0E0; font-size:100%; font-weight: bold; } .menu-item:hover{ background:red; color:white; } #social-media{ text-align: right; } .social{ display: inline-block; padding: 7px 10px; background-color: #3A3A3A; color: #57595A; font-weight: bold; margin:0; } .social:hover{ color:white; } .facebook:hover{ background-color: #3b5998; } .twitter:hover{ background-color: #1da1f2; } .insta:hover{ background-color: #405de6; } #ad-top img{ width:100%; } #logo img{ padding-left: 30px } #ad-top{ text-align: right; } #cat-menu { background: #EEEEEE; padding: 0 15px; } #cat-menu a{ text-decoration:none; font-weight: bold; } #cat-menu .btn{ background-color: #EEE; transition: background-color 0.5s; color 0.5s; color:black } #cat-menu .btn:hover{ background-color: red; color: white; } #cat-menu .cat-menu-1{ display:inline-block; } #cat-menu > .cat-menu-1 > a > div.btn{ padding: 15px; } #cat-menu > .cat-menu-1 > div{ display:none; margin-top: -30px; -webkit-transition: margin-top 2s; transition: margin-top 2s; } #cat-menu .cat-menu-1:hover > div { display: block; position: absolute; margin-top: 0; margin: 0; background-color: #CCC; z-index: 1; } #cat-menu .cat-menu-1:hover > div > div.cat-menu-2 > a > div.btn{ padding: 15px } #cat-menu .cat-menu-1:hover > div > div.cat-menu-2:hover > a > div.btn{ background:red; color:white; display: block; } #cat-menu .cat-menu-1:hover > div > div.cat-menu-2 > div{ display: none; } #cat-menu .cat-menu-1:hover > div > div.cat-menu-2:hover > div { display: block; position: absolute; background-color: #AAA; z-index: 1; } #cat-menu .cat-menu-1:hover > div > div.cat-menu-2:hover > div > div.cat-menu-3 > a > div.btn{ padding:15px; } div.contoh{ width: 10px; height: 10px; background-color: yellow; transition: width 2s, height 5s; } div.contoh:hover{ width: 400px; height: 500px; } /* Content */ #content{ order:2; } .jump-link{ text-align:right; } .jump-link a { background: red ; padding: 10px ; color: white ; text-decoration: none ; border-radius: 22px ; } /* Article */ article { } post-title{ } /* Sidebar */ aside { } aside h2 { background: #262424; font-family: sans-serif; border-bottom: 2px solid #F2B25C; color: white; padding: 2px; } .sidebar h2{ color: #FFF; margin: 0 0 10px 0; padding: 6px; text-transform: uppercase; position: relative; background: #FF120C; font-size: 14pt; } .widget h2:after{ content: no-close-quote; position: absolute; width: 0px; height: 0px; bottom: -6px; left: 22px; border-left: 6px solid rgba(0, 0, 0, 0); border-right: 6px solid rgba(0, 0, 0, 0); border-top: 6px solid #FF120C; } /* Footer */ footer { order:3; } @-webkit-keyframes fade-down-in, @keyframes fade-down-in{ from {background:white} to {background:grey} ]]>

Asrar Coding Notes

11 November 2016

Coding paling stable setakat 11-11-2016 3:48pm.

Tiada ulasan:

Catat Ulasan

Games

Tajaan

Tajaan