468x60 Ads

This is an example of a HTML caption with a link.

Cara Membuat Blog Anda Siap untuk Ponsel

Unknown | 16:23 | , ,
Cara Membuat Blog Anda Siap untuk Ponsel - Anda dapat membuat blog Anda untuk ponsel browsing. sehingga orang dapat mengunjungi blog Anda dari ponsel. ketika yang normal butuh waktu lama waktu untuk memuat halaman. tapi setelah hal ini akan bisa memuat cepat,
1. Pergi ke Akun blogger Anda >> Desain >> Edit HTML

2. Cari tag ini dengan menggunakan Ctrl + F
                                             <b:include data='blog' name='all-head-content'/>
3.Paste kode di bawah ini setelah tag diatas

<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width, initial-scale=1.0, user-scalable=0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>

 4. Sekarang klik Preview dan klik simpan template. Anda telah selesai.

Itulah Cara membuat blog Anda siap untuk ponsel. Semoga Bermanfaat dan Suksess. :D
READ MORE

Cara Membuat Daftar Isi Blog

Unknown | 02:00 | , , , ,
Sebelumnya sudah banyak saya memposting Cara Membuat Daftar Isi Slide / Animasi / yang bergerak :q; kalau kawan ingin membacanya, silahkan kawan melihatnya lewat Daftar Isi Blog saya ini, cuma belum pernah saya berbagi dengan kawan Cara Membuat Daftar Isi yang tanpa Slide /Animasi / atau sejenisnya, :z;  

Caranya :
  • Masuk Account Blogger dengan ID kawan 
  • Pada Dasbor pilih Tata Letak
  • Pada Halaman Elemen pilih Tambah Gadget 
  • Pilih tanda [+] pada HTML / JavaScript
  • Copas Script berikut kedalamnya 

<div style="border: 1px solid #000; overflow: auto; height: 200px;">
<script style="text/javascript" src="https://sites.google.com/site/blogbegocreation/javascript/Daftar-Isi.js"></script>
<script style="text/javascript">
var numposts = 100; var showpostdate = false;
var showpostsummary = false; var numchars = 80; var standardstyling = true;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script>
</div>


Penjelasan :
  • var numposts = 100; artinya postingan kawan masih dibawah 100, kawan bisa merubah angka 100 tersebut sesuai selera kawan
  • var showpostdate = false; untuk tidak menampilkan tanggal, kebalikan dari true;
  • var showpostsummary = false; dan var numchars = 80; untuk tidak menambahkan summary, seandainya kawan memilih true maka angka 80 kawan bisa sesuaikan jumlahnya
  • Jangan lupa simpan Blog kawan


READ MORE

Cara Membuat Daftar Isi Plus Komentar

Unknown | 15:00 | , , ,

Sebelumnya saya pernah berbagi tentang Daftar isi Plus Jumlah Komentar Berjalan, sekarangpun masih tetap tentang Daftar Isi Plus Komentar, cuma bedanya tidak berjalan :w; maksudnya setiap Artikel yang sudah kita posting dengan Komentar paling banyak akan tampil paling atas walau Artikel tersebut kita posting sudah lama
untuk Demo kawan bisa lihat disini 

Cara Pembuatannya :
  1. Masuk Account Blogger dengan ID kawan
  2. Pada Dasbor pilih Tata Letak - Tambah Gadget
  3. Pilih tanda (+) pada HTML / JavaScript
  4. Copas Kode berikut kedalamnya

<div style="overflow:auto;width: 100%; height: 200px;padding:5px;border:1px solid #369;">

