Free Tutorials | News | Bisnis Online: Pernak-Pernik Blog

Tampilkan postingan dengan label Pernak-Pernik Blog. Tampilkan semua postingan

Cara menambahkan Emoticon Di atas Kotak komentar

Kamis, 19 Agustus 2010

Assalamualaikum Wr Wb. Hai sahabat blogger pada kesempatan yang berbahagia kali ini Maswid akan menjelaskan sedikit mengenai Tutorial Blogspot yaitu Cara menambahkan Emoticon Di atas kotak komentar anda .nah seperti yang anda lihat Emoticon diatas kotak komentar saya,itulah contohnya,keren kan. Nah langsung saja ikuti Langkah-Langkah menambahkan Emoticon di atas kotak komentar dibawah ini ya.

Langkah Awal
1.Seperti biasa kita harus login blogger terlebih dahulu
2.Pilih Tata Letak -> Edit HTML
3.Sebelum Itu Backup dulu template anda untuk jaga-jaga apabila ada kesalahan
4.Centang Expand Template Widget
5.Cari Kode </body>
6.Jika sudah ketemu, letakkan kode script dibawah ini diatas kode </body> :

<script src='http://luvanis.fileave.com/java/anzu-monyet.js' type='text/javascript'/>

Jika sudah langkah-langkah diatas dilakukan sekarang Anda harus melakukan langkah yang kedua, perhatikan langkah kedua dibawah ini :

Langkah Selanjutnya

1. Lakukan perintah yang sama dari point 1-4 pada langkah pertama
2. Selanjutnya Anda harus mencari kode : <p class='comment-footer'>

Tetapi disini terjadi kendala karena kode diatas terdapat dua kode yang sama sehingga jika Anda melakukan Ctrl+F maka dikawatirkan Anda tidak tahu mana yang harus dipakai. Nah untuk mengetahuinya Anda harus melakukannya secara manual tetapi Anda jangan kawatir saya kasih solusinya yaitu Anda mulai mencarinya dari paling bawah karena kode yang dipakai adalah kode kedua. Anda mulai mencari dengan teliti jika sudah ketemu maka letakkan kode di bawah ini dibawah kode yang diatas tadi.
Kode :

