HOSTING MURAH 2014

Slide Carousel untuk Daftar Isi

Cara Membuat Animasi Daftar Isi Otomatis yang pernah saya posting disini dan disini yang Demonya disini, yang kalau dipraktekkan hasilnya selalu gagal [atau kemungkinan diperlukan Template khusus] tapi kawan tak usah berkecil hati karena saya sudah menemukan Cara Membuat Slider Carousel Otomatis Berdasarkan Label yang modelnya hampir sama dengan Animasi Daftar Isi Otomatis karena sudah saya modifikasi dari Berdasarkan Label menjadi Daftar Isi yang model tampilannya seperti Image berikut :

Untuk Demonya kawan bisa lihat

Setelah kawan melihat Demonya, mari kita langsung ke Cara Membuatnya

Masuk Account Blogger dengan ID kawan
Pada Dasbor pilih Template - Edit HTML - Lanjutkan
Cari tag ]]></b:skin>
Copas Script berikut diatas ]]></b:skin>

#bbccarousel{
width: 980px;
height:125px;
border-bottom:1px solid #ccc;
position:relative;
display:block;
background:#5599e6;
margin-bottom:8px;
}
#bbccarousel h3{
color:#555;margin:2px;
}
#bbccarousel .container{
position:absolute;left:24px;
width:930px;
height:125px;
overflow:hidden;
}
#bbccarousel .thumb{float:left;margin-right:5px;}
#bbccarousel #previous_button{
position:absolute;
width:24px;height:125px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxdV6td-uwnqvliVXlzyBXp-CMpZZ12hs4RQDwu1a5RpYoi-3-OjawqPmo3-xn_c1xQMNmcDcZ065rchA3kTB1lmMFTf6jzPAN-zkOs3ALtm1E9iB0V1kfCJUJZzbryM7iuCzLcHCtKaJo/s1600/previous.png) center;z-index:100;cursor:pointer;}
#bbccarousel #next_button{
position:absolute; right:0;
width:24px;height:125px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx1WqgwFlArSgo1lw2KMkZNn7QzFFOFBDszL11HwxjCVUgJaBvUQnCCRHLkMSNtDu0wENYRTgAVJWQ6Xz_0Vx8JyfHKjCZfo2XG_eYwkuu2NsZUdZeDmT3kClteT2TV7VR0SK8sElXRW2K/s1600/next.png) center;z-index:100;cursor:pointer;}
#bbccarousel #next_button:hover,#bbccarousel .thumb:hover,#bbccarousel #previous_button:hover{filter:alpha(opacity=70);opacity:.7}
#bbccarousel ul{
width:100000px;
position:relative;
margin-top:10px;
}
#bbccarousel ul li{
background:#ebebeb;
display:inline;
float:left;text-align:left;
font:bold 11px Arial;
border:0px solid #ccc;
width:212px;
height:90px;
margin:0 2px 20px 6px;
padding:6px;
}
#bbccarousel ul li a.slider_title{
color:#222;
display:block;
margin-top:0;
padding-top:0;
}
#bbccarousel ul li a.slider_title:hover{color:#1b5d97}
#bbccarousel a img{
display:block;
background:#fff;
margin-top:0;
}

Selanjutnya Copas script berikut dibawah ]]></b:skin> atau diatas </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='https://sites.google.com/site/blogbegocreation/javascript/bbccarousel.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfXLcxEHXOwN0BGPVrlH4mUoszES4nUeVi5DE39QkEBaTgkPe25mP04UAy8jIUZ6jFtjSozgslFsWgahkMHgu3WXAIyyVayJhO6ShqQ9ks9hfACz7cBNpagf6fCFovp2ndLO4OVANlKlA/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 140;
summaryTitle = 25;
numposts1 = 50;
function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
s = s.join("");
s = s.substring(0,chop-1);
return s;
}
function showrecentposts(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
document.write('<ul>');
for (var i = 0; i < numposts1; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Ags","Sep","Okt","Nov","Des"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}
var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="100" height="90" class="alignnone" src="'+img[i]+'"/></a></div><h3>'+daystr+'</h3><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></li>';
document.write(trtd);
j++;
}
document.write('</ul>');
}
//]]>
</script>

Simpan Template kawan
Teks yang saya beri warna merah, seandainya pada Template kawan sudah berisi walaupun serialnya berbeda - bisa dihilangkan, cukup pasang satu saja
Teks yang saya beri warna Kuning adalah jumlah Posting yang dipakai Slider, bisa dirubah

Langkah terakhir adalah memanggil Slide, disini kawan ada dua cara » Langsung di Template dan » Tambah Gadget [INGAT Pilih salah satu]
Kalau langsung pada Template :

Beri tanda check disamping Expand Template Widget
Cari <div id='main-wrapper'>
Copas script berikut diatasnya [sebelumnya di Parse dulu]

Kalau kawan ingin menaruhnya di Gadget :

Pada Tata Letak pilih Tambah Gadget - HTML / JavaScript
Copas script berikut kedalamnya

