Membuat Pop Up Message Box Alert di Bloger

Pada postingan kali ini, kami akan menjelaskan tetang trik membuat Pop Up Message Box Alert di Blogger.  Message Box "Alert" banyak difungsikan oleh blogger sebagai pesan pembuka yang berisikan beberapa hal antara lain : Ucapan Selamat datang, Info muatan blog, dan masih banyak lagi ( perhatikan gambar dibawah )

Masuk ke Proses / cara membuat Message Box Alert :

• Loggin Blogger > Dasbor > rancangan.
• Pilih Add New Widget > add HTML/JAVAscript

  

•  Copy Paste Kode di bawah ini ke dalam HTML/JAVAscript tersebut, simpan kemudian lihat hasilnya

<script language="JavaScript">
alert ("Selamat Datang di Blog Saya")
alert ("Jangan lupa tinggalkan komentar")
alert ("Semoga Bermanfaat")
</script>

Catatan : ganti kalimat yang berwarna merah dengan  Pesan yang ingin kamu tampilkan.

"Selamat Mencoba"

Membuat Widget Recent Post dengan scroll menu

Recent Post adalah daftar entri Blog atau situs yang pernah dibuat sebelumnya, baik itu berupa Info, tutorial, maupun berbentuk artikel. Fungsi dari Recent Post sendiri adalah mempermudah penungunjung untuk mencari/ menelusuri daftar artikel yang telah kita buat atau posting sebelumnya. Namun terkadang semakin banyak artikel atau entri yang kita buat, apabila diurutkan ke dalam widget "Recent Post" akan membuat  daftar terlihat penuh dan mengurangi keindahan bentuk "Template Blog". 

Untuk menanggulangi masalah tersebut adalah tentu saja dengan membuat ringkas "Recent Post" tersebut dengan menggunakan "Scroll menu", sehingga untuk melihat sekian banyak artikel pengunjung cukup menggunakan scroll tersebut :

Berikut cara membuat Widget Recent Post tersebut di atas :

• Loggin Blogger > Pilih "Dasbor"> rancangan ( lihat pada artikel sebelumnya )
• Pilih menu label "Tambah Gadget" > add HTML/Javascript
• Copy Paste Kode dibawah ini kedalam conten "add HTML/Javascript" tersebut di atas, simpan kemudian lihat hasilnya
• <div style="overflow:auto; width:120%px; height:200px; padding:10px; border:1px solid #999999;">
  <script style="text/javascript" src="https://sites.google.com/site/vikrymadzblogspotcom/vikrymadz/recentposts.js"></script>
  <script style="text/javascript">
  var numposts = 10;
  var showpostdate = false;
  var showpostsummary = false;
  var numchars = 20;
  var standardstyling = true;
  </script>
  <script src="http://infolinggar21.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts">
  </script>
  </div> 
• Untuk diperhatikan :-

pada kode "var numpost=10 adalah untuk menentukan jumlah recent post yang akan terlihat     pada area Scroll (misalnya 10 Postingan dan sesuaikan dengan jumlah yang anda    inginkan) - varshowdate = false, menyatakan tanggal entry post tidak ditampilkan (apabila anda    ingin menampilkannya cukup menggantinya menjadi "varshowdate=true" - var showpostsummary=false, menyatan isi dari entry post. apabila anda ingin menampilkan isi dari entry post cukup dengan mengganti false menjadi "true" 

•  
• Mudah bukan ???.. Silahkan tinggalkan komentar.

Menambah 2 Kolom Widget di atas pada elemen laman Blog

Tadinya saya bingung dengan tampilan banyak blog atau web yang saya kunjungi dengan tampilan 2 sampai 3 colom widget di atas postingan. Saya coba menelusuri di "Perancang Template" bloger dan tata letak, namun ternyata menu 2 -3 kolom diatas tersebut tidak disediakan.

Saya mencoba menelusuri beberapa Artikel melalui penelusuran di "mbah Google" dan ternyata malah banyak yang bikin bingung karena proses meletakkan kode css/javascript yang rumit alias taruh disana, taruh disini, rubah disana-rubah disini. yang terkadang malah bikin berantakan template blog karena lupa backup. belum lagi bila ternyata tempat atau posisi patokan "kode html" yang kita cari ternyata tidak ditemuakn.. Tapi karena keinginan yang kuat, saya kemaren coba tanya kepada salah satu rekan yang lebih berpengalaman, dan akhirnya tersebut lah sebuah cara yang sangat sederhana dan sangaaaaaaaaaaaaaaaaaaat mudah.. 

