\m/ Selamat datang di Blog KUALA TUNGKAL UNDERGROUND™ yang sederhana ini... Silahkan Browing disini... Jangan lupa isi BUKU TAMU... \m/

Rabu, 06 Februari 2013

KTU | Custom 404 error not found v2


costom 404 error not found, Dofollow blog, page rank 1, SEO, valid HTML5, blogger trick, software, muslim content, DeezClan
rilis lagi nih V2 nya. "costom 404 error not found v2"

kelebihan dari versi terdahulu apa??
-lebih cepet load nya

-code:
<script type="text/javascript">
var BgI404='http://karya-ku.googlecode.com/files/404.png'; //gambar pesan error
var BgC404='#333333'; //warna background bisa di cari di sini:http://www.2createawebsite.com/build/hex-colors.html
var urlRD404='http://belajarislamituindah.blogspot.com/'; //halaman utama blog kamu
</script>
<script type='text/javascript' src='http://code.jquery.com/jquery.min.js'></script>
<script type='text/javascript' src='http://karya-ku.googlecode.com/files/costum404v2.bi3'></script><div id='costum404'></div>
*note: untuk teks yang berwarna ungu kalo udah ada gx usah

-cara pasang:
1. Setelan
2. Preferensi penelusuran
3. Pesan Khusus untuk Laman Tidak Ditemukan -> edit -> paste kode di atas -> simpan perubahan
costom 404 error not found tutorial, Dofollow blog, page rank 1, SEO, valid HTML5, blogger trick, software, muslim content, DeezClan

coba tes http://belajarislamituindah.blogspot.com/Ihsan-Ganteng-Banget

semoga sukses ^_^ dan jangan lupa plusone yaa...
jangan lupa plusone ya... dan kalau ada yg gx mengerti komen aja

doakan saya biar cepat sembuh ya sobat2
*jangan seperti leecher yg bisanya mengambil tanpa komen*
-Baca Kebijakan Privasi jika anda ingin mengambil konten dari blog ini :http://belajarislamituindah.blogspot.com/p/privacy-policy.html
-Read Privacy Policy if you want copy content from this blog: http://belajarislamituindah.blogspot.com/p/privacy-policy.html

#Sumber nya, ISLAMITUINDAH


Selasa, 11 Desember 2012

KTU | Membuat Related Post Dengan Thumbnail