<div id='bbccarousel'>
<div id='previous_button'/>
<div class='container'>
<script>
document.write(" <script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
<div class='clear'/></div>
<div id='next_button'/></div>
<script type='text/javascript'>
(function($) { $(document).ready(function(){
$("#bbccarousel .container").bbcCarousel({
auto:4000,
scroll: 3,
speed: 800,
visible: 4,
start: 1,
circular: true,
btnPrev: "#previous_button",
btnNext: "#next_button",
});
})})(jQuery)
</script></div></div></div>

Simpan Kembali Template / Blog kawan

Kelebihan Slider Carousel untuk Daftar Isi ini selain bisa dipanggil lewat Gadget juga bisa dipakai untuk Slider berdasarkan Label / Katagori :q;

Caranya sebagai berikut :

misalnya kawan ingin Slide dengan Label tutorial maka

numposts1 =50, bisa kawan sesuaikan dengan jumlah Label yang ingin dipakai Slide
Tambahkan label1="tutorial", dibawah numposts1 = 50;
Ganti <script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts\"> dengan <script src=\"/feeds/posts/default/-/"+label1+"?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts\">
Simpan Template kawan

Slide Daftar Isi Lainnya

Unknown | 17:00 | animasi , Blog Bego , tips trik , widget

Kawan masih ingat dengan Artikel saya tentang Slide Daftar Isi :z; kalau ingin membacanya dipersilahkan dulu, karena yang sekarang ini bentuk dan modelnya sama cuma ini mempunyai kelebihan tersendiri pokoknya Keren [bagi saya pribadi lho] karena yang ini bisa diatur misalnya ukuran, warna huruf, untuk lihat Demonya disini

SCREENSHOT

Cara membuatnya sebagai berikut :

Masuk Account Blogger dengan ID kawan
Pada Dasbor pilih Tata Letak - Tambah Gadget - HTML / JavaScript
Copas Script berikut kedalamnya

<style type="text/css">
.gfg-root {
width : 100%;
height : auto;
position : relative;
overflow : hidden;
text-align : center;
font-family: "Arial", sans-serif;
font-size: 14px;
border: 1px solid #000;
}
.gfg-title {
font-size: 20px;
font-weight : bold;
font-family: Segoe Print;
color : #FF0;
text-shadow: 1px 1px 1px #F00;
background-color: #000;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
padding: 5px;
}
.gfg-title a {
color : #3366cc;
}
.gfg-subtitle {
font-size: 15px;
font-weight : bold;
color : #3366cc;
background-color: #E5ECF9;
line-height : 1.4em;
overflow : hidden;
white-space : nowrap;
margin-right: 5px;
float: left;
}
.gfg-subtitle a {
color : #3366cc;
display:none !important;
}
.gfg-entry {
background-color : white;
width : 100%;
height : 6.9em;
position : relative;
overflow : hidden;
text-align : left;
margin-top: 3px;
padding: 5px;
}
/* To allow correct behavior for overlay */
.gfg-root .gfg-entry .gf-result {
position : relative;
background-color : white;
width : 480px;
height : 100%;
padding-left : 10px;
padding-right : 10px;
float: left;
margin-right: 10px;
}
.gfg-list {
position : relative;
overflow : hidden;
text-align : left;
margin-bottom : 5px;
display:none !important;
}
.gfg-listentry {
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
-o-text-overflow : ellipsis;
padding-left : 15px;
padding-right : 10px;
margin-left : 5px;
margin-right : 10px;
}
.gfg-listentry-odd {
background-color : #F6F6F6;
}
.gfg-listentry-even {
}
.gfg-listentry-highlight {
background-image : url('garrow.gif');
background-repeat: no-repeat;
background-position : center left;
}
/*
* FeedControl customizations.
*/
.gfg-root .gfg-entry .gf-result .gf-title {
font-size: 24px;
line-height : 1.2em;
overflow : hidden;
white-space : nowrap;
text-overflow : ellipsis;
-o-text-overflow : ellipsis;
margin: 0 auto 2px;
}
.gfg-root .gfg-entry .gf-result .gf-snippet {
height : 3.8em;
color: #000000;
margin-top : 3px;
}
/*
* Easy way to get vertical mode, applicable via js options to gadget.
*/
.gfg-vertical-container {
position : relative;
}
.gfg-vertical-root {
height : 1.5em;
_height : 100%;
position : relative;
white-space : nowrap;
overflow : hidden;
text-align : center;
font-family: "Arial", sans-serif;
font-size: 13px;
border: 1px solid #AAAAAA;
padding : 5px;
margin-right : 80px;
}
.gfg-vertical-root .gfg-title {
font-weight : bold;
background-color: #FFFFFF;
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
float : left;
padding-left : 10px;
padding-right : 12px;
border-right: 1px solid #AAAAAA;
}
.gfg-vertical-root .gfg-title a {
color : #444444;
text-decoration : none;
}
.gfg-vertical-root .gfg-entry {
width : auto;
height : 1.5em;
position : relative;
overflow : hidden;
text-align : left;
margin-top : 0px;
margin-left : 0px;
padding-left : 10px;
}
/* To allow correct behavior for overlay */
.gfg-vertical-root .gfg-entry .gf-result {
position : relative;
background-color : white;
width : 100%;
height : 100%;
line-height : 1.5em;
overflow : hidden;
white-space : nowrap;
}
.gfg-vertical-root .gfg-list {
display : none;
}
/*
* FeedControl customizations.
*/
.gfg-vertical-root .gfg-entry .gf-result .gf-snippet,
.gfg-vertical-root .gfg-entry .gf-result .gf-author {
display : none;
}
.gfg-vertical-root .gfg-entry .gf-result .gf-title {
color: #0000cc;
margin-right : 3px;
float : left;
}
.gfg-vertical-root .gfg-entry .gf-result .gf-spacer {
float : left;
}
.gfg-vertical-root .gfg-entry .gf-result .gf-spacer,
.gfg-vertical-root .gfg-entry .gf-result .gf-relativePublishedDate {
display : block;
color: #AAAAAA;
}
.gfg-branding {
white-space : nowrap;
overflow : hidden;
text-align : left;
position : absolute;
right : 0px;
top : 0px;
width : 80px;
}
.gfg-collapse-open, .gfg-collapse-closed {
background-repeat : no-repeat;
background-position : center;
cursor : pointer;
float : right;
width : 17px;
height : 20px;
}
.gfg-collapse-open {
background-image : url('arrow_open.gif');
}
.gfg-collapse-closed {
background-image : url('arrow_close.gif');
}
.gfg-collapse-href {
float : left;
}
.clearFloat {
clear : both;
}
#feedGadget {
margin-top : 5px;
margin-left: auto;
margin-right: auto;
width : 500px;
font-size: 10px;
color: #9CADD0;
}
</style>
<noscript><a href="http://blogbego-creation.blogspot.com" target="_blank">BLOGBEGO CREATION</a></noscript>
<script src="http://www.google.com/jsapi/?key=internal-sample"
type="text/javascript"></script>
<script src="https://sites.google.com/site/blogbegocreation/javascript/gfdynamicfeedcontrol.js" type="text/javascript"></script>
<script type="text/javascript">
function showGadget() {
var feeds = [
{title:'title',
url:'http://blogbego-creation.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=999'},
];
new GFdynamicFeedControl(feeds, 'feedGadget',
{numResults : 1000, stacked : true,
title: "BlogBego Creation Post"});
}
google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>
<noscript><a href="http://blogbego-creation.blogspot.com" target="_blank">BLOGBEGO CREATION</a></noscript>
<div id="feedGadget"><center><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGxGN9oio5v8b3z0WKZFjjIGdKElWWuNYe80bVuJOAaekRn3C2JHsRpxc0f2Db_GQQr8aqYpDLzMLZpgF7m0bGs43vD7n1IpeJnhAQhvx1ZP30sdMmxzRAMBU-HeTQBNl9ZaGleW-0jGX2/s1600/loading+(1).gif" /></center></div>
<div id="feedGadget"><a href="http://blogbego-creation.blogspot.com" target="_blank">widget</a>.</div>

