NGORMEL7: Blog

Tampilkan postingan dengan label Blog. Tampilkan semua postingan

Senin, 03 Juli 2017

Membuat Cursor Blog Menjadi Bertaburan Seperti Bintang

Ngormel7-Berbuburan bintang...?berat dong kalau ada bintang.....hehehehe
Judulnya memang agak membingungkan saya aja bingung jika baca judulnya
tapi tidak apa yang penting lanjut....Ngacir............!
Bukan bintang asli lo...!
Kalau bintang asli gimana taruh di blog........bukan taruh di blog
malah monitornya yang hancur ya kan....heheheh

Kalau bosen langsung saja ya kita mulai tutorial nya ini di bawah:
1. Login ke akun Blogger kalian
2. Buka Rancangan > Tambah Gadget > Edit HTML/JavaScript
3. Copy kode yang berwarna dibawah ini ke kolom Javascript (silahkan dipilih warna sesuaikan kesukaan anda)

a. bintang Merah
<script src='https://sites.google.com/site/ibnusharesblogspotcom/ibnufajar/bintang-merah.js' type="text/javascript"></script>

b. bintang Biru
<script src='https://sites.google.com/site/ibnusharesblogspotcom/ibnufajar/bintang-biru.js' type="text/javascript"></script>

c. bintang Hijau
<script src='https://sites.google.com/site/ibnusharesblogspotcom/ibnufajar/bintang-hijau.js' type="text/javascript"></script>

d. bintang Putih
<script src='https://sites.google.com/site/ibnusharesblogspotcom/ibnufajar/bintang-putih.js' type="text/javascript"></script>

e. bintang Ungu
<script src='https://sites.google.com/site/ibnusharesblogspotcom/ibnufajar/bintang-ungu.js' type="text/javascript"></script>

5. Setelah di Paste Lalu klik Simpan
6. Selesai!

Coba anda lihat blog anda dan arahkan cursor ke mana saja
Lihat ada bintang yang bertaburan..!

Semoga Berhasil!
Tolong Komentarnya jika ada masalah..!
Ok Sob Thanks telah berkunjung!

Minggu, 02 Juli 2017

Memasang Pilihan Bahasa ke Blog Anda

Ngormel7-Fungsi ini sama seperti translate tapi yang kali ini lebih simple namun lengkap karena cukup dengan Klik "Pilih Bahasa" maka semua pilian bahasa akan muncul tinggal agan memeilihnya mau di terjemahkan ke Bahasa apa..

Posisi simple di Blog

Pilihan Bahasa Lengkap

Nah Langsung saja saya tunjukin caranya gan... lebih cepat lebih baik hehehe....

1. Login ke Blogger anda (sudah login kan?)
2. Klik Rancangan > Tata Letak > Tambah Gadget

3. Pilih HTML/JavaScript

4. Masukkan code berikut di mana saja sesuai selera

<div id="google_translate_element">
</div>
<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'id'
}, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit">
</script>

5. Klik Simpan

Terakhir lihat blog anda apakah berhasil atau tidak.
Jika sudah bisa silahkan untuk meninggalkan komentar anda ya... salam :)

Kode HTML Untuk Membuat Tulisan Kedap Kedip (Blink)

Ngormel7-Sebelum saya memulai postingan kali ini. Apa sebenarnya HTML itu? HTML merupakan salah satu bahasa pemrograman web yang sangat populer. Hal ini dapat di anggap wajar mengingat dasarnya sebuah website di susun dari HTML seperti HTML link, HTML font, dan banyak lagi yang lainnya. Pada kesempatan kali ini saya akan membahas salah satu HTML yang termasuk banyak yang menggunakannya. Yaitu HTML blink.

Kode HTML ini biasa di gunakan untuk membuat tulisan kedap kedip dan pastinya sangat mudah di gunakan. Banyak blogger yang menggunakan HTML ini pada blog mereka termasuk saya pribadi.

Dengan anda menggunakan HTML ini akan membuat pengunjung blog anda menganggap bahwa tulisan tersebut merupakan sesuatu yang penting sehingga apabila anda menaruhnya pada sebuah link, akan membuat kemungkinan pengunjung mengunjungi link tersebut semakin besar.

Lalu bagaimana cara membuat tulisan kedap kedip ini? Caranya sangat mudah. Anda hanya perlu mengapit tulisan/link yang ingin anda masukkan efek tulisan blink ini dengan <blink> dan di akhiri dengan </blink>. Contoh:

<blink>Tulisan Anda Di Sini</blink>

Lalu anda akan melihat hasilnya seperti ini:

Tulisan Anda Di Sini

Anda dapat memodifikasinya dengan sebuah link seperti berikut:

<blink><a href="http://ngormel7.blogspot.com" title="Ngormel7's Blog" target="_blank">Ngormel7</a></blink>

Hasilnya akan seperti ini:

Dan's Blog

