Ariefinity Blog: Tutorial Blog

Membuat Related Post Dengan Linkwithin

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcu9ZJ_rB5MsVWAZ7Ny4uJBlRJQliNytWJT9F784-xO5udZ3aTDKHOuZVDGlFdi5GIoFLytoQ5NcxK5AjcwnLiKWvJp2mI8Ku23BVZq0df7C_oXjTO5VcC3NPQTvtQk8AHGK8RwJ6hg8z1/s1600/linkwithin.jpg

Membuat Related Post Dengan Linkwithin - Pada kali ini saya akan memposting tentang cara Membuat Related Post Dengan Linkwithin . Apa itu linkwithin ? linkwithin adalah semacam related post dengan gambar , jadi bagi sobat yang belum memasang related post bisa menggunakan linkwithin
Langkah-langkah pemasangan linkwithin

Buka situs linkwithin Disini
Isi Email , blog link , platform dan widhth (jumlah post yang ingin di tampilkan).
Jika sudah terisi semua kolom klik Get Widget!
Lalu anda akan di bawa ke halaman selanjutanya , dan instal widget
Sesudah di instal,drag widget tersebut ke bawah postingan dan jadilah related post bergambar :D

Semoga postingan tentang Membuat Related Post Dengan Linkwithin ini bermanfaat :D

»» Baca Selengkapnya

Membuat Buku Tamu Tersembunyi

Mungkin kamu bingung untuk menaruh buku tamu kamu dimana , saran saya buat saja buku tamu tersembunyi .Ini berguna supaya blogmu tidak memuat banyak tempat .

Bagi yang belum membuat buku tamu bisa lihat panduan DI SINI

Jika sudah membuat buku tamu ayo kita lihat caranya di bawah ini :

Langkah-Langkah :

1.Login blog anda www.blogger.com

2.Pilih Layout / Rancangan

3.Add gadget / Tambah gadget

4.Pilih HTML / Java script