Silahkan ganti teks yang saya beri warna merah sesuai URL kawan
Simpan Blog kawan

Cara Membuat Animasi Page-Loading

Unknown | 17:00 | animasi , Blog Bego , Kreasi , tips trik

Sekarang saya akan berbagi dengan kawan Cara Membuat Animasi Page-Loading Blog yang saya maksud disini, kurang lebih seperti kalau kawan membuka Blog / site sebelum isinya terbuka 100% maka Animasi ini yang akan tampil dan sebagai tanda juga bahwa Loading Blog sedang berjalan :r; dan kalau sudah kebuka 100% Animasi ini dengan sendirinya akan menghilang :y;

Ok langsung saja ke cara membuatnya :

Masuk Account Blogger dengan ID kawan
Pada Dasbor pilih Template - Edit HTML - Lanjutkan
Pakai Ctrl + F cari <body>
Hapus atau Ganti dengan Script berikut

<body onLoad='init()'>
<div id='loading' style='position:absolute; width:100%; text-align:center; top:300px;'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA_oJLrUBZ4e5GvUz4UxvDDlQNzsIXw2uHAEQp5GS8N6nRCQPcHzhLPM_k_2r6D8NBYMNGYMq9gmwO50Plavcb-18ul0mFyUvSJZdqsBirIU9NyBxB_QE9zUNOkoIaFzDop7YDlCtMOVXA/s1600/loading+(6).gif'/></div>
<script src='https://sites.google.com/site/blogbegocreation/javascript/preloader.js' type='text/javascript'/>

Silahkan Ganti teks yang saya beri warna merah dengan Image Loading kesukaan kawan
Untuk lokasi tampilan silahkan rubah teks yang berwarna biru
Simpan Template kawan

Disini saya berikan kawan beberapa contoh Image Loading yang bisa dipakai atau kalau kawan ingin yang lain silahkan lihat Ajaxload.info atau Preloaders.net disana ada banyak pilihan dan bisa diatur durasi ukurannya :z;

Mohon Perhatian kawan, karena mengganti tag <body> apa melanggar TOS Blogger atau tidak, saya kurang tahu karena sampai posting ini saya publish tidak ada jawaban yang pasti :w; untuk itu saran saya kalau kawan ingin mencoba sebaiknya di pasang pada Blog percobaan bukan Blog Utama kawan dan jangan salahkan saya kalau terjadi masalah di kemudian hari :x; apa yang saya sampaikan ini bertujuan untuk diketahui saja

Selamat Berkreasi

Cara Membuat Navbar Menu Bertingkat

Unknown | 17:00 | Blog Bego , Kreasi , tips trik

Kawan kita Umar menyampaikan pertanyaan di CBox yang isinya : "mo, nanya nih, bagaimana cara bikin dropdown menu bertingkat, thanks" tapi sayangnya Link yang ditinggalkan mengarah ke Emailnya, :w; dari pada tak menjawab mendingan saya jawab disini, hitung-hitung menambah postingan kwek kwek kwek :y;

Oke langsung saja ke cara membuatnya :

Masuk Account Blogger dengan ID kawan
Pada Dasbor pilih Template - Edit HTML - Lanjutkan
Cari ]]></b:skin>
Copas Script berikut diatas ]]></b:skin>

