HOSTING MURAH 2014

Blogger Template Kreasi BB.1

Unknown | 07:33 | Blogger Template , Template

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;

Seperti biasa pesan saya pada kawan hanyalah kesadaran saja yaitu agar jangan menghilangkan Link yang mengarah ke Blog saya sebagai pencipta Template ini :w;

Cara Install Template

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

<li><a href='http://belogbego.blogspot.com/'>BERANDA</a></li>

<li><a href='/search?max-results=500'>Daftar Isi</a></li>

<ul>

</ul></li>

<ul>

</ul></li>

<li><a href='#'>LAMAN</a>

<ul>

<li><a href='#'>LAMAN Page #A</a>

<ul>

</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>

</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

Cara Membuat Halaman Navigasi

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>

<div id='Bego-nav'>
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>
<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 line
document.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>
</b></div>
</td></tr></table>
</div>

Kalau kawan ingin mencobanya, saya persilahkan untuk mengganti Link Blog saya, dan jangan lupa simpan Template kawan :y;

Cara Membuat Elemen Sembunyi di-Sisi Kiri

Unknown | 02:47 | Blog Bego , tips trik , widget

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;

Selamat Mencoba !!!

Cara Membuat Elemen Sembunyi di-Sisi Kanan

Unknown | 08:10 | Blog Bego , tips trik , widget

Pada saat sekarang ini saya akan mencoba ber-Kreasi pada Cara Membuat Elemen Sembunyi disisi Kanan Blog :r; yang mana kegunaannya agar Blog kita tampil Simple dan kelihatan Rapi [ini hanya selera saya saja - maaf], artinya cara menyembunyikan Elemen Artikel pada Blog dan yang akan kelihatan hanya Judulnya saja disisi kanan Blog, kalau judul itu di Klik maka akan keluar isinya ke tengah body Blog :y;

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

Cara membuat Readmore Otomatis

Unknown | 07:20 | Blog Bego , Kreasi , link , tips trik

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

<data:post.body/>

<b:if cond='data:post.hasJumpLink'>

</div>

</b:if>

</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;

Cara Mengganti Header dengan Animasi

Unknown | 03:10 | animasi , Blog Bego , Kreasi

Sekarang saya akan berbagi dengan kawan hasil Kreasi alias Percobaan saya yang berhasil dengan sukses untuk kawan Blogger yang setia mengunjungi BlogBego Creation ini yaitu "Cara Mengganti Header dengan Animasi" yang kawan bisa lihat pada Header Blog saya ini :y;

Langsung ke caranya :

Siapkan dan buat Animasi silahkan baca disini
Masuk Account Blogger dengan ID kawan
Pada Dasbor pilih Template - Edit HTML - Lanjutkan
Cari #header-wrapper { yang biasanya terletak dibawah sekitar body {

Contoh pada Template saya sebagai berikut :

#header-wrapper {width: 100%;margin: 0 auto 0;background: #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmJ1ViRtqC3xdtdTW2r5jAhXaN3EyyZ8P9A1srqQje4plU5ylxxsrYH2gwgCuEFBmN1WHgVYzD9Ne4YpsLsFK836z4NiGxl-WOj2SiLxnewlIhFN0kAcFSHJJtprxRk4wu1y8jrFz8uJo/s1600/headerbg.jpg) no-repeat center center;padding: 5px 0 10px 10px; height: 90px;border-bottom: 0px solid rgb(10, 115, 154);}
#head-inner {width:400px;background-position: left; margin: 15px auto 0; padding: 5px; float:$startSide;}
#header {margin: 0; text-align: left; color: $pagetitlecolor;}
#header h1 {color: $pagetitlecolor; margin: 0; padding: 10px 0 0 20px; text-decoration: none; font: $pagetitlefont;}
#header h1 a, #header h1 a:visited {color: $pagetitlecolor; margin: 0; padding: 0;text-decoration: none; }
#header h1 a:hover {color: $pagetitlecolor;}
#header .description {color: $descriptioncolor;margin-left: 12px;padding: 10px 0 0 10px;font: $descriptionfont;}
#header img {margin-left:auto;margin-right: auto;}
#headerright{width: 500px;float: right;padding: 10px 20px 0 10px;margin: 0 auto 0;text-align:center;font-size:12px;}
#headerright h2{display:none}
#headerright a, #headerright a:hover, #headerright a:visited{color:$linkcolor;}

Teks yang berwarna hitam adalah warna latar utama Header

Ganti semua dengan :

