0 Cara Membuat Tombol Floating Share Facebook, Twitter, GOOGLE +, LIKE, SEND di Blogger

By Sannin joko.pewe | At 12:36 PM | Label : Tutorial Blog | 0 Comments

Cara Membuat Tombol Floating Share Facebook, Twitter,  GOOGLE +, LIKE, SEND di Blogger - kami akan mengulas cara membuat sebuah tombol berbagi tetapi bukan di postingan, tetapi di pinggir blog dan melayang

Contohnya seperti blog ini, dan pada gambar di samping kiri. Cara Membuatnya sbb :

1. Login ke blog
2. Pilih Rancangan
3. Tambah Widget
4. Pilih HTML/Javascript
5. Copy dan pastekan kode berikut :

<!--SideBar Floating Share Buttons Code Start--> <style> #pageshare {position:fixed; bottom:20%; right:30px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#ff0000;padding:0 0 2px 0;z-index:10;} #pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;} .fb_share_count_top {width:48px !important;} .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;} .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;} .FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;} </style> <div id='pageshare' title="Share This With Your Friends"> <div class='sbutton' id="fb-root"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:send layout="box_count" show_faces="false" font=""></fb:send></div> <div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div> <div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div> <div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div> <div class='sbutton' id='fb'><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div><br/><div style="clear: both;font-size: 12px;text-align:center;"></div></div>

6. Terakhir simpan template anda dan lihat hasilnya! :)


Keterangan :
Untuk mengatur posisi tombol pada cara kedua (Tombol Berbagi Terapung pada Pinggir Artikel) perhatikan kode pada Langkah 4 baris 1 :

• bottom:20% = ubah nilai 20% untuk mengatur jarak antara bagian bawah browser dengan tombol

• margin-left:6% = ubah nilai 6 untuk mengatur jarak antara bagian pinggir browser dengan tombol

• float:left = ubah left ke right jika kita ingin menempatkan tombol di sebelah kanan halaman artikel

• background-color:: transparant= artinya waranya transparan anda bisa menambahkan warna lainnya

selamat mencoba semoga sukses...

0 Cara membuat facebook buka tutup di samping sidebar

By Sannin joko.pewe | At 12:09 PM | Label : Tutorial Blog | 0 Comments

bagi sobat yang ingin memasang  facebook buka tutup di samping sidebar bisa ikuti langkah berikut....

• masuk ulu ke blogger
• lalu ke tata letak > tambah gadget 
• pilih HTLM? java script
• dan masukan scrip ini

<script type="text/javascript"> //<!-- $(document).ready(function() {$(".sektimlikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);}); //--> </script> <style type="text/css"> .sektimlikebox{background: url("http://www.talesoftalisman.com/2012/images/fb110.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 100px;padding: 0 5px 0 30px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:200px;} .sektimlikebox div{border:none;position:relative;display:block;} .sektimlikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;} .sektimlikebox span a{color: #808080;text-decoration:none;} .sektimlikebox span a:hover{text-decoration:underline;} </style><div class="sektimlikebox" style=""><div> <iframe src="//www.facebook.com/plugins/likebox.php?href= Url facebook sobat &width=245&height=330&colorscheme=dark&show_faces=true&border_color=FFFFFF&stream=false&header=false" scrolling="no" frameborder="0" style="background:#FFF; border:none; overflow:hidden; width:245px; height:330px;" allowtransparency="true" ></iframe><span></span></div></div>

note:

• yang bertuli URL facebok sobat di isi dengan alamat facebook sobat

0 cara setting domain intuit ke blogger

By Sannin joko.pewe | At 9:18 PM | Label : Tutorial Blog | 0 Comments

Cara setting Domain di Intuit untuk Blogger:
1. Login ke Intuit dengan User ID dan Password Anda di sini
2. Setelah login klik menu Domain
3. Klik Advance DNS Setting

4. Pada Form A Records Tambahkan kode di bawah ini

216.239.32.21
216.239.34.21
216.239.36.21
216.239.38.21

5. Pada form CNames tambahkan ghs.google.com
Hasilnya akan seperti gambar di bawah ini

6. Klik Submit 

Setting di Intuit sudah selesai. Selanjutnya setting di pengaturan Blog Anda.
1. Login ke Blogger
2. Klik Blog Anda
3. Klik Setelan => Tambahkan domain khusus

4. Klik Alihkan ke setelan lanjutan

5. Isi Nama domain Anda lalu Simpan

6. Setelah itu klik Edit

7. Centang Alihkan domainanda.com ke www.domainanda.com dan Simpan 

8. Selesai.

Nah, Blog anda sekarang sudah berubah menjadi top level domain. Semoga tutorial setting domain di intuit untuk blogger ini bermanfaat. 

0 Cara mengetahui berat blog

By Sannin joko.pewe | At 8:22 PM | Label : Tutorial Blog | 0 Comments