#NavbarMenu {
background:#7CA9C0;
height: 30px;
color: $navcolor;
margin: 0 auto 0;
padding: 0;
font: bold 10px Arial, Tahoma, Verdana;
border: 3px solid #699AB8
}
#nav {
width: 100%; float: left;
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: $navcolor;
display: block;
text-transform: uppercase;
margin: 0;
padding: 5px 15px;
font: bold 13px Tahoma, Georgia, Times New Roman;
border-right:0px solid #afcaee;
}
#nav li a:hover, #nav li a:active {
background: #699AB8;
border-top:1px solid #333;
border-right:1px solid #333;
border-bottom:1px solid #ccc;
border-left:1px solid #ccc;
color: #FFF;
text-shadow: 1px 1px 1px #F00;
text-decoration: none;
margin-top: 2px;
padding: 5px 15px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #7CA9C0;
width: 150px;
color: #000;
text-transform: uppercase;
float: none;
margin : 0;
padding: 5px 10px;
border: 1px solid #afcaee;
font: normal 13px Tahoma, Georgia, Times New Roman;
}
#nav li li a:hover, #nav li li a:active {
background: #699AB8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-ebomxqL4knTjqxSdRCCLAJH1vvZJ-fqgITLbQFY3hCD_KW6MJUZdzln6kylw9MPwexCzmCkfL5qKJYmiJTvChR4zuN8CQJMw-IB3Sc3s34kdlDmEwSQWfUQwYtywmXO66iG2_YeegSk/s1600/arrow_right.gif) no-repeat right 10px;
border: 1px solid #ccc;
color: #FFF;
text-shadow: 1px 1px 1px #F00;
text-decoration: none;
font-size: 14px;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 150px;
}
#nav li ul ul {
margin: -26px 0 0 172px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;
}

Selanjutnya cari <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> [Ini Nama Blog Kawan] sampai </div> yang terakhir
Copas Script berikut dibawahnya setelah </div>

<div id='NavbarMenu'>
<ul id='nav'>
<li><a href='http://blogbego-creation.blogspot.com' title='KEMBALI KE BLOGBEGO CREATION'><img border='0' height='25' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOq3rOh_glGSMzqXpYJbNdVlmfPNxkjgCuakcXwviDfKVCPIpJh1sch6GKsDOmgdAtdU_Q7ciKCNv0Pv07EFx9lPx8ft393z6GRnRwzCsLaHLBNKrpwD7QEZovZbYe10NG7izxT8cqe9k/s200/HOME2.ICO' title='Kembali ke Beranda' width='20'/></a></li>
<li> <a href='#'>MY BLOG</a>
<ul>
<li><a href='http://tips-blogbego.blogspot.com' target='_blank'>TIPS BLOGBEGO </a></li>
<li><a href='http://info-blogbego.blogspot.com' target='_blank'>INFO BLOGBEGO Plus </a></li>
<li><a href='http://blog-renovasi.blogspot.com' target='_blank'>BLOG CREATION </a></li>
</ul></li>
<li> <a href='#'>BLOG DEMO</a>
<ul>
<li><a href='http://blog-bego.blogspot.com' target='_blank'>BLOG BEGO </a></li>
<li><a href='http://melajah-di.blogspot.com' target='_blank'>MELAJAH DI </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>
<li> <a href='#'>Page</a>
<ul>
<li> <a href='#'>Edit Page #A</a>
<ul>
<li><a href='#'>Page #A-1</a>
<ul>
<li><a href='#'>Page #A-1-1</a></li>
<li><a href='#'>Page #A-1-2</a></li>
</ul> </li>
<li><a href='#'>Page #A-2</a></li>
<li><a href='#'>Page #A-3</a></li>
</ul> </li>
<li><a href='#'>Edit Page #B</a></li>
<li><a href='#'>Edit Page #C</a></li>
<li><a href='#'>Edit Page #D</a></li>
<li><a href='#'>Edit Page #E</a></li>
</ul></li>
</ul></div>

Atau kawan bisa menyimpannya pada Gadget, caranya : Pada Tata Letak pilih Tambah Gadget - HTML / JavaScript
Silahkan Ganti URL Blog saya dengan URL kawan
Simpan Template / Blog kawan

Kalau kawan ingin agar tampilan dengan warna berbeda silahkan disesuaikan :z;

Mengganti Image di Home Page dengan.....

Unknown | 17:00 | Blog Bego , blogger , Kreasi , tutorial

Kalau Blognya kawan ingin tampil beda dengan Blogger yang lainnya atau kawan ingin Blognya seperti Blog saya ini :w; maksud saya disini setiap Artikel atau postingan ada Imagenya baik pada Home Page maupun pada Single Page :z; yang pada umumnya saya lihat sudah biasa, tapi sekarang saya ingin berbagi dengan kawan sebagai pengunjung setia Blog ini yaitu Image pada Postingan di Home Page diganti dengan jumlah Komentar yang ada pada Artikel tersebut atau dengan kata lain Image tersebut hanya kelihatan pada Single Page saja sedangan di Home Page tidak ada karena sudah diganti dengan Jumlah Komentar :z;

Bagaimana kawan tertarik ?! :r;

Cara sebagai berikut :

Masuk Account Blogger dengan ID kawan
Pada Dasbor Pilih Template - Edit HTML - Lanjutkan
Cari ]]></b:skin> atau .comment-link
Copas script berikut diatas ]]></b:skin> atau ganti .comment-link dengan script dibawah ini

