Search-form

♦Welcome to My Blogspot. Hope you enjoyed reading my blog♦

This is default featured post 1 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured post 2 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured post 3 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured post 4 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

This is default featured post 5 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - Premiumbloggertemplates.com.

Showing posts with label Belajar Nge-Blog. Show all posts
Showing posts with label Belajar Nge-Blog. Show all posts

Sunday, March 27, 2011

Cara Edit Header Template


Beberapa kawan blogger mempunyai keinginan tampil beda pada untuk template blog, biar kata lebih menarik. Hal tersebut sebenarnya juga termasuk dalam hal meningkatkan kreativitas blogging dalam merubah tampilan template. Mengapa demikian? karena beberapa kawan blogger yang suka utak-atik template tentunya tidak berhenti berkreasi dalam merubah tampilan blog agar lebih menarik...itu katanya juga bro hee :)

Selanjutnya ada pertanyaan kira-kira bagian mana yang harus dirubah. Sebenarnya dalam merubah template bawaan itu terserah pada kawan-kawan, gak ada yang ngelarang kok. Itulah para blogger yang baik hati sudah menyediakan gratis dan bebas lagi mau diapakan sesuai keinginan saudara. Ok...gak usah panjang lebar ngomongnya. Saya coba akan terangkan sedikit-demi-sedikit bagaimana cara edit template. Saya akan terangkan mulai dari Edit Header Template. Sebelumnya ane mau minta izin dulu pada para pakar dan pendahulu ane yang ahli dalam masalah pengetahuan template. Seandainya ada kesalahan tolong di kasih masukan, karena ini sangat berarti untuk menambah pengetahuan sesama blogger.

Beberapa hal perlu di perhatikan dalam edit header blog adalah perlu mengerti sedikit bagian, bagian yang harus di edit. Hal ini penting karena tidak semua bagian footer harus di edit, ditakutkan nanti malah merubah tata letaknya, baik itu tata letak tulisan bahkan bisa saja skinnya.

Baiklah...sekarang lihat dulu bagian-bagian kode Header templatenya. Salah satu (bukan salah dua ya gan, karena kalau salah satu masih dapat sembilan, tapi kalau salah dua tentunya dapat lapan...hehehee) Contohnya seperti di bawah ini.
/* Header */
#header-wrapper{
width:940px;   /*  ini ukuran besar header  */
background:#EBEBEB;  /*  ini warna header,
Anda bisa mengganti dengan background gambar seperti ini background: url (http://i445.photobucket.com/albums/qq171/etnikprogresif/images-1-1.jpg) atau ganti dengan url gambar anda  */
height:120px;  /*  ini tinggi header anda bisa meninggikan dengan memperbesar angkanya*/
margin:0;   /*  ini ukuran besar header. bila anda ingin mempunya border tinggal tambahkan bordernya menjadi seperti ini  margin:0; border:2px solid #000000 nanti bordernya berwarna hitam. anda bisa memperkecil atau memperbesar ukuran border dengan mengganti angka 2px dan mengganti warna border #000000 dengan yang lain */
-moz-border-radius:10px 10px 0 0;   /*  cetak biru garis lengkung pada sudut kolom header, kalau mau sudut lancip tinggal hapus saja semua kode berwarna biru  */
-khtml-border-radius:10px 10px 0 0;
-webkit-border-radius:10px 10px 0 0;
border-radius:10px 10px 0 0;
}
_______bagian skin header template_______

#header h1 {
font:46px 'Josefin Sans Std Light',arial,serif;  /*  ini besar dan jenis huruf yang digunakan pada judul blog, anda bisa mengganti ukuran besar atau mau memperkecil angkanya dan huruf dengan verdana, comic georgia atau yang lainnya  */
font-weight:bold;   /*  ini menandakan kalau huruf di cetak tebal  */
letter-spacing:-3px;
margin:0;
padding:20px 485px 0 20px;
text-transform:none;
color:#A30100;    /*  ini warna huruf yang di pakai, anda bisa menggunakan warna lain sesuka anda  */
text-shadow:1px 1px 2px #E6E6E6;   /*  ini menandakan kalau huruf mempunyai bayangan, kalau anda mau memperbesar bayangannya tinggal ganti angkanya dan kode warna #E6E6E6 untuk bayangannya bisa diganti dengan yang lain. sebagian template tidak mempunyai bayangan huruf. bila anda ingin menambahkan tinggal copy dan pastekan di bawah color:#A30100 */
}
________bagian judul blog pada header template_________

#header .description {    /*  kalau kode ini tidak ada, cari kode h2, beberapa template biasanya menggunakan h1 untuk judul blog dan h2 untuk deskripsi blog anda  */
color:#A30100;    /*  ini warna huruf pada deskripsi blog. anda bisa menggantinya dengan yang lain, kalau mau ditambahkan bayangan pada hurufnya tinggal masukkan kode seperti ini  text-shadow:1px 1px 2px #E6E6E6; di bawahnya */
font:16px arial,verdana;   /*  ini besar huruf dan jenis huruf yang digunakan. anda bisa menggantinya dengan yang lain */
letter-spacing:1px;
margin:0 5px 5px;
max-width:700px;
padding:0 485px 15px 20px;
text-transform:none;
font-weight:bold;
}
_______bagian deskripsi blog pada header template________

Untuk sementara anda belajar dulu edit bagian header template pada yang cetak merah. Kalau anda sudah memahami betul bagian template anda baru, belajar edit bagian margin dan padding. Karena pada bagian tersebut anda dapat memindahkan judul dan deskripsi blog di bagian kiri, kanan, ke atas atau kebawah header nantinya. Ok...sahabat blogger semua.....sampai di sini dulu apa yang ane tau ane bagikan, semoga anda dapat berkreasi pada bagian header template saudara. Semoga bermanfaat...amin. Selamat mencoba dan sukses selalu.

Cara Membuat Balon Tooltip

Anda ingin memasang tooltip. Ikuti langkah berikut ini

Log in ke blog anda
Klik Rancangan
Klik Edit HTMl
Masukkan kode berikut di atas ]]></b:skin>

    div.speechbubbles{
    background-color:#EDEDED;
    border:1px solid black;
    position:absolute;
    top:0;
    z-index:100;
    visibility:hidden;
    line-height:1.3em;
    padding:8px;
    width:200px; border-radius:8px;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    box-shadow:0 0 10px #888888;
    -moz-box-shadow:0 0 10px #888888;
    -webkit-box-shadow:0 0 10px #888888;
    }

    div.speechbubbles div.speechbubbles-arrow{ 
    border-color: transparent transparent #EDEDED transparent;
    border-style: solid;
    border-width: 10px;
    height:0;
    width:0;
    position:absolute;
    top:-19px;
    left:20px;
    z-index:101;
    _display:none;
    }

    div.speechbubbles div.speechbubbles-arrow-border{

    border-color: transparent transparent black transparent;

    border-style: solid;
    border-width: 10px;
    height:0;
    width:0;
    position:absolute;
    top:-20px;
    left:20px;
    z-index:101;
    _display:none;}

    div.downversion div.speechbubbles-arrow{
    border-color: #EDEDED transparent transparent transparent;

    top:auto;
    bottom:-19px;
    }

    div.downversion div.speechbubbles-arrow-border{

    border-color: black transparent transparent transparent; top:auto;
    bottom:-20px;
    }


