Blogger Template Gratis sekarang saya beri nama "KREASI BB.1" yang bisa kawan coba pakai secara cuma-cuma kalau kawan menginginkan untuk mengganti Template Blog kawan :z;
Cara Install Template
Cara Setting Template Kreasi bb.1
Seperti biasa pesan saya pada kawan hanyalah kesadaran saja yaitu agar jangan menghilangkan Link yang mengarah ke Blog saya sebagai pencipta Template ini :w;
 |
 |  |
- Download Template Kreasi bb.1 selanjutnya Ekstrak dulu di Komputer kawan
- Masuk Account Blogger dengan ID kawan
- Pada Dasbor pilih Template - pilih Cadangkan / Pulihkan
- Simpan Template kawan dulu untuk jaga-jaga [Unduh Template Lengkap]
- Pilih File Kreasi BB.1 yang sudah kawan ekstrak tadi - Unggah
- Selanjutnya pilih Tata Letak untuk memindahkan Widget agar sesuai pada tempat yang kawan inginkan
Cara Setting Template Kreasi bb.1
- Pilih kembali Template - Edit HTML - Lanjutkan
- Cari Header, selengkapnya sebagai berikut :
#header {height: 60px;margin:0 auto 0;}#header h1 {clear: both;float: left;padding: 0 0 0 25px;}#header h1 a {display: block;text-indent: -9999px;outline: none;width: 400px;height: 66px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifHqTgLNkrMdo21D1fBBQyrhphuErfSXvkSNBUz7HeOrQ6I1PXhWynnBngfkbMSstUdIE68AHupJVFJDxBi1_2JO1U4fGzyt3TNK4UWDOYEpT813Z0ZsnsvPefiHeG1il5IuEWV1LSyUpY/s400/BLOG-BEGO.png) no-repeat 0 0;}#header .ad {width: 500px;float: right;padding: 5px 6px 0 0;}
Silahkan ganti teks yang berwarna merah dengan Link image [Judul Blog] kawan
- Cari <div id='NavbarMenu'> selengkapnya sebagai berikut
<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a href='http://belogbego.blogspot.com/'>BERANDA</a></li>
<li><a href='/search?max-results=500'>Daftar Isi</a></li>
<li> <a href='#'>EDIT</a>
<ul>
<li> <a href='#'>EDIT-a</a></li>
<li> <a href='#'>EDIT-b</a></li>
</ul></li>
<li> <a href='#'>PAGE</a>
<ul>
<li> <a href='#'>PAGE-a</a></li>
<li> <a href='#'>PAGE-b</a></li>
<li> <a href='#'>PAGE-c</a></li>
</ul></li>
<li><a href='#'>LAMAN</a>
<ul>
<li><a href='#'>LAMAN Page #A</a>
<ul>
<li><a href='#'>Page #A-1</a></li>
<li><a href='#'>Page #A-2</a></li>
<li><a href='#'>Page #A-3</a></li>
</ul></li>
<li><a href='#'>LAMAN #B</a></li>
<li><a href='#'>LAMAN #C</a></li>
<li><a href='#'>LAMAN #D</a></li>
<li><a href='#'>LAMAN #E</a></li>
</ul></li>
<li><a href='http://astore.amazon.com/wacc01-20' target='_blank'> AMAZON </a></li>
<li><a href='http://pagespeed.googlelabs.com' target='_blank'> TEST BLOG </a></li>
</ul>
</div>
Silahkan ganti sesuai dengan keinginan kawan
Seandainya pada Template kawan banyak menyimpan Script / HTML silahkan copas dan simpan disesuaikan agar tidak hilang :x; misalnya Blog Description, Keyword dan lain sebagainya
- Jangan lupa simpan Template kawan
Sekarang saya akan mencoba berbagi dengan kawan cara membuat Halaman Navigasi, :z; untuk kawan Blogger yang konsen di Blogspot saya rasa pasti tak asing dengan yang namanya Navigasi, tapi tak ada salahnya untuk kawan yang belum mengetahui apa itu Navigasi, tak ada salahnya saya sampaikan Navigasi biasanya berada diatas Blog kita, tapi pada Blog saya ini saya taruh di bawah :x;
Cara membuatnya :
- Masuk Account Blogger dengan ID kawan
- Pada Dasbor pilih Template - Edit HTML - Lanjutkan
- Copas Script berikut diatas ]]></b:skin>
#Bego-nav img {/* margin: 5px auto; */vertical-align: middle;}#Bego-nav p.info {float: right;padding: 0 10px;margin: 0 auto 0;line-height: 1.6;height: 100%;vertical-align: bottom;}#Bego-nav p {float: left;margin: 0 0 -5px 0; padding: 0 10px;line-height: 1.6;vertical-align: bottom;}#Bego-nav a {color:#00F;text-decoration:none;}#Bego-nav a:hover{color: #F00;}#Bego-nav {align: center;position: fixed;border-top: 0px solid #DDD;border-bottom: 0px solid #030;background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1565oH7Tl5cYwQUj-QEY-ME9s6Zr9bxUyfRY_BdDNinIoY0eHVhLg_PerF8oiQm0kQHJTeK9Ty40k_n0Iv_w7jZ6TCzGaZMhL2hL8sLt-rWaRp1F7yYmmJgiSqWttLWKlij505V5pooUf/s1600/bg_nav-bego.png) repeat-x center center;width: 100%;left: 0px;text-align: left;color: #ffffff;font-family: verdana;font-size: 14px;z-index:10000;bottom:0px;}
Teks yang saya beri warna merah menunjukkan posisi Navigasi, kalau kawan ingin merubah posisim silahkan menggantinya, sedangkan 0px adalah menandakan nempel / mepet kepinggir,
- Silahkan simpan sementara Template kawan :q;
- Selanjutnya Copas Script berikut diatas </body>
Simpan disini File kawan
</div>
- Sebagai contoh yang sudah jadi saya gabung dengan Daftar Isi Plus Komentar Berjalan selengkapnya sebagai berikut :
<div id='Bego-nav'><table border='0' width='1000px'><tr><td align='center'><div style='width:250px; border: 0px solid #ccc; background:transparent;padding:10px 10px 0 10px;margin:0; text-shadow:2px 2px 2px #F00; font-size: 14px; COLOR: white;'><b>ARSIP BLOGBEGO CREATION :</b></div>
</td><td align='center'><div style='border: 2px solid #ccc; background: #FFF; padding:0px 10px; font-size: 14px; color:blue;margin:12px 10px 3px;'><b><!-- Alphabetical/chronological Post Title Listing with comment count Start --><script type="text/javascript">function getYpipeTL(feed) {document.write('<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4">');var i;for (i = 1; i < feed.count ; i++){var href = "'" + feed.value.items[i].link + "'";var pTitle = feed.value.items[i].title + "</a> &#187; ";var pComment = " \(" + feed.value.items[i].commentcount + " komentar\) &#171;&nbsp; ";var pList = "</a>" + "<a href="+ href + '"target="_blank">' + pTitle;document.write(pList);document.write(pComment); //to remove comment count delete this linedocument.write('</a></li>');}document.write('</marquee>');}</script><script src="http://pipes.yahoo.com/pipes/pipe.run?YourBlogUrl=http://blogbego-creation.blogspot.com&Order=alphabet&_id=401e43055731c1a29f1e1d3eb5e8e13f&_callback=getYpipeTL&_render=json"type="text/javascript"></script><span style="font-size: 8px; float:right;"> </span><!-- Alphabetical Post Title Listing End --></b></div></td></tr></table></div>
- Kalau kawan ingin mencobanya, saya persilahkan untuk mengganti Link Blog saya, dan jangan lupa simpan Template kawan :y;
Postingan saya sebelumnya Cara Membuat Elemen Sembunyi disisi Kanan, sekarang saya akan berbagi lagi dengan kawan Cara Membuat Elemen Sembunyi di sisi Kiri :z; hal ini saya sampaikan karena selera kita berbeda-beda dan yang paling sering saya lihat pada Blog terutama yang disisi kanan, kalau kawan berminat dua-duanya tidak ada masalah karena kode scriptnya sudah saya bedakan :x;
Caranya sama dengan yang sebelumnya :
- Masuk Account Blogger dengan ID kawan
- Pada Dasbor pilih Tata Letak - Tambah Gadget - HTML / JavaScript
- Copas Script berikut kedalamnya
<style type="text/css">
#bbl {
position:fixed;
top:50px;left:0px;
z-index:+1000;
}
* html #bbl {position:relative;}
.bbltab {
height:150px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw313WIdpQMef6dyPDGsuCFRhXIEsIdUXvghL32O44fhNSNLxa-2FKbXFs4E8BLYxnNpNTLLxEt8BLjENwyFyseD9dJpdAbMuwNFkqamOAGNAWiEPaaWCGA39b_2u75V6ObxyidPKPAN8/s1600/Komen-tar.png') no-repeat;
}
.bblcontent {
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
.bb-credit {font-size:9px}
.bb-credit a {text-decoration:none}
</style>
<script type="text/javascript">
function showHidebbl(){
var bbl = document.getElementById("bbl");
var w = bbl.offsetWidth;
bbl.opened ? movebbl(0, 30-w) : movebbl(20-w, 0);
bbl.opened = !bbl.opened;
}
function movebbl(x0, xf){
var bbl = document.getElementById("bbl");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
bbl.style.left = x.toString() + "px";
if(x0!=xf){setTimeout("movebbl("+x+", "+xf+")", 10);}
}
</script>
<div id="bbl">
<div class="bblcontent">
<center>=====SIMPAN FILE DISINI=====</center>
<div class="bb-credit">
<span style="float:right">
<a href="javascript:showHidebbl()">
[close]
</a></span></div></div>
<div class="bbltab" onclick="showHidebbl()"> </div>
<script type="text/javascript">
var bbl = document.getElementById("bbl");
bbl.style.left = (30-bbl.offsetWidth).toString() + "px";
</script></div>
- Teks yang berwarna merah untuk posisi silahkan disesuaikan
- Teks yang berwarna biru silahkan diganti dan disesuaikan dengan isinya
- Script Cara Membuat Elemen Sembunyi disisi kanan maupun disisi kiri ini bisa juga kawan simpan pada Template Blog sebelum </body></html> dan jangan lupa di-parse dulu :q;
Cara membuatnya sebagai berikut :
- Seperti biasa masuk ke Account Blogger dengan ID kawan
- Pada Dasbor pilih Tata Letak - Tambah Gadget - HTML / JavaScript
- Masukkan Script berikut kedalamnya
<style type="text/css">
#bb{
position:fixed;
top:50px; z-index:+1000;}* html #bb{position:relative;}
.bbtab{
height:152px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqmXYsM6q0yJ57Ikg4bwLSK8DR0B1ksAXZTyHSSzX_Zds_dKn1umLFZOP3TMbhp5DxzJR1YIpYDS7WYfZZW_gui-13sLL3F8ii8t8XaLYoUGwM2zXWdvMxeD4CpHOnud-EDe7nNNWq3wI/s1600/Daftar+isi.png') no-repeat;}
.bbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;}
</style><script type="text/javascript">
function showHideBB(){
var bb = document.getElementById("bb");
var w = bb.offsetWidth;bb.opened ? moveBB(0, 30-w) : moveBB(20-w, 0);
bb.opened = !bb.opened;}function moveBB(x0, xf){
var bb = document.getElementById("bb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;bb.style.right = x.toString() + "px";if(x0!=xf){
setTimeout("moveBB("+x+", "+xf+")", 10);}}
</script><div id="bb">
<div class="bbtab" onclick="showHideBB()"></div>
<div class="bbcontent">
<center>=======SIMPAN DISINI FILE KAWAN=======</center>
<div style="text-align:bottom">
<a href="javascript:showHideBB()">[close]</a>
</div>
<script type="text/javascript">
var bb = document.getElementById("bb");bb.style.right = (30-bb.offsetWidth).toString() + "px";
</script>
</div></div>
Keterangan tambahan :
- Top : 50px adalah jarak dari atas dengan judul yang kelihatan.
- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo7DSHKcDASceB64PWWJAf591Ri-l9zzDezsbSLaq9QKajMw7hgEjPp0U8DoFEYdrPLX2c0-US-fBVvojTnko9qUPSUxTSxRZ0WhJIuovtXF34SPp8LUVKOxTBPDVhJsA3b9PexjGi-Ms/s1600/Untitled-5.png ini adalah judul yang akan kelihatan - silahkan ganti untuk menyesuaikan dengan isinya,
- Simpan Blog kawan dan lihat hasilnya
Kawan Blogger semua sudah pasti tahu apa itu Readmore / selengkapnya atau apalah namanya yang berfungsi untuk memotong / memenggal isi Artikel, :q; di Home Page, yang pada Template Modern sudah terisi secara tak langsung, begitu juga pada Editor [tempat menulis artikel] juga sudah ada fasilitas dimaksud :z; seperti gambar berikut
karena sifatnya default dan manual yang menyebabkan banyaknya suka kata yang kita potong besar kemungkinan tidak sama :y;
Readmore / Selengkapnya yang saya bahas sekarang ini khusus untuk kawan Blogger yang Blognya tidak berisi Readmore atau untuk kawan Blogger yang ingin mencoba ber-Kreasi dengan Readmore Otomatis seperti yang saya pakai pada Blog ini
Caranya :
- Masuk Account Blogger dengan ID kawan
- Pada Dasbor pilih Template - Edit HTML - Lanjutkan
- Copas Kode berikut diatas ]]></b:skin>
.jump-link a{-moz-border-radius:5px;-khtml-border-radius: 5px;-webkit-border-radius: 5px;float:right;padding: 0 12px; background: transparent; color: #456069;font-style: normal;border:0px solid #333;margin: 0 5px;text-decoration:none; text-shadow: 2px 2px 2px #FFF; font-family: Segoe Print;font-size: 14px;}.more a:hover, .jump-link a:hover{background: transparent;color:#F00;text-shadow: 2px 2px 2px #FFF;text-decoration:none; }
- Selanjutnya copas script berikut diatas </head>
<SCRIPT type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 300; summary_img = 250; img_thumb_height = 50; img_thumb_width = 50; </SCRIPT> <SCRIPT src='https://sites.google.com/site/blogbegocreation/javascript/readmore-otomatis.js' type='text/javascript'/>
- Simpan sementara Template kawan
- Beri tanda check disamping Expand Template Widget
- Cari <data:post.body/> yang pertama yang kode kurang lebih sebagai berikut
<div class='post-header-line-1'/>
<div class='post-body entry-content'>
<data:post.body/>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
- Ganti semua script yang saya beri warna Biru dengan script berikut
<div class='post-body entry-content'>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<DIV expr:id='"summary" + data:post.id'><p><data:post.body/></p></DIV> <SCRIPT type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</SCRIPT>
</b:if></div>
<b:if cond='data:blog.pageType != "item"'>
<div style='float:right; padding: 0 5px; margin: -5px 0 -15px 0; '>
<div class='jump-link'><a expr:href='data:post.url' target='_blank'>Selengkapnya..... </a>
</div></div></b:if>
- Simpan Template kawan
Ini hanyalah salah satu contoh Readmore Otomatis dari sekian banyak model yang ada, silahkan kawan men-Kreasikan sesuai seninya masing-masing :w;
