Cara Membuat Template Blog Sendiri
1. Langkah pertama masukdulu ke bloggernya hapus dan simpan
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <HTML> <head> <b:if cond='data:blog.isMobile'> <meta content='width=device-width,initial-scale=1.0,minimum-scale=0.5,maximum-scale=2.0' name='viewport'/> <meta content='noindex,nofollow' name='robots'/> </b:if> <b:include data='blog' name='all-head-content'/> <meta content='####################' name='google-site-verification'/> <meta content='####################' name='msvalidate.01'/> <meta content='####################' name='alexaVerifyID'/> <meta content='index, follow, noodp, noydir' name='robots'/> <meta content='id' name='geo.country'/> <meta content='Mas Yadi' name='author'/> <meta content='1 days' name='revisit-after'/> <meta content='Indonesia' name='geo.placename'/> <meta content='blogger' name='generator'/> <meta content='general' name='rating'/> <meta content='index, follow, snipet' name='googlebot'/> <b:if cond='data:blog.pageType == "index"'> <meta expr:content='data:blog.canonicalUrl' property='og:url'/> <meta content='website' property='og:type'/> <meta expr:content='data:blog.title' property='og:site_name'/> <meta content='id_id' property='og:locale'/> <meta expr:content='data:blog.pageTitle' property='og:title'/> <meta expr:content='data:blog.metaDescription' property='og:description'/> <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/> <title><data:blog.pageTitle/></title> <meta content='KEYWORD+BLOG_ANDA' name='keywords'/> </b:if> <b:if cond='data:blog.pageType != "index"'> <meta expr:content='data:blog.canonicalUrl' property='og:url'/> <meta content='article' property='og:type'/> <meta expr:content='data:blog.title' property='og:site_name'/> <meta content='id_id' property='og:locale'/> <meta expr:content='data:blog.pageName' property='og:title'/> <meta expr:content='data:blog.metaDescription' property='og:description'/> <b:if cond='data:blog.postImageThumbnailUrl'> <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/> </b:if> <title><data:blog.pageName/> - <data:blog.title/></title> <meta expr:content='data:blog.pageName' name='keywords'/> </b:if> */ <style type="text/css"><!-- /* <b:skin><![CDATA[ /* Bagi anda yang mengerti dan blogger profesional pastinya tidak akan menghapus link ini. Membuat template ini tidak cukup 1 jam bro! Blogger Template Style Name : Nama Template Anda Date : Tanggal Pembuatan Template Ini Updated by : Mas Yadi/Namamu */ #navbar-iframe{height:0;visibility:hidden;display:none;} html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent;} a:link,a:visited{color:#1BC7A5;text-decoration:none;margin-left:0px;margin-right:0px;} a img{border-width:0;} img{max-width:100%;vertical-align:middle;border:0;height:auto;} .quickedit{display:none;} .clear{clear:both;} body{background:#eaeaea;margin:0;padding:0;font-family: calibri;color:#2c3e50;} ]]></b:skin> <style type='text/css'> </style> </head> <body> <b:section class='main' id='main'> <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget> </b:section> </body> </HTML>
2. Cari </style> dan simpan di atasnya
#wrapper{ background:#FFF; width:1024px; overflow:hidden; margin:0 auto; }
3. Cari <body> letakan di bawahnya
<div id='wrapper'>
4. letakan dibawah </body>
<div id='wrapper'>
5. Pasang Css Header berikut di atas </style>
#header-wrapper{width:100%;overflow:hidden;} #header{width:262px;overflow:hidden;float:left;} #header-ads{width:728px;overflow:hidden;float:right;} .header .widget{padding:10px;}
6. pasang HTML di bawah <div id='wrapper'>
<header id='header-wrapper'> <b:section class='header' id='header' maxwidgets='1'> <b:widget id='Header1' locked='true' title='Mas Yadi Blogger Template (Header)' type='Header'></b:widget> </b:section> <b:section class='header' id='header-ads' maxwidgets='1'/> <div class='clear'/> </header>
7. langkah selanjutnya sidebar float:left dan Float:right di atas </style>
#artikel-wrapper{float:right;width:724px;overflow:hidden} #sidebar-wrapper{float:left;width:300px;overflow:hidden} #sidebar{padding:5px} .sidebar h2,.sidebar h3{color:#fff;padding:4px 8px;background:#3384cc;background:linear-gradient(top,#3384cc,#2a79bf);background:-webkit-linear-gradient(top,#3384cc,#2a79bf);background:-moz-linear-gradient(top,#3384cc,#2a79bf);background:-o-linear-gradient(top,#3384cc,#2a79bf);font-size:11pt;font-family:'PT Sans',Arial,sans-serif;border-bottom:2px solid #ccc;text-shadow:1px 1px 0 #283744;margin:0;margin-bottom:5px}
8. letakan di atas <b:section class='main' id='main'>
<aside id='sidebar-wrapper'> <b:section class='sidebar' id='sidebar' showaddelement='yes'></b:section> </aside>
9. letakan di atas <b:section class='main' id='main'>
<aside id='artikel-wrapper'>
10. tutup kode HTML nya </b:section> atau </div> terakhir
</aside>
11. footer berikut di atas </style>
#footer-wrapper{width:100%;clear:both} .footer h3,.footer h2{color:#fff;padding:4px 8px;background:#3384cc;background:linear-gradient(top,#3384cc,#2a79bf);background:-webkit-linear-gradient(top,#3384cc,#2a79bf);background:-moz-linear-gradient(top,#3384cc,#2a79bf);background:-o-linear-gradient(top,#3384cc,#2a79bf);font-size:11pt;font-family:'PT Sans',Arial,sans-serif;border-bottom:2px solid #ccc;text-shadow:1px 1px 0 #283744;margin:0;margin-bottom:5px} .footer{width:32%;padding:5px} #footer-1{float:left} #footer-2{float:left} #footer-3{float:right}
<div class='clear'/> <footer id='footer-wrapper'> <b:section class='footer' id='footer-1' showaddelement='yes'/> <b:section class='footer' id='footer-2' showaddelement='yes'/> <b:section class='footer' id='footer-3' showaddelement='yes'/> </footer>
Nah sekian dulu ya cape ngetiknya heheh
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <HTML> <head> <b:if cond='data:blog.isMobile'> <meta content='width=device-width,initial-scale=1.0,minimum-scale=0.5,maximum-scale=2.0' name='viewport'/> <meta content='noindex,nofollow' name='robots'/> </b:if> <b:include data='blog' name='all-head-content'/> <meta content='####################' name='google-site-verification'/> <meta content='####################' name='msvalidate.01'/> <meta content='####################' name='alexaVerifyID'/> <meta content='index, follow, noodp, noydir' name='robots'/> <meta content='id' name='geo.country'/> <meta content='Mas Yadi' name='author'/> <meta content='1 days' name='revisit-after'/> <meta content='Indonesia' name='geo.placename'/> <meta content='blogger' name='generator'/> <meta content='general' name='rating'/> <meta content='index, follow, snipet' name='googlebot'/> <b:if cond='data:blog.pageType == "index"'> <meta expr:content='data:blog.canonicalUrl' property='og:url'/> <meta content='website' property='og:type'/> <meta expr:content='data:blog.title' property='og:site_name'/> <meta content='id_id' property='og:locale'/> <meta expr:content='data:blog.pageTitle' property='og:title'/> <meta expr:content='data:blog.metaDescription' property='og:description'/> <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/> <title><data:blog.pageTitle/></title> <meta content='KEYWORD+BLOG_ANDA' name='keywords'/> </b:if> <b:if cond='data:blog.pageType != "index"'> <meta expr:content='data:blog.canonicalUrl' property='og:url'/> <meta content='article' property='og:type'/> <meta expr:content='data:blog.title' property='og:site_name'/> <meta content='id_id' property='og:locale'/> <meta expr:content='data:blog.pageName' property='og:title'/> <meta expr:content='data:blog.metaDescription' property='og:description'/> <b:if cond='data:blog.postImageThumbnailUrl'> <meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/> </b:if> <title><data:blog.pageName/> - <data:blog.title/></title> <meta expr:content='data:blog.pageName' name='keywords'/> </b:if> */ <style type="text/css"><!-- /* <b:skin><![CDATA[ /* Bagi anda yang mengerti dan blogger profesional pastinya tidak akan menghapus link ini. Membuat template ini tidak cukup 1 jam bro! Blogger Template Style Name : Nama Template Anda Date : Tanggal Pembuatan Template Ini Updated by : Mas Yadi/Namamu */ #navbar-iframe{height:0;visibility:hidden;display:none;} html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent;} a:link,a:visited{color:#1BC7A5;text-decoration:none;margin-left:0px;margin-right:0px;} a img{border-width:0;} img{max-width:100%;vertical-align:middle;border:0;height:auto;} .quickedit{display:none;} .clear{clear:both;} body{background:#eaeaea;margin:0;padding:0;font-family: calibri;color:#2c3e50;} ]]></b:skin> <style type='text/css'> </style> </head> <body> <b:section class='main' id='main'> <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget> </b:section> </body> </HTML>
2. Cari </style> dan simpan di atasnya
#wrapper{ background:#FFF; width:1024px; overflow:hidden; margin:0 auto; }
3. Cari <body> letakan di bawahnya
<div id='wrapper'>
4. letakan dibawah </body>
<div id='wrapper'>
5. Pasang Css Header berikut di atas </style>
#header-wrapper{width:100%;overflow:hidden;} #header{width:262px;overflow:hidden;float:left;} #header-ads{width:728px;overflow:hidden;float:right;} .header .widget{padding:10px;}
6. pasang HTML di bawah <div id='wrapper'>
<header id='header-wrapper'> <b:section class='header' id='header' maxwidgets='1'> <b:widget id='Header1' locked='true' title='Mas Yadi Blogger Template (Header)' type='Header'></b:widget> </b:section> <b:section class='header' id='header-ads' maxwidgets='1'/> <div class='clear'/> </header>
7. langkah selanjutnya sidebar float:left dan Float:right di atas </style>
#artikel-wrapper{float:right;width:724px;overflow:hidden} #sidebar-wrapper{float:left;width:300px;overflow:hidden} #sidebar{padding:5px} .sidebar h2,.sidebar h3{color:#fff;padding:4px 8px;background:#3384cc;background:linear-gradient(top,#3384cc,#2a79bf);background:-webkit-linear-gradient(top,#3384cc,#2a79bf);background:-moz-linear-gradient(top,#3384cc,#2a79bf);background:-o-linear-gradient(top,#3384cc,#2a79bf);font-size:11pt;font-family:'PT Sans',Arial,sans-serif;border-bottom:2px solid #ccc;text-shadow:1px 1px 0 #283744;margin:0;margin-bottom:5px}
8. letakan di atas <b:section class='main' id='main'>
<aside id='sidebar-wrapper'> <b:section class='sidebar' id='sidebar' showaddelement='yes'></b:section> </aside>
9. letakan di atas <b:section class='main' id='main'>
<aside id='artikel-wrapper'>
10. tutup kode HTML nya </b:section> atau </div> terakhir
</aside>
11. footer berikut di atas </style>
#footer-wrapper{width:100%;clear:both} .footer h3,.footer h2{color:#fff;padding:4px 8px;background:#3384cc;background:linear-gradient(top,#3384cc,#2a79bf);background:-webkit-linear-gradient(top,#3384cc,#2a79bf);background:-moz-linear-gradient(top,#3384cc,#2a79bf);background:-o-linear-gradient(top,#3384cc,#2a79bf);font-size:11pt;font-family:'PT Sans',Arial,sans-serif;border-bottom:2px solid #ccc;text-shadow:1px 1px 0 #283744;margin:0;margin-bottom:5px} .footer{width:32%;padding:5px} #footer-1{float:left} #footer-2{float:left} #footer-3{float:right}
<div class='clear'/> <footer id='footer-wrapper'> <b:section class='footer' id='footer-1' showaddelement='yes'/> <b:section class='footer' id='footer-2' showaddelement='yes'/> <b:section class='footer' id='footer-3' showaddelement='yes'/> </footer>
Nah sekian dulu ya cape ngetiknya heheh
www.tokowahyu.com
ReplyDeletesexy photo gallery
ReplyDeletewww.konaki.pw