<script language='javascript'>
aBold = false;
numposts= 25;
maxshowresult= 25;
home_page = "http://NAMA-BLOG.blogspot.com/";
</script>
<script type='text/javascript'>
//<![CDATA[
var postTitlear=new Array();
var postUrlar=new Array();
var postCommentar=new Array();
var totalpost;document.write("<ul>");function showrecentposts(j){var a=j.feed.entry.length;totalpost=a;for(var f=0;f<a;f++){var h=j.feed.entry[f];var c=h.title.$t;var b;var g;if(f==j.feed.entry.length){break}for(var d=0;d<h.link.length;d++){if(h.link[d].rel=="alternate"){g=h.link[d].href;break}}for(var d=0;d<h.link.length;d++){if(h.link[d].rel=="replies"&&h.link[d].type=="text/html"){b=h.link[d].title.split(" ")[0];break}}c=(aBold)?"<b>"+c+"</b>":c;postTitlear.push(c);postUrlar.push(g);postCommentar.push(b)}sortPosts();for(var f=0;f<maxshowresult;f++){var e='<li><a href="'+postUrlar[f]+'" class="recent-link">'+postTitlear[f]+" &#187;("+postCommentar[f]+")</a>";document.write(e)}}function sortPosts(){function c(d,f){var e=postTitlear[d];postTitlear[d]=postTitlear[f];postTitlear[f]=e;var e=postUrlar[d];postUrlar[d]=postUrlar[f];postUrlar[f]=e;var e=postCommentar[d];postCommentar[d]=postCommentar[f];postCommentar[f]=e}for(var b=0;b<postTitlear.length-1;b++){for(var a=b+1;a<postTitlear.length;a++){if(parseInt(postCommentar[b])<parseInt(postCommentar[a])){c(b,a)}}}}document.write('<script src="'+home_page+"feeds/posts/default?max-results="+numposts+'&orderby=published&alt=json-in-script&callback=showrecentposts"><\/script>');
//]]>
</script></div>
Silahkan kawan adakan perubahan atau edit pada kode yang berwarna merah seperti  :
  1. width : 100% dan heigth: 200px; silahkan disesuaikan dengan sidebar blog kawan.
  2. border:1px solid #369; [adalah garis pinggir warna biru]
  3. numposts=25;  maxshowresult=25; adalah artikel yang akan ditampilkan sebanyak 25
  4. URL http:// NAMA-BLOG.blogspot.com/  ganti dengan URL Blog kawan 
  5. Simpan Blog dan lihat hasilnya, mudah2an tidak ada masalah.


READ MORE

Cara Membuat Avatar Komentar Tampil Miring

Unknown | 19:33 | , ,
Setelah sebelumnya saya memposting Avatar Komentar Berputar kalau mouse di dekatkan pada image tersebut, sekarang saya akan berkreasi lagi yang masih diseputar Avatar Komentar yaitu supaya tampil miring :r; 
Untuk Demonya kawan bisa lihat disini, bagaimana, kawan ingin memasangnya biar tampil beda. :y;
Caranya cukup gampang dan simple sekali :
  • Masuk Account Blogger dengan ID kawan
  • Pada Dasbor pilih Template - Edit HTML
  • Copas kode berikut diatas »  ]]></b:skin> 
.avatar-image-container img {
-webkit-transform: rotate(335deg);
-moz-transform: rotate(335deg);
}

Catatan :
Nilai [335deg], merupakan kemiringan Avatar tersebut, supaya  tampilan sesuai dengan keinginan kawan silahkan diadakan perubahan, dan perlu kawan ketahui semakin kecil nilainya Avatar akan tampil semakin miring ke kiri begitu juga sebaliknya :z;


READ MORE

Blogger Template Kreasi Kolom Gratis

Unknown | 15:00 | ,
Blogger Template Kreasi Kolom yang sekarang ini memakai Komentar Thread dan Komentar FaceBook  :q; artinya Komentar Thread dan Komentar FaceBook tersebut bersifat Buka Tutup tergantung si pemberi Komentar yang mana akan dipakai :z;



Nama Template     : Kreasi Kolom
Flatform               : Blogger / Blogspot
Nama Author        : Blogger Edan
URL                     : http://blogbego-creation.blogspot.com/
Deskripsi              : Template Kreasi Kolom ini adalah Template Blogger Gratis yang bisa dicoba apabila kawan menginginkan secara Gratis 
Lisensi            : Karena Blogger Template Kreasi Kolom Gratis ini saya berikan secara cuma-cuma, yang patut dan wajib kawan jaga supaya tidak menghapus Link / URL yang mengarah ke Perancang Template yang ada di bagian bawah Template [Credit] 


                    


Cara Mengganti Template :

  • Setelah kawan Download, silahkan ekstrak dulu filenya yang bertype rar di Komputer kawan supaya menjadi bertype .xml 
  • Masuk Account kawan, pilih Template - Cadangkan / Pulihkan 
  • Pilih file yang sudah kawan ekstrak di Komputer tadi - Unggah, tunggu sampai selesai 
  • Selanjutnya pilih Tata Letak agar Widget / Gadget tempatnya sesuai keinginan kawan