5.Masukan kode di bawah ini

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipJLYdYzGv8h7TJLcFzo37aWZSSXjv0f2ucwxrE-tCBvKvmdJDZOdGROmBm0LAQ4czNhtAw-iPO0ip2Xnsg74NUuvDWIKve0MuqRBj9NB7QzzXFqYJbVLEoI8EJBXz_KOaedrx2_pnNuZt/') no-repeat;
}
.gbcontent{float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()">   </div>

<div class="gbcontent">

<!-- Ganti ini dengan kode buku tamu kamu -->

<br/>
Mau punya buku tamu seperti ini?<br/>
Klik di
<a href="http://ariefinity.blogspot.com/2011/10/membuat-buku-tamu-tersembunyi.html">sini (Tutorial blog)
</a>

<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>

</div>

</div>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

6.Ganti tulisan  dengan kode shoutbox / cbox anda , contoh cbox saya

<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="500" height="425" src="http://www3.cbox.ws/box/?boxid=3318490&amp;boxtag=w8n72p&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain3-3318490" style="border:#000000 1px solid;" id="cboxmain3-3318490"></iframe></div>
<div><iframe frameborder="0" width="500" height="75" src="http://www3.cbox.ws/box/?boxid=3318490&amp;boxtag=w8n72p&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform3-3318490" style="border:#000000 1px solid;border-top:0px" id="cboxform3-3318490"></iframe></div>
</div>
<!-- END CBOX -->

7.Dan ganti tulisan 50px dengan ukuran sesuka anda , semakin kecil angka yang anda ganti semakin ke atas buku tamu tersebut.

»» Baca Selengkapnya

Membuat Judul Blog Berjalan

Banyak cara membuat blog menarik , salah satunya adalah dengan Membuat Judul Blog Berjalan pada title browser .
langkah-langkahnya.

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Edit HTML.

3. Back-up template dengan mengeklik Download Template Lengkap untuk berjaga jaga jika ada kesalahan
4. Cari tag <head>.

5. Copy kode di bawah ini dan paste-kan di bawah tag <head> tersebut.

<script language='JavaScript'>
var txt=" <data:blog.pageTitle/> ";
var kecepatan=200;
var segarkan=null;
function bergerak() { document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
segarkan=setTimeout("bergerak()",kecepatan);}
bergerak();
</script>

6. Untuk mengubah kecepatan silakan ganti angka 200 pada var kecepatan=200; semakin rendah nilainya semakin cepat gerakannya.

7. Klik tombol SIMPAN TEMPLATE.

»» Baca Selengkapnya

Membuat Tulisan Berkedip (Blink)

Pada kali ini saya akan memposting tentang cara membuat tulisan berkedip (blink) , dengan blink ini orang akan tertarik untuk mengklik tulisan tersebut.

Belajar Blog

Jika sobat ingin silahkan lihat tutorial di bawah ;

Cara Membuat Tulisan Berkedip-kedip
1. Login ke blogger
2. Pilih Tata Letak kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode-kode berikut ini

<blink><b>Belajar Blog</b></blink>

5.Ganti Belajar Blog dengan tulisan yang sobat inginkan

Jika ingin memakai link seperti ini

Belajar blog

1. Login ke blogger
2. Pilih Tata Letak kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode-kode berikut ini

<blink><a href="http://ariefinity.blogspot.com/"><b>Belajar blog </b></a></blink>

5.Ganti tulisan belajar blog dengan tulisan yang sobat inginkan & ganti http://ariefinity.blogspot.com/ dengan url blog sobat

»» Baca Selengkapnya

Cara Membuat Reply Di Komentar

Pada kali ini saya akan memposting tentang Cara membuat reply komentar di blog Jika anda minat silahkan liat tutorial di bawah...

1. Login ke akun Blogger anda. www.blogger.com
2. Klik Rancangan, kemudian pilih Edit HTML.
3. Centang Expand Template Widget (saya anjurkan download dahulu template anda).
4. Cari kode seperti dibawah ini:

<b:include data='comment' name='commentDeleteIcon'/>

5.Jika sudah ketemu kode diatas maka pastekan kode di bawah ini persis berada di bawahnya

<a expr:href='"https://www.blogger.com/comment.g?blogID=Blog ID anda&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=400,height=450"); return false;'><img alt='Reply To This Comment' src='Url Image Reply Anda'/></a>

6. Klik Simpan Template.

Blog ID anda → Silahkan ganti dengan Blog ID (angka id blog) anda.
Url Image Reply Anda → Silahkan ganti dengan Url gambar reply anda.

NB:Untuk mengetahui ID blog anda , anda bisa mengetahuinya dengan Dasbor ->Posting -> Entri Baru

contoh

Ganti nomor dalam kotak merah itu dengan ID blog anda.

Selesai deh......

»» Baca Selengkapnya

Membuat Kumpulan Banner / Link Naik Dari Bawah Ke Atas

Saya berikan cara supaya banner bergerak naik dari bawah ke atas

Langkah-langkah :
1.Login blogger
2.Masuk ke Rancangan -> Elemen laman -> Tambah gadget -> Pilih HTML / Javascript

3.Lalu masukan :
<em><marquee direction="up" onmouseover="this.stop()" width="100&percnt;" onmouseout="this.start()" scrollamount="2" height="300px" align="center"> Link Bannernya </marquee></em>

4.Ganti alamat url yang berwarna Merah dengan Link / Banner yang akan di Masukkin dan untuk yang berwarna Biru (Height = Tinggi , Width = Lebar) diganti dengan Sesuai Keinginan Anda.

»» Baca Selengkapnya

Cara Menampilkan Artikel Hanya Judul Di Homepage

Pada kali ini saya akan memberi tahu cara menampilkan artikel hanya judul di home page , lihat contoh gambar sebelah kiri.

Apa kegunaan hanya menampilkan judulnya saja ?
Kegunaannya adalah dapat menghemat tempat dan mempercepat loading blog anda..

Langkah-langkah

Login dengan Account blogger anda
klik menu Rancangan
Masik ke menu Edit HTML
untuk berjaga-jaga sebaiknya anda klik Download Template Lengkap
Setelah itu Carilah kode ]]></b:skin> (Gunakan CTRL + F)
Copy kan Kode berikut ini , dan Simpan kode ini tepat di bawah ]]></b:skin>

<style type='text/css'>
     <b:if cond='data:blog.pageType != &quot;item&quot;'>
     <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
     .post-body{display:none;}
     </b:if>
     </b:if>

</style>

dan lihat hasilnya tampilan home blog anda menjadi simple..

»» Baca Selengkapnya

Cara Membuat Related Post Pada Blogger

