CARA MEMBUAT TEMPLATE BLOG SENDIRI UNTUK BLOGGER - d-ii

CARA MEMBUAT TEMPLATE BLOG SENDIRI UNTUK BLOGGER

Cara Membuat Template Blog untuk Blogger
Jangan ngaku Blogger kalo belum bisa membuat template yah ?he
nah,, untuk itu mari kita sama - sama belajar sebagai berikut :


1.Login ke Akun Blogger kemudian edit Html, hapus semua isi dalam html kemudian ganti dengan berikut ini :

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<HTML>
<b:include data='blog' name='all-head-content'/>
<title>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<data:blog.pageTitle/>
<b:else/>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<data:blog.pageName/> - <data:blog.title/>
<b:else/>
ERROR 404 - <data:blog.title/> 
</b:if>
</b:if>
 </title>
<!-- Description and Keywords (start) -->
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<meta content='Disini Description' name='description'/>
</b:if>
<meta content='DISINI KEYWORDS' name='keywords'/>
<head>
<b:skin><![CDATA[
/*-----------------------------------------------

/////////////////////////////////////////////////////////
//                                                     //
//  Blogger:  Template
//  Name:     Icha
//  Designer: nama kamu
//  URL:      http://www.wwwwww.id
//  Date:     Desember 2017
//  Version:  Free Version
//                                                     //
/////////////////////////////////////////////////////////

-----------------------------------------------*/

body {background-color: #ffffff;background-position: center center;}
a:link {font-family: 'PT Serif Caption', serif; font-size: 15px; color:#3094db;}
a:hover {color: #0716f2;}
a {color: #0716f2;}
]]></b:skin>
<style type='text/css'>

#wrapper{
background:#fff;
width:950px;
overflow:hidden;
margin:0 auto;
}
#header-wrapper{width:100%;overflow:hidden;}
#header{width:262px;overflow:hidden;float:left;}
#header-ads{float: right; width: 468px; margin: auto 0; padding: 0;}
.header .widget{padding:0 30px;}

#content-wrapper {
    margin: 0;
    padding: 15px;
}

#artikel-wrapper{float:left;width:724px;overflow:hidden}
#sidebar-wrapper{float:right;width:300px;overflow:hidden}
#sidebar{padding:5px}
.sidebar h2,.sidebar h3{color:#fff;padding:15px 15px;background:#3384cc;background:linear-gradient(top,#000000,#000000);background:-webkit-linear-gradient(top,#000000,#000000);background:-moz-linear-gradient(top,#000000,#000000);background:-o-linear-gradient(top,#000000,#000000);font-size:11pt;font-family:&#39;PT Sans&#39;,Arial,sans-serif;border-bottom:2px solid #ccc;text-shadow:1px 1px 0 #283744;margin:0;margin-bottom:5px}
</style>
</head>
<body>
<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>
<div id='wrapper'>
<aside id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' showaddelement='yes'></b:section>
</aside>
<aside id='artikel-wrapper'>
<b:section class='main' id='main'>
 <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget>
</b:section>
</aside>
</div>
</body>
</HTML>

Untuk memudahkan dan mempercepat Copy diatas dan masukan kedalam html
Diatas sudah terpasang Header , Posts dan Sidebar untuk tampilan awal seperti ini :


Untuk mengubah backgorund warna bisa mengganti kode body {background-color: #ffffff , gantilah sesuai dengan kesukaan

2.Untuk membuat Menu Navigasi , ada dua menu yang bisa dipilih sebagai berikut :

<!-- icha navigasi menu top -->
<ul class='topnav' id='ichaTopnav'>
<li><a href='#'>Home</a></li>
<li><a href='#'>1</a></li>
<li><a href='#'>2</a></li>
<li><a href='#'>3</a></li>
<li><a href='#'>4</a></li>
<li class='icon'>
<a href='javascript:void(0);' onclick='myFunction()'/>
</li>
</ul>
<!-- icha navigasi menu top selesai -->

3.Copy diatas kemudian diletakan tepat dibawah <body>

4.Kemudian Copy code dibawah ini dan letakan diatas </head>

<script>
function myFunction() {
var x = document.getElementById(&quot;myTopnav&quot;);
if (x.className === &quot;topnav&quot;) {
x.className += &quot; responsive&quot;;
} else {
x.className = &quot;topnav&quot;;
}
}
</script>

5.Kemudian perhatikan dibawah ini :

/* ichaTopnav */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #000000;
}
ul.topnav li {float: left;}
ul.topnav li a {
display: inline-block;
color: #04e8f4;
text-align: center;
padding: 40px 60px;
text-decoration: none;
transition: 0.3s;
font-size: 40px;
}
ul.topnav li a:hover {background-color: #fff;}
ul.topnav li.icon {display: none;}

@media screen and(max-width:680px) {
ul.topnav li:not(:first-child) {display: none;}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}

@media screen and(max-width:680px) {
ul.topnav.responsive {position: relative;}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}

6.Copy diatas dan diletakan diatas kode ]]></b:skin> kemudian Save Template dan lihat hasil nya
Ganti # dengan Link dan Ganti Nama Menu sesuai keinginan

Untuk membuat Menu navigasi Slide berikut :
1.Copy dibawah ini kemudian diletakan diatas kode ]]></b:skin>