post
Hay !
Udah lama Gk ketemu Nih :D heheehe.. Maaf Ya Jarang Posting :D Tugas Sekolah Numpuk Hampir Segunung T_T XD Oke Lah Postingan Kita Kali Ini Tentang Tips And Trick Blogger :) Yang Berjudul, 'Tips Membuat Related Post Dengan Thumbnail' sebenar nya Artikel Ini Memang Sudah Lama Dan Sudah Banyak Di kenal, Saya Sengaja Memposting Ulang Agr Sobat Blogger Tau ! :D Oke Langsung Ke Tuturial nya :)
  • Login Blogger (klo gk punya blog gmna cara bikin nya --")
  • Masuk Ke Menu Template
  • Centang "Expand Template Widget"
  • Lalu Cari Kode </head> dan letakkan CSS di bawah ini Di atas Kode Tadi
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#related-posts { float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px; } #related-posts h2{ font-size: 20px; font-weight: bold; color: white; font-family:&#39;Baumans&#39;, sans-serif; margin-bottom: 0.75em; margin-top: 0em;margin-left:63px; padding-top: 0em; } #related-posts a{ color:white; } #related-posts a:hover{ color:#1d2124; } #related-posts a:hover { background-color:#1d2124; }
</style>
</b:if>
Selanjut Nya Kamu Atur Sendiri CSS nya :P

Dan Ini Script nya Letakkan Juga Di atas Kode </Head> tadi

<script type='text/javascript'>/*<![CDATA[*/var defaultnoimage=&quot;http:var maxresults=7;var splittercolor=&quot;#0000&quot;;var relatedpoststitle=&quot;See More Aritcle&quot;;/*]]>*/</script>
<script src='http://goo.gl/uCDCV' type='text/javascript'/> 

Dan Ini HTML nya Letakkan Di bawah Kode Data:Post.body

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop> <script type='text/javascript'>var currentposturl=&quot;<data:post.url/>&quot;;var maxresults=7;var relatedpoststitle=&quot;See More Article&quot;;removeRelatedDuplicates_thumbs();printRelatedLabels_thumbs();</script> </div><div style='clear:both'/></b:if> 

Selebih Nya Kamu Atur Sendiri :P

Oke Sekian Tutorial Nya :D


Sabtu, 10 November 2012

KTU | Trik Memasang Background Keren Dengan CSS




  Hallo Sobat I-C                                                                                                                                    

Langsung Saja yah.....Pada Kali Ini saya Akan mengajarkan Tentang Cara membuat Background Keren
Dengan Menggnakan CSS Background Ini Di pakai Oleh para seniman Blog loooo Pengen tau Yuk Kita bahas..............................................................................

Caranya :                                                                                                                       
1. Masuk ke Blogger.com.....Nah Disitu kamu akan log In lewat Google Akun
2. Masuk template>Edit Html                                                                         
3. Cari Kode berikut                                                                                      

body{                                                                                 
4. kemudian letakkan Scripth Dibawah Ini Diatas Kode  Tersebut                  
color:#ddd;font-family:Baumans, cursive;font-size:12px;background:url('Ganti Dengan Gambar Url Kamu') repeat scroll top left #0000ff;margin:0 auto;}font-family: 'Baumans', cursive;font-size:12px;background: #383433;background-attachment: fixed;background-size:100%;margin:0 auto;


KETERANGAN!                                                                                          
[-] Untuk Kode Yang berwarnah Merah itu kamu ganti Dengan Url Background Kamu    
[-] Dan Untuk Yang Berwarna Biru!!  Kamu ganti Dengan Warna Warna Kamu Terserah

Untuk CSS Backgroundnya Bisa kamu Lihat Di Bawah Ini..

http://themes.googleusercontent.com/image?id=0BwVBOzw_-hbMNjUwODUzYTgtM2FlMi00NjA0LWE4ZjEtM2VmNzI3NDE4Zjhm

Linknya : http://themes.googleusercontent.com/image?id=0BwVBOzw_-hbMNjUwODUzYTgtM2FlMi00NjA0LWE4ZjEtM2VmNzI3NDE4Zjhm

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSv1a4o6VAxMD7zRvQSGlgSjYNYxc07js8qZmIssi4MEdUPIdwXIq3yFQsZEEbmcDhY4FyWUfdmG5aanWAdHamHjJ8IxOr2cxkSlnkjTaQT7qjAIzIoe59LJXgak300S5vF3VGQSP-yRU/h120/NE-Gen+BackGround.png

Linknya : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSv1a4o6VAxMD7zRvQSGlgSjYNYxc07js8qZmIssi4MEdUPIdwXIq3yFQsZEEbmcDhY4FyWUfdmG5aanWAdHamHjJ8IxOr2cxkSlnkjTaQT7qjAIzIoe59LJXgak300S5vF3VGQSP-yRU/h120/NE-Gen+BackGround.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY8P23KeNw25XqEEBXM0am5N8GIjT1zQCHBnVhLzea1age85LRaBx6Kcip_AbnrQJUOIyMJpFsZNkwBbCBJJk891GHPYVdxQRIJQSuR6zxawnOsa6qowVaENKfs5TTIu5QDCOpbljXqdc/s1600/grid.png'

Linknya : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY8P23KeNw25XqEEBXM0am5N8GIjT1zQCHBnVhLzea1age85LRaBx6Kcip_AbnrQJUOIyMJpFsZNkwBbCBJJk891GHPYVdxQRIJQSuR6zxawnOsa6qowVaENKfs5TTIu5QDCOpbljXqdc/s1600/grid.png

Oke Sobat Gimana Dengan trik Dan tipsnya Mudah Bukan.....
SUMBER


Senin, 30 April 2012

KTU | Membuat Pointer/Cursor di kelilingi 3 warna di blog



1. Login pada blog sobat
2. Rancangan
3. Tambah Gadget
4. Html / Javascript
5. Copy kode di bawah ini dan pasang di blog sobat

<script language="JavaScript" type="text/javascript">
var xCol = "#FF0000";
var yCol = "#FFFF00";
var zCol = "#0000FF";
var n = 6; //number of dots per trail.
var t = 40; //setTimeout speed.
var s = 0.2; //effect speed.
var r,h,w;
var d = document;
var my = 10;
var mx = 10;
var stp = 0;
var evn = 360/3;
var vx = new Array();
var vy = new Array();
var vz = new Array();
var dy = new Array();
var dx = new Array();
var pix = "px";
var strictmod = ((document.compatMode) &&
document.compatMode.indexOf("CSS") != -1);
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var idx = d.getElementsByTagName('div').length;
for (i = 0; i < n; i++)
{
var dims = (i+1)/2;
d.write('<div id="x'+(idx+i)+'" style="position:absolute;'
+'top:0px;left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+xCol+';font-size:'+dims+'px"><\/div>'
+'<div id="y'+(idx+i)+'" style="position:absolute;top:0px;'
+'left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+yCol+';font-size:'+dims+'px"><\/div>'
+'<div id="z'+(idx+i)+'" style="position:absolute;top:0px;'
+'left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+zCol+';font-size:'+dims+'px"><\/div>');
}
if (domWw) r = window;
else
{
if (d.documentElement &&
typeof d.documentElement.clientWidth == "number" &&
d.documentElement.clientWidth != 0)
r = d.documentElement;
else
{
if (d.body && typeof d.body.clientWidth == "number")
r = d.body;
}
}
function winsize()
{
var oh,sy,ow,sx,rh,rw;
if (domWw)
{
if (d.documentElement && d.defaultView &&
typeof d.defaultView.scrollMaxY == "number")
{
oh = d.documentElement.offsetHeight;
sy = d.defaultView.scrollMaxY;
ow = d.documentElement.offsetWidth;
sx = d.defaultView.scrollMaxX;
rh = oh-sy;
rw = ow-sx;
}
else
{
rh = r.innerHeight;
rw = r.innerWidth;
}
h = rh;
w = rw;
}
else
{
h = r.clientHeight;
w = r.clientWidth;
}
}
function scrl(yx)
{
var y,x;
if (domSy)
{
y = r.pageYOffset;
x = r.pageXOffset;
}
else
{
y = r.scrollTop;
x = r.scrollLeft;
}
return (yx == 0)?y:x;
}
function mouse(e)
{
var msy = (domSy)?window.pageYOffset:0;
if (!e) e = window.event;
if (typeof e.pageY == 'number')
{
my = e.pageY - msy + 16;
mx = e.pageX + 6;
}
else
{
my = e.clientY - msy + 16;
mx = e.clientX + 6;
}
if (my > h-65) my = h-65;
if (mx > w-50) mx = w-50;
}
function assgn()
{
for (j = 0; j < 3; j++)
{
dy[j] = my + 50 * Math.cos(stp+j*evn*Math.PI/180) *
Math.sin((stp+j*25)/2) + scrl(0) + pix;
dx[j] = mx + 50 * Math.sin(stp+j*evn*Math.PI/180) *
Math.sin((stp+j*25)/2) * Math.sin(stp/4) + pix;
}
stp+=s;
for (i = 0; i < n; i++)
{
if (i < n-1)
{
vx[i].top = vx[i+1].top; vx[i].left = vx[i+1].left;
vy[i].top = vy[i+1].top; vy[i].left = vy[i+1].left;
vz[i].top = vz[i+1].top; vz[i].left = vz[i+1].left;
}
else
{
vx[i].top = dy[0]; vx[i].left = dx[0];
vy[i].top = dy[1]; vy[i].left = dx[1];
vz[i].top = dy[2]; vz[i].left = dx[2];
}
}
setTimeout(assgn,t);
}
function init()
{
for (i = 0; i < n; i++)
{
vx[i] = document.getElementById("x"+(idx+i)).style;
vy[i] = document.getElementById("y"+(idx+i)).style;
vz[i] = document.getElementById("z"+(idx+i)).style;
}
winsize();
assgn();
}
if (window.addEventListener)
{
window.addEventListener("resize",winsize,false);
window.addEventListener("load",init,false);
document.addEventListener("mousemove",mouse,false);
}
else
if (window.attachEvent)
{
window.attachEvent("onload",init);
document.attachEvent("onmousemove",mouse);
window.attachEvent("onresize",winsize);
}
</script>
6. Kemudian  dan tertawalah, huwaahahahaa XD


Kamis, 26 April 2012

KTU | Trik memasang Avatar penuis blog


Trik Memasang Avatar penulis blog


Trik Memasang Avatar penulis blog,Mungkin sobat sering melihat avatar" atau foto penulis blog yang penulis blognya berbeda,dan mempunyai avatar'a masing" yang berbeda seperti template Anime" orang luar negeri yang tiap design'a menggunakan sistem postingan seperti itu.sebenarnya Ini trik lama dan untuk memasang'a sangat simple,tapi trik saya kali ini agak berbeda dengan yang lain ,karena trik yang saya berikan valid HTML dan penempatan CSS'a yang benar.penggunaan css Inline Styles yang salah contoh'a seperti dibawah ini.



<div style="color=#fff;background:#fff;">...</div>

Sebisa mungkin hindari penggunaan inline style seperti diatas. Lebih baik menggunakan stylesheet bawaan blogger,diantara <b:skin> isi css </b:skin>. cara ini akan sangat memudahkan kamu pada saat mengedit CSS'a.

Untuk mencoba trik ini saya sarankan untuk membackup template kamu agar tidak terjadi hal yang tidak diinginkan.sebenarnya cara'a cukup simple dan sudah umum menurut saya.
Fungsi avatar'a itu sendiri menggunakan tag Conditional data:post.author yang memungkinkan untuk menampilkan konten dari author/penulis tersebut



ok langsung saja,pertama buka blogger=>rancangan=>edit HTML,lalu centang Expand Widget Templates.

Setelah saya coba,ternyata tidak semua template sama,oleh karena itu disini ada 2 cara:
tapi saya sarankan coba yang cara2 ,karena tingkat keberhasilan'a lebih tinggi daripada cara1 :)

Cara 1
kemudian Cari kode HTML seperti dibawah ini
<div class='post hentry uncustomized-post-template'>


#Note bila kamu menemukan kode html yang sama seperti diatas,pastikan dibawah kode html itu ada kode:

<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>


Cara2

Cari kode Html yang mirip" seperti dibawah ini


<b:include name='mobile-nextprev'/>
</b:includable>
<b:includable id='post' var='post'>
<div class='post hentry'>




<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>






Setelah itu,copy paste Kode HTML dibawah ini


<div class='admin'>
<b:if cond='data:post.author == &quot;Johanes djogan&quot;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPam5xJO7Gr6dXxYhsJ-XG-mLwrSTeZGMga46OIz-_PIUdmn4cL3EAq7FKs1hjFGcwlBA5gJm75YvpZJ3_9nXSzJzz-doB5HpdsZKT4UkT-CxenGhP6STRvC3_iu2K7o2xg2Sus_E4udBx/s1600/ad516503a11cd5ca435acc9bb6523536+(1)+copy+copy.png'/></b:if>
</div>


Cara1
copy paste kode html diatas tadi tepat dibawah kode:
(<div class='post hentry uncustomized-post-template'> )

Atau


Cara2
copy paste kode html diatas tadi seperti dibawah ini.

<b:include name='mobile-nextprev'/>
</b:includable>
<b:includable id='post' var='post'>
<div class='post hentry'>

<div class='admin'>
<b:if cond='data:post.author == &quot;Johanes djogan&quot;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPam5xJO7Gr6dXxYhsJ-XG-mLwrSTeZGMga46OIz-_PIUdmn4cL3EAq7FKs1hjFGcwlBA5gJm75YvpZJ3_9nXSzJzz-doB5HpdsZKT4UkT-CxenGhP6STRvC3_iu2K7o2xg2Sus_E4udBx/s1600/ad516503a11cd5ca435acc9bb6523536+(1)+copy+copy.png'/></b:if>
</div>

<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>


Setelah itu,copy paste CSS Dibawah ini,diatas kode ]]></b:skin>


.admin {
position: absolute;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: -webkit-linear-gradient(top, white, #EEE);
background: -moz-linear-gradient(top, white, #EEE);
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.6);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.6);
margin-left: 10px;
margin-top: 40px;
}

.admin img {width:68px;height:68px}



Pada CSS .Admin,untuk mengatur posisi gunakan margin.
CSS Diatas sama dengan Template saya Another dan Guilty Crown

pada CSS .admin img digunakan untuk mengatur lebar dan tinggi gambar/avatar itu sendiri

CSS Dibawah ini cuma Hiasan background gradient dan border radius CSS3,kamu bisa merubah warna atau sudut bulatnya.

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: -webkit-linear-gradient(top, white, #EEE);
background: -moz-linear-gradient(top, white, #EEE);
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.6);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.6);

//Ada kemungkinan sesudah kamu menyimpan'a,posisi'a tidak beraturan,karena itu gunakan margin-left,margin-right,margin-top dan margin-bottom untuk mengatur posisi avatar tersebut.//

lalu simpan dan lihat hasilnya.dan lihat source code yang saya gunakan,sama dengan tutorial diatas
untuk contoh demo'a,silakan lihat sendiri pada template saya:
Another blogger template
Guilty crown Blogger template



Pengaturan Tambahan


Untuk Avatar,sama seperti template Another dan Template Guilty Crown kamu harus setting manual agar avatar mucul,kalau tidak,ya tidak akan muncul==v

Pertama,buka blogger=>rancangan=>edit HTML=> Centang Expand Widget Templates
Lalu carikode html seperti dibawah ini

<b:if cond='data:post.author == &quot;Johanes djogan&quot;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPam5xJO7Gr6dXxYhsJ-XG-mLwrSTeZGMga46OIz-_PIUdmn4cL3EAq7FKs1hjFGcwlBA5gJm75YvpZJ3_9nXSzJzz-doB5HpdsZKT4UkT-CxenGhP6STRvC3_iu2K7o2xg2Sus_E4udBx/s1600/ad516503a11cd5ca435acc9bb6523536+(1)+copy+copy.png'/></b:if>


kode html Diatas ini,saya cuma beri 1 jenis avatar untuk 1 author blog.
cara mengaktifkan avatar ini,yang perlu kamu lakukan adalah mengganti username blogger kamu pada tag conditional author yang sudah tersedia.untuk menambahkan avatar'a,yang kamu perlu lakukan cuma copas HTML diatas,tepat dibawahnya,lalu ganti nama penulis dan url gambar avatar'a.

text bewarna merah:ganti dengan Username kamu.
text bewarna biru :ganti dengan Url gambar avatar kamu.Ukuranya 136px x 190px.

kalau tidak tahu username kamu,sebenar'a mudah aja,tinggal copas dari nama profil di blog kamu,atau bila ada banyak penulis tapi tidak tahu username'a,cara'a:
buka blogger=>setting=>izin/permission.

Contoh:

Lalu kamu akan melihat beberapa nama penulis dan admin disana.tinggal copy paste deh nama'a


//Saya Sudah mencobanya di berbagai template,dan hasilnya ada beberapa yang bisa menggunakan cara 1 dan juga ada yang bisa menggunakan cara2.//



Selesai deh.jadi dengan ini saya harapkan sobat bisa lebih kreatif dalam hal CSS dan HTML,jangan ngikutin style orang lain,apalagi punya orang luar negeri.ciptakan style kita sendiri,kreasi kita sendiri,dan hasil tangan kita sendiri.Ini Style ku,apa style mu?Indonesia harus kreatif.Arigatou Gozaimasu,semoga bermanfaat :)




