daily pastebin goal
46%
SHARE
TWEET

DARKETTE - Reszponzív Blogspot klasszikus sötét kinézet #5

cyberthea Jul 31st, 2017 (edited) 139 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!-- a témát készítette: Thea (http://themesbythea.blogspot.hu ÉS http://mindenurlfoglalt.blogspot.hu) -->
  2.  
  3. <html>
  4. <head>
  5.  
  6. <!-- a linkek új ablakban nyílnak meg -->
  7. <base target="_blank">
  8.  
  9. <!-- emiatt a sorocska miatt működnek az ikonok (ne töröld) -->
  10. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  11.  
  12. <!-- emiatt a sorocska miatt működnek a betűtípusok (ne töröld) -->
  13. <link href="https://fonts.googleapis.com/css?family=Barrio|Dosis:200,300,400,500,600,700,800&amp;subset=latin-ext" rel="stylesheet">
  14.  
  15. <!-- favicon (a href=" " közötti linket cseréld ki a saját faviconodra-->
  16. <link href="https://goo.gl/s4JG6z" rel="icon" type="image/x-icon"/>
  17.  
  18. <title><$blogpagetitle$></title>
  19.  
  20. <style type="text/css">
  21.  
  22. /* mindenegyben, például linkek, félkövér, kijelölés stb. kinézete
  23. ----------------------------------------------- */
  24. body {
  25. background-color: #fff;
  26. font-family: 'Dosis', sans-serif;
  27. font-size: 15px;
  28. color: #fff;
  29. letter-spacing: 1px;
  30. overflow-x: hidden;
  31. oveflow-y: scroll;
  32. text-align: justify;
  33. cursor:url("https://goo.gl/af3Xy3"),default;  /* ha le szeretnéd cserélni a kurzort, a zárójelben lévő linket írd át */
  34. }
  35.  
  36. a:link, a:visited {
  37. color: #fff;
  38. text-decoration: none;
  39. -webkit-transition: all 0.5s ease-in-out;
  40. -moz-transition: all 0.5s ease-in-out;
  41. -o-transition: all 0.5s ease-in-out;
  42. -ms-transition: all 0.5s ease-in-out;
  43. transition: all 0.5s ease-in-out;
  44. }
  45.  
  46. a:hover {
  47. text-decoration: line-through;
  48. cursor:url("https://goo.gl/xHy9Js"),text; /* ha le szeretnéd cserélni a kurzort, ami a linkekre mutat, a zárójelben lévő linket írd át */
  49. }
  50.  
  51. b, strong {
  52. font-weight: bold;
  53. color: #fff;
  54. }
  55.  
  56. i, em {
  57. font-style: italic;
  58. color: #fff;
  59. }
  60.  
  61. u {
  62. text-decoration: none;
  63. border-bottom: 1px solid #fff;
  64. }
  65.  
  66. s, strike {
  67. color: #fff;
  68. padding: 1px;
  69. }
  70.  
  71. blockquote {
  72. background: #191919;
  73. border-top: 1px solid #444444;
  74. border-bottom: 1px solid #444444;
  75. font-style: italic;
  76. padding: 10px;
  77. text-align: center;
  78. }
  79.  
  80. ::-moz-selection {
  81. background-color: #ababab; }
  82. ::selection {
  83. background-color: #ababab; }
  84.  
  85. ::-webkit-scrollbar {
  86. background: #fff;
  87. width: 3px;
  88. height: 5px;
  89. }
  90.  
  91. ::-webkit-scrollbar-thumb:vertical {
  92. background: #000;
  93. }
  94.  
  95.  
  96. /* navigáció kinézete
  97. ----------------------------------------------- */
  98. .nav {
  99. text-align: center;
  100. width: 100%
  101. }
  102.  
  103. a.nav-dark {
  104. color: #fff;
  105. font-size: 12px;
  106. text-transform: uppercase;
  107. letter-spacing: 2px;
  108. margin-left: 2px;
  109. margin-bottom: 6px;
  110. text-align: center;
  111. width: 42%;
  112. padding: 6px;
  113. display: inline-block;
  114. }
  115.  
  116. a.nav-dark:hover {
  117. color: #fff;
  118. background-color: transparent;
  119. -webkit-transition: all 0.5s ease-in-out;
  120. -moz-transition: all 0.5s ease-in-out;
  121. -o-transition: all 0.5s ease-in-out;
  122. -ms-transition: all 0.5s ease-in-out;
  123. transition: all 0.5s ease-in-out;
  124. }
  125.  
  126.  
  127. /* blog
  128. ----------------------------------------------- */
  129. .blog-body {
  130. width: 90%;
  131. padding: 2px;
  132. background-color: transparent;
  133. color: #fff;
  134. }
  135.  
  136. .article {
  137. background-color: #000;
  138. padding: 1%;
  139. width: 68%;
  140. float: right;
  141. text-align: justify;
  142. color: #fff;
  143. line-height: 23px;
  144. }
  145.  
  146. .post-title {
  147. color: #fff;
  148. font-size: 23px;
  149. margin-bottom: 0px;
  150. text-align: center;
  151. font-weight: bold;
  152. text-transform: uppercase;
  153. }
  154.  
  155. .post-title:hover {
  156. text-decoration: line-through;
  157. }
  158.  
  159. .h4 {
  160. font-family: 'Dosis', sans-serif;
  161. color: #000;
  162. font-weight: normal;
  163. font-size: 13px;
  164. line-height: 15px;
  165. }
  166.  
  167. .info {
  168. width: 220px;
  169. padding: 5px;
  170. background-color: #fff;
  171. z-index: 100;
  172. text-align: justify;
  173. margin-bottom:20px;
  174. color: #000;
  175. }
  176.  
  177. .blog-entry {
  178. font-family: 'Dosis', sans-serif;
  179. font-size: 15px;
  180. color: #fff;
  181. letter-spacing: 1px;
  182. margin-top: 5px;
  183. }
  184.  
  185. .blog-entry img {
  186. max-width: 100%;
  187. padding: 5px;
  188. }
  189.  
  190. img {
  191. max-width: 100%;
  192. padding: 5px;
  193. -webkit-filter: grayscale(100%);
  194. z-index: -9999999999999999999999999px;
  195. -webkit-transition: all 0.9s ease-in-out;
  196. -moz-transition: all 0.9s ease-in-out;
  197. -o-transition: all 0.9s ease-in-out;
  198. -ms-transition: all 0.9s ease-in-out;
  199. transition: all 0.9s ease-in-out;
  200. }
  201.  
  202. img:hover {
  203. -webkit-filter: grayscale(0%);
  204. z-index: -9999999999999999999999999px;
  205. -webkit-transition: all 0.9s ease-in-out;
  206. -moz-transition: all 0.9s ease-in-out;
  207. -o-transition: all 0.9s ease-in-out;
  208. -ms-transition: all 0.9s ease-in-out;
  209. transition: all 0.9s ease-in-out;
  210. }
  211.  
  212. .blogger-labels {
  213. font-size: 0px;
  214. margin-top: 12px;
  215. }
  216.  
  217. .blogger-labels a {
  218. font-family: 'Dosis', sans-serif;
  219. color: #fff;
  220. font-size: 12px;
  221. font-weight: 100;
  222. text-transform: uppercase;
  223. padding: 3px;
  224. margin-right: 5px;
  225. text-decoration: none!important;
  226. }
  227.  
  228. .blogger-labels a:hover {
  229. color: #ababab;
  230. }
  231.  
  232. .blogger-labels a:before {
  233. font-family: FontAwesome;
  234. font-size: 12px;
  235. color: #fff;
  236. content: '\f02b';
  237. margin-right: 3px;
  238. }
  239.  
  240. #meow {
  241. background: #000;
  242. bottom: 10px;
  243. right: 10px;
  244. position: fixed;
  245. padding: 3px;
  246. letter-spacing: 1px;
  247. font-size: 15px;
  248. border-radius: 0px;
  249. -moz-box-shadow: 3px 3px #575757;
  250. -webkit-box-shadow: 3px 3px #575757;
  251. box-shadow: 3px 3px #575757;
  252. opacity:0.9;
  253. }
  254.  
  255. /* oldalsáv
  256. ----------------------------------------------- */
  257. .sidebar {
  258. background-color: #000;
  259. padding: 2%;
  260. width: 23%;
  261. float: left;
  262. text-align: justify;
  263. line-height: 23px;
  264. }
  265.  
  266. h2 {
  267. color: #fff;
  268. font-size: 25px;
  269. font-family: 'Barrio', cursive;
  270. margin-bottom: 5px;
  271. text-align: center;
  272. font-weight: 100;
  273. }
  274.  
  275. .line {
  276. border-top: 2px solid #fff;
  277. width: 100px;
  278. margin-top: -10px;
  279. }
  280.  
  281. .labels a:link, .labels a:visited {
  282. background-color: #ffffff;
  283. color: #000000;
  284. font-size: 12px;
  285. font-family: 'Dosis', sans serif;
  286. font-style: italic;
  287. line-height: 30px;
  288. padding: 4px;
  289. transition: all .5s ease-in-out;
  290. -o-transition: all .5s ease-in-out;
  291. -webkit-transition: all .5s ease-in-out;
  292. -moz-transition: all .5s ease-in-out;
  293. }
  294.  
  295. .labels a:hover, .labels a:active {
  296. color: #000000!important;
  297. }
  298.  
  299. a.affies {
  300. color: #fff;
  301. font-size: 11px;
  302. text-transform: uppercase;
  303. letter-spacing: 2px;
  304. margin-left: 2px;
  305. margin-bottom: 6px;
  306. text-align: center;
  307. width: 42%;
  308. padding:6px;
  309. display: inline-block;
  310. }
  311.  
  312. a.affies:hover {
  313. background-color: transparent;
  314. -webkit-transition: all 0.5s ease-in-out;
  315. -moz-transition: all 0.5s ease-in-out;
  316. -o-transition: all 0.5s ease-in-out;
  317. -ms-transition: all 0.5s ease-in-out;
  318. transition: all 0.5s ease-in-out;
  319. }
  320.  
  321.  
  322. /* mobil kinézet
  323. ----------------------------------------------- */
  324. @media only screen and (max-width: 800px) {
  325. a.nav-dark{
  326. font-size: 90%;
  327. width: 12%;
  328. }
  329.  
  330. .label a{
  331. width: 90%;
  332. }
  333.  
  334. }
  335.  
  336. @media only screen and (max-width: 500px) {
  337.  
  338. .nav{
  339. margin-bottom: 30px;
  340. }
  341.  
  342. a.nav-dark{
  343. width: 40%;
  344. font-size: 100%;
  345. display: inline-block;
  346. background: transparent;
  347. }
  348.  
  349. .blog-body {
  350. width: 95%;
  351. backround-color: #000000;
  352. shadow: none;
  353. border: none;
  354. margin-top: 15px;
  355. padding: 5px;
  356. }
  357.  
  358. .article {
  359. width: 95%;
  360. backround-color: transparent;
  361. }
  362.  
  363. .blog-entry img {
  364. width: 100%;
  365. height: auto;
  366. align: center;
  367. }
  368.  
  369. .sidebar {
  370. width: 93%;
  371. backround-color: transparent;
  372. margin-left:8px;
  373. }
  374.  
  375. }
  376. </style> <meta content='width=device-width, initial-scale=1.0' name='viewport'/>
  377.  
  378. <br>
  379. </head><body>
  380.  
  381. <center>
  382.  
  383. <div class="blog-body">
  384. <!--- bejegyzések - ehhez itt ne nyúlj ---!>
  385. <div id="meow">
  386. <a href="http://themesbythea.blogspot.hu/" target="_blank">☾⋆</a>
  387. </div>
  388. <div id="main" class="article">
  389. <blogger>
  390. <div class="post-title">
  391. <a href="<$BlogItemPermalinkURL$>"</a><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></a></div>
  392. <br>
  393. <center><div class="info">
  394. <div class="h4"><center><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> - <$BlogItemDateTime$> • <$BlogItemAuthor$> <br><a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><span style="color: #000;"><$BlogItemCommentCount$> komment</span></a>
  395. </center></div>
  396. </div></center>
  397. <div class="blog-entry">
  398.  <$BlogItemBody$>
  399. </div><br>
  400. </blogger>
  401.  
  402. <span style="float:right;"><Olderposts><a href=<$OlderPosts$> target="_self"> VISSZA <span class="fa fa-chevron-right"></span></a></a> </OlderPosts></span>
  403. <span style="float:rleft;"><newerposts><a href=<$NewerPosts$> target="_self"><span class="fa fa-chevron-left"></span> ELŐRE </a></NewerPosts></span>
  404. </div>
  405.  
  406.  
  407. <!-- oldalsáv -->
  408. <div class="sidebar">
  409.  
  410. <!-- első modul -->
  411. <h2> hello stranger </h2>
  412. <br><center><div class="line"></div></center><br>
  413.  
  414. <img src="https://goo.gl/aLK4Cg" width="95%">
  415. <br>Az oldalad leírásának helye. Ide jöhet például egy rövidke üdvözlőszöveg, amivel köszöntöd a látogatókat, vagy éppen pár szó rólad - ne habozz, légy kreatív. <br>
  416. <center> <b>félkövér,</b> <i>dőlt,</i> <u>aláhúzott,</u> <s>áthúzott</s>
  417. <br>
  418. <a href="">link1</a> | <a href="">link2</a> | <a href="">link3</a> </center>
  419. <br>
  420.  
  421. <!-- második modul - menü - itt csak a menüpontok neveit írhatod át! -->
  422. <h2> look around </h2>
  423. <br><center><div class="line"></div></center><br>
  424.  
  425. <div class="nav"><center>
  426. <a class="nav-dark" onClick="document.getElementById('main').innerHTML=document.getElementById('home').innerHTML" title="">001. blog</a>
  427. <a class="nav-dark" onClick="document.getElementById('main').innerHTML=document.getElementById('about').innerHTML" title="">002. rólam</a><a class="nav-dark" onClick="document.getElementById('main').innerHTML=document.getElementById('stuff').innerHTML" title="">003. extrák</a> <a class="nav-dark" href="http://www.blogger.com/follow-blog.g?blogID=<$blogID$>" title="">004. kövess</a></center>
  428. </div>
  429. <br>
  430.  
  431. <!-- harmadik modul -->
  432. <h2> categories </h2>
  433. <br><center><div class="line"></div></center><br>
  434.  
  435. <div class="labels">
  436. <a href="/search/label/IDE JÖN A CÍMKE NEVE">személyes</a>
  437. <a href="/search/label/IDE JÖN A CÍMKE NEVE">haul</a>
  438. <a href="/search/label/IDE JÖN A CÍMKE NEVE">diy</a>
  439. <a href="/search/label/IDE JÖN A CÍMKE NEVE">tag</a>
  440. <a href="/search/label/IDE JÖN A CÍMKE NEVE">interjú</a>
  441. <a href="/search/label/IDE JÖN A CÍMKE NEVE">ajánló</a>
  442. <a href="/search/label/IDE JÖN A CÍMKE NEVE">tippek</a>
  443. <a href="/search/label/IDE JÖN A CÍMKE NEVE">vélemény</a>
  444. <a href="/search/label/IDE JÖN A CÍMKE NEVE">kihívás</a>
  445. </div>
  446. <br>
  447.  
  448. <!-- negyedik modul -->
  449. <h2> to do list </h2>
  450. <br><center><div class="line"></div></center><br>
  451.  
  452. <center><i>- amiket csak a lustaságom akadályoz -</i><br><br>
  453. ☑ ez itt egy péla<br>
  454. ☐ ez meg itt még egy<br>
  455. ☐ nem jut eszembe semmi<br>
  456. ☑ írd ezeket át a sajátodra<br>
  457. ☐ ne utánozz, legyél kreatív<br></center>
  458. <br>
  459.  
  460. <!-- ötödik modul -->
  461. <h2> virtual friends </h2>
  462. <br><center><div class="line"></div></center><br>
  463.  
  464. Ezek itt a cserék. Rakd ki ide azokat az oldalakat, blogokat amiket szívesen látogatsz, kedvenc bloggereid, vagy akivel cserét kezdeményeztél. Nem árt ide írnod pár szót, hogy kit raksz ki, s kit nem, hogy elkerüld az esetleges félreértéseket.
  465.  
  466. <br><br><center>
  467. <a class="affies" href="IDE JÖN A LINK">001. Gizi</a>
  468. <a class="affies" href="IDE JÖN A LINK">002. Pista</a>
  469. <a class="affies" href="IDE JÖN A LINK">003. Józsi</a>
  470. <a class="affies" href="IDE JÖN A LINK">004. Erzsi</a>
  471. <a class="affies" href="IDE JÖN A LINK">005. Magdi</a>
  472. <a class="affies" href="IDE JÖN A LINK">006. Béla</a>
  473. <a class="affies" href="IDE JÖN A LINK">007. Mari</a>
  474. <a class="affies" href="IDE JÖN A LINK">008. Géza</a>
  475. </center>
  476. <br>
  477.  
  478. <!-- hatodik modul -->
  479. <h2> no one cares </h2>
  480. <br><center><div class="line"></div></center>
  481.  
  482. <blockquote>The sun will rise and we will try again</blockquote>
  483. <b> szerkesztő: </b> neved helye <br>
  484. <b> nyitás: </b> dátum <br>
  485. <b> zárás: </b> soha <br>
  486. <b> téma: </b> blogod témája <br>
  487. <b> url: </b> minta.blogspot.hu<br>
  488. <b> cím: </b> blogod címe<br>
  489. <br>
  490.  
  491. <!-- hetedik modul -->
  492. <!-- kedvedre átírhatod a "múlt ▲▼▲▼", a "mostanában" és a "havonta" szavakat, a többihez ne nyúlj -->
  493. <h2> the past </h2>
  494. <br><center><div class="line"></div></center><br>
  495.  
  496. <center>
  497. <form name="jump" id="jump">
  498. <select name="menu" onchange="location=document.jump.menu.options
  499. [document.jump.menu.selectedIndex].value;" value="GO" style="font-family: dosis; font-size: 13px; text-transform: lowercase; color: #fff; width: 100%; border: 2px solid #fff; background-color: #000; padding: 1px;">
  500. <option selected="selected">a múlt ▲▼▲▼</option>
  501. <optgroup label="mostanában" style="font:bold 11px dosis;">
  502. <BloggerPreviousItems>
  503. <option value="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></option>
  504. </BloggerPreviousItems>
  505. <optgroup label="havonta" style="font:bold 11px dosis;">
  506. <BloggerArchives>
  507. <option value="<$BlogArchiveURL$>"><$BlogArchiveName$></option>
  508. </BloggerArchives>
  509. </select></form></center>
  510. <br>
  511.  
  512. <!-- nyolcadik modul -->
  513. <h2> million thanks </h2>
  514. <br><center><div class="line"></div></center><br>
  515.  
  516. A kinézetet <a href="http://themesbythea.blogspot.hu/">Thea</a> készítette. Az inspirációért köszönet illeti <a href="http://wanaseoby.com/">Wanát.</a> <3<br>
  517.  
  518. <br>
  519.  
  520. </div>
  521. <div style="clear:both"></div>
  522. <div style="clear:both"></div>
  523.  
  524. </div></div>
  525.  
  526. <!------- OLDALAK TARTALMA ------->
  527. <!------------------- OLDAL: KEZDŐLAP (BLOG) - ehhez itt ne nyúlj! ------------------>
  528. <div id="home" style="display: none;">
  529. <blogger>
  530. <div class="post-title">
  531. <a href="<$BlogItemPermalinkURL$>"</a><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></a></div>
  532. <br>
  533. <center><div class="ar"></div></center>
  534. <center><div class="info">
  535. <div class="h4"><center><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> - <$BlogItemDateTime$> • <$BlogItemAuthor$> <br><a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><span style="color: #000;"><$BlogItemCommentCount$> komment</span></a>
  536. </center></div>
  537. </div></center>
  538. <div class="blog-entry">
  539.  <$BlogItemBody$>
  540. </div><br>
  541. </blogger>
  542.  
  543. <span style="float:right;"><Olderposts><a href=<$OlderPosts$> target="_self"> VISSZA <span class="fa fa-chevron-right"></span></a></a> </OlderPosts></span>
  544. <span style="float:rleft;"><newerposts><a href=<$NewerPosts$> target="_self"> <span class="fa fa-chevron-left"></span> ELŐRE </a></NewerPosts></span>
  545. </div>
  546.  
  547. <!------------------- OLDAL: RÓLAM ------------------>
  548. <div id="about" style="display: none;">
  549. <div class="post-title"> ki vagyok én? </div>
  550. <br>
  551. Töltsd ki ezt az ürességet itt egy frappáns bemutatkozóval. Alapadataid, mióta blogolsz, miket szeretsz, miket utálsz, stb. Írhatsz összefüggő mondatokat, de akár pontokba is szedheted bemutatkozódat.<br>
  552. <div align="left">
  553. <p><img align="left" src="https://goo.gl/rYdSsw" width="30%">
  554. ◦ becses nevem ... de szólíts csak ...<br>
  555. ◦ ... éves vagyok<br>
  556. ◦ szeretem ...<br>
  557. ◦ utálom ...<br>
  558. ◦ kedvenc ...<br>
  559. ◦ álmaim ...<br>
  560. ◦ szeretnék eljutni ...<br>
  561. ◦ megtalálhatsz itt és itt is ...<br>
  562. </p>
  563.  
  564. <!------------------- OLDAL: EXTRÁK ------------------>
  565. <div id="stuff" style="display: none;">
  566. <div class="post-title"> extra menüpont </div>
  567. <br>
  568. Írj ide, amit csak akarsz. Példának okáért itt egy linklista, de ha szeretnéd, lecserélheted másra.
  569. <br><br>
  570. <div style='float:left; width:40%'>
  571. <img src="https://goo.gl/uKxwKp"><a href="LINKHELYE"> Minta szöveg </a><br><br>
  572.  
  573. <img src="https://goo.gl/uKxwKp"><a href="LINKHELYE"> Minta szöveg </a><br><br>
  574.  
  575. <img src="https://goo.gl/uKxwKp"><a href="LINKHELYE"> Minta szöveg </a><br><br>
  576.  
  577. <img src="https://goo.gl/uKxwKp"><a href="LINKHELYE"> Minta szöveg </a><br><br>
  578.  
  579. <img src="https://goo.gl/uKxwKp"><a href="LINKHELYE"> Minta szöveg </a><br><br>
  580. </div>
  581.  
  582. <div style='float:left; width:40%; margin-left:50px'>
  583. <img src="https://goo.gl/uKxwKp"><a href="LINKHELYE"> Minta szöveg </a><br><br>
  584.  
  585. <img src="https://goo.gl/uKxwKp"><a href="LINKHELYE"> Minta szöveg </a><br><br>
  586.  
  587. <img src="https://goo.gl/uKxwKp"><a href="LINKHELYE"> Minta szöveg </a><br><br>
  588.  
  589. <img src="https://goo.gl/uKxwKp"><a href="LINKHELYE"> Minta szöveg </a><br><br>
  590.  
  591. <img src="https://goo.gl/uKxwKp"><a href="LINKHELYE"> Minta szöveg </a><br><br>
  592. </div>
  593. <br><br>
  594. </div>
  595.  
  596. <!------------------- OLDALAK TARTALMÁNAK VÉGE ------------------>
  597.  
  598. </body>
  599. </html>
  600.  
  601. <!---------------------- legyen szép napod! ♡ -------------------!>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top