Belajar Ngeblog Aja: trik belajar blog

Tampilkan postingan dengan label trik belajar blog. Tampilkan semua postingan

Cara Membuat Tabel Cantik Postingan di Blog

Kali ini saya akan share tentang cara membuat tabel saat posting di Blogger seperti tabel yang dimiliki oleh Google Support. Membuat tabel keren ini menggunakan dua source kode, yaitu CSS dan HTML. Dimana kode CSS akan disisipkan pada template blogger, sedangkan kode HTML yang akan disisipkan pada postingan Blog kita. Kode CSS dan HTML ini murni saya dapatkan dari halaman Google Support. So, tanpa panjang lebar mari kita simak cara membuat tabel mirip tabel yang dimiliki oleh Google.com.
Tahap Pertama:
1. Login ke Blogger > Template > Edit HTML
2. Jangan lupa centang "Expand Template Widget"
3. Cari kode ]]></b:skin> lalu sisipkan kode CSS berikut ini tepat di atas ]]></b:skin>

table th { padding-top: 7px; text-align: left; } .nice-table { border-collapse: collapse; border-spacing: 0; } .nice-table tr:first-child th { border-top: 0 none; } .nice-table th:first-child { border-left: 0 none; } .nice-table tr:first-child th:last-child { border-right-color: #5476FC; } .nice-table th { background-color: #5476FC; color: white; font-weight: bold; } .nice-table th, .nice-table td { border: 1px solid #EBEBEB; padding: 3px 10px; } .nice-table td { background-color: #E6E6E6; border-color: #E5E5E5 #CCCCCC #E5E5E5 #E5E5E5; color: #444444; } .nice-table td:last-child { border-right-color: #E5E5E5; } .nice-table tr:nth-of-type(2n) td { background-color: #FFFFFF; border-right-color: #E5E5E5; } .nice-table.spaced-table td, .nice-table.spaced-table th { padding: 10px; } .nice-table.wide { width: 95%; } .nice-table.narrow { width: 75%; } .nice-table.narrower { width: 50%; } .nice-table.narrowest { width: 35%; }

4. Klik Simpan template Tahap Kedua:
Tahap kedua adalah saat anda membuat postingan Blogger yang akan menggunakan tabel, pastikan edit entri pada mode HTML bukan "Compose".
Untuk membuat tabelnya silahkan ikuti contoh kode di bawah ini

<table class="nice-table" style="width: 90%px;"><tbody> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> <th>Header 4</th> </tr> <tr> <td>kolom 1 baris 1</td> <td>kolom 2 baris 1</td> <td>kolom 3 baris 1</td> <td>kolom 4 baris 1</td> </tr> <tr> <td>kolom 1 baris 2</td> <td>kolom 2 baris 2</td> <td>kolom 3 baris 2</td> <td>kolom 4 baris 2</td> </tr> <tr> <td>kolom 1 baris 3</td> <td>kolom 2 baris 3</td> <td>kolom 3 baris 3</td> <td>kolom 4 baris 3</td> </tr> <tr> <td>kolom 1 baris 4</td> <td>kolom 2 baris 4</td> <td>kolom 3 baris 4</td> <td>kolom 4 baris 4</td> </tr> </tbody> </table>

Header 1	Header 2	Header 3	Header 4
kolom 1 baris 1	kolom 2 baris 1	kolom 3 baris 1	kolom 4 baris 1
kolom 1 baris 2	kolom 2 baris 2	kolom 3 baris 2	kolom 4 baris 2
kolom 1 baris 3	kolom 2 baris 3	kolom 3 baris 3	kolom 4 baris 3
kolom 1 baris 4	kolom 2 baris 4	kolom 3 baris 4	kolom 4 baris 4

Catatan:

Jika ingin menambah atau mengurangi jumlah kolom dan baris, silahkan mengedit dengan memperhatikan kode <td> dan <tr>
Disetiap kolom akan ada kode <td> dan </td>
Disetiap baris akan ada kode <tr> dan </tr>
"Tahap Pertama" cukup dilakukan sekali saja, dan "Tahap Kedua" dilakukan setiap membuat tabel
Ada pertanyaan silahkan komentar.

Untuk yang ingin Copas, mohon link sumbernya :D

Recent Comment adalah untuk memudahkan melihat komentar pada postingan/artikel blog, tanpa melihat satu per satu postingan/artikel kita, dengan recent comment ini bisa memudahkan kita untuk bisa mengetahui apakah ada komentar pada postingan/artikehttp://www.blogger.com/img/blank.gifl yang sudah kita buat, untuk membuat recent comment sangat mudah, ikuti langkah-langkah berikut ini :

1. Login ke Blogger
2. Kemudian klik Tata Letak lalu Elemen Halaman
3. Ketika sudah berada di Elemen Halaman klik Tambah Gadget
4. Lalu pilih HTML/JavaScript
5. Langkah selanjutnya masukkan kode dibawah ini :

<div style="border: 1px solid rgb(204, 204, 204); margin: 10px 0pt 0pt; padding: 8px; overflow: auto; width: 250px; height: 300px;">
<script style="text/javascript" src="http://amen24.googlepages.com/showrecentcomments.js">
</script><script style="text/javascript">var numcomments = 5;var showcommentdate = true;var showposttitle = true;var numchars = 100;var standardstyling = true;</script>
<script src="http://tipnya.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script></div>

6. Kemudian simpan selesai deh...

7. Silahkan lihat contoh Cara Membuat Recent Comment Di blog dibawah ini:

Note : Text warna Merah untuk mengatur panjang dan lebar yang anda inginkan, Angka 5 (hijau) adalah Jumlah komentar yang ingin di tampilkan, Url yang warna Biru, ganti dengan url blog kamu.

Terimakasih sudah mampir di blog ini. salam tipnya ngeblog aja

Jika Ada yang belum tahu artikel terkait itu apa silahkan lihat di blog ini pada bagian akhir artikel saya ini ada tulisan Artikel Terkait. Fungsinya selain untuk seo, related post / artikel terkait ini juga membantu pengunjung untuk membaca Artikel yang lain mungkin yang belum di ketahuinya. Hal ini menyebabkan pengunjung bisa betah berada di blog kita.
Langsung saja cara membuat related post / artikel terkait :

Masuk blogger > rancangan > edit html > centang expand template widget
cari kode </head> kemudian letakkan script di bawah ini tepat di atas kode </head>

<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;}}}}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];}}
relatedTitles = tmp2;
relatedUrls = tmp;}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' +
relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;}
i++;}
document.write('</ul>');}
//]]>
</script>

Kemudian cari kode <data:post.body/> kemudian letakkan script berikut ini di bawah kode <data:post.body/>

<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

<b:if cond='data:blog.pageType == "item"'>
<h4>Artikel Terkait</h4>
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if>