Source: Cara Membuat Balon Tooltip - blogonol http://blogonol.blogspot.com/2011/02/cara-membuat-balon-tooltip.html#ixzz1HnrWu1Ef
Under Creative Commons License: Attribution

-Masukkan kode berikut di atas kode </head>
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://bloekoetoek-blogonol.googlecode.com/files/speechbubbles.js"></script>
<script type="text/javascript">
jQuery(function($){ //on document.ready
     //Apply tooltip to links with class="addspeech", plus look inside 'speechdata.txt' for the tooltip markups
    $('a.addspeech').speechbubble({url:'speechdata.txt'})
})
</script> 

Catatan Penting

  1. Kalau anda sudah memasang kode berwarna biru dalam template anda, maka kode di atas tidak perlu disertakan. Masukkan saja kode berwarna merah
  2. Guna mendukung kelancaran script ini, lebih baik anda menggunakan script yang anda simpan di penyimpanan online anda sendiri. Download scriptnya di sini.
  3. Kalau anda belum paham cara menyimpan dan mengambil link script dipenyimpanan online silahkan baca di sini

-Selanjutnya Simpan Template

Cara Membuat Pop Up Menu

Cara Membuat Pop Up Menu yang mungkin merupakan tampilan sederhana namun juga mempunyai daya tarik sendiri. Pop Up Menu ini akan menampilkan beberapa pilihan menu pada mini screen tersendiri, kira-kira tampilannya mirip tool tip. Kelebihannya mempunyai tampilan mungil dan dapat ditempatkan dimana saja, karena ane membuatnya menjadi widget yang dapat anda tempatkan di sidebar atau dimana anda inginkan alias sesuaka anda (ente senang ane pun senang...hehehheeee). Pop Up Menu ini di kembangkan oleh dynamicdrive. Contohnya bisa anda lihat di sidebar kanan paling atas (Tutorial Pilihan). Ok gak usah terlalu banyak basa-basinya gan, langsung saja kita lanjut kepada cara pembuatannya. Ikuti langkah berikut.

  • Log in ke blog anda
  • Klik Rancangan
  • Klik Edit HTML
  • Tempatkan Kode CSS berikut di atas kode ]]></b:skin> 




#popitmenu{ position: absolute; background-color: #E0ECF8; border:1px solid black; font: normal 12px Verdana; line-height: 18px; z-index: 100; visibility: hidden; } #popitmenu a{ text-decoration: none; padding-left: 6px; color: black; display: block; } #popitmenu a:hover{ /*hover background color*/ background-color: #CCFF9D; }


  • Selanjutnya Klik Rancangan lagi
  • Klik Tambah Gadget
  • Pilih HTML /JavaScript
  • Masukkan kode berikut ke dalamnya




<a href="#" onmouseover="showmenu(event,linkset[0])" onmouseout="delayhidemenu()"><button>Atribut</button></a><br />
<a href="#" onmouseover="showmenu(event,linkset[1], '180px')" onmouseout="delayhidemenu()"><button>Tutorial Pilihan Bulan Ini</button></a>
/* silahkan ganti tulisan merah dengan judul anda */
<script type="text/javascript">

var defaultMenuWidth="150px" /* ukuran lebar kolom tampilan. silahkan ganti 150px dengan keinginan anda */

var linkset=new Array()
///* linkset 1 dengan kode 0 *///
linkset[0]='<a href="http://www.pingler.com/" target="_blank">Pingler</a>'
linkset[0]+='<hr>' //Optional Separator
linkset[0]+='<a href="http://pingomatic.com/" target="_blank">Pingomatic</a>'
linkset[0]+='<a href="http://www.blogcrowds.com/resources/parse_html.php" target="_blank">Blogcrowds</a>'
linkset[0]+='<a href="http://html-color-codes.info/" target="_blank">Color Code</a>'
linkset[0]+='<a href="http://www.google.com/support/news_pub/bin/answer.py?hl=en&answer=191208&rd=1" target="_blank">Google News Suggest</a>'
/* silahkan ganti tulisan merah dengan alamat link dan judul anda */
 ///* linkset 2 dengan kode 1 *///
linkset[1]='<a href="http://blogonol.blogspot.com/2011/02/cara-membuat-pop-up-menu.html">Pop Up Menu</a>'
linkset[1]+='<a href="http://blogonol.blogspot.com/2011/02/cara-membuat-accordion-menu-daftar-isi.html">Accordion Menu</a>'
linkset[1]+='<a href="http://blogonol.blogspot.com/2011/02/cara-membuat-tab-menu-virtual.html">Virtual Pagination 1</a>'
linkset[1]+='<a href="http://blogonol.blogspot.com/2011/02/cara-modifikasi-tab-menu-vp-1.html">Virtual Pagination 2</a>'
linkset[1]+='<a href="http://blogonol.blogspot.com/2011/02/cara-modifikasi-tab-menu-vp-2_2895.html">Virtual Pagination 3</a>'
/* silahkan ganti tulisan merah dengan alamat link posting dan judul anda. kalau anda hanya ingin menampilkan satu Pop Up Menu, hapus kode linkset 2 dengan kode 1 sampai kebagian ini */
///* bagian di bawah ini jangan di edit *///

var ie5=document.all && !window.opera
var ns6=document.getElementById

if (ie5||ns6)
document.write('<div id="popitmenu" onMouseover="clearhidemenu();" onMouseout="dynamichide(event)"></div>')

function iecompattest(){
return (document.compatMode && document.compatMode.indexOf("CSS")!=-1)? document.documentElement : document.body
}