sertakan Sumbernya bila anda mau mengcopy paste artikel ini. Trik Memasang Avatar penulis blog http://djogzs.blogspot.com/#ixzz1tCULXO6x
Under Creative Commons License: Attribution


Selasa, 10 April 2012

KTU | Cara membuat salam penutup pada Blog





Salam blogger kawan ..
seperti biasa sama hal nya di dunia nyata di dunia maya pun terkadang orang mengucapkan salam ketika berkunjung atau pergi dari suatu tempat,nah cara itu saya terapkan di blogg ini sebagai rasa terima kasih untuk para pengunjung DUNIA KOMPUTER.dan kali ini saya akan sedikit berbagi tentang cara membuat salam penutup blogg dengan cara di bawah ini :
  • Seperti biasa anda harus login dulu ke blogger.
  • Klik tab design lalu edit HTML 
  • Cari kode </head> < supaya lebih mudah gunakan ctrl+f >
  • kemudian kopi kode berikut tepat di atas </head>
</style>
<script type='text/javascript'>
alert(&quot;Selamat datang di fco-anime.blogspot.com ..Semoga Artikel kami bermanfaat buat anda..Jangan Lupa Follow Dan Komennya ..&quot;)
</script>

  • kemudian kopy kode berikut tepat di bawah kode </head>