Terakhir simpan template. Cukup mudah bukan cara membuat related post / artikel terkait. :D

Best regards,

Cara Mudah Membuat Komentar Facebook Otomatis Di Blog

Cara Mudah Membuat Komentar Facebook Otomatis Di Blog - Seperti yang sudah kita ketahui, facebook merupakan salah satu media online yang sangat terkenal saat ini.
Dengan semakin banyak nya pengguna facebook saat ini, kita bisa memanfaatkan ini untuk menambah trafik dan komentator di blog kita..
karena setiap blog atau pun artikel yang kita buat pasti kepengen banyak yang memberi tanggapan dan mengomentari.. ia kan...??
Nah untuk berinteraksi dengan pengguna facebook kita harus menyediakan ruang komentar khusus untuk pengguna facebook tersebut, Seperti contoh gambar berikut ini.

kalau sobat tertarik untuk menambahkan kolom komentar untuk facebook,sobat dapat mengikuti cara mudah berikut ini.

1. Login ke blog sobat terlebih dahulu
2. Klik Template-Edit HTML jangan lupa untuk centang Expand Template Widget
3. Cari kode </data:post.body> dan Paste kode dibawah ini tepat di bawah kode </data:post.body>

<b:if cond='data:blog.pageType == "item"'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div><fb:comments expr:href='data:post.url' expr:title='data:post.title' expr:xid='data:post.id' num_posts='1' width='600'/></div>
</b:if>

4. Lalu simpan templatenya

Nah begitu la sob Cara Membuat Komentar Facebook Di Blog mudah kan.?
ok sob segitu aja dulu, karena hari sudah malam jadi saatnya untuk tidur..hehehe

Cara membuat teks berjalan dan bergambar animasi bergerak di blog

Kali saya mau share "cara membuat teks berjalan dan bergambar animasi bergerak di blog" sebelumnya saya juga pernah posting Cara Membuat Tulisan Berjalan (Marquee) di Blog Marque adalah suatu program HTML untuk membuat teks atau tulisan yang bisa bergerak atau berjalan. Selain dapat menghemat tempat pada halaman blog, program marquee ini juga terlihat menarik karena sifatnya yang dinamis, Untuk cara membuat teks dengan effect marque sudah banyak dijelaskan oleh para master di blognya masing-masing.
Nah untuk kali ini saya hanya ingin menambahkan background gambar dan gambar animasi pada marque.

berikut cara pembuatannya :

Login ke Blogger
Kemudian klik Tata Letak dan Elemen Halaman
Ketika sudah berada di Elemen Halaman klik Tambah Gadget
Lalu pilih HTML/JavaScript

Nah ini kode HTML nya

<div id="running-text" class="scroller">
<marquee onmouseover="this.stop();" onmouseout="this.start()" scrolldelay="60" scrollamount="3">
<span class="Apple-style-span" style=" line-height: 12px; " ><strong style="font-weight: bold; "><span><span style="background-image: url(http://i41.servimg.com/u/f41/16/21/76/15/bling510.gif/u/f41/16/21/76/15/bling310.gif); text-shadow: black 1px 1px 4px; " ><img src="http://images1.wikia.nocookie.net/__cb20090105060847/metalslug/images/7/71/Marco_grenades.gif" alt="" border="0" />JANGAN LUPA FOLLOW MY BLOG UNTUK SELALU MENDAPATKAN UPDATE TIPS DAN TRIK TERBARU<img src="http://i56.tinypic.com/1238wte.gif" alt="" border="0" />TERIMA KASIH TELAH BERKUNJUNG DI BLOG INI<img src="http://www.fattyboy.com/armer_32.gif" alt="" border="0" /></span></span></strong></span></marquee>
</div>

gambar 1 merah
gambar 2 kuning
gambar 3 hijau

Langkah selanjutnya masukkan kode marquee yang ada atas seperti contoh dibawah ini :

JANGAN LUPA FOLLOW MY BLOG UNTUK SELALU MENDAPATKAN UPDATE TIPS DAN TRIK TERBARUTERIMA KASIH TELAH BERKUNJUNG DI BLOG INI

Cara Memasang Meta Tag Blog Blogger

Cara Memasang Meta Tag Blog Blogger - Identitas Blog untuk Google Bot. Saatnya berbicara tentang Meta Tag. Kalau didengar-dengar kelihatannya istilahnya coding! Apa sih "Meta Tag" itu? Singkatnya "meta tag" adalah tag yang berfungsi untuk memberi deskripsi atau penjelasan tentang blog kita ke search engine. Hah, kok bisa? Iya, setiap search engine memiliki spider bot, istilahnya ya para search engine memiliki agen gan :D. contohnya aja Google bot, lalu yahoo bot, sama MSN Bot. Kerjaan mereka adalah keluyuran di dunia yang bernama Internet ini. Ngapain para bot keluyuran? Kalau ini sudah jelas untuk mencari berbagai informasi di berbagai situs, baik itu untuk mengklarifikasi atau hanya sekedar numpang lewat doang. Sepenting apakah memasang meta tag di blog itu? Untuk masalah SEO, memasang meta tag... tidak ada pengaruh yang begitu besar, hanya saja dengan memasang meta tag itu artinya sobat telah membantu para search engine untuk mengenal blog sobat (lebih jauh) dengan kata lain akan dikenal lebih dekat. Sobat tahu apa manfaatnya dikenal dekat oleh seseorang? Yupz, sobat benar...maka begitu juga dengan search engine. Para tetua kita bilang:"Tak kenal maka tak sayang!", itu artinya kalau search engine nggak kenal sama blog kita...jangan harap search engine sayang sama blog kita yaaaa...hehehe (becanda). Oke deh, kembali ke judul postingan kali ini.

Untuk memasang meta tag di blog blogger sangat lah gampang, sobat hanya membutuhkan beberapa kode meta tag yang siap ditanam dalam tubuh blog sobat. Yang selanjutnya sobat bisa menyesuaikan meta tag berikut dengan data-data blog sobat.

Untuk memulai memasang meta tag ke dalam blog blogspot sobat, silahkan untuk mengikuti langkah-langkah berikut:

1. Silahkan login ke akun blogger sobat.
2. Jika sobat memiliki banyak blog dalam satu akun blogspot sobat, silahkan untuk mengklik blog mana saja yang ingin sobat tambah meta tag.
3. Klik Template

4. Selanjutnya Edit HTML => Lalu jika muncul gambar seperti berikut, klik "Proceed"

5. Selanjutnya carilah kode <title><data:blog.pagetitle/></title> atau <b:include data="blog" name="all-head-content"> atau <title><data:blog.pageName/> - <data:blog.title/></title> atau <title><data:blog.title/></title>

