Menampilkan Sumber Link Saat Tulisan Dicopy

Pernah tulisanmu di blog dicopy paste blogger lain? Apalagi dengan tanpa menyebutkan sumbernya. Mungkin bagi sebagian orang merasa cuek saja, tapi saya yakin sebagian besar akan marah, atau bersedih. Memang copy paste adalah penyakit masyarakatnya dunia blogging. Orang tidak mau susah-susah berpikir dan menulis melakukan copy paste dari blog lain untuk diterbitkan di blognya sendiri.

Sekarang kita akan belajar yang berkaitan dengan copy paste yang meresah bagi kita, yaitu Menampilkan Otomatis Sumber Artikel Saat Dicopy Paste. Maksudnya adalah ketika orang/blogger memblock tulisan di blog kita lalu mengcopynya di halaman lain maka setelah di paste pasti akan muncul link sumber tulisan itu. Contoh read more:http://nuki73.blogspot.com/2011/02/membuat-klik-kanan-tidak-berfungsi-di.html

Cara ini hanya sebagian saja untuk memberikan penghargaan bagi penulis aslinya yang memang kalau benar-benar mengutip langsung tanpa mengubahnya. Orang bisa menghilangkan tulisan itu setelah dipaste, karena memang formatnya teks biasa. Paling tidak cara ini bisa lebih mengingatkan si pelaku copy paste untuk mencantumkan sumbernya.

Cara Menampilkan Otomatis Sumber Artikel Saat Dicopy Paste
1. Berkunjung dan daftar ke www.tynt.com
2. Klik button Get Started FREE
3. Mengisi form yang telah disediakan: email, domain password, dll. Jika sudah klik Next

4. Setelah itu kita bisa melakukan kostumisasi, jika tidak mau repot langsung saja klik Next

5. Kita akan mendapatkan kode script yang harus ditaruh di template blog.

6. Cara menambahkan kode script tersebut di blog; 

• Login ke Blogger.
• Di halaman Dasbor, kita pilih Rancangan.
• Kemudian pilih Edit HTML 
• Beri tanda centang pada Expand Template Widget 
• Cari kode </head> 
• Jika sudah ketemu taruh kode script tadi di atasnya 
• Simpan Template jika sudah selesai.

Setelah menambahkan script ini maka akan secara otomatis setiap orang yang melakukan copy paste terhadap postingan (artikel) di blog kita akan mencantumkan sumber linknya. Selain itu kita juga akan tahu siapa saja yang telah melakukan copy paste tulisan di blog kita dari laporan Tynt. 

READ MORE - Menampilkan Sumber Link Saat Tulisan Dicopy

Categories: Trik Blogger

Membuat Buku Tamu Melayang

Di postingan ini saya akan berbagi
cara membuat buku tamu  melayang di kanan blog

1. Langkah Pertama  pergi ke Cbox
2. Lalu masuk akun Cbox atau jika belum punya daftar ke Sign Up Cbox
3. Jika Sudah mendaftar Cbox lalu pemirsa disuruh masuk Cbox
4. Setelah sudah masuk edit sendiri Cbox anda sendiri

dan Langkah berikutnya Copy-Paste HTML dibawah 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/AVvXsEizVfDKKjomGTTFlu_WRonu9DFTTiRRo7fLaj-FEcvtEj2AKZMYkV8AzmG5pUJhAg38Om8wyHZ7NXRp5gtA1SjXgkQha45lgfTwkt8wNGSPZzu3frWel1lZR2wzjdCpaprwN984SwX0OWE/s1600/bukutamu.png') 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">
Silakan Pasang Kode Buku Tamu yang sudah di copy tadi Di Sini

<div style="text-align:right">
<a href="http://nuki73.blogspot.com/2012/10/mmbuat-buku-tamu-melayang.html">[get this widget]</a>><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></div></div>

Cara menaruh html di atas

1. Masuk akun blogger siapa ajah boleh
2. Ke tata letak
3. Add gadget atau Tambah gadget
4. Edit html/javascript
5. Masukan html di atas
6. Selesai

dan ganti tulisan yang biru dengan html/javascript Cbox/buku tamu
yang tadi 

Mudahkan !!!

READ MORE - Membuat Buku Tamu Melayang

Categories: Trik Blogger

Cara menampilkan Headline News melayang pada Blog

Pada posting ini saya akan menjelaskan mengenai Cara membuat headline news berjalan di atas maupun dibawah Blog seperti yang terlihat pada bagian bawah Blog Ini.Ok tanpa panjang lebar langsung saja.

Berikut Langkah Membuat Headline News :
1. Login ke akun blogger
2. Masuk ke Rancangan pilih Elemen laman
3. Klik Add Gadget pilih HTML/JavaScript
4. Masukkan kode berikut

READ MORE - Cara menampilkan Headline News melayang pada Blog

Categories: Trik Blogger

Cara Mengganti Background Blogger

Duh.....dah lama nih ga posting sibuk terus ma kerjaan. Ok..sobat ku semua....kali ini saya akan sedikit membahas mengenai bagaimana cara mengganti background blog. Untuk patokannya....pertama anda harus menyimpan gambar background anda di situs yang nyediain tempat penyimpanan file. KatakanlahPhotobucket.com. Tapi ingat sebelum anda menyimpan, anda harus terlebih dahulu mendaftar gratis kok. Nah kalo sudah daftar, terus sudah upload gambar yang mau dijadiin background, sekarang perhatiannya kita fokuskan ke blog. 