<script type='text/javascript'>
// goodbye alert
function goodbye(){
alert('Terima kasih atas kunjungannya! Lain kali kalau ada waktu luang jangan lupa main ke sini lagi ya..! THANKS AND VISIT MY BLOG AGAIN, OK..!');
}
parent.window.onunload=goodbye;
</script>

Note :
- Code berwarna kuning , bisa d ganti dgn kata2 anda sendiri !
- Apabila anda kesusahan dalam  edit HTML bisa juga melalui +Add Gadget
  • Simpan template dan lihat hasil nya 
  • untuk kalimat bisa anda rubah dengan selera masing masing 
" terima kasih telah membaca post cara membuat salam penutup blogg "


>>> sebagai pengunjung yang baik selalu meninggalkan komentar.. <<<


KTU | Cara Membuat Menu Laman Bercabang di Blog


Salam blogger kawan, kali ini saya coba berbagi sedikit cara membuat menu bercabang di blog atau biasa di sebut horizontal branch off ..


berikut ini contoh gambar horizontal branch off


ok kawan langsung aja kita ke tkp 
  • seperti biasa harus login dulu ke blogger -> tata letak -> edit HTML ( jangan lupa expand widget )
kalau sudah cari kode berikut  ]]></b:skin>
 kalau udah ketemu masukan kode di bawah ini tepat di atas ]]></b:skin>


/* Navbar */
#menu{margin:0 auto; padding:0; height:30px; width:100%; display:block; background:url(http://i36.tinypic.com/28lgntl.jpg) repeat-x;
opacity: 0.99; filter: alpha(opacity: 98);}
#menu-cari{float:right; display:inline; padding:3px 5px 0 0;}
#menu ul{padding:0; margin:0;}
#menu ul li{padding:0; margin:0; list-style:none; display:block; float:left;}
#menu ul li a{float:left; padding-left:15px; display:block; color:#ffffff; text-decoration:none; font:12px Verdana, Arial, Helvetica, sans-serif; background:url(http://i36.tinypic.com/28lgntl.jpg) 0px -30px no-repeat; line-height:30px; padding-right:15px;}
#menu ul li a:hover{background-position:0px -60px; color:#ffffff;}
#menu ul li a.active, .menu li a.active:hover{background-position:0px -90px; color:#ffffff;}
#menu ul li ul {display:none;}
#menu ul li:hover ul, #menu ul li.hover ul {position: absolute; max-width:175px;
display: block; background:#000000; margin:2px; clear:left; margin-top:30px;}
#menu ul li:hover ul li, #menu ul li.hover ul li {width:175px; float: left; background: display: block;}
#menu ul li:hover ul li a, #menu ul li.hover ul li a{border-top:1px dotted #fff; background:black; width:175px;}
#menu ul li:hover ul li a:hover, #menu ul li.hover ul li a:hover{background:#7C01A4;}
.status-msg-wrap{
display:none;
}

  • simpan template 
  • buka halaman ( element halaman )
  • pada header halaman klik tambah gadget ( htmlm/java script )
  • selanjut nya tinggal masukin kode berikut 

<div id='menu'>
<ul>
<li><a class='active' href='/'> Home</a></li>
<li><a href='#'>Menu 1</a></li>
<li><a href='#'>Menu 2</a>
<ul>
<li><a href='#'>Menu 2.1</a></li>
<li><a href='#'>Menu 2.2</a></li>
</ul></li>
<li><a href='#'>Menu 3</a>
<ul>
<li><a href='#'>Menu 3.1</a></li>
<li><a href='#'>Menu 3.2</a></li>
<li><a href='#'>Menu 3.3</a></li>
<li><a href='#'>Menu 3.4</a></li>
</ul></li>
<li><a href='#'>Menu 4</a></li>
<ul>
</ul>
</ul></div>

  • catatan:
    Pada bagian : href="#" , tanda # anda ganti dengan url tujuan anda
  • selamat mencoba
" terimakasih telah mambaca artikel cara membuat menu bercabang di blog"
" sebagai pengunjung yg baik selalu meninggalkan komentar "


