Warung Bebas
HOME SING IN LOG OUT
SELAMAT DATANG DI WITTO BLOG | TEMPAT NONGKRONG PARA BLOGGER | Voucher Bersama - Witto Blog - Tutorial Blog | SELAMAT MENUNAIKAN IBADAH PUASA MOHON MAAF LAHIR DAN BATHIN | MAAF ATAS KE TIDAK NYAMANANNYA
Tampilkan postingan dengan label Blogger Widget. Tampilkan semua postingan
Tampilkan postingan dengan label Blogger Widget. Tampilkan semua postingan

Kamis, 17 Maret 2011

Efek Gambar Membesar Saat Kursor Di Atas Gambar

Kamis, 17 Maret 2011
3 komentar
Efek Gambar Membesar Saat Kursor Di Atas Gambar adalah gambar yang apabila disorot memberikan efek zoom.  Pasti keren, bisa buat ngilangin stress.>

Gambar yang terpasang di bawah akan membesar jika disorot mouse, silahkan dicoba letakkan cursor di atas gambar pasti akan membesar.




Teknik pembuatannya tidaklah sulit, cukup CopPas saja code ini lalu letakkan pada halaman posting atau sidebar Blogger Anda.

    <style type="text/css">
    border: none;
    vertical-align: top;
    </style>
    <script src="http://menyimpan.googlecode.com/files/membesar.js.txt" type="text/javascript">
    </script><img border="0" class="expando" height="100" src="URL GAMBAR ANDA" width="100" />

Contoh penerapannya:

    <style type="text/css">
    border: none;
    vertical-align: top;
    </style>
    <script src="http://menyimpan.googlecode.com/files/membesar.js.txt" type="text/javascript">
    </script><img border="0" class="expando" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGJa4VyCNBOlwE0i0EooGoA9quljLIEqr_RPvYla8duyk094Ck2-SPG1V6yz0Cmq0a4XfuLclP7_dQrUP8M_6IGga4U9lNF_C9iN_xMC3hPJZrHkhlarHL1twSiFtcLrxeV1_zwv_S6zER/s1000/ingin-pulsa1.gif" width="100" />

Hasilnya seperti gambar pada postingan ini.

Keterangan :

    * Untuk membuat gambar disorot jadi membesar, sebelumnya sobat harus mengupload gambar dulu supaya didapat URL GAMBAR nya.
    * Ukuran gambar sesungguhnya harus lebih besar dari gambar yang ditampilkan supaya kelihatan efek gambar membesarnya.
Sekian Selamat mencoba.

read more

Minggu, 05 September 2010

Membuat Tombol Next Page Nomor Halaman Pada Blog

Minggu, 05 September 2010
12 komentar
Ingin membuat tombol Next Page 1, 2, 3,4 >> ... pada blogger ? jangan khawatir kita bisa memasangnya dengan mudah di blogger sehingga pengunjung dengan mudah mengeksplorasi halaman artikel kita lebih leluasa dan untuk mempercantik blog supaya lebih kelihatan professional lagi.

Sebenarnya untuk membuat Next Page / Navigasi Halaman itu caranya sangat mudah kita hanya perlu menambahkan script pada Fotter dari blogger kita.

caranya seperti ini :

1. Pertama-tama Copy Code dibawah ini






<style>
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #ccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #ccc;
background-color:#ccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #ccc;
background: #ccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #ccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}

</style>






<script type="text/javascript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

var pageCount=5;
var displayPageNum=6;
var firstPageWord = 'First';
var endPageWord = 'last';
var upPageWord ='Back';
var downPageWord ='Next';


var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '&nbsp;<span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"></span>'+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span class="showpage"> Total '+(postNum-1)+': </span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;

}

if(postNum==1) postNum++;
html += '</div>';

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
</script>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>



2. Setelah itu seperti biasa masuk Rancangan

3. Lalu tambahkan Add Page Element / Gedget --> HTML/Javascript pada bagian Fotter dan Paste Code yang di atas tersebut