function showmenu(e, which, optWidth){
if (!document.all&&!document.getElementById)
return
clearhidemenu()
menuobj=ie5? document.all.popitmenu : document.getElementById("popitmenu")
menuobj.innerHTML=which
menuobj.style.width=(typeof optWidth!="undefined")? optWidth : defaultMenuWidth
menuobj.contentwidth=menuobj.offsetWidth
menuobj.contentheight=menuobj.offsetHeight
eventX=ie5? event.clientX : e.clientX
eventY=ie5? event.clientY : e.clientY
//Find out how close the mouse is to the corner of the window
var rightedge=ie5? iecompattest().clientWidth-eventX : window.innerWidth-eventX
var bottomedge=ie5? iecompattest().clientHeight-eventY : window.innerHeight-eventY
//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<menuobj.contentwidth)
//move the horizontal position of the menu to the left by it's width
menuobj.style.left=ie5? iecompattest().scrollLeft+eventX-menuobj.contentwidth+"px" : window.pageXOffset+eventX-menuobj.contentwidth+"px"
else
//position the horizontal position of the menu where the mouse was clicked
menuobj.style.left=ie5? iecompattest().scrollLeft+eventX+"px" : window.pageXOffset+eventX+"px"
//same concept with the vertical position
if (bottomedge<menuobj.contentheight)
menuobj.style.top=ie5? iecompattest().scrollTop+eventY-menuobj.contentheight+"px" : window.pageYOffset+eventY-menuobj.contentheight+"px"
else
menuobj.style.top=ie5? iecompattest().scrollTop+event.clientY+"px" : window.pageYOffset+eventY+"px"
menuobj.style.visibility="visible"
return false
}

function contains_ns6(a, b) {
//Determines if 1 element in contained in another- by Brainjar.com
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function hidemenu(){
if (window.menuobj)
menuobj.style.visibility="hidden"
}

function dynamichide(e){
if (ie5&&!menuobj.contains(e.toElement))
hidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
hidemenu()
}

function delayhidemenu(){
delayhide=setTimeout("hidemenu()",500)
}

function clearhidemenu(){
if (window.delayhide)
clearTimeout(delayhide)
}

if (ie5||ns6)
document.onclick=hidemenu

</script>



  • Simpan Template

Cara Membuat Spoiler

Silahkan ambil script di bawah ini.

<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">masukkan judul anda di sini</span><input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" 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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"/>
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">

Masukkan Tulisan atau Gambar Anda di sini

</div></div></div></div>

Kalau anda ingin memasukkan gambar seeperti yang terdapat di bawah tulisan, tambahkan kode seperti ini
<img src="http://i445.photobucket.com/albums/qq171/etnikprogresif/Saudi-Arabia-queen-.jpg" />
silahkan ganti tulisan merah dengan alamat gambar anda.

Cara Membuat Animasi Loading Blog

Tampilan tertentu pada saat loading blog mungkin merupakan daya tarik tertentu dalam sebuah blog. Hal ini memungkinkan anda menyimpan semua ketidak teraturan bentuk tampilan pada saat loading, sehingga pengunjung hanya melihat animasi tampilan loading. Posting kali ini saya akan share bagaimana membuat tampilan loading halaman dengan menggunakan jquery dan css. Tampilan animasi pada loading page ini menggunakan Query Loader, yaitu tampilan layar kosong hitam (bisa diubah) yang meliputi blog anda sampai semua konten dimuat. Artinya pengunjung tidak akan melihat apa yang diloading blog Anda. Pada tampilan ini pengunjung hanya melihat halaman loading dengan bar dan persentase loading secara keseluruhan dengan berwarna gelap. Coba anda refress blog ini? apa yang terlihat.....lumayan menarik bukan??? ok mari kita bahas cara pembuatannya. Ikuti langkah berikut ini.

Log in ke blog anda
Klik Rancangan
Klik Edit HTML
Masukkan kode berikut di atas kode </head>



<script src='http://code.jquery.com/jquery-1.5.min.js' type='text/javascript'/>
<script src='http://blogger-loader.googlecode.com/files/queryLoaderpre.js'
type='text/javascript'/> 

Selanjutnya masukkan kode berikut di atas kode </body>


<script>
QueryLoader.selectorPreload = &quot;body&quot;;
QueryLoader.init();
</script>


Selanjutnya masukkan kode berikut di atas kode ]]></b:skin>


.QOverlay {
background-color: #000000; /* warna background saat blog anda di loading */
z-index: 9999;
}

.QLoader {
background-color: #CCCCCC; /* warna bar loading */
height: 1px;
}

.QAmt {
color:#FF530D; /* warna angka persentase saat loading */
font-size:50px;
font-weight:bold;
line-height:50px;
height:50px;
width:100px;
margin:-60px 0 0 -50px;
}



Klik Simpan Template. Selesai

Cara Memasang Logo Dofollow

Ane sempat jalan kemaren kebeberapa blog kawan, salah satu blog ternya ada yang posting cara mengetahui blog dofollow. Ini jadi inspirasi buat saya nulis, karena sebelum pengunjung blog mengecek apakah blog kita dofollow atau tidak, lebih baik pasang aja banner dofollow, iya gak? suatu hal gampang bukan?...tapi bukannya ane mau mengatakan kalau posting tersebut tidak bermanfaat...tetap aja itu suatu pengetahuan dalam blogging. Tapi yang ane pertanyakan apakah setiap pengunjung akan mengecek dengan cara tersebut? saya rasa diantara 100 blogger untuk mendapatkan 10 orang melakukan cara ini sangat kecil kemungkinannya. Jadi intinya gak usah repot bro...tinggal pasang aja logo dofollow di blog anda. Tapi....ada tapinya lagi...setting dulu blog anda menjadi dofollow, caranya bisa anda baca di sini. Mengenai keuntungan blog dofollow gak usah saya ceritakan di sini, banyak kok blog yang mengupas masalah ini....okay?...mari kita mulai.

Kalau sudah anda setting blog menjadi dofololow, cara pasang logonya ikuti langkah di bawah ini...

Log in ke blog anda, jangan blog tetangga yaa
Masuk ke Edit HTML
Pasang kode css di bawah ini sebelum ]]></b:skin>


#blogonol-pojok{_left:expression(document.documentElement.scrollLeft+document.documentElement.clientWidth-offsetWidth); _position:absolute; _top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight); bottom:0; clip:inherit; position:fixed; right:0}


Senlanjutnya masukkan kode di bawah ini sebelum </body>

<div id='blogonol-pojok'>
<a href='http://blogonol.blogspot.com/'><img border='0' src='http://i445.photobucket.com/albums/qq171/etnikprogresif/photo_dofollow.jpg'/></a>
</div>

Setelah itu Simpan Template dan lihat hasilnya
Jangan Lupa Komentar yaaa...makasih

NB

  • Sebenarnya cara ini trik untuk menempatkan widget atau properti lain di pojok, anda tinggal mengganti kode <img border='0' src='http://i445.photobucket.com/albums/qq171/etnikprogresif/photo_dofollow.jpg'/> dengan kode widget atau aksesoris yang anda inginkan...ok bro selamat mencoba dan sukses selalu.
  • Kalau anda mau pilihan logo lainnya anda bisa buat sendiri di sini,
  • Atau mau menggunakan punya sahabat blogger mania, klik di sini