Related post adalah suatu daftar artikel terkait pada blog , misal kita menulis postingan dengan label Tips , maka related post pun akan menampilkan artikel dengan label tips...

Ok tanpa panjang lebar saya akan memberi tahu cara-cara nya / langkah-langkah..

Langkah-langkah

1. Silahkan anda login ke account blogger anda
2. Masuk ke MENU Layout / Rancangan => Edit HTML
3. Jangan lupa 'Download Template Lengakap' untuk jaga-jaga bila template tidak sesuai
4. Centang kotak Expand Widgets Template
5. Cari kode ini <data:post.body/>
6. Setelah ketemu silah anda copy script dibawah ini tepat di bawah kode <data:post.body/>

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

<div class='widget-content'>
<h3>Related Post</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>

var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;

function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
a.href = alturl;

if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k<20; k++) label = label.replace("%20", " ");
var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('data2007').appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}

var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = "<data:label.name/>";

var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>

</div>
</b:if>

7. Simpan template

NB: untuk tulisan yang di beri warna Related Post dapat anda ubah dengan tulisan yang anda suka misal :
Artikel terkait dll.

Begitulah cara membuat related post semoga bermanfaat ^_^

»» Baca Selengkapnya

Cara Membuat Widget Sharing is sexy pada Artikel blog

Apa itu sharing is sexy ?
sharing is sexy adalah suatu widget untuk menshare artikel blog tersebut pada suatu situs jejaring sosial atau situs lain.

Langkah-langkah pemasangan :
1. Login ke blogger

2. Klik Rancangan/Layout

3. Klik Edit HTML

4. Backup dulu sebelum melakukan editting template mengantisipasi jika terjadi kesalahan dengan klik

Download Template Lengkap.

5. Centang kotak Expand Widget Template.

6. Carilah kode ]]></b:skin> Untuk memudahkan tekan ctrl+F/ F3, kemudian copy kode di bawah ini persis

setelah kode ]]></b:skin>

