SHARE
TWEET

Kio 2.0

wanasby Sep 6th, 2017 59 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <html>
  2. <head>
  3.  
  4. <base target="_blank"/>
  5. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  6. <link href="https://4.bp.blogspot.com/-BV29jb6MouE/WDz96emgbmI/AAAAAAAAFuQ/diqXjYGngNca8yjYhtJ0ZfVycMgn0G24QCLcB/s1600/kicon.jpg" rel="icon" type="image/x-icon"/>
  7.  
  8. <title>Kio</title>
  9.  
  10. <!-- google fonts -->
  11. <link href="https://fonts.googleapis.com/css?family=Quicksand|Source+Sans+Pro" rel="stylesheet"/>
  12. <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet"/>
  13. <link href='https://fonts.googleapis.com/css?family=Catamaran' rel='stylesheet'/>
  14.  
  15.  
  16. <style type="text/css">
  17.  
  18. /* body
  19. ----------------------------------------------- */
  20.  
  21. #navbar-iframe {
  22. display: none !important;
  23. }
  24.  
  25. body {
  26. background:#fdfdfd;
  27. margin:0px;
  28. font-family: 'Quicksand', sans-serif;
  29. font-size: 13px;
  30. color: #444444;
  31. letter-spacing:1px;
  32. overflow-x:hidden;
  33. oveflow-y:scroll;
  34. text-align:justify;
  35. }
  36.  
  37. a:link,a:visited {
  38. -webkit-transition: all 0.5s ease-in-out;
  39. -moz-transition: all 0.5s ease-in-out;
  40. -o-transition: all 0.5s ease-in-out;
  41. -ms-transition: all 0.5s ease-in-out;
  42. transition: all 0.5s ease-in-out;
  43. text-decoration:none;
  44. color:#444444;
  45. padding:2px;
  46. }
  47.  
  48. a:hover {
  49. color:#ccc;
  50. }
  51.  
  52. /* header
  53. ----------------------------------------------- */
  54.  
  55. .header{
  56. font-size:40px;
  57. margin-top:50px;
  58. margin-bottom:60px;
  59. text-align:center;
  60. }
  61.  
  62.  
  63. /* menu
  64. ----------------------------------------------- */
  65. .menu{
  66. text-align:center;
  67. width:100%
  68. }
  69.  
  70. a.menu-kio{
  71. margin-bottom:5px;
  72. font-family: 'Quicksand', sans-serif;
  73. background:#f7f7f7;
  74. padding:10px;
  75. cursor:hand;
  76. -webkit-border-top-left-radius: 3px;
  77. -webkit-border-top-right-radius: 3px;
  78. -moz-border-radius-topleft: 3px;
  79. -moz-border-radius-topright: 3px;
  80. border-top-left-radius: 3px;
  81. border-top-right-radius: 3px;
  82. width:8%;
  83. display:inline-block;
  84. text-align:center;
  85. }
  86.  
  87.  
  88. /* blog
  89. ----------------------------------------------- */
  90. .blog-body{
  91. width:80%;
  92. padding:1%;
  93. background:#fff;
  94. padding:10px;
  95. border:2px solid #f9f9f9;
  96. box-shadow:0px 0px 0px 4px #ffffff;
  97. }
  98.  
  99. .article{
  100. padding:1%;
  101. width:65%;
  102. float:left;
  103. text-align:justify;
  104. }
  105.  
  106. .post-title{
  107. background:#f9f9f9;
  108. font-size:120%;
  109. text-align:center;
  110. padding-left:20px;
  111. padding-top:5px;
  112. padding-bottom:5px;
  113. margin-bottom:10px;
  114. }
  115.  
  116. .info{
  117. text-transform:uppercase;
  118. font-size:10px;
  119. color:#444444;
  120. font-family: 'Quicksand', sans-serif;
  121. }
  122.  
  123. .blog-entry{
  124. font-family: 'Catamaran', sans-serif;
  125. font-size:13px;
  126. color:#444444;
  127. letter-spacing:1px;
  128. margin-top:20px;
  129. }
  130.  
  131. .blog-entry img{
  132. max-width:100%;
  133. margin-bottom:10px;
  134. }
  135.  
  136. .blogger-labels{
  137. background:#f8f8f8;
  138. text-align:center;
  139. text-transform:uppercase;
  140. font-size:10px;
  141. padding:2px;
  142. color:#444444;
  143. font-family: 'Quicksand', sans-serif;
  144. margin-top:20px;
  145. }
  146.  
  147.  
  148. /* sidebar
  149. ----------------------------------------------- */
  150.  
  151. .sidebar{
  152. padding:2%;
  153. width:28%;
  154. border-left:1px solid #f5f5f5;
  155. float:right;
  156. text-align:justify;
  157. }
  158.  
  159. h2{
  160. font-weight:normal;
  161. border-bottom:1px solid #f6f6f6;
  162. font-size:150%;
  163. text-align:center;
  164. padding-left:20px;
  165. padding-top:5px;
  166. padding-bottom:5px;
  167. margin-bottom:10px;
  168. margin-top:30px;
  169. }
  170.  
  171.  
  172. .label a{
  173. text-transform:uppercase;
  174. padding-left:10px;
  175. padding-right:10px;
  176. background: #fcfcfc;
  177. padding:10px;
  178. width:42%;
  179. margin-bottom:4px;
  180. display:inline-block;
  181. font-size:11px;
  182. }
  183.  
  184. a.latest-entries-button{
  185. background:#fcfcfc;
  186. display:block;
  187. border:0px;
  188. padding:5px;
  189. margin:0px;
  190. margin-bottom:2px;
  191. }
  192.  
  193.  
  194. #contact{
  195. width:30%;
  196. border:1px solid #f7f7f7;
  197. padding-top:30px;
  198. height:40px;
  199. margin-bottom:5px;
  200. }
  201. /* footer
  202. ----------------------------------------------- */
  203. .post-footer{
  204. text-align:center;
  205. border-top:1px solid #f3f3f3;
  206. padding-top:10px;
  207. margin-bottom:30px;
  208. }
  209.  
  210. .credit{
  211. text-align:center;
  212. text-transform:uppercase;
  213. font-size:10px;
  214. padding:2px;
  215. color:#444444;
  216. font-family: 'Quicksand', sans-serif;
  217. margin-top:20px;
  218. margin-bottom:20px;
  219. }
  220.  
  221. /* mobile view
  222. ----------------------------------------------- */
  223. @media only screen and (max-width: 800px) {
  224. a.menu-kio{
  225. font-size:90%;
  226. width:12%;
  227. background:#f9f9f9;
  228. }
  229.  
  230. .label a{
  231. width:90%;
  232. }
  233.  
  234. }
  235.  
  236. @media only screen and (max-width: 500px) {
  237.  
  238. .menu{
  239. margin-bottom:30px;
  240. }
  241.  
  242. a.menu-kio{
  243. width:95%;
  244. font-size:100%;
  245. display:block;
  246. background:transparent;
  247. border-bottom:1px solid #f3f3f3;
  248. }
  249.  
  250. .blog-body{
  251. width:95%;
  252. backround:transparent;
  253. shadow:none;
  254. border:none;
  255. padding:0px;
  256. margin:0px;}
  257.  
  258.  
  259. .article{
  260. width:95%;
  261. }
  262.  
  263. .info{display:none}
  264.  
  265. .sidebar{
  266. width:95%;
  267. border-left:none}
  268.  
  269.  
  270.  
  271. }
  272. </style> <meta content='width=device-width, initial-scale=1.0' name='viewport'/>
  273.  
  274. </head>
  275. <body>
  276.  
  277. <!-- header -->
  278. <div class="header">Kio</div>
  279.  
  280.  
  281. <!-- menu -->
  282.  
  283. <div class="menu"><center>
  284. <a class="menu-kio" onClick="document.getElementById('main').innerHTML=document.getElementById('home').innerHTML" title="">Home</a>
  285. <a class="menu-kio" onClick="document.getElementById('main').innerHTML=document.getElementById('about').innerHTML" title="">About</a>
  286. <a class="menu-kio" onClick="document.getElementById('main').innerHTML=document.getElementById('page3').innerHTML" title="">Page 3</a>
  287. <a class="menu-kio" onClick="document.getElementById('main').innerHTML=document.getElementById('page4').innerHTML" title="">Page 4</a>
  288. <a class="menu-kio"  href="http://www.blogger.com/follow-blog.g?blogID=<$blogID$>" title="">+ Follow</a></center>
  289. </div>
  290.  
  291. <!-- wrapper -->
  292. <center>
  293. <div class="blog-body">
  294.  
  295.  
  296. <!-- blog -->
  297. <div id="main" class="article">
  298. <blogger>
  299.  
  300. <div class="post-title">
  301. <a href="<$BlogItemPermalinkURL$>"</a><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></a></div>
  302.  
  303. <center>
  304. <span class="info">
  305. posted by  <$BlogItemAuthor$>
  306. <span class="fa fa-calendar"></span> <$BlogItemDateTime$>
  307. <span class="fa fa-comments"></span>
  308. <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> comments</a>
  309. </span>
  310. </center>
  311.  
  312. <div class="blog-entry">
  313.  <$BlogItemBody$>
  314. </div>
  315.  
  316. <div class="post-footer">
  317. <a href="https://www.facebook.com/sharer/sharer.php?u=" class="fa fa-facebook-f"></a>
  318. <a href="hhttps://twitter.com/home?status=" class="fa fa-twitter"></a>
  319. <a href="https://plus.google.com/share?url=" class="fa fa-google-plus"></a>
  320. <a href="https://pinterest.com/pin/create/button/?url=&media=&description=" class=" fa fa-pinterest-p"></a>
  321. <a href="https://pinterest.com/pin/create/button/?url=&media=&description=" class="fa fa-envelope"></a>
  322. </div>
  323.  
  324. </blogger>
  325. <span style="float:right;"><olderposts><a href=<$OlderPosts$>><span class="fa fa-arrow-right"></span></a></a> </OlderPosts></span>
  326. <span style="float:rleft;"><newerposts><a href=<$NewerPosts$>> <span class="fa fa-arrow-left"></span></a></NewerPosts></span>
  327. </div>
  328.  
  329. <!-- sidebar -->
  330. <div class="sidebar">
  331.  
  332. <!-- 1 -->
  333. <center><img border="0" src="https://4.bp.blogspot.com/-aj1NA-sTiso/WDs4LS_xYFI/AAAAAAAAFqQ/xuh9lQ21TNUw-FHAI74SW67u9T1dOw53gCLcB/s1600/sidebar.png" width="100%" / ></center>
  334.  
  335. <br />Shazwana, 20. Menulis blog sejak Mac 2011. Moto hidup adalah selagi saya tidak makan saya tidak boleh bergerak bye.
  336.  
  337.  
  338. <!-- 2 -->
  339.  
  340. <h2> contact me  </h2>
  341. <center>
  342. <a href="" id="contact" class="fa fa-facebook-f"></a>
  343. <a href=""  id="contact" class="fa fa-twitter"></a>
  344. <a href="" id="contact" class="fa fa-google-plus"></a>
  345. <a href="" id="contact" class="fa fa-pinterest-p"></a>
  346. <a href="" id="contact"  class="fa fa-envelope"></a>
  347. <a href="" id="contact"  class="fa fa-tumblr"></a>
  348. </center>
  349.  
  350.  
  351. <!-- 3 -->
  352.  
  353. <h2> instagram </h2>
  354. <!-- 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>
  355. get your instagram widget from https://lightwidget.com/ !
  356. <h2> blog archive </h2>
  357.  
  358.  
  359.  
  360. <!-- 4 -->
  361. <center>
  362. <BloggerPreviousItems>
  363. <a class="latest-entries-button" href="<$BlogItemPermalinkURL$>">
  364. <$BlogPreviousItemTitle$>
  365. </a>
  366. </BloggerPreviousItems>
  367. </center>
  368.  
  369.  
  370. <!-- 5 -->
  371.  
  372. <h2> categories </h2><center>
  373. <div class="label">
  374. <a href='/search/label/YOURCATEGORYHERE/' target='_blank'>category</a>
  375. <a href='/search/label/YOURCATEGORYHERE/' target='_blank'>category</a><br/>
  376. <a href='/search/label/YOURCATEGORYHERE/' target='_blank'>category</a>
  377. <a href='/search/label/YOURCATEGORYHERE/' target='_blank'>category</a>
  378. </div>
  379. </center>
  380.  
  381.  
  382. </div>
  383. <div style="clear:both"></div>
  384. <div style="clear:both"></div>
  385.  
  386. </div></div>
  387. <div class="credit">
  388. design by <a href="http://wanaseoby.com"/>Wanaseoby</a>
  389. </div>
  390.  
  391. <!-------paging------->
  392.  
  393.  
  394. <!-------------------PAGE/HOME------------------>
  395.  
  396. <div id="home" style="display: none;">
  397. <blogger>
  398.  
  399. <div class="post-title">
  400. <a href="<$BlogItemPermalinkURL$>"</a><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></a></div>
  401.  
  402. <center>
  403. <span class="info">
  404. posted by  <$BlogItemAuthor$>
  405. <span class="fa fa-calendar"></span> <$BlogItemDateTime$>
  406. <span class="fa fa-comments"></span>
  407. <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> comments</a>
  408. </span>
  409. </center>
  410.  
  411. <div class="blog-entry">
  412.  <$BlogItemBody$>
  413. </div>
  414.  
  415. <div class="post-footer">
  416. <a href="https://www.facebook.com/sharer/sharer.php?u=" class="fa fa-facebook-f"></a>
  417. <a href="hhttps://twitter.com/home?status=" class="fa fa-twitter"></a>
  418. <a href="https://plus.google.com/share?url=" class="fa fa-google-plus"></a>
  419. <a href="https://pinterest.com/pin/create/button/?url=&media=&description=" class=" fa fa-pinterest-p"></a>
  420. <a href="https://pinterest.com/pin/create/button/?url=&media=&description=" class="fa fa-envelope"></a>
  421. </div>
  422.  
  423. </blogger>
  424. <span style="float:right;"><olderposts><a href=<$OlderPosts$>><span class="fa fa-arrow-right"></span></a></a> </OlderPosts></span>
  425. <span style="float:rleft;"><newerposts><a href=<$NewerPosts$>> <span class="fa fa-arrow-left"></span></a></NewerPosts></span>
  426.  
  427. </div>
  428.  
  429.  
  430. <!-------------------PAGE/ABOUT------------------>
  431. <div id="about" style="display: none;">
  432. <div class="post-title">About Me</div>
  433. Insert your about content here.
  434. </div>
  435.  
  436.  
  437.  
  438. <!-------------------PAGE/PAGE3------------------>
  439.  
  440.  
  441. <div id="page3" style="display: none;">
  442. <div class="post-title">Page 3</div>
  443. Insert your content here
  444. </div>
  445.  
  446.  
  447. <!-------------------PAGE/PAGE4------------------>
  448.  
  449.  
  450. <div id="page4" style="display: none;">
  451. <div class="post-title">Page 4</div>
  452. Insert your content here
  453. </div>
  454.  
  455.  
  456. <!-------------------PAGING END------------------>
  457.  
  458. </body>
  459. </html>
RAW Paste Data
Pastebin PRO Autumn Special!
Get 40% OFF on Pastebin PRO accounts!
Top