.comment-link{color:#122B15;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYmLHFlqkNzmTLpH3rFZux9trUXs8s23J5nlDhdrKIr0uTfsXpEHvoH6JQVlESDIyCKbumHUk8PMB4NGaQQxxw9I6Og620Wb9BVunhUvd8RmtvrMgFo3jRoPYU6F5giMyk_GHOfpj7RrsW/s1600/Komentar-.png) no-repeat;
width:30px;
height:30px;
float: left;
margin: 5px;
padding:5px 14px 10px 5px;
font-size:12px;
text-align:right;
}

Selanjutnya cari kode script Readmore yang biasanya disimpan dibawah ]]></b:skin> atau diatas </head>, perhatikan contoh Readmore

<SCRIPT type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 200; summary_img = 150; img_thumb_height = 100; img_thumb_width = 100; </SCRIPT> <SCRIPT src='https://sites.google.com/site/blogbegocreation/javascript/readmore-otomatis.js' type='text/javascript'/>

Teks yang saya beri warna merah adalah ukuran Image pada Home Page, yang akan kawan rubah dari 100 menjadi 0 [nol]
Simpan sementara Template kawan

Sekarang kita lanjutkan kembali pengerjaannya:

Beri tanda check disamping Expand Template Widget
Cari <data:post.body/> yang pertama
Copas Script berikut diatasnya

<b:if cond='data:blog.pageType != "item"'>
<div style='float:left;text-align:center;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> </b:if></a>
</b:if>
</div>
</b:if>

Simpan Template kawan dan lihat hasilnya

Tampilkan Judul saja dari Katagori

Unknown | 00:37 | Blog Bego , blogger , tutorial

Sudah banyak para Blogger memposting Klik Label yang Tampil hanya Judulnya saja :y; bagi saya [secara pribadi] tampilan tersebut biasanya mepet pada sisi kiri Blog tanpa ada sentuhan Kreasi dari pemilik atau Admin Blog tersebut :w; yang pada prinsip dasarnya mengganti <b:include data='post' name='post'/> dengan beberapa kode script seperti berikut :

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<data:post.title/></a><br/><br/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Untuk Demo kawan bisa Klik salah satu Katagori pada Menu-Tab Blog saya ini :r;
Itulah yang akan saya bahas sekarang, dari tampilan biasa-biasa saja, akan saya tambahkan sedikit Kreasi supaya kelihatan lebih keren, :z; Oke kawan langsung saja ke Caranya :

Masuk Account Blogger dengan ID kawan
Pada Dasbor Pilih Template - Edit HTML - Lanjutkan
Beri tanda Check disamping Expand Template Widget
Cari dengan Ctrl+F <b:include data='post' name='post'/> Kalau pada Template saya ada 2 saya pakai yang ke-2 [silahkan kawan mencoba salah satunya]
Ganti / Hapus Kode tersebut dengan Script berikut

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<div style='float:left; width: 90%; padding: 5px 20px;margin: 2px 15px; text-shadow: 2px 2px 2px #FFF; font-size: 16px; text-decoration: none; line-height:normal; border:1px solid #FFF;-moz-border-radius:5px;-khtml-border-radius: 5px;-webkit-border-radius: 5px; background:-moz-linear-gradient(top,#95CAFF,#FFF);background:-webkit-gradient(linear,left top,right bottom,from(#95CAFF),to(#FFF)); '>
<a expr:href='data:post.url' style='text-decoration:none;'>
<data:post.title/></a>
</div>
<b:else/>
<b:include data='post' name='post'/>
</b:if> <b:else/>
<b:include data='post' name='post'/>
</b:if>

Sedikit Penjelasan :

Teks yang saya beri warna merah width: 90%; silahkan kawan ganti sesuai kebutuhan
Kalau Halaman Posting Blog kawan lebarnya sama seperti Blog saya ini [980px] dan ingin tampilannya berdampingan, caranya kawan cukup mengganti width: 90%; menjadi width: 40%;_40%;
Jangan lupa simpan Template kawan

Cara Membuat Label Berputar Bag. II

Unknown | 17:00 | animasi , Blog Bego , link , tips trik , widget

Sebelumnya saya sudah berbagi dengan kawan Cara Membuat Label Berputar, yang penempatannya pada Template yang kelihatannya sedikit ribet, :x; tapi kawan jangan bersusah payah memikirkan itu karena sekarang saya akan berbagi dengan kawan Cara Membuat Label Berputar [Flash Label Cloud] yang langsung kita tempatkan di Sidebar :z;

Widget ini saya dapatkan pada Blogger W2B, tapi widget tersebut sudah modifikasi sedikit agar bisa kawan pakai maupun mencobanya untuk dipasang pada Blog kawan :

Kelebihan dari Flash Label Berputar ini yang pasti ada Hovernya yang secara otomatis menyebabkan Label tersebut seperti ada di dalam kotak, :y;

Live Demo

Cara Membuatnya :

Masuk Account Blogger dengan ID kawan
Pada Dasbor pilih Tata Letak
Pada Tata Letak pilih Tambah Gadget - HTML/JavaScript
Copas Script berikut kedalamnya