<style type='text/css'>
div.sexy-bookmarks { height:54px; background:url(http://lh5.ggpht.com/_7Y9pl24WpQY/TXarM4d7_uI/AAAAAAAAE4c/1SvA_kEmBDQ/sharing_thumb%5B3%5D.png) no-repeat left bottom;position:relative; width:540px }
div.sexy-bookmarks span.sexy-rightside { width:17px; height:54px; background:url(http://lh5.ggpht.com/_7Y9pl24WpQY/TXarM4d7_uI/AAAAAAAAE4c/1SvA_kEmBDQ/sharing_thumb%5B3%5D.png) no-repeat right bottom; position:absolute; right:-17px }
div.sexy-bookmarks ul.socials { margin:0 !important;padding:0 !important; position:absolute; bottom:0;left:10px }
div.sexy-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.sexy-bookmarks ul.socials a { display:block !important; width:48px !important; height:29px !important;f ont-size:0 !important; color:transparent !important}
.sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover { background:url(http://lh5.ggpht.com/_7Y9pl24WpQY/TXarI2MridI/AAAAAAAAE4U/Qspdg7GUj5g/sexy_thumb%5B3%5D.png) no-repeat !important }
.sexy-furl { background-position:-300px top !important }
.sexy-furl:hover { background-position:-300px bottom !important }
.sexy-digg { background-position:-500px top !important }
.sexy-digg:hover { background-position:-500px bottom !important }
.sexy-reddit { background-position:-100px top !important }
.sexy-reddit:hover { background-position:-100px bottom !important }
.sexy-stumble { background-position:-50px top !important }
.sexy-stumble:hover { background-position:-50px bottom !important }
.sexy-delicious { background-position:left top !important }
.sexy-delicious:hover { background-position:left bottom !important }
.sexy-yahoo { background-position:-650px top !important }
.sexy-yahoo:hover { background-position:-650px bottom !important }
.sexy-blinklist { background-position:-600px top !important }
.sexy-blinklist:hover { background-position:-600px bottom !important }
.sexy-technorati { background-position:-700px top !important }
.sexy-technorati:hover { background-position:-700px bottom !important }
.sexy-myspace { background-position:-200px top !important }
.sexy-myspace:hover { background-position:-200px bottom !important }
.sexy-twitter { background-position:-350px top !important }
.sexy-twitter:hover { background-position:-350px bottom !important }
.sexy-facebook { background-position:-450px top !important }
.sexy-facebook:hover { background-position:-450px bottom !important }
.sexy-mixx { background-position:-250px top !important }
.sexy-mixx:hover { background-position:-250px bottom !important }
.sexy-script-style { background-position:-400px top !important }
.sexy-script-style:hover { background-position:-400px bottom !important }
.sexy-designfloat { background-position:-550px top !important }
.sexy-designfloat:hover { background-position:-550px bottom !important }
.sexy-syndicate { background-position:-150px top !important }
.sexy-syndicate:hover { background-position:-150px bottom !important }
.sexy-email { background-position:-753px top !important }
.sexy-email:hover { background-position:-753px bottom !important }
</style>

6.Kemudian sobat cari kode <data:post.body/> letakkan kode dibawah ini dibawah kode yang sobat temukan. Kalau template sobat sudah mempunyai fungsi read more letakkan kode dibawah ini , dibawah kode <data:post.body/> yang pertama.

<div class='sexy-bookmarks'>
<ul class='socials'>
<li class='sexy-delicious'><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-digg'><a expr:href='" http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-technorati'><a expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-reddit'><a expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-stumble'><a expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-designfloat'><a expr:href='"http://www.designfloat.com/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-facebook'><a expr:href='" http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-twitter'><a expr:href='" http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-furl'><a expr:href='" http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-syndicate'><a href='http://feeds2.feedburner.com/arief' title='Subscribe to RSS'/></li>
<li class='sexy-email'><a expr:href='" mailto:?subject=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
</ul>
<span class='sexy-rightside'/></div>

ganti tulisan merah arief dengan feedburner milik sobat , jika belum punya silahkan daftar di http://feeds.feedburner.com/

Selamat mencoba

»» Baca Selengkapnya

Cara Mengganti Favicon Blogger

Cara Mengganti Favicon Blogger - Mungkin sebagian banyak orang sudah mengetahui cara mengganti favicon , tapi saya akan share cara nya untuk yang belum tau cara mengganti fav icon silahkan lihat di bawah :D

* Login ke akun Blogger Anda,
* Lalu, Klik Tab Rancangan > Elemen laman > Edit HTML,
* Dan pilih Edit HTML,
* Cari kode dibawah ini

<title><data:blog.pageTitle/></title>

* Selanjutnya copy kode di bawah ini

<link href='url-gambar' rel='shortcut icon'/>

Ganti kode url-gambar dengan alamat gambar sobat

* Pastekan kode diatas tepat di atas kode tadi maka jadi seperti ini

<link href='url-gambar' rel='shortcut icon'/>
<title><data:blog.pageTitle/></title>

Kalau gambarnya di buat sendiri, saya sarankan anda agar meng-upload gambar tersebut dahulu ke site
penyedia upload gambar seperti imageshack , photobucket , dll
* Gambar harus berukuran 16x16.
* Lalu save template.

NB: Bila anda tidak punya gambar bisa cari di >>Disini<<
Atau bila anda ingin buat favicon klik >>Disini<<
sekian tutorial tentang Cara Mengganti Favicon Blogger

»» Baca Selengkapnya

Cara mengganti gambar cursor mouse di blogger

Semua pasti ingin tampilan blognya bagus dan menarik , mengganti cursor adalah cara salah satu cara supaya blog anda menarik.
Untuk melihat demo cursor klik -> demo cursor

Di bawah ini adalah langkah-langkah untuk mengganti cursor.

Pertama login ke blogger account > Dashboard >Rancangan> Edit HTML, dan cari kode dibawah ini dengan bantuan CTRL + F atau F3

]]></b:skin>

Selanjutnya sisipkan kode berikut ini diatas kode ]]></b:skin> tadi

body, a, a:hover {cursor: url(Cursor-Url), progress;}

Keterangan : Text yang berwarna merah itu adalah URL gambar yang ingin sobat pakai sebagai cursor.

Ini contoh script :

body, a, a:hover {cursor: url(http://cursors3.totallyfreecursors.com/thumbnails/apple-tmani.gif), progress;}

Mudah kan....
NB: Jika anda tidak punya bahan untuk cursornya , masuk ke -> >> Sini << Disitu tersedia ribuan cursor

»» Baca Selengkapnya

Membuat navigasi breadcrumb di blogger

Membuat navigasi breadcrumb di blogger - Apa itu breadcrumb ?
Breadcrumb merupakan salah satu plugin milik Wordpress yang berfungsi untuk memudahkan pembaca dalam menelusuri halaman blog. Jadi ibarat peta atau sitemap dalam blog.

Plugin ini biasanya diletakkan diatas halaman posting. Contoh tampilannya seperti di bawah ini:

Breadcrumb dapat memudahkan pembaca dalam mengetahui lokasi halaman yang sedang ditelusuri , plugin ini juga dapat mengoptimasi halaman blog di search engine (SEO).

langkah-langkah berikut untuk memasang navigasi breadcrumb:
1. Buka Blogger. Masuk ke menu Rancangan-> Edit HTML

2. Beri centang pada 'Expand Widget Templates'.

3. Setelah itu, cari kode <b:if cond='data:post.title'>

4. Letakkan kode berikut dibawah <b:if cond='data:post.title'>

<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumb'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> »
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
»
</b:if>
<data:post.title/>
</div>
</b:if>

5. Selanjutnya cari kode ]]></b:skin>

6. Letakkan kode css berikut diatasnya

.breadcrumb {
padding:5px 5px 5px 0px;
margin: 0px 0px 10px 0px;
font-size:90%;
line-height: 1.2em;
border-bottom:3px double #e6e4e3;
}

7. Lalu simpan template dan lihat hasilnya :D

»» Baca Selengkapnya

Cara membuat spoiler di blog

Apa itu spoiler ...
Spoiler merupakan suatu teknik untuk menyembunyikan teks yang panjang, gambar, atau video.

Spoiler dapat pula kita terapkan dalam membuat suatu artikel di Blogger. Dengan membuat spoiler ini kita dapat menghemat tempat atau ruang di halaman posting.

Untuk membuat spoiler di posting, Anda cukup menyalin kode script di bawah ini lalu menempelkannya di menu Edit HTML.

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;">
<b>Spoiler</b>: <input 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 = 'tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'buka'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 44px;" type="button" value="buka" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">

Taruh kode anda di sini

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

Untuk tulisan Spoiler merupakan judul spoiler, Anda dapat menggantinya sesuai keinginan.
Tulisan Buka dan Tutup dapat diubah sesuai keinginan Anda.
width: 44px; menunjukkan lebar spoiler.
font-size: 11px; menunjukkan ukuran huruf dalam spoiler.
Ganti tulisan Taruh kode anda di sini dengan konten yang ingin Anda masukkan ke spoiler.

Contoh di bawah adalah memakai script yang diatas

Spoiler:

Kalau belum mengerti silahkan koment di bawah...

»» Baca Selengkapnya

Membuat widget burung berterbangan di blog

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUOkqpw7-vhE2Ko3zsWXZdeX_8eoQat19pAKGhPrhNayOZ9DHnrbpDcvRfYVEBL_zbqvxoVteQEtJ95P_Wg2DYeJTlCiyM_ch1Aa6FWgAIomy2nQepNxZwx1lHlmYHPcnU407Jg-eGSh4/s1600/twitter.jpg

Haii para pembaca saya punya tips membuat widget burung berterbangan di blog...
Keren Kan? Gimana cara membuatnya? Gampang loo..

Login Ke Blogger >> Rancangan >> Tambah Widget >> HTML/Javascript
Lalu masukkan Kode ini :

<script type="text/javascript" src="http://techgyo.com/wp-content/FlyingTwitbird/tripleflap.js"></script>

<script type="text/javascript">

var birdSprite="http://techgyo.com/wp-content/FlyingTwitbird/birdsprite.png";

var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span");

var twitterAccount = "http://twitter.com/arief";var tweetThisText = "Twitter - techGyo http://www.techgyo.com/";tripleflapInit();
</script>
<a id="theBird" href="http://twitter.com/arief" target="_blank" style="display: block; position: absolute; width: 64px; height: 64px; background-image: url(http://techgyo.com/wp-content/FlyingTwitbird/birdsprite.png); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; z-index: 947; left: 0px; top: 587px; background-position: 0px 0px; background-repeat: no-repeat no-repeat; "></a>
<a id="theBirdLtweet" href="http://twitter.com/home?status=Twitter%20-%20techgyo%20http%3A//www.techgyo.com/" target="_blank" title="tweet this" style="position: absolute; background-image: url(http://techgyo.com/wp-content/FlyingTwitbird/birdsprite.png); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; width: 58px; height: 30px; z-index: 951; left: 49px; top: 583px; display: none; opacity: 0; background-position: -64px 0px; background-repeat: no-repeat no-repeat; "></a>

<a id="theBirdLfollow" href="http://twitter.com/techgyo" target="_blank" title="follow me" style="position: absolute; background-image: url(http://techgyo.com/wp-content/FlyingTwitbird/birdsprite.png); background-attachment: initial; background-origin: initial; background-clip: initial; background-color: transparent; width: 58px; height: 20px; z-index: 952; left: 54px; top: 613px; display: none; opacity: 0; background-position: -64px -30px; background-repeat: no-repeat no-repeat; "></a>

Ganti tulisan Biru-Biru (arief) menjadi ID twitter anda
simpan deh..

»» Baca Selengkapnya

Memasang musik di blog

Bagi anda yang penggemar musik. Memutar lagu melalui HP, Mp3 player ataupun komputer mungkin sudah biasa. Tetapi bagaimana jika memutar musik melalui blog?

Dengan memasang musik player di blog maka tidak hanya anda tetapi pengunjung blog anda juga bisa menikmati lagu kesayangan anda. Sehingga cara ini sangat cocok bagi anda yang blognya berisi tentang musik atau bagi anda yang ingin mempromosikan lagu pribadi.

Ada banyak layanan seperti ini yang tersedia di internet. Dari sekian banyak layanan yang ada. Menurut saya ada 2 musik player yang cukup bagus. Yaitu Musik-live dan eSnips. Mengapa saya merekomendasikan 2 musik player? Karena kedua ini memiliki kelebihan dan kekurangannya masing2. Sehingga silahkan anda tentukan sendiri mana yang lebih bagus.

1. Musik-Live

Kelebihan:
- Lagu sudah tersedia, tinggal pasang
- Banyak model skin yang bisa anda pilih

Kelemahan:
- Tidak bisa upload lagu sendiri

2. eSnips

Kelebihan:
- Bisa upload lagu dari komputer
- Tersedia lagu yang bisa anda putar

Kelemahan:
- Hanya 2 model skin yang bisa dipilih
- Tampilannya kurang menarik

Nah itulah kelebihan dan kelemahannya masing-masing. Silahkan anda tentukan mana yang lebih cocok dengan kebutuhan anda. Agar lebih jelas anda bisa lihat demonya disini.

Ok kalau sudah berikut adalah langkah-langkah pemasangannya:

A. Musik-Livet.Net

1. Kunjungi http://musik-live.net/ lalu klik Skin Mp3 Player
2. Pilih tampilan player yang anda inginkan. Untuk melihat tampilannya klik Preview Skin
3. Copy kodenya lalu buka blogger. Klik menu Layout -> Page Elements
4. Pastekan ke menu HTML/ Javascript
5. Selesai.

Diatas adalah cara memasang musik player dengan lagu yang telah disediakan. Jika anda ingin memilih sendiri lagunya. Berikut caranya:

1. Pada halaman Musik-Live, cari lagu favorit anda dengan kotak pencari.
2. Lalu klik Play & Embed code untuk menampilkan kodenya
3. Copy kodenya lalu paste ke menu HTML/ Javascript blogger anda. Selesai

Catatan:
Cara ini hanya bisa untuk memutar 1 lagu saja. Jika anda ingin memutar banyak lagu maka gunakan eSnips.

B. eSnips

1. Kunjugi http://www.esnips.com/. Untuk bisa memanfaatkan fasilitasnya anda harus signup terlebih dahulu. Jika sudah, sign-in ke akunnya.

2. Klik Upload Files lalu klik Select Files

3. Pilih lagu yang mau anda putar lalu pilih folder dimana anda mau memyimpan lagunya. Pastikan folder yang anda pilih adalah bersifat Public. Karena kalau Private anda tidak bisa menambahkan lagunya kedalam playlist.

4. Jika sudah klik Upload Now

5. Tunggu hingga proses upload selesai.

6. Jika sudah klik menu Folder. Pilih folder dimana anda menyimpan menyimpan lagunya

7. Pilih lagu-lagu yang ingin anda pasang dengan cara klik Add to quicklist
esnips add to quicklist
8. Jika sudah, scroll ke bagian atas halaman lalu klik Create playlist widgets

esnips create playlist
9. Pilih skin yang anda inginkan. Lalu copy kodenya yang ada pada kotak.

esnips widget

10. Buka blogger. Paste kodenya pada menu HTML/ Javascript lalu klik Save

11. Selesai. Silahkan lihat hasilnya.

Jika ukurannya tidak pas anda bisa mengatur ukurannya dengan mengedit nilai width-nya pada kodenya masing-masing. Selamat mencoba..

»» Baca Selengkapnya

Cara Menambah Emoticon di Cbox

Kali ini saya akan menjelaskan cara untuk menambah emoticon di cbox

Langkah-langkah :

Langkah 1. Carilah Situs yang menyediakan Emoticon Gallery
Pertama kalian cari situs yang menyediakan emoticon, yang bisa kalian pilih. contohnya untuk emoticon kaskus bisa di lihat disini http://www.kaskus.us/misc.php?do=getsmilies&editorid=vB_Editor_001

Langkah 2. Login Ke Cbox
Lalu Login Ke Cbox anda dan Modifikasi Emoticon dengan cara Klik Options lalu Smile

Langkah 3. Delete Semua Emoticon Default
Delete semua emoticon yang sudah ada, sampai pada gambarnya bertanda X

Langkah 4. Ganti Code
Kemudian ganti kode (Code) dengan beberapa kode yang biasa digunakan, contoh bisa lihat di bawah ini:

:), :D, =)), sobat, blogwalking/jalan-jalan, berkunjung, baca-baca, award, ok, :P, cool
Selanjutnya bisa teman-teman modifikasi sendiri, jika lupa kodenya bisa teman-teman lihat Yahoo Messenger Smile Icons. Untuk lebih jelasnya bisa lihat pict di bawah ini (klik gambar untuk memperbesar),