Yang dimaksud berat disini bukanlah berat badan. Tetapi berat yang dimaksud adalah lama loading blog . Oke, kadang-kadang karena kita sampai keasyikkan dengan memberi blog kita atau dengan memasang berbagai macam aksesoris agar blog kita terlihat menarik dan Waaah, keren. . .  Kita lupa dengan satu hal yang cukup penting bagi kebutuhan blog kita, yaitu loading page.

Memasang aksesoris memang penting agar blog kita terlihat menarik. Namun jangan sampai berlebihan. Karena hal ini akan menyebabkan loading blog menjadi lambat dan akhirnya pengunjung yang berencana untuk datang menjadi batal karena kesal menunggunya.

Kan percuma jika blog anda menarik tetapi tidak ada pengunjungnya. Oleh sebab itu anda perlu meng-optimasi blog anda dengan mengukur seberapa berat blog anda. Silahkan berkunjung ke http://www.iwebtool.com/speed_test untuk melakukan tes pada blog anda.

Masukkan alamat blog anda didalam kotak lalu klik Check, kemudian situs ini akan menampilkan 3 hasil yaitu size, loading time, dan avg speed per KB. Yang harus anda perhatikan adalah sizenya sedangkan untuk loading time, dan avg  speed per KB ini akan berubah-ubah. Tergantung dari speed internet pada saat tes. Jadi, tidak terlalu penting.

Jika size blog anda kurang dari 100 KB maka loadingnya masih bagus. Untung blogku kurang dari 100 KB (70.66 KB) hehe. . .

Kalau sampai 150 KB keatas, maka anda harus mengurangi aksesoris yang kurang berguna seperti jam, kalender, kamus gambar, dll yang ada di blog anda agar blog anda lebih langsing (supaya para pengunjung tidak menunggu lama). Selain itu, anda juga bisa memasukkan beberapa alamat blog (maksimal 10) untuk perbandingan.

0 Cara Membuat Read More di Postingan Blog

By Sannin joko.pewe | At 2:42 PM | Label : Tutorial Blog | 0 Comments

    Apa fungsi read more? fungsinya untuk memotong postingan artikel jadi artikel tidak tampil memanjang di halaman Home pada sebuah blog. Bisa dibayangkan bagaimana sebuah blog jika tidak di beri read more? tentu saja ketika membuka halaman Home blog kelihatan sangat panjang kebawah, dan tampilan blog juga kelihatan tidak rapi, selain itu juga menambah lama proses loading blog itu sendiri.


Sebenarnya banyak blogger yang mempostingkan Tips ini, saya menulis ini juga supaya saya tidak lupa
Langsung saja
1. Masuk Blogger pilih Template
2. Centang Expand Template Widget
3. Cari kode </head> Supaya cepat klik Ctrl F dan tuliskan </head>
4. Masukkan kode dibawah ini tepat dibawah </head>

<script type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://rizqi.moehamed.googlepages.com/read-moreotomatis.js' type='text/javascript'/>

5. cari kode <data:post.body/> dan Ganti dengan kode dibawah ini :

<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 class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'>&#187;&#187;&#160;&#160;READMORE...</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Keterangan :
READ MORE : bisa diganti sesuai selera
summary_noimg = 430; adalah tinggi potongan artikel tanpa gambar, bisa diganti sesuai selera
summary_img = 340; adalah tinggi potongan artikel dengan gambar, bisa diganti sesuai selera
img_thumb_height = 100; adalah ukuran tinggi thumbnail, bisa diganti sesuai selera
img_thumb_width = 120; adalah ukuran lebar thumbnail, bisa diganti sesuai selera

Save Template dan lihat hasilnya
Selamat mencoba

0 Cara membuat read more manual di blogger

By Sannin joko.pewe | At 2:17 PM | Label : Tutorial Blog | 0 Comments

1. Buatlah sebuah artikel seperti biasanya. Pastikan mode post editor dalam keadaan mode Compose.
2. Tempatkan cursor mouse komputer anda di akhir kalimat yang ingin di potong, klik tool jump break.
3. Silahkan publikasikan artikel anda.
4. Selesai.

Langkah diatas adalah cara membuat read more dalam keadaan mode compose, apabila anda terbiasa menggunakan mode HTML, berikut adalah langkah-langkahnya:

Mode HTML

1. Buatlah sebuah artikel seperti biasanya. Pastikan mode post editor dalam keadaan mode HTML.
2. Tempatkan cursor mouse komputer anda di akhir kalimat yang ingin di potong, lalu masukkan kode berikut :

   <!--more-->
   

   
3. Silahkan publikasikan artikel anda.
4. Selesai.

Sangat mudah bukan?

0 Cara mengganti template blog

By Sannin joko.pewe | At 1:56 PM | Label : Tutorial Blog | 0 Comments

Langsung ke topik utama, cara mengganti template di blogspot atau blogger ada dua cara, yaitu mengganti template dengan yang disediakan blogger, atau mengganti template dengan template yang didapat dari penyedia template. Berikut ulasannya :

Ganti Template dengan yang disediakan blogger

Berikut cara-cara untuk mengganti template dengan template yang telah disediakan blogger:

1. Silahkan login ke blogger dengan ID anda.
2. Klik pada nama blog anda.
3. Klik menu template.
   
4. Klik tombol Ubahsesuaikan
   
5. Klik pada pilihan template yang tersedia. Selain itu, anda dapat pula memilih background atau gambar latar belakang dari template tersebut. Jika sudah cocok dengan salah satu template,  klik Terapkan ke Blog.
   
6. Selesai.

Ganti Template dengan template dari penyedia template

Berikut cara-cara untuk mengganti template dengan template dari penyedia template :

1. Download terlebih dahulu template yang anda sukai pada website penyedia template blog gratis.
2. File template yang di download, biasanya masih dalam bentuk terkompresi (zip atau rar), oleh karenanya anda perlu mengekstrak atau menguraikan file tersebut dengan software ekstraktor seperti WinZip atau WinRar, Namun jika anda tidak memiliki software tersebut, anda bisa mengekstraknya secara online di http://wobzip.org.
   
3. Yang nanti di upload atau di unggah ke blogger hanyalah file yang berekstensi .xml.
4. Silahkan login ke blogger dengan ID anda.
5. Klik pada nama blog anda.
6. Klik menu Template.
   
7. Klik tombol Cadangkan/Pulihkan yang ada dibagian atas kanan monitor.
   
8. Disarankan untuk membuat backup terlebih dahulu, klik pada tombol Unduh Template Lengkap.
9. Klik tombol Choose File,  pilih file template yang tadi didownload dan telah diekstrak ( file ekstensi .xml saja ). Kemudian klik tombol Unggah.
   
10. Tunggu beberapa saat hingga proses selesai
11. Selesai.

Kini tampilan blog anda  lebih terasa fresh dibanding sebelumnya

Selamat mencoba!

0 Cara Memasang Tombol Facebook Share Dalam Postingan Blog

By Sannin joko.pewe | At 10:23 PM | Label : Tutorial Blog | 0 Comments

Ok... sudah jelas ya perbedaannya. Sekarang mari kita pelajari cara memasang tombol facebook share dalam postingan blog. Untuk cara memasang tombol facebook like bisa anda baca disini.

1. Buka blogger. Masuk ke menu Design->Edit HTML

2. Beri centang pada 'Expand widget templates'

3. Cari kode <data:post.body/>

4. Kalau anda menemukan dua kode <data:post.body/> maka pilih yang pertama

5. Letakkan salah satu kode tombol facebook share berikut ini dibawah kode <data:post.body/> jika anda ingin memasang tombol fshare dibawah postingan atau letakkan diatas <data:post.body/> jika anda ingin memasang diatas postingan.

Tombol Fshare tanpa counter



Kode:

<a name="fb_share" type="button" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

Tombol Fshare dengan counter diatas






Kode:

<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

Tombol Fshare dengan counter disamping



Kode:

<a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

6. Jika sudah simpan template anda dan lihat hasilnya.

0 Cara Membuat Kotak Search di Blog

By Sannin joko.pewe | At 1:47 PM | Label : Tutorial Blog | 0 Comments

Sangat peting bagi sobat blogger intuk menambahkan kotak pencarian supaya memudahkan pengunjung mencari sesuatu di bolog sobat sekalian....
berikut cara menambahkan kotah pencarian....
 
Cara Membuat Kotak Search di Blog


1. Login ke blog anda
2. Masuk ke Rancangan -Edit HTML
3. Centang "Expand Template Widget"
4. Cari kode </head> dan masukan kode berikut diatas kode </head>

#search{margin-left:11px;}

input#s {
background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjb6Fj1TxwxKH-QomveUzMw0g0mWptYkAcXpiKFTo3eDy5czpH4CNBykPbA8YLWSFPkmNVWmiLTFkdWtMOZJDlZusPT84jji0HSWzWjEcA72-ZmGpkrihtB2hBSW5ssFdra75BnZkL01dy8/s1600/fields.jpg) top left repeat-x;
border: 1px solid #CCCCCC;
padding: 6px 4px 6px 4px;
font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif;
font-size: 12px;
line-height: 18px;
color: #6D6D6D;
width: 275px;
float: left;
}

input#search-submit {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZsxGxZzxzRZu_3su_Rp_L3JFRCzkIbGQIexoqZpBwT27YFn5ruvZQJJGBSs5Y3I6OHAVeB9habeYsF2aDd5VcbLbcCYFH1U3HUrmfQ3VNozGSWdnBx_TYSg2xBYtKye-YWu24WvhyphenhyphenTJqH/s1600/search.png) 0 0;
border: 0;
width: 25px;
height: 27px;
position: absolute;
margin: 4px 0 0 -30px;
cursor: pointer;
}

5. Setelah itu silahkan anda cari kode <div id='sidebar-wrapper'> dan Masukan kode berikut tepat di bawahnya

<div id='search'>
<form action='/search' id='search-form' method='get'>
<input id='s' name='q' onfocus='doClear(this)' type='text' value='search'/>
<input id='search-submit' type='submit' value=''/>
</form>
</div>