<div id="BegoFlashContent">
<div style="display: none;">
Flash Labels by <a href="http://blogbego-creation.blogspot.com/">BlogBego Creation</a></div>
</div>
<script type="text/javascript">
/*<![CDATA[*/
var w2bFlashLabelSettings = {
blogurl : "http://www.alambali.co.cc",
color : "0000FF",
hoverColor : "FF0000",
backgroundColor: "FFFFFF",
size : 12,
speed : 100,
width : 300,
height : 300,
transparency : true
};
/*]]>*/
</script>
<script src=" https://sites.google.com/site/blogbegocreation/javascript/flash_label_cloud.js " type="text/javascript">
</script>

Silahkan edit ulang teks yang saya beri warna merah sesuai selera kawan
Simpan Blog kawan

Cara Membuat Label Berputar

Unknown | 17:00 | animasi , Blog Bego , link , tips trik

Kawan mungkin sudah sering melihat Blog orang pada Sidebarnya ada Label Berputar seperti bola yang pada dunia Blogger lazim disebut Flash Label Cloud :y; kelihatannya sangat bagus apalagi Label Blog yang kita pakai banyak akan tambah bagus seperti binatang tawon bergulung-gulung :q;

Live Demo Flash Label Cloud

Oke langsung ke cara pemasangan pada Template

Masuk Account Blogger dengan ID kawan
Pada Dasbor pilih Template - Edit HTML - Lanjutkan
Beri tanda chech disamping Expand Template Widget
Cari <b:section class='sidebar' id='sidebar' preferred='yes'> atau <b:section-contents id='sidebar-right-1'>
Copas Script berikut dibawah salah satunya

<b:widget id='Label100' locked='false' title='Labels' type='Label'><b:includable id='main'><b:if cond='data:title'><h2><data:title/></h2></b:if><div class='widget-content'><center><object type="application/x-shockwave-flash" data="https://sites.google.com/site/javascript10/tagcloud.swf" width="100%" height="200" allowscriptaccess="always" ><param name="movie" value="https://sites.google.com/site/javascript10/tagcloud.swf" /><param name="bgcolor" value="#ffffff" /><param name="flashvars" value="tcolor=0x000000&mode=tags&distr=true&tspeed=100&tagcloud=<tags><b:loop values='data:labels' var='label'><a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='11'><data:label.name/></a></b:loop></tags>" /></center></div><b:include name='quickedit'/></b:includable></b:widget>

Silahkan adakan setting seperlunya sesuai kebutuhan
Jangan lupa simpan template kawan

Cara Pasang Tombol Berbagi Plus Pinterest

Unknown | 22:33 | Blog Bego , blogger , tutorial

Postingan saya sekarang ini tentang Tombol Berbagi untuk Jejaring Sosial seperti Twitter, Facebook, G+ dan Pinterest yang paling anyar di dunia Blogger. :r; sepengetahuan saya kalau Thema / Template di WordPress kita tinggal memberikan tanda check disamping yang ingin ditampilkan dan secara otomatis akan tampil, sungguh sangat berbeda dengan di Blogspot karena yang ada share button default [artinya hanya ada khusus untuk Blogspot saja] sedangkan untuk yang lainnya kalau kita ingin menampilkan diperlukan kode / scriptnya yang ingin kita tampilkan.

Cara Pemasangan Tombol Berbagi sebagai berikut :

Masuk Account Blogger dengan ID kawan
Pada Dasbor Pilih Template - Edit HTML - Lanjutkan
Beri Tanda Check disampaing Expand Template Widget
Cari <data:post.body/>
Simpan Script berikut dibawah atau diatas <data:post.body/>

<b:if cond='data:blog.pageType == "item"'>

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

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

<div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "http://connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

<script type='text/javascript'>
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</b:if>


<div class='horizontal-social-buttons' style='padding:10px 0 10px;'>

<div style='float:left;'>
<a class='twitter-share-button' data-count='horizontal' data-lang='en' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
</div>

<div style='float:left;'>
<fb:like colorscheme='light' expr:href='data:post.url' font='' layout='button_count' send='true' show_faces='false'/>
</div>

<div style='float:left;'>
<g:plusone annotation='bubble' expr:href='data:post.url' size='medium'/>
</div>

<b:if cond='data:blog.pageType == "item"'>
<div id='pin-wrapper' style='display: inline;'>
<a class='pin-it-button' count-layout='horizontal' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url'>Pin It</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-93px; width:43px; height:20px; display:inline-block;'/>
</div>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
    var e=document.createElement('script');
    e.setAttribute('type','text/javascript');
    e.setAttribute('charset','UTF-8');
    e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r=' + Math.random()*99999999);
    document.body.appendChild(e);
}
</script>
</b:if>

</div>
<div style='clear: both;'/>

</b:if>

Catatan :

Kalau kawan ingin menempatkan dibawah <data:post.body/> biasanya ada 2 [sebelum template di tambahkan Readmore otomatis] pilih <data:post.body/> yang pertama
Kalau Template memakai Readmore otomatis <data:post.body/> yang pertama bisa menjadi 3 atau selebihnya, silahkan pakai yang terakhir atau bisa dibawahnya lagi, misalnya pada <div class='post-footer'> silahkan kawan menentukannya :w
Kalau kawan ingin menampilkan di bawah Judul Posting, simpan Script tersebut diatas <data:post.body/>
Simpan Template kawan

Masalah dan Solusi Membagi Halaman

Unknown | 17:00 | Blog Bego , Kreasi , tutorial

Kawan masih ingat Artikel saya tentang Cara Membagi Halaman Posting di Home Page :z yang tampilannya seperti pada Blog saya, kalau tampilannya tidak mau seperti yang kita harapan di karenakan ada masalah seperti halaman posting berjejer kebawah atau Blog-Page [yang biasanya ada dibawah Post Artikel] naik keatas berada disamping / ditutupi oleh halaman posting :y;

