Blog Theme

Developer
Shridhar Deshmukh
Size
4,646 Kb
Views
48,576
  1. Blog Theme Previews
  2. Blog Theme HTML Codes
  3. Blog Theme CSS Codes
  4. Blog Theme JS Codes

How do I make an blog theme?

What is a blog theme? How do you make a blog theme? This script and codes were developed by Shridhar Deshmukh on 22 July 2022, Friday.

Blog Theme Previews
IQ Test

Blog Theme - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Blog Theme</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='http://stackicons.com/css/stackicons-social-codepen.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header> <div class="container"> <a class="logo" href="#" title="Name"> NAME </a> <nav role="main-menu" class="main-menu"> <div class="icon-menu text-center"> <a class="st-icon-menu-alt2 st-shape-icon"></a> </div> <ul class="main"> <li> <a href="/blog" title="Name's blog"> Blog </a> </li> <li> <a href="/archives"> Archives </a> </li> <li class="about-me"> <a href="/aboutme">About me</a> </li> </ul> </nav> <nav role="about-menu" class="about-menu"> <ul class="about text-center st-multi-color st-shape-r5"> <li> <a class="st-icon-twitter" href="#" title="Twitter"> Twitter </a> </li> <li> <a class="st-icon-github-alt" href="#" title="Github"> GitHub </a> </li> <li> <a class="st-icon-codepen" href="#"> Codepen </a> </li> </ul> </nav> </div>
</header>
<div class="container"> <article> <div class="title"> <h1>jJsonViewer - jQuery Plugin</h1> </div> <div class="content"> <p>jJsonViewer is a jquery plugin which you can all on any jquery element. This function takes JSON or stringified JSON as input which will be converted into html and added into given element. </p> <h2>How to use – </h2> <ul> <li>Just download jJsonViewer plugin. You only need javascript and stylesheet.</li> <li>Include both in your html page.</li> <li>Now call jJsonViewer on any element and pass it json data$(element).jJsonViewer(json)</li> </ul> <p class="footer">Date: 5 Jun 2014</p> </div> </article>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Blog Theme - Script Codes CSS Codes

a { text-decoration: none; color: #FFF;
}
body { font: 14px/1.4 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; color: black; background: url("http://upload.wikimedia.org/wikipedia/commons/d/d6/Half_Dome_from_Glacier_Point%2C_Yosemite_NP_-_Diliff.jpg") 50% no-repeat fixed; background-size: cover;
}
header { height: 50px; background-color: #EC4A34; border-bottom: 1px solid #8D2112; box-shadow: 0 0 10px rgba(0, 0, 0, 0.125); position: relative; z-index: 1000;
}
.container { max-width: 1080px; margin: 0px auto; height: 100%; position: relative; z-index: 999;
}
.container .logo { float: left; display: block; height: 100%; font-size: 24px; color: #FFF; text-decoration: none; padding: 10px; margin-right: 10px; box-sizing: border-box; border-width: 1px; border-style: solid; border-color: transparent #8D2112 transparent transparent;
}
.container .logo:hover { background-color: #F0462F;
}
ul, nav, ul li, ul li a { height: 100%; box-sizing: border-box;
}
nav.main-menu { float: left;
}
nav.main-menu .icon-menu { display: none;
}
.main li, .about li { float: left;
}
.main li a, .about li a { padding: 15px 10px 0px; display: block; white-space: nowrap;
}
.main li a:hover { color: #DDD;
}
.main li.about-me { display: none;
}
nav.about-menu { float: right;
}
.about li { margin-top: 10px;
}
h1 { font-size: 1.6em; font-weight: 300; color: #222;
}
h2 { font-size: 1.4em; font-weight: 300; color: #222; margin-top: 15px;
}
article { margin-top: 20px; background: inherit; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 6px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25); overflow: hidden;
}
article:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: inherit; -webkit-filter: blur(10px) saturate(2);
}
article .title { padding: 8px; background: rgba(235, 235, 235, 0.85); border-bottom: 1px solid rgba(0, 0, 0, 0.1); text-align: center;
}
article .content { padding: 8px; background: rgba(255, 255, 255, 0.88);
}
article .footer { font-size: 0.9em; text-align: center; border-top: 1px solid #888; margin-top: 10px;
}
article ul { list-style-type: circle; padding: 5px 20px;
}
/*===================================================*/
@media only screen and (max-width: 1080px) { article { margin-left: 10px; margin-right: 10px; }
}
@media only screen and (max-width: 480px) { nav.about-menu { display: none; } nav.main-menu { float: right; position: relative; } nav.main-menu .icon-menu { padding: 5px 10px 0; height: 100%; cursor: pointer; display: block; } nav.main-menu .main { display: none; position: absolute; right: 0px; top: 100%; background: green; height: auto; } nav.main-menu .main li { float: none; height: 50px; } nav.main-menu .main li.about-me { display: block; } nav.main-menu:hover .icon-menu { background: green; } nav.main-menu:hover .main { display: block; } article { margin-left: 10px; margin-right: 10px; }
}

Blog Theme - Script Codes JS Codes

(function() {
}).call(this);
Blog Theme - Script Codes
Blog Theme - Script Codes
Home Page Home
Developer Shridhar Deshmukh
Username _shree33
Uploaded July 22, 2022
Rating 3
Size 4,646 Kb
Views 48,576
Do you need developer help for Blog Theme?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Shridhar Deshmukh (_shree33) Script Codes
Name
Hoisting
This with bind
Email
This in object method
Drop-down - Custom Element
This summary
Registration Form Desgin
This in DOM Event Handler
HTML Imports
This in constructor context
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!