Cara Memasang Widget Sharing Is Sexy di Posting Blog


Sharing is sexy adalah salah satu widget social bookmarking yang disediakan untuk memberi kemudahan bagi pemilik blog maupun pengunjung dalan mensubmit atau membookmark artikel yang ia sukai ke situs social bookmarking hanya dengan mengklik pada icon-icon social bookmarking yang ada.

sharing is sexy: auto hiding social bookmarking widget
Keunikan dari widget sharing is sexy adalah icon-icon social bookmarking yang terdapat didalamnya bisa bergerak ketika disorot mouse sehingga terlihat lebih hidup dan menarik. Untuk lebih jelasnya, silahkan lihat disini.

Mengenai cara memasang widget social bookmarking sebenarnya sudah pernah saya bahas di blog ini hanya saja cara pemasangan widget sharing is sexy ini sedikit berbeda. Oleh karena itu, pada postingan ini saya akan menjelaskan bagaimana cara memasang widget sharing is sexy di posting blogger/ blogspot.

Bagi anda yang tertarik, silahkan ikuti langkah-langkah dibawah ini:

1. Masuk ke menu Design->Edit HTML.
2. Beri centang pada 'Expand Widget Templates'
3. Letakkan kode berikut diatas ]]></b:skin>

div.beauty-bookmarks {
height:54px;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEickpEeUfIiKOmYMtuerDAZq9QR2gRWlNoksC81PQ0y3Z3D46grKtjiQSJIb1K9DETKgN1KGqfXeBU4j3LWPDk3Vu7u_bppyF25ZU7fA5Dgp5WdKW_tPcc0my7vlqlDCYqY80wQAeZ4fYTj/') no-repeat left bottom;
position:relative;
width:455px;
}

div.beauty-bookmarks span.beauty-rightside {
width:17px;
height:54px;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEickpEeUfIiKOmYMtuerDAZq9QR2gRWlNoksC81PQ0y3Z3D46grKtjiQSJIb1K9DETKgN1KGqfXeBU4j3LWPDk3Vu7u_bppyF25ZU7fA5Dgp5WdKW_tPcc0my7vlqlDCYqY80wQAeZ4fYTj/') no-repeat right bottom;
position:absolute;
right:-17px;
}

div.beauty-bookmarks ul.socials {
margin:0 !important;
padding:0 !important;
position:absolute;
bottom:0;
left:10px;
}

div.beauty-bookmarks ul.socials li {
display:inline-block !important;
float:left !important;
list-style-type:none !important;
margin:0 !important;
height:29px !important;
width:48px !important;
cursor:pointer !important;
padding:0 !important;
}

div.beauty-bookmarks ul.socials a {
display:block !important;
width:48px !important;
height:29px !important;
font-size:0 !important;
color:transparent !important;
}

.beauty-furl, .beauty-furl:hover, .beauty-digg, .beauty-digg:hover, .beauty-reddit, .beauty-reddit:hover, .beauty-stumble, .beauty-stumble:hover, .beauty-delicious, .beauty-delicious:hover, .beauty-technorati, .beauty-technorati:hover, .beauty-facebook, .beauty-facebook:hover, .beauty-twitter, .beauty-twitter:hover, .beauty-script-style, .beauty-script-style:hover, .beauty-designfloat, .beauty-designfloat:hover {
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix14kF0XqNhFjvBZgGJKbK1NhxDzHSdUNaAjGjfuRdE_YlizG_PLRlK4PC1tmPxsuQmTCjwJbry890_4QoWircGU0SFM5Ho8lG3wTbPufNZ-4kcrQmIUbf8WG_gppL7K7EWZDBE-bb8R_e/') no-repeat !important;
}

.beauty-furl {
background-position:-300px top !important;
}
.beauty-furl:hover {
background-position:-300px bottom !important;
}
.beauty-digg {
background-position:-500px top !important;
}
.beauty-digg:hover {
background-position:-500px bottom !important;
}
.beauty-reddit {
background-position:-100px top !important;
}
.beauty-reddit:hover {
background-position:-100px bottom !important;
}
.beauty-stumble {
background-position:-50px top !important;
}
.beauty-stumble:hover {
background-position:-50px bottom !important;
}
.beauty-delicious {
background-position:left top !important;
}
.beauty-delicious:hover {
background-position:left bottom !important;
}
.beauty-technorati {
background-position:-700px top !important;
}
.beauty-technorati:hover {
background-position:-700px bottom !important;
}
.beauty-twitter {
background-position:-350px top !important;
}
.beauty-twitter:hover {
background-position:-350px bottom !important;
}
.beauty-facebook {
background-position:-450px top !important;
}
.beauty-facebook:hover {
background-position:-450px bottom !important;
}
.beauty-script-style {
background-position:-400px top !important;
}
.beauty-script-style:hover {
background-position:-400px bottom !important;
}
.beauty-designfloat {
background-position:-550px top !important;
}
.beauty-designfloat:hover {
background-position:-550px bottom !important;
}
NB:
Jika anda ingin mengganti tulisan 'Sharing is sexy' menjadi 'Sharing is caring' maka ganti left bottom dan right bottom menjadi left top dan right top

4. Setelah itu cari <data:post.body/>
5. Letakkan kode berikut dibawahnya

<b:if cond='data:blog.pageType == "item"'>
<div class='beauty-bookmarks'>
<ul class='socials'>
<!-- delicious start-->
<li class='beauty-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<!-- delicious end-->
<!-- digg start-->
<li class='beauty-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<!-- digg end-->
<!-- technorati start-->
<li class='beauty-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<!-- technorati end-->
<!-- reddit start-->
<li class='beauty-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<!-- reddit end-->
<!-- Stumbleupon start-->
<li class='beauty-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<!-- Stumbleupon end-->
<!-- designfloat start-->
<li class='beauty-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<!-- designfloat end-->
<!-- facebook start-->
<li class='beauty-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<!-- facebook end-->
<!-- twitter start-->
<li class='beauty-twitter'><a expr:href='&quot;http://twitter.com/home/?status=Chk Out-&quot; + data:post.title + &quot; &quot; + data:post.url' target='_blank'/></li>
<!-- twitter end-->
<!-- furl start-->
<li class='beauty-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<!-- furl end-->
</ul>
<span class='beauty-rightside'/>
</div>
</b:if>

Jika ada situs social bookmarking tertentu yang tidak ingin anda gunakan maka hapus saja kodenya. Contoh anda tidak ingin memasang Facebook maka hapus kode seperti ini:

<!-- facebook start-->
<li class='beauty-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<!-- facebook end-->
6. Kalau sudah simpan template anda. Selesai

Selamat mencoba!!

Cara Memasang Google Talk di Blog

