Cara Membuat Template Blogger Sendiri Untuk Pemula
Kali ini panduanblog.online akan share bagaimana cara membuat template blog mulai dari awal hingga akhir. Dengan menggunakan kerangkat ini, kalian bisa membuat template yang responsive dan desain sesuai dengan apa yang kalian mau.
Cara Membuat Template Blogger
Langung saja ikuti langkah-langkahnya di bawah ini!
Kerangka Template
Buka notepad++ copy code di bawah ini dan pastekan di notepad++
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html> <HTML expr:dir='data:blog.languageDirection'>
<head>
<meta charset='utf-8'/><meta content='xxxx' name='google-site-verification'/>
<meta content='RucqLpVyWvI3DgAYNFxL99JNdqs' name='alexaVerifyID'/>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<meta content='deskripsi' name='description'/>
<meta content='keywords' name='keywords'/>
<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> - <data:blog.title/></title> <b:else/> <title><data:blog.pageTitle/></title>
</b:if>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.homepageUrl + "favicon.ico"' rel='icon' type='image/x-icon'/> <link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + "feeds/posts/default?alt=rss"' expr:title='data:blog.title + " - RSS"' rel='alternate' type='application/rss+xml'/>
<link expr:href='"http://www.blogger.com/feeds/" + data:blog.blogId + "/posts/default"' expr:title='data:blog.title + " - Atom"' rel='alternate' type='application/atom+xml'/>
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/> <b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
</b:if>
</b:if>
<b:if cond='data:blog.pageType == "archive"'>
<meta content='noindex,follow' name='robots'/>
<meta content='noindex,follow' name='googlebot'/>
</b:if>
<b:skin><![CDATA[/ CSS ]]></b:skin>
</head>
<body>
</body>
</HTML>
Menambahkan Header
Letakkan code ini di bawah <body>
<div class='outer-hz' id='outer-hz'>
<header class='header-wrapper cl cf' itemscope='itemscope' itemtype='http://schema.org/WPHeader'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>
<b:widget id='Header1' locked='false' title='(Header)' type='Header'> </b:widget>
</b:section>
</header>
</div>
Menambahkan Main Content (artikel)
Letakkan code ini di bawah </header>
<b:section class='main-wrapper' id='main-wrapper' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget>
</b:section>
Menambahkan Sidebar
letakkan code ini di bawah </b:section>
<aside itemscope='itemscope' itemtype='http://schema.org/WPSideBar'>
<b:section class='sidebar' id='sidebar-right' showaddelement='yes'> </b:section>
</aside>
Menambahkan footer
letakkan kode ini di bawah </aside>
<footer itemscope='itemscope' itemtype='http://schema.org/WPFooter'>
<b:section class='footer' id='footer' showaddelement='yes'> </b:section>
</footer>
Menambahkan css
letakkan code ini di atas ]]></b:skin>
body { background: #eceef5; margin: 0; padding: 0; color: #797979; font-family: "Arial",Tahoma, sans-serif; font-weight: 400; font-size: 12px; }
.outer-hz{ background:#fff; max-width:960px; width: 100%; margin: 0 auto; padding: 0; }
/* dan seterusnya sesuai dengan elemen yang sobat buat sebelumnya.. */Untuk membuat template sesuai dengan yang kalian mau, caranya adalah dengan mengatur CSS sesuai dengan tampilan yang kalian inginkan. Untuk itu, kalian minimal harus tau dasar dasar dari CSS untuk membuat sebuah desain template sesuai dengan apa yang kalian mau.
Cara Memasang SyntaxHighlighter Auto Detect Language di Blogger – Halo pembaca setia blog amburadul ini kali ini Tutorial Blogger akan share cara memasang SyntaxHighlighter Auto Detect Language di blog. Apa bedanya dengan SyntaxHighlighter dengan Prism? Bedanya SyntaxHighlighter Auto Detect Language ini nggak harus memasukkan kode secara spsifik saat pemanggilan.
Cukup
<pre><code>code css/html </code></pre> jadi bisa lebih simpel dan memudahkan saat mau menggunakanya. Jadi, berminat untuk memsangnya? Jika berminat, berikut caranya.Letakan kode dibawah ini diatas
</head><script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.7.0/highlight.min.js'/> <script> hljs.initHighlightingOnLoad(); </script>
Lalu Letakan
CSS ini di atas </style> atau ]]></b:skin>/* Original highlight.js style (c) Ivan Sagalaev <maniac@softwaremaniacs.org> */ .hljs { display: block; overflow-x: auto; padding: 0.5em; background: #F0F0F0; } /* Base color: saturation 0; */ .hljs, .hljs-subst { color: #444; } .hljs-comment { color: #888888; } .hljs-keyword, .hljs-attribute, .hljs-selector-tag, .hljs-meta-keyword, .hljs-doctag, .hljs-name { font-weight: bold; } /* User color: hue: 0 */ .hljs-type, .hljs-string, .hljs-number, .hljs-selector-id, .hljs-selector-class, .hljs-quote, .hljs-template-tag, .hljs-deletion { color: #880000; } .hljs-title, .hljs-section { color: #880000; font-weight: bold; } .hljs-regexp, .hljs-symbol, .hljs-variable, .hljs-template-variable, .hljs-link, .hljs-selector-attr, .hljs-selector-pseudo { color: #BC6060; } /* Language color: hue: 90; */ .hljs-literal { color: #78A960; } .hljs-built_in, .hljs-bullet, .hljs-code, .hljs-addition { color: #397300; } /* Meta color: hue: 200 */ .hljs-meta { color: #1f7199; } .hljs-meta-string { color: #4d99bf; } /* Misc effects */ .hljs-emphasis { font-style: italic; } .hljs-strong { font-weight: bold; }Untuk CSS kalian bisa memilih sesuai keinginan, silahkan ambi DISINI
Dan untuk melihat demonya, silahkan lihat DISINI
Jangan lupa Save template agar perubahanya tersimpan. Gimana lebih mudah kan? dan untuk pemanggilanya menggunakan
<pre><code>code css/html </code></pre>Tapi kembali lagi, semua tergantung pengguna, semua tergantung selera masing-masing 🙂
Selamat mencoba, semoga berhasil 😀
Selamat mencoba, semoga berhasil 😀
Comments
Post a Comment