Sekarang saya akan berbagi dengan kawan berupa Solusi cara mengatasi masalah tersebut :w; lengkap dengan contohnya

Masuk Account Blogger dengan ID kawan
Pada Dasbor pilih Template - Edit HTML - Lanjutkan

Masalah yang ada :

Halaman posting setelah dibagi, tampilannya berjejer kebawah

Cara mengatasi : Perhatikan image dibawah yang saya kurung dengan garis merah, untuk width [lebar] kedua ukurannya diperkecil :q;
Ingat itu script untuk membagi halaman posting di Home Page

Blog-Page naik keatas sejajar dan ditutupi oleh Halaman Posting

Cara Mengatasi : Perhatikan image dibawah yang saya kurung dengan garis merah

Blog-Page biasanya terletak setelah Post-Comment sebelum ]]></b:skin>
Kalau sudah ketemu script tersebut Hapus dan Ganti dengan

#blog-pager-newer-link {
    float: left;
    line-height: 1em;
    font-weight: 700;
    margin: 0;
    }
#blog-pager-older-link {
    float: right;
    line-height: 1em;
    font-weight: 700;
    margin: 0;
    }
#blog-pager {
    color: #2C64B4;
    margin: 0 auto 0;
    height: 25px;
    line-height: 1.8em;
    font-weight: 700;
    text-align: center;
    background: transparent;
    padding: 5px 5px 20px 5px;
    font-family:'Arial',sans serif;
    width: 98.5%;
    float: left;
    }

Jangan lupa simpan Template kawan

Cara Membagi Halaman Posting di Home Page

Unknown | 17:00 | Blog Bego , Kreasi , tutorial

Seperti pesan saya sebelumnya, jangan ikuti kejelekan saya [gonta-ganti Template] karena di search Engine :w; sangat jelek, sedangkan disatu sisi rasa puas khususnya saya secara pribadi tidak pernah tercapai, apa kawan juga sama seperti saya ?! :i;

sekarang saya berikan solusi sebagai alternatif perubahan misalnya halaman posting di Home Page kita bagi menjadi dua bagian, :y; inilah yang akan saya bahas dan berbagi dengan kawan, karena caranya sangat simple karena hanya menambahkan beberapa script tercapailah tujuan kita :q; seperti Blog saya ini Kalau aslinya Blog saya terdiri dua kolom [Sidebar dan Halaman Posting seperti pada Single-Page], bagaimana kawan berminat mencobanya.

Sebelum ke Cara Membuatnya, tolong perhatikan pesan saya ini yaitu :

Template kawan sudah terpasang Read more Otomatis
Perhatikan Lebar bagian Halaman Posting / Content / atau nama lainnya

Contoh Read more yang saya pakai :

<SCRIPT type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 200; summary_img = 150; img_thumb_height = 50; img_thumb_width = 50; </SCRIPT> <SCRIPT src='https://sites.google.com/site/blogbegocreation/javascript/readmore-otomatis.js' type='text/javascript'/>

Sekarang ke Cara membuatnya :

Masuk Account Blogger dengan ID kawan
Pada Dasbor pilih Tem[late
Backup / Download Template kawan dulu, untuk jaga-jaga seandainya ada kesalahan
Cari ]]></b:skin> atau </head>

Copas script berikut dibawah ]]></b:skin> atau diatas </head>

<style type='text/css'>
<b:if cond='data:blog.pageType != "item"'>
.post {
width: 300px; _width:300px; /* for IE dont delete */
margin: 0 5px 5px 3px;
padding: 5px 5px 0 5px;
float:left;
background: #CEE3F6;
}
.post-body{
height:80px; *height:80px; /* for IE dont delete */
overflow:hidden;
line-height:16px;
*line-height:16px;
font: normal 12px Sans-Serif;
background: #FFF;
border: 1px solid #81BEF7;-moz-border-radius:5px;-khtml-border-radius: 5px;-webkit-border-radius: 5px;
padding:5px;
}
</b:if>
</style>

width [lebar]: 300px dan height [ketinggian]: 80px silahkan disesuaikan dengan halaman Blog kawan

Simpan Template kawan karena sampai disini sudah selesai :z;

Cara Membuat Spoiler Bertingkat

Unknown | 17:00 | Blog Bego , blogger , tips trik , widget

Sebelumnya saya sudah berbagi dengan kawan cara membuat Spoiler dan sekarangpun masih tetap tentang Spoiler cuma yang ini seperti Tab Menu artinya bisa lebih dari satu Spoiler alias bertingkat :z;

Perhatikan Demonya :

» KOMENTAR BLOGGER

» KOMENTATOR

» JUDUL

disini simpan file kawan

Setelah kawan memperhatikan Demonya, sekarang mari ke Cara membuatnya :

Masuk Account Blogger dengan ID kawan
Pada Dasbor Pilih Tata Letak
Pilih Tambah Gadget - HTML/JavaScript
Copas Script berikut kedalamnya