<div style='overflow:auto; height:80px; width:360px'>
<b>
<img src='http://i983.photobucket.com/albums/ae312/luvanis/monyet/mBerangan.gif' width='40'/> :a:
<img src='http://i983.photobucket.com/albums/ae312/luvanis/monyet/mBom.gif' width='40'/> :b:
<img src='http://i983.photobucket.com/albums/ae312/luvanis/monyet/mCamera.gif' width='40'/> :c:
<img src='http://i983.photobucket.com/albums/ae312/luvanis/monyet/mCry.gif' width='40'/> :d:
<img src='http://i983.photobucket.com/albums/ae312/luvanis/monyet/mCubit.gif' width='40'/> :e:
<br/>
<img src='http://i983.photobucket.com/albums/ae312/luvanis/monyet/mDarah.gif' width='40'/> :f:
<img src='http://i983.photobucket.com/albums/ae312/luvanis/monyet/mDuit.gif' width='40'/> :g:
<img src='http://i983.photobucket.com/albums/ae312/luvanis/monyet/mFlu.gif' width='40'/> :h:
<img src='http://i983.photobucket.com/albums/ae312/luvanis/monyet/mGelak.gif' width='40'/> :i:
<img src='http://i983.photobucket.com/albums/ae312/luvanis/monyet/mGergaji.gif' width='40'/> :j:
<br/>
<img src='http://i983.photobucket.com/albums/ae312/luvanis/monyet/mGuilty.gif' width='40'/> :k:
<img src='http://i983.photobucket.com/albums/ae312/luvanis/monyet/mHaha.gif' width='40'/> :l:
<img src='http://i983.photobucket.com/albums/ae312/luvanis/monyet/mHantuk.gif' width='40'/> :m:
<img src='http://i983.photobucket.com/albums/ae312/luvanis/monyet/mHihi.gif' width='40'/> :n:
<img src='http://i983.photobucket.com/albums/ae312/luvanis/monyet/mHurm.gif' width='40'/> :o:
<br/>
<img src='http://i983.photobucket.com/albums/ae312/luvanis/monyet/mJahat.gif' width='40'/> :p:
<img src='http://i983.photobucket.com/albums/ae312/luvanis/monyet/mKanta.gif' width='40'/> :q:
<img src='http://i983.photobucket.com/albums/ae312/luvanis/monyet/mKening.gif' width='40'/> :r:
<img src='http://i983.photobucket.com/albums/ae312/luvanis/monyet/mKenyang.gif' width='40'/> :s:
<img src='http://i983.photobucket.com/albums/ae312/luvanis/monyet/mKipas.gif' width='40'/> :t:
<br/>
<img src='http://i983.photobucket.com/albums/ae312/luvanis/monyet/mKorek.gif' width='40'/> :u:
<img src='http://i983.photobucket.com/albums/ae312/luvanis/monyet/mLove.gif' width='40'/> :v:
<img src='http://i983.photobucket.com/albums/ae312/luvanis/monyet/mMandi.gif' width='40'/> :w:
<img src='http://i983.photobucket.com/albums/ae312/luvanis/monyet/mMuka.gif' width='40'/> :x:
<img src='http://i983.photobucket.com/albums/ae312/luvanis/monyet/mNgumpat.gif' width='40'/> :y:
<br/>
<img src='http://i983.photobucket.com/albums/ae312/luvanis/monyet/mNo.gif' width='40'/> :z:
<img src='http://i983.photobucket.com/albums/ae312/luvanis/monyet/mPanas.gif' width='40'/> :1:
<img src='http://i983.photobucket.com/albums/ae312/luvanis/monyet/mPeluh.gif' width='40'/> :2:
<img src='http://i983.photobucket.com/albums/ae312/luvanis/monyet/mPening.gif' width='40'/> :3:
<img src='http://i983.photobucket.com/albums/ae312/luvanis/monyet/mRambut.gif' width='40'/> :4:
<br/>
<img src='http://i983.photobucket.com/albums/ae312/luvanis/monyet/mRempit.gif' width='40'/> :5:
<img src='http://i983.photobucket.com/albums/ae312/luvanis/monyet/mSad.gif' width='40'/> :6:
<img src='http://i983.photobucket.com/albums/ae312/luvanis/monyet/mSakit.gif' width='40'/> :7:
<img src='http://i983.photobucket.com/albums/ae312/luvanis/monyet/mSelam.gif' width='40'/> :8:
<img src='http://i983.photobucket.com/albums/ae312/luvanis/monyet/mSmoking.gif' width='40'/> :9:
<br/>
<img src='http://i983.photobucket.com/albums/ae312/luvanis/monyet/mStudy.gif' width='40'/> :10:
<img src='http://i983.photobucket.com/albums/ae312/luvanis/monyet/mSurrender.gif' width='40'/> :11:
<img src='http://i983.photobucket.com/albums/ae312/luvanis/monyet/mThinking.gif' width='40'/> :12:
<img src='http://i983.photobucket.com/albums/ae312/luvanis/monyet/mTorchlight.gif' width='40'/> :13:
<img src='http://i983.photobucket.com/albums/ae312/luvanis/monyet/mWekk.gif' width='40'/> :14:
</b>
</div>

3. Jika sudah selesai klik Simpan Template
4. Klik Lihat Blog
Cara menggunakannya Anda tinggal mengetik kode emotion yang berada dikanan emotion.

Semoga Bermanfaat Bagi sahabat blogger yah :)

Cara Membuat Kotak Blogroll Marquee

Kamis, 12 Agustus 2010

Assalamualaikum Wr Wb.Pada kesempatan kali ini Maswid akan berbagi informasi tentang Tutorial Blogspot yaitu Cara Membuat Kotak Blogroll dan marque.ada dua macam kotak blogroll yang akan kita buat, terserah kamu mo pilih yang mana. Kotak blogroll-nya yaitu:

1. Kotak Blogroll Model Textarea

Contohnya seperti kotak blog roll seperti punyaku itu, itu lho yg atasnya ada tulisanya "Friend links"
Nha begini cara membuatnya :
Pasang code berikut ini di kedalam element kamu (Page Elements --> Add a Gadget --> HTML /Javascript)