KTU | Cara mendaftarkan Blog ke Google


         Sebenarnya ada beberapa cara mendaftarkan blog ke Google yang dapat kita lakukan, tapi pada tips blogging kali ini kita hanya akan membahas cara mendaftarkan blog ke Google melalui Google Webmaster Tools. Namun sebelumnya kita pahami dulu mengapa perlu mendaftarkan blog kita di Google?
 
  • Kenapa blog kita harus didaftarkan (submit) ke Google ?
Tentu saja, adalah agar blog dan tulisan di blog kita terindeks di mesin pencari terbesar tersebut, dan juga menambah+ keTENARAN blog Anda , heheheh,, :D
*sehingga orang bisa melihat blog dan tulisan kita saat mereka searching di google mengenai kata kunci tertentu, dan akhirnya mendatangkan trafik pengunjung ke blog kita.

  • Bagaimana cara mengetahui blog kita sudah terdaftar di Google ?
Cara mudah mengetahui blog kita sudah terdaftar dan terindeks di Google atau belum adalah dengan mengetikkan URL lengkap blog kita contohnya:
http://fco-anime.blogspot.com/
Jika blog kita sudah terdaftar digoogle, maka blog kita akan terlihat pada hasil pencarian berikut halaman dalam blog yang sudah terindeks. Nah jika belum terlihat sama sekali maka berarti blog kita belum terdaftar apalagi tulisan-tulisan di blog kita.
Google Webmaster Tools adalah layanan gratis dari google untuk para pengelola situs maupun blog. Di Google Webmaster Tools sendiri ada 2 cara mendaftarkan blog kita, yaitu dengan membuat meta tag dan dengan membuat halaman. Langkah-langkahnya sebagai berikut:
  1. Daftar dan login di sini  Google Webmaster Tools
  2. Klik ” Add Site” lalu masukkan URL atau nama blog kita.
  3. Selanjutnya kita akan dibawa ke halaman Verify ownership.
  4. Pilih Add a meta tag to your site's home page. Maka akan diberikan kode meta tag misalnya seperti ini:
<meta name="google-site-verification" content="dVq960GU1Jj7nwuaora1jaSxBcmdr4C-yxVOkB67pfo" />
  1. Jangan tutup dulu halaman ini, buka halaman lain dan login ke dashboard blogger kamu dan pilihlah : Rancangan, Edit HTML.
  2. Letakkan meta tag seperti diatas bawah tag <head> kemudian klik Save.
  3. Kembali ke halaman Verify ownership yang tadi masih belum ditutup, klik Verify.
  4. Maka Googlebot akan segera melakukan crawl terhadap blog kita dan apabila berhasil menemukan meta tag yang sudah dipasang tadi maka akan muncul keterangan Verified.
Oke.., sekian dulu tips blogging..
*tentang cara mendaftarkan blog ke Google kali ini semoga bisa bermanfaat !!


KTU | Pasang Translator di Blog/Website




Kadang ketika kita buka website or blog seseorang kita menemukan widget translator, nah macam translatornya juga banyak sekali.
Rasanya berkeinginan untuk pasang Translator untuk web/blog kita. Untuk anda yang memiliki blogger/wordpress anda bisa pasang widget Google Translator (saya juga pakai), kelebihannya banyak:
1. Hampir bermacam-macam bahasa bisa dimasukan
2. Simple install
3. Ukuran juga kecil karna menggunakan Drop Down
4. De el el hehe

So, bagaimana caranya, ini dia:
1. Go to Google Translate
2. Lansung ke tab Tools.
3. Pilih bahasa blog anda
4. Copy script ke blog anda, biasanya dipasang di sidebar

apalagi yg d tunggu, silahkan lihat hasilnya...!!!
  smoga bermanfaat  ^_^ ..


Kamis, 05 April 2012

KTU | Membuat Burung Twitter Terbang Di Blogspot


Cara membuat / memasang widget burung Twitter terbang di Blogger, mungkin trik ini sudah tidak asing lagi bagi sobat dan sudah banyak sekali saya melihat blog yang sudah memasang widget burung Twitter terbang ini dengan berbagai macam style dan warna burung Twitter yang berbeda-beda, sekarang saya akan mengulas kembali khusus buat teman-teman blogger yang baru membuat blog dengan platform blogspot


Memasang Burung Twitter Terbang di Blogspot
Twitter adalah layanan jejaring sosial yang sangat populer sekarang ini selain Facebook dan Google+ dan tidak salah banyak orang yang beramai-ramai untuk menjalin koneksi melalui Twitter apakah itu untuk keperluan bisnis maupun hanya sekedar berteman saja, nah bagi sobat yang mempunyai blog tidak ada salahnya memasang widget menarik ini selain membuat blog sobat cantik dan unik, widget ini juga mempermudah sobat untuk menjalin pertemanan baru dengan pembaca blog sobat, hanya dengan sekali klik pada burung twitter yang terbang maka akan otomatis terhubung dengan profile Twitter sobat,
Ok tanpa panjang lebar mari kita kupas bersama-sama cara memasang widget ini

Pertama-tama silahkan login di Blogger

  • Klik Design > Page Element > Add Gadget > Html/Javascript
  • Copy paste kode di bawah ini ke kolom Html/javascript

<!-- floating twitter Bird -->
<script type="text/javascript" src="http://bloggerpeer.googlecode.com/files/tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn4JzoJz9N1_5eNl5O3F_3CNLG4VUbkBMDKeZGVmLncFBytSvDys4hNULVibmWRpMnvK1pELrs0vS5ksYbxl6BFH6pAR8Wq46AouHv5HlklGNsmaqU0hMqyPYDN3J18hxgzjHoYTDD3K0/s1600/burung+twitter+terbang.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/Akun Twitter sobat";
var tweetThisText = "Twitter - UserID http://bloggerpeer.blogspot.com/";
tripleflapInit();
</script>



  • Ganti kode yang berwarna biru dengan akun Twitter sobat
  • Simpan dan lihat hasilnya

Warna Pilihan Burung Terbang Twitter

Rubah Warna Burung Twitter

Untuk membuat warna burung twitter yang lain sobat bisa mengganti kode yang berwarna merah diatas dengan kode-kode dibawah ini sesuai dengan warna pilihan yang sobat inginkan..