• Login ke Blogger.
• Pilih menu LAYOUT lalu editHTML
• Jangan kasih tanda checklist pada kolom EXPAND TEMPLATE WIDGET.
• Cari kode css body, kurang lebih contohnya seperti dibawah ini :

body { background:#FFF; margin: 0 5px 0; }

• Kalo dah ketemu, Tambahkan kode seperti di bawah ini diantara tanda { dan } :

background:#fff url(URL FILE GAMBAR ANDA) repeat-x;

• Tapi...kalo misalnya sudah ada kata background, tinggal nambahin kode yg berwarna biru aja. dan jangan lupa selalu ditutup dengan tanda ";".

Catatan : Tulisan URL FILE GAMBAR ANDA, ganti dengan Url gambar yang anda simpan. Sebagai contoh, Silahkan ganti Url-nya dengan Url di bawah ini :(http://i283.photobucket.com/albums/kk315/meezanx_2008/body-1.gif) Kalo sudah, klik PREVIEW dan coba anda lihat hasilnya. Ok...selamat mencoba

READ MORE - Cara Mengganti Background Blogger

Categories: Trik Blogger

Memasang Widget "I LOVE INDONESIA"

Maaf kemarin gak sempet posting, soalnya gak ada waktu, sekarang saya sempetin posting buat nambah animasi " I LOVE INDONESIA" di PKA (Pojok Kanan Atas). Kayak punya blog ini, saya langsung aplikasikan biar pengunjung percaya bahwa Script yang saya kasih 100% Working. Ya udah, sekian aja basa-basinya.

Langkah:

1. Buka Blogger dan Sign In menggunakan account anda

2. Pilih tata letak

3. Add Widget

4. Text/HTML

5. Masukan Script di bawah ini
<script type='text/javascript'>
//<![CDATA[var Ovr2='';
if(typeof document.compatMode!='undefined' && document.compatMode!='BackCompat')
{
   cot_t1_DOCtp="_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);_left:expression(document.documentElement.scrollLeft + document.documentElement.clientWidth - offsetWidth);}";
}
else
{
   cot_t1_DOCtp="_top:expression(document.body.scrollTop+document.body.clientHeight-this.clientHeight);_left:expression(document.body.scrollLeft + document.body.clientWidth - offsetWidth);}";
}

if(typeof document.compatMode!='undefined'&&document.compatMode!='BackCompat')
{
   cot_t1_DOCtp2="_top:expression(document.documentElement.scrollTop-20+document.documentElement.clientHeight-this.clientHeight);}";
}
else
{
   cot_t1_DOCtp2="_top:expression(document.body.scrollTop-20+document.body.clientHeight-this.clientHeight);}";
}


var adi_top_rightCSS='#adi_top_right{position:fixed;';
adi_top_rightCSS=adi_top_rightCSS+'_position:absolute;';
adi_top_rightCSS=adi_top_rightCSS+'top:0px;';
adi_top_rightCSS=adi_top_rightCSS+'right:0px;';
adi_top_rightCSS=adi_top_rightCSS+'clip: inherit;';
adi_top_rightCSS=adi_top_rightCSS+cot_t1_DOCtp;

var cot_tl_popCSS='#cot_tl_pop {background-color: transparent;';
cot_tl_popCSS=cot_tl_popCSS+'position:fixed;';
cot_tl_popCSS=cot_tl_popCSS+'_position:absolute;';
cot_tl_popCSS=cot_tl_popCSS+'height:194px;';
cot_tl_popCSS=cot_tl_popCSS+'width: 244px;';
cot_tl_popCSS=cot_tl_popCSS+'border: thin solid #000000;';
cot_tl_popCSS=cot_tl_popCSS+'right: 100px;';
cot_tl_popCSS=cot_tl_popCSS+'top: 30px;';
cot_tl_popCSS=cot_tl_popCSS+'overflow: hidden;';
cot_tl_popCSS=cot_tl_popCSS+'visibility: hidden;';
cot_tl_popCSS=cot_tl_popCSS+'z-index: 100;';
cot_tl_popCSS=cot_tl_popCSS+cot_t1_DOCtp2;

document.write('<style type="text/css">'+adi_top_rightCSS+cot_tl_popCSS+'</style>');

function cot_tl_bigPopup(url)
{
   newwindow=window.open(url,'name');

   if(window.focus)
   {
      newwindow.focus()
   }
   return false;
}

function cot(cot_tl_theLogo,cot_tl_LogoType,LogoPosition,theAffiliate)
{
   var cot_tl_bigBaseURL= "http://nuki73.blogspot.com/2011/08/memasang-widget-i-love-indonesia.html";
   document.write('<div id="adi_top_right">
');
   document.write('<a href='+cot_tl_bigBaseURL+' onClick="return cot_tl_bigPopup(\''+cot_tl_bigBaseURL+'\')"><img src='+cot_tl_theLogo+' border="0" ></a>');document.write('</div>
');
}

//]]>
</script>

<script language="JavaScript" type="text/javascript"> cot("http://img38.imageshack.us/img38/8584/iluvindonesia.png")</script>

6. Klik Simpan :D


Pasti langsung berhasil dijamin 100%

READ MORE - Memasang Widget "I LOVE INDONESIA"

Categories: Trik Blogger

Cara Memasang Widget Sms Gratis Di blog

Sobat informasi maya seperti judul di atas saya ga akan panjang lebar deh ngebahasnya. yang jelas dengan tool ini kamu bisa kirim-kirim sms secara gratis lewat blog kamu. dan juga tentunya keunggulan dari memasang widget ini ialah dapat mendulang traffik. mendulang traffik tambahan buat blog kamu. namun masih ada kekurang dari widget ini yaitu tidak bisa menerima sms balasan. sehingga bila ada yang membalas kita tidak bisa membacanya. namun walaupun seperti itu gedget ini sangat bermanfaat terutama buat kita Hobi sms an.
Ok langsung aja

-Silakan copy kode di bawah ini :
<em><em><iframe name="I2" src="http://sms-online.web.id/widget"style="border: 1px solid rgb(255, 255, 255);" frameborder="0" height="264" scrolling="no" width="84%"> not support</iframe><br /><small><center><a href='http://www.thereiko.blogspot.com' rel='nofollow'>Make Widget</a></center></small><br /></em></em>

-Silakan login ke blogger
-Pilih tata letak
-Tambah widget baru
-Setelah itu kamiu pilih
-Edit HTML/Javascript
-Paste kan kode yang sudah kamu copy tadi

READ MORE - Cara Memasang Widget Sms Gratis Di blog

Categories: Trik Blogger

Membuat Horizontal Menu

Horizontal menu adalah menu yang berguna untuk berguna untuk menunjukkan halaman lain yang ada diblog anda. Misalnya blog anda dibagi menjadi empat tema, maka widget ini selain indah juga berguna untuk menunjukkan tema-tema tersebut. Dengan widget ini maka tema-tema di blog anda akan lebih mudah dilihat oleh pengunjung dan membuat website lebih rapi dan indah.Selain itu, menu horisontal ini tidak kalah menarik untuk menjadi navigator di blog Anda karena saya kira bentuknya Menarik dan elegan.

Ini adalah gambar Horizontal menu yang akan kita buat:



atau sebagai contoh horizontal menu yang asli dan bisa di klik, kunjungilah blog ini

Nah apakah anda berminat untuk membuatnya??? baiklah ini adalah cara membuatnya:

1. login ke blogger lalu masuk menu Layout kemudian masuk menu Edit HTML

2. Lalu taruh code dibawah diatas Code ]]></b:skin> pokoknya di barisan CSS pada Blog Anda:

.menuhorisontal{
width: 100%;
overflow: hidden;
border-bottom: 1px solid #000000;
}


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


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


.menuhorisontal li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 7px 8px;
border-right: 1px solid white;
color: white;
background: #414141; /*background dari Tabel*/
}


.menuhorisontal li a:visited{
color: white;
}


.menuhorisontal li a:hover, .menuhorisontal li.selected a{
background:#002EB8; /*Background Setelah Pointer Diarahkan */
}
#footheader {
width: 100%;
float:left;
margin:0 0 0;
padding:0 0 0;
height:35px;
}

