Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan

gravatar

Cara Memasukkan ShoutBox/ShoutMix Ke Dalam Blog

Share/Bookmark

ShoutBox atau ShoutMix adalah salah satu fitur tambahan yang digunakan untuk menerima pesan dari pengunjung website/blog kamu. ShoutBox bisa dikatakan juga sebagai ‘buku tamu mini’. Banyak situs-situs yang memberikan pelayanan ini secara gratis. Sebenarnya tidak sepenuhnya gratis, karena situs-situs tersebut pasti ingin mendapatkan keuntungan juga, maka mereka pun meletakkan gambar/banner kecil di blog kamu nanti.

Contoh shoutmix pada blog adalah, sebagai berikut :



















Nah.. Sekarang, langkah-langkah yang harus kamu lakukan untuk menggunakannya, adalah sebagai berikut :


1. Buka situs www.shoutmix.com

2. Klik tombol Create Shoutbox


3. Isi form pendaftaran yang tersedia, contreng tulisan ‘I have read …’ , klik tombol ‘Continue’

4. Setelah berhasil mendaftar, silahkan klik tulisan link ‘control panel’


5. Pada layar control panel yang muncul, klik tulisan ‘get code’


6. Atur ukuran lebar ShoutBox yang akan digunakan pada weblog pada kolom width. Setelah itu ’select all’ semua kode yang berada pada kotak ‘generated codes’ dan copy


7. Sekarang, buka Blog kamu, lalu klik Tambah Gadget ke HTML/JavaScript

8. Paste kode ShoutBox tersebut, dan setelah itu simpan

shoutmix


Baiklah, selanjutnya `View Blog` kamu..

Cihuyyy.. !!! Blog kamu dach berubah.. ShoutBox-nya sekarang dach nangkring di Blog kamu!


Selamat, ya !

....................readmore

gravatar

Cara Memasukkan Jam Ke Dalam Blog

Share/Bookmark

Jam di blog merupakan petunjuk waktu bagi siapa saja yang mengunjungi blog kamu. Banyak situs-situs yang memberikan pelayanan ini secara gratis. Sebenarnya tidak sepenuhnya gratis, karena situs-situs tersebut pasti ingin mendapatkan keuntungan juga, maka mereka pun meletakkan gambar/banner kecil di blog kamu nanti.

Contoh Jam pada blog adalah, sebagai berikut :








Langkah-langkah yang harus kamu tempuh, yaitu :


1. Buka situs http://clocklink.com


2. Klik tab Gallery di pojok kanan atas
.

3. Klik link Analog jika kamu ingin memilih jam analog.


4. Berikutnya akan ditampilkan beberapa macam bentuk jam analog. Pilih salah satu dengan cara klik View HTML Tag.


5. Berikut akan ditampilkan aturan-aturan yang diberlakukan oleh ClockLink.


6. Klik Accept jika kamu menyetujui aturan-aturan tersebut.


7. Pilih zona waktu kota kamu, misalnya : Padang timezone-nya adalah ICT : Bangkok Time (GMT + 07:00) atau yang penting ada +07 -nya.


8. Jika perlu pilih ukuran Jam-nya. Sesuaikan dengan lebar tempat yang disediakan di template blog kamu, biasanya 150×150 pixels.


9. Lalu copy semua kode yang ada di bawahnya.


10. Buka Blog kamu, lalu klik Tambah Gadget ke HTML/JavaScript.


11. Paste kode tersebut, dan setelah itu simpan.


Lihat Blog kamu dan bandingkan bedanya.


Selamat mencoba !


Semoga Sukses !!!

....................readmore

gravatar

RELATED ARTICLES by LABELS / ARTIKEL TERKAIT

Share/Bookmark

Membuat Related Article/Related Post atau Artikel Terkait akan memudahkan pembaca untuk menemukan postingan kita yg sejenis.