4. Setelah itu save, Lalu geser gadget tersebut ke bagian bawah kotak postingan Anda, seperti gambar di bawah ini:

witto blog

Jadi deh...

Catatan : Jika setelah melakukan ini tidak berhasil, maka setelah halaman blog kamu tampil coba kamu klik older post dulu satu kali. Di beberapa template fungsi ini muncul mulai halaman kedua. Kalau Tidak Muncul Juga, Coba Kamu klik pada label blog yang memiliki artikel banyak, nanti akan muncul di situ. Karena memang beberapa template tidak mendukung script ini.

Tambahan :
Untuk menambah jumlah posting yang ingin di tampilkan ganti angkanya var pageCount=5 Selamat Mencoba. Terima Kasih

read more

Rabu, 25 Agustus 2010

Cara Pasang Widget Total Post dan Total Comment

Rabu, 25 Agustus 2010
4 komentar
Widget Total Comment dan Total Post adalah salah satu yang banyak dipasang pada blogger, lebih dikenal di indonesia sebagai Statistik Jumlah Komentar dan Jumlah Posting. Dengan memasang widget ini maka akan dapat terlihat sudah berapa total jumlah komentar pada blog anda. Penampilannya akan nampak seperti ini atau di kiri atas sidebar blog ini :


Untuk tidak memperpanjang kalimat kita langsung saja menuju TKP !!!

Seperti biasa nya buat sobat selalu saya ingat kan :
1. Login pada Blogger
2. Klik Rancangan pada Dashboard.
3. Klik Add a Gadget/Tambah Widget.
4. Pilih Add HTML/Javascript
5. Copy dan paste kode dibawah ini.
<script src="http://gadogadorahma.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"></script><script style="text/javascript">function numberOfPosts(json) {document.write('Total Posting: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');}</script><script src="http://gadogadorahma.blogspot.com/feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script><script src="http://gadogadorahma.blogspot.com/feeds/comments/default?orderby=published&alt=json-in-script&callback=rp"></script><script style="text/javascript">function numberOfComments(json) {document.write('Total Komentar: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');}</script><script src="http://gadogadorahma.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script><br /><a href="http://www.t-w-t.co.cc/2010/08/cara-pasang-widget-total-post-dan-total.html" style="font-size:10px;font-family:verdana;color:#000;margin:2px 4px;margin-top:0;">Pasang Widget</a><script type="text/javascript" src="http://www.t-w-t.co.cc/2010/08/cara-pasang-widget-total-post-dan-total.html" /></script>

Catatan: Gantilah teks yang berwarna Biru gadogadorahma dengan nama blog kamu!

6. Selanjutnya Save.
Semoga bermanfaat dan selamat mencoba..

read more

Cara Membuat Iklan Melayang dengan Tombol Close 1 Kali


Mungkin pembahasan saya ini sudah banyak dan para sahabat semua sudah paham dengan ini,. tapi saya kan membahasnya lagi karna dari artikel sebelumnya yang membahas Cara Membuat Iklan Melayang dengan Tombol Close dan ini memakai close 2 kali klik, untuk pembahasan kali ini saya akan membahas tentang Cara Pasang Iklan Melayang Dengan 1 kali close.

Kode yang kita gunakan sama persis dengan kode sebelumnya pada artikel Cara Membuat Iklan Melayang dengan Tombol Close. di sini hanya menambahkan sedikit saja kodenya.

Langsung aja ya ???
So pasti semua dah tau kan cara menambah gadget baru,. dan langsung CopPas aja Kode dibawah ini :
<a onblur="try {parent.
deselectBloggerImageGracefully();} catch(e) {}" href="http://gadogadorahma.blogspot.com"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqGCdFTc3X6CQDw4kHs47HBXGO2g0Jsu_056h534byx8fMMNrmedty3gzGHY9uoU0Ov-4Pi_DyZWqtMj94ODCpsNPrQCyk-3LVt1g2JfLULc9HKNIE7vHTQ0Jr2aUgmgl1cXR7vU1t5BQ/s800/wa.JPG" alt="" id="witto blog" border="0" /></a>


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