Bagaimana? Mudah bukan? Jangan lupa untuk memberi komentarnya gan... Sekian artikel kali ini dari saya. Semoga bermanfaat.

Sumber

Sabtu, 01 Juli 2017

Cara Sorot Komentar Penulis di Blogspot

Trik ini adalah memberikan Highlight Author Comment. Ini akan membuat komentar pemilik blog terlihat berbeda dari komentar para pengunjung. Ini sangat berguna dan tips hack blogger yang menarik. Anda bisa lihat contohnya di blog saya. Inilah yang harus dilakukan untuk membuat efek "Highlight Author Comment" di Blogspot.

1. Login ke blogger, kemudian pilih "Layout --> Edit HTML". Perhatian.. jangan lupa backup dulu template anda sebelum di edit.
2. Check the "Expand Widget Templates" box.
3. Copy script ini dan taruh sebelum kode ]]></b:skin> ata copy ke CSS area.

.comment-body-author {
background: #E6E6E6; /* Background color*/
color: #000; /* Text color*/
border-top: 1px dotted #223344;border-bottom: 1px dotted #223344;border-left: 1px dotted #223344;border-right: 1px dotted #223344;
margin:0;
padding:0 0 0 20px; /* Posotion*/
}

4. Kemudian cari kode dibawah ini:

5. Teks warna merah adalah kode yang harus Anda tambahkan ke skrip Anda. Posisi harus benar.
6. Dan simpan template anda.

* Anda harus login ke akun blogger Anda sebelum memberikan komentar.

Sumber

CARA MEMBUAT TOMBOL LIKE DI SETIAP POSTING

Tutorial kali ini saya tidak akan menjelaskan secara panjang lebar karna saya rasa anda juga sudah tau manfaat dari tombol like facebook. Tombol like facebook yang akan anda pasang pada blog anda fungsinya sama dengan tombol like yang ada pada update status facebook anda yaitu berfungsi untuk mengetahui seberapa banyak pengunjung yang menyukai artikel atau postingan anda.

Model Tombol Pada Blog

Ok!, langsung saja kita bahas cara membuat tombol like facebook pada setiap postingan blog anda. Langkah-langkahnya adalah :

Log-in ke blog anda
Pilih Rancangan >Edit HTML

Download template lengkap terlebih dahulu
Centang Expand Template Widget
Cari kode <data:post.body/> Jika kode tersebut ada dua pilih kode pertama
Copy kode berikut

Paste atau letakan diatas kode <data:post.body/> apabila tombol like ingin berada diatas posting dan letakan dibawah <data:post.body/> apabila tombol like facebook ingin berada dibawah posting
Kemudian klik simpan template
lihat hasilnya dan selesai

Model Tombol pada blog

Kelebihan lain dari tombol like facebook yaitu apa bila ada pengunjung yang mengklik tombol like facebook diartikel kita maka Link artikel kita yang dilki akan muncul di Profil facebook pengunjung.

Sumber : http://www.full-information.co.cc/2011/03/cara-membuat-tombol-like-facebook.html

Jumat, 14 Desember 2012

Membuat Permalink Otomatis Di Blog

Membuat Permalink Otomatis Di Blog

Kali ini saya akan mencoba sharing cara Membuat Permalink Otomatis Di Blog. Namun sebelumnya saya akan membahas sedikit tentang Permalink itu sendiri. Bagi kita sebagai blogger pemula tentunya asing dengan yang namanya Permalink. Menurut para ahli, Permalink adalah singkatan dari Permanent Link yang artinya adalah alamat permanen url atau link yang menuju ke blog atau web tertentu yang langsung menuju ke postingan blog/web itu sendiri.

Nah dengan Membuat Permalink Otomatis Di Blog, diharapkan dapat menambah internal link postingan atau artikel blog kita sehingga lebih SEO lagi dan dapat bersaing dan bertahan di search engine dan tentunya juga diharapkan dapat meningkatkan optimasi onpage blog kita. Biasanya permalink otomatis di simpan di bawah postingan. Anda mungkin pernah melihat seperti gambar di bawah ini:

Membuat Permalink Otomatis Di Blog

Gambar di atas adalah contoh untuk permalink otomatis yang ada di setiap postingan blog. Nah bagi yang ingin Membuat Permalink Otomatis Di Blog silahkan simak uraian cara membuatnya di bawah ini.

Seperti biasa Anda silahkan Login ke blog Anda >> Dashboard >> Template >> Edit HTML >> Jangan lupa centang Expand Widget Templates. Namun alangkah baiknya sebelumnya Anda back up dulu template blognya untuk menjaga hal-hal yang tidak diinginkan, sehingga bilamana terjadi kesalahan bisa dikembalikan ke template semula.

Kemudian cari kode ]]></b:skin> agar lebih mudah dalam pencarian, tekan CTRL + F di keyboard kemudian masukan kode ]]></b:skin> tadi. Setelah ketemu silahkan copy kode di bawah ini dan paste SEBELUM kode ]]></b:skin> tadi.