6. Jika sobat telah menemukan salah satu dari kode di atas (cukup satu lho!), silahkan untuk meletakkan kode meta tag berikut di bawahnya:

<meta content='index, follow' name='robots'/>
<meta content='NgeBlog Aja' name='title'/>
<meta content='Blog Kumpulan Cara Membuat Blog di Blogger, Blog Trik Blogger, Tips Edit Blog, Trik Google' name='description'/>
<meta content='cara membuat blog, membuat blog di blogger, trik blogger, tips edit blog, trik google' name='keywords'/>
<meta content='Rini Puji Astuti' name='author'/>
<meta content='global' name='distribution'/>
<meta content='general' name='rating'/>
<meta content='translate' name='google'/>
<meta content='id' name='language'/>
<meta content='ID' name='geo.country'/>
<meta content='NgeBlog Aja' name='copyright'/>

=> Sobat harus mengganti bagian2 yang telah saya tandai dengan warna biru dengan data2 milik sobat, di antaranya:

NgeBlog Aja: Adalah judul blog saya, silahkan sobat untuk menggantinya dengan judul blog sobat, ex: Blognya si Adul, blognya si Tukul, dll
Blog Kumpulan Cara Membuat Blog di Blogger, Blog Trik Blogger, Tips Edit Blog, Trik Google: Ini adalah deskripsi blog sobat, sobat bisa menggantinya dengan deskripsi blog sobat. Misalnya: Blog kumpulan ebook gratis, blog kumpulan software gratis, dll
Cara membuat blog, membuat blog di blogger, trik blogger, tips edit blog, trik google: Ini adalah keywords atau kata-kata kunci yang terkandung di dalam blog sobat. Gunakan koma untuk memisahkan kata kunci satu dengan kata kunci lainnya. Misal: software gratis, tutorial blogger, download komik naruto, dll
Rini Puji Astuti: Ini adalah author atau penulis blog. Jika nama sobat adalah Taufik, maka silahkan ganti Iqbal dengan Taufik.
NgeBlog Aja: Yang terakhir adalah Copyright, silahkan untuk mengganti dengan jdul blog sobat (boleh sama dengan title/judul blog).

7. Selanjutnya kliklah "simpan template"/"save template"

Selesai!!!

Jika sobat memiliki masalah dalam memasang meta tag di dalam blog sobat, silahkan untuk meninggalkan komentar atau kirim pertanyaan ke saya melalui menu "kontak". Terima kasih.. :D

Semoga tutorial sederhana ini bermanfaat bagi sobat.

Tags: meta tag google, blogger blogspot meta tag, cara pasang meta tag, meta tag gampang

Cara Membuat/Menampilkan Status Off/Online Yahoo Messenger

Dalam trik kali ini kita akan coba membahas tentang "Bagaimana Caranya Membuat/Menampilkan Status Offline/Online Yahoo Messenger". Trus fungsinya apa nih? gini, kalo ada misalnya ada penandanya seperti itu kan nanti pengunjung blogmu akan bisa langsung berinteraksi langsung denganmu, nha kalo gitu kan nanti pengunjung blogmu jadi tambah sayang ma kamu :p
Ok Langsung aja, Contohnya akan seperti ini, jika status kamu offline maka gambarnya akan seperti ini :

trus jika kamu online maka iconya akan berubah seperti ini:

Cara buatnya sangat gampang kamu tinggal copy script berikut ini trus kamu pasang di sidebar kamu, udah tahu kan cara pasanganya, itu lho seperti kalo km masang "page element", Masuk ke "Page Element" trus "Add a Gadget --> HTML/Javascript".

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

Ganti text yang warna merah (andre) dengan id YM kamu.
perhatikan angka "2", itu bisa kamu ganti dengan angka yang lain dan hasilnya gambar yang ditampilkan akan berbeda-beda.

gimana? gampang kan?

Membuat Navigasi Ala Google di Blogspot

Jika kemaren saya membuat tutorial mengenai Cara Membuat Index Halaman Blog atau Mengganti "Older Posts" Dengan Angka, maka kali ini kita akan membahas cara Membuat Navigasi Ala Google di Blogspot. Sebenarnya navigasi ini seperti biasa, namun ini khas ala google, tau kan? Kalo masih belum tahu, lihat gambar di bawah ini:

Diblog pun bisa seperti ini,Sudah paham kan? Jika sobat berminat untuk membuatnya, silahkan ikuti tutorial berikut:
1. Login ke akun blogger sobat.
2. Pergi ke tab rancangan, lalu edit HTML.
3. Cari kode ]]></b:skin> kemudian taruh kode berikut ini TEPAT di atasnya:

#nav a,#nav a:visited,.blk a{color:#000}
#nav a{display:block}
#nav .b a,#nav .b a:visited{color:#20c}
#nav .i{color:#a90a08;font-weight:bold}
.csb,.ss{background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/pagenavi/nav_logo7.png) no-repeat 0 0;height:26px;display:block}
.ss{background-position:0 -88px;position:absolute;left:0;top:0}
.cps{height:18px;overflow:hidden;width:114px}
.mbi{width:13px;height:13px;background-position:-91px -74px;margin-right:3px}
#nav td{padding:0;text-align:center}

4. Sekarang cari lagi kode </body>.
5. Jika sudah ketemu, copy dan paste kode berikut TEPAT di atasnya:

Klik Show Untuk Membuka Spoiler

<script type='text/javascript'>

var home_page_url = location.href;

var pageCount=10;
var displayPageNum=6;
var upPageWord ='Previous';
var downPageWord ='Next';

function showpageCount(json) {
var thisUrl = home_page_url;
var htmlMap = new Array();
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

htmlMap[htmlMap.length]='/';
postNum++;

for(var i=pageCount-1, post; post = json.feed.entry[i]; i=i+pageCount) {

var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);
var title = post.title.$t;
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&max-results='+pageCount;

}

var banyaknomer = htmlMap.length;
if (json.feed.entry.length % pageCount == 0){
var banyaknomer = htmlMap.length -1 ;
postNum=postNum-1;
};

for(var p =0;p< banyaknomer;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
upPageHtml = '<a href="/"><span class="csb ch" style="background-position: 0pt 0pt; margin-left: auto; width: 44px;"></span><div style="margin-right: 8px;">'+ upPageWord +'</a></td>';
}else{
upPageHtml = '<a href="'+htmlMap[p]+'"><span class="csb ch" style="background-position: 0pt 0pt; margin-left: auto; width: 44px;"></span><div style="margin-right: 8px;">'+ upPageWord +'</a></td>';
}

fFlag++;
}

if(p==(thisNum-1)){
if(p==0){
html += '<span class="csb" style="background-position: -26px 0pt; width: 18px;"></span></td><td class="cur"><span class="csb" style="background-position: -44px 0pt; width: 16px;"></span>'+thisNum+'</td>';
}else{
html += '<td class="cur"><span class="csb" style="background-position: -44px 0pt; width: 16px;"></span>'+thisNum+'</td>';
}
}else{
if(p==0){
html += '<td><a href="/"><span class="csb ch" style="background-position: -60px 0pt; width: 16px;"></span>1</a></td>';

}else{
html += '<td><a href="'+htmlMap[p]+'"><span class="csb ch" style="background-position: -60px 0pt; width: 16px;"></span>'+ (p+1) +'</a></td>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<td class="b"> <a href="'+htmlMap[p]+'"><span class="csb ch" style="background-position: -76px 0pt; margin-right: 34px; width: 66px;"></span>'+ downPageWord +'</a></td>';
eFlag++;
}
}
}

if(thisNum>1){
html = ''+upPageHtml+' '+html +' ';
}
html2 = '<table id="nav" style="margin: auto auto 1.4em; border-collapse: collapse;text-align: center; direction: ltr;" align="center"><tbody><tr valign="top"><td class="b">Page ('+(postNum-1)+') </td><td class="b">';
html3 = '</tr></tbody></table>';
html = html2+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
}else{
html += '<td class="b"><span class="csb" style="background-position: -76px 0pt; width: 42px;"></span></td>';
}

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

var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

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

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

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

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

}

function showpageCount2(json) {

var thisUrl = home_page_url;
var htmlMap = new Array();
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';

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

htmlMap[htmlMap.length]=labelHtml;
postNum++;

for(var i=pageCount-1, post; post = json.feed.entry[i]; i=i+pageCount) {
var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);

var title = post.title.$t;

if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount;

itemCount++;
}

var banyaknomer = htmlMap.length;
if (json.feed.entry.length % pageCount == 0){
var banyaknomer = htmlMap.length -1 ;
postNum=postNum-1;
};

for(var p =0;p< banyaknomer;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){

if(thisNum==2){
upPageHtml = labelHtml +'<span class="csb ch" style="background-position: 0pt 0pt; margin-left: auto; width: 44px;"></span><div style="margin-right: 8px;">'+ upPageWord +'</a></td>';
}else{
upPageHtml = '<a href="'+htmlMap[p]+'"><span class="csb ch" style="background-position: 0pt 0pt; margin-left: auto; width: 44px;"></span><div style="margin-right: 8px;">'+ upPageWord +'</a></td>';
}

fFlag++;
}

if(p==(thisNum-1)){
if(p==0){
html += '<span class="csb" style="background-position: -26px 0pt; width: 18px;"></span></td><td class="cur"><span class="csb" style="background-position: -44px 0pt; width: 16px;"></span>'+thisNum+'</td>';
}else{
html += '<td class="cur"><span class="csb" style="background-position: -44px 0pt; width: 16px;"></span>'+thisNum+'</td>';
}
}else{
if(p==0){
html = '<td>'+labelHtml+'<span class="csb ch" style="background-position: -60px 0pt; width: 16px;"></span>1</a></td>';
}else{
html += '<td><a href="'+htmlMap[p]+'"><span class="csb ch" style="background-position: -60px 0pt; width: 16px;"></span>'+ (p+1) +'</a></td>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<td class="b"> <a href="'+htmlMap[p]+'"><span class="csb ch" style="background-position: -76px 0pt; margin-right: 34px; width: 66px;"></span>'+ downPageWord +'</a></td>';
eFlag++;
}
}
}

if(thisNum>1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}

html2 = '<table id="nav" style="margin: auto auto 1.4em; border-collapse: collapse;text-align: center; direction: ltr;" align="center"><tbody><tr valign="top"><td class="b">Page ('+(postNum-1)+') </td><td class="b">';
html3 = '</tr></tbody></table>';
html = html2+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
}else{
html += '<td class="b"><span class="csb" style="background-position: -76px 0pt; width: 42px;"></span></td>';
}

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

var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

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

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

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

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

}

</script>

<script type='text/javascript'>

var thisUrl = home_page_url;
if (thisUrl.indexOf("/search/label/")!=-1){
if (thisUrl.indexOf("?updated-max")!=-1){
var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"));
}else{
var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"));
}
}

var home_page = "/";
if (thisUrl.indexOf("?q=")==-1 && thisUrl.indexOf(".html")==-1){
if (thisUrl.indexOf("/search/label/")==-1){
document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')
}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')
}
}
</script>

6. Save template, dan lihat hasilnya!

Random Post adalah semua postingan yang terdapat di blog kita, ditampilkan secara mengacak, membuatnya mudah, tinggal tambah gadget di element halaman blog kita, terserah mau di letakan di mana saja :

1. Login ke Blogger
2. Kemudian klik Tata Letak lalu Elemen Halaman
3. Ketika sudah berada di Elemen Halaman klik Tambah Gadget
4. Lalu pilih HTML/JavaScript
5. Langkah selanjutnya masukkan kode dibawah ini :

<script type="text/javascript"> var randarray = new Array();var l=0;var flag; var numofpost=10;function randomposts(json){ var total = parseInt(json.feed.openSearch$totalResults.$t,10); for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}} if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>'); for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1]; for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>"; document.write(item);}} }document.write('</ul>');} </script> <script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000& callback=randomposts" type="text/javascript"></script>

Note : Angka 10 adalah jumlah postingan yang akan ditampilkan secara acak, dan bisa di ganti berapa saja jumlah postingan yang mau di tampilkan secara acak.

Terimakasih sudah mampir di blog ini. salam tipnya ngeblog aja...

Trik ini termasuk salah satu trik yang dapat di golongkan dalam kategori mudah, kenapa saya bilang demikian? karena saya sudah bisa

hee… waktu belum bisa ya sama aja susahnya.. ckckck

Beberapa bulan yang lalu saya mencoba browse untuk mencari tips mengirimkan update blog ke facebook namun kebanyakan tidak menghasilkan konten yang jelas dan sebagaian besar berbelit. Maka dari itu, saya ingin berbagi untuk anda semua dengan harapan dapat membantu kesulitasn dalam mengirimkan update otomatis ke fanpage facebook.

Sesuai dengan temanya, tentunya anda harus memiliki fanpage di facebook, namun bagi anda yang belum membuatnya anda dapat membaca tips membuat fanpage di facebook cara-membuat-facebook-fanpage-untuk-blog.

Setelah resmi anda memiliki fanpage untu blog hee , langkah selanjutnya adalah memanfaatkan aplikasi RSS.Graffiti sebagai media untuk membantu rencana anda :-0. Untuk mensingkronkan aplikasi ini dengan fanpage anda, maka ikuti langkah berikut ini:

Pada bagian search ketik RSS. Graffiti

Pilih RSS Grafiiti dan klik [Ke Aplikasi]

Pilih [izinkan] untuk menuju halaman RSS graffiti

Pehatikan gambar di bawah ini, apabila anda sudah mempunyai fanpage maka akan tampil namun perlu di singkronkan.

Setelah funpage anda berwarna hijau, maka langkah selanjutnya klik [add feed]. Isi feed url dengan url blog anda dan Source name dengan Nama blog anda.

Atur pada tab Schedule. Tab ini berguna untuk memerintahkan aplikasi ini untuk memeriksa halaman feed yang dituju. Pada kolom update frequency diatur as soon as possible. Apabila pengaturan sudah selesai dan selanjutnya klik [Save]

Dan… pengaturan selesai. Cukup dengan pengaturan sederhana ini saja anda tidak perlu bersusah payah copypaste link untuk halaman anda, karena dengan anda update blog maka aplikasi ini akan secara otomatis memeriksa dan menampilkan artikel terbaru blog anda.

Cara Memasang Tombol Subcribe By Email

Kemarin ada pengunjung yang menanyakan lewat facebook comment cara berlangganan artikel blog ini via email,tanpa pikir panjang langsung aja saya sediakan subcribe by email seperti yang sobat lihat di akhir arikel.Saya pikir ada baiknya saya share disini cara membuat tombol subcribe by email ya.. walaupun banyak sekali blog-blog yang mengulas tentang topik yang sama itung - itung kan,buat bahan update blog aje hehe...

Cara memasang Tombol berlangganan via Email
saya asumsikan sobat sudah punya akun di feedburner kalo belum punya klik di sini
Langkah selanjutnya pasang kode berikut pada sidebar maupun di akhir postingan.
saya memiliki 2 feedburner anda bisa sesuaikan mana yang sobat suka.