Adapun langkah-langkah yang diterangkan tersebut di atas adalah sebagai berikut :

1. Loggin Blogger > pilih" Dasbor" > "rancangan"
2. Pilih "edit HTML" sehingga terlihat Kode-kode javascript pada konten template
3. cari kode </head> dengan menekan numpad F3 untuk mempermudah penelusuran
4. Setelah ditemukan, insert/copy paste kode di bawah ini persis dibawah kode </head> tersebut, simpan, kemudian lihat hasilnya ( sebagai contoh lihat gambar )

<div id='box-main-container'><div id='box1' style='width: 50%; float: left; margin:0; text-align: left;'><b:section class='box-column' id='col1' preferred='yes' style='float:left;'/><br /> </div><div id='box2' style='width: 50%; float: right; margin:0; text-align: left;'><b:section class='box-column' id='col2' preferred='yes' style='float:right;'/><br /> </div><div style='clear:both;'/></div>

Selamat berposting Ria.. !!!

Membuat MetaTag di Blogger

PENGERTIAN META TAG

Meta tags adalah kode-kode HTML/ javascript yang terdapat pada sebuah halaman web/blog . Karena sifatnya yang tersembunyi, maka tidak sedikit dari para blogger terutama pemula (gw jg ngerasa nich ) yang tidak mengetahui Kode HTML/Javascript "meta tag ini". Pada umumnya
"Meta Tag difungsikan sebagai bahan informasi tambahan mengenai halaman situs yang memasang "meta tag tersebut kepada search engine / mesin pencarian (example. "Mbah Google).informasi tersebut meliputi Title blog, Muatan Blog, dll

CARA MEMBUAT META TAG

       Sebenarnya untuk membuat meta tag tidaklah terlalu sulit. Dengan sedikit kejelian dan pemahaman
        tentang HTML/Javascript  pada blog template, maka meta tag dijamin akan sukses kamu buat:

1.  Seperti biasa " Loggin Blogger > dasbor > rancangan
2. pilih "edit HTML" kemudian cari kode <b:include data=’blog’ name=’all-head-content’/>
3. ganti kode tersebut dengan kode di bawah ini , lalu simpan template

<b:if cond='data:blog.pageType == "index"'><br /> <title><data:blog.pageTitle/></title><br /> <meta content='free software, download programs, tutorial, blogger, Article.' name='description'/><br /> <meta content='<i>MASUKKAN DISINI KATA KUNCI BLOG KAMU DAN PISAHKAN SETIAP KATA DENGAN KOMA</i>,' name='keywords'/><br /> <b:else/><br /> <title><data:blog.pageName/> | MASUKAN DISINI TITLE BLOG KAMU</title><br /> <meta expr:content='data:blog.pageName + ",free software, download programs, tutorial, blogger, Article"' name='Description'/><br /> <meta expr:content='data:blog.pageName + ",<i>free download cheat point blank terbaru, januari,februari, maret, april,juni, juli agustus, september, oktober, november, desember, 2011,2012,<br /> free download software, free Blogger template, free blogger tutorial, message box, buat pop up, free download mp3, 3gp, nlogger trik and tips, blogger tutorial </i>"' name='Keywords'/><br /> </b:if><br /> <br /> <br /> <br /> </div><blockquote class="tr_bq"><div class="MsoNormal" style="line-height: 150%; margin-bottom: 0.0001pt; text-align: justify;"></div></blockquote></div>

Catatan :
- Pada baris : MASUKAN DISINI KATA KUNCI ( contoh : free, download, software, article, dll,' )
- Pada baris : MASUKAN DISINI TITLE BLOG KAMU ganti dengan Title blog kamu (contoh : SI-ANU BLOG )
- Bila cukup jelas langsung aja ke TKP, kalo kurang jelas silahkan isi pertanyaan / comment
- mohon maaf kalau bahasa penulisan kurang jelas dan tidak disertai dengan screen shoot sebab  
  saya menilai bahwa pembaca sekalian telah mengerti tahapan-tahapan yang saya jelaskan 
  tersebut berdasarkan view pada postingan sebelumnya.

Membuat entry pada postingan berbentuk scroll

Pengen postingan kamu berisi sperti di bawah ????

PENGEN AJA DAH PENGEN AJA DAH PENGEN AJA DAH PENGEN AJA DAH PENGEN AJA DAH PENGEN AJA DAH PENGEN AJA DAH PENGEN AJA DAH PENGEN AJA DAH PENGEN AJA DAH

Nih Gw kasih tau caranya :
 " baris yang ingin kamu beri scroll awali dengan kode html : <p align="center"><textarea name="code" rows="50" cols="55"> lalu akhiri dengan kode </textarea></p> sebagai contoh : <p align="center"><textarea name="code" rows="50" cols="55">PENGEN AJA DAH PENGEN AJA DAH PENGEN AJA DAH</textarea></p> Sangat SimpleCatatan : 

• Tulisan yang berwarna merah : adalah ukuran tinggi dan lebar muatan dari Scrool area yang akan kamu tampilkan ( sesuaikan dengan keinginan dan selera kamu )
• Tulisan yang di arsir adalah teks yang ingin kamu masukan dalam Scrool ( ganti dengan teks yang ingin kamu tampilkan )
• Pengalaman ogut pada saat menyisipkan kode <p align ...... kamu harus bekerja dalam posting berbentuk "edit HTML" bukan compose

" SELAMAT BERKREASI"

TUTORIAL MEMASANG WIDGET JAM DI BLOGGER

<script src="http://www.clocklink.com/embed.js"> </script><script type="text/javascript" language="JavaScript"> obj=new Object;obj.clockfile="0001-red.swf";obj. TimeZone="JST";obj.width=150;obj.height=150;obj.Place="";obj.wmode="transparent";showClock(obj);</script>






<script src="http://www.clocklink.com/embed.js"> </script><script type="text/javascript" language="JavaScript"> obj=new Object;obj.clockfile="0001-red.swf";obj. TimeZone="JST";obj.width=150;obj.height=150;obj.Place="";obj.wmode="transparent";showClock(obj);</script> Perhatikan gambar di atas -Gambar 1 adalah Jam dengan Zona Waktu  untuk Indonesia bagian barat (WIB) -Gambar 2 adalah Jam dengan zona waktu untuk Indonesia bagian Tengah (WITA) - Letakkan Kode HTML/ JAVA script yang tertera di atas pada sidebar "widget" Selamat Mencoba

Jumping Teks / Teks loncat-loncat

Caranya : 1. Login Blog > Dasbor > 2. Fikirkan kamu mau taroh dimana !!! 3. kalo Di widget tentunya tau dong harus pilih yang mana 4. Kalau kamu mau pakai dalam postingan, kamu harus bekerja pada metode "edit HTML, bukan compose.

Masukkan kode di bawah ini

<div style="color:#8B0000;font-size:16px;font-family:Bodoni MT Black;" id="jumpx"></div>

<script type="text/javascript">
message="CONTOH TEKS MELOMPAT";
mes=new Array();
mes[0]=-1;
mes[1]=-4;
mes[2]=-7;
mes[3]=-10;
mes[4]=-7;
mes[5]=-4;
mes[6]=-1;
num=0;
num2=0;
txt="";

function jump0()
{
   if (message.length > 6)
   {
      for(i=0; i!=message.length; i++)
      {
         txt = txt + "<span style='position:relative;' id='n"+i+"'>"+message.charAt(i)+"</span>";
      }
      jump = document.getElementById("jumpx");
      jump.innerHTML = txt;
      txt = "";
      jump1a();
   }
}

function jump1a()
{
   nfinal = document.getElementById("n0");
   nfinal.style.left = (-num2).toString() + "px";
   if (num2 != 9)
   {
      num2 = num2 + 3;
      setTimeout("jump1a()", 50);
   }
   else
   {
      jump1b();
   }
}

function jump1b()
{
   nfinal = document.getElementById("n0");
   nfinal.style.left = (-num2).toString() + "px";
   if (num2 != 0)
   {
      num2 = num2-3;
      setTimeout("jump1b()",50);
   }
   else
   {
      jump2();
   }
}

function jump2()
{
   txt = "";
   for(i=0;i != message.length; i++)
   {
      if (i+num > -1 && i+num < 7)
      {
         txt = txt + "<span style='position:relative;top:" + mes[i+num] + "px'>" + message.charAt(i) + "</span>";
      }
      else
      {
         txt = txt + "<span>" + message.charAt(i) + "</span>";
      }
   }
   jump = document.getElementById("jumpx");
   jump.innerHTML = txt;
   txt = "";
   if (num != (-message.length))
   {
      num--;
      setTimeout("jump2()",50);
   }
   else
   {
      num=0;
      setTimeout("jump0()",50);
   }
}
jump0();

</script>

Lihat Hasilnya di bawah