.buatpermalinkblogger {border:1px solid #191919; border-bottom:1px solid #666; border-right:1px solid #666; padding: 5px; background: #444;-moz-border-radius:5px;}
.buatpermalinkblogger a {background:none;} img.float-right {margin: 5px 0px 0 10px;} img.float-left {margin: 5px 10px 0 0px;}

Perhatikan tulisan berwarna merah #444 itu menunjukkan warna untuk kotaknya. Silahkan sesuaikan dengan warna blog Anda.

Kemudian cari kode seperti di bawah ini

<div class='post-footer-line post-footer-line-1'>

atau kalau enggak ada cari yang seperti di bawah ini

<p class='post-footer-line post-footer-line-1'>

Kemudian copy kode di bawah ini dan pastekan SETELAH kode di atas tadi.

<b:if cond='data:blog.pageType == "item"'>
<div class='buatpermalinkblogger'><center><small>Anda sedang membaca artikel tentang <strong><i><data:blog.pageName/></i></strong> dan bila berkenan Anda bisa share artikel <strong><i><data:blog.pageName/></i></strong> ini dengan tombol share di bawah. Bila Anda bermaksud COPAS artikel <strong><i><data:blog.pageName/></i></strong> untuk diposting di blog Anda, mohon untuk meletakkan link <strong><i><a expr:href='data:post.url'><data:blog.pageName/></a></i></strong>
sebagai Sumbernya dengan mengcopy kode di bawah ini.</small></center>
<div>
<form name="kompi ajaib">
<p align="center" style="margin-top: 0; margin-bottom: 0"><textarea style="width: 98%; height: 10" name="txt" rows="1" cols="45" onmouseover="this.form.txt.select()" readonly ;><small><a href='<data:post.url/>'target='_blank'><strong><i>Sumber</i></strong></a></small></textarea></p>
</div>
<div style='border: 0px; padding: 5px; background-color: none; text-align: right; font-size:9px;'>Get this <a href='http://kompiajaib.blogspot.com/2012/06/membuat-permalink-otomatis-di-blog.html' target='_blank'>widget</a></div>
</div></b:if>

Silahkan lakukan preview untuk memastikan penerapan kodenya sudah betul atau belum, kemudian save template blog Anda.

Demikian postingan Membuat Permalink Otomatis Di Blog, mudah-mudahan bermanfaat.

sumber : http://www.kompiajaib.com/2012/06/membuat-permalink-otomatis-di-blog.html#ixzz2F0cf3Mcb

Selasa, 02 Oktober 2012

Pasang Musik di blog menggunakan Videokeman

Sambil ngeblog kita dapat mendengarkan alunan lagu favorit, sungguh sangat menyenangkan. Apalagi jika ditambah segelas kopi lengkap dengan cemilan akan menambah keasyikan dalam mengotak atik blog.
Salah satu situs yang menyediakan layanan gratis untuk menampilkan lagu pada blog adalah Videokeman.com. Selain itu, Videokeman memiliki koleksi lagu yang lengkap sehimgga anda dapat memilih lagu sesuai dengan keinginan. Koleksi yang tersedia secara umum lagu barat tetapiada juga beberapa dari lagu Indonesia

Simak langkah-langkahnya :

Kunjungi http://videokeman.com
Silahkan anda lihat-lihat deretan lagu yang ada dibagian beranda situs itu.

Jika belum menemukan lagu yang anda cari, dibagian atas ada sederetan huruf dari A sampai Z yang merupakan huruf awal dari penyanyi atau group band. Klik huruf awal dari penyanyi atau group band untuk masuk ke halaman pilihan anda. Atau anda juga bisa mencarinya dari kotak pencarian yang ada di bagian atas.
Berikutnya akan tampil nama penyanyi/group band dengan huruf awal yang diklik tadi. Silahkan anda pilih penyanyi/group band.

Klik lagu yang ingin anda tampilkan . Dengarkan dulu lagu yang telah anda pilih itu. Jika belum puas dengan lagu yang anda pilih, ulangi lagi cara diatas untuk memilih lagu yang paling sesuai.

Setelah mendapat lagu yang cocok, alihkan perhatian anda ke bagian menu Rock ‘n Share!. Dibawah icon social boorkmark terdapat kode embed dari lagu yang anda pilih. Copy kode embed tersebut kemudian masukkan kedalam blog

CARA MEMASUKKKAN LAGU KEDALAM BLOG

Masuk ke Blogger
Klik tab Rancangan bagian Elemen Halaman
Klik Tambah Gadget
Pilih HTML/Javascript.
Paste kode embed yang anda copy tadi pada kolom yang tersedia.

Still Loving You – Scorpions Song Lyrics

Jika anda hanya ingin menampilkan music playernya saja, hapus kode yang berwarna kuning seperti pada contoh dibawah ini :

<img
 style="visibility:hidden;width:0px;height:0px;" border=0 width=0 
height=0 
src="http://c.gigcount.com/wildfire/IMP/CXNID=2000002.0NXC/bT*xJmx*PTEzMDQ*MjQ3NTgyNTAmcHQ9MTMwNDQyNDc2NDcxOCZwPTI5MzMzMSZkPSZnPTEmbz1hMTYwYzExMmY3NzM*NTQyYWU*/YmE*MDQ2OTA1MDE*YyZvZj*w.gif"
 /><center><a target="_blank" 
href="http://videokeman.com"><img border="0" 
src="http://i39.photobucket.com/albums/e159/normanski/players/ewualizer.gif"
 alt="videokeman mp3" /></a><br /><a target="_blank" 
href="http://videokeman.com/scorpions/still-loving-you-scorpions/">Still
 Loving You â�� Scorpions Song Lyrics</a><br /><embed
 src="http://videokeman.com/music/videokemanplay.swf" width="300" 
height="44" wmode="transparent" 
FlashVars="playerID=1&bg=0xffffff&leftbg=0xCA4536&lefticon=0xffffff&rightbg=0xCA4536&rightbghover=0x999999&righticon=0xffffff&righticonhover=0xffffff&text=0xCA4536&slider=0x303030&track=0xFFFFFF&border=0x666666&loader=0xC52C24&autostart=yes&loop=yes&soundFile=http://videokeman.com/dload/flv2/08Mar01/Scorpions_-_Still_Loving_You.vkm"
 ></embed></center>

Tampilannya akan seperti ini :

Still Loving You â�� Scorpions Song Lyrics

Selamat mencoba, semoga bermanfaat...dan selamat menikmati lagu favorit anda...

Sumber

Rabu, 19 September 2012

Share Cara pasang Auto Read More terbaru (Part 2)

Fungsi Read More kali ini emang agak berbeda dengan versi Read More yang lama (part 1). Bila versi terdahulu kita harus meng-cut tulisan menggunakan cara manual dengan melakukan pemangilan fungsi <div class="fullpost">..</div> atau <span class="fullpost">..</span> dimana kode ini biasanya kita tanamkan secara manual kedalam halaman postingan. Untuk versi Auto Read More terbaru kali ini sepertinya lebih canggih lagi, karena fungsi pemenggalan kalimat langsung bekerja secara otomatis tanpa harus menambahkan kode diatas.

Trus..hebatnya lagi, fungsi Read More ini mampu menampilkan image pertama dalam postingan dan mem-fload image tersebut di awal paragraf awal, meskipun gambar yang kita letakan berada di tengah atau akhir postingan. Mungki lebih nyaman saya sebut saja dengan fasilitas image thumbnail.

Tidak hanya itu saja, kita dapat juga pengatur jumlah karakter yang ditampilkan. Disini ada 2 pilihan untuk jumlah karakter. Yang pertama, jumlah karakter yang ditampilkan jika ada image yang diikutsertakan dalam postingan dan yang kedua jumlah karakter tanpa image. Masih bingung maksudnya? sama..yang jelasin juga puyeng wkwkwkw Ya sudah, biar sama2 gak pusing langsung ke tutorialnya saja ok.

Penting! 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;'/>

OK, kalo sudah tinggal lanjutkan dengan tutorial dibawah.

Pertama, silahkan tuju langsung ke halaman EDIT HTML, Cari kode </head> kemudian letakan script dibawah ini di atas kode </head> Kalo sudah, jangan lupa di simpan terlebih dahulu.

Langsung copy paste aja kode dibawah ini:

<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 temukan kode seperti dibawah

<data:post.body/>

Kalo sudah, ganti kode <data:post.body/> dengan semua kode dibawah ini

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><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)