<div style="border: 1px solid rgb(153, 153, 153);
overflow: auto;
width: 200px;
height: 200px;
text-align: center; ">

#link1 <br />
#link2 <br />
#link3 <br />
#link...

</div>

keterangan:
- Kode width: 200px; dan height: 200px; adalah ukuran lebar dan panjang kotak, kamu bisa merubahnya dan menyesuaikanya dengan ukuran yg kamu suka.
- Ganti tulisan "#link1,#link2, #link3 dst" dengan daftar link-link kamu, oh ya itu juga bisa diisi dengan banner link.
- Jika kamu pingin daftar link-linknya berjajar kayak punyaku, maka hilangkan kode <br />

2. Kotak Blogroll Model Marquee

Kotak ini juga mampu menampung banyak link dalam tempat yang sempit. Namun kotak blog roll ini berbeda dengan kotak yg diatas, karena kotak yang ini tidak memiliki rollbar (yg biasanya disebelah kanan trus ditarik keatas kebawah itu lho). Link-link ato isi didalam kotak ini akan bergerak/berjalan, bisa vertikal ato horizontal. Nah gini nih cara buatnya:
Pasang code berikut ini di kedalam element kamu (Page Elements --> Add a Gadget --> HTML /Javascript)

<MARQUEE align="center" direction="up" height="100" scrollamount= "2" onmouseover='this.stop()' onmouseout='this.start()' width="95%" >

#link1 <br />
#link2 <br />
#link3 <br />
#link...<br />

</marquee>

Keterangan :
- Kode "up" itu menunjukan arah pergerakan, kamu bisa menggantinya dengan down, left, right (udah mudeng to artinya, gak usah dijelasin ya).
- Jika kamu menggantinya dengan pergerakan horizontal (left ato right) maka hilangkan kode
.
- Angka "100" menunjukkan tinggi dari kotak blogroll kamu. Semakin banyak angkanya maka semakin tinggi pula ukuran blogroll.

Selesai deh.

Cara Memasang Widget Translator

Assalamualaikum Wr Wb. Pada kesempatan kali ini Maswid akan memberi sedikit informasi tentang Tutorial Blogspot yaitu Cara Memasang Widget Translator.
1. Login ke Blogger trus pilih menu "Layout" atau "Tata Letak"
2. Kemudian klik pada "Add Gadget" atau "tambah gadget".
3. Lalu pilih HTML/Javascript"
4. Kemudian masukkan script berikut ini kedalamnya.

<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com;/ig/modules/translatemypage.xml&up_source_language=id&w=160&h=60&title=&border=&output=js"></script&gt

5. Simpan deh..

Cara Untuk Membuat Artikel Terpopuler

Assalamualaikum Wr Wb.Nah sahabat blogger pada kesempatan kali ini Maswid akan memberi sedikit informasi tentang Tutorial Blogspot yaitu Cara Untuk Membuat Artikel Terpopuler.Nah langsung saja deh tanpa basa basi. ikuti langkah-langkah dibawah ini dengan baik dan benar.
1. Seperti biasa, sobat login dulu ke blogger.
2. Kemudian tuju Elemen Halaman.
3. Klik Tambah Gadget.
4. Pilih yang HTML/ Javascript .
5. Masukkan kode Javascript berikut ini

<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ul style="text-transform: capitalize;">');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ul>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=ff855e4f4d4a10fde1c2eb32074f99cd&url=http%3A%2F%2FAlamatBlog.blogspot.com&num=10" type="text/javascript"></script>

6.Ganti tulisan yang saya tebalkan dengan alamat blog sobat, kemudian Simpan.
Semoga artikel Cara Membuat Top Posting/Artikel di Blog dapat bermanfaat bagi anda.

Cara Membuat Spoiler