Pengaturan Kreasi Kolom :

  • Pada Dasbor pilih Template - Edit HTML - Lanjutkan 
  • Beri tanda chek pada 

#header-wrapper {width: 100%;margin: -5px 0 0 -25px;background:  none repeat scroll 0 0;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='rgb(185, 185, 185)'); background:-moz-radial-gradient(top, #000000, rgb(185, 185, 185));background:-webkit-gradient(linear, left top, left bottom, from(#000000), to( rgb(185, 185, 185))) repeat-x center center; padding: 15px 0px 10px 20px;border-bottom: 0px solid #FFF;position: fixed; z-index: 99999;}
#header {height: 85px;margin:0 auto 0;}
#header h1 {clear: both;float: left; padding: 0 0 0 25px;}
#header h1 a {display: block;text-indent: -9999px;outline: none;width: 400px;height: 45px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxqXKS9DMXR0ytbLnV50dEIFS5PEmwfuvZrqc29iIxnfJ4k4CXaEYRfQLYNa8LRSctM_lw6HZ2XIkLIz1DqIYwBU6SLmT_weUuitLWcaSoLdHKG0j7V7Pi0Y6o-GiZ7BRnBwyC4fTjw6Y/s1600/Judul.png) no-repeat 0 0;}
#header .ad {width: 500px;float: right;padding: 5px 6px 0 0;}


READ MORE

Cara Membuat Tulisan Berjalan di Sidebar

Unknown | 05:21 | , , ,
Selamat malam semuanya, apa khabar semuanya, moga-moga semua  dalam keadaan sehat walafiat dan masih dalam lindungan Nya :a; Amin
Sekarang saya akan mencoba berbagi tentang Cara Membuat Tulisan Berjalan di Sidebar :z;
untuk Demo kawan bisa lihat disini 
Langsung saja ke Caranya :
  • Masuk ke Account Blogger dengan ID kawan 
  • Pada Dasbor pilih Tata Letak - Tambah Gadget
  • Pada HTML / JavaScript pilih tanda (+) 
  • Copas script berikut kedalamnya 
<script language="JavaScript">
var max=0;
function textlist()
{
max=textlist.arguments.length; for (i=0; i<max; i++) this[i]=textlist.arguments[i];
}
tl=new textlist
(
" SUATU KEBANGGAAN APABILA DENGAN BERBAGI KAMI DAPAT MEMBANTU KAWAN....!!! " // Geben Sie hier den zu scrollenden Text ein
);
var x=0; pos=0;
var l=tl[0].length;
function textticker()
{
document.tickform.tickfield.value=tl[x].substring(0,pos)+"_";
if(pos++==l)
{
pos=0;
setTimeout("textticker()",1000);
x++;
if(x==max)
x=0;
l=tl[x].length;
} else
setTimeout("textticker()",100);
}
// end -->
</script>
<script language="JavaScript">
<!--
document.write("<FORM NAME=\"tickform\">");
document.write("<INPUT TYPE=\"TEXT\" NAME=\"tickfield\" SIZE=\"90\">"); // Bei SIZE können Sie die Größe des Feldes ändern
document.write("</FORM>");
textticker();
//--></script></div></div>

  • Ganti tulisan warna merah sesuai dengan selera kawan
  • Angka 90 warna biru disesuaikan dengan panjangnya kalimat / tulisan yang kawan buat
  • Tulisan akan tampil dari kiri ke kanan seperti kita sedang menulis
  • Jabgan lupa Simpan Blog kawan

READ MORE

Slideshow jQuery Keren untuk Blogger

Unknown | 19:27 | , ,

Dalam posting ini im akan menjelaskan bagaimana menambahkan jQuery menarik geser menunjukkan kepada blogger. Anda dapat menambahkan slideshow ini atas posting Anda. Sebenarnya ini juga sangat mudah untuk menambahkan di widget.




1. Masuk ke akun blogger dan klik drop down.




2. Sekarang pilih "Layout" Seperti bawah.




3. Klik Tambah Gadget dan pilih 'HTML / Javascript