sumber

Cara atau Trick Membuat Label Cloud Berputar

- Reviewer: Aini Sastra - ItemReviewed: Cara atau Trick Membuat Label Cloud Berputar

10 Views

Kali ini Gue Mau Buat Trick Membuat Label Cloud Berputar, langsung aja ya. Gue Lagi Malas Basa-Basi, hehehe...

Pertama...

buat Gadget label dengan nama Label Cloud

trus di buka edit html, jangan lupa centang Expand Templete Widget, carikan dengan ctrl+f dengan keyword Label Cloud tadi yang penting ada kata Label Cloud tadi, ini hasil contoh label yg sudah dibuat

<b:widget id='Label2' locked='false' title='Label Cloud' type='Label'>

<b:includable id='main'>

<b:if cond='data:title'>

</b:if>

<b:if cond='data:display == "list"'>

<ul>

<b:loop values='data:labels' var='label'>

<li>

<b:if cond='data:blog.url == data:label.url'>

<b:else/>

</b:if>

<b:if cond='data:showFreqNumbers'>

</b:if>

</li>

</b:loop>

</ul>

<b:else/>

<b:loop values='data:labels' var='label'>

<b:if cond='data:blog.url == data:label.url'>

<b:else/>

</b:if>

<b:if cond='data:showFreqNumbers'>

</b:if>

</span>

</b:loop>

</b:if>

<b:include name='quickedit'/>

</div>

</b:includable>

</b:widget>

Setelah Ketemu Ganti atau Replace Semua Kode diatas dengan Kode di bawah ini,

<b:widget id='Label99' locked='false' title='Cloud Category' type='Label'>

<b:includable id='main'>

<b:if cond='data:title'>

</b:if>

<div id='flashcontent'>Blogumulus by <a href='http://www.ainisastra.blogspot.com/'>Sastra Blog</a> and <a href='http://www.ainisastra.blogspot.com'>Sastra Blog</a></div>

var so = new SWFObject("http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf", "tagcloud", "180", "200", "7", "#D0F5A9");

// uncomment next line to enable transparency

//so.addParam("wmode", "transparent");

so.addVariable("tcolor", "transparant");

so.addVariable("mode", "tags");

so.addVariable("distr", "true");

so.addVariable("tspeed", "100");

so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");

so.addParam("allowScriptAccess", "always");

so.write("flashcontent");

</script>

<b:include name='quickedit'/>

</div>

</b:includable>

</b:widget>

Teks yang berwarna merah adalah untuk merubah Ukuran Label Cloud Sesuai yg diinginkan

Teks yang berwarna Hijau adalah untuk Gambar Latar , kode warna bisa di lihat disini

Teks yang berwarna Pink itu Nomor Code Html, untuk mencegah Code Gadget yang lain yang bisa sama. makanya di buat manjadi Label99

NB: Ingan Code script terakhir seperti </b:widget> , itu harus di replace sampai Code itu juga, tapi jangan kelewatan sampai Mereplace Code Gadget yang lain, biasanya code Gadget yang lain di awali dengan code Script <b:widget id , Contohnya Code Script awal label Cloud di atas dan pasti akan di akhiri dengan code </b:widget> .

Keduanya mana Ko Cuma Perama aja Tricknya( Kan Gue Udah Bilang, Gue Lagi Malas Bua Basa-Basi) hohoho

Sekian Dulu Trick Dari Saya Buat Sobat, Semoga Berhasil, Jika Ada yang ditanyakan Silahkan tanggalkan Komentar. Sebisa Mungkin saya jawab..

==== NB = UNTUK SCRIPT DIATAS WARNA HURUF TDK DPT DIUBAH =====

=== UNTUK MENGUBAHNYA SILAHKAN SESUAIKAN SCRIPT ===

==== DI BAWAH INI ====

Langkah-langkah pemasangan~nya :
1. Masuk Ke Dasbor Blogger
2. Rancangan
3. Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Copy Code berikut :

<b:widget id='Label50' locked='false' title='tag' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://sites.google.com/site/jetzblogs/tag-cloud/jetztagcloud.js' type='text/javascript'/>
<div id='flashcontent'/>
<script type='text/javascript'>
var so = new SWFObject("http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf", "tagcloud", "185", "185", "7", "#000000");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x80ff00");
so.addVariable("hicolor", "0xFFFFFF");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "125");
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
<script type='text/javascript'>
</script>
</div>
</b:includable>
</b:widget>

4. Paste-kan kode tadi dibawah kode :

<b:section class='sidebar' id='sidebar' preferred='yes'>
atau

<b:section class='sidebar' id='sisiatas' preferred='yes'>

5. Save templat anda, dan lihat hasilnya.........

Keterangan HTML :
185 = Lebar Widget dalam px
185 = Tinggi Widget dalam px
#000000 = Warna Background (Hitam)
0x80ff00 = Warna Huruf
12 = Ukuran Font
0xFFFFFF = Warna Link

Nah SELAMAT MENCOBA

sumber

Jumat, 18 Mei 2012

Cara Membuat Tombol Share di Bawah Postingan (Seperti Punya Saya)

screenshot ShareButton

Share button adalah tombol yang digunakan untuk membagikan artikelartikel anda. Dengan membagikan artikel anda ke social bookmark terkenal seperti facebook, twitter akan memudahkan teman, kenalan, dan orang lain menemukan blog anda yang sebenarnya istimewa itu. Maka pemasang share button ini cukup penting dalam meningkatkan traffic pengunjung blog anda. Langsung saja begini cara memasang share button dibawah postingan

Langkahnya :
1. anda masuk ke template - edit html - expand template widget
2. lalu anda cari kode <data:post.body/> pencet ctrl+F untuk memudahkan pencarian
3. dibawahnya taruh kode-kode berikut