Selesai deh , klo ingin bertanya silahkan post di komentar

»» Baca Selengkapnya

Membuat cursor bertabur bintang

Membuat cursor bertabur bintang - Cursor bertabur bintang adalah salah satu cara untuk mempercantik blog anda , saat anda gerakan cursor , cursor tersebut akan mengeluarkan bintang...

Jika anda tertarik ikuti langkah - langkah di bawah ini

Bintang biru

<script src="http://denisahlan.netau.net/bintang.biru.js" type="text/javascript"></script>

Bintang hijau

<script src="http://denisahlan.netau.net/bintang.hijau.js" type="text/javascript"></script>

Bintang merah

<script src="http://denisahlan.netau.net/bintang.merah.js" type="text/javascript"></script>

Bintang putih

<script src="http://denisahlan.netau.net/bintang.putih.js" type="text/javascript"></script>

Bintang ungu

<script src="http://denisahlan.netau.net/bintang.ungu.js" type="text/javascript"></script>

Jika masih belum paham silahkan bertanya di komentar

»» Baca Selengkapnya

Cara membuat alert message di blog

Alert Massage atau peringatan pesan, berguna untuk memberikan sambutan di blog kita, untuk para pengunjung blog. Pesan tersebut berupa pesan singkat seperti : "Selamat Datang Di Blog kami, jangan lupa komentarnya", atau Terima kasih telah berkunjung salam. Atau bisa juga membuat pesan yang sesuai dengan kemauan kamu sendiri.