.menu{position:absolute;top:23px;left:135px;text-align:center;padding:0;color:#333;font-size:46px;font-weight:700;line-height:25px;cursor:pointer}
#css-menu{position:fixed;top:0;left:-340px;z-index:9999;background:#000000;height:100%;transition:all .4s ease-in-out;}
#cssmenu,#cssmenu ul,#cssmenu li,#cssmenu a {margin: 0;padding: 0;border: 0;list-style: none;font-weight: normal;text-decoration: none;line-height: 1;  font-family: "Open Sans", sans-serif;font-size: 14px;position: relative;}
#cssmenu a {line-height: 1.3;padding: 12px 15px;}
#cssmenu {width: 240px;}
#cssmenu > ul > li {cursor: pointer;background: #efefef;border-top:1px solid #3d3d3d;border-bottom: 1px solid #161616;}
#cssmenu > ul > li:first-child {border-top:none;}
#cssmenu > ul > li:last-child {border-bottom:1px solid #000000;}
#cssmenu > ul > li:last-child > a {border-bottom: 1px solid #161616;}
#cssmenu > ul > li > a {font-size: 14px;display: block;color: #ffffff;text-shadow: 0 1px 1px #000;background: #000000;padding: 12px 15px;}
#cssmenu > ul > li > a:hover {text-decoration: none;background:#030c4c}
#cssmenu > ul > li.active {font-weight:700;}
#cssmenu > ul > li.home .close-menu{background: #000000;color: #fff;font-size:18px;font-weight:700;padding: 12px 15px;display:block}
#cssmenu > ul > li.has-sub > a:after {content: '';position: absolute;top: 15px;right: 10px;border: 5px solid transparent;border-left: 5px solid #ffffff;}
#cssmenu > ul > li.has-sub.active > a:after {left: 14px;top: 17px;border: 5px solid transparent;border-top: 5px solid #ffffff;}
#cssmenu ul ul {padding: 0;display: none;}
#cssmenu ul ul a {background: #efefef;display: block;color: #797979;font-size: 13px;}
#cssmenu ul ul a:hover {color: #000;}
#cssmenu ul ul li {border-bottom: 1px solid #c9c9c9;}
#cssmenu ul ul li.odd a {background: #fff;}
#cssmenu ul ul li:last-child {border: none;} 

2.Setelah itu Copy dibawah ini dan letakan dibawah kode <body>

<div class='menu' title='Menu'><span style='font-size:16px;position:absolute;top:1px;left:-48px'/> &#8801;</div>
<div id='css-menu'>
<div id='cssmenu'>
<ul>
<li class='home'><span class='close-menu' style='font-size:26px;font-weight:400;position:relative' title='Close'>&#8801; <span style='font-size:18px;font-weight:700;position:absolute;top:17px;left:33px'>Menu</span></span></li>
<li><a href='/' title='Home'><span>Home</span></a></li>
<li><a href='#' title='TES'><span>TES</span></a></li>
<li class='has-sub'><a href='#' title='TES'><span>TES</span></a>
<ul>
 <li><a href='#' title='TES'><span>TES</span></a></li>
<li><a href='#' title='TES'><span>TES</span></a></li>
<li class='last'><a href='#' title='TES'><span>TES</span></a></li>
</ul>
</li>
<li><a href='#' title='TES'><span>TES</span></a></li>
 <li class='has-sub'><a href='#' title='TES'><span>TES 1</span></a>
<ul>
<li><a href='#' title='TES 1'><span>TES 1</span></a></li>
<li><a href='#' title='TES 2'><span>TES 2</span></a></li>
<li><a href='#' title='TES 3'><span>TES 3</span></a></li>
<li><a href='#' title='TES 4'><span>TES 4</span></a></li>
<li><a href='#' title='TES 5'><span>TES 5</span></a></li>
<li class='last'><a href='#' rel='nofollow' target='_blank' title='TES Menu 6'><span>TES MENU 6</span></a></li>
</ul>
</li>
</ul>
</div>
</div>

Ganti # dengan Link Untuk menu Punya kamu KEMUDIAN ganti TES dengan Nama sesuai keinginan nya

3.Setelah itu Copy dibawah ini dan letakan dibawah </body>

<script type='text/javascript'>
//<![CDATA[
$('#cssmenu ul ul li:odd').addClass('odd');
$('#cssmenu ul ul li:even').addClass('even');
$('#cssmenu > ul > li > a').click(function() {
  $('#cssmenu li').removeClass('active');
  $(this).closest('li').addClass('active');
  var checkElement = $(this).next();
  if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
    $(this).closest('li').removeClass('active');
    checkElement.slideUp('normal');
  }
  if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
    $('#cssmenu ul ul:visible').slideUp('normal');
    checkElement.slideDown('normal');
  }
  if($(this).closest('li').find('ul').children().length == 0) {
    return true;
  } else {
    return false;
  }
});
//]]>
  </script>