.gbcontent{
float:right;
border:2px solid #A5BD51;
background:#ffffff;
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-100;
gb.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

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

<div class="gbcontent">

<div style="text-align:right">
<a href="javascript:showHideGB()">
.:[Close][Klik 1x]:.
</a>
</div>
<center>

Masukan Kode iklan atau Gambar yang anda inginkan di sini

</center>
<div style="text-align:left">
<a href="http://www.t-w-t.co.cc/2010/07/cara-membuat-iklan-melayang-dengan.html">
Get Widget
</a>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.center = (20-gb.offsetWidth).toString() + "px";
</script></center></div></div>
Semoga bermanfaat,.
Salam.

read more

Senin, 23 Agustus 2010

Update Terbaru !!! Page views Counter di Bawah Posting

Senin, 23 Agustus 2010
2 komentar
Pada Sebelumnya sudah pernah di bahas tentang membuat Page Views Counter dari sahabat ihsan.com sekarang ada update terbaru yang akan saya berikan buat sahabat sekalian,.
ikuti langkah nya ya ???

Cara Menggunakannya
(How to Use It):

Blogspot :

1. Add Gadget for Reciprocal Verify

Login ke blogspot, Klik "Rancangan" kemudian Klik "Element Laman" dan "Tambah Gadget" pilih "HTML/JavaScript" masukan kode dibawah kemudian simpan (Login to the blogspot, click "Design" then click "Page Element" and "Add Gadget" select "HTML/JavaScript" paste the code and save).

<a href="http://www.putchoice.com/">
<img border="0" src="http://www.putchoice.com/picture.php?type=png" alt="Page Hits Counter"/></a>
2. Add Edit HTML for Show

Klik "Rancangan" kemudian Klik "Edit HTML". Dan beri centang Expand Template Widget. Sisipkan kode dibawah setelah <data:post.body/>.

Login to the blogspot, click "Design" then click "Edit HTML". And check Expand Widget Templates.
Paste the code after <data:post.body/>.

<b:if cond='data:blog.pageType == "item"'>
<div id="hit-counter">
<script src="http://www.putchoice.com/stats.php?p=stats" type="text/javascript"></script> Views
</div>
</b:if>
3. Setelah kode dimasukan silahkan keluar dari login admin dan tutup halaman blog anda (After the code is input please exit and close the admin login page for your blog).

4. Page Hits Counter akan muncul setelah di refresh 3 kali atau telah 3 kali dikunjungi (Page Hits Counter will appear after the refresh 3 times or it's has three times visited.).

Peringatan :
Jangan memodifikasi Kode Verifikasi (Langkah pertama) ataupun membuangnya sewaktu-waktu, Logout/keluar sebagai admin blog dan refresh halaman sebanyak 3 kali. (Do not modify the Verification Code (first step) or throw it at any time, Logout / exit as the blog admin and refresh this page 3 times).

Untuk Lebih lengkapnya kunjungi : http://www.putchoice.com/?act=hits

read more

Jumat, 30 Juli 2010

Cara Pasang Recent Comment Dengan Comment Banyak

Jumat, 30 Juli 2010
4 komentar
Postingan ini bagi anda yang mau pasang recent comment atau komentar terbaru di blog anda. Ini bagus untuk mengetahui komentar pengunjung, apalagi jika blog anda sudah rame.

Recent Comment kali ini mempunyai keunggulan jumlah komentar yang ditampilkan bisa lebih banyak daripada menggunakan cara lama.

Langsung saja, Login pada blogger anda dan masuk pada Dashbor, pilih Rancangan - tambah Gadget - pilih HTML Code/Javascript, kemudian kopi paste script berikut :
<script style="text/javascript" src="http://wittoblog.googlecode.com/files/komentar.js"></script><script style="text/javascript">var numcomments = 10;var showcommentdate = true;var showposttitle = true;var numchars = 80;var standardstyling = true;</script><script src="http://gadogadorahma.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
Catatan : Ganti code yang berwarna hijau dengan Alamat Blog anda.

read more

Rabu, 28 Juli 2010

Pasang Translator di Pojok Kanan Blogger

Rabu, 28 Juli 2010
7 komentar
Malam belum bisa tidur hanya ingin mempercantik blogger dengan menampilkan translator pada pojok kanan atas. Sebenarnya mata sudah mengantuk banget habis dari tadi susah banget ngedit nya code yang buat botak kepala.

Langsung aja deh ya soal nya gak tahan lagi udah ngantuk banget nih,.

  • Harus login dulu ke Blogger
  • Pilih Rancangan >> Edit HTML
  • CopPas code di bawah ini tepat di atas code ]]</b:skin>