add google talk
Beberapa bulan yang silam, saya pernah mengulas tentang bagaimana cara menampilkan status online Yahoo! Messengerdi blog pada postingan yang ini. Rupanya ada beberapa sahabat yang berkeinginan lain yaitu ingin mengetahui bagaimana cara memasang Google Talk di blog. Apa itu google talk? google talk adalah suatu layanan dari google yang dapat di pergunakan oleh mereka yang mempunyai akun di google agar satu sama lain bisa saling berkomunikasi atau lebih di kenal dengan istilah chatting. Apakah fasilitas google talk tersebut bisa di pasang di blog? jawabannya adalah bisa. Belum mengetahui caranya? silahkan ikuti saja langkah-langkah berikut ini :

Untuk template baru :
  1. Sign in di blogger dengan ID anda.
  2. Klik Layout.
  3. Klik tab Elemen Halaman.
  4. Klik Tambahkan sebuah Elemen Halaman.
  5. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan HTML/JavaScript. Copy lalu paste pada kode berikut pada pop up window yang muncul.

<iframe width="234" frameborder="0" src="http://talkgadget.google.com/talkgadget/client?fid=gtalk0&relay=http%3A%2F%2Fwww.google.com%2Fig%2Fifpc_relay" height="350">
</iframe><p style="margin:-8px 0"><br /><center>
<a style="text-decoration:none;font-size:60%;" href="http://kolom-tutorial.blogspot.com/2008/01/pasang-google-talk-di-blog.html">Add to your blog</a></center></p>


6. Klik tombol SIMPAN PERUBAHAN.
7. Pindahkan elemen yang baru anda buat tadi pada tempat yang di inginkan.Klik tombol SIMPAN yang ada di sebelah atas.Selesai. Silahkan lihat hasilnya!

Pasang Jam di Blogspot

Agar blog anda tampak cantik dan menarik untuk di lihat, maka anda bisa memasang beberapa aksesori blog, salah satunya adalah dengan cara memasang jam. Jam ini bisa anda dapatkan secara gratis pada situs http://www.clocklink.com.

-Dan bagi anda yang ingin blognya di pasang jamjuga, silahkan ikuti langkah-langkah berikut :

  1. Silahkan kunjungi situs http://www.clocklink.com
  2. Jika sudah berada pada situs tersebut, silahkan klik tulisan Want a clock on your Website ?
  3. Silahkan anda melihat-lihat dulu model dari jam yang tersedia, yaitu mulai dari Analog, Animal, Animation, dll
  4. Jika di rasa sudah menemukan model jam yang anda sukai, klik tulisan View HTML tag yang berada di bawah jam yang anda sukai tadi
  5. Klik tombol yang bertuliskan Accept
  6. Pilih waktu yang sesuai dengan tempat anda di samping tulisan TimeZone. Contoh : untuk indonesia bagian barat pilih GMT +7:00
  7. Set ukuran jam yang anda sukai di samping tulisan size
  8. Copy kode HTML yang di berikan pada notepad
  9. Paste kode HTML yang di copy tadi pada tempat yang anda inginkan
  10. Selesai


Karena kode jam blog ini adalah merupakan suatu kode HTML, maka bagi anda yang masih bingung cara menempatkan kode HTML pada template blog, silahkan baca kembali postingan saya terdahulu di sini

Selamat mencoba.
  Semoga Berhasil :))

Cara Menyeting Blogspot

Jika sudah berhasil mendaftar dan membuat blog di Blogspot, kita akan diminta untuk mengatur setting blog yang telah dibuat. Apa saja setting ini ? dan apa kegunaan dari setiap setting ini ? mari kita mambahasnya.
Setting blog berguna untuk mengatur segala sesuatu yang berhubungan dengan blog. Setting yang tepat sangat membantu bagi blog yang kita buat. Kita tidak perlu khawatir walaupun tidak memiliki pengetahuan tentang hal-hal yang teknis, karena Blogspot sudah memberikan berbagai kemudahan untuk mengatur setting ini.

Setting Basic

  • Title – ini merupakan judul dari blog yang kita buat, kita bisa mengisikannya sesuai selera. Yang perlu diperhatikan adalah buatlah judul yang bisa menggambarkan apa isi dari blog. Karena judul ini akan tampil pada halaman hasil pencarian search engine (misalnya Google).
  • Description – setting ini untuk menjelaskan isi dari blog, ini untuk memberikan sedikit penjelasan kepada pengunjung maksud dan tujuan dari blog yang dibuat.
  • Add your Blog to our listings? – setting ini meminta konfirmasi kepada pemilik blog, apakah blognya akan dimasukkan kedalam index Google. Jika memilih YES berarti Blog kita akan dimasukkan kedalam Index.
  • Show Quick Editing on your Blog? – pilihan ini meminta kita untuk memilih apakah ingin menampilkan layar untuk mengedit secara cepat.
  • Show Email Post links? – pilihan ini menawarkan kita apakah akan menampilkan link email, link email ini maksudnya jika seorang pembaca menyukai artikel yang kita buat dan ingin memberikannya kepada temannya melalui email, dia dapat melakukkannya dengan mengklik link tersebut.
  • Show Compose Mode for all your blogs? – setting ini berguna pada saat mengedit artikel menggunakan editor dari Blogspot, bila memilih yes maka Editor akan menampilkan menu Compose.
  • Show transliteration button for your posts? – setting ini untuk menampilkan tombol yang berfungsi mentranslate artikel yang kita buat (jika berbahasa Inggris) ke dalam bahasa India.
  • Delete Your Blog? - jangan mengklik ini, jika tidak diperlukan.

Setting Publishing

  • Blog*Spot Address – ini akan jadi bagian dari alamat URL blog, seperti blog yang saya buat ini mempunya blog address belajar-yok, dan alamat URL nya menjadi belajar-yok.blogspot.com. Ini juga salah satu hal yang membedakan blod dengan website biasa, jika pada website biasanya menggunakan www.namawebsite.com.
  • Send Pings – pilih Yes.

Setting Formating

  • Show – setting ini untuk mengatur berapa artikel yang akan ditampilkan perhalaman. Tips: semakin sedikit yang ditampilkan akan semakin cepat dibuka oleh browser pengunjung.
  • Date Header Format – untuk mengatur format tampilan penanggalan.
  • Archive Index Date Format - untuk mengatur format tampilan penanggalan arsip.
  • Timestamp Format – format tampilan waktu.
  • Time Zone – zona waktu
  • Language – pemilihan bahasa.
  • Convert line breaks – bila memilih yes berarti setiap kali kita menekan tombol ENTER pada saat mengedit dan membuat komentar, akan dikonversi menjadi BR (break return).
  • Show Title field – untuk menampilkan atau menyembunyikan judul artikel.
  • Show Link Field – menampilkan link ke artikel.
  • Enable float alignment - untuk mengatur layout.
  • Post Template – yaitu untuk menambahkan hal-hal tertentu secara otomatis setiap kali membuat artikel baru.