<script type='text/javascript'>
$(function() {  
    $(&#39;.menu&#39;).click(function () {
    $(&#39;#css-menu&#39;).css({left:&#39;0&#39;});
});
    $(&#39;.close-menu&#39;).click(function() {
    $(&#39;#css-menu&#39;).css({left:&#39;-340px&#39;});
});
 });
</script>

Setelah itu Save Template
Sekarang Untuk membuat slideshow pada bagian Head agar bisa diberi Foto dan Link slide pada bagian atas
1.Copy dibawah ini dan letakan diatas ]]></b:skin>

.easyslider-wrapper { 
    width: auto; 
    float: center; 
    position: relative; 
    padding-right: 2%; 
    padding-top: 10px; 
    }
.easyslider { 
    overflow: hidden; 
    position: relative; 
    width: 100%; 
    height: 350px; 
    background: #000000; 
    }
.image_reel { 
    position: absolute; 
    top: 0; 
    left: 0; 
    }
.image_reel img { 
    float: left; 
    width: 20%; 
    height: 500px;
    }
.paging { 
    background: none; 
    position: absolute; 
    bottom: 15px; 
    right: 20px; 
    padding:4px 0 2px; 
    z-index: 100; 
    display: none; 
    }
.paging a { 
    margin: 3px; 
    background: #fff; 
    width: 10px; 
    height:10px; 
    display: inline-block; 
    border: none; 
    outline: none;
    }
.paging a.active { 
    background: #15E3FF; 
    border: 1px solid #15E3FF; 
    }
.paging a:hover {
}
.easytitledes { 
    width:70%; 
    display: none; 
    position: absolute; 
    bottom: 20px; 
    left: 20px; 
    z-index: 101; 
    background: #000A3F;
    background: rgba(2, 0, 51, 0.6); 
    padding: 10px 15px; 
    }
.easytitledes a { 
    color: #15E3FF; 
    font: 14px sans-serif; 
    text-transform: uppercase; 
    font-weight: bold; 
    }
.easytitledes a:hover { 
    color:#29FF00 
    }