<b:if cond='data:blog.pageType == "item"'>
<div style='border-top:1px solid #ccc;border-bottom:1px solid #ccc; padding:8px 0px;margin:5px 0px 5px 0px;width:100%;float:left;height:20px;'>
<div style='float:left;padding-left:0px;font:normal 12px Georgia;'>
Share on :
</div>
<div style='float:left;padding-left:10px;'>
<a name='fb_share' type='button_count'/>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'>
</script></div>
<div style='float:left;padding-left:10px;'>
<a class='DiggThisButton DiggCompact'/>
<script type='text/javascript'>
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script>
</div>
<div style='float:left;padding-left:10px;'>
<a class='twitter-share-button' data-count='horizontal' data-via='User Name' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
<div style='float:left;padding-left:10px;'>

<g:plusone size="medium"></g:plusone>

<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>
</div>
</b:if>

lalu klik save template..

semoga bermanfaat.. luangkan waktu untuk memberi komentar ya... terimakasih :)

Sumber

Kamis, 17 Mei 2012

Page Navigation For Blogger II (Seperti Punya Saya)

Page Navigation is a really awesome and long awaited feature. You might have seen numbered page navigation on many wordpress blogs(wp-pagenavi by Lester Chan). Muhammad Rias of Techie Blogger had already developed a page navigation system for blogger.It really was an awesome trick which was made at a time when nobody could even think of implementing it on blogger.It had some minor bugs and now Abu Farhan has perfected it and he has now given us the perfect page navigation solution.Here is a little screenshot of what this is all about. blogger page navigation

When you use this hack,you will see this kind of navigation on your blog’s home page and label pages(needs little customization).

Implementation of Blogger Page Navigation

Those who are bad at HTML modifications can use my one click installer :)

After installing this widget proceed to the label fix.

The Complex Method. :P

If you installed the widget you shouldn’t be here.. Scroll down to the label fix.

1.Login to Blogger Dashboard and navigate to Layout > Edit Html

2.Don’t click the checkbox which says ‘Expand Widget Templates’

3.Now find


]]></b:skin>

and replace it with


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

This is the CSS part which defines the look and feel of the page navigation.You can modify it according to your need

4.Next is the JavaScript part. Find

</body>

and replace it with


<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if>
</b:if>
<!--Page Navigation Ends -->
</body>

As you can see,there are some customizable parameters in this code

var pageCount=5;

This code determines the number of posts that would be displayed per page.

var displayPageNum=5;

This code determines the number of additional page navigation numbers that will be displayed on the page.

var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;

These two lines determine the text that would be shown for the previous page and next page respectively.

Label Fix

Now we have another problem.By default,the blogger label pages will show 20 posts.We will have to cut this down to the value that we gave for the variable pageCount (or the posts per page).For this we will have to edit our template

How to Edit the template to cut short the posts per page?

Go to the Edit HTML page and expand the Widget Templates

Now find each occurrence of

'data:label.url'

(including the quotes) and replace each of it with

'data:label.url + &quot;?&amp;max-results=5&quot;'

Here 5 is the number of posts to be displayed per page.

Now if you are using the label cloud widget by phydeaux3,then find

a.href = &#39;/search/label/&#39;+encodeURIComponent(t);

and replace it with


a.href = &#39;/search/label/&#39;+encodeURIComponent(t)+&#39;?&amp;max-results=5&#39;;

Here also 5 is the number of posts to be displayed per page.

Now you should have the Blogger Page Navigation working perfectly on your blog. :)

This tutorial is based on Codes from Abu Farhan and Muhammad Rias. So if you plan to write this tutorial on your blog,do link back to them also.

Sumber

Rabu, 22 Juni 2011

CARA MENGGANTI TANGGAL DENGAN ICON KALENDER

Akhirnya jadi juga, setelah beberapa hari nyari-nyari artikel tentang "cara mengganti tanggal dengan icon kalender" dan mengotak-atik template akhirnya berhasil juga aku membuatnya, fiuuhh

dengan menghabiskan dana ber M-M (maksudnya Maribu, Mablas ribu) untuk melakukan penelitian dan dengan membanting keringat dan memeras tulang

. tidak sia-sia pengorbananku, hasilnya itu tuh tanggal icon kalender yang cantik mejeng disamping judul. Mau tahu cara membuatnya? jangan khawatir aku akan membagi-bagikan tutorial ini pada kalian dengan geratis (kalo ada yang mo bayar sih boleh aja

) yak mari kita mulai trik dan tipsnya.

Yang pertama harus kita lakukan yaitu mengganti setting tanggal dulu, caranya seperti biasa Login dulu ke blogger terus pilih Settings --> Formatting, ganti "date header format" atau "format tanggal menjadi (mm.dd.yyyy) nha yang masih pemula pasti bingung maksudnya kan? itu lho disebelah tulisan "date header format" kan ada kotak yang ada tanggalnya, trus kamu klik dan pilih yang formatnya bulan.tangal.tahun contohnya 1.13.2008 terus simpan