6. Save

ket: ganti tulisan search dengan tulisan yang ingin anda tampilkan di dalam kotak

0 Cara membuat semua link otomatis terbuka di tab baru Blogspot.

By Sannin joko.pewe | At 1:15 PM | Label : Tutorial Blog | 0 Comments

kali ini saya aka meberi tau bagama mana cara nya supaya link otomatis terbuka di tab baru, yang mungkin udah pada tau semuanya.

Untuk menerapkan ini sangat mudah 3 detik pun jadi. :) kita hanya tinggal menaruh kode <base target='_blank' /> di bawah kode </head>

Berikut langkah-langkahnya:
1.  Login Blogger > Rancangan > Edit HTL

2.  Cari kode   <head>

3.  Kemudian tambahkan kode berikut ini di bawahnya

<base target='_blank' />

Sehingga keseluruhan kodenya akan tampak seperti berikut:

<head>
<base target='_blank' />

4.  Save template

Oke, Mudah bukan? Selamat mencoba trik Cara membuat semua link otomatis terbuka di tab baru Blogspot.

0 Berbagai Bentuk Widget Status YM (Yahoo Messenger)

By Sannin joko.pewe | At 10:08 AM | Label : Tutorial Blog | 0 Comments

Widget Status Yahoo Messenger ini berfungsi untuk menunjukkan Status YM kita, Online apa Offline. Okey, mungkin udah banyak banget blog yang membahas masalah pemasangan Widget Status Yahoo Messenger. Tapi sepertinya aku belum pernah liat ada yang membahas berbagai bentuk Widgetnya, sekarang kita akan membahasnya. Sebenarnya sich ini hanya sebagai Arsip aja, tapi siapa tau ada temen temen yang membutuhkannya..

nih kode widget nya : 

<a href="ymsgr:sendIM?dan_exsotic"> <img src="http://opi.yahoo.com/online?u=dan_exsotic&amp;m=g&amp;t=0&amp;l=us"/></a>

Nah, kalimat yang berwarna MERAH itu adalah ID Yahoo Messenger, jadi nanti ketika akan memasang kode tersebut pada SideBar, yang berwaqrna HIJAU adalah tampilan di blok.... jangan lupa mengganti ID Yahoo Messengernya tersebut dengan ID Yahoo Messenger temen temen sendiri..

Ini beberapa bentuk Widget Status Yahoo Messenger-nya yang keren:


Kodenya : t=1



Kodenya : t=2


Kodenya : t=6



Kodenya : t=7



Kodenya : t=8



Kodenya : t=9



Kodenya : t=10



Kodenya : t=11


Kodenya : t=12



Kodenya : t=13



Kodenya : t=14



Kodenya : t=15


Kodenya : t=16


Sekarang tinggal menentukan Icon mana yang akan temen temen jadikan sebagai penanda status Yahoo Messenger temen temen. Ambil kodenya, copas dan tempel di sidebar masing masing..
Semoga bisa sedikit membantu..
Senang bisa berbagi..

0 Berikut cara membuat Artikel Terkait dengan border melengkung dengan Fungsi Scroll

By Sannin joko.pewe | At 10:07 AM | Label : Tutorial Blog | 0 Comments

Berikut cara membuat Artikel Terkait dengan border melengkung dengan Fungsi Scroll

• Seperti biasa, masuk dulu ke Akun blog anda.
• Pada halaman Dasbor, cari kata "RANCANGAN" lalu klik
• Pada halaman Rancangan, klik tombol "EDIT HTML"sebaik nya aman kan dulu template sobat
• Beri tanda checklist pada kotak kecil yg ada di depan tulisan Expand Template Wdget yang terletak diatas kotak kode HTML template blog anda
• Cari kode ]]></b:skin> (Gunakan tombol F3 pada keyboard untuk melakukan pencarian cepat).
• Copy kode dibawah ini, lalu paste DI ATAS kode ]]><b/:skin> berikut kodenya :

kode:

.rbbox{-moz-box-shadow: inset 0 0 20px #f10c0c; -webkit-box-shadow: inset 0 0 20px #f10c0c; box-shadow: inset 0 0 20px #f10c0c; .rbbox:hover{background-color:#000000);}

• Selanjutnya, cari kode <data:post.body/> gunakan control F
• copy code ini di bawah <data:post.body/>

kode:

<b:if cond='data:blog.pageType == "item"'> <br/> <br/> <H2>Artikel Terkait:</H2> <div class='rbbox'> <div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'> <div id='albri'/> <script type='text/javascript'> var homeUrl3 = "<data:blog.homepageUrl/>"; var maxNumberOfPostsPerLabel = 4; var maxNumberOfLabels = 10; maxNumberOfPostsPerLabel = 10; maxNumberOfLabels = 3; function listEntries10(json) { var ul = document.createElement('ul'); var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ? json.feed.entry.length : maxNumberOfPostsPerLabel; for (var i = 0; i < maxPosts; i++) { var entry = json.feed.entry[i]; var alturl; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { alturl = entry.link[k].href; break; } } var li = document.createElement('li'); var a = document.createElement('a'); a.href = alturl; if(a.href!=location.href) { var txt = document.createTextNode(entry.title.$t); a.appendChild(txt); li.appendChild(a); ul.appendChild(li); } } for (var l = 0; l < json.feed.link.length; l++) { if (json.feed.link[l].rel == 'alternate') { var raw = json.feed.link[l].href; var label = raw.substr(homeUrl3.length+13); var k; for (k=0; k<20; k++) label = label.replace("%20", " "); var txt = document.createTextNode(label); var h = document.createElement('b'); h.appendChild(txt); var div1 = document.createElement('div'); div1.appendChild(h); div1.appendChild(ul); document.getElementById('albri').appendChild(div1); } } } function search10(query, label) { var script = document.createElement('script'); script.setAttribute('src', query + 'feeds/posts/default/-/' + label + '?alt=json-in-script&callback=listEntries10'); script.setAttribute('type', 'text/javascript'); document.documentElement.firstChild.appendChild(script); } var labelArray = new Array(); var numLabel = 0; <b:loop values='data:posts' var='post'> <b:loop values='data:post.labels' var='label'> textLabel = "<data:label.name/>"; var test = 0; for (var i = 0; i < labelArray.length; i++) if (labelArray[i] == textLabel) test = 1; if (test == 0) { labelArray.push(textLabel); var maxLabels = (labelArray.length <= maxNumberOfLabels) ? labelArray.length : maxNumberOfLabels; if (numLabel < maxLabels) { search10(homeUrl3, textLabel); numLabel++; } } </b:loop> </b:loop> </script> </div> <script type="text/javascript">RelPost();</script> </div> </b:if>

Selanjut nya SIMPAN TEMPALATE
Jika ingin mengganti warna background kotaknya, ganti kode warna ( #f10c0c; ) Dengan warna yang di ingin kan silakan ke SINI untuk melihat kode warna nya,

0 cara membuat daftar isi otomatis dengan scroll

By Sannin joko.pewe | At 10:05 AM | Label : Tutorial Blog | 0 Comments

Untuk itu binatang info akan memberikan tips membuat daftar isi seperti yang kamu lihat di side bar kanan di blog ical, ini bertujuan agar postingan lama dengan mudah bisa ditemukan oleh pengunjung blog, tinggal di scrool kebawah makan daftar postingan akan muncul satu per satu.

Berikut Langkah-langkahnya.
Pertama login ke blog kamu,
Pilih LayOut --> Add Gadget --> HTML/java Script

Untuk Daftar isi Scroll Seperti Daftar isi blog ini KoPas Kode di bawah ini

<div style="overflow:auto; height:200px;" margin="1px" ;>
<script style="text/javascript" src="http://sites.google.com/site/icalcell/javascript/daftarisiku.js"></script><script style="text/javascript">var numposts = 1000;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script><script src="http://namablogmu.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script>
</div><br/><a href="http://icalcell.blogspot.com/2009/12/cara-membuat-daftar-isi-blog-dengan.html">Get Widget Here</a>

NB:
namablogmu ganti dengan nama blog kamu.

0 script widget embed tv online

By Sannin joko.pewe | At 10:05 AM | Label : Tutorial Blog | 0 Comments

cara memasang TV online di blog anda cukup memasang script dibawah ini di javascript/html.
caranya :
1.login ke blogspot
2.klik dasboard-> design-> page element->add a gadget-> lalu pilih javascript/html
3.copy paste code berikut di java script html tersebut

<div style="overflow:auto; padding:5px; width:430px; height:400px; border:1px solid #ccc;">

<embed align="top" allowfullscreen="true" allowscriptaccess="sameDomain" bgcolor="#ffffff" devicefont="false" height="860" menu="true" name="MivoTV" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" scale="noscale" scroll="auto" src="http://id.imediabiz.com/MivoTV.swf?r=%27%20+%20Math.round%28Math.random%28%29%20*%2099999%29%20+%20%27" type="application/x-shockwave-flash" width="100%" wmode="transparent"></embed><div style="text-align: right; font-size: 10px;"> cara pasang

             <a href='http://blumbungannews.wordpress.com/2012/01/06/tips-pasang-widget-tv-online-embedtampa-iklan/' target='_blank'>klik disini</a>

          </div></div>

NOTA:
silahkan sesuaikan lebar widget dengan ukuran yang sesuai dengn blog anda dengan merubah angka yang diberi warna merah.
jika anda akan pasang di halaman posting atau selain widget .silakan dibuang kode scroll yang saya beri warna biru agar tampil secara default.anda cukup memasang kode embed yang tadi anda download (tampa menambah kode scroll diatas) kemudian simpan pekerjaan anda.

0 cara membuat text box scroll

By Sannin joko.pewe | At 10:04 AM | Label : Tutorial Blog | 0 Comments

Saya buat posting ini soalnya ada temen blogger yang mau tau tips gimana cara buat text area/scroll box. Sebelumnya apa itu text area? Text area adalah tempat untuk menaruh tulisan yang ingin dilihat pengunjung. Text area yang ini adalah versi yang berbeda, bukan berfungsi untuk memperlihatkan kode HTML (baca posting Cara Memperlihatkan Kode HTML disini). Sedangkan scroll box adalah text area yang isi scroll. Ya tenang aja teman, saya pasti akan berusaha membantu . Ok, langsung aja ke langkah2 cara buatnya, jugaan kalau nulis basa basi terlalu banyak juga gak ada yang baca nanti -__- . Ok, ini dia caranya:

<div style="font: 16px/26px Georgia, Garamond, Serif; height: 120px; overflow: scroll; width: 250px;">
masukan tex yang di inginkan
</div>
<div style="font-size: 10px;">
</div>


maka hasil nya :

masukan tex yang di inginkan

0 cara mengetahui kecepatan loading web

By Sannin joko.pewe | At 11:21 PM | Label : Tutorial Blog | 0 Comments

Dengan mengetahui kecepatan dari blog/web/situs anda, anda bisa mengetahui apa saja yang harus anda benahi dari blog/web/situs anda. Karena apabila kecepatan loading blog/web/situs anda lambat, maka akan berpengaruh juga terhadap pengunjung blog/web/situs anda. Jadi itulah sebabnya anda harus mengetahui seberapa cepatnya blog/web/situs anda untuk diakses.

Banyak website yang menawarkan layanan untuk mengetes berapa cepat blog/web/situs Anda. Salah satunya adalah dari Google yaitu Page Speed Online.

Caranya, tinggal buka pagespeed.googlelabs.com dan masukkan alamat blog/web/situs Anda.

Klik Analyze Performance, akan ada hasilnya dengan skor maksimal 100. Disertai juga penjelasan mengenai bagaimana mengoptimalkan website blog/web/situs anda..

Kalau blog ini http://bintang-ilmu.net kemarin saya test mendapat nilai 95, rumayan....

2 cara mengganti favicon blogger

By Sannin joko.pewe | At 10:58 PM | Label : Tutorial Blog | 2 Comments

Bintang Info™ _disi saya akan memberitahukan cara mengganti favicon di blogger/blogspot.

lankah-langkahnya sebagai berikut :
langkah petama

1. kamu klik di SINI
2. isilah  step nomor dua dengan cara mengupload gambar dari komputer, kemu dian klik generate favico!
3. klik kanan pada gmabar yang muncul di step 3. lalau save gambar ke komputer kamu.
lankah ke dua

1. buka blogger
2. rancangan> tata letak> klik edit favicon.
3. masukan gambar yang telah kamu save tadi. yang harus kamu lakukan adalah menunggu gambar gambar yang kamu masukin di update oleh blogger...
atau
1. rancangan > edit html jangan lupa centang Expand Template Widget.
2. cari kode ]]></b:skin>
3. copy kode berikut dibawah kode ]]></b:skin>
<link href='http://i1071.photobucket.com/albums/u506/bintang333/star-smiley-face-download-20120526-faviconico.png' rel='shortcut icon'/>

