Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html>
- <head>
- <base target="_blank"/>
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
- <link href="https://4.bp.blogspot.com/-BV29jb6MouE/WDz96emgbmI/AAAAAAAAFuQ/diqXjYGngNca8yjYhtJ0ZfVycMgn0G24QCLcB/s1600/kicon.jpg" rel="icon" type="image/x-icon"/>
- <title>Kio</title>
- <!-- google fonts -->
- <link href="https://fonts.googleapis.com/css?family=Quicksand|Source+Sans+Pro" rel="stylesheet"/>
- <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet"/>
- <link href='https://fonts.googleapis.com/css?family=Catamaran' rel='stylesheet'/>
- <style type="text/css">
- /* body
- ----------------------------------------------- */
- #navbar-iframe {
- display: none !important;
- }
- body {
- background:#fdfdfd;
- margin:0px;
- font-family: 'Quicksand', sans-serif;
- font-size: 13px;
- color: #444444;
- letter-spacing:1px;
- overflow-x:hidden;
- oveflow-y:scroll;
- text-align:justify;
- }
- a:link,a:visited {
- -webkit-transition: all 0.5s ease-in-out;
- -moz-transition: all 0.5s ease-in-out;
- -o-transition: all 0.5s ease-in-out;
- -ms-transition: all 0.5s ease-in-out;
- transition: all 0.5s ease-in-out;
- text-decoration:none;
- color:#444444;
- padding:2px;
- }
- a:hover {
- color:#ccc;
- }
- /* header
- ----------------------------------------------- */
- .header{
- font-size:40px;
- margin-top:50px;
- margin-bottom:60px;
- text-align:center;
- }
- /* menu
- ----------------------------------------------- */
- .menu{
- text-align:center;
- width:100%
- }
- a.menu-kio{
- margin-bottom:5px;
- font-family: 'Quicksand', sans-serif;
- background:#f7f7f7;
- padding:10px;
- cursor:hand;
- -webkit-border-top-left-radius: 3px;
- -webkit-border-top-right-radius: 3px;
- -moz-border-radius-topleft: 3px;
- -moz-border-radius-topright: 3px;
- border-top-left-radius: 3px;
- border-top-right-radius: 3px;
- width:8%;
- display:inline-block;
- text-align:center;
- }
- /* blog
- ----------------------------------------------- */
- .blog-body{
- width:80%;
- padding:1%;
- background:#fff;
- padding:10px;
- border:2px solid #f9f9f9;
- box-shadow:0px 0px 0px 4px #ffffff;
- }
- .article{
- padding:1%;
- width:65%;
- float:left;
- text-align:justify;
- }
- .post-title{
- background:#f9f9f9;
- font-size:120%;
- text-align:center;
- padding-left:20px;
- padding-top:5px;
- padding-bottom:5px;
- margin-bottom:10px;
- }
- .info{
- text-transform:uppercase;
- font-size:10px;
- color:#444444;
- font-family: 'Quicksand', sans-serif;
- }
- .blog-entry{
- font-family: 'Catamaran', sans-serif;
- font-size:13px;
- color:#444444;
- letter-spacing:1px;
- margin-top:20px;
- }
- .blog-entry img{
- max-width:100%;
- margin-bottom:10px;
- }
- .blogger-labels{
- background:#f8f8f8;
- text-align:center;
- text-transform:uppercase;
- font-size:10px;
- padding:2px;
- color:#444444;
- font-family: 'Quicksand', sans-serif;
- margin-top:20px;
- }
- /* sidebar
- ----------------------------------------------- */
- .sidebar{
- padding:2%;
- width:28%;
- border-left:1px solid #f5f5f5;
- float:right;
- text-align:justify;
- }
- h2{
- font-weight:normal;
- border-bottom:1px solid #f6f6f6;
- font-size:150%;
- text-align:center;
- padding-left:20px;
- padding-top:5px;
- padding-bottom:5px;
- margin-bottom:10px;
- margin-top:30px;
- }
- .label a{
- text-transform:uppercase;
- padding-left:10px;
- padding-right:10px;
- background: #fcfcfc;
- padding:10px;
- width:42%;
- margin-bottom:4px;
- display:inline-block;
- font-size:11px;
- }
- a.latest-entries-button{
- background:#fcfcfc;
- display:block;
- border:0px;
- padding:5px;
- margin:0px;
- margin-bottom:2px;
- }
- #contact{
- width:30%;
- border:1px solid #f7f7f7;
- padding-top:30px;
- height:40px;
- margin-bottom:5px;
- }
- /* footer
- ----------------------------------------------- */
- .post-footer{
- text-align:center;
- border-top:1px solid #f3f3f3;
- padding-top:10px;
- margin-bottom:30px;
- }
- .credit{
- text-align:center;
- text-transform:uppercase;
- font-size:10px;
- padding:2px;
- color:#444444;
- font-family: 'Quicksand', sans-serif;
- margin-top:20px;
- margin-bottom:20px;
- }
- /* mobile view
- ----------------------------------------------- */
- @media only screen and (max-width: 800px) {
- a.menu-kio{
- font-size:90%;
- width:12%;
- background:#f9f9f9;
- }
- .label a{
- width:90%;
- }
- }
- @media only screen and (max-width: 500px) {
- .menu{
- margin-bottom:30px;
- }
- a.menu-kio{
- width:95%;
- font-size:100%;
- display:block;
- background:transparent;
- border-bottom:1px solid #f3f3f3;
- }
- .blog-body{
- width:95%;
- backround:transparent;
- shadow:none;
- border:none;
- padding:0px;
- margin:0px;}
- .article{
- width:95%;
- }
- .info{display:none}
- .sidebar{
- width:95%;
- border-left:none}
- }
- </style> <meta content='width=device-width, initial-scale=1.0' name='viewport'/>
- </head>
- <body>
- <!-- header -->
- <div class="header">Kio</div>
- <!-- menu -->
- <div class="menu"><center>
- <a class="menu-kio" onClick="document.getElementById('main').innerHTML=document.getElementById('home').innerHTML" title="">Home</a>
- <a class="menu-kio" onClick="document.getElementById('main').innerHTML=document.getElementById('about').innerHTML" title="">About</a>
- <a class="menu-kio" onClick="document.getElementById('main').innerHTML=document.getElementById('page3').innerHTML" title="">Page 3</a>
- <a class="menu-kio" onClick="document.getElementById('main').innerHTML=document.getElementById('page4').innerHTML" title="">Page 4</a>
- <a class="menu-kio" href="http://www.blogger.com/follow-blog.g?blogID=<$blogID$>" title="">+ Follow</a></center>
- </div>
- <!-- wrapper -->
- <center>
- <div class="blog-body">
- <!-- blog -->
- <div id="main" class="article">
- <blogger>
- <div class="post-title">
- <a href="<$BlogItemPermalinkURL$>"</a><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></a></div>
- <center>
- <span class="info">
- posted by <$BlogItemAuthor$>
- <span class="fa fa-calendar"></span> <$BlogItemDateTime$>
- <span class="fa fa-comments"></span>
- <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> comments</a>
- </span>
- </center>
- <div class="blog-entry">
- <$BlogItemBody$>
- </div>
- <div class="post-footer">
- <a href="https://www.facebook.com/sharer/sharer.php?u=" class="fa fa-facebook-f"></a>
- <a href="hhttps://twitter.com/home?status=" class="fa fa-twitter"></a>
- <a href="https://plus.google.com/share?url=" class="fa fa-google-plus"></a>
- <a href="https://pinterest.com/pin/create/button/?url=&media=&description=" class=" fa fa-pinterest-p"></a>
- <a href="https://pinterest.com/pin/create/button/?url=&media=&description=" class="fa fa-envelope"></a>
- </div>
- </blogger>
- <span style="float:right;"><olderposts><a href=<$OlderPosts$>><span class="fa fa-arrow-right"></span></a></a> </OlderPosts></span>
- <span style="float:rleft;"><newerposts><a href=<$NewerPosts$>> <span class="fa fa-arrow-left"></span></a></NewerPosts></span>
- </div>
- <!-- sidebar -->
- <div class="sidebar">
- <!-- 1 -->
- <center><img border="0" src="https://4.bp.blogspot.com/-aj1NA-sTiso/WDs4LS_xYFI/AAAAAAAAFqQ/xuh9lQ21TNUw-FHAI74SW67u9T1dOw53gCLcB/s1600/sidebar.png" width="100%" / ></center>
- <br />Shazwana, 20. Menulis blog sejak Mac 2011. Moto hidup adalah selagi saya tidak makan saya tidak boleh bergerak bye.
- <!-- 2 -->
- <h2> contact me </h2>
- <center>
- <a href="" id="contact" class="fa fa-facebook-f"></a>
- <a href="" id="contact" class="fa fa-twitter"></a>
- <a href="" id="contact" class="fa fa-google-plus"></a>
- <a href="" id="contact" class="fa fa-pinterest-p"></a>
- <a href="" id="contact" class="fa fa-envelope"></a>
- <a href="" id="contact" class="fa fa-tumblr"></a>
- </center>
- <!-- 3 -->
- <h2> instagram </h2>
- <!-- LightWidget WIDGET --><script src="//lightwidget.com/widgets/lightwidget.js"></script><iframe src="//lightwidget.com/widgets/2521b051bd5d517eb9bf608b506e7352.html" scrolling="no" allowtransparency="true" class="lightwidget-widget" style="width: 100%; border: 0; overflow: hidden;"></iframe>
- get your instagram widget from https://lightwidget.com/ !
- <h2> blog archive </h2>
- <!-- 4 -->
- <center>
- <BloggerPreviousItems>
- <a class="latest-entries-button" href="<$BlogItemPermalinkURL$>">
- <$BlogPreviousItemTitle$>
- </a>
- </BloggerPreviousItems>
- </center>
- <!-- 5 -->
- <h2> categories </h2><center>
- <div class="label">
- <a href='/search/label/YOURCATEGORYHERE/' target='_blank'>category</a>
- <a href='/search/label/YOURCATEGORYHERE/' target='_blank'>category</a><br/>
- <a href='/search/label/YOURCATEGORYHERE/' target='_blank'>category</a>
- <a href='/search/label/YOURCATEGORYHERE/' target='_blank'>category</a>
- </div>
- </center>
- </div>
- <div style="clear:both"></div>
- <div style="clear:both"></div>
- </div></div>
- <div class="credit">
- design by <a href="http://wanaseoby.com"/>Wanaseoby</a>
- </div>
- <!-------paging------->
- <!-------------------PAGE/HOME------------------>
- <div id="home" style="display: none;">
- <blogger>
- <div class="post-title">
- <a href="<$BlogItemPermalinkURL$>"</a><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></a></div>
- <center>
- <span class="info">
- posted by <$BlogItemAuthor$>
- <span class="fa fa-calendar"></span> <$BlogItemDateTime$>
- <span class="fa fa-comments"></span>
- <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> comments</a>
- </span>
- </center>
- <div class="blog-entry">
- <$BlogItemBody$>
- </div>
- <div class="post-footer">
- <a href="https://www.facebook.com/sharer/sharer.php?u=" class="fa fa-facebook-f"></a>
- <a href="hhttps://twitter.com/home?status=" class="fa fa-twitter"></a>
- <a href="https://plus.google.com/share?url=" class="fa fa-google-plus"></a>
- <a href="https://pinterest.com/pin/create/button/?url=&media=&description=" class=" fa fa-pinterest-p"></a>
- <a href="https://pinterest.com/pin/create/button/?url=&media=&description=" class="fa fa-envelope"></a>
- </div>
- </blogger>
- <span style="float:right;"><olderposts><a href=<$OlderPosts$>><span class="fa fa-arrow-right"></span></a></a> </OlderPosts></span>
- <span style="float:rleft;"><newerposts><a href=<$NewerPosts$>> <span class="fa fa-arrow-left"></span></a></NewerPosts></span>
- </div>
- <!-------------------PAGE/ABOUT------------------>
- <div id="about" style="display: none;">
- <div class="post-title">About Me</div>
- Insert your about content here.
- </div>
- <!-------------------PAGE/PAGE3------------------>
- <div id="page3" style="display: none;">
- <div class="post-title">Page 3</div>
- Insert your content here
- </div>
- <!-------------------PAGE/PAGE4------------------>
- <div id="page4" style="display: none;">
- <div class="post-title">Page 4</div>
- Insert your content here
- </div>
- <!-------------------PAGING END------------------>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement