Slide Carousel untuk Daftar Isi

Selasa, 31 Juli 2012 0 komentar
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  
Demo

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(http://3.bp.blogspot.com/-vxUtQ_S674s/T-8KtEsewAI/AAAAAAAAHGs/cfd8RK0R-vM/s1600/previous.png) center;z-index:100;cursor:pointer;}
#bbccarousel #next_button{
position:absolute; right:0;
width:24px;height:125px;
background:url(http://3.bp.blogspot.com/-FaZC4Gr6pS0/T-8KsaJKtHI/AAAAAAAAHGk/GDXOy42rx3Q/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] = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/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 
  • <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

Minggu, 29 Juli 2012 0 komentar
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="http://4.bp.blogspot.com/-Fsite8Qk8-M/UA4QXn5AaxI/AAAAAAAADRo/PbVtb_H7ALM/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

Jumat, 27 Juli 2012 0 komentar
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='http://1.bp.blogspot.com/-wjue9AfwWgU/UA6Ch3_A6XI/AAAAAAAADSc/xlU66ehKx8E/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;

<img border="0" src="http://2.bp.blogspot.com/-xjrNbtonfzM/UA6Fcln5eQI/AAAAAAAADSo/jnibXa57wfI/s1600/Loading+%25282%2529.gif" />

<img border="0" src="http://3.bp.blogspot.com/-kNHOY2mWROw/UA6FeTQK0uI/AAAAAAAADSw/-tlwtXc4eZ4/s1600/icon_loading.gif" />

<img border="0" src="http://3.bp.blogspot.com/-6LQwc-lfmCM/UA6Fgi7k31I/AAAAAAAADS4/_sKhz9JNY3Q/s1600/loading+%25281%2529.gif" />

<img border="0" src="http://4.bp.blogspot.com/-HnA1439htwA/UA6Fi4k6uWI/AAAAAAAADTA/uiGjYH_iGNE/s1600/loading+%25283%2529.gif" />

<img border="0" src="http://2.bp.blogspot.com/--EfCIamhf7A/UA6Fky1uWoI/AAAAAAAADTI/SdNFkQcbZro/s1600/loading+%25284%2529.gif" />

<img border="0" src="http://2.bp.blogspot.com/--Ja8UWGD91U/UA6FnZTZihI/AAAAAAAADTQ/fKdxJ7hrmnU/s1600/loading+%25285%2529.gif" />

<img border="0" src="http://2.bp.blogspot.com/-jro8o9QYhFc/UA6FpYOIoGI/AAAAAAAADTY/wCxzC9LlQHM/s1600/loading+%25286%2529.gif" />

<img border="0" src="http://1.bp.blogspot.com/-2Pn-68RhILg/UA6FrmCQtCI/AAAAAAAADTg/yG4YOnti_mI/s1600/loading.gif" />

<img border="0" src="http://2.bp.blogspot.com/-6gYjT1qh6s4/UA6USyGMrbI/AAAAAAAADT4/FoKfeCNmnrg/s1600/ajax-loader.gif" />

<img border="0" src="http://1.bp.blogspot.com/-W02PCcQoKJ4/UA6Ve_yz3ZI/AAAAAAAADUI/-bXNprhdans/s1600/loading+(7).gif" />


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

Rabu, 25 Juli 2012 0 komentar
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(http://2.bp.blogspot.com/-2uBOQcTbFSU/T2-v28mVpGI/AAAAAAAACCE/y07sQY7-RNE/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='http://3.bp.blogspot.com/-a4lSrz8WpR0/T9MJ44eMixI/AAAAAAAACtw/2-NrZSBRbKU/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;


    Artikel Terkait Gaya Blogbego

    Senin, 23 Juli 2012 0 komentar
    Sekarang saya akan berbagi dengan kawan tentang Artikel Terkait Gaya Blogbego :z; Apa itu Artikel Terkait atau Artikel yang Berhubungan atau apalah namanya dan yang lazim dikenal pada dunia Blogger disebutkan dengan nama Relatif Post :y;  Artikel Terkait seperti : ada yang hanya Judulnya saja, ada yang berisi Thumbnail dibawah Judulnya maupun yang bisa ditampilkan pada Sidebar :r; tapi yang ini hasil comot sana comot sini ditambahin bumbu-bumbu biar enak dan sedap dipandang mata [tentunya bagi saya pribadi lho] :w; sebagai contoh tampilannya seperti yang saya pakai di Blog ini atau seperti image berikut :


    Cara membuatnya :
    • Masuk Account Blogger dengan ID kawan
    • Pada Dasbor pilih Template - Edit HTML - Lanjutkan
    • Beri tanda  check disamping Expand Template Widget 
    • Copas Script berikut dibawah <data:post.body/> 
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style>
    #related-posts {
    float : left;
    width : 98%;
    margin: 0;
    padding: 5px;
    font : 13px Arial Narrow, Verdana;
    border: 1px solid #000;
    background: #FFF;
    }
    #related-posts a {
    text-decoration : none;
    }
    #related-posts a:hover {
    text-decoration : none;
    color: #FFF;
    text-shadow: 2px 2px 2px #F00;
    }
    #related-posts ul {
    margin : 1px;
    padding : 5px;
    background :
    }
    #related-posts ul li {
    float:left;
    width: 44%; _44%; /* for IE dont delete */
    display : block;
    background : #D4E3EA url(http://4.bp.blogspot.com/-8T-uGTijfYk/UAuX0RFLupI/AAAAAAAADQ0/DKjYK0pCQ_Y/s1600/feed-icon-1.gif) no-repeat left center;
    margin: 0 3px 0;
    padding : 0 0 1px 25px;
    line-height : 2em;
    border:1px dotted #FFF;
    }
    #related-posts ul li:hover {
    background-color: #95CAFF;
    color: #FFF;
    text-shadow: 2px 2px 2px #F00;
    border-bottom:1px dotted #000;
    }
    </style><script src='https://sites.google.com/site/blogbegocreation/javascript/relatif-post.js' type='text/javascript'/>
     <div id='related-posts'>
    <div style='width: 96%; height: 25px; margin:0 auto 0; padding:10px; color: #FFF; font-family: Segoe Print; text-shadow: 3px 3px 3px #000; font-size:16px; font-weight:normal;background:#699AB8;'>Artikel Terkait Menarik Lainnya : </div>
    <b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' type='text/javascript'/>
    </b:if>
    </b:loop>
    <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();</script>
    </div>
     <br/>
    </b:if>
    • Simpan Template kawan
    • Kalau hasilnya agak rapat dibawahnya, kawan bisa menambahkan  <div style='clear: both;'/> dibawah </b:if> 
    • Simpan kembali Template kawan

    Mengganti Image di Home Page dengan.....

    Sabtu, 21 Juli 2012 0 komentar
    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(http://1.bp.blogspot.com/-oi8cr-wcEuE/TiJYFMYa6zI/AAAAAAAAB64/YM6mUIKekbQ/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 = &quot;no-float&quot; ; 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 != &quot;item&quot;'>
    <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

    Jumat, 20 Juli 2012 0 komentar
    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 != &quot;item&quot;'>
    <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

    Selasa, 17 Juli 2012 0 komentar
    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;

    Flash Labels by BlogBego Creation

    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

    Minggu, 15 Juli 2012 0 komentar
    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;

    Flash Labels by Way2Blogging
    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>&lt;object type="application/x-shockwave-flash" data="https://sites.google.com/site/javascript10/tagcloud.swf" width="100%" height="200" allowscriptaccess="always" &gt;&lt;param name="movie" value="https://sites.google.com/site/javascript10/tagcloud.swf" /&gt;&lt;param name="bgcolor" value="#ffffff" /&gt;&lt;param name="flashvars" value="tcolor=0x000000&amp;mode=tags&amp;distr=true&amp;tspeed=100&amp;tagcloud=&lt;tags&gt;<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>&lt;/tags&gt;" /&gt;</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

    Jumat, 13 Juli 2012 0 komentar
    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 == &quot;item&quot;'>
    <!-- Scripts Button Start -->
    <b:if cond='data:post.isFirstPost'>
    <!-- Twitter -->
    <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=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>
    <!-- Facebook -->
    <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 = &quot;http://connect.facebook.net/en_US/all.js#xfbml=1&quot;;
    fjs.parentNode.insertBefore(js, fjs);
    }(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));
    </script>
    <!-- Google +1 -->
    <script type='text/javascript'>
    (function() {
    var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
    po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
    })();
    </script>
    </b:if>
    <!-- Scripts Button End -->
    <!-- Horizontal social buttons Start -->
    <div class='horizontal-social-buttons' style='padding:10px 0 10px;'>
    <!-- Twitter -->
    <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>
    <!-- Facebook Like+Send -->
    <div style='float:left;'>
    <fb:like colorscheme='light' expr:href='data:post.url' font='' layout='button_count' send='true' show_faces='false'/>
    </div>
    <!-- Google +1 -->
    <div style='float:left;'>
    <g:plusone annotation='bubble' expr:href='data:post.url' size='medium'/>
    </div>
    <!-- Pinterest Start -->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='pin-wrapper' style='display: inline;'>
    <a class='pin-it-button' count-layout='horizontal' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + 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(&#39;script&#39;);
        e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
        e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
        e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
        document.body.appendChild(e);
    }
    </script>
    </b:if>
    <!-- Pinterest End -->
    </div>
    <div style='clear: both;'/>
    <!-- Horizontal social buttons End -->
    </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

    Rabu, 11 Juli 2012 0 komentar
    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

    Senin, 09 Juli 2012 0 komentar
    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 : 
    1. Template kawan sudah terpasang Read more Otomatis 
    2. Perhatikan Lebar bagian Halaman Posting / Content / atau nama lainnya

    Contoh Read more yang saya pakai :
    <SCRIPT type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; 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 != &quot;item&quot;'>
    .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

    Sabtu, 07 Juli 2012 0 komentar
    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
    » JUDUL
    disini simpan file kawan

    Catatan :
    Demo diatas setelah coba cek akan jalan saat Loading, karena ini di postingan, kalau kawan ingin mencoba Demo sesuai penempatannya [Sidebar] silahkan pada Blog Demo disini  

    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">&#187; JUDUL SPOILER</h5>
    <div class="msg_body">
    Simpan disini File kawan</div>
    <h5 class="msg_head">&#187; 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">&#187; JUDUL</h5>
    <div class="msg_body">
    disini simpan file kawan</div>
    • Simpan Blog kawan dan lihat hasilnya 

    Cara Membuat Spoiler

    Kamis, 05 Juli 2012 0 komentar
    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;

    simpan : FILE, GAMBAR, VIDIO dll disini
    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


    Cara membuat Elemen Box Melayang

    Selasa, 03 Juli 2012 0 komentar
    Sebelumnya saya pernah memposting Cara Membuat Elemen melayang yang bisa di Close maupun tidak bisa di Close [ini khusus untuk Back to Top] kalau kawan ingin membacanya  disini yang pada dasarnya sangat sederhana :i; tapi yang sekarang ini saya tambahkan sedikit polesan biar kelihatan lebih keren :y maka jadilah hasilnya seperti yang kawan lihat di Blog Demo saya disini :x; 
    Cara Membuatnya :
    • Masuk Account Blogger dengan ID kawan
    • Pada Dasbor pilih Template
    • Cari </body> kalau pada Template saya letaknya paling bawah sekali sebelum </HTML> 
    • Copas script berikut dibawah </body> atau diatas </HTML>

    <style type='text/css'>
    .notification{width:310px;height:250px;padding:10px;display:block;position:fixed;bottom:130px;left:660px;/*Border Radius*/border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;/*Box Shadow*/-moz-box-shadow:2px 2px 30px #000;-webkit-box-shadow:2px 2px 30px #000;box-shadow:2px 2px 30px #000}
    .notification span{background:url(http://4.bp.blogspot.com/-6iMohz-cjx8/T-0bG9fsvII/AAAAAAAADBU/BrLBbu8F92M/s1600/Close.png) no-repeat right top;cursor:pointer;display:block;width:22px;height:22px;position:absolute; top: 2px;right: 2px}
    .notification p{width:400px;font-family:Arial,Helvetica,sans-serif;color:#323232;font-size:14px;line-height:21px;text-align:left;float:right;margin:10px 15px 0 0;*margin-top:15px;/*for lt IE8*/padding:0;/* TEXT SHADOW */ text-shadow:0 0 1px #f9f9f9}
    .warning{border:1px solid #FFF;/*Background Gradients*/background:#FFF;background:-moz-linear-gradient(top,#95CAFF,#FFF);background:-webkit-gradient(linear,left top,right bottom,from(#FFF),to(#95CAFF))}
    .warning strong{color:#e5ac00;margin-right:15px}
    </style>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
    <script type='text/javascript'>
    $(document).ready(function(){$(&#39;.notification&#39;).hover(function(){$(this).css(&#39;cursor&#39;,&#39;auto&#39;);});$(&#39;.notification span&#39;).click(function(){$(this).parent().fadeOut(800);});});</script>
    <div class='notification warning'><span/>

    <center>
    SIMPAN DISINI SCRIPTNYA</center>
    </div>
    • Teks yang saya beri warna merah paling atas adalah ukuran Box dan posisinya, kawan bisa merubahnya [Edit] agar sesuai keinginan :q;
    • Simpan disini Scriptnya, kawan bisa menaruh Iklan, Like Box FB dan lain sebagainya
    • Simpan Template kawan dan lihat hasilnya


    Melacak IP Anonymous dengan StatCounter

    Minggu, 01 Juli 2012 0 komentar
    Pada umumnya para Blogger itu baik-baik, yang pada prinsip utamanya ingin berbagi [saling memberi dan saling menerima] tapi lama-lama dengan berkembangnya Ilmu Tehnolagi, para Bloggerpun semakin berkembang, ada yang suka iseng, jahil dan lain sebagainya yang sudah mengarah ke Negatif :q; seperti berkomentar SPAM alias tidak sesuai topik maupun memberikan komentar tanpa etika, tidak ada sopan santun, menghina, menghujat dan seterusnya, biasanya memakai nama samaran yang lazim disebut : Anonim / Anonymous [tanpa URL/Link] :x; 
    Sebelum kawan mengalami seperti Blog saya yang lain, sebaiknya pada Blog kita masing-masing dipasangi StatCounter yang berfungsi sebagai mengumpul Data Visitor setiap saat secara lengkap, :y; 
    Walau hanya gratisan [Free] tapi fasilitas yang diberikan sudah cukup lumayan, rasanya tak perlu panjang lebar saya memberikan ulasan karena nanti banyak salahnya, sebaiknya langsung saja kawan kesana untuk Mendaftarkan Blognya bisa Klik » disini 
    setelah proses pendaftaran {sign up] selesai nanti copas Scriptnya di Blog kawan, bisa pada Gadget maupun pada Template 
    contoh Komentar Anonymous

    • Dengan meng-Klik View My Stats disamping Data [angka] pengunjung, kawan akan masuk ke StatCounter - pada sisi kiri pilih  Recent Pageload Activity maka akan tampil Data Pengunjung, waktu berkunjung, pada Artikel yang mana, selengkapnya seperti berikut :

    Catatan : Daftar di sebelah kiri silahkan kawan pilih-pilih sesuai keinginan,

    • Kalau kawan ingin mengetahui IP Adress lebih jauh sebagai pembanding seperti  » IP Adress 



    • StatCounter akan berfungsi setelah terpasang di Blog, makanya lebih baik pasang sekarang sebelum ada Anonymous berkunjung memberikan Komentar di Blog kawan