Nb: tulisan yang berwarna BIRU kamu ganti dengan URL tempat menyimpan gambar.

Sekian semoga bermanfaat.... 

0 Cara membuat ArtikeL Terkait (Related Post) Di blogspot

By Sannin joko.pewe | At 10:50 PM | Label : Tutorial Blog | 0 Comments

Cara membuat ArtikeL Terkait (Related Post) Di blogspot - aga kareba sobat ? heheeh apa kabar, malam ini japarus dot com berbagi tips sedikit yaitu Cara membuat ArtikeL Terkait (Related Post) Di blogspot, pada postingan Sebelum nya saya juga sudah pernah post tentang cara menambahkan artikel terkait otomatis dibawah postingan dan Cara Membuat artikeL Terkait via Mobile (seluler) Untuk Blogspot namun kali ini tidak menggunakan gambar untuk versi komputer.

Berikut cara membuat Artikel Terkait dengan border melengkung dengan Fungsi Scroll

• Seperti biasa, masuk dulu ke Akun blog anda.
• Pada halaman Dasbor, cari kata "RANCANGAN" lalu klik
• Pada halaman Rancangan, klik tombol "EDIT HTML"sebaik nya aman kan dulu template sobat
• Beri tanda checklist pada kotak kecil yg ada di depan tulisan Expand Template Wdget yang terletak diatas kotak kode HTML template blog anda
• Selanjutnya, cari kode <data:post.body/> gunakan control F, jika ada 3 pilih no 2.
• copy code ini di bawah <data:post.body/>