3. Kalau Sudah Cari Code dibawah Ini:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Bisnis Di Internet (Header)' type='Header'/>
</b:section>
</div>

4. Code diatas Di Blog kamu berdeda-beda pokoknya kamu perhatikan Code yang berwarna kuning saja dan taruh Code dibawah ini tepat dibawah Code Diatas itu:

<div id='footheader'>
<b:section class='footheader' id='footheader' preferred='yes'>
</b:section>
</div>

5. Kemudian Simpan

6. kemudian klik Add A Gadget kemudian pilih HTML/JavaScript.. Lalu taruh Code dibawah ini:

<div class='menuhorisontal'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='http://forantum.blogspot.com'>Kumpulan Tutorial Blog</a></li>
<li><a href='url '>nama</a></li>
<li><a href='url '>nama</a></li>
</ul>
</div>

ket: nama dan url kamu ganti dengan nama dan url yang kamu inginkan

Nama : nama dari tema, misal : My Musik , My video, tutorilal blog, dll.
url : url yang dituju apabila nama di klik oleh pengunjung.

7. udah selesai lalu simpan.....

READ MORE - Membuat Horizontal Menu

Categories: Trik Blogger

Cara Membuat Recent Post Keren

bagi sobat yang mau membuat tulisan terbaru atau recent post yang keren. Nie saya kasih kode HTML-nya. Caranya mudah banget, semua kode di bawah ini copy-paste saja ke dalam gadget HTML Java script. Contohnya Lihat Blog Saya

Berikut detailnya:

1. Buka blogger> Dasbor> Rancangan> Edit laman>
2. Langkah kedua tambah gadget> HTML Java Script
3. Masukan kode di bawah ini ke dalam Java Script

<div style='float:left;'>

<script language="JavaScript">

imgr = new Array();

imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgyd8wHvuV5jlsBfP-GhYZhOJyHrafIiFi6vlZ0JyCL6-wYMr-hFWI8TyU1YdZcigDg4qkceGUjP6j62VqvUZ1U9I-nFism_H__i6J02FvgMggtqgJUDNr6Bl7EaMKtWwAgWfMB4Ined0/";

imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgyd8wHvuV5jlsBfP-GhYZhOJyHrafIiFi6vlZ0JyCL6-wYMr-hFWI8TyU1YdZcigDg4qkceGUjP6j62VqvUZ1U9I-nFism_H__i6J02FvgMggtqgJUDNr6Bl7EaMKtWwAgWfMB4Ined0/";

imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgyd8wHvuV5jlsBfP-GhYZhOJyHrafIiFi6vlZ0JyCL6-wYMr-hFWI8TyU1YdZcigDg4qkceGUjP6j62VqvUZ1U9I-nFism_H__i6J02FvgMggtqgJUDNr6Bl7EaMKtWwAgWfMB4Ined0/";

imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgyd8wHvuV5jlsBfP-GhYZhOJyHrafIiFi6vlZ0JyCL6-wYMr-hFWI8TyU1YdZcigDg4qkceGUjP6j62VqvUZ1U9I-nFism_H__i6J02FvgMggtqgJUDNr6Bl7EaMKtWwAgWfMB4Ined0/";

imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgyd8wHvuV5jlsBfP-GhYZhOJyHrafIiFi6vlZ0JyCL6-wYMr-hFWI8TyU1YdZcigDg4qkceGUjP6j62VqvUZ1U9I-nFism_H__i6J02FvgMggtqgJUDNr6Bl7EaMKtWwAgWfMB4Ined0/";

showRandomImg = true;

boxwidth = 260;

cellspacing = 3;

borderColor = "#FFFFFF";

bgTD = "#000000";

thumbwidth = 40;

thumbheight = 40;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "Komentar";

showPostDate = false;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 15;

home_page = "http://nuki73.blogspot.com/";

</script>

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

</div>

<div style='clear:both;'/></div>

Keterangan:  
boxwidth = 260; Gantri angka itu untuk menyesuaikan ukuran gadget
numposts = 15; Angka "15"  Jumlah postingan, bisa diganti
home_page = "http://nuki73.blogspot.com/"; Urlnya ganti dengan Url blog kamu

Kalo sudah selesai simpan.
Selamat mencoba.

READ MORE - Cara Membuat Recent Post Keren

Categories: Trik Blogger

Membuat Refresh

Fungsi refresh di gunakan untuk membuat “penyegaran” kembali halaman blog ataupun website. Fungsi refresh ini sama dengan fungsi refresh yang ada pada browser internet, perbedaannya yaitu fungsi ini di buat bekerja secara otomatis, yakni pengguna tidak perlu menekan tombol refresh yang ada pada tool bar.

Untuk membuatnya cukup dengan hanya membubuhkan kode di bawah ini :


<meta http-equiv="refresh" content="10"/>


Simpan kode di atas antara <head> .... </head>

sedikit uraian kode diatas, content="10" --> angka sepuluh menunjukan bahwa proses refresh akan di lakukan dalam rentang waktu 10 detik. Jadi sebaiknya angka ini di set jangan terlalu cepat karena bisa menimbulkan kejengkelan kepada para pembaca apabila terlalu cepat di refresh.

Fungsi refresh selain untuk menyegarkan kembali halaman-halaman blog, ada fungsi lain yang juga cukup menarik, yakni berfungsi sebagai Redirect dari satu URL addres ke URL addres yang lain. Ini berfungsi jika anda ingin membawa pengunjung blog atau situs anda ke alamat situs yang anda inginkan. Agar lebih jelas, saya ambil salah satu contoh. Ada teman saya sudah lama nge blog, dan setelah sekian lama kemudian dia membuat situs baru. Jadi blog yang lama tidak ingin di aktifkan lagi (di non aktifkan). Nah selain memakai cara meninggalkan pesan bahwa alamat situs atau blog sudah pindah alamat, alangkah baiknya kita memakai fungsi Refresh yang di setting secepat mungkin yakni waktu refresh di set 0 (nol) detik. Jadi apabila ada pengunjung yang mengunjungi alamat blog tersebut akan secara otomatis di bawa langsung ke alamat baru yang di inginkan.

Fungsi Redirect ini bisa di buat dengan kode :


<meta http-equiv="refresh" content="0;URL=tulis alamat URL tujuan di sini"/>


Selamat mencoba.

READ MORE - Membuat Refresh

Categories: Trik Blogger

Membuat menu dropdown menggunakan css script (menu navigasi horisontal)

Menu navigasi yang terpasang diblog dimaksudkan untuk memudahkan pengunjung menelusuri isi blog, selain itu juga menjadi pinti masuk robot search engine dalam menelusuri link yang ada di dalam blog.

Tampilan menu navigasi bisa dilihat pada gambar di bawah ini

Untuk membuatnya login ke akun blogger



1. Pilih Dashboard - Tataletak - Edit HTML

cari kode berikut:

]]></b:skin>

2. Di bagian atas kode tersebut masukkan kode berikut