Langsung aja:
1. Buka account Blogger Beta Anda, lalu klik "TEMPLATE", selanjutnya klik "EDIT HTML"
2. Klik "Expand Widget".
3. Jangan lupa untuk menyimpan template Anda di Komputer atau File lain dengan meng-klik Download Full Template. Ini adalah prosedur standar (gold procedure) setiap kali Anda akan melakukan perubahan pada template Blogger Beta. Sewaktuwaktu, jika proses editing Template Blogger Beta Anda bermasalah, maka Anda masih bisa kembali ke Template Anda sebelumnya.
4. Cari kode

<data:post.body/>

5. Copy + Paste kode Java Script dibawah ini setelah kode tersebut

<data:post.body/>

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>
<!-- *****************http://astaqauliyah.com*****Nov,2007****************** -->
<!-- *****************Related Articles by Labels - Take Two****************** -->


<div class='widget-content'>
<b>Postingan Terkait Lainnya :</b>
<div id='data2007'/><br/><br/>
<div id='Randezvous'>
Widget by <u><a href='http://sulthanyusuf.blogspot.com/2009/11/related-articles-by-labels-artikel.html' target='_blank'>BLOG SulthanYusuf</a></u>
</div>
<script type='text/javascript'>

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

maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;


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

for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
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 &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
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 = &quot;<data:label.name/>&quot;;

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

</div>
</b:if>

6.Kemudian Save Template.
....................readmore

gravatar

READ MORE outomatic with Thumbnail

Share/Bookmark


Yang sudah memasang Read More versi lama sebaiknya di kodenya kembalikan dulu ke seperti semula, caranya hapus kode yang berwarna merah dibawah ini (Setiap template mungkin berbeda, jadi tinggal disesuaikan saja)




<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore</a>
</b:if>
<div style='clear: both;'/>

Cari kode </head> kemudian letakan script dibawah ini di atas kode </head> Kalo sudah, jangan lupa di simpan terlebih dahulu.

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

Masih pada halaman EDIT HTML, Beri tanda centang pada "Expand widget template" lalu ganti kode 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 disimpan dan lihat hasilnya :)

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 dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)
....................readmore

gravatar

Cara Membuat Blog emoticon di Kolom Komentar

Share/Bookmark