Assalamualaikum Wr Wb. Pada kesempatan kali ini Maswid akan memberi sedikit informasi tentang Tutorials Blog yaitu cara membuat spoiler.Spoiler itu adalah sesuatu yang dipakai untuk dapat menyembunyikan link, gambar, seluruh atau sebagian isi dari postingan blog kita, dan lain-lain. Spoiler ini juga bisa menguntungkan kita dalam hal pengurangan loading, maksudnya adalah, jika kita menggunakan spoler pada gambar, maka blog kita tidak akan dikenai beban loading yang bisa memberatkan. Tapi tidak hanya gambar lho, video pun bisa menggunakan spoiler agar loadingnya tidak memberatkan blog kita. Spoiler juga berguna sebagai tempat untuk menaruh kode di postingan supaya punya kesan unik, inovatif dan inspiratif.Contohnya seperti dibawah ini nih.

Berikut Ini Scriptnya tinggal di copas aja... jangan lupa ganti tulisan yang bewarna merah dengan sesuka hati anda.

<div style="margin: 5px;">
<div class="bigfont" style="margin-bottom: 2px;"><input value="Open" style="margin: 0px; padding: 0px; width: 60px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;">LETAKAN DISINI</div></div></div>

Memasang Alexa Rank pada Blog

Assalamu’ alaikum .Hai sahabat Blogger Pada postingan kali ini Maswid akan menerangkan tentang cara memasang Alexa Rank pada blog. Alexa Rank adalah tool yang dapat digunakan untuk mengetahui ranking traffic (pengunjung) pada blog kita. Dengan memasang gadget alexa pada blog, maka mesin alexa akan dapat mengetahui secara akurat berapa pengunjung serta Page view (halaman yang di lihat) pada blog anda. Oleh karena itu saya menyarankan kepada anda untuk memasang Gadget Alexa Rank pada blog anda.Nha kalau begitu nggak usah banyak bacot lagi, langsung aja ikuti tips blog berikut ini :
1. Klik DI SINI !
2. Masukkan nama blog anda pada kotak yang disediakan (tanpa menggunakan http://) kemudian klik tombol Build Widget
3. Ada 3 macam ukuran yang bisa anda pilih salah satunya, kemudian copy kode yang berada di sampingnya
4. Langkah selanjutnya login ke blogger.com
5. Klik Layout ---> Elemen Halaman ---> Add Gadget/Tambah Gadget
6. Pilih HTML/Javascript
7. Masukkan kode yang telah dicopy dari Alexa Rank ke dalam kotak yang disediakan
8. Klik tombol simpan
9. Selesai dhe, allhamdulillah !
10. Moga-moga dengan memasang gadget Alexa Rank dapat meningkatkan ranking alexa. Kemudian jangan lupa semakin kecil angkanya semakin baik rangkingnya. Wassalamu’ alaikum wr.wb.

Cara Membuat Readmore Manual

Rabu, 11 Agustus 2010

Assalamualaikum Wr Wb. Nah sahabat blogger kali ini Maswid akan menjelaskan sedikit Informasi tentang tutorial Blogspot yaitu Cara membuat Readmore Manual.Readmore Itu ada dua macam yang pertama Readmore Manual dan Readmore Otomatis.Biasanya postingan terbaru akan ditampilkan dihalaman utama blog. Namun jika postingan kamu terlalu panjang maka hal tersebut akan membuat penuh halaman utama. Jika kamu ingin supaya postingan kamu yang ditampilkan dihalaman utama cuma abstraksinya saja kemudian ada sebuah link Read More / Baca Selengkapnya untuk melihat selengkapnya maka ikutilah langkah-langkah berikut :
1. Buka menu Layout kemudian pilih Edit HTML.
2. Kasih tanda cek (centang) pada cekbox "expand widget template"
3. Cari kode berikut di Template blog kamu (tempatnya kira-kira pada 1/4 bagian bawah kode hmtl) :<p><data:post.body/></p>
4. Kalau sudah ketemu, Ganti kode kode tersebut sehingga menjadi seperti ini:

<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'>Read More......</a>
</b:if>

Tulisan "Read More....." itu bisa kamu rubah, misalnya jadi "Baca Selengkapnya".

5. Simpan hasil pengeditan.
6. Kemudian pilih menu Setting lalu pilih Formatting
7. Pada kotak Post Template isikan kode berikut:

<span class="fullpost">

</span>

8. Kemudian Simpan.
9. Ketika memposting, kan disana ada 2 tab pilihan tuh, yang "Compose" dan "Edit Html", Nha km pilih Yang "Edit HTML", Maka secara otomatis akan tampak kode seperti berikut :

<span class="fullpost">

</span>

10. Letakkan abstraksi posting atau artikel yang akan ditampilkan dihalama utama (sebelum tulisan "Redmore") diatas kode ini : <span class="fullpost"> sementara sisanya yaitu keseluruhan posting letakkan di antara kode <span class="fullpost"> dan </span>
11. Ini yang paling penting diantara semua proses diatas yaitu ..... Selesai..... he..he..he.. :D
Selamat Mencoba...

Cara Memberi Recent Comment

Assalamualaikum Wr Wb. Nah pada kesempatan kali ini Maswid akan menjelaskan tentang Tutorial Blogspot yaitu cara memberi recent comment .nah ada yang belum tau apa itu recent comment???.Recent Comment itu berisi tentang Comment-comment terakhir yang diberikan oleh pembaca artikel kita terhadap artikel kita.Nah langsung saja ikuti langkah-langkah dibawah ini ya.
1. Seperti biasa Login terlebih dahulu di blogger
2.Masuk ke tataletak -> Elemen halaman
3. Setelah itu tambah gadget -> pilih html/javascript .
4. Masukan script dibawah ini

<div style="border: 1px solid rgb(153, 153, 153);
overflow: auto;
width: 285px;
height: 100px;
text-align: left; ">
<script style="text/javascript" src="http://anas.ku93.googlepages.com/comments.js"></script><script style="text/javascript">var numcomments =100;var showcommentdate = true;var showposttitle = true;var numchars = 30;var standardstyling = true;</script><script src=" http://NAMABlOGMU.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
</div>

5. Ganti tulisan yang bewarna merah dengan nama blogmu
6. Setelah itu simpan dan liat hasilnya.. teret,,,,, jadi deh.

Cara Membuat Artikel yang Berhubungan / Related Post

Assalamualaikum Wr Wb.Nah sahabat blogger dikesempatan kali ini Maswid akan memberikan sedikit informasi tentang Cara untuk membuat Artikel yang berhubungan/Related Post.Nah udah tau belum Related post itu apa??? Related post itu adalah artikel berhubungan yang biasanya diletakan dibawah postingan. kayak dibawah postinganku itu lo....
Langsung saja cara bikin nya gampang banget kok..
1. seperti biasa sebelumnya kita WAJIB login blogger.
2. Masuk Ke Tataletak -> Edit HTML
3. Centang kotak 'Expand Widgets Template'
4. Cari kode ini <data:post.body/>
5. Letakkan script berikut ini di bawah kode <data:post.body/> tadi.

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>

<div class='widget-content'>
<h3>Related Post</h3>
<div id='data2007'/><br/><br/>
<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('data2007').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>

</div>
</b:if>

6. Simpan. Selesai.

Cara Membuat Blockquote

Assalamualaikum Wr Wb. Pada kesempatan kali ini Maswid akan berbagi informasi tentang pernak-pernik blogspot yaitu adalah cara membuat Blockquote.Sudah Tau apa itu blockquote????blockquote itu kayak dibawah ini nihh.. namanya blockquote

Ini adalah contoh blockquote ..Keren kan.haha

Nah sekarang sudah tau kan mengenai blockquote.Langsung saja ikuti langkah dibawah ini dengan baik dan benar
1.Login Blogger
2.Klik Rancangan -> Edit HTML
3.Backup Templatenya dulu biar nanti kalo terjadi kesalahan tinggal di restore.
4.Cari Kode ]]></b:skin>
5.Sisipkan Kode/script berikut ini persis dibawah nya.

blockquote {
margin: 10px 10px 10px 20px;
padding: 10px 15px 10px 15px;
line-height: 1.6em;
color: #000000;

background: #e0ffff;

border: 2px solid #4aa02c;
border-left: 20px solid #4aa02c
}

Setelah Itu Selesai deh.. nah kalo ingin memberi blockquote di dalam postingan caranya tinggal Sisipkan <blockquote> dan akhiri tagnya dengan </blockquote>