#trik_witto {
position:fixed;
_position:absolute;
top:0px;
right:180px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }


  • Sobat bisa mengganti warna merah itu sesuai dengan posisi yang ingin sobat letakkan.
  • Kemudian CopPas lagi code dibawah ini tepat di bawah code <body>

<div id="trik_witto">
<a style="font-size: 12px; color: rgb(97, 100, 105); font-weight: bold;" href="http://www.t-w-t.co.cc/2010/07/cara-pasang-translet-versi-2.html" target="" title="Cara Pasang Translet">Languages :</a>
<a href="http://www.blogger.com/post-edit.g?blogID=5125888041114308520&amp;postID=1026262847814128677#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cfr&amp;hl=en'); return false;"><img alt="English" title="English" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEQ0jS5Igjz0RI3ZUV7jXVQvdn-Z1wyLrnCnStsTTl18YaULnlSe52nUc0OlghR4lzFHjNiE9dBpX5OzTwurRTduznOWPyTSM7QTOM1bGBRFwZG_l24SPBnHVftyDU9_IBdPmgGZAYGUFZ/s800/english.gif?imgmax=800" style="cursor: pointer; margin-right: 2px;" align="absbottom" border="0" width="20" height="15" /></a>
<a href="http://www.blogger.com/post-edit.g?blogID=5125888041114308520&amp;postID=1026262847814128677#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cfr&amp;hl=en'); return false;"><img alt="French" title="French" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDcA8Nbpddzsj0svc5hXpmzxbc7D4up3BNIn0AhiIgQgb8NRTzfF-ahPyVmrsU6wUjrRgRLNuAfvYvBVXvmSvGKaNzxFW_SMjH8Z07WNFKN9AuE7JEJBi5H9-XsKCuleU_RlZ2YIae2Gnz/s800/frances.gif?imgmax=800" style="cursor: pointer; margin-right: 2px;" align="absbottom" border="0" width="20" height="15" /></a>
<a href="http://www.blogger.com/post-edit.g?blogID=5125888041114308520&amp;postID=1026262847814128677#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cde&amp;hl=en'); return false;"><img alt="German" title="German" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhY0Q_x6265Ip5zCK7gMyvydAIi-Omp2SbCXvXxtc3chsXNm4RLz5MGaCIVcnRkvBRN3sfAhIACDn8I5I-lribyzIkxZcngmfOUTcHwqsLQ_n3YSdm_cRV3jKuelImxjSND-uXmZKtNlAfK/s800/german.gif?imgmax=800" style="cursor: pointer; margin-right: 2px;" align="absbottom" border="0" width="20" height="15" /></a>
<a href="http://www.blogger.com/post-edit.g?blogID=5125888041114308520&amp;postID=1026262847814128677#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Ces&amp;hl=en'); return false;"><img alt="Spain" title="Spain" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2vxhzHInclr9KS-LwvlXIYld4OZMV8YKuAcaPEaJa13b5iw17kjn8FP-gvpxWo__BoVFAklI15KbC4V5YVEzd6FqB4s4nlbX9YqBzpigXKnxWkZbKJl9ePo-9W0MXRGNltulvNDImTZLm/s800/spain.gif?imgmax=800" style="cursor: pointer; margin-right: 2px;" align="absbottom" border="0" width="20" height="15" /></a>
<a href="http://www.blogger.com/post-edit.g?blogID=5125888041114308520&amp;postID=1026262847814128677#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cit&amp;hl=en'); return false;"><img alt="Italian" title="Italian" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzw3s9CTwp5rxi6cpfzOM0VkZ-o4BpmL7zpS1K9XSRUHWDwZYbeMWdffFmPDrDzovAGHURxQNrF1j3HtQ_l8KpTYkKiUnMN9juy73YM7P79cxN-AsaEmquXtVwL4wzbaWyNE5c6TxVVtsP/s800/italian.gif?imgmax=800" style="cursor: pointer; margin-right: 2px;" align="absbottom" border="0" width="20" height="15" /></a>
<a href="http://www.blogger.com/post-edit.g?blogID=5125888041114308520&amp;postID=1026262847814128677#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cnl&amp;hl=en'); return false;"><img alt="Dutch" title="Dutch" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj_oYOYk0X8I7ApheSVnuUGdIgGI_uobONYHCi3IqcdXTvVQsnXMKYL5PrBlOJn1zLfo34kP-KB0hydT3nuCH9PeQRDV6tLnat8a630WKFQX8GaElxtUTHekmvP-JZ41KlsWwYfvFvs4lE/s800/dutch.gif?imgmax=800" style="cursor: pointer; margin-right: 2px;" align="absbottom" border="0" width="20" height="15" /></a>
<a href="http://www.blogger.com/post-edit.g?blogID=5125888041114308520&amp;postID=1026262847814128677#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cru&amp;hl=en'); return false;"><img alt="Russian" title="Russian" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt2VpIpzGhna3rsan0qxoCeQea49QwplZQTXRKfq3XmAdePOToeqC1iK-rRZDo4z3JNnxoAaigqdUTOK8hL-VswL7rCbw9evFSGBzPTRO3DQgWDqFTcmMi6A4NQmy13j0PWN07euDXtlFb/s800/russian.gif?imgmax=800" style="cursor: pointer; margin-right: 2px;" align="absbottom" border="0" width="20" height="15" /></a>
<a href="http://www.blogger.com/post-edit.g?blogID=5125888041114308520&amp;postID=1026262847814128677#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cpt&amp;hl=en'); return false;"><img alt="Portuguese" title="Portuguese" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZOQK5OdrpvjyXXiqfNdilFQewQ_NkmURp-cMZt4ec9Alk7Q3Ym7opzSNvI_nDFCyt77hlysd0P8H-wlqErU_8L5-M2uw037PnqgMO1VoFylRx2AKX86BN_RpU9h9wvN4yNGSdjwtIehv3/s800/prtugal.gif?imgmax=800" style="cursor: pointer; margin-right: 2px;" align="absbottom" border="0" width="20" height="15" /></a>
<a href="http://www.blogger.com/post-edit.g?blogID=5125888041114308520&amp;postID=1026262847814128677#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cja&amp;hl=en'); return false;"><img alt="Japanese" title="Japanese" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWQqcTYejwDTEOi2LLNSFFCueZkc3pDj_vLCVLRj3QlaouLyv3cCr78RxzvhlOaomUM5tUkNiDmMJUjNWT1WeK4OCWfI7Xst3SY1Zisk-1vVz1EzPYbhka-dNFWGzD-Hb2xKCkYyhiUXzb/s800/jepang.gif?imgmax=800" style="cursor: pointer; margin-right: 2px;" align="absbottom" border="0" width="20" height="15" /></a>
<a href="http://www.blogger.com/post-edit.g?blogID=5125888041114308520&amp;postID=1026262847814128677#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cko&amp;hl=en'); return false;"><img alt="Korean" title="Korean" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrC1PtfOI8UxP4j3A99iFk4ABU2GxpFC5g5ual5pTB2UDYHv6s9XUyMGW4_r-2LAyVkokzPsoGoAPCTQuFkroQw6AhSk7Oa9GDM5-gAX3mAY2KLkwNvrodxrmItfmISQnsbE7dDXClYES2/s800/korean.gif?imgmax=800" style="cursor: pointer; margin-right: 2px;" align="absbottom" border="0" width="20" height="15" /></a>
<a href="http://www.blogger.com/post-edit.g?blogID=5125888041114308520&amp;postID=1026262847814128677#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Car&amp;hl=en'); return false;"><img alt="Arabic" title="Arabic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVp8prHYnLjvDaYfaZwe5KNujXEw9BT0yvPvHV-KXJbJUxcc3dr9ARxXNSUD9GHFO37dKJEQy1DrKywZOdS_9Uwx_2MKblLR918NL_pUVJ-buOo6BTslCLQAqIvfRUykR1OydVsMazOWYa/s800/arabic.gif?imgmax=800" style="cursor: pointer; margin-right: 2px;" align="absbottom" border="0" width="20" height="15" /></a>
<a href="http://www.blogger.com/post-edit.g?blogID=5125888041114308520&amp;postID=1026262847814128677#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Czh-CN&amp;hl=en'); return false;"><img alt="Chinese Simplified" title="Chinese Simplified" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRqF83DIsfEPU2j3jDpW0XQ2_WnJ3_dOfEyqIo7o2pODl36vTfWzU78HvDJKMYlkQmyxddr3ibjhao8PuA4W1D_PFz3gl_Q-0TK5-lsxVAML0jSSYQwYaFiNEEhj_qDJpfENu8gAyXHBfz/s800/china.gif?imgmax=800" style="cursor: pointer; margin-right: 2px;" align="absbottom" border="0" width="20" height="15" /></a>
</div>