4. Paste di bawah salah satu kode di bawah ini.


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://s3slider-original.googlecode.com/svn/trunk/s3Slider.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
   $('#btrix_slider3').s3Slider({
      timeOut: 3000
   });
});
</script>
<style>
#btrix_slider3 {
   width: 590px; /* Keep it 20px-40PX greater than ACTUAL Image size */
   height: 335px;
   position: relative;
   overflow: hidden;
   margin-left: 0;
}
#btrix_slider3Content {
   width: 590px;
   position: absolute;
   top: 0;
   margin-left: 0;
}
.btrix_slider3Image {
   float: left;
   position: relative;
   display: none;  top: 0;
   border:1px solid #ddd;
}
.btrix_slider3Image span {
position: absolute;
    font: 10px/15px sans-serif,Arial, Helvetica;
    padding: 10px 10px;
    background-color: #000;
    color: #fff;
    filter:'alpha(opacity=70)';
    -moz-opacity: .5;
    -khtml-opacity: .5;
    opacity: .5;
    text-align:justify;
}
.btrix_slider3Image span a {
text-decoration:underline;
color:#FE6602;
}
.clear {
   clear: both;
}
.top {
    top: 0;
    left: 0;
    width: 570px !important;
    height: 70px;
}
.bottom {
    bottom: 0;
    left: 0;
    width: 570px !important;
    height:90px;
}
.left {
    left: 0;
    top: 0;
    width: 110px !important;
    height: 335px;
}
.right {
    right: 0;
    bottom: 0;
    width: 80px !important;
    height: 319px;
}
</style>
<br />
<div id="btrix_slider3">
<ul id="btrix_slider3Content">
<li class="btrix_slider3Image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8PH8KzJeBLXXTiTpByZwBD8X_8MlIbeUF-iXOY5TDTZSsuC1TQqSlVgRZcIx6jX25Vl5GP-8Lt0pIslWulfq0W4eSOK_opUmlSw9OofV6qNvC3QPrq-oXlgZI9AmW2tLWQXy4beHfGMs/s1600/btrix_image1.jpg" />
<span class="left"><h3>
HEADING-1 GOES HERE</h3>
DESCRIPTION GOES HERE</span>
</li>
<li class="btrix_slider3Image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJJoZhi84hMWt-GBaGSQhTjH4n67xYRV78ar_aoXO1x1_nZ5TQFEZhNEtfvVv_QHrx-WtMNutx2Y3Avd_1AUmBQ7hy1Bgx71vZ686whgglizTjTsFQJOqlf64ScIuJR3yDFIYHKlYyz_c/s1600/btrix_image2.jpg" />
<span class="left"><h3>
HEADING-2 GOES HERE</h3>
DESCRIPTION GOES HERE</span>
</li>
<li class="btrix_slider3Image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM5MuhwJYPizjsS_UHet7WYrHI9IxAdDsaOGeRLlfBGI0CYbQOQULVxSbR6DYLwLkETJ04EBdWyfa16DcuiUMmzEMPe-uuLBNBhJfa8A78O4bppGAgItKHdBor3S_Hj-gP3GlrL09F0Oc/s1600/btrix_image3.jpg" />
<span class="top"><h3>
HEADING-3 GOES HERE</h3>
DESCRIPTION GOES HERE</span>
</li>
<li class="btrix_slider3Image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-h0jWvMacyh6LLLdWCMDDFXTos25kUeO4V6cJWXdS7YJmjiy19S6v8WHDg4ceVeFDcEbUNrNoag8efof0SlMSHVAR6tzDFtOk5um9DMZenitSqN80UiQYtvhgLyphYlwXoPzL2WmbWtA/s1600/btrix_image4.jpg" />
<span class="bottom"><h3>
HEADING-4 GOES HERE</h3>
DESCRIPTION GOES HERE</span>
</li>
<li class="btrix_slider3Image">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoFXGF9P572-gfU0YdBHEv5VlzCCDxOY1vROHmC_rnQ83kGK40SMuEHIguFBuY2GyaDb9dv_ATkxZPk5dXw8hU1MWOrRaOFnd6IxFSaxjFmeQOHlIajHNgeKYCCE_lFMC2pjpx-K92EWE/s1600/btrix_image5.jpg" />
<span class="bottom"><h3>
HEADING-5 GOES HERE</h3>
DESCRIPTION GOES HERE</span>
</li>
<div class="clear btrix_slider3Image">
</div>
</ul>
</div>
<br />

Anda dapat mengubah foto dengan mengubah URL Gambar


7. Sekarang menyimpan HTML / Javascript '.

     Anda telah selesai ... 


READ MORE