<b:if cond='data:blog.pageType == "item"'><div style='margin-top: 10px;'> <strong>Artikel Terkait</strong> <div class='rbbox'> <div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'> <div id='ardi33'/> <script type='text/javascript'> var homeUrl3 = "<data:blog.homepageUrl/>"; var maxNumberOfPostsPerLabel = 4; var maxNumberOfLabels = 10; maxNumberOfPostsPerLabel = 100; maxNumberOfLabels = 3; function listEntries10(json) { var ul = document.createElement('ul'); var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ? json.feed.entry.length : maxNumberOfPostsPerLabel; for (var i = 0; i < maxPosts; i++) { var entry = json.feed.entry[i]; var alturl; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { alturl = entry.link[k].href; break; } } var li = document.createElement('li'); var a = document.createElement('a'); a.href = alturl; if(a.href!=location.href) { var txt = document.createTextNode(entry.title.$t); a.appendChild(txt); li.appendChild(a); ul.appendChild(li); } } for (var l = 0; l < json.feed.link.length; l++) { if (json.feed.link[l].rel == 'alternate') { var raw = json.feed.link[l].href; var label = raw.substr(homeUrl3.length+13); var k; for (k=0; k<20; k++) label = label.replace("%20", " "); var txt = document.createTextNode(label); var h = document.createElement('b'); h.appendChild(txt); var div1 = document.createElement('div'); div1.appendChild(h); div1.appendChild(ul); document.getElementById('ardi33').appendChild(div1); } } } function search10(query, label) { var script = document.createElement('script'); script.setAttribute('src', query + 'feeds/posts/default/-/' + label + '?alt=json-in-script&callback=listEntries10'); script.setAttribute('type', 'text/javascript'); document.documentElement.firstChild.appendChild(script); } var labelArray = new Array(); var numLabel = 0; <b:loop values='data:posts' var='post'> <b:loop values='data:post.labels' var='label'> textLabel = "<data:label.name/>"; var test = 0; for (var i = 0; i < labelArray.length; i++) if (labelArray[i] == textLabel) test = 1; if (test == 0) { labelArray.push(textLabel); var maxLabels = (labelArray.length <= maxNumberOfLabels) ? labelArray.length : maxNumberOfLabels; if (numLabel < maxLabels) { search10(homeUrl3, textLabel); numLabel++; } } </b:loop> </b:loop> </script> </div> <script type='text/javascript'>RelPost();</script></div> </div> </b:if>