Setting Comments

  • Comments - menampilkan atau menyembunyikan komentar.
  • Who Can Comment? - setting ini untuk mengatur siapa saja yang boleh membuat komentar.
  • Comments Default for Posts - jika memilih New Post Have Commnets berarti setiap artike boleh mempunyai komentar.
  • Backlinks – menampilkan atau menyembunyikan informasi siapa saja yang melink pada blog kita.
  • Backlinks Default for Posts – setiap artikel baru boleh atau tidak boleh mempunyai backlink.
  • Comments Timestamp Format – format tampilan waktu pada komentar.
  • Show comments in a popup window? – Yes, berarti setiap akan mengisi komentar, Blogspot akan menampilkan jendela Pop Up.
  • Enable comment moderation? – untuk mengatur komentar apasaja yang boleh ditampilkan.
  • Show word verification for comments? – utility untuk mencegah comment spam.
  • Show profile images on comments? – menampilkan photo orang yang membuat komentar (jika dia seorang blogger).
  • Comment Notification Address – setiap kali ada yang berkomentar, Blogspot akan memberi tahukan melalui alamat email ini.

Setting Archiving

  • Archive Frequency - mengatur tampilan frekuensi pengarsipan, setting ini berpengaruh jika kita membuat widget Pos Archive.
  • Enable Post Pages? - Yes berarti setiap artikel yang kita buat mempunyai alamat URLnya sendiri.

Seeting Site Feed

  • Allow Blog Feed – setting ini berpengaruh bagi yang pembaca melalui RSS Feed.
  • Feed Item Footer – untuk menyertakan hal-hal tertentu (misalnya Banner) pada bagian footer di RSS Feed.

Setting Email

  • BlogSend Address – isikan alamat email orang atau teman yang ingin anda kirim secara otomatis setiap kali membuat artikel baru.
  • Mail-to-Blogger Address – mengirimkan artikel ke blog melalui email.

Setting Permission

  • Blog Authors – nama pembuat blog, kita bisa membuat beberapa account jika blog tersebut blog keroyokan.
  • Blog Readers – siapa saja yang oleh membaca blog.
Itulah setting-setting yang yang terdapat didalam blog, perlu waktu untuk memahaminya lebih jauh bila ingin membuat blog kita semakin baik. Namun semakin sering kita ngeblog, dengan sendirinya pengetahuan akan semakin bertambah.

Cara Menghilangkan Navigasi Bar

Berikut Langkah-langkahnyaa:
  1. Login dulu ke blogger.
  2. Masuk tata letak, kemudian edit HTML.
  3. Kemudian ceklist/centang Expand widget trus copy-paste kode berikut :
#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

Letakkan seperti di bawah ini
-----------------------------------------------------
Blogger Template Style Sheet
Name: NewFangled XML
Designer: Erica - Templates For You
Modified from: Free CSS Templates
URL: templatesforyou.blogspot.com / freecsstemplates.org
Date: 4 Jun 2007
Updated by: Erica - Templates For You
Enhanced by: eBlog Templates
Date: 1/29/2008
URL: http://www.eblogtemplates.com
------------------------------------------------------ */
#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}


4. Simpan Templates.

Selamat Mencoba.. semoga berhasil

Cara Membuat link di dalam Postingan

Link atau Kaitan, yang dimaksud link disini adalah suatu URL atau alamat web, situs atu sejenisnya. Banyak manfaat dari membuat link khususnya link tersembunyi, diantaranya : untuk mengkaitkan postingan yang satu dengan yang lainnya, untuk menyembunyikan link referral anda. Apabila link tersebut diklik maka anda akan menuju ke URL link tersebut. misalnya :

Contoh 1 :
Link dari kata uang abad 21 adalah http://uang-abad-21.blogspot.com, apabila anda mengklik uang abad 21 maka anda akan menuju ke http://uang-abad-21.blogspot.com

Contoh 2
Link dari kata Postingan adalah http://gazpadaku.blogspot.com/2010/05/satu-hitam-diatas-kertas-putih.html, apabila anda mengklik kata Postingan maka anda akan menuju ke http://gazpadaku.blogspot.com/2010/05/satu-hitam-diatas-kertas-putih.html

Lalu bagaimanakah cara membuat link tersembunyi didalam postingan ? seperti contoh ke 2. Berikut tutorialnya cara membuat link tersembunyi dari kata DISINI :

1. Tuliskan kode berikut sebelum kata disini.

<a href='http://ALAMAT YANG DITUJU.COM' title='ALAMAT YANG DITUJU'>
2. Selanjutnya tulis kode </a> setelah kata disini.

Sehingga hasil akhirnya seperti dibawah ini :
<a href='http://ALAMAT YANG DITUJU.COM' title='ALAMAT YANG DITUJU'>DISINI</a>

coba deh.

Cara Menampilkan Status Yahoo di Blog

Menampilkan status Offline/Online Yahoo Messenger. Hal ini berfungsi untuk mengetahui jika anda sedng online atau offline. Tapi bagi yang belum punya Account Yahoo ya buat dulu lah,. Dengan tanda seperti itu kan nanti pengunjung blog anda akan bisa langsung berinteraksi langsung dengan anda, dengan begitu kan nanti para penggemar setia dan pengunjung blog anda jadi tambah sayang kepda anda. Tak kenal maka tak sayang, he..he..
Contohnya seperti ini, jika status kamu offline maka gambarnya akan seperti ini :

Jika kamu sedang online, maka gambar akan berganti seperti ini


Cara buatnya sangat gampang anda tinggal copy script berikut ini trus kamu pasang di sidebar blog anda
, berikut tutorialnya :

  1. Masuk ke blog anda.
  2. Klik tab Layaout di bagian atas.
  3. Klik “Page Element” trus “Add page elements –HTML/Javascript
  4. Copypaste kode beikut .
<a href="http://messenger.yahoo.com/edit/send/?.target=YManda">
<img src="http://opi.yahoo.com/yahooonline/u=YManda/m=g/t=2/l=us/opi.jpg" border="0" alt="Status YM" /></a>
YManda = ganti dengan account yahoo messenger anda
2 = Ganti dengan nomor pilahanmu. Pilih angka dari 0-16 (ini tampilan gambar)

t=0

t=1

t=2

t=3

t=4

t=5

t=6

t=7

t=8

t=9

t=10

t=11

t=12

t=13

t=14

t=15

t=16




  5. klik SAVE

Friday, March 25, 2011

Cara Menampilkan Status Terbaru Twitter di Blog