yah rasa nya cuma itu aja, mudah bukan ??? Semoga bermanfaat ya ???

read more

Kamis, 22 Juli 2010

Cara Membuat Menu Tab View Slide Pada Blogger

Kamis, 22 Juli 2010
2 komentar
Caranya mudah saja hanya butuh ketelitian dan sedikit kesabaran karena kodenya cukup banyak dan panjang. Jadi biar entar tidak ada kesalahan kecil yang bisa jadi biang keringat. Ikuti Tips berikut:

* Download lengkap template sobat, agar bisa dikembalikan lagi seperti semula jika sobat tidak berhasil/ salah dalam pengeditan.
* Setelah memasukkan kode tambahan sebelum menyimpan template pratinjau dulu, jika tidak ada pesan error atau template ditampilkan seperti awalnya/ tdk amburadul tata letaknya, berarti langkah-langkahnya sudah benar.
* Saat mencari suatu code klik Ctrl+F kemudian cari. Agar mudah menemukan codenya
* Terakhir langsung cara membuat menu tab view slide

1. Loggin ke Blogger => Rancangan => Edit HTML dan cari kode ini ]]> letekkan kode berikut diatas ]]>


.indentmenu{
font: bold 11px Arial;
width: 100%; /*leave this value as is in most cases*/
}
.indentmenu ul{
margin: 2px;
padding: 0;
float: left;
/* width: 80%; width of menu*/
background: transparent;
}
.indentmenu ul li{
display: inline;
}
.indentmenu ul li a{
float: left;
margin: 2px;
color: #000; /*text color*/
padding: 5px 11px;
text-decoration: none;
border: 1px solid #ccc;
}
.indentmenu ul li a:hover{
background:#ddd;
}
.indentmenu ul li a:visited{
color: white;
}
.indentmenu ul li a.selected{
color: white !important;
padding-top: 6px; /*shift text down 1px*/
padding-bottom: 4px;
border: 1px solid #000000;
background:#000000;
}
.tabcontentstyle{ /*style of tab content container*/
border: 1px solid gray;
width: 450px;
margin-bottom: 1em;
padding: 10px;
}
.tabcontent{
display:none;
}
@media print {
.tabcontent {
display:block !important;
}
}