<style>
.blogonol-email{background:url(http://i53.tinypic.com/ztdik0.png) no-repeat 0px 12px; width:260px; padding:10px 0 0 55px; float:left; font-size:1.4em; font-weight:bold; margin:0 0 10px 0; color:#686B6C}
.blogonol-emailsubmit{background:#9B9895; cursor:pointer; color:#fff; border:none; padding:3px; text-shadow:0 -1px 1px rgba(0,0,0,0.25); -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; font:12px sans-serif}
.blogonol-emailsubmit:hover{background:#E98313}
.textarea{padding:2px; margin:6px 2px 6px 2px; background:#f9f9f9; border:1px solid #ccc; resize:none; box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); -moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); -webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px; width:140px; color:#666}
</style>
<div class="blogonol-email">
Subscribe via Email
<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=NgeblogAja', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == "") {this.value = "Langganan Melalui Email";}" onfocus="if (this.value == "Langganan Melalui Email") {this.value = "";}" value="Ketik Email Anda" type="text" />
<input type="hidden" value="NgeblogAja" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="blogonol-emailsubmit" value="Submit" type="submit" />
</form>
</div>

NB : Tulisan yang berwarna merah dapat disesuaikan dengan templatet sobat yang berwarna Biru ganti sesukamu.
Lihat hasilnya di bawah ini

Subscribe via Email

Ini feed yang selanjutnya:

<div style="border: 1px solid #d8d8d8; background: #ffffff; margin: 0 0 5px; padding: 3px; width: 300px; -moz-border-radius: 6px;"> <div style="font-weight: bold; color: #ff0000; padding: 10px 10px;">GET UPDATES VIA EMAIL</div> <div style="padding-left: 10px;">Dapatkan artikel-artikel terbaru lainnya langsung melalui email Anda:</div> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=NgeblogAja', 'popupwindow', 'scrollbars=yes,width=300,height=300');return true" target="popupwindow"> <div style="padding-left: 10px; padding-bottom: 10px; padding-top: 10px;"><input style="width: 160px; height: 18px;" onfocus="if (this.value == "Ketik email anda disini...") {this.value = ""}" onblur="if (this.value == "") {this.value = "Ketik email anda disini...";}" type="text" name="email" value="Ketik email anda disini..." /> <input type="hidden" name="uri" value="NgeblogAja" /><input type="hidden" name="loc" value="en_US" /><input style="background: #9b9b9b; color: #fff; font-size: 11px; font-family: Arial,Tahoma,Verdana; margin-left: 5px; border: 1px solid #fff; padding: 3px 5px 3px 5px; font-weight: bold; -moz-border-radius: 5px;" type="submit" value="SUBCRIBE" /></div> </form> <div style="padding-left: 10px;"><a href="http://feeds.feedburner.com/NgeblogAja" rel="nofollow"><img style="border: 0;" src="http://feeds.feedburner.com/~fc/Efelinna?bg=ff9900&fg=000033&anim=0" alt="" width="88" height="26" /></a></div> </div>

NB : Tulisan yang berwarna merah adalah warna background dan lebar dapt disesuaikan dengan templatet sobat yang berwarna Biru gantilah dengan id feedburner sobat.
Lihat hasilnya di bawah ini

GET UPDATES VIA EMAIL

Dapatkan artikel-artikel terbaru lainnya langsung melalui email Anda:

SELAMAT MENCOBA

Cara Membuat Efek Gelembung Pada Cursor Mouse

Sesuai janji saya pada postingan yang sebelumnya akan saya penuhi janji saya karna janji adalah hutang yang harus dibayar sedangkan saya sudah terlalu banyak hutang,itung-itung buat nicil he..he..he... Cara menambahkan efek buble (gelembung) pada cursor mouse ini sudah saya coba di blogger dan berhasil 100% seperti yang sobat lihat di http://tipnya.blogspot.com Trik ini juga sudah banyak dishare oleh banyak blogger - blogger.Tapi bagi sobat yang belum mengetahui caranya ikuti petunjuk dibawah ini untuk pemasangannya.

1. Login ke blogger
2. Pilih Rancangan kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:

<script type="text/javascript" src="https://sites.google.com/site/tipnyangeblogaja/bubble1.js"></script>
<script type="text/javascript"src="https://sites.google.com/site/tipnyangeblogaja/bubble.js"></script>

5. Simpan dan lihat hasilnya.

Demikian tutorial kali ini mudahkan sobat Ngeblog Aja pasti bisa semua
selamat mencoba dan semoga berhasil terima kasih telah berkunjung.

Cara Membuat Efek Bintang atau Salju Bertaburan Pada Cursor Mouse

Tadi saya sempat memposting cara Membuat Efek Tulisan Mengikuti Cursor Mouse pada kesempatan ini saya akan mencoba berbagi cara Membuat Efek Bintang Bertaburan Pada Cursor Mouse .Apabila cursor mouse digerakan maka akan ada banyak bintang bertaburan yang tentu saja akan sedikit menambah menarik suatu blog.Untuk pemasangannya tidaklah terlalu sulit bahkan bagi blogger pemula seperti saya,yang dibutuhkan hanya sedikit penambahan javascript

1. Login ke blogger
2. Pilih Rancangan kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:

<script type="text/javascript" src="https://sites.google.com/site/tipnyangeblogaja/salju.js"></script>

5. Simpan hasil kerja sobat dan lihat hasilnya tera..!!!!!!!!!!!!!
Cara Membuat Efek Tulisan atau teks Mengikuti Cursor Mouse
Cara Membuat Efek Gelembung Pada Cursor Mouse
Salam Tipnya Ngeblog Aja... Thanks atas kunjungannya

Cara Menghilangkan atau Menghapus Navbar (Navigation Bar) Blogger

Sobat Tipnya NgeBlog Aja mengajukan pertanyaan yang di tulis melalui shoutbox. Beliau menanyakan bagaimana cara menghilangkan Navbar Blogger, dan kali ini saya akan mencoba membahasnya. Apa itu Navbar Blogger? navbar blogger adalah suatu frame yang berukuran kecil miliknya blogger yang terdapat di bagian atas blog. frame ini berfungsi untuk login ke blogger atau bisa juga sebagai jalan untuk melihat blog lain atau bisa juga untuk menandai blog yang sekiranya melanggar TOS blogger seperti blog yang mengandung unsur SARA ataupun pornografi untuk dilaporkan ke pihak blogger.

Apakah kita bisa menghilangkan Navbar Blogger? jika pertanyaannya seperti itu maka tentu jawabanya adalah bisa, akan tetapi sebelum menghilangkan navbar tersebut ada baiknya sobat berfikir-fikir dahulu dan silahkan baca TOS blogger secara seksama, karena resiko yang akan di pikul sangatlah berat yaitu akan di tutupnya account blogger sobat atau dengan kata lain sobat akan kehilangan blog kesayanangannya. Lumayan mengerikan bukan? memang beberapa waktu yang lalu tersiar kabar bahwa pernah ada yang menanyakan ke pihak blogger apakah boleh menghilangkan navbar blogger atau tidak? dan katanya sekarang pihak blogger membolehkan untuk menghapus navbar, tapi entahlah apakah berita tersebut benar atau tidak yang jelas sobat harus selalu membaca TOS secara seksama.

Masih bersikeras untuk menghilangkan navbar blogger? jika masih akan saya beritahu, akan tetapi resiko di tanggung masing-masing, saya tidak bertanggung jawab jika di kemudian hari terjadi sesuatu dengan blog sobat.

Untuk menghilangkan navbar blogger, sobat tinggal menambahkan kode di bawah ini pada style sheet CSS :

/* hilangkan navbar
----------------------------- */

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

Atau bisa juga menaruh kode berikut persis di bawah kode <body> :

<style type='text/css'>
#navbar-iframe {display:none;}
</style>

Mau pilih yang mana? keduanya mempunyai fungsi yang sama yaitu menghilangkan navbar blogger. Masih bingung juga dalam pemasangan kode di atas? silahkan ikuti langkah-langkah berikut ini :

Untuk template klasik

Sign in di blogger
Klik menu Template
Klik menu Edit HTML
Copy seluruh kode yang ada lalu save di komputer sobat sebagai backup data agar aman
Copy kode dibawah ini lalu paste di atas kode </style>

/* hilangkan navbar ----------------------------- */ #navbar-iframe { height:0px; visibility:hidden; display:none }

Klik tombol Simpan Perubahan Template
Selesai.

Untuk template baru

Sign in di blogger
Klik menu Layout
Klik menu Edit HTML
Klik link bertuliskan Download Template Seluruhnya, silahkan save dulu untuk backup data
Copy kode dibawah ini lalu paste di atas kode ]]></b:skin>

/* hilangkan navbar ----------------------------- */ #navbar-iframe { height:0px; visibility:hidden; display:none }

Klik tombol Simpan Template
Selesai.

Selamat menikmati blog tanpa navbar !

Salam buat Temen Tipnya Ngeblog Aja.

Cara Membuat Spoiler di Postingan Blog

Spoiler adalah sebuah fitur dalam blog fungsi utamanya adalah menyembunyikan teks, kode, kalimat atau gambar. Fungsi nya mirip dengan text area yaitu menghemat halaman posting agar tidak terlalu memanjang ke bawah. Saya yakin sobat sudah sering melihat di forum-forum bentuk sebuah spoiler, yaitu jika kita mengklik misalnya "show" atau "hide" atau "close" maka kita bisa melihat gambar / tulisan yang tersembunyi namun bisa dimunculkan.

Spoiler sering kali dipasang pada sebuah halaman posting, namun ada juga yang memasukkan nya ke dalam sidebar atau footer untuk menyembunyikan widget tertentu. Pada tutorial ini kita akan ikuti cara membuat spoiler dengan isi tulisan dan spoiler dengan isi gambar di posting blogspot.

A. Membuat spoiler dengan isi teks

Klik Show Untuk Membuka Spoiler

Membuat spoiler di blog sangat mudah Inilah kode untuk membuat spoiler dengan teks

Berikut kode spoiler di atas:

<div style="margin-bottom: 2px;">Klik Show Untuk Membuka Spoiler
<div style="margin-top: 5px; text-align: center;"><input value="Show" style="margin-top: 5px; width: 60px; font-size: 10px;" 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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"> </div>
<div style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;">Memasang spoiler di blog sangat mudah Inilah kode untuk membuat spoiler dengan teks </div></div></div>

Keterangan;

Klik show untuk membuka bla bla bla bisa sobat ganti termasuk Show
Sedangkan kode berwarna biru adalah isi dari spoiler dengan teks.

B. Memasang spoiler dengan isi image atau gambar

Spoiler :

Kode spoiler untuk isi gambar di atas;

<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;">
<b>Spoiler</b> : <input 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'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Open" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; text-align: left;">
<div style="display: none;">
<img src="http://julak-project.googlecode.com/files/photos.png" border="0" alt="Post spoiler">
</div>
</div>
</div>

Perhatikan cara memasang kode url gambar dengan teks warna biru. Ganti dengan alamat gambar yang sobat tpnya Ngeblog Aja inginkan.
Bagaimana cara memasangnya di posting blog? Saat menulis artikel masuk ke menu HTML bukan compose (lihat kiri atas) kemudian masukkan kode-kode diatas.
Cara Memasang Script Atau Kode HTML Pada Postingan Blog
Nah bagaimana Sobat blogger. Ternyata cukup mudah bukan membuat spoiler di postingan blog. Silakan dicoba.

Cara Memasang Script Atau Kode HTML Pada Postingan Blog

Haloo Sobat, kali ini saya akan membahas postingan lama tentang "Cara Posting Kode HTML". Mungkin sobat sudah mengetahui, tapi saya yakin ada juga sobat blogger yang belum tahu. Untuk memposting kode html, maka sebelum di posting kode html harus di phrase dulu. Misal kita akan memposting kode html banner kita agar orang bisa meng-copynya dan memasang banner kita di blognya. Eh....ketika ketika posting yang muncul bukan kodenya, tetapi gambar bannernya. Nah....Oleh karena itu kode html harus di phrase terlebih dahulu sebelum di posting.

Cara posting kode html kali ini agak berbeda dengan tutorial sebelumnya. Kalau sebelumnya kita harus membuka website orang lain untuk dapat memphrase kode html, sekarang kita dapat melakukannya di Tipnya Ngeblog Aja ini atau bahkan di blog sobat sendiri. Mudah, cepat dan tidak repot tantunya....Apakah sobat tertarik?

Fitur-fitur yang di sediakan blogger semakin bagus dan beragam. Sebenarnya post edit blogger juga dapat digunakan untuk phrase kode html, tapi kurang efisien dan agak repot. Oleh karena itu, lebih baik gunakan tools phrase kode html di Tipnya Ngeblog Aja ini:

Widget By: Ngeblog Aja

Anda tinggal memasukan kode html, lalu klin tulisan "Convert", Selesai....

Apabila sobat ingin memasang tools phrase html, seperti di Tipnya Ngeblog Aja ini. Sobat bisa menggunakan kode di bawah ini, lalu letakkan di postingan. Selanjutnya klik "Terbitkan".

<script src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/102462998830435293579/post-Code.xml&up_grows=1000&up_conv1=1&up_conv2=1&up_conv3=1&up_conv4=1&up_conv5=1&synd=open&w=320&h=200&title=Post-Code%3A+code+converter&border=%23ffffff%7C0px%2C1px+solid+%23595959%7C0px%2C1px+solid+%23797979%7C0px%2C2px+solid+%23898989&output=js">
</script>
<div style="text-align: left;">
<span style="font-size: xx-small;">Widget By: <a href="http://tipnya.blogspot.com/" target="new">Ngeblog Aja</a></span></div>

Gimana, mudahkan....Sekarang di blog sobat menyediakan fasilitas untuk memphrase kode html. Salam Buat Temen-temen Tipnya Ngeblog Aja

Cara Membuat Translate dengan Gambar Bendera pada Blog

Beginalah Cara Membuat Translate dengan Gambar Bendera pada Blog, Yang harus kita lakukan:
1. Seperti biasa bukalah Akun Blog anda kawan.
2. Masuklah ke Rancangan / Design Blog anda.
3. Pilihlah Add Widget / Tambah Gadget pada rancangan.
4. Pilih lagi Add HTML/JavaScript
5. Copylah Script berikut di bawah ini.

<style>
.google_translate img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.google_translate:hover img {
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
.google_translatextra:hover img {
filter:alpha(opacity=0.30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
</style>
<div>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRaV7R2t5FL_0t-yYOLLFO2P6M291QzKox7rKRyvCJ-OQezZacyYNMcr2SYkBcVjvuUWB2dI3oMRVUzmGuFa5pOaowoJWi9sySxwlrYRqM0HJsBHnyqOcbWEAa568tcsKzIHNFRZxhUXQ/s200/United+Kingdom(Great+Britain).png" style="cursor: pointer;margin-right:8px" width="24" /></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8M67dVLaix_nafZMyu_j6aSkFTx-jZ8epg3uhcVG9aRiqsdMnZcaKmAihPJJP2b7jzJAke7QMnqthg0tPKp8I8etzCKElWUAa0CnIHMv-15vPllQgxLivLgcJGBo_rUvha8UwwkM8X24/s200/France.png" style="cursor: pointer;margin-right:8px" width="24" /></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn17nlVcUGYhterPEAK9VYaQ7kCj2tvWCbh3R9zWOfvntcstl_QZtbg6d9noqh3nvxL2Un8e0dBL1cX1w50U1NnY9r8SgmahZwzHNAABX4ywn17mdzVDtzvbaVkra5Z-igyV08vz7qaSw/s200/Germany.png" style="cursor: pointer;margin-right:8px" width="24" /></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEgjzsKdxLJTrhgVIwXDr0GL2SCBPukeyiMLT_DqAXTtA05vRciWAUVXM5HHJAR4tZteont6f_wZZXwd9jBrrcsGLzfJaXbZhqNBpVmyT1cuIsewuWY1nhdbSmQnudYkIlIW2HZjPzRP8/s200/Spain.png" style="cursor: pointer;margin-right:8px" width="24" /></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTn8ZwQ8W3Qp8-yYj8zwckj4y4GaISY1PE_HZ6FFlTrrv5n_DJwOBXjF0gLKBVJWwureRqGfDq7yjUhbyq7FUg6o_HhJHra1VFGF5HOpJSLhidrpRZIVOIgZSSyqo0m5mvwGfTQMtivKg/s200/Italy.png" style="cursor: pointer;margin-right:8px" width="24" /></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizKu0fsKo8sEldkf4mId8h_ZePrRCWPu8gZSbj2TLxltSAtbUSMMFmryWyrsofJaRt82OIbEUUFL5GtcJLJLSu2WnzEYcRhUhvDNEwBzBpIRc-vGe5l1HIk2mokKe7NIRU8gf2S_Ev_I0/s200/Netherlands.png" style="cursor: pointer;margin-right:8px" width="24" /></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgenWfFumF76HIDrSeaoopqtvEX14hkJZ50M8HhCB6OtfVM40ezRB0eI323Enr1x4HsUTULXUODQqr7390_WtYuHzo_MpFmXjApqWJF6adBIyB0u29G0ZlK0_M1DMRMHD0MipQmdtHcOrc/s200/Russian+Federation.png" style="cursor: pointer;margin-right:8px" width="24" /></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizp379Uh_oZq1-ZmWw1cxoQD73iqBSEMyKZ0eJ0xVMzn61HqCplDgLmNKmCuHz2hZSlYje23Jz59yfVEskK_70R2yw9duA1v2DMkjjYZbNcPnLhcs3kz0V5qQH4CfQAlGmtW77G_3f0dM/s200/Brazil.png" style="cursor: pointer;margin-right:8px" width="24" /></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6StTO_ive9D-d-9tlO8dGj90XVLaJp4Vrp8aJpSi0jIQqP41z42LVyg2MFOHY_Xc3xYGrhXOGVQYc2FHjRvp4wFqT3fDQNqiaMbPkqxN1QtG40_O1hwz1eTM0fgb7NqNM1NIv3DxO4Uw/s200/Japan.png" style="cursor: pointer;margin-right:8px" width="24" /></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-EyFbnRhybxSIrfWOu4K-VYatvR7Buu-WqcuSyYGmT7nxp_4QpehzMn1Yx8iZefLE9NTuXsQgOYmaFJDzq6wlFp0QRw8A1nhq-uoA93dP4hG6JlLg7FFOzhGfhsXv3zNyDFy2m8sjgcM/s200/South+Korea.png" style="cursor: pointer;margin-right:8px" width="24" /></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidM7Zq5JfVFhD0kkQeo0YGk_4xvRXPgTOi-qr105zV6Jfrt0E76Fwh4DYvNmapzj9XqVGBKhJktoTmsjFOsa3aFgKcBDMtA7Hl-kdPIVv1EROBshFUBhuq4Tgv4QASRQgEWA5Kg046tTw/s200/Saudi+Arabia.png" style="cursor: pointer;margin-right:8px" width="24" /></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5KrQg2e8xCb7H1ApmzewMr9X9SRz7CEU6VDpdFfpIc22Wxdjwmke9NqHPPI8GdgzFUSEpLEH0qH1l8WgLvLSwZOfltO_Ihl9gZgMr6jlpfP53cRGJf4cpbyhEg8le33y60Tzt0tBelso/s200/China.png" style="cursor: pointer;margin-right:8px" width="24" /></a> </div>
<div 0px 0pxã¢?? style="Ã¢??font-size:10px;margin:8px" 3px></div>

6. Simpan Widget dan Template Blog
7. Lihat Hasilnya.

Lihat Contoh Hasil Translate dengan Bendera

Terimakasih sudah mampir di Blog kami.

Salam Buat Temen-temen Tipnya Ngeblog Aja

Cara Membuat Tulisan Berjalan (Marquee) di Blog

Sering kali kita melihat blog yang dihiasi oleh tulisan atau kata-kata yang berjalan di blog teman-teman kita. mungkin sebagian besar sudah mengetahuinya. tapi disini tipnya Ngeblog Aja mencoba untuk sharing kepada teman-teman yang belum mengetahui cara pembuatannya.

Note: yang akan ade bahas ini merupakan tulisan berjalan biasa bukan tulisan berjalan yang apabila ada mouse di area tulisan itu akan berhenti.

berikut cara pembuatannya :

Login ke Blogger
Kemudian klik Tata Letak dan Elemen Halaman
Ketika sudah berada di Elemen Halaman klik Tambah Gadget
Lalu pilih HTML/JavaScript
Langkah selanjutnya masukkan kode marquee yang anda inginkan seperti contoh dibawah ini :

1. Teks berjalan dari kanan ke kiri

kode :

hasil :

Contoh Tulisan Berjalan

2. Teks berjalan dari kiri ke kanan

kode :

hasil :

Contoh Tulisan Berjalan

3. Teks berjalan bolak balik

kode :

hasil :

Contoh Tulisan Berjalan

4. Teks berjalan dari atas ke bawah

kode :

hasil :

Contoh Tulisan Berjalan

5. Teks berjalan dari bawah ke atas

kode :

hasil :

Contoh Tulisan Berjalan

6. Teks berjalan mondar-mandir

kode :

hasil :

Contoh Tulisan Berjalan

7. Teks berjalan zig-zag nembus

kode :

hasil :

Contoh Tulisan Berjalan

8. Teks berjalan zig-zag mantul

kode :

hasil :

Contoh Tulisan Berjalan

Langkah Selanjutnya adalah mengganti tulisan

Contoh Tulisan Berjalan

dengan tulisan atau kata-kata yang anda inginkan.

Ket :
# direction="left/right/up/down" --> Mengatur arah gerakan teks.

# scrollamount="angka" --> mengatur kecepatan gerakan dalam pixel, semakin besar angka semakin cepat gerakannya.

# behavior="scroll/slide/alternate" --> Untuk mengatur perilaku gerakan :
~> Scroll --> teks bergerak berputar
~> Slide--> teks bergerak sekali lalu berhenti
~> Alternate --> teks bergerak dari kiri kekanan lalu balik lagi ( bolak-balik bo)

# Fungsi dari :

<center> ............. </center>

adalah agar tulisan tersebut selalu berada di tengah.

SEMOGA BERHASIL

Demikianlah artikel mengenai Cara Membuat Tulisan Berjalan (Marquee
Semoga Bermanfaat..

Cara Membuat Label Cloud. Blogger kembali meluncurkan fitur terbaru yaitu label cloud. Sesuai info yang diperoleh dari Blogger Buzz, saat ini pengguna blogspot sudah bisa memasang label cloud tanpa harus memodifikasi script yang ada pada template blogger.

Langkah2 membuat label cloud di blogspot
1. Login ke account blog anda
2. Klik menu Tata Letak pada blog yang akan dipasang label cloud (Jika memiliki lebih dari 1 blog)
3. Klik Tambah Gadget (sidebar / footer)
4. Klik pada gambar atau label atau tanda plus (+)

5. Pada bagian display, pilih yg cloud

6. Save, selesai lalu liat hasilnya
Selain dengan cara diatas, anda juga bisa menentukan label blog mana saja yang akan ditampilkan. Caranya, setelah langkah ke-5, pada bagian show pilih selected labels kemudian klik edit.

Disana anda bisa mengorganisir sendiri label mana saja yang akan ditampilkan di blog anda dengan menghilangkan tanda checklist pada bagian label yang tidak ingin anda tampilkan. Kemudian klik save dan silahkan anda liat sendiri hasilnya... :)

Jangan Lupa Comment ya...!

Cara Membuat Tabel Cantik Postingan di Blog

Cara Membuat Recent Comment Di blog

Cara Membuat Related Post / Artikel Terkait di Blogspot/Blogger

Cara Mudah Membuat Komentar Facebook Otomatis Di Blog

Cara membuat teks berjalan dan bergambar animasi bergerak di blog

Cara Memasang Meta Tag Blog Blogger

Cara Membuat/Menampilkan Status Off/Online Yahoo Messenger

Membuat Navigasi Ala Google di Blogspot

Cara Membuat Random Post / Postingan Mengacak

Cara Mengirimkan Update Blog ke Facebook Fanpage

Cara Memasang Tombol Subcribe By Email

Cara Membuat Efek Gelembung Pada Cursor Mouse

Cara Membuat Efek Bintang atau Salju Bertaburan Pada Cursor Mouse

Cara Menghilangkan atau Menghapus Navbar (Navigation Bar) Blogger

Cara Membuat Spoiler di Postingan Blog

Cara Memasang Script Atau Kode HTML Pada Postingan Blog

Cara Membuat Translate dengan Gambar Bendera pada Blog

Cara Membuat Tulisan Berjalan (Marquee) di Blog

Cara Buat Label Cloud/huruf Besar Kecil

Komentar Anda

Popular post

Blog Archive

Berlangganan Blog ini