Langkah yang kedua pilih menu Layout --> Edit HTML . Trus beri tanda centang pada kotak Expand Widget Templates, Oh ya, jangan lupa di back-up dulu template kamu. Yang nggak tahu caranya memback-template silahkan lihat dulu artikel ini. udah? kalo udah mari kita mulai ke jeroannya.

1. Cari kode ini <TITLE><data:blog.pageTitle/></TITLE> (tempatnya dibagian atas) kalo dah ketemu taruh script berikut ini dibawahnya persis

<SCRIPT type='text/javascript'>
//<![CDATA[
/*********************************/
/* http://trik-tips.blogspot.com */
/*********************************/
function date_replace(date) {
var da = date.split('.');
var day = da[1], mon = da[0], year = da[2];
var month =
['0','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
document.write("<div class='month'>"+month[mon]+"</div> <div class='day'>"+day+"</div>");
}
//]]>
</SCRIPT>

2. kalo udah cari kode ini:

.date-header {
margin: 1.5em 0 0;
font-weight: normal;
color: $dateHeaderColor;
font-size: 100%;
}
kalo ggak ada coba cari yang ini

h2.date-header {
margin:1.5em 0 .5em;
}

3. Kalo dah ketemu taruh script berikut dibawahnya

.dateblock {
background: url("http://kendhin.890m.com/kalender/bluecalend.gif")
no-repeat;
width: 55px;
margin: 0;
font-weight: bold;
height: 50px;
/*position: absolute;
top: 0;
left: 0;*/
float: left;
text-align: center;
}

.month {
font-size: 11px;
width: 37px;
margin: 0 5px;
text-transform: uppercase;
color: #fff;
}

.day {
color:#3366CC;
font-size: 19px;
width: 37px;
margin: 0 5px;

}

Kode http://kendhin.890m.com/kalender/bluecalend.gifadalah gambar icon kalender. kamu bisa menggantinya mengantinya
dengan gambar-gambar dibawah ini caranya ganti hurus yang dicetak tebal dengan
kode gambar berikut ini, misalnya kamu pingin kelender yang berwarna merah,
caranya kamu ganti text bluecalend.gif
dengan redcalend.gif.


blackcalend.gif	blue2calend.gif	bluecalend.gif

greencalend.gif	orangecalend.gif	pinkcalend.gif

redcalend.gif	ungucalend.gif	yellowcalend.gif

Trus kode color:#3366CC; adalah kode warna
tanggal, kamu bisa menggantinya dengan warna yang lain. Kamu bisa lihat kode2 warnanya DISINI.

4. langkah selanjutnya yaitu kamu cari kode ini
<data:post.dateHeader/>, cara nyarinya biar gampang copy kode tersebut,
terus tekan Ctrl-f dan paste di dalam kotak yang disediakan, nha langsung
ketemu kan. kalo udah ketemu ganti kode tersebut dengan script dibawah ini.

<DIV class='dateblock'>
<SCRIPT>date_replace('<data:post.dateHeader/>');</SCRIPT></DIV>

5. Simpan Template kamu dan lihat hasilnya. Berhasil nggak ya?

Kalo misalnya tulisan bulan dan tanggalnya terlalu keatas coba tambahkan kode ini padding: 4px 0px 0px 0px; dibawah kode .month { dan juga dibawah kode .day {

NB: Kalo Tanggalnya berubah menjadi tulisan "Undefine" itu pasti kamu tidak memperhatikan tutorial ini dari awal. Coba lihat lagi tutorial ini dari awal dan baca baik-baik perintahnya.

Sumber : http://trik-tips.blogspot.com/

CARA BUAT MENU HORIZONTAL DI BLOG

Ada yang pingin buat menu horizontal tapi nggak tahu caranya?
Gini nih caranya, eh tapi tunggu dulu, apasih menu horizontal itu? Menu horizontal adalah menu-menu yang disusun secara horizontal (menyamping). Kayak gini ini lho:

Contohnya bisa kamu lihat disini .Nha pingin nggak? kalo pingin ikuti cara berikut ini:

pertama-tama kamu harus punya gambar kayak gini nih:

dan

kalo nggak punya gimana? kalo nggak punya pake gambar yang aku sediain ini aja deh.


blackleft.gif	blackright.gif

greenleft.gif	greenright.gif

redleft.gif	redright.gif

unguleft.gif	unguright.gif

yellowleft.gif	yellowright.gif

blueleft.gif	blueright.gif

whiteleft.gif	whiteright.gif

Ok, bahan-bahannya sudha ada, mari kita mulai maraciknya:
1. Login ke blogger terus pilih Layout --> Edit HTML, jangan lupa template di backup dulu.
2. Cari script seperti ini ]]></b:skin>, kalo udah ketemu copy script dibawah ini dan taruh diatasnya

/*credits : http://trik-tips.blogspot.com */
#tabshori {
float:left;
width:100%;
font-size:13px;
border-bottom:1px solid #2763A5;
line-height:normal;
}
#tabshori ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabshori li {
display:inline;
margin:0;
padding:0;
}
#tabshori a {
float:left;
background: url("http://kendhin.890m.com/menu/blackleft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabshori a span {
float:left;
display:block;
background: url("http://kendhin.890m.com/menu/blackright.gif") no-repeat right top;
padding:5px 14px 4px 4px;
color:#fff;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabshori a span {float:none;}
/* End IE5-Mac hack */
#tabshori a:hover {
background-position:0% -42px;
}
#tabshori a:hover span {
background-position:100% -42px;
}