2. CopPas kode Dibawah ini sebelum kode </head>

<script src='http://wittoblog.googlecode.com/files/slide1234.js' type='text/javascript'/>

3. Simpan template
4. Selanjutnya pilih elemen halaman=> tambah gadget=> HTML/JavaScript=> Masukkan code berikut pada kolom content

<div style="float:left;margin:0px 10px 0px 0px;padding:0px;height:350px;">
<div id="pettabs" class="indentmenu">
<ul>
<li><a href="URLartikelkamu1" class="selected" rel="tab1">1</a></li>
<li><a href="URLartikelkamu2" rel="tab2">2</a></li>
<li><a href="URLartikelkamu3" rel="tab3">3</a></li>
<li><a href="URLartikelkamu4" rel="tab4">4</a></li>
</ul>
<br style="clear: left"/>
</div>
<div style="width:240px;text-align:justify;padding: 5px; margin-bottom:1em">
<div id="tab1" class="tabcontent">
<a href="URLartikelkamu1">
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="tampilan mouse" width="240" src="URLgambar1?imgmax=800" height="152" title="title gambar"/></a>
<p><h3><a href="URLartikelkamu1">Judul Aritkel 1</a></h3></p>
Kamu tulis deskripsi dingkat artikel pertama kamu disini [...]
</div>
<div id="tab2" class="tabcontent">
<a href="URLartikelkamu2">
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="beyone" width="240" src="URLgambar2?imgmax=800" height="152" title="title gambar"/></a>
<p><h3><a href="URLartikelkamu2">Judul Aritkel 2</a></h3></p>
Kamu tulis deskripsi dingkat artikel kedua kamu disini [...]
</div>
<div id="tab3" class="tabcontent">
<a href="URLartikelkamu3">
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="Guns N 'Roses" width="240" src="URLgambar3?imgmax=800" height="152" title="Guns N 'Roses"/></a>
<p><h3><a href="URLartikelkamu3">Judul Aritkel 3</a></h3></p>
Kamu tulis deskripsi dingkat artikel ktiga kamu disini [...]
</div>
<div id="tab4" class="tabcontent">
<a href="URLartikelkamu4">
<img border="0" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" alt="ipod" width="240" src="URLgambar4?imgmax=800" height="152" title="ipod"/></a>
<p><h3><a href="URLartikelkamu4">Judul Aritkel 4</a></h3></p>
Kamu tulis deskripsi dingkat artikel keempat kamu disini [...]
</div> </div>
<script type="text/javascript">
var mypets=new ddtabcontent("pettabs")
mypets.setpersist(true)
mypets.setselectedClassTarget("link")
mypets.init(2000)
</script>