Warna Kuning

  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtzDRed1KymbKzjsmJdoT0t1QrUVCjZReFrhHWzBjU3UKY27WQr4O2X0fqyG6WwSSBBCOp7wEamnVPoKP3mu5XsnBT-9_AG4LD3dMPcgaPeZuRwtuftvhd__NTk38Q3mKwpAgKl_-4iwQ/s1600/yellow+bird.png
Warna Hitam

  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoGVuhS4icw5MUGTstCLIL2SgA-dIRMWYBAdiVw1G7q5Qc3GvC5zhl_Xdtli5NSeArRy_X1NY2yQzbf2gbpTOUHvPALQnV_cOUuEWG3yKIjX6KoZb6PxowFNoii362JMFZnmDUgl6olKY/s1600/black+bird.png
Warna Biru

  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE0iBXVsMqzUyLBEB19KuQRB7Nh2TVoyN4ISnwUM7yZbrtAdU6qNSrU9KNOGs4lNAZtRyXN1cCVFkMhkMmPhnNT8AV1skk-YiXDJVQ9SpNDX6wZ9oNChk4B-rKp9bvvRepz2v-oak-YGY/s1600/Blue+bird.png
Warna Coklat

  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx-tqGHLqHhJ0R_24V7E3UHpJ9YbY_huXaLOmuKE9hy72R15m55Nm7wDtu4TthgFfOmR4Q3XQvVL9sgQK1HIH5sV2A9CZg8SvxLr58XzuW2VmTIEG_fjD94O-q25KYEbs54UeC80Ds9T8/s1600/brown+bird.png
Warna Hijau

  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAuiju8j4pDYugvW96GuB8YIgfQl9iEUqL6sP6qqtLy3XJxbkTt9EfpWaakHoZb6J-xbQUl-pPIYqce5fAAavH91TFNn4XCL_9K-AFgaW7HtjhEmvtuLoAYZ4vJ44nyBmns99LXa3L5w4/s1600/Green+bird.png
Warna Ungu

  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8dT8s_lb-3xdf8u68YZIPmE_RfACOnyzIf79u5Bquc3wOMgyzH0I-JX9WliGIBDXedvrbkmCw7mw3LxWh0NSPiacz5CebxYrZEWcjvAyHTCGjT5vw9OIWsARWt8uEgF337bFJOeJ8jAI/s1600/purple+bird.png
Warna Putih

  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5xceqRpaxG4tPlx1bvyUhtkddvYI92hE3UmFcAKg28fjW_CyN_hkiMjy01HpgIJJEXy9nkoqvRgbpDy5D6IKXWYkiV0LLFpCEQoUy2CZSUGwsAPoLXNVMXip_xibsFBXJHn7UegO6cRE/s1600/white+bird.png
Warna Merah

  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGFau9SUY5Gnw3NiyqdIhM__H2sUGLPrtG4yADFsF2bFRuqie8ERw49oT3lzITyFhpEqw-75kcgNzLIWATqN_K7UzdHBdb5vb-_7-D_Qhf5T9jQ5-COs1RPTIwId2bR7NZJeO3DWtXl3A/s1600/red+bird.png

Dan terakhir jangan lupa disimpan
Good luck Sob..! 


Selasa, 03 April 2012

KTU | Cara Membuat Photo Profil Berputar Saat Di Sentuh Mouse


 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN0RIgGd-WXXl-hi4nRubXNH-Jw14Q64VxbAFwzQaMXEghWUS1zI8RwDlKveDuMOuRRvXOPZ4VyIdqS9vdUotUzDGR0jQkW1IRAqFC3gcGmi3SBcV8Np6kpxvo-0SSkYZM6RJvc-HB2Mo/s284/dicky-.jpg
Kali Ini gw share "Cara buat profil berputar saat di sentuh mouse", sebenarnya ne trik udah banyak yang tw, tp karna ada yang pengen tau caranya, ya sudah saya posting, ok langsung saja ke caranya :
  • Pertama Login dulu ke akun blogger kalian
  • Klik rancangan----> Edit HTML
  • Cari Kode Yang mirip Seperti dibawah ini
 .profile-img {
float: left;
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 0;
border: 4px solid #e28d44;
}
  • Jika sudah ketemu Ganti kode tersebut dengan kode di bawah ini, tetapi jika kode yang diatas tidak ketemu, letakkan kode di bawah ini diatas kode ]]></b:skin>
.profile-img{
border:5px dashed #F00;
opacity:0.8;
border-radius:6px;
margin:0px 0 0px 0px;
padding:4px;
box-shadow:1px 1px 1px #555,-1px -1px 1px #555,0 0 8px #F00;
-moz-box-shadow:1px 1px 1px #555,-1px -1px 1px #555,0 0 8px #F00;
 -webkit-box-shadow:1px 1px 1px #555,-1px -1px 1px #555,0 0 8px #F00;
 -o-transition:margin-left 1.5s ease-in 2s,margin-top 1.5s 2.5s,-o-transform 1.5s ease-out 1s,opacity 2s ease-in; -moz-transition:margin 1.5s ease-in 2s,-moz-transform 1.5s ease-out 1s,opacity 2s ease-in; -webkit-transition:margin 1.5s ease-in 2s,-webkit-transform 1.5s ease-out 1s,opacity 2s ease-in
}
.profile-img:hover{
opacity:1.0;
border-radius:8px;
-moz-border-radius:8px;
 -webkit-border-radius:8px;
-o-border-radius:8px;
-moz-box-shadow:1px 1px 1px #F00,-1px -1px 1px #F00,0 0 16px #F00;
-webkit-box-shadow:1px 1px 1px #F00,-1px -1px 1px #F00,0 0 16px #F00;
-o-box-shadow:1px 1px 1px #F00,-1px -1px 1px #F00,0 0 16px #F00;
margin:40px 0px 20px 10px;
 -o-transform:rotate(1460deg) scale(1.8) translate(35px,10px);
 -moz-transform:rotate(1460deg) scale(1.8) translate(35px,10px);
 -webkit-transform:rotate(1460deg) scale(1.8) translate(35px,10px);
 -o-transition:margin-left 1.5s ease-in 0.4s,margin-top 1.5s,-o-transform 2.5s ease-out 1.4s,opacity 3s ease-in 4s;
 -moz-transition:margin 1.5s ease-in 0.4s,-moz-transform 2.5s ease-out 1.4s,opacity 3s ease-in 4s; -webkit-transition:margin 1.5s ease-in 0.4s,-webkit-transform 2.5s ease-out 1.4s,opacity 3s ease-in 4s
}