Ini Langkah-langkah Nya::

1. Login ke blogger
2. Pilih Rancangan lalu Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode script berikut ini:

<div id="twitter_div">
<ul id="twitter_update_list"></ul>
<a id="twitter-link" style="display:block;text-align:right;" href="http://twitter.com/Gabrieljaya" target='blank'><b>follow me on Twitter</b></a>
</div>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/Gabrieljaya.json?callback=twitterCallback2&count=5" type="text/javascript">
</script>

Ganti yang berwarna biru Gabrieljaya dengan id twitter kamu sendiri dan 5 adalah banyaknya status (tweet) yang ditampilkan.

5. Simpan jika sudah selesai. 

Cara Menambahkan Button Untuk Berbagi ke LintasBerita.com

Langkah-langkahnya:

1. Login ke Blogger.
2. klik menu Rancangan.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode <div class='post-footer'>
6. Taruh (copy paste) kode berikut di bawahnya

<a expr:href='&quot;http://www.lintasberita.com/kirimmedia/url:&quot; + data:post.url' rel='nofollow' target='_blank'><img alt='lintasberita' src='http://www.lintasberita.com/buttons_lb/lintasberita-80x15.gif'/></a>
 

7. Simpan template jika sudah selesai. 

Cara Membuat Random Post Berjalan

Dengan memasang Random Post berjalan ini Bermanfaat untuk meningkatkan page view blog karna tulisan-tulisan yang sudah agak lama yang kita posting dapat diklik lagi dan dibaca. Selain itu juga tidak banyak menyita banyak tempat. Langsung saja langkah-langkah-nya.

1. Login ke blogger
2. Pilih Rancangan lalu Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:

