SHARE
TWEET

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

cyberthea Jul 31st, 2017 (edited) 57 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 kell átírnod */
  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 kell átírnod */
  49. }
  50.  
  51. b {
  52. color: #fff;
  53. text-shadow: #f7f7f7 1px 1px 2px;
  54. }
  55.  
  56. i {
  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 {
  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: 65%;
  140. float: right;
  141. text-align: justify;
  142. color: #fff;
  143. }
  144.  
  145. .post-title {
  146. color: #fff;
  147. font-size: 23px;
  148. font-family: 'Arial'
  149. margin-bottom: 15px;
  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. }
  165.  
  166. .info {
  167. width: 220px;
  168. padding: 5px;
  169. background-color: #fff;
  170. z-index: 100;
  171. text-align: justify;
  172. margin-bottom:20px;
  173. color: #000;
  174. }
  175.  
  176. .blog-entry {
  177. font-family: 'Dosis', sans-serif;
  178. font-size: 15px;
  179. color: #fff;
  180. letter-spacing: 1px;
  181. margin-top: 5px;
  182. }
  183.  
  184. .blog-entry img {
  185. max-width: 100%;
  186. padding: 5px;
  187. }
  188.  
  189. img {
  190. max-width: 100%;
  191. padding: 5px;
  192. -webkit-filter: grayscale(100%);
  193. z-index: -9999999999999999999999999px;
  194. -webkit-transition: all 0.9s ease-in-out;
  195. -moz-transition: all 0.9s ease-in-out;
  196. -o-transition: all 0.9s ease-in-out;
  197. -ms-transition: all 0.9s ease-in-out;
  198. transition: all 0.9s ease-in-out;
  199. }
  200.  
  201. img:hover {
  202. -webkit-filter: grayscale(0%);
  203. z-index: -9999999999999999999999999px;
  204. -webkit-transition: all 0.9s ease-in-out;
  205. -moz-transition: all 0.9s ease-in-out;
  206. -o-transition: all 0.9s ease-in-out;
  207. -ms-transition: all 0.9s ease-in-out;
  208. transition: all 0.9s ease-in-out;
  209. }
  210.  
  211. .blogger-labels {
  212. font-size: 0px;
  213. margin-top: 12px;
  214. }
  215.  
  216. .blogger-labels a {
  217. font-family: 'Dosis', sans-serif;
  218. color: #fff;
  219. font-size: 12px;
  220. font-weight: 100;
  221. text-transform: uppercase;
  222. padding: 3px;
  223. margin-right: 5px;
  224. text-decoration: none!important;
  225. }
  226.  
  227. .blogger-labels a:hover {
  228. color: #ababab;
  229. }
  230.  
  231. .blogger-labels a:before {
  232. font-family: FontAwesome;
  233. font-size: 12px;
  234. color: #fff;
  235. content: '\f02b';
  236. }
  237.  
  238. #me {
  239. background: #000;
  240. bottom: 10px;
  241. right: 10px;
  242. position: fixed;
  243. padding: 2px;
  244. text-transform: uppercase;
  245. letter-spacing: 2px;
  246. -webkit-opacity: .8;
  247. opacity:0.8;
  248. filter:alpha(opacity=80);
  249. moz-opacity: .8;
  250. }
  251.  
  252. #me a {
  253. color: #fff;
  254. }
  255.  
  256. #me a:hover {
  257. color: #fff;
  258. }
  259.  
  260. /* oldalsáv
  261. ----------------------------------------------- */
  262. .sidebar {
  263. background-color: #000;
  264. padding: 2%;
  265. width: 18%;
  266. float: left;
  267. text-align: justify;
  268. }
  269.  
  270. h2 {
  271. color: #fff;
  272. font-size: 25px;
  273. font-family: 'Barrio', cursive;
  274. margin-bottom: 5px;
  275. text-align: center;
  276. font-weight: 100;
  277. }
  278.  
  279. .line {
  280. border-top: 2px solid #fff;
  281. width: 100px;
  282. margin-top: -10px;
  283. }
  284.  
  285. .labels a:link, .labels a:visited {
  286. background-color: #ffffff;
  287. color: #000000;
  288. font-size: 12px;
  289. font-family: 'Dosis', sans serif;
  290. font-style: italic;
  291. line-height: 30px;
  292. padding: 4px;
  293. transition: all .5s ease-in-out;
  294. -o-transition: all .5s ease-in-out;
  295. -webkit-transition: all .5s ease-in-out;
  296. -moz-transition: all .5s ease-in-out;
  297. }
  298.  
  299. .labels a:hover, .labels a:active {
  300. color: #000000!important;
  301. }
  302.  
  303. a.affies {
  304. color: #fff;
  305. font-size: 11px;
  306. text-transform: uppercase;
  307. letter-spacing: 2px;
  308. margin-left: 2px;
  309. margin-bottom: 6px;
  310. text-align: center;
  311. width: 42%;
  312. padding:6px;
  313. display: inline-block;
  314. }
  315.  
  316. a.affies:hover {
  317. background-color: transparent;
  318. -webkit-transition: all 0.5s ease-in-out;
  319. -moz-transition: all 0.5s ease-in-out;
  320. -o-transition: all 0.5s ease-in-out;
  321. -ms-transition: all 0.5s ease-in-out;
  322. transition: all 0.5s ease-in-out;
  323. }
  324.  
  325.  
  326. /* mobil kinézet
  327. ----------------------------------------------- */
  328. @media only screen and (max-width: 800px) {
  329. a.nav-dark{
  330. font-size: 90%;
  331. width: 12%;
  332. }
  333.  
  334. .label a{
  335. width: 90%;
  336. }
  337.  
  338. }
  339.  
  340. @media only screen and (max-width: 500px) {
  341.  
  342. .nav{
  343. margin-bottom: 30px;
  344. }
  345.  
  346. a.nav-dark{
  347. width: 40%;
  348. font-size: 100%;
  349. display: inline-block;
  350. background: transparent;
  351. }
  352.  
  353. .blog-body {
  354. width: 95%;
  355. backround-color: #000000;
  356. shadow: none;
  357. border: none;
  358. margin-top: 15px;
  359. padding: 5px;
  360. }
  361.  
  362. .article {
  363. width: 95%;
  364. backround-color: transparent;
  365. }
  366.  
  367. .blog-entry img {
  368. width: 100%;
  369. height: auto;
  370. align: center;
  371. }
  372.  
  373. .sidebar {
  374. width: 93%;
  375. backround-color: transparent;
  376. margin-left:8px;
  377. }
  378.  
  379. }
  380. </style> <meta content='width=device-width, initial-scale=1.0' name='viewport'/>
  381.  
  382. <br>
  383. </head><body>
  384.  
  385. <center>
  386.  
  387. <div class="blog-body">
  388. <!--- bejegyzések - ehhez itt ne nyúlj ---!>
  389. <div id="me">
  390. <a href="http://themesbythea.blogspot.hu/" target="_blank">©</a>
  391. </div>
  392. <div id="main" class="article">
  393. <blogger>
  394. <div class="post-title">
  395. <a href="<$BlogItemPermalinkURL$>"</a><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></a></div>
  396. <br>
  397. <center><div class="info">
  398. <div class="h4"><center><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> - <$BlogItemDateTime$>; <$BlogItemAuthor$>; <br><a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><span style="color: #000;"><$BlogItemCommentCount$> komment</span></a>
  399. </center></div>
  400. </div></center>
  401. <div class="blog-entry">
  402.  <$BlogItemBody$>
  403. </div><br>
  404. </blogger>
  405.  
  406. <span style="float:right;"><Olderposts><a href=<$OlderPosts$> target="_self"> VISSZA <span class="fa fa-chevron-right"></span></a></a> </OlderPosts></span>
  407. <span style="float:rleft;"><newerposts><a href=<$NewerPosts$> target="_self"><span class="fa fa-chevron-left"></span> ELŐRE </a></NewerPosts></span>
  408. </div>
  409.  
  410.  
  411. <!-- oldalsáv -->
  412. <div class="sidebar">
  413.  
  414. <!-- első modul -->
  415. <h2> hello stranger </h2>
  416. <br><center><div class="line"></div></center><br>
  417.  
  418. <img src="https://goo.gl/aLK4Cg" width="95%">
  419. <br><br>Az oldalad leírásának helye. Ide jöhet például egy rövidke kis üdvözlőszöveg, amivel köszöntöd a látogatókat, vagy éppen pár szó rólad, tehát bármi, ami a fejedben motoszkál. <br>
  420. <center> <b>félkövér,</b> <i>dőlt,</i> <u>aláhúzott,</u> <s>áthúzott</s>
  421. <br>
  422. <a href="">link1</a> <a href="">link2</a> <a href="">link3</a> </center>
  423.  
  424. <!-- második modul - menü - itt csak a menüpontok neveit írhatod át! -->
  425. <h2> look around </h2>
  426. <br><center><div class="line"></div></center><br>
  427.  
  428. <div class="nav"><center>
  429. <a class="nav-dark" onClick="document.getElementById('main').innerHTML=document.getElementById('home').innerHTML" title="">001. blog</a>
  430. <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>
  431. </div>
  432.  
  433. <!-- harmadik modul -->
  434. <h2> categories </h2>
  435. <br><center><div class="line"></div></center><br>
  436.  
  437. <div class="labels">
  438. <a href="/search/label/IDE JÖN A CÍMKE NEVE">személyes</a>
  439. <a href="/search/label/IDE JÖN A CÍMKE NEVE">haul</a>
  440. <a href="/search/label/IDE JÖN A CÍMKE NEVE">diy</a>
  441. <a href="/search/label/IDE JÖN A CÍMKE NEVE">vélemény</a>
  442. <a href="/search/label/IDE JÖN A CÍMKE NEVE">kihívás</a>
  443. <a href="/search/label/IDE JÖN A CÍMKE NEVE">interjú</a>
  444. <a href="/search/label/IDE JÖN A CÍMKE NEVE">ajánló</a>
  445. <a href="/search/label/IDE JÖN A CÍMKE NEVE">tag</a>
  446. <a href="/search/label/IDE JÖN A CÍMKE NEVE">nyereményjáték</a>
  447. <a href="/search/label/IDE JÖN A CÍMKE NEVE">tippek</a>
  448. </div>
  449.  
  450. <!-- negyedik modul -->
  451. <h2> to do list </h2>
  452. <br><center><div class="line"></div></center><br>
  453.  
  454. <center><i>- amiket csak a lustaságom akadályoz -</i></center>
  455. ☑ ez itt egy péla<br>
  456. ☐ ez meg itt még egy<br>
  457. ☐ nem jut eszembe semmi<br>
  458. ☑ írd ezeket át a sajátodra<br>
  459. ☐ ne utánozz, legyél kreatív<br>
  460. <br>
  461.  
  462. <!-- ötödik modul -->
  463. <h2> virtual friends </h2>
  464. <br><center><div class="line"></div></center><br>
  465.  
  466. 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.
  467.  
  468. <br><br><center>
  469. <a class="affies" href="IDE JÖN A LINK">001. Gizi</a>
  470. <a class="affies" href="IDE JÖN A LINK">002. Pista</a>
  471. <a class="affies" href="IDE JÖN A LINK">003. Józsi</a>
  472. <a class="affies" href="IDE JÖN A LINK">004. Erzsi</a>
  473. <a class="affies" href="IDE JÖN A LINK">005. Magdi</a>
  474. <a class="affies" href="IDE JÖN A LINK">006. Béla</a>
  475. <a class="affies" href="IDE JÖN A LINK">007. Mari</a>
  476. <a class="affies" href="IDE JÖN A LINK">008. Géza</a>
  477. </center>
  478.  
  479. <!-- hatodik modul -->
  480. <h2> no one cares </h2>
  481. <br><center><div class="line"></div></center><br>
  482.  
  483. <blockquote>The sun will rise and we will try again</blockquote>
  484. <b> szerkesztő: </b> neved helye <br>
  485. <b> nyitás: </b> dátum <br>
  486. <b> zárás: </b> soha <br>
  487. <b> téma: </b> blogod témája <br>
  488. <b> url: </b> minta.blogspot.hu<br>
  489. <b> cím: </b> blogod címe<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: 3px 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.  
  511. <!-- nyolcadik modul -->
  512. <h2> million thanks </h2>
  513. <br><center><div class="line"></div></center><br>
  514.  
  515. A kinézetet <a href="http://themesbythea.blogspot.hu/">Thea</a> készítette, de nem jöhetett volna létre <a href="http://wanaseoby.com/">Wana</a> nélkül sem. <3<br>
  516.  
  517. <br>
  518.  
  519. </div>
  520. <div style="clear:both"></div>
  521. <div style="clear:both"></div>
  522.  
  523. </div></div>
  524.  
  525. <!------- OLDALAK TARTALMA ------->
  526. <!------------------- OLDAL: KEZDŐLAP (BLOG) - ehhez itt ne nyúlj! ------------------>
  527. <div id="home" style="display: none;">
  528. <blogger>
  529. <div class="post-title">
  530. <a href="<$BlogItemPermalinkURL$>"</a><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></a></div>
  531. <br>
  532. <center><div class="ar"></div></center>
  533. <center><div class="info">
  534. <div class="h4"><center><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> - <$BlogItemDateTime$>; <$BlogItemAuthor$>; <br><a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><span style="color: #000;"><$BlogItemCommentCount$> komment</span></a>
  535. </center></div>
  536. </div></center>
  537. <div class="blog-entry">
  538.  <$BlogItemBody$>
  539. </div><br>
  540. </blogger>
  541.  
  542. <span style="float:right;"><Olderposts><a href=<$OlderPosts$> target="_self"> VISSZA <span class="fa fa-chevron-right"></span></a></a> </OlderPosts></span>
  543. <span style="float:rleft;"><newerposts><a href=<$NewerPosts$> target="_self"> <span class="fa fa-chevron-left"></span> ELŐRE </a></NewerPosts></span>
  544. </div>
  545.  
  546. <!------------------- OLDAL: RÓLAM ------------------>
  547. <div id="about" style="display: none;">
  548. <div class="post-title"> ki rejtőzik monitor mögött? </div>
  549. <br>
  550. 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>
  551. <div align="left">
  552. <p><img align="left" src="https://goo.gl/rYdSsw" width="30%">
  553. ◦ becses nevem ... de szólíts csak ...<br>
  554. ◦ ... éves vagyok<br>
  555. ◦ szeretem ...<br>
  556. ◦ utálom ...<br>
  557. ◦ kedvenc ...<br>
  558. ◦ álmaim ...<br>
  559. ◦ szeretnék eljutni ...<br>
  560. ◦ megtalálhatsz itt és itt is ...<br>
  561. </p>
  562.  
  563. <!------------------- OLDAL: EXTRÁK ------------------>
  564. <div id="stuff" style="display: none;">
  565. <div class="post-title"> extra menüpont </div>
  566. <br>
  567. Írj ide, amit csak akarsz. Példának okáért itt egy linklista, de ha szeretnéd, lecserélheted másra.
  568. <br><br>
  569. <div style='float:left; width:40%'>
  570. <img src="https://goo.gl/uKxwKp"><a href="LINKHELYE"> Minta szöveg </a><br><br>
  571.  
  572. <img src="https://goo.gl/uKxwKp"><a href="LINKHELYE"> Minta szöveg </a><br><br>
  573.  
  574. <img src="https://goo.gl/uKxwKp"><a href="LINKHELYE"> Minta szöveg </a><br><br>
  575.  
  576. <img src="https://goo.gl/uKxwKp"><a href="LINKHELYE"> Minta szöveg </a><br><br>
  577.  
  578. <img src="https://goo.gl/uKxwKp"><a href="LINKHELYE"> Minta szöveg </a><br><br>
  579. </div>
  580.  
  581. <div style='float:left; width:40%; margin-left:50px'>
  582. <img src="https://goo.gl/uKxwKp"><a href="LINKHELYE"> Minta szöveg </a><br><br>
  583.  
  584. <img src="https://goo.gl/uKxwKp"><a href="LINKHELYE"> Minta szöveg </a><br><br>
  585.  
  586. <img src="https://goo.gl/uKxwKp"><a href="LINKHELYE"> Minta szöveg </a><br><br>
  587.  
  588. <img src="https://goo.gl/uKxwKp"><a href="LINKHELYE"> Minta szöveg </a><br><br>
  589.  
  590. <img src="https://goo.gl/uKxwKp"><a href="LINKHELYE"> Minta szöveg </a><br><br>
  591. </div>
  592. <br><br>
  593. </div>
  594.  
  595. <!------------------- OLDALAK TARTALMÁNAK VÉGE ------------------>
  596.  
  597. </body>
  598. </html>
  599.  
  600. <!---------------------- legyen szép napod! ♡ -------------------!>
RAW Paste Data
Top