Silahkan edit sesuai selera sobat, kemudian simpan dan lihat hasilnya.

Semoga bermanfaat.

read more

Selasa, 20 Juli 2010

Cara Pasang dan Membuat Tab View

Selasa, 20 Juli 2010
2 komentar
Script Tab view ini,saya hanya sebagai penyambung lidah saja dari pembuat aslinya di Ateonsoft.com.

Berikut langkah-langkahnya

1.Login ke blogger dengan ID anda

2.Lalu Klik Menu Templates

3.Klik Sub Menu Edit HTML

4.Pada Kotak Edit HTML cari Kode ]]></b:skin>

5.Lalu Copy Kode berikut dan Pastekan diatas kode ]]></b:skin>

/* tab model 2 ateonsoft.com */
div.Tabateonsoft div.TFs
{height: 30px; overflow: hidden;}
div.Tabateonsoft div.TFs a
{float: left; display: block; text-align: center; text-decoration: none; font: normal 12px arial; padding:3px 5px 3px 3px; margin:0 5px 0 0;letter-spacing:-0.07em;
background:#f0f0f0;
color: #333;
border-top:1px solid #CCCCCC;
border-right:1px solid #999999;
border-bottom:1px solid #999999;
border-left:1px solid #cccccc;
-moz-border-radius-bottomright: 10px; -moz-border-radius-topright: 10px;
}
div.Tabateonsoft div.TFs a:hover
{ background: #E8E8E8;
border-top:1px solid #999999;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-left:1px solid #999999;}
div.Tabateonsoft div.TFs a.Active
{ background: #E8E8E8;
color: #000000;
border-top:1px solid #999999;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-left:1px solid #999999; font-weight:bold;}
div.Tabateonsoft div.Pages
{ clear: both; overflow: hidden; height:240px; border:1px solid #EFF0F1; padding:0;background: #ffffff; -moz-border-radius:5px;}
div.Tabateonsoft div.Pages div.Page
{height: 100%;padding: 0px; overflow: hidden; }
div.Tabateonsoft div.Pages div.Page div.floor
{ font-size:11px;padding: 3px 5px; text-align:left;}

6.Lalu letakkan kode berikut dibawah kode <head>


<script src='http://ayomaju.com/friendsharingfile/ateonsoft_tab.js' type='text/javascript'/>


7.Save Template

8.Pergi ke halaman Element Halaman

9.Klik Add Widget Element

10.Pilih Menu HTML/Java Script

11.Lalu Copy kode berikut



<form action="tabateonsoft.html" method="get">
<div class="Tabateonsoft" id="Tabateonsoft">
<div class="TFs">
<a>tab1</a>
<a>tab2</a>
<a>tab3</a>
<a>tab4</a>
</div>
<div class="Pages">
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 1 anda
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
Disini letakkan kode untuk tab 2 anda
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 3 anda
</div>
</div><!-- end Tab -->
<div class="Page"><!-- Tab -->
<div class="floor">
Disini letakkan kode untuk tab 4 anda
</div>
</div><!-- end Tab -->
</div>
</div>
</form>
<script type="text/javascript">tabateonsoft_name('Tabateonsoft');</script>

Ok selamat bekerja, Anda bisa mengeditnya sesuka kalian,tuangkan kreatifitas untuk membuat tab view ini lebih bagus.

read more

Cara Pasang Translet versi 2

Memasang translete pada blogger sangat perlu karena mungkin saja ada pengunjung dari negara asing yang nyasar keblog anda, tapi yang harus diperhatikan agar tidak terjadi kesalahan translate maka blog anda harus menggunakan bahasa yang resmi, bukan bahasa pasaran atau gaul.

Nah caranya:

* Seperti biasa sig in dulu ke blogger.
* Masuk/ klik tombol Rancangan.
* Klik tombol elemen halaman/ page elemen=>tambah gadget=>HTML/ Java script
* Beri nama/ isi titel dengan kalimat translate atau dengan kalimat yang anda sukai. Kemudian Copi kode berikut dan paste dikolom HTML/ Java Script.

  • Maka hasilnya seperti dibawah ini:

Google Translate

ArabicKoreanJapaneseChinese SimplifiedRussianPortuguese

EnglishFrenchGermanSpainItalianDutch

  • Jika lebar dari sidebar anda tidak mencukupi untuk memuat susunan 2 baris seperti gambar di atas, anda bisa menggantinya dengan susunan 3 baris, seperti gambar di bawah ini:

Google Translate

ArabicKoreanJapaneseChinese Simplified

RussianPortugueseEnglishFrench

GermanSpainItalianDutch

  • Silahkan anda copy dan pastekan script di bawah ini, jika anda menginginkan susunan 3 baris seperti gambar di atas

  • Seandainyapun susunan 3 baris tidak muat pada sidebar anda, sekarang anda bisa mencoba dengan susunan 4 baris, seperti gambar di bawah ini:

Google Translate

ArabicKoreanJapanese

Chinese SimplifiedRussianPortuguese

EnglishFrenchGerman

SpainItalianDutch

  • Silahkan anda copy dan pastekan script di bawah ini, jika anda menginginkan susunan 4 baris seperti gambar di atas

  • Tekan tombol save/ simpan. Pada elemen halaman save lagi. Tunggu sampai proses berlangsung dan tampil info bahwa setting berhasil disimpan. Liat hasilnya diblog anda.

Semoga bermanfaat!!


read more

Prev Home
 

Follow

Buku Tamu No Link