Instal emoticon di atas kotak komentar akan memudahkan komentator untuk menunjukkan ekspresi dan emosi. Untuk emoticon sampel dapat dilihat pada kolom komentar saya itu.

  :))  :)]  ;))  ;;)  :D  ;)  :p  :((  :)  :( 
  :X  =((  :-o  :-/  :-*  :|  8-}  ~x(  :-t 
  b-(   :-L  =)) 


Sebelum memasang Emoticon kotak komentar di atas, pastikan sistem sudah menggunakan Mengomentari terbaru dari blogger , jika penjelasan saya masih tidak berhasil juga .. mungkin harus ada perubahan dalam pengkodean XML Template.

Untuk menginstal kode kolom komentar Emoticon, pertama .. Edit HTML melihat entri pertama, lalu copy-paste script di bawah ini jeruk dan menempatkan kode diatas </body> kode ini biasanya terletak di bagian bawah kode HTML.

<script src='http://sites.google.com/site/sulthanyusuf99/my-hosting/smiley.js'
type='text/javascript'/>

Seperti untuk menginstal kode emoticon diatas kotak komentar, tetap berada pada halaman Edit HTML (jangan lupa untuk memeriksa Expand Template Widget). kemudian cari kode warna merah di bawah ini:

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>

sekarang copy dan paste kode di bawah ini dan tempatkan di bawah kode <p class='comment-footer'> (lihat script sebelumnya) kalo jadi jangan lupa untuk menyimpan, dan lihat hasilnya:)

<b><img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/>
:))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/>
:)]
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'/>
;))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/>
;;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/>
:D
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/>
;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/>
:p
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/>
:((
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/>
:)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/>
:(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/>
:X
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/>
=((
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/>
:-o
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/>
:-/
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/>
:-*
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/>
:|
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/>
8-}
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/>
~x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/>
:-t
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif'/>
b-(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif'/>
:-L
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/>
x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/>
=))</b>

Semoga informasi ini bermanfaat! Terima kasih


....................readmore

gravatar

Memasang Widget Yahoo Messenger Pada Blog

Share/Bookmark

Yahoo Messenger atau sering disebut dengan YM merupakan fasilitas chatting yang sangat populer pada masa sekarang. Dengan adanya Yahoo Messenger, kita bisa mengirimkan pesan instan (lebih dikenal dengan IM). Pesan instan digunakan untuk berkomunikasi dengan teman-teman pada internet dengan akses yang cepat. Semua pengguna internet pasti sudah tau maksud dan tujuan dari pada Yahoo Messenger ini, jadi saya tidak akan menjelaskan lebih detail tentang Yahoo Messenger karena topik postingan kali ini adalah bagaimana caranya Memasang Widget Yahoo Messenger Pada Blog.

Apa sih gunanya menampilkan Widget Yahoo Messenger Pada Blog ? Mungkin ada sebagian anda yang bertanya seperti itu. Nah, adapun kegunaannya tidak lain dan tidak bukan adalah agar pengunjung tau apakah Admin sedang Online atau Offline. Jadi, pengunjung bisa berinteraksi langsung dengan Admin jika ada pertanyaan atau hal2 lain yang ingin di ajukan. Agar Widget Yahoo Messenger bisa langsung terpasang diblog, terlebih dahulu pilih salah satu bentuk widget dibawah ini kemudian copy kode nya.








<a href="ymsgr:sendIM?m_ilham_a_h">
<img border="0" src="http://opi.yahoo.com/online?u=m_ilham_a_h&m=g&t=6"/></a>


atau




<a href="ymsgr:sendIM?m_ilham_a_h">
<img border="0" src="http://opi.yahoo.com/online?u=m_ilham_a_h&m=g&t=2"/></a>

Kemudian masuk ke Account Blogger anda -->> Pilih Tata Letak --->> Tambah Gadget Html java script kemudian masukkan kode diatas --->> Simpan.


Keterangan :
--->> Teks berwarna merah ganti dengan ID YM anda
....................readmore

gravatar

Memasang Profil Facebook Di Blog

Share/Bookmark

Siapa sih yang tidak kenal dengan Facebook? Social network yang satu ini sedang naik daun belakangan ini terutama di Indonesia. Saya yakin kebanyakan dari anda pasti sudah pernah mendengarkannya. Bahkan banyak diantara anda yang sudah mempunyai account disana.

Ketika anda melakukan blogwalking pasti pernah melihat blogger yang memasang profil facebook di blog. Ini agar pengunjung mudah untuk menghubunginya dan sekaligus membangun komunitas.

Bagi anda yang memiliki akun di Facebook dan ingin memasang profil Facebook anda di blog. Silahkan ikuti langkah-langkah dibawah ini:

1. Login ke Facebook. Lalu pilih menu Profile2. Kemudian klik Create a Profile Badge yang terletak
dibawah menu "Notes"

3. Klik Create Badge



4. Setting tampilan yang anda inginkan dengan memilih Layout, Format (dibiarkan image saja), dan Items yang mau ditampilkan.



5. Jika sudah klik Save kemudian copy kode HTML yang diberikan lalu pastekan ke blog anda.

6. Selesai.

Selamat mencoba.



....................readmore

gravatar

Panduan membuat Blog di Blogspot

Share/Bookmark

1. Apa itu Blog ?

Blog merupakan sigkatan dari “Web log” adalah salah satu aplikasi web berupa tulisan-tulisan yang umum disebut sebagai posting pada halaman web. Tulisan-tulisan tersebut seringkali diurut dari yang terbaru dan diikuti oleh yang lama.


Awalnya, blog dibuat adalah sebagai catatan pribadi yang disimpan secara online, namun kini isi dari sebuah blog sangat bervariatif ada yang berisi tutorial ( contoh blog ini ), curhat, bisnis dan lain sebagainya. Secara umum, blog tidak ada bedanya dengan situs yang ada di internet.

Flatform blog atau seringkali disebut juga dengan mesin blog dibuat sedemikian rupa oleh para designer blog agar mudah untuk digunakan. Dulu, untuk membuat aplikasi web diperlukan pengetahuan tentang pemrogram
an HTML, PHP, CSS dan lain sebagainya, dengan blog semuanya menjadi mudah semudah menyebut angka 1 2 3.


2. Cara membuat bl
og di blogspot

Salah satu penyedia blog gratis yang cukup populer saat ini adalah blogspot atau blogger, dimana ketika
mendaptar adalah melalui situs blogger.com namun nama domain yang akan anda dapatkan adalah sub domain dari blogspot, contoh : contohsaja.blogspot.com

Kenapa harus mem
buat blog di blogger.com bukan pada situs penyedia blog lainnya? Sebenarnya tidak ada keharusan untuk membuat blog di blogger, namun ada banyak kelebihan yang dimiliki blogger di banding dengan penyedia blog lain. Beberapa contoh kelebihan blogspot di banding yang lain yaitu mudah dalam pengoperasian sehingga cocok untuk pemula, lebih leluasa dalam mengganti serta mengedit template sehingga tampilan blog anda akan lebih fresh karena hasil kreasi sendiri, custom domain atau anda dapat mengubah nama blog anda dengan nama domain sendiri misalkan contohsaja.blogspot.com di ubah menjadi contohsaja.com,sedangkan hosting tetap menggunakan blogspot dan masih tetap gratis.

Perlu ditekankan dari awal bahwa internet itu sifatnya sangat dinamis, sehingga mungkin saja dalam beberapa waktu kedepan panduan membuat blog di blogspot ini akan sedikit berbeda dengan apa yang anda lihat di blogger.com

Untuk mengurangi hal yang tidak
perlu di tulis, berikut cara membuat blogger di blogger.com


Membuat Email

Salah satu syarat yang harus dipenuhi dalam membuat blog adalah anda memiliki alamat email yang masih aktif atau di gunakan. Jika anda belum mempunya
i alamat email, silahkan daftar terlebih dahulu di gmail karena blogger adalah salah satu layanan dari Google maka ketika mendaftar ke blogger sebaiknya gunakan email gmail. Jika anda belum paham bagaimana cara membuat email, silahkan gunakan mesin pencari google untuk mencari panduannya.


Daftar Blog di blogger



1. Silahkan kunjungi
situs http://www.blogger.com
2. Setelah halaman pendaftaran terbuka, alihkan perhatian ke sebelah kanan atas, ubah bahasa ke Indonesia agar lebih mudah difahami. Silahkan langsung login dengan menggunakan username serta password gmail and
a ( akun email anda bisa untuk login ke blogger).








3. Klik tombol bertuliskan CIPTAKAN BLOG ANDA.






4. Isilah nama judul blog sert
a alamat blog yang di inginkan. Ingat! dalam membuat alamat blog harus benar-benar serius karena itu permanen tidak dap at digantikan lagi (kecuali nanti ganti dengan custom domain). Jika alamat yang diinginkan ternyata tidak bisa digunakan, masukkan kembali alamat lain yang masih tersedia. Jika alamat blog yang diinginkan masih tersedia, silahkan klik anak panah bertuliskan LANJUTKAN.














5. Silahkan pilih template yang anda sukai ( template ini nanti bisa diubah lagi kapan saja anda mau), kemudian klik LANJUTKAN.















6. Akan ada tulisan “Blog Anda Sudah Jadi!”. Silahkan lanjutkan dengan
klik tombol MULAI BLOGGING.











7. Setelah masuk post editor, silahkan isi apa saja ( disarankan untuk langsung mengisi posting, biasanya jika tidak langsung posting akan terjaring robot anti spam milik blogger, dan blog anda akan di lock). Contoh : hello world. Klik Tombol PRATINJAU untuk melihat tampilan yang nanti akan muncul di blog, klik tombol TERBITKAN ENTRI jika posting anda mau dipublikasikan ke publik.














8. Klik “Lihat Entri” untuk melihat blog anda. Berikut contoh tampilan blog yang tadi di buat.

9. Selesai.
....................readmore

Kalender

Banner Back Link



Untuk yang mau tukar & naruh banner seperti di atas tinggal copy & paste kode berikut

Bahasa

SMS Gratis

Pengikut