div#container
{ width:740px; position:absolute; left:50%; margin:0 -380px; background:#ffffff; border:10px solid #b9121b; height:400px; }

h1
{ width:738px; margin:1px; color:#4C1B1B; font:helvetica; font-size:24pt; overflow:hidden; padding:80px 0 0; vertical-align:middle; text-align:left; }
p { margin:0; padding:1.2em; }
p a:link,
p a:visited,
p a:hover,
p a:active
{ font-weight:bold; color:#b9121b; }

ul#navigation-1
{ margin:0; padding:1px 0; list-style:none; width:100%; height:21px; border-top:1px solid #b9121b; border-bottom:1px solid #b9121b; font:normal 8pt verdana, arial, helvetica;}
ul#navigation-1 li
{ margin:0; padding:0; display:block; float:left; position:relative; width:148px; }
ul#navigation-1 li a:link,
ul#navigation-1 li a:visited
{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#b9121b; color:#ffffff; width:148px; height:13px; }
ul#navigation-1 li:hover a,
ul#navigation-1 li a:hover,
ul#navigation-1 li a:active
{ padding:4px 0; display:block; text-align:center; text-decoration:none; background:#ec454e; color:#ffffff; width:146px; height:13px; border-left:1px solid #ffffff; border-right:1px solid #ffffff; }

ul#navigation-1 li ul.navigation-2
{ margin:0; padding:1px 1px 0; list-style:none; display:none; background:#ffffff; width:146px; position:absolute; top:21px; left:-1px; border:1px solid #b9121b; border-top:none; }
ul#navigation-1 li:hover ul.navigation-2
{ display:block; }
ul#navigation-1 li ul.navigation-2 li
{ width:146px; clear:left; width:146px; }

ul#navigation-1 li ul.navigation-2 li a:link,
ul#navigation-1 li ul.navigation-2 li a:visited
{ clear:left; background:#b9121b; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }
ul#navigation-1 li ul.navigation-2 li:hover a,
ul#navigation-1 li ul.navigation-2 li a:active,
ul#navigation-1 li ul.navigation-2 li a:hover
{ clear:left; background:#ec454e; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }

ul#navigation-1 li ul.navigation-2 li ul.navigation-3
{ display:none; margin:0; padding:0; list-style:none; position:absolute; left:145px; top:-2px; padding:1px 1px 0 1px; border:1px solid #b9121b; border-left:1px solid #b9121b; background:#ffffff; z-index:900; }
ul#navigation-1 li ul.navigation-2 li:hover ul.navigation-3
{ display:block; }
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link,
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited
{ background:#b9121b; }
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a,
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover,
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active
{ background:#ec454e; }
ul#navigation-1 li ul.navigation-2 li a span
{ position:absolute; top:0; left:132px; font-size:12pt; color:#fe676f; }
ul#navigation-1 li ul.navigation-2 li:hover a span,
ul#navigation-1 li ul.navigation-2 li a:hover span
{ position:absolute; top:0; left:132px; font-size:12pt; color:#ffffff; }

3.  Klik tombol "Simpan Template"

4. Buka halaman "Tata Letak -> Elemen Halaman"

5. Pada Elemen header , klik " Tambah Gadget"

6. Pilih gadget html/javascript

masukkan script berikut :

<div id="container">
<br><br>
<ul id="navigation-1">
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="Products">Products</a>
<ul class="navigation-2">
<li><a href="#" >Notebook</a></li>
<li><a href="#" >Modem<span>»</span></a>
<ul class="navigation-3">
<li><a href="#">GSM Modem</a></li>
<li><a href="#">CDMA Modem</a></li>
</ul>
</li>
<li><a href="#">Desktop PC</a></li>
<li><a href="#">Accessories <span>»</span></a>
<ul class="navigation-3">
<li><a href="#">VGA Card</a></li>
<li><a href="#">Sound card</a></li>
<li><a href="#">TV Tuners</a></li>
<li><a href="#">Modem</a></li>
<li><a href="#">Mainboard</a></li>
<li><a href="#">Firewire</a></li>
<li><a href="#">Hardisk</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#" title="Your Account">Your Account</a>
<ul class="navigation-2">
<li><a href="#" title="Log In">Log In</a></li>
<li><a href="#" title="Register">Register</a></li>
</ul>
</li>
<li><a href="#" title="Help">Help</a>
<ul class="navigation-2">
<li><a href="#" title="FAQs">FAQs</a></li>
<li><a href="#" title="Forum">Forum</a></li>
<li><a href="#" title="Contact Us">Contact Us</a></li>
</ul>
</li>
<li><a href="#" title="Blah">Links</a>
<ul class="navigation-2">
<li><a href="#">Artikel Komputer</a></li>
<li><a href="#">Amazon</a></li>
<li><a href="#">Clothes</a></li>
<li><a href="#"> Computer Articles<span>»</span></a>
<ul class="navigation-3">
<li><a href="#">My Computer Dummies</a></li>
<li><a href="#">Dummy Blog</a></li>
<li><a href="#">Feed</a></li>
</ul>
</li>
</ul>
</li>
</ul>

</div>

Catatan:
Pada script di atas
Ganti  semua tanda # pada href="#" dengan url target atau url tujuan.

Contoh blog yang memakai menu horisontal bisa dilihat disini menu horisontal

READ MORE - Membuat menu dropdown menggunakan css script (menu navigasi horisontal)

Categories: Trik Blogger

Cara membuat Text Area

Kali ini panduan sukses blogger membahas cara membuat text area pada blog, Bagi yang sudah lama berpetualang di dunia blogger, pasti sudah mengerti cara membuat text area. tetapi ini tidak untuk yang baru. seperti salah satu teman blogger kita. yang meminta saya untuk membuat artikel ini. dari pertanyaan sobat tersebut ada juga ide untuk bisa update terbaru. walaupun artikelnya sudah jadul hehehe.

Apasih Text Area itu? Text area itu adalah tempat untuk menyimpan text atau tulisan dengan membentuk area baru. biasanya text area ini digunakan untuk menyimpan kode-kode HTML atau text lainnya agar bisa di copy secara langsung oleh pengunjung. contohnya seperti tempat tukar link, tukar banner, atau yang lainnya. Nah pingin tau caranya? lihat cara di bawah ini.

Berikut ini langkah-langkah cara membuat Text Area tersebut

• Login terlebih dahulu ke blogger
• Rancangan
• Tambah Gadget
• Pilih HTML/JavaScript
• Kemudian copy dan pastekan kode dibawah ini kedalam nya
  <p align="center"><textarea name="code" rows="8" cols="30"> Letakkan text ataupun kode lainnya yang anda inginkan di sini </textarea></p>
• Kemudian simpan. selesai.......

Catatan:

• Tukar tulisan yang berwarna biru dengan text yang anda ingin tampilkan
• Nah untuk mengatur tinggi dan lebarnya anda bisa mengganti angka yang berwarna merah tersebut.rows="8" untuk tinggi dan cols="30" untuk lebar.

Semoga artikel ini bermanfaat untuk kita semua dan salam sukses...

READ MORE - Cara membuat Text Area

Categories: Trik Blogger

Menghilangkan ikon obeng atau quickedit Blogger

Menanggapi pertanyaan dari beberapa blogger… hehehe… kang Rohman serasa jadi konsultan blogger saja ya kalau posting biasanya pake kata-kata tersebut soalnya “ Your Questions is my inspiration” pertanyaan anda adalah inspirasiku. Jadi rahasia kenapa blog ini masih bisa bertahan sampai sekarang adalah karena masih ada yang bertanya ke kang Rohman. So, tentu saja ide untuk posting selalu ada. Eh..eh.. ko…gitu sich.. la ko  jadi ngelantur nih, kembali ke judul posting ini ah.
Apa sih maksud dari judul posting ini, sepertinya agak aneh? begini nih teman-teman, jika kita sedang mengedit template dan melihat hasilnya maka pada sudut-sudut element akan terlihat icon bergambar obeng dan tang. berikut contoh screenshotnya :

Icon tersebut di sebut juga dengan icon Quick Edit atau dengan kata lain untuk mengedit secara cepat. Fungsinya jika kita ingin melakukan editing terhadap elemen tersebut tinggal klik saja icon nya dan kita bisa langsung mengeditnya. Icon tersebut sebenarnya hanya bisa di lihat apabila kita sedang login ke blogger saja, sedangkan pengunjung yang lain tidak bisa melihat icon tersebut.
Namun ternyata ada beberapa blogger yang tidak suka dengan kehadiran icon tersebut dan ingin menghapusnya. Apakah kita bisa  menghapus icon tersebut? Jawabannya tentu saja bisa, dan sangatlah gampang karena kita hanya melakukan perintah agar icon itu tidak di munculkan dengan hanya manambahkan sedikit kode pada kode CSS template kita. Ingin tahu kodenya seperti apa, nih ini dia kodenya, coba pasang saja di Style Sheet CSS anda :

.quickedit{
display:none;
}

Mudah sekali bukan? atau masih bingung. Ok deh, ini dia cara lengkapnya :

1. Login ke blogger dengan ID anda tentunya.
2. Klik  Tata Letak.
3. Klik tab Edit HTML.
4. Cari kode seperti ini :
   ]]></b:skin>
   
   
5. Copy paste kode berikut persis di atas kode yang tadi :
   
   .quickedit{
   display:none;
   }
   
   
6. Klik tombol Simpan template.
   
7. Selesai.
   

Selain langkah di atas, sebenarnya masih ada yang harus anda lakukan yaitu silahkan ucapkan “ Selamat tinggal Obeng dan Tang…dadaaahhhhh “ hehehe….

Selamat mencoba!

READ MORE - Menghilangkan ikon obeng atau quickedit Blogger

Categories: Trik Blogger

Cara Membuat Tombol Back To Top

CARA MEMBUAT TOMBOL BACK TO TOP – Tau apa yang dimaksud back to top ini? Back to top ini adalah tombol atau gadget atau widget yang fungsinya memindahkan posisi scroll browser dari bawah ke atas. Dengan kata lain, jika kita sedang berada di suatu situs, dan kita sedang berada di footer / di bagian bawah dari situs tersebut, kita klik tombol back to top tadi maka otomatis kita akan berpindah ke atas halaman dari situs tsb. Posisi tombol back to top ini nantinya setelah dipasang adalah pojok kanan bawah. Tinggal klik maka pindah.


Tombol ini boleh juga dibilang lip-nya situs.  Bahkan lebih cepat dari sebuah lip biasa. Tapi, yaitu lah kelemahannya. Sebenarnya sih kelemahan bisa di atasi, asalkan tahu ilmu tentang buat link satu halaman. Kalau tahu tinggal modifikasi aja yang baru. OK…


Nah, untuk membuat tombol back to top ini sangat mudah. Yang perlu diketahui hanya dasar-dasar pemahaman blogger aja. Apa itu? Yaitu cara menambahkan widget baru di side bar. OK, perhatikan di bawah. Ada dua macam tombol back to top-nya. Kalau boleh recomend, pilih aja yang model yang pertama, lebih gokil, cara berpindahnya pun lebih beda. Tapi, kalau yg mau ringan-ringan, pilih aja yang kedua.


# Pertama:
Pastekan aja script di bawah gambar di side bar blog sobat modif. ( Elemen laman >> Klik add gadget ). Gambar di bawah ini nantinya berfungsi untuk tombol back to top-nya. Gambarnya ga dapat diganti. Jangan lupa akhiri dengan save.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <script src="http://dl.dropbox.com/u/1960768/black.js" type"text/javascript"></script>

# Kedua:
Pastekan di side bar kode di bawah gambar di side bar blog sobat modif. Pastekan aja suka hati dimana. Kalau mau ganti gambarnya, ganti aja URL gambar yang digaris bawahi.  Lalu akhiri dengan save.

<a href='#' style='display:scroll;position: fixed; bottom:5px;right:5px;' title='Back to Top'><img src=' http://i396.photobucket.com/albums/pp48/putro16/Jumptotop.gif >

Bagaimana sekarang blog sobat modif dengan tombol back to top nya, mantebkan.. Sekian dulu ya tutorial cara buat tombol back to top - nya. Wassalam...

READ MORE - Cara Membuat Tombol Back To Top

Categories: Trik Blogger

Memasang dan Kustomisasi Auto Readmore

Sebenarnya artikel mengenai cara memasang Auto Readmore sudah banyak sekali bertebaran didunia maya ini. Tapi, dalam rangka guna melengkapi artikel blog ini dan berhubung juga ada seorang sahabat blogger yang bertanya, akhirnya sekalian saja dech di Post. hehe. 

Readmore merupakan salah satu blog hack yang lumayan digandrungi bagi pemain blog khususnya dalam platform Wordpress dan Blogspot. Dengan fungsi "Readmore" kita bisa menghemat halaman depan blog kita dengan maksud kita bisa menunjukkan banyak post dalam satu halaman depan. Lagipula penggunaan fungsi "Readmore" ini bisa mengurangi penggunaan bandwith yang besar. Karena isi artikel blog di load hanya separuh dari seluruhnya. Berbeda bila kita tidak menggunakan fungsi "Readmore", pasti blog akan tampak panjaaang turun kebawah. Walaupun mungkin sudah diatur berapa post yang akan ditampilkan dalam halaman depan, tapi kalau tulisannya panjang ya sama saja donk. ehehe :D .

Nah, lalu bagaimana cara menggunakan fungsi Readmore ?. 

Pertama, kita bisa menggunakan fungsi "Jump-Break" di teks editor blogspot yang baru dengan mengklik tombol/ icon "Jump-Break" yang biasanya terletak di pojok paling kanan atas dari menu teks editor blogspot setelah anda menetapkan kursor pada akhir teks yang akan anda pakai sebagai ringkasan artikel anda.

Kedua, bisa dengan cara memasukkan kode tag <!-- more -->  dalam mode Edit HTML pada posisi akhir/batas teks yang ingin anda tampilkan sebagai ringkasan posting anda.

Lalu, untuk kustomisasinya agar kata-kata "Readmore" nya sesuai dengan yang anda inginkan, misalnya diganti dengan kata "Baca Selanjutnya" , "Lanjutkan" bisa dengan mensetting pada widget blog post pada tab Layout (Page Element) akun blogger anda. 

Untuk yang Ketiga, anda bisa menggunakan fungsi Auto-Readmore. Tentu fungsi ini belum ada pada blogspot. Maka dari itu anda perlu untuk menambahkannya sendiri. bila ingin menambahkannya, berikut caranya.

Tentu anda harus sudah login dalam akun blogger anda. Dan tuju ke halaman Layout ► Edit HTML. Jangan lupa untuk mencentangi kotak kecil bertuliskan "Expand Widget Templates". Cari kode </head> . Copy-Paste kode dibawah ini di atas kode </head> tersebut. 

<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 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>

Lalu, cari dan temukan kode <data:post.body/> . Anda bisa menggunakan CTRL+F untuk mencari kode tersebut.
Kalau sudah ketemu ganti kode <data:post.body/> dengan semua kode dibawah ini.

<b:if cond='data:blog.pageType != "item"'>
<div 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 == &quot;item&quot;'><data:post.body/></b:if>

Silahkan di simpan dahulu. :) . Sampai disini, sebenarnya anda sudah selesai, tapi agar tampilannya bisa sedikit rapi, berikut beberapa tips dan triknya.

Keterangan :

• var thumbnail_mode = "float";  (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
• summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
• summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
• img_thumb_height = 120; (Thumbnail 'tinggi gambar dalam piksel)
• img_thumb_width = 120; (Thumbnail 'lebar gambar dalam piksel)

Tips dan trik tambahan. 

• Hilangkan kode <data:post.title/> . Yaitu kode yang terletak di sebelah kanan Tulisan READMORE. Agar nantinya link readmore anda tidak diikuti dengan judul posting anda. Misalkan kata readmorenya "Baca Selanjutnya" lalu Judul Postingnya "Cara Membuat Blog" maka menjadi "Baca Selanjutnya Cara Membuat Blog". Maka, bila judul posting anda panjang, maka link readmore anda akan menjadi panjang juga. Jadi, lebih baik dihilangkan saja.
• Ganti Tulisan READMORE dengan kata yang anda inginkan.
• Ganti kode left dalam kode <span class='rmlink' style='float:left'> menjadi right. Sehingga akan tempak seperti ini kodenya. <span class='rmlink' style='float:right'&gt; .Ini akan membuat link READMORE anda berada disebelah kanan bawah post.
• Atau bila anda ingin menggunakan gambar sebagai link READMORE, ganti kata READMORE dalam kode di atas dengan kode berikut,

<img alt='Read More' src='http://i792.photobucket.com/albums/yy204/shamanking96/12-mini-allblogtools.jpg'/>

Gantii URL gambar yang dipakai, misal http://i792.photobucket.com/albums/yy204/shamanking96/12-mini-allblogtools.jpg dengan URL gambar yang anda inginkan.

Untuk diperhatikan, gambar pertama dalam posting lah yang akan digunakan sebagai gambar pembuka dan sebagai ikon sebuah posting (artikel) anda.

Save template anda. Bila ada yang belum atau kurang jelas silahkan bertanya lewat komentar. Atau bahkan dalam post atau post (artikel) ini ada yang kurang, mohon petunjuknya. Terima kasih :) .

Selamat Mencoba dan Semoga berhasil.

READ MORE - Memasang dan Kustomisasi Auto Readmore

Categories: Trik Blogger

Cara Membuat Tab View Menu

Untuk menghemat tempat, tab view menu sangat efisien. Ukuran yang relatif kecil tapi bisa memuat banyak space. Hal ini pernah ditanyakan oleh sobat blogger pada kolom shout box beberapa minggu yang lalu tentang bagaimana cara membuat menu yang bisa memuat banyak judul, mungkin menu tab view ini yang dimaksud ya.

Membuat menu dengan tab view memerlukan kode HTML yang lumayan panjang dan agak ribet, jadi sebaiknya simak baik – baik tutorial ini dan yang paling penting jangan lupa untuk backup template sobat terlebih dahulu.


 
Jika setelah jadi nanti lebar atau tinggi menu tidak sesuai, silahkan sobat sesuaikan sendiri dengan isi dari menu yang sobat gunakan. Karena jika tidak mengerti akan jadi berantakan atau terlihat jelek. Oke sob, sudah mengerti toh…mantaabbbbb kita langsung ke TKP.

1. Silahkan login ke blogger dengan ID sobat tentunya.
   
2. Tuju Tata Letak.
   
3. Klik Edit HTML.
   
4. Jangan lupa backup template sobat terlebih dahulu dengan mengklik Download Template Lengkap.
   
5. Kemudian letakkan kode javascript berikut sebelum kode </head>
   
   <script type='text/javascript'>
   //<![CDATA[
   function tabview_aux(TabViewId, id)
   {
     var TabView = document.getElementById(TabViewId);
     // ----- Tabs -----
     var Tabs = TabView.firstChild;
     while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
     var Tab = Tabs.firstChild;
     var i   = 0;
     do
     {
       if (Tab.tagName == "A")
       {
         i++;
         Tab.href      = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
         Tab.className = (i == id) ? "Active" : "";
         Tab.blur();
       }
     }
     while (Tab = Tab.nextSibling);
     // ----- Pages -----
     var Pages = TabView.firstChild;
     while (Pages.className != 'Pages') Pages = Pages.nextSibling;
     var Page = Pages.firstChild;
     var i    = 0;
     do
     {
       if (Page.className == 'Page')
       {
         i++;
         if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
         Page.style.overflow = "auto";
         Page.style.display  = (i == id) ? 'block' : 'none';
       }
     }
     while (Page = Page.nextSibling);
   }
   // ----- Functions -------------------------------------------------------------
   function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
   function tabview_initialize(TabViewId) { tabview_aux(TabViewId,  1); }
   //]]>
   </script>
   
   
6. Setelah itu letakkan kode berikut di atas kode ]]></b:skin>
   
   div.TabView div.Tabs
   {
   height: 30px;
   overflow: hidden;
   }
   div.TabView div.Tabs a
   {
   float: left;
   display: block;
   width: 98px; /* Lebar Menu Utama Atas */
   text-align: center;
   height: 30px; /* Tinggi Menu Utama Atas */
   padding-top: 3px;
   vertical-align: middle;
   border: 1px solid #BDBDBD; /* Warna border Menu Atas */
   border-bottom-width: 0;
   text-decoration: none;
   font-family: "Verdana", Serif; /* Font Menu Utama Atas */
   font-weight: bold;
   color: #000; /* Warna Font Menu Utama Atas */
   -moz-border-radius-topleft:10px;
   -moz-border-radius-topright:10px;
   }
   div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
   {
   background-color: #E6E6E6; /* Warna background Menu Utama Atas */
   }
   div.TabView div.Pages
   {
   clear: both;
   border: 1px solid #BDBDBD; /* Warna border Kotak Utama */
   overflow: hidden;
   background-color: #E6E6E6; /* Warna background Kotak Utama */
   }
   div.TabView div.Pages div.Page
   {
   height: 100%;
   padding: 0px;
   overflow: hidden;
   }
   div.TabView div.Pages div.Page div.Pad
   {
   padding: 3px 5px;
   }
   
   
7. Kemudian Simpan Template.
   
8. Langkah selanjutnya, silahkan sobat klik Tata Letak.
   
9. Klik Elemen Halaman dan tambahkan Gadget.
   
10. Pilih yang HTML / Javascript, dan tambahkan kode berikut kedalamnya.
    
    <form action="tabview.html" method="get">
    <div class="TabView" id="TabView">
    <div class="Tabs" style="width: 300px;">
    <a>Tab 1</a>
    <a>Tab 2</a>
    <a>Tab 3</a>
    </div>
    <div class="Pages" style="width: 300px; height: 250px;">
    <div class="Page">
    <div class="Pad">
    Tab 1.1 <br />
    Tab 1.2 <br />
    Tab 1.3 <br /> </div>
    </div>
    <div class="Page">
    <div class="Pad">
    Tab 2.1 <br />
    Tab 2.2 <br />
    Tab 2.3 <br />
    </div>
    </div>
    <div class="Page">
    <div class="Pad">
    Tab 3.1 <br />
    Tab 3.2 <br />
    Tab 3.3 <br /> </div>
    </div>
    </div>
    </div>
    </form>
    <script type="text/javascript">
    tabview_initialize('TabView');
    </script>
    
    
11. Kemudian Simpan.

Keterangan :

• Untuk kode yang berwarna merah adalah lebar dan tinggi menu, silahkan sobat sesuaikan dengan isi.
  
• Kode yang berwarna biru silahkan sobat isi dengan judul - judul dari menu.
  
• Dan yang berwarna ungu, adalah isi dari menu. Sobat bisa menambahkan link, gambar, banner, dll.

Oke sobat, selamat mencoba.

READ MORE - Cara Membuat Tab View Menu

Categories: Trik Blogger