Buat sobat yan ingin menambahkan Alert Massssage ini di blognya. Ternyata sangat mudah hanya dengan menambahkan sedikit kode, maka kotak kecil pesan ini bisa langsung "nongol" secara otomatis. Oke langsung saja kita buat.

Login ke Dasbor blogger.
KLIK Rancangan.
Kemudian KLIK Edit html.
Beri tanda centang pada Expand Template Widget.
Cari kode </head> Note: Gunakan F3 atau Ctrl+F untuk mempermudah pencarian.

Terakhir copy-pastekan kode berikut, tepat sebelum kode </head>

<script language='JavaScript'>alert("Pesan Yang Ingin Kamu Tampilkan");</script>

Ganti kata pesan yang ingin kamu tampilkan dengan pesan milik kamu

dan selesai deh selamat mencoba

»» Baca Selengkapnya

Cara mendisable klik kanan pada blog

Cara mendisable klik kanan pada blog - Mungkin anda sangat kesal jika postingan anda di copy dan tidak memakai sumber asalnya...
Saya mempunyai trik supaya blog / postingan anda tidak bisa di copy , simak di bawah..

1. Masuk ke Blog anda
2. Klik Tata Letak / Rancangan
3. Klik Tambah Gadget
4. Tambah gadget HTML/JavaScript
5. Pastekan script di bawah ini ke dalam kolom HTML/Javascript Yang tadi anda buat