Smoga bermanfa'at !!.. ^_^


KTU | Cara Menghindari Pencopas Di Blog Part 1



Selamat Malam Sobat ?? Kali Ini saya akan share cara menghindari para tukang copas pada blogger.
Dengan trik ini pengunjung blog sobat tidak akan bisa mengcopas artikel sobat sehingga blog sobat pun aman dari ancaman tukang copas.
Jika sobat tertarik dengan cara saya yg ini mari sobat ikuti langkah saya:
  1. Masuk/login ke blogger sobat.
  2. Masuk ke rancangan>>>Edit HTML
  3. Sebelum mengedit sebaiknya sobat centang dulu tulisan " Expand Template Widget" 
  4. Masukkan Script berikut diatas kode <head>, gunakan ctrl+F untuk mempermudah pencarian kode.
  <script type="text/javascript">
  function addLink() {
      var body_element = document.getElementsByTagName('body')[0];
      var selection;
      selection = window.getSelection();
      var pagelink = "
   Read more at: <a href='"+document.location.href+"'>"+document.location.href+"</a>
   Copyright dicky-ajha.blogspot.com Under Common Share Alike Atribution"; // change this if you want
      var copytext = selection + pagelink;
      var newdiv = document.createElement('div');
      newdiv.style.position='absolute';
      newdiv.style.left='-99999px';
      body_element.appendChild(newdiv);
     newdiv.innerHTML = copytext;
      selection.selectAllChildren(newdiv);
      window.setTimeout(function() {
         body_element.removeChild(newdiv);
      },0);
  }document.oncopy = addLink;
  </script>
Catatan ganti kode warna HIJAU degan url blog sobat.
    5.  Simpan template dan lihat hasilnya.
Sekian artikel dari saya semoga bermanfaat.


KTU | Membuat Menu Horizontal Tanpa Edit HTML


Menu ini saya agak copas sedikit dari orang..
Dan menu ini kemudian saya edit dan saya kembangkan menjadi lebih keren lagi...
Sobat bisa liat contoh gambarnya di bawah ini :
Contoh gambar hasil editan saya..
Waaaw,, Menarik bukan...??Penasaran..??Apakah sobat berkenan ingin memasang menu ini di blog sobat....??Jika tidak Gantung diri...Jika berkenan langsung aja yuk CekidioT...Eh salah ...CekidoT...
1.Login ke blogger sobat 
2.Dari dasbor klik rancangan 
3.Kemudian klik "Tambah Gadget" Lalu pilih "HTML/JavaScript" 
4.Lalu Copy code di bawah ini dan pastekan di kolom "HTML/JavaScript"

<style type="text/css">


.caesar{
float:left; margin-bottom:10px;
padding:0px; width: 100%;
overflow: hidden; background: darkblue;
background: -moz-linear-gradient(top, darkblue 0%, darkorange 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(2%,darkred), color-stop(100%,darkorange));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999', endColorstr='#000',GradientType=0 );
-moz-box-shadow: 0px 0px 30px, 0px 0px 30px, 0px 0px 30px darkred;
-webkit-box-shadow:0px 0px 30px, 0px 0px 30px, 0px 0px 30px darkred;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;}


.caesar ul{
margin: 0; padding: 0; padding-left: 10px;
font: bold 14px Verdana;
list-style-type: none; }


.caesar li{
display: inline; margin: 0;}


.caesar li a{
float: left; text-decoration: none;
margin: 0; padding:12px; color: white;}