.easytitledes p { 
    color: #fff; 
    font: 12px Arial; 
    }

2.Copy dibawah ini kemudian diletakan diatas </head>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js" type="text/javascript"></script>

3.Kemudian Copy dibawah ini dan letakan juga diatas </head>

<script type="text/javascript"> 
/*<![CDATA[*/$(document).ready(function() {
    $(".paging").show(); 
    $(".paging a:first").addClass("active");
var imageWidth = $(".easyslider").width(); 
var imageSum = $(".image_reel img").size(); 
var imageReelWidth = imageWidth * imageSum;
    $(".image_reel").css({'width' : imageReelWidth});
rotate = function(){ var triggerID = $active.attr("rel") - 1; 
var image_reelPosition = triggerID * imageWidth;
    $(".paging a").removeClass('active');
        $active.addClass('active');
    $(".easytitledes").stop(true,true).slideUp('slow');
    $(".easytitledes").eq( 
    $('.paging a.active').attr("rel") - 1 ).slideDown("slow"); 
    $(".image_reel").animate({left: -image_reelPosition}, 400 );
    };

rotateSwitch = function(){
    $(".easytitledes").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow");

play = setInterval(function(){
    $active = $('.paging a.active').next();

if ( $active.length === 0) {
    $active = $('.paging a:first'); } rotate(); }, 8000); };
rotateSwitch(); $(".image_reel a, .easytitledes a").hover(function() {
    clearInterval(play); }, function() { rotateSwitch();
    });
    $(".paging a").click(function() { $active = $(this);
    clearInterval(play); rotate(); rotateSwitch();  return false;
    });
});
/*]]>*/</script>

3.Kemudian Copy kode dibawah ini letakan diatas </header>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='easyslider'>
<div class='image_reel'>
<a href='#'><img src='https://4.bp.blogspot.com/-tiw2c8O7t2g/WiEk0bypscI/AAAAAAAAAUY/k4DY02sDjdw7YLDVt0pEUJN7XBlW6eYogCLcBGAs/s1600/ica.jpg'/></a>
<a href='#'><img src='https://4.bp.blogspot.com/-tiw2c8O7t2g/WiEk0bypscI/AAAAAAAAAUY/k4DY02sDjdw7YLDVt0pEUJN7XBlW6eYogCLcBGAs/s1600/ica.jpg'/></a>
<a href='#'><img src='jpg'/></a>
<a href='#'><img src='jpg'/></a>
<a href='#'><img src='jpg'/></a>
</div>
<div class='descriptionslider'>
<div class='easytitledes'><a href='https://w-icha.blogspot.co.id/2017/11/tes_icha.html'>Tes</a><p>Description</p></div>
<div class='easytitledes'><a href='https://w-icha.blogspot.co.id/2017/11/tes.html'>TES 1</a><p>Description</p></div>
<div class='easytitledes'><a href='.'>TES 1</a><p>Description</p></div>
<div class='easytitledes'><a href='.'>TES 1</a><p>Description</p></div>
<div class='easytitledes'><a href='.'>TES 1</a><p>Description</p></div>
</div>
<div class='paging'>
<a class='' href='#' rel='TES 1'/>
<a class='' href='#' rel='TES 2'/>
<a class='' href='#' rel='TES 3'/>
<a class='' href='#' rel='TES 4'/>
<a class='' href='#' rel='TES 5'/>
</div>
</div>
</b:if>

Ganti Warna Biru # Link Punya Kamu bisa dengan Url Postingan atau laman dan dengan Warna Merah dengan Url Gambar kamu DAN ganti juga Nama Dengan Sesuai yang diinginkan

Jika semua sudah selesai dan Save Template kemudian cek hasilnya maka seperti gambar di bawah ini :


Kemudian selesailah Template Standar milik Kamu sendiri "selamat" kemudian tinggal menambahkan pada bagian area Footer bisa dibaca dibawah ini :
Cara membuat footer disini Resposive

Semoga bermanfaat

Cara membuat template blog sendiri untuk Blogger 

Author:

#

Artikel Menarik Banget ? d-ii , Suka...

Scroll to top