<style type="text/css">
h5 {
font-family: Tekton Pro, trebuchet-ms, arial, tahoma;
font-size: 16px;
padding: 0 0 1em;
font-weight:bold;
color: #FFFF00;
text-shadow: 2px 2px 2px #000;
}
.msg_list {
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}
.msg_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
background:-moz-linear-gradient(top,#236C90,#FFF);background:-webkit-gradient(linear,left top,right bottom,from(#236C90),to(#FFF));
margin:1px;
border:1px solid #FFF;-moz-border-radius:10px;-khtml-border-radius: 10px;-webkit-border-radius: 10px;
}
.msg_body {
padding: 5px 10px 15px;
background:-moz-linear-gradient(top,#95CAFF,#FFF);background:-webkit-gradient(linear,left top,right bottom,from(#FFF),to(#95CAFF));
border: 2px solid #699AB8;-moz-border-radius-topleft: 10px 10px;-moz-border-radius-bottomleft: 0px 0px; -webkit-border-top-left-radius: 10px 10px;-webkit-border-bottom-left-radius: 0px 0px; -border-top-left-radius: 10px 10px;-border-bottom-left-radius: 0px 0px; -moz-border-radius-topright: 0px 0px;-moz-border-radius-bottomright: 20px 20px; -webkit-border-top-right-radius: 0px 0px;-webkit-border-bottom-right-radius: 20px 20px; border-top-right-radius: 0px 0px;border-bottom-right-radius: 20px 20px;">
}
</style>
<script type="text/javascript" src="https://sites.google.com/site/blogbegocreation/javascript/tabmenuaccordion.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
//hide the all of the element with class msg_body
$(".msg_body").hide();
//slides the element with class "msg_body" when paragraph with class "msg_head" is clicked
$("#firstpane h5.msg_head").click(function()
{
$(this).next("div.msg_body").slideToggle(700).siblings("div.msg_body").slideUp("slow");
});
//slides the element with class "msg_body" when mouse is over the paragraph
$("#secondpane h5.msg_head").mouseover(function()
{
$(this).next("div.msg_body").slideDown("slow").siblings("div.msg_body").slideUp("slow");
});
});
</script>
<div class="msg_list" id="secondpane">
<h5 class="msg_head">» JUDUL SPOILER</h5>
<div class="msg_body">
Simpan disini File kawan</div>
<h5 class="msg_head">» JUDUL</h5>
<div class="msg_body">
disini simpan file kawan</div>

Silahkan kawan mengganti teks yang berwarna merah dengan kebutuhan
Seandainya kawan ingin menambahkan Spoiler lagi cukup Copas dari

<h5 class="msg_head">» JUDUL</h5>
<div class="msg_body">
disini simpan file kawan</div>

Simpan Blog kawan dan lihat hasilnya

Cara Membuat Spoiler

Unknown | 17:00 | Blog Bego , blogger , tips trik , widget

Sekarang saya akan mencoba berbagi dengan kawan tentang Cara Membuat Spoiler :q; yang peruntukan atau kegunaannya untuk menyembunyikan sesuatu [Gambar, Iklan dan lain sebagainya] pada tempat yang sempit, karena kalau tanpa Spoiler akan menghabiskan banyak tempat :z;

Kalau kawan ada yang bertanya, seumpama kawan memasang Iklan pada Spoiler, pengunjung Blog pasti tidak mau membuka Spoiler tersebut :w karena sudah diketahui isi didalam Spoiler tersebut adalah Iklan Sponsor - Benar juga ya !!!

Tapi kawan jangan salah prediksi, karena saya berikan solusi seperti berikan Judul yang bikin pengunjung Blog kita penasaran misalnya "ADA APA DISINI" :r;

Cara membuat Spoiler

Masuk Acount Blogger dengan ID kawan
Pada Dasbor pilih Tata Letak
Pilih Tambah Gadget - HTML / JavaScript
Copas Script berikut kedalamnya

<center><div style="margin: 5px 10px;">
<input value="JUDUL SPOILER" style="margin: 0px; padding: 0px; width: 100%; font-size: 18px;" onclick="if
(this.parentNode.parentNode.getElementsByTagName('div')
[1].getElementsByTagName('div')[0].style.display != '') {
this.parentNode.parentNode.getElementsByTagName('div')
[1].getElementsByTagName('div')
[0].style.display = ''; this.innerText = ''; this.value = 'mohon tutup kembali'; }
else { this.parentNode.parentNode.getElementsByTagName('div')
[1].getElementsByTagName('div')
[0].style.display = 'none'; this.innerText = ''; this.value = 'judul spoiler'; }"
type="button"/> </div>
<div class="alt2" style="border: 0px inset ; margin: 0px; padding: 0px;">
<div style="display: none;">
simpan : FILE, GAMBAR, VIDIO ANDA dll disini</div></div></center>

Silahkan kawan menyesesuaikan khusus pada teks yang saya beri warna merah :q;

Selamat Mencoba

HOSTING MURAH 2014

468x60 Ads

Slide Carousel untuk Daftar Isi

Slide Daftar Isi Lainnya

Cara Membuat Animasi Page-Loading

Cara Membuat Navbar Menu Bertingkat

Artikel Terkait Gaya Blogbego

Mengganti Image di Home Page dengan.....

Tampilkan Judul saja dari Katagori

Cara Membuat Label Berputar Bag. II

Cara Membuat Label Berputar

Cara Pasang Tombol Berbagi Plus Pinterest

Masalah dan Solusi Membagi Halaman

Cara Membagi Halaman Posting di Home Page

Cara Membuat Spoiler Bertingkat

» KOMENTAR BLOGGER

» KOMENTATOR

» JUDUL

Cara Membuat Spoiler

Future Video

Blog Archive

Populer Post

Recent Post

Text

Comments

Followers

Ads