API tools faq
paste
Advertisement
cyberthea

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

cyberthea
Jul 31st, 2017
304
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 16.42 KB | None | 0 0
raw download clone embed print report
  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. <link rel="alternate" type="application/atom+xml" href="<$BlogURL$>feeds/posts/default">
  16. <link rel="alternate" type="application/rss+xml" href="<$BlogURL$>feeds/posts/default?alt=rss">
  17. <link rel="service.post" type="application/atom+xml" href="https://www.blogger.com/feeds/<$BlogID$>/posts/default">
  18.  
  19. <!-- favicon (a href=" " közötti linket cseréld ki a saját faviconodra-->
  20. <link href="https://goo.gl/s4JG6z" rel="icon" type="image/x-icon"/>
  21.  
  22. <title><$blogpagetitle$></title>
  23.  
  24. <style type="text/css">
  25.  
  26. /* mindenegyben, például linkek, félkövér, kijelölés stb. kinézete
  27. ----------------------------------------------- */
  28. body {
  29. background-color: #fff;
  30. font-family: 'Dosis', sans-serif;
  31. font-size: 15px;
  32. color: #fff;
  33. letter-spacing: 1px;
  34. overflow-x: hidden;
  35. oveflow-y: scroll;
  36. text-align: justify;
  37. cursor:url("https://goo.gl/af3Xy3"),default; /* ha le szeretnéd cserélni a kurzort, a zárójelben lévő linket írd át */
  38. }
  39.  
  40. a:link, a:visited {
  41. color: #fff;
  42. text-decoration: none;
  43. -webkit-transition: all 0.5s ease-in-out;
  44. -moz-transition: all 0.5s ease-in-out;
  45. -o-transition: all 0.5s ease-in-out;
  46. -ms-transition: all 0.5s ease-in-out;
  47. transition: all 0.5s ease-in-out;
  48. }
  49.  
  50. a:hover {
  51. text-decoration: line-through;
  52. 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 */
  53. }
  54.  
  55. b, strong {
  56. font-weight: bold;
  57. color: #fff;
  58. }
  59.  
  60. i, em {
  61. font-style: italic;
  62. color: #fff;
  63. }
  64.  
  65. u {
  66. text-decoration: none;
  67. border-bottom: 1px solid #fff;
  68. }
  69.  
  70. s, strike {
  71. color: #fff;
  72. padding: 1px;
  73. }
  74.  
  75. blockquote {
  76. background: #191919;
  77. border-top: 1px solid #444444;
  78. border-bottom: 1px solid #444444;
  79. font-style: italic;
  80. padding: 10px;
  81. text-align: center;
  82. }
  83.  
  84. ::-moz-selection {
  85. background-color: #ababab; }
  86. ::selection {
  87. background-color: #ababab; }
  88.  
  89. ::-webkit-scrollbar {
  90. background: #fff;
  91. width: 3px;
  92. height: 5px;
  93. }
  94.  
  95. ::-webkit-scrollbar-thumb:vertical {
  96. background: #000;
  97. }
  98.  
  99.  
  100. /* navigáció kinézete
  101. ----------------------------------------------- */
  102. .nav {
  103. text-align: center;
  104. width: 100%
  105. }
  106.  
  107. a.nav-dark {
  108. color: #fff;
  109. font-size: 12px;
  110. text-transform: uppercase;
  111. letter-spacing: 2px;
  112. margin-left: 2px;
  113. margin-bottom: 6px;
  114. text-align: center;
  115. width: 42%;
  116. padding: 6px;
  117. display: inline-block;
  118. }
  119.  
  120. a.nav-dark:hover {
  121. color: #fff;
  122. background-color: transparent;
  123. -webkit-transition: all 0.5s ease-in-out;
  124. -moz-transition: all 0.5s ease-in-out;
  125. -o-transition: all 0.5s ease-in-out;
  126. -ms-transition: all 0.5s ease-in-out;
  127. transition: all 0.5s ease-in-out;
  128. }
  129.  
  130.  
  131. /* blog
  132. ----------------------------------------------- */
  133. .blog-body {
  134. width: 90%;
  135. padding: 2px;
  136. background-color: transparent;
  137. color: #fff;
  138. }
  139.  
  140. .article {
  141. background-color: #000;
  142. padding: 1%;
  143. width: 68%;
  144. float: right;
  145. text-align: justify;
  146. color: #fff;
  147. line-height: 23px;
  148. }
  149.  
  150. .post-title {
  151. color: #fff;
  152. font-size: 23px;
  153. margin-bottom: 0px;
  154. text-align: center;
  155. font-weight: bold;
  156. text-transform: uppercase;
  157. }
  158.  
  159. .post-title:hover {
  160. text-decoration: line-through;
  161. }
  162.  
  163. .h4 {
  164. font-family: 'Dosis', sans-serif;
  165. color: #000;
  166. font-weight: normal;
  167. font-size: 13px;
  168. line-height: 15px;
  169. }
  170.  
  171. .info {
  172. width: 220px;
  173. padding: 5px;
  174. background-color: #fff;
  175. z-index: 100;
  176. text-align: justify;
  177. margin-bottom:20px;
  178. color: #000;
  179. }
  180.  
  181. .blog-entry {
  182. font-family: 'Dosis', sans-serif;
  183. font-size: 15px;
  184. color: #fff;
  185. letter-spacing: 1px;
  186. margin-top: 5px;
  187. }
  188.  
  189. .blog-entry img {
  190. max-width: 100%;
  191. padding: 5px;
  192. }
  193.  
  194. img {
  195. max-width: 100%;
  196. padding: 5px;
  197. -webkit-filter: grayscale(100%);
  198. z-index: -9999999999999999999999999px;
  199. -webkit-transition: all 0.9s ease-in-out;
  200. -moz-transition: all 0.9s ease-in-out;
  201. -o-transition: all 0.9s ease-in-out;
  202. -ms-transition: all 0.9s ease-in-out;
  203. transition: all 0.9s ease-in-out;
  204. }
  205.  
  206. img:hover {
  207. -webkit-filter: grayscale(0%);
  208. z-index: -9999999999999999999999999px;
  209. -webkit-transition: all 0.9s ease-in-out;
  210. -moz-transition: all 0.9s ease-in-out;
  211. -o-transition: all 0.9s ease-in-out;
  212. -ms-transition: all 0.9s ease-in-out;
  213. transition: all 0.9s ease-in-out;
  214. }
  215.  
  216. .blogger-labels {
  217. font-size: 0px;
  218. margin-top: 12px;
  219. }
  220.  
  221. .blogger-labels a {
  222. font-family: 'Dosis', sans-serif;
  223. color: #fff;
  224. font-size: 12px;
  225. font-weight: 100;
  226. text-transform: uppercase;
  227. padding: 3px;
  228. margin-right: 5px;
  229. text-decoration: none!important;
  230. }
  231.  
  232. .blogger-labels a:hover {
  233. color: #ababab;
  234. }
  235.  
  236. .blogger-labels a:before {
  237. font-family: FontAwesome;
  238. font-size: 12px;
  239. color: #fff;
  240. content: '\f02b';
  241. margin-right: 3px;
  242. }
  243.  
  244. #meow {
  245. background: #000;
  246. bottom: 10px;
  247. right: 10px;
  248. position: fixed;
  249. padding: 3px;
  250. letter-spacing: 1px;
  251. font-size: 15px;
  252. border-radius: 0px;
  253. -moz-box-shadow: 3px 3px #575757;
  254. -webkit-box-shadow: 3px 3px #575757;
  255. box-shadow: 3px 3px #575757;
  256. opacity:0.9;
  257. }
  258.  
  259. /* oldalsáv
  260. ----------------------------------------------- */
  261. .sidebar {
  262. background-color: #000;
  263. padding: 2%;
  264. width: 23%;
  265. float: left;
  266. text-align: justify;
  267. line-height: 23px;
  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="meow">
  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>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>
  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. <br>
  424.  
  425. <!-- második modul - menü - itt csak a menüpontok neveit írhatod át! -->
  426. <h2> look around </h2>
  427. <br><center><div class="line"></div></center><br>
  428.  
  429. <div class="nav"><center>
  430. <a class="nav-dark" onClick="document.getElementById('main').innerHTML=document.getElementById('home').innerHTML" title="">001. blog</a>
  431. <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>
  432. </div>
  433. <br>
  434.  
  435. <!-- harmadik modul -->
  436. <h2> categories </h2>
  437. <br><center><div class="line"></div></center><br>
  438.  
  439. <div class="labels">
  440. <a href="/search/label/IDE JÖN A CÍMKE NEVE">személyes</a>
  441. <a href="/search/label/IDE JÖN A CÍMKE NEVE">haul</a>
  442. <a href="/search/label/IDE JÖN A CÍMKE NEVE">diy</a>
  443. <a href="/search/label/IDE JÖN A CÍMKE NEVE">tag</a>
  444. <a href="/search/label/IDE JÖN A CÍMKE NEVE">interjú</a>
  445. <a href="/search/label/IDE JÖN A CÍMKE NEVE">ajánló</a>
  446. <a href="/search/label/IDE JÖN A CÍMKE NEVE">tippek</a>
  447. <a href="/search/label/IDE JÖN A CÍMKE NEVE">vélemény</a>
  448. <a href="/search/label/IDE JÖN A CÍMKE NEVE">kihívás</a>
  449. </div>
  450. <br>
  451.  
  452. <!-- negyedik modul -->
  453. <h2> to do list </h2>
  454. <br><center><div class="line"></div></center><br>
  455.  
  456. <center><i>- amiket csak a lustaságom akadályoz -</i><br><br>
  457. ☑ ez itt egy péla<br>
  458. ☐ ez meg itt még egy<br>
  459. ☐ nem jut eszembe semmi<br>
  460. ☑ írd ezeket át a sajátodra<br>
  461. ☐ ne utánozz, legyél kreatív<br></center>
  462. <br>
  463.  
  464. <!-- ötödik modul -->
  465. <h2> virtual friends </h2>
  466. <br><center><div class="line"></div></center><br>
  467.  
  468. 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.
  469.  
  470. <br><br><center>
  471. <a class="affies" href="IDE JÖN A LINK">001. Gizi</a>
  472. <a class="affies" href="IDE JÖN A LINK">002. Pista</a>
  473. <a class="affies" href="IDE JÖN A LINK">003. Józsi</a>
  474. <a class="affies" href="IDE JÖN A LINK">004. Erzsi</a>
  475. <a class="affies" href="IDE JÖN A LINK">005. Magdi</a>
  476. <a class="affies" href="IDE JÖN A LINK">006. Béla</a>
  477. <a class="affies" href="IDE JÖN A LINK">007. Mari</a>
  478. <a class="affies" href="IDE JÖN A LINK">008. Géza</a>
  479. </center>
  480. <br>
  481.  
  482. <!-- hatodik modul -->
  483. <h2> no one cares </h2>
  484. <br><center><div class="line"></div></center>
  485.  
  486. <blockquote>The sun will rise and we will try again</blockquote>
  487. <b> szerkesztő: </b> neved helye <br>
  488. <b> nyitás: </b> dátum <br>
  489. <b> zárás: </b> soha <br>
  490. <b> téma: </b> blogod témája <br>
  491. <b> url: </b> minta.blogspot.hu<br>
  492. <b> cím: </b> blogod címe<br>
  493. <br>
  494.  
  495. <!-- hetedik modul -->
  496. <!-- kedvedre átírhatod a "múlt ▲▼▲▼", a "mostanában" és a "havonta" szavakat, a többihez ne nyúlj -->
  497. <h2> the past </h2>
  498. <br><center><div class="line"></div></center><br>
  499.  
  500. <center>
  501. <form name="jump" id="jump">
  502. <select name="menu" onchange="location=document.jump.menu.options
  503. [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;">
  504. <option selected="selected">a múlt ▲▼▲▼</option>
  505. <optgroup label="mostanában" style="font:bold 11px dosis;">
  506. <BloggerPreviousItems>
  507. <option value="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></option>
  508. </BloggerPreviousItems>
  509. <optgroup label="havonta" style="font:bold 11px dosis;">
  510. <BloggerArchives>
  511. <option value="<$BlogArchiveURL$>"><$BlogArchiveName$></option>
  512. </BloggerArchives>
  513. </select></form></center>
  514. <br>
  515.  
  516. <!-- nyolcadik modul -->
  517. <h2> million thanks </h2>
  518. <br><center><div class="line"></div></center><br>
  519.  
  520. 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>
  521.  
  522. <br>
  523.  
  524. </div>
  525. <div style="clear:both"></div>
  526. <div style="clear:both"></div>
  527.  
  528. </div></div>
  529.  
  530. <!------- OLDALAK TARTALMA ------->
  531. <!------------------- OLDAL: KEZDŐLAP (BLOG) - ehhez itt ne nyúlj! ------------------>
  532. <div id="home" style="display: none;">
  533. <blogger>
  534. <div class="post-title">
  535. <a href="<$BlogItemPermalinkURL$>"</a><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></a></div>
  536. <br>
  537. <center><div class="ar"></div></center>
  538. <center><div class="info">
  539. <div class="h4"><center><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> - <$BlogItemDateTime$> • <$BlogItemAuthor$> <br><a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><span style="color: #000;"><$BlogItemCommentCount$> komment</span></a>
  540. </center></div>
  541. </div></center>
  542. <div class="blog-entry">
  543. <$BlogItemBody$>
  544. </div><br>
  545. </blogger>
  546.  
  547. <span style="float:right;"><Olderposts><a href=<$OlderPosts$> target="_self"> VISSZA <span class="fa fa-chevron-right"></span></a></a> </OlderPosts></span>
  548. <span style="float:rleft;"><newerposts><a href=<$NewerPosts$> target="_self"> <span class="fa fa-chevron-left"></span> ELŐRE </a></NewerPosts></span>
  549. </div>
  550.  
  551. <!------------------- OLDAL: RÓLAM ------------------>
  552. <div id="about" style="display: none;">
  553. <div class="post-title"> ki vagyok én? </div>
  554. <br>
  555. 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>
  556. <div align="left">
  557. <p><img align="left" src="https://goo.gl/rYdSsw" width="30%">
  558. ◦ becses nevem ... de szólíts csak ...<br>
  559. ◦ ... éves vagyok<br>
  560. ◦ szeretem ...<br>
  561. ◦ utálom ...<br>
  562. ◦ kedvenc ...<br>
  563. ◦ álmaim ...<br>
  564. ◦ szeretnék eljutni ...<br>
  565. ◦ megtalálhatsz itt és itt is ...<br>
  566. </p>
  567.  
  568. <!------------------- OLDAL: EXTRÁK ------------------>
  569. <div id="stuff" style="display: none;">
  570. <div class="post-title"> extra menüpont </div>
  571. <br>
  572. Írj ide, amit csak akarsz. Példának okáért itt egy linklista, de ha szeretnéd, lecserélheted másra.
  573. <br><br>
  574. <div style='float:left; width:40%'>
  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.  
  581. <img src="https://goo.gl/uKxwKp"><a href="LINKHELYE"> Minta szöveg </a><br><br>
  582.  
  583. <img src="https://goo.gl/uKxwKp"><a href="LINKHELYE"> Minta szöveg </a><br><br>
  584. </div>
  585.  
  586. <div style='float:left; width:40%; margin-left:50px'>
  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.  
  593. <img src="https://goo.gl/uKxwKp"><a href="LINKHELYE"> Minta szöveg </a><br><br>
  594.  
  595. <img src="https://goo.gl/uKxwKp"><a href="LINKHELYE"> Minta szöveg </a><br><br>
  596. </div>
  597. <br><br>
  598. </div>
  599.  
  600. <!------------------- OLDALAK TARTALMÁNAK VÉGE ------------------>
  601.  
  602. </body>
  603. </html>
  604.  
  605. <!---------------------- legyen szép napod! ♡ -------------------!>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!