#header-wrapper {width: 100%;margin: 0 auto 0;background: #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmJ1ViRtqC3xdtdTW2r5jAhXaN3EyyZ8P9A1srqQje4plU5ylxxsrYH2gwgCuEFBmN1WHgVYzD9Ne4YpsLsFK836z4NiGxl-WOj2SiLxnewlIhFN0kAcFSHJJtprxRk4wu1y8jrFz8uJo/s1600/headerbg.jpg) no-repeat center center;padding: 5px 0 10px 10px; height: 90px;border-bottom: 0px solid rgb(10, 115, 154);}
#header {height: 90px;margin:0 auto 0;}
#header h1 {clear: both;float: left; padding: 10px 0 0 25px;}
#header h1 a {display: block;text-indent: -9999px;outline: none;width: 400px;height: 55px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjur1IyOzwwWNrrEGrQNfEI8wmGAAU3MMTcTe8KzfdR-TL9gVdFxbhxNYxh6RdoB3D2aSvKdYEcnc9j9qgTP9Nqq_HGPTUJlEDArAhc5bwYm8kTiioajQdRRE7Ecgs1Rm7-X8C3nH-f6gc/s1600/Header+BBC.gif) no-repeat 0 0;}
#header .ad {width: 500px;float: right;padding: 15px 6px 0 0;}

Teks yang berwarna merah [width:400px;height:55px;] untuk Header Animasi, sedangkan [width:500px;] untuk Banner Iklan Sponsor 468x60.
Teks yang berwarna putih dengan background biru adalah URL Animasi saya, silahkan diganti dengan URL Animasi kawan :z;

Simpan sementara Template kawan sebelum menlanjutkan

Selanjutnya cari <div id='header-wrapper'> yang letaknya dibawah </head><body> yang selengkapnya kurang lebih seperti berikut :

<div id='header-wrapper'>
<div id='head-inner'>
<b:section class='header' id='header' showaddelement='no'>
<b:widget id='Header1' locked='true' title='BLOGBEGO CREATION (Header)' type='Header'/>
</b:section>
</div>
<div id='headerright'>
<b:section class='headerright' id='headerright' showaddelement='yes'/>
</div></div>

Ganti semua dengan :

<div id='header-wrapper'><div id='header'>
<div class='break'/>
<h1><a expr:href='data:blog.homepageUrl'>My Blog</a></h1>
<div class='ad'>
<b:section class='headeradsense' id='headeradsense' preferred='yes' showaddelement='no'/>
[Tempatkan Banner Iklan Sponsor 468x60 atau yang lainnya disini] </div></div></div>

Simpan Template kawan, :x;

AGAR DIPERHATIKAN :

Saat menyimpan Template terjadi masalah, disebabkan oleh </div> bisa kelebihan dan bisa kekurangan yang diletakkan sebelum 

Selamat Ber-Kreasi

Gratis Blogger Template Main Kolom 32

Unknown | 02:00 | Blogger Template , Template

Blogger Template Main Kolom 32 adalah Lanjutan Template Main Kolom sebelumnya yang merupakan Template Kalaborasi dengan menggunakan antara Theme WordPress yang diciptakan oleh ChiQ Montes [ di Edit menjadi Blogger Template oleh: BloggerTricks ] dengan Template Magazine Flatform Blogspot yang saya beri Nama Main Kolom 32 :z;
Mengapa memakai Nama Main Kolom 32,....... ?! [apalah artinya sebuah nama]
maksud saya disini : Tampilan pada Home Page dengan 3 Kolom, sedangkan pada Full Page menjadi 2 Kolom [Post dan Sidebar - kiri kanan]
Perhatikan screenshot dibawah

Nama Template : Main Kolom 32
Flatform : Blogger / Blogspot
Nama Author & URL : Blogger Edan

Deskripsi : Template Blogger Main Kolom 32 adalah Blogger Template Gratis kalau kawan ingin mencoba Template ini untuk Blog kawan silahkan, Gratis..... Blogger Template Main Kolom 32 ini dengan Header Fixed dan sudah berisi seperti Menu Navigasi, Readmore Otomatis, Relatif Post dan lain sebagainya, membuat tampilan Blog dengan kesan beda dan seperti profesional.

Lisensi

Blogger Template Main Kolom 32 merupakan Blogger Template Gratis yang bisa kawan pergunakan secara cuma-cuma, namun yang harus kawan patuhi adalah tidak boleh mengahapus Credit Link ke Desainer Template yang ada dibagian Credit [kanan bawah] Template.

HOSTING MURAH 2014

468x60 Ads

Blogger Template Kreasi BB.1

Cara Membuat Halaman Navigasi

Cara Membuat Elemen Sembunyi di-Sisi Kiri

Cara Membuat Elemen Sembunyi di-Sisi Kanan

Cara membuat Readmore Otomatis

Cara Mengganti Header dengan Animasi

Gratis Blogger Template Main Kolom 32

Future Video

Blog Archive

Populer Post

Recent Post

Text

Comments

Followers

Ads