<script>
var message="Isi dengan pesan yang anda mau;
///////////////////////////////////
function clickIE4(){if (event.button==2){alert(message);return false;}}
function clickNS4(e){if (document.layers||document.getElementById&&!document.all){if (e.which==2||e.which==3){alert(message);return false;}}}
if (document.layers){document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS4;}
else if (document.all&&!document.getElementById){document.onmousedown=clickIE4;}
document.oncontextmenu=new Function("alert(message);return false")
</script>

6. Silahkan ganti script warna merah dengan pesan yang anda mau
7. Klik Simpan
8. Selesai

Selamat mencoba sekian dari Cara mendisable klik kanan pada blog , semoga beruntung
NB:Jika anda tidak paham silahkan bertanya di kolom komentar

»» Baca Selengkapnya

Cara membuat READ MORE pada blog

Cara membuat READ MORE pada blog - Sebelumnya Blogger masih pake cara lama untuk untuk membuat Read More blog mereka, dengan cara menambahkan tag <span id=”fullpost”> dan </span> setiap kali kita posting di blog yang dinilai Blogger terlalu rumit dengan segala keterbatasanya. Berikut ini cara yang mudah untuk membuat Read More Otomatis dengan Thumbnail di Blogger seperti halnya yang saya gunakan pada Blog Sederhana Saya ini.