.caesar li a:visited{color: white; }
.black li a:hover, .black li.selected a{color:#ccff00;}


.searchbox {position:absolute; left:990px; top:305px; width:190px; font-size:11px; color:#996633;}
    #searchform .label {display:block; padding:0px 0px 2px 5px;}
        .search {width:140px; height:25px; background: url(http://i730.photobucket.com/albums/ww304/skincorner6/narutosearch.jpg) left top no-repeat; float:left;}
    #searchform input {border:none; background:transparent url(http://i730.photobucket.com/albums/ww304/skincorner6/skincornergo1.jpg) left top no-repeat; font-size:12px; font-weight: normal; color:#996633; width:44px; height:25px; float:right;}
    #searchform .search #s {border:none; background:transparent; color:#996633; width:125px; height:auto !important; margin:3px 0 0 4px; float:left;}
</style>


<!-- Menu START -->
<div class='caesar'>
<div style='line-height:40px;'>
<ul><li class='page_item page-item-2'><a href='url blog anda untuk home' title=''>home</a></li>
<li class='page_item page-item-2'><a href='url blog anda 2' title=''>isi menu 2</a></li>
<li class='page_item page-item-2'><a href='url blog anda 3' title=''>isi menu 3</a></li>
<li class='page_item page-item-2'><a href='url blog anda 4' title=''>isi menu 4</a></li>
<li class='page_item page-item-2'><a href='url blog anda 5' title=''>isi menu 5</a></li>
<li class='page_item page-item-2'><a href='url blog anda 6' title=''>isi menu 6</a></li>
<li class='page_item page-item-2'><a href='url blog anda 7' target='_blank'>isi menu 7</a></li></ul>
<div id='search'>


<form action='/search/' method='get'>
<input class='search_text_box' name='q' onblur='if (this.value == "") {this.value = "search here...";}' onfocus='if (this.value == "search here...") {this.value = ""}' type='text' value='search here...'/>
<input class='search_submit' id='search_submit' name='search_submit' type='submit' value=''/>
</form>
</div></div></div>
<!-- Menu END -->
5.Jika sudah klik simpan dan lihat hasilnya...


Guaammmmpang Buaanngggeeet...


KTU | Cara Mengganti Blok Text Di Blogger



Mengganti warna blok lumayan membantu anda dalam mempercantik blog anda cara merubah warna blok sangat gampang ikuti langkah nya di bawah ini.

1.Login Blogger Buka Rancangan>Edit HTML.
2.Copy code di bawah ini.
::selection {background:#66FF66; color:#66CCFF}
::-moz-selection {background:#66FF66; color:#66CCFF}
::-webkit-selection {background:#66FF66; color:#66CCFF}
3.Tekan CTRL + F Dan Ketik ]]></b:skin>.
4.Pastekan Code Tersebut Diatas ]]></b:skin>.

NB: Code Di Text Yang Berwarna Merah itu adalah Warna background.
        Code Di Text Yang Berwarna Biru itu adalah Warna Text.


Happy Blogging ^_^


KTU | Cara Membuat Icon Di Samping Judul Postingan


Lagi maleezz nih, Copas aj yaahh ??
   ada yg PM gw , minta share Cara Membuat Icon Di Samping Judul Postingan
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJES7cj11Da-tqIHbW62IwgUTrgrCx0ye389us_9WGf_YeUKxahdGagQvcm0Fz9M3S6AE2SodHxiYP1IcsgsVMaV0r44WcU4txRPw7iTO3pXiwwLIzJZbmFdCblHtA2MBArdmFGHo_IM8/s447/cats.jpg
Hmm, sebenarnya ne trik udah banyak banged yang tw, tapi karna ada request dari seseorang, ya sudah saya posting di blog saya, hehe, langsung aja dech ke Caranya:
  • Siapkan gambar/icon yang akan Anda gunakan
  • Ubah ukuran icon menjadi (32x32px) atau (25x25px), 
  • Upload gambar anda ke picasa atau photobucket atau yang lainnya, terserah anda
  • Kemudian Login ke blog sobat
  • Setelah itu Klik Rancangan >>> Edit HTML
  • Lalu Cari Kode yang mirip seperti kode di bawah ini :
    ( Gunakan CTRL + F untuk mempermudah pencarian)
.post h3 {
margin:0;
display:block;
padding:2px 14px 2px 29px;
color:#bd470c;
font:Verdana
}
  • Jika sudah ketemu, Sisipkan Kode berikut dibawah Kode  .post h3{
background:url("URL GAMBAR ANDA") no-repeat;
  • Ganti Kode yang berwarna hijau dengan URL gambar Anda
  • Kemudian atur posisinya agar tepat. Anda tinggal mengatur padding: 2px 14px 2px 29px; sehingga menjadi padding: 10px 35px 8px; atau terserah dari keinginan Anda. 
  • Jika Sudah Selesai hasilnya akan menjadi seperti ini :
.post h3 {
background:url("URL GAMBAR ANDA") no-repeat;
margin:0;
display:block;
padding:2px 14px 2px 29px;
color:#bd470c;
font:Verdana
}
  • Setelah semuanya selesai Anda tinggal Simpan Template dech

SUMBER : Ickey Gakure


Selasa, 27 Maret 2012

KTU | Menambah READ MORE Otomatis pada blog's


Read More Otomatis pada Template Blogger

Membuat Otomatis Read More - Auto Readmore Button.
Seperti janji minggu lalu ya sob,Pelajaran Blog kali ini akan mengulas dan mengutak atik 'seputar blogger template' yang kita gunakan saat ini.
Betul gan,ini kaitannya 'membuat read more atau tulisan baca selengkapnya' versi kedua.

Beberapa waktu lalu telah diposting cara membuat read more/baca selengkapnya.. secara manual,namun kendalanya bagi blog yang terlanjur sudah memiliki banyak artikel tentu akan banyak makan waktu dan tenaga untuk mengedit satu persatu.

Nah,dengan kombinasi javascript read more yang akan kita ciptakan ini akan tampil otomatis meskipun kita tidak mengeditnya kembali.
Yup,membuat read more/baca selengkapnya otomatis pada blogger adalah tema kita kali ini.
Untuk demonya sobat bisa liat di SINI.

Lalu bagaimana jika saya telah menggunakan read more secara manual?
Tidak perlu cemas gan,karena tinggal ganti kodenya dan jreng!!! :D

Langkah Cara Membuat Read More Otomatis tanpa jQuery pada Blogger dengan Bahasa Javascript


Ada dua(2) pilihan membuat readmore otomatis / auto read more pada blogger ini sob,yakni read more menggunakan gambar dan hanya menggunakan tulisan.

Untuk pertama kali,seperti biasa ya gan pilih Dashboard,lalu Tata Letak dan Contreng tulisan Expand Widget Templates.

Cara membuat readmore otomatis.
(1)

membuat read more baca selengkapnya otomatis.
(2)

otomatis read more.
(3)


Selanjutnya,cari kode </head>,setelah ketemu tepat diATASnya letakkan kode javascript berikut:

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 150;
summary_img = 150;
img_thumb_height = 100;
img_thumb_width = 120;
</script>

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

(C)2008 by Anhvo

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>


Kemudian cari kembali kode <data:post.body/> atau <p><data:post.body/></p>

Setelah itu untuk Cara 1.Read More Button Otomatis menggunakan gambar,hapus kode tersebut dan gantilah dengan kode berikut:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span style='float:right'><a expr:href='data:post.url'><img alt='Read More..' src='http://1.bp.blogspot.com/-IHpf1c0gAZE/TahDsOmCrCI/AAAAAAAAAy0/lOZgwgw7eHg/s1600/pelajaran%2Bblog%2Bread%2Bmore%2Botomatis.jpg'/></a></a></span>
<b:else/>
<data:post.body/>
</b:if>


Sedangkan untuk Cara 2.Read More Button Otomatis hanya berupa text,hapus kode <data:post.body/> atau <p><data:post.body/></p>
tersebut dan gantilah dengan kode berikut:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span style='float:right'><a expr:href='data:post.url'>Read More..</a></span>
<b:else/>
<data:post.body/>
</b:if>


Lalu simpan templates dan lihat hasilnya.
Untuk yang terlanjur menggunakan read more secara manual seperti di sini,tinggal hapus kode:

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><strong>Selengkapnya...</strong></a></p>
</b:if>


Dan gantilah dengan kode sesuai pilihan sobat diatas,bisa menggunakan cara 1 maupun cara 2.Semoga berhasil dan selamat ngutak-atik template ya Membuat Read More Otomatis / Auto ReadMore di Blogger Selesai.


VIDEO

ENTER-TAB1-CONTENT-HERE

RECENT POSTS

ENTER-TAB2-CONTENT-HERE

POPULAR POSTS

ENTER-TAB3-CONTENT-HERE
 
\m/ Selamat datang di Blog KUALA TUNGKAL UNDERGROUND™ yang sederhana ini... Silahkan Browing disini... Jangan lupa isi BUKU TAMU... \m/

Kuala Tungkal Underground™ Copyright © 2010 LKart Theme is Designed by Lasantha