Tulisan yang dicetak tebal bisa kamu ganti dengan gambar-gambar (text dibawah gambar) diatas tadi. Misalnya, jika kamu pilih yang warna merah maka scriptnya menjadi seperti ini;

background: url("http://kendhin.890m.com/menu/redleft.gif") no-repeat left top;
background: url("http://kendhin.890m.com/menu/redright.gif") no-repeat right top;

Mudeng nggak loe :D
Kalo sudah selesai mari kita lanjutkan, sampai angka berapa tadi? oh ya sampai angka ketiga ya.
3. Copy script berikut ini

<div id="tabshori">
<ul>
<li><a href="http://trik-tips.blogspot.com"><span>Home</span></a></li>
<li><a href="http://trik-tips.blogspot.com"><span>Trik-Tips</span></a></li>
<li><a href="http://trik-tips.blogspot.com"><span>Free Template </span></a></li>
<li><a href="http://trik-tips.blogspot.com"><span>Kamus</span></a></li>
<li><a href="http://trik-tips.blogspot.com"><span>Profile</span></a></li>
</ul>
</div >

4. Ganti http://trik-tips.blogspot.com dengan link yang kamu tuju. Kemudian text yang dicetak tebal bisa kamu ganti dengan text yang kamu suka.
5. Cara memasangnya ada beberapa macam tergantung dari template yang digunakan, salah satu contoh memasangnya yaitu begini
cari kode berikut ini :

<div id="content-wrapper">
caranya nyari biar gampang, copy script diatas lalu tekan Ctrl-f kemudian paste di kotak find, nha langsung ketemu kan. Kalo udah ketemu copy script yang tadi diatasnya

6. Simpan hasil pengeditan.
7. Lihat hasilnya.
8. kalo hasilnya kurang bagus/acak-acakan coba script tadi dipindah tempatnya, misalnya pindah keatasnya yaitu diatas kode </div>. kalao nggak cocok juga tempatnya dicoba lagi yang diatasnya atau juga dibawahnya, begitu terus sampai ketemu tempat yang cocok.
9. Kalo masih belum berhasil juga coba cara ini:
- Cari kode berikut ini :

<b:section class='header' id='header'
maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true'
title='your blog title (Header)' type='Header'/>
</b:section>

teru ganti text yang berwarna hijau sihingga menjadi seperti ini:

<b:section class='header' id='header'
maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='false'
title='your blog title (Header)' type='Header'/>
</b:section>

terus di Save

Klik tab Page Elements, kemudian di daerah header klik Add a page element lalu pilih HTML/JavaScript paste script link tadi di dalam kotak content terus simpan, nha itu kan tempatnya diatas, coba drag kebawah dikit, nha gitu, terus simpan dan lihat hasilnya.

hasilnya pasti akan berbeda-beda di setiap template.

Sumber : http://trik-tips.blogspot.com/2008/01/membuat-menu-horizontal.html

Pages

Waktu

About Me

Blog Archive

Pengikut :

Senin, 03 Juli 2017

Membuat Cursor Blog Menjadi Bertaburan Seperti Bintang

Minggu, 02 Juli 2017

Memasang Pilihan Bahasa ke Blog Anda

Kode HTML Untuk Membuat Tulisan Kedap Kedip (Blink)

Sabtu, 01 Juli 2017

Cara Sorot Komentar Penulis di Blogspot

CARA MEMBUAT TOMBOL LIKE DI SETIAP POSTING

Jumat, 14 Desember 2012

Membuat Permalink Otomatis Di Blog

Selasa, 02 Oktober 2012

Pasang Musik di blog menggunakan Videokeman

Rabu, 19 September 2012

Share Cara pasang Auto Read More terbaru (Part 2)

Cara atau Trick Membuat Label Cloud Berputar

Jumat, 18 Mei 2012

Cara Membuat Tombol Share di Bawah Postingan (Seperti Punya Saya)

Kamis, 17 Mei 2012

Page Navigation For Blogger II (Seperti Punya Saya)

Implementation of Blogger Page Navigation

The Complex Method. :P

Label Fix

How to Edit the template to cut short the posts per page?

Rabu, 22 Juni 2011

CARA MENGGANTI TANGGAL DENGAN ICON KALENDER

CARA BUAT MENU HORIZONTAL DI BLOG

Pilih Bahasa :

Rupiah Converter

My Banner :