Cara Membuat Read More Otomatis dengan Thumbnail di Blogger adalah sebagai berikut :

Silahkan Login dan masuk

lalu klik Rancangan dan klik Edit HTML

Centang Expand Template Widget

Untuk mempermudah pencarian kode HTML nya anda tekan aja ( CTRL + F )

Cari kode </head> dan kalau sudah ketemu

Tambahkan kode dibawah ini tepat nya diatas kode </head> :

<script type='text/javascript'>
      var thumbnail_mode = "float" ;
      summary_noimg = 250;
      summary_img = 250;
      img_thumb_height = 120;
      img_thumb_width = 120;
      </script>

      <script type='text/javascript'>
      //<![CDATA[
      /******************************************
      Auto-readmore link script, version 2.0 (for blogspot)

      (C)2008 by Fais

      visit http://en.vietwebguide.com to get more cool hacks
      ********************************************/
      function removeHtmlTag(strx,chop){
      if(strx.indexOf("<")!=-1)
      {
      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);
      }
      }
      strx = s.join("");
      }
      chop = (chop < strx.length-1) ? chop : strx.length-2;
      while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
      strx = strx.substring(0,chop-1);
      return strx+'...';
      }

      function createSummaryAndThumb(pID){
      var div = document.getElementById(pID);
      var imgtag = "";
      var img = div.getElementsByTagName("img");
      var summ = summary_noimg;
      if(img.length>=1) {
      imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
      summ = summary_img;
      }

      var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
      div.innerHTML = summary;
      }
      //]]>
      </script>

Jika ingin merubah ukuran read more nya anda ubah aja di bagian bagian kode di bawah ini Ubah angka nya sesuai kebutuhan :

      summary_noimg = 430; adalah tinggi potongan artikel tanpa gambar
      summary_img = 340; adalah tinggi potongan artikel dengan gambar
      img_thumb_height = 100; adalah ukuran tinggi thumbnail
      img_thumb_width = 120; adalah ukuran lebar thumbnail

langkah Selanjutnya cari kode <data:post.body/> lalu ganti tag <data:post.body/> tersebut dengan kode script di bawah ini :

<b:if cond='data:blog.pageType != "item"'>
      <div style=' text-align: justify;' expr:id='"summary" + data:post.id'><data:post.body/></div>
      <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
      <span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
      </b:if>
      <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Kata READ MORE anda ubah saja sesuai dengan kebutuhan kita kayak kata selanjutnya,seterus nya,atau yang lain nya.

Tahap terakhir setelah selesai pengeditan simpan Templete dan lihat aja hasil nya.

»» Baca Selengkapnya

Subscribe to: Posts (Atom)