<!-- Alphabetical/chronological Post Title Listing with comment count Start -->
<script type="text/javascript">
function getYpipeTL(feed) {
document.write('<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="1">');
var i;
for (i = 1; i < feed.count ; i++)
{
var href = "'" + feed.value.items[i].link + "'";
var pTitle = feed.value.items[i].title + "</a> | ";
var pComment = " \(" + feed.value.items[i].commentcount + " comments\)";
var pList = "</a>" + "<a href="+ href + '">' + pTitle;
document.write(pList);
document.write(pComment);
document.write('</a></li>');
}
document.write('</marquee>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
YourBlogUrl=http://Gabrieljayasaputra.blogspot.com
&Order=alphabet
&_id=401e43055731c1a29f1e1d3eb5e8e13f
&_callback=getYpipeTL
&_render=json"
type="text/javascript"></script>
<!-- Alphabetical Post Title Listing End -->

5. Ganti http://Gabrieljayasaputra.blogspot.com dengan URL blogmu sendiri dan angka 1 adalah kecepatan berjalannya.
6. Simpan jika sudah selesai.

Sunday, March 20, 2011

Cara Membuat Efek Daun Berguguran Di Blog

Setelah Kemaren saya Membuat postingan Bagaimana Cara membuat hujan salju di blog, kali ini saya ingin mencoba membuat Efek Daun Berguguran di blog menggunakan Html/Java script . Penasaran kan? ingin mencobanya? 

Berikut Langkah-langkahnya:
 
1. Login blogger
2. Rancangan(Design)
3. Pilih Elemen Halaman
4. Tambah Gadget Pilih HTML / JAVASCRIPT
5. Copy Kode Dibawah ini Kedalamnya:

    <script src="http://postrecent.googlecode.com/files/daundj.js" type="text/javascript">
    </script>


6. Save Template Dan Lihat hasilnya.

Cara Memberi Widget Categories Di Blogspot

Widged category mempunyai peran penting dalam blog, karena dengan adanya category di dalam suatu blog, akan dapat memudahkan pengelompokan artikel dalam blog tersebut, sehingga dapat pula memudahkan para pembaca/pengunjung dalam memilih artikel yang ingin mereka baca berdasarkan category atau klasifikasi artikel dalam blog. Selain itu, blog dengan adanya widged category akan terlihat lebih profesional, untuk itu kita wajib dan harus memasang widged ini pada blog kita.

Ada beberapa cara yang dapat kita lakukan untuk membuat widged category atau label dalam blog yaitu tag clouds, comulus clouds, labels (standar dari blogger).saya disini lebih suka menggunkan Labels standard dari blogger karena tag clouds dan cumulus clouds cukup merepotkan ( harus hack dengan code-code yang cukup memusingkan, karena belum terintregrasi di blogger.com) selain itu kedua cara tersebut juga menggunakan javascript dan flash yang dapat membuat loading page menjadi agak lama.
Kali ini saya akan coba sharing bagaimana membuat widged category yang tentunya menggunkan labels standard blogger (tentunya saya khususkan kepada anda yang memang belum menaruh category diblog berplatform blogspot anda).
Untuk membuat labels (category) silahkan ikuti langkah-langkah berikut ini :
1. Login ke account blogger anda
2. Pilih layout >tata letak> add gadget pada sidebar anda untuk membuat elemen halaman baru
3. Pilih Label, perhatikan gambar di bawah ini: Widged category mempunyai peran penting dalam blog, karena dengan adanya category di dalam suatu blog, akan dapat memudahkan pengelompokan artikel dalam blog tersebut, sehingga dapat pula memudahkan para pembaca/pengunjung dalam memilih artikel yang ingin mereka baca berdasarkan category atau klasifikasi artikel dalam blog. Selain itu, blog dengan adanya widged category akan terlihat lebih profesional, untuk itu kita wajib dan harus memasang widged ini pada blog kita.

Ada beberapa cara yang dapat kita lakukan untuk membuat widged category atau label dalam blog yaitu tag clouds, comulus clouds, labels (standar dari blogger).saya disini lebih suka menggunkan Labels standard dari blogger karena tag clouds dan cumulus clouds cukup merepotkan ( harus hack dengan code-code yang cukup memusingkan, karena belum terintregrasi di blogger.com) selain itu kedua cara tersebut juga menggunakan javascript dan flash yang dapat membuat loading page menjadi agak lama.
Kali ini saya akan coba sharing bagaimana membuat widged category yang tentunya menggunkan labels standard blogger (tentunya saya khususkan kepada anda yang memang belum menaruh category diblog berplatform blogspot anda).
Untuk membuat labels (category) silahkan ikuti langkah-langkah berikut ini :
1. Login ke account blogger anda
2. Pilih layout >tata letak> add gadget pada sidebar anda untuk membuat elemen halaman baru
3. Pilih Label, perhatikan gambar di bawah ini: Widged category mempunyai peran penting dalam blog, karena dengan adanya category di dalam suatu blog, akan dapat memudahkan pengelompokan artikel dalam blog tersebut, sehingga dapat pula memudahkan para pembaca/pengunjung dalam memilih artikel yang ingin mereka baca berdasarkan category atau klasifikasi artikel dalam blog. Selain itu, blog dengan adanya widged category akan terlihat lebih profesional, untuk itu kita wajib dan harus memasang widged ini pada blog kita.

Ada beberapa cara yang dapat kita lakukan untuk membuat widged category atau label dalam blog yaitu tag clouds, comulus clouds, labels (standar dari blogger).saya disini lebih suka menggunkan Labels standard dari blogger karena tag clouds dan cumulus clouds cukup merepotkan ( harus hack dengan code-code yang cukup memusingkan, karena belum terintregrasi di blogger.com) selain itu kedua cara tersebut juga menggunakan javascript dan flash yang dapat membuat loading page menjadi agak lama.
Kali ini saya akan coba sharing bagaimana membuat widged category yang tentunya menggunkan labels standard blogger (tentunya saya khususkan kepada anda yang memang belum menaruh category diblog berplatform blogspot anda).
Untuk membuat labels (category) silahkan ikuti langkah-langkah berikut ini :
1. Login ke account blogger anda
2. Pilih layout >tata letak> add gadget pada sidebar anda untuk membuat elemen halaman baru
3. Pilih Label, perhatikan gambar di bawah ini:





4. Pada Title dapat anda isi dengan judul widget anda, misal: kategori, daftar isi, dsb. Pada pilihan sorting anda bisa memilih Alphabetically untuk mengatur labels anda secara abjad dan By Frequency untuk mengatur labels anda dari jumlah artikel terbanyak.
5. dan langkah terakhir tentu saja SAVE dan silahkan lihat hasilnya.

♦Keterangan: Cara Menandai Labels/ Categories: Dengan mengisi Keterangan Disini (lihat gambar)

Thursday, March 17, 2011

Cara Menampilkan Avatar Komentar dengan MyBlogLog

Kalau yang dulu atau fitur dari blogger avatar yang muncul adalah orang-orang yang punya akun (profil di blogger) tapi dengan avatar yang ini berbeda, yaitu avatar yang dimunculkan adalah dari profil MyBlogLog. Artinya jika saat seseorang itu berkomentar dengan pilihan sebagai itu punya atau dimasukkanke dalam MyBloglognya maka avatar itu akan muncul, tetapi jika tidak punya mybloglog maka juga tidak akan muncul dan digantikan dengan ikon yang foto yang kecil. Untuk lebih jelasnya seperti yang saya gunakan saat ini di avatar komentar blog saya.

Berikut Cara-cara nya:

1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Tata Letak.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode </head> setelah ketemu taruh (copy paste) kode dibawah ini diatas </head>


<script type='text/javascript'>
//<![CDATA[
/*
Merlinox and Napolux MyBlogLog Avatar Creator
created by Merlinox (blog.merlinox.com)
helped by Napolux (www.napolux.com)

version 0.1 (20061214)
version 0.2 (20061215)
compatible with all blogger blog
*/

if(typeof(myLayer)!='function'){
function myLayer (x){
//individuo l'oggetto
if(document.layers){ // browser="NN4";
lay=document.layers[x];
}
if(document.all){ // browser="IE";
lay=eval("document.all." + x);
}
if(!document.all && document.getElementById){ // browser="NN6+ or IE5+ if you're willing to dump the !document.all stuff";
lay=document.getElementById(x);
}
return lay;
}
}

//lo prendo da blogger
function myBlogAvatar(codiceCommento,autore,stile){
//scrivo lo span
//var myBlogSpan = "myBlog-" + codiceCommento;
//document.write("<span id='" + myBlogSpan + "'><i>myBlogLog...</i></span>");

//metto tutto minuscolo perchè indexOf è case sensitive

if (autore != ""){
alt="MyBlogLog: " + autore;

myBlog = "<a target='_blank' href=\"http://www.mybloglog.com/buzz/co_redir.php?href=" + autore + "\" rel='nofollow'><img src=\"http://pub.mybloglog.com/coiserv.php?href=" + autore + "\" alt=\"" + alt + "\" title=\"" + alt + "\" border=\"1\" class=\"myBlogAvatar\"></a>";
//myLayer(myBlogSpan).innerHTML = myBlog + myLayer(myBlogSpan).innerHTML;
//myLayer(myBlogSpan).innerHTML = myBlog;
document.write(myBlog);
}
}
//]]>
</script>

6. Cari kode <b:loop values='data:post.comments' var='comment'> dan jika sudah ketemua, taruh (copy paste) kode di berikut ini di atasnya

<div style='border:0;float:left;margin: 0 5px 0 0;'>
<script>
myBlogAvatar('<data:comment.id/>','<data:comment.authorUrl/>');
</script>
</div>

7. Simpan Template jika sudah selesai

Wednesday, March 16, 2011

Cara Merubah Template pada Blogspot

Cara Merubah template ini sangat bermanfaat bagi blog kita. Karena template ini dapat membuat pengunjung menjadi tertarik dengan blog kita. Template selain menarik juga memiliki banyak fungsi lho..  Ok tanpa panjang lebar mari kita liat langkah-langkah nya..


1. Anda harus download dahulu templatenya dengan cara Cari di google atau membuka situs yg biasa saya kunjungi ini http://www.zoomtemplate.com/. Setelah men-download template mari kita extract dahulu (apabila template yg didownload dengan format rar atau zip). Setelah extract cari file yang extensinya .xml
Contoh : garage-band-blogger.xml

2. Lalu login ke blogger.com dengan akun anda.
3. Lalu Klik "Rancangan"
4. Selanjutnya Klik "Edit HTML"
5. Lalu "Download Template Lengkap" (Untuk Berjaga" apabila terjadi kegagalan dalam merubah template anda).
6. Lalu unggah template yang kita download tadi dengan cara klik "browse" dan arahkan ke folder tempat anda menyimpan file .xml hasil extrak template. Lalu klik "Unggah" .
7.  Tunggu sampai proses selesai.


Keterangan:: Apabila tidak ada masalah maka akan ada pemberitahuan bahwa "template anda berhasil di unggah". Tetapi Kalau gagal biasanya muncul pesan eror seperi ini :

"Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
Pesan error XML: Content is not allowed in prolog."

○Biasanya disebabkan oleh beberapa faktor seperti :

a. Template rusak
b. Masalah pada koneksi internet

Kalau Terjadi seperti ini ulangi proses unggah sekali lagi. Tetapi Kalau masih gagal ulangi dari proses awal (Cari template baru karena kemungkinan template yang telah anda download ada masalah atau Filenya telah rusak) .

SELAMAT MENCOBA !!

Which of your Favorite football team in Europe?

Twitter Delicious Facebook Digg Stumbleupon Favorites More