Selanjut nya SIMPAN TEMPALATE
Jika ingin mengganti warna background kotaknya, ganti kode warna ( #f10c0c; ) Dengan warna yang di ingin kan silakan ke SINI

0 Cara menambahkan tombol like di setiap postingan

By Sannin joko.pewe | At 10:38 PM | Label : Tutorial Blog | 0 Comments

Manfaat Dari Tombol like di setiap postingan

Tentu saja ada manfaat nya, kalau orang klik like akan ke share di facebook yang like, tentunya bisa menambah pengunjung blog lewat facebook.

Bagai mana Cara menambahkan tombol like di setiap postingan

Untuk Pengguna Blogspot langsung login blog masing2..

Kode:

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>

Cari kode <div class='post-header-line-1'>
jika ingin meletakan di atas postingan
Taruh kode paling atas sebelum kode <div class='post-header-line-1'>

Cari kode <data:post.body/>
jika ingin menambahkan tombol suka atau like di bawah postingan seperti di blog ini
Taruh kode paling atas setelah <data:post.body/>

Biasa kode kode di atas ada dua dalam tempelate blog, paste aja ke dua dua nya di tempat kode masing(atas atau bawah postingan)

Selesai ulasan singkat tentang Cara menambahkan tombol like di setiap postingan kali ini.. semoga berguna dan dimengerti ..

0 Cara pasang animasi bergerak mengikuti mouse di blog

By Sannin joko.pewe | At 9:07 PM | Label : Tutorial Blog | 0 Comments

   Cara pasang animasi yang mengkuti mouse pada blog, mungkin bagi sebagian blogger sudah pada tahu deh kayanya . atau mungkin belum tahu cara memasangnya .. sebenarnya mudah kok memasang animasi bergerak pada widget blog dan ketika mouse di arahkan ke animasi tersebut .. lalu animasi tersebut mengikuti gerak dari mouse tersebut .. gmnaa keren nggak ..coba lihat contohnya nih :

                                         
Catatan !!!
Coba anda arahkan mouse pada animasi atau bisa di sebut juga widget animasi tersebut ..!!
bagaimana . laba-laba nya ngikutin kan .. kalo engga ngikutin bererti ada yang salah dengan mata anda .. heheh.PISS .

   Basa-basi !!!
untuk anda yang memang suka dengan animasi mengikuti arah mouse tersebut sebenarnya anda dapat langsung memasangnya pada widget blog anda , pada kesempatan kali ini aldi akan menjelaskan kepada anda cara memasang animasi mengikuti mouse tersebut khusus di blogger ,.. namun tenang jika anda bukan pengguna blogger atau anda pengguna hosting blog lain seperti wordpress anda juga bisa kok memasang animasi beregerak mengikuti mouse tersebut . animasi-animasi beregerak mengikuti mouse tersebut memanglah sangat cocok untuk anda yang gemar menghias blog dengan berbagai atribut .. apa lagi yang satu ini beda kan !!! .. sebelumnya saya ingin katakan kepada anda bahwa animsi bergerak mengikuti arah mouse ini ada banyak modelnya juga . jadi bukan hanya laba-laba mengikuti arah mouse .ada juga animasi hamster yang bisa di beri umpan dan hamster tersebut akan mengikuti umpan tersebut dan akan memakan umpan yang telah anda beri sebelemnya .. enggak percaya ??? lihat nih

                                    
Catatan !!!
 Coba kalian arahkan mouse dan klik pada animasi hamster tersebut ..!!!
bagaimana hamster nya engga kelaperan lagikan .. kasih makan lagi ntuh hamsternya .. ntar mati kelaperan lagi ...heheh ..


Bukan Basa basi !!!
  Untuk yang satu ini jangan kalian kira basa-basi yee .. kali ini engga usah pake panjang lebar atau panjang apapun .. langsung aja lihat nih cara-cara pemasangan animasi bergerak mengikuti arah mouse pada blog di blogger dan di wordpress..

• masuk atau login ke blog kalian
  
  
• klik Rancangan / Design kemudian klik Elemen laman / page Elements
  
  
  
• Lalu klik tambah gadget / add gadget , setelah di klik akan muncul banyak pilihan ..
  
  
  
• pilih HTML/JAVA SCRIPT
  
  
  
• lalu copy pastekan script-script berikut  ini ( sebaiknya jangan di beri judul )
  

untuk anda yang suka memilih milih  .. sekarang anda pilih nih .. animasi beregerak mengikuti mouse di bawah ini ..:
langsung copas aja gann !!!

---

                              
dan ini code script widget animasi hamster yang bergerak mengikuti arah mouse untuk blogger dan wordpress .. silakan copas :

untuk blogger

untuk wordpress

[gigya width="300" height="225" quality="high" src="http://hosting.gmodules.com/ig/gadgets/file/112581010116074801021/hamster.swf?" ]

Untuk cara pemasangan animasi bergerak hamster mengikuti arah mouse silakan ikuti cara pemasangan seperti di atas ( untuk blogger ) .. kalo untuk wordpress mohon maaf belum ada masukan. soalnya belom pernah coba bikin blog di wordpress si .. hehe

---

Beda hamster beda juga laba-laba

dan ini code script widget animasi laba-laba yang bergerak mengikuti arah mouse untuk blogger dan wordpress .. silakan copas :


untuk blogger

untuk wordpress

[gigya width="300" height="200" quality="high" src="http://hosting.gmodules.com/ig/gadgets/file/112581010116074801021/spider.swf?"  scale="noscale"  salign="tl" ]

---

Nah kalo yang ini lebih asik lagi nih gan !!
kita di ibaratkan melihara anjing hidup di blog .. yang bisa anda beri makan anda latih anda dan ada kamera untuk anda mengawasi pula ..



catatan !!
coba anda mainkan fasilitas-fasilitas yang terdapat pada kotak di atas ..!!!
bagaimana ??? kerenkan .. kaya melihara anjing di blog . 

dan ini code script widget animasi anjing yang bergerak mengikuti arah mouse dan bagaikan pelihara anjing di blog untuk blogger dan wordpress .. silakan copas :



untuk blogger

untuk wordpress

[gigya width="300" height="225" quality="high" src="http://hosting.gmodules.com/ig/gadgets/file/102399522366632716596/dog.swf?"  bgcolor="FFFFFF" ]

---

Animasi pinguin mengikuti arah mouse

                                            

dan ini code script widget animasi pinguin yang bergerak mengikuti arah mouse dan bagaikan pelihara pinguin di blog untuk blogger dan wordpress .. silakan copas :

untuk blogger

untuk wordpress

[gigya width="300" height="200" quality="high" src="http://penguinsgadget.googlecode.com/svn/trunk/penguins.swf?"  scale="noscale"  salign="tl" ]

---

                                           

untuk blogger

untuk wordpress

[gigya width="300" height="220" quality="high" src="http://ballclockgadget.googlecode.com/svn/trunk/ballClock.swf?" ]

---

                                            

untuk blogger

Untuk wordpress enggak ada !!!

---

                                        

untuk blogger

untuk wordpress

[gigya width="300" height="225" quality="high" src="http://hosting.gmodules.com/ig/gadgets/file/112581010116074801021/newtonsCradle.swf?" ]

---

                                        
untuk blogger

untuk wordpress

[gigya width="300" height="200" quality="high" src="http://hosting.gmodules.com/ig/gadgets/file/112581010116074801021/turtle.swf?"  scale="noscale"  salign="tl" ]

Bagaimana ??? kalian mau pilih yang mana ??? tinggal copas aja kok .
jika kalian ingin memasang animasi bergerak di sudut blog kalian .. aldi ada tutorialnya juga kok ..



sumber:http://zengbogel.blogspot.com/2011/11/cara-pasang-animasi-bergerak-mengikuti.html