Membuat Profil Badges/Lencana Profil di Blog

Pada postinga kali ini saya akan memberikan tutorial Cara Membuat Profil Badges/Lencana Profil di Blog. Dengan Lencana Profil facebook ini kita bisa memberitahukan sedikit informasi tentang kita melalui profil facebook. Langsung saja saya berikan tutorialnya. Begini contoh Lencana Profil Facebook nya Sob..!!

          1. Login Ke Blogger

          2. Anda harus login ke akun Facebook Anda, Lalu silahkan anda klik Disini

          3. Setelah itu akan terlihat penampakan seperti Gambar dibawah ini :

 

          4. Setelah tampak seperti gambar di atas, silahkan pilih Blogger.

          5. Setelah itu akan terbuka tab baru dan terlihat halaman sebagai berikut :

          6. Silahkan pilih Blog yang ingin di pasang Lencana

          7. Ubah Judul widget sesuai dengan keinginan Anda

          8. Setelah itu Klik Menambah Widget

          9. Setelah itu Anda akan diarahlan pada Tata Letak Blog Anda, dan otomatis Widget Lencana/Profil Facebook sudah terpasang sendiri.

          10. Silahkan Geser dimana letak Widget Profil Tersebut terserah Anda.

          11. Silahkan Klik Simpan Stelan

          12. Selesai.

Sekian tutorial dari saya kali ini, semoga bermanfaat bagi teman-teman semuanya. jika ada yang kurang jelas silahkan tinggalkan komentar Anda di bawah.

Cara Membuat Sitemap/Daftar Isi

Daftar Isi/Sitemap sangatlah penting bagi suatu blog/web, kenapa? Karena agar pengunjung bisa mudah melihat artikel-artikel yang dibutuhkannya di blog kita. Sebelumnya saya sudah pernah memposting artikel yaitu Cara Membuat Daftar Isi Jquery Accordion . Nah, pada postingan yang ini, saya akan memberikan Cara Membuat Daftar Isi yang lain, bedanya apa? kalau Daftar Isi Jquery Accordion di tambahkan sedikit animasi sehingga kita bisa membuka daftar isi sesuai label satu per satu. Tapi pada Daftar Isi di postingan kali ini Daftar Isi nya beda, daftar isinya tersusun rapi sesuai label A-Z.

Kira-kira penampakannya seperti di bawah ini :

 Atau bisa melihat yang aslinya Disini

Jika anda ingin membuatnya silahkan ikuti langkah-langkah berikut :

1. Login Ke Blogger
2. Klik Entri Baru/New Page..

     3. Pilih Model HTML
     4. Masukkan script berikut :

<script src="http://yourjavascript.com/18113981113/bukarahasiablog-toc.js">
</script>
<script src="http://myogisaputra.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script>

Ganti Tulisan yang berwarna merah dengan alamat blog anda.
 
     5. Klik Simpan/Save.
     6. Selesai.

Silahkan anda lihat hasilnya. Sekian dari saya semoga bermanfaat.  

Cara Memasang Animasi di Blog

Kali ini saya akan memberikan tutorial bagaimana caranya Memasang Animasi di Blog, mungkin sebagian ari kita sering kali berkunjung pada suatu web atau blog dan melihat ada animasi-animasi yang unik di alamnya, lalu terpikir di benak anda, Bagaimana Cara Membuat Animasi tersebut?

Umumnya orang meletakkan animasi di sudut blog mereka, seperti sudut bawah kiri, sudut bawah kanan, dan sudut lainnya. Tetapi itu sesuai keinginan si pemilik blog. langsung aja ini saya kasih tutorialnya :

1. Login ke Blogger
2. Pilih menu Tata Letak
3. Pilih Tambah Gadget
4. Masukkan Script animasi yang ada di bawah ini, silahkan dipilih.

1. Bayi Ketawa
 

Script :

<div style="position: fixed; bottom: 0px; right: 20px;width:82px;height:160px;"><a href="http://content.sweetim.com/sim/cpie/emoticons/0002031F.gif" target="_blank"><img src="http://content.sweetim.com/sim/cpie/emoticons/0002031F.gif" alt="animasi blog" /></a><small></small></div>

2. Bayi Berbaring






Script :

<div style="position: fixed; bottom: 0px; right: 20px;width:82px;height:160px;"><a href="http://content.sweetim.com/sim/cpie/emoticons/0002031E.gif" target="_blank"><img src="http://content.sweetim.com/sim/cpie/emoticons/0002031E.gif" alt="animasi blog" /></a><small></small></div>

3. Helikopter
 

Script :

<div style="position: fixed; bottom: 0px; right: 20px;width:82px;height:160px;"><a href="http://content.sweetim.com/sim/cpie/emoticons/00020389.gif" target="_blank"><img src="http://content.sweetim.com/sim/cpie/emoticons/00020389.gif" alt="animasi blog" /></a><small></small></div>

4. Gajah Loncat
 

Script :

<div style="position: fixed; bottom: 0px; right: 20px;width:82px;height:160px;"><a href="http://content.sweetim.com/sim/cpie/emoticons/000203BC.gif" target="_blank"><img src="http://content.sweetim.com/sim/cpie/emoticons/000203BC.gif" alt="animasi blog" /></a><small></small></div>

5. Boring

 

Script :

<div style="position: fixed; bottom: 0px; right: 20px;width:82px;height:160px;"><a href="http://content.sweetim.com/sim/cpie/emoticons/0002016B.gif" target="_blank"><img src="http://content.sweetim.com/sim/cpie/emoticons/0002016B.gif" alt="animasi blog" /></a><small></small></div>

6. Boneka Joget
 

Script :

<div style="position: fixed; bottom: 0px; right: 20px;width:82px;height:160px;"><a href="http://content.sweetim.com/sim/cpie/emoticons/0002013F.gif" target="_blank"><img src="http://content.sweetim.com/sim/cpie/emoticons/0002013F.gif" alt="animasi blog" /></a><small></small></div>

Cara Membuat Tab View Tanpa Edit HTML

Menu tab view merupakan widget tambahan yang berbentuk tab. Dengan cara menggunakan tab view, kita bisa lebih menghemat widget yang bisa memberatkan loading di blog kita. Di sore yang cukup tenang ini saya ingin memberikan tutorial Cara Membuat Tab View Tanpa Edit HTML. Loh, bagaimana bisa? Ya bisa. cara ini saya dapatkan dari blognya Makolis.  

Jadi sekarang teman-teman tidak perlu lagi membuat tabviewnya di pada EDIT HTML, tanpa takut terjadi kesalahan yang bisa membuat template teman-teman menjadi rusak. Tab View biasanya digunakan untuk membuat memperingkas tampilan widget, sehingga tidak banyak widget yang di gunakan, juga loading blog kita bisa menjadi cepat (tidak lemot).Langsung aja cara buatnya ada di bawah ini.

Cara Membuat Menu Tab View Tanpa Edit HTML

1. Login Ke Blogger
2. Pilih Tata Letak lalu Klik Tambah Widget
3. Lalu pilih elemen HTML/JavaScript
4. Masukkan kode di bawah ini :

<style type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 80px; /* Lebar Kotak Tab */
height: 22px; /* Tinggi Menu Utama Atas */
text-align: center; /* Posisi Teks Menu Tab */
margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */
background-color: #000; /* Warna background Kotak Tab */
padding-top: 2px; /* Spasi Atas */
border: 1px solid #ffffff; /* Warna border kotak Tab */
border-bottom: 1px solid #ccc; /*Warna border bawah kotak tab */
font-family: "Arial, Helvetica, sans-serif", Arial; /* Font Kotak Tab */
font-weight: 900; /* Ketebalan Teks kotak tab */

}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #736F6E; /* Warna background utama kotak tab */ }
div.TabView div.Pages
{
clear: both;
border: 1px solid #cccccc; /* Warna border Kotak Konten */
overflow: hidden;
background-color: #ffffff; /* Warna background Kotak konten */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 5px; /* Jarak teks dalam kotak content */
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
</style>

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a><span style="color: #fff">Tab 1</span></a>
<a><span style="color: #fff">Tab 2</span></a>
<a><span style="color: #fff">Tab 3</span></a>
</div>
<div style="width: 300px; height: 200px;" class="Pages">

<div class="Page">
<div class="Pad">
konten 1
</div>
</div>

<div class="Page">
<div class="Pad">
konten 2
</div>
</div>

<div class="Page">
<div class="Pad">
konten 3
</div>
</div>
</div></div></form>

<script src="https://masolis-javascript.googlecode.com/svn/trunk/tab-viewmaskolis.js">
</script>
<script type="text/javascript">
tabview_initialize('TabView');
</script></div>

     Keterangan:

• Tulisan berwarna kuning merupakan keterangan dari masing-masing kode. Silahkan atur nilainya sesuai keinginan
• Tulisan berwarna orange merupakan warna judul Tab
• Tulisan berwarna hijau merupakan judul Tab
• Angka 300 pada 'Width' menunjukkan panjang kotak dan 200 pada 'height' menunjukkan tinggi kota. Silahkan ganti nilainya sesuai ukuran template anda.
• Tulisan yang dicetak tebal merupakan isi tab view. Silahkan ganti dengan teks, link, banner atau widget anda.

Jika anda ingin menambah menu tab baru cukup tambahkan kode yang berkedip dibawahnya. Demikian tadi tutorial membuat tab view widget tanpa eit HTML, contoh dari tab view ini bisa anda lihat di blog ini.

Membuat Animasi Menu Horizontal di Blog

Kali ini saya akan memberikan sebuah informasi mengenai cara Membuat Animasi Menu Horizontal di Blog. Mungkin bagi anda yang ingin tampilan blog anda menjadi lebih menarik dan pengunjung pun bisa betah untuk berlama-lama berada di blog anda.  Bagi anda yang ingin melihat tampilannya secara langsung silahkan menuju kesini. Langsung aja saya kasih scriptnya :

       1. Login ke Blogger
       2. Kemudian pada Dashbor klik Template lalu Edit HTML
       3. Letakkan kode berikut diatas tag ]]></b:skin>:

margin-right: 3px; /*Spacing between each tab*/
padding: 0 0 0 9px;
text-decoration: none;
}
.animatedtabs a span{
float: left;
position: relative;
display: block;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwT_qH10YpiYg6DhZguyGdI_nV7luSEYx7XAtAgfKNyvStaTw5n4YBwJLf7fbo3MxZXKQebmAujq98k9gXETwmp4M3nZssR8UPWLsrQ32ThCfVDgSm5bWllofgxh-H0Q25U5Enal7ZncY/s320/tab-blue-right.gif) no-repeat right top;
padding: 5px 14px 3px 5px; /* 2) Padding within each tab. The 3rd value, or 3px, should equal (1) MINUS (3) */
font-weight: bold;
color: black;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
.animatedtabs a span {float:none;}
/* End IE5-Mac hack */
.animatedtabs .selected a{
background-position: 0 -125px;
top: 0;
}
.animatedtabs .selected a span{
background-position: 100% -125px;
color: black;
padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
top: 0;
}
.animatedtabs a:hover{
background-position: 0% -125px;
top: 0;
}
.animatedtabs a:hover span{
background-position: 100% -125px;
padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
top: 0;
}

       4. Tambahkan kode berikut dibawah <div id='header-wrapper'> atau di atasnya juga bisa, atau juga bisa anda tambahkan pada elemen widget.

 

<div class='animatedtabs'>

<ul>

<li><a href='http://creatingwebsite-maskolis.blogspot.com' title='Home'><span>Home</span></a></li>

<li><a href='http://creatingwebsite-maskolis.blogspot.com/search/label/tutorial blog' title='tutorial blog'><span>Tutorial Blog</span></a></li>

<li><a href='http://creatingwebsite-maskolis.blogspot.com/search/label/SEO' title='SEO'><span>SEO</span></a></li>

<li><a href='http://creatingwebsite-maskolis.blogspot.com/search/label/wordpress' title='wordpress'><span>Wordpress</span></a></li>

<li><a href='http://creatingwebsite-maskolis.blogspot.com/search/label/affiliate' title='affiliate'><span>Affiliate</span></a></li> 

<li><a href='http://creatingwebsite-maskolis.blogspot.com/search/label/hosting' title='hosting'><span>Hosting</span></a></li>

</ul>

</div>

       5. Simpan template dan Lihat Hasilnya

        Mungkin hanya ini dulu ya teman-teman, cara ini juga saya dapat dari blog nya Maskolis. Jika teman-teman kebingungan silahkan tinggalkan komentar dibawah ini.

Cara Membuat Teks Berjalan (Marquee)

Selamat pagi teman-teman semua, di minggu pagi yang cerah ini saya ingin memberikan tutorial Cara Membuat Teks Berjalan (Marquee) di Blog. Mungkin sering dari kita pernah berkunjung di suatu web atau blog yang menggunakan teks berjalan. Mungkin sebagian dari kita udah tau bagaimana cara buatnya, tapi ada yang bertanya bagaimana cara membuatnya? Kali ini saya akan memberikan sedikit penjelasannya kepada anda. Langsung aja ya !

• Tulisan berjalan dibawah bukanlah tulisan berjalan yang berhenti apabila ada mouse di area tulisan tersebut.

1. Silahkan Login Ke Blogger
2. Pilih Tata Letak / Layout
3. Klik Tambah Gadget 
4. Pilih elemen Edit HTML/JavaScript 
5. Masukkan Kode Teks Berjalan Seperti Berikut :

1. Teks Berjalan Ke Kanan

Kode :

  <marquee direction="left" scrollamount="2" align="center">Contoh Tulisan Berjalan</marquee>

Hasil :

Contoh Tulisan Berjalan

2. Teks Berjalan Dari Kiri Ke Kanan

 Kode :

<marquee direction="right" scrollamount="2" align="center">Contoh Tulisan Berjalan</marquee> 

Hasil :
 Contoh Tulisan Berjalan

3. Teks Berjalan Bolak Balik

Kode : 

  <marquee direction="left" scrollamount="2" align="center" behavior="alternate"> Contoh Tulisan Berjalan </marquee>

 Hasil :

Contoh Tulisan Berjalan 

4. Teks Berjalan Dari Atas Ke Bawah


<marquee direction="down" scrollamount="2" align="center"> Contoh Tulisan Berjalan </marquee>

Hasil :
  Contoh Tulisan Berjalan 

5. Teks Berjalan Dari Bawah Ke Atas

Kode :

<marquee direction="up" scrollamount="2" align="center"> Contoh Tulisan Berjalan </marquee>

Hasil :

Contoh Tulisan Berjalan

6.  Teks Bolak-Balik (Atas-Bawah)

Kode :


<marquee direction="up" scrollamount="2" align="center" behavior="alternate"> Contoh Tulisan Berjalan </marquee>

Hasil

 Contoh Tulisan Berjalan

7 . Teks Berjalan Zig-Zag (nembus)

Kode :

<center> <marquee direction="up" scrollamount="2" align="center" behavior="alternate" width="90%"><marquee direction="right"> Contoh Tulisan Berjalan </marquee></marquee></center>

Hasil

Contoh Tulisan Berjalan
8. Teks Berjalan Zig-Zag (Mantul)

Kode :

<center> <marquee direction="up" scrollamount="2" align="center" behavior="alternate" width="90%"><marquee direction="right" behavior="alternate"> Contoh Tulisan Berjalan </marquee></marquee></center>

Hasil

Contoh Tulisan Berjalan 

• Langkah Terakhir

Langkah yang  selanjutnya adalah mengganti tulisan :

       Contoh Teks Berjalan

Keterangan :

1. #direction="left/right/up/down" ~~> Mengatur Arah Gerakan Teks
2. #scrollamount="angka" ~~> Mengatur Kecepatan gerakan dalam pixel, semakin besar angka semakin besar gerakannya.
3. #behavior=scroll/slide/alternate" ~~> Untuk mengatur gerakan :

• Scroll ~~> Teks bergerak berputar
• Slide ~~> Teks bergerak sekali lalu berhenti
• Alternate ~~> Teks berjalan dari kiri ke kanan bolak-balik.

Cara Membuat Tombol Follow Twitter di Blog

Assalamualaikum. Teman-teman sekalian, kali ini saya ingin memberikan tutorial Cara Membuat Tombol Follow Twitter di Blog, mungkin beberapa di antara teman-teman ingin membuat button/tombol follow twitter di blog teman-teman. Tetapi nggak tau caranya? Tenang saja, kali ini saya akan memberikan tutorialnya. Langsung aja cekidot!

  1. Silahkan buka halaman Twitter Button Disini.

  2. Silahkan anda pilih tombol mana sesuai engan keinginan anda.

  3. Setelah itu pada menu Button Options ada form User disitu masukkan ID Twitter anda.

  4. Pada menu Preview and Code silahkan copy script yang ada disitu.

Contohnya seperti ini :

<a href="https://twitter.com/myogisaputra1" class="twitter-follow-button" data-show-count="false">Follow @myogisaputra1</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Maka nanti jadinya akan seperti ini :

Follow @myogisaputra1

Jika anda ingin membuat tombol follow beserta jumlah followers , pada  data-show-count="false" ubah kata "false" menjadi "true"

Contohnya seperti ini :

<a href="https://twitter.com/myogisaputra1" class="twitter-follow-button" data-show-count="true">Follow @myogisaputra1</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Maka nanti jainya akan seperti ini :

Follow @myogisaputra1

Lalu bagaimana cara memasukkannya ke blog kita?

1. Silahkan login ke Blog anda.
2. Silahkan pilih Tata Letak atau Layout.
3. Pilih Tambah Gadget, lalu pilih HTML/JavaScript.
4. Lalu setelah itu masukkan script tombol Follow tadi.
5. Klik Save/Simpan
6. Selesai

gimana? mudah bukan?. Itulah tutorial  Cara Membuat Tombol Follow Twitter di Blog. Mudah-mudahan berguna untuk anda yang membutuhkannya, sekian tutorial ini. Jika anda bingung silahkan meninggalkan komentar di bawah ini.

Wassalam

Cara Memasang Script Kode Warna HTML

Kali ini Saya mau memberi tahu Anda Script Kode Warna HTML. mungkin Anda kebingungan apasih kode warna suatu warna di HTML/Blog atau sejenisnya. Tapi tenang saja, Anda bisa mengetahuinya dengan gampang, tidak pertu menghafal kode-kode warna tersebut. Disini Saya juga akan memberikan Script nya yang mungkin juga bisa Anda pasang di Blog Anda. oke langsung aja, ini dia scriptnya.

<object border="0" classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" height="480" id="obj1" width="480"><param name="movie" value="http://www.allblogtools.com/MiSc/colors/color-codes.swf"></param><a href="http://cara-memasang.blogspot.com">
<param name="quality" value="High">
<embed src="http://www.allblogtools.com/MiSc/colors/color-codes.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj1" width="485" height="485" quality="High"></embed></param><p></a>
</object></p>

Belum tau cara masangnya?
oke disini Saya kasih tau cara masangnya.

1. Login Ke Blogger.
2. Pilih New Post atau Entri Baru seperti membuat postingan biasa.
3. Pilihlah pada mode Edit HTML (Disebelah Compose) saat membuat postingan.
4. Copy-Paste Script di atas pada Edit HTML tersebut.
5. Klik Publish atau Terbitkan Entri jika sudah selesai.

Maka jadinya akan seperti Ini :



Mungkin itu saja dari Saya, Semoga Bermanfaat.

Cara Membuat Daftar Isi Jquery Accordion

Pada postingan kali ini saya akan membagi tips and trick tentang Cara Membuat Daftar Isi Jquery Accordion. Jika Sobat bingung tentang cara membuat Daftar isi pada blog sobat, maka postingan saya ini adalah jawaban dari segala kebingungan sobat. Kalau contohnya bisa dilihat dibawah ini :

 (Klik Untuk Memperbesar)

Atau bisa dilihat langsung Disini.

 Cara Membuat Daftar Isi Jquery Accordion sangat praktis dan mudah. Oke deh tanpa banyak basa basi lagi silahkan sobat ikuti langkah-langkahnya di bawah ini :

1. Login ke Blogger  dengan akun Anda masing-masing
2. Klik Menu Posting dan buatlah sebuah postingan dengan judul Daftar isi atau Site Map atau sesuai dengan keinginan Anda.
3. Klik HTML ( Disebelah Compose )
4. Paste script di bawah ini di dalam postingan

<link href="http://abu-farhan.com/script/acctoc/acc-toc.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"></script>
<script src="http://www.myogisaputra.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript"></script>

    5. Gantilah tulisan yang berwarna merah dengan alamat URL blog Anda
    6. Dan yang terakhir klik Publish Post
    7. Dan Lihat Hasilnya

Hanya itu yang dapat Saya sampaikan, semoga bermanfat.

Cara Daftar dan Submit Blog Di Bing

Bing adalah Mesin Pencari ke empat yang dikeluarkan oleh salah satu perusaan raksasa dunia Microsoft setelah MSN Search, Windows Live Search, dan Live Search. Bing sengaja di Keluarkan Oleh perusahaan Microsoft untuk mendongkrak popularitasnya yang tenggelam selama ini oleh keberadaan Google Search. Berikut ini fitur yang dimiliki oleh Bing: Best Match, Interface Features, Media Features, Instant Answer, Bing Maps dan Bing Travel. Tanpa panjang lebar membahas tentang Bing, Tips Gratis akan langsung ke pokok permasalahan yang akan di bahas.

Cara Submit Blog Di Bing:

1.  Kunjungi halaman http://www.bing.com/webmaster/SubmitSitePage.aspx
2. Type the characters from the picture : Ketik karakter yang sobat blogger lihat dalam gambar
3. Type the URL of your homepage : Masukkan URL blog sobat! (Contoh : http://www.myogisaputra.info/ )
4. Klik Submit URL
5. Setelah itu kunjungi alamat http://www.bing.com/webmaster (Kalau di Google kita mengenal Google Webmaster Tools, di Bing terdapat Bing Webmaster Tools).
6. Silahkan sobat blogger Sign In di Bing Webmaster Tools. Gunakan Windows LiveID untuk Sign In, Jika sobat belum memiliki Windows LiveID, silahkan sobat blogger buat atau daftar .
7. Kalau sobat sudah buat, Langsung Sign In dan Klik kata Add Site
8. Tulis URL blog sobat dan Klik Add Site
9. Selanjutnya sobat blogger akan di minta untuk melakukan  Verify Ownership.  Sobat pilih opsi yang kedua (Option 2).
10. Copy meta tag tersebut dan paste di Notepad sebelum di paste di blog sobat
11. Tanpa menutup jendela Browsing yang sudah terbuka, silahkan sobat buka Tab baru dan Sign in di blog sobat. Klik Rancangan, Edit HTML, Kasih tanda centang pada Expand Widget Template. Cari kode . Kalu sudah ketemu, Copy kode yang di dapat dari Bing Webmaster Tools yang sudah kita taruh di Notepad di BAWAH . Selanjutnya Simpan Template sobat.
12. Kalau sobat sudah meletakkan Meta Tag tersebut, Sobat kembali lagi ke Bing Webmaster Tools dan klik kata Verify
13. Proses Submit Blog di Bing sudah selesai tetapi masih ada lagi yang harus sobat blogger lakukan, yaitu Submit Sitemap ke Bing. Caranya sangat Mudah, silahkan sobat copy URL di bawah ini dan paste di kotak pencarian di media Browser sobat dan klik Enter: http://www.bing.com/webmaster/ping.aspx?sitemap= http://www.myogisaputra.info/ sitemap.xml

Cara submit sitemap di bing memang sangat mudah, berbeda dengan di Google. Tapi ingat, Ganti tulisan yang berwarna merah dengan URL Blog sobat.

 

Sumber

Cara Membuat Text Area

Alhamdulilah kali ini Saya masih di berikan kesempatan untuk menulis artikel di blog myogisaputra ini. Pada artikel ini Saya akan memberikan tutorial Cara Membuat Text Area.

Apa itu Text Area? text area adalah area tempat untuk menyimpan text atau tulisan baru, atau bisa dikatakan sebuah komponen HTML yang digunakan untuk menampilkan text atau kode script dalam bentuk dan format text. Biasanya text area dipakai untuk menyimpan kode HTML yang tidak bisa di tulis langsung ke dalam postingan di blog. Jadi fungsi dari text area ini kurang lebih untuk memudahkan pengunjung mengcopy seluruh isi text.

1. Text Area Standard

Untuk membuat text area ini, silahkan copy kode di bawah ini :

<p align="center"><textarea name="code" rows="2" cols="15"> Letakkan Text Anda Disini </textarea></p>

 Contoh :

<p align="center"><textarea name="code" rows="2" cols="15"> Selamat datang di Blog myogisaputra</textarea></p>

Maka akan terlihat seperti ini :

Selamat datang di Blog myogisaputra

Keterangan :

• Untuk rows="2" adalah tinggi dari text area, jadi jika sobat menginginkan text area yang lebih tinggi silahkan sobat ganti dengan angka yang lebih tinggi. 
• Untuk cols="15" adalah lebar dari text area, jadi jika sobat menginginkan text area yang lebih lebar silahkan sobat ganti dengan angka yang lebih tinggi. 

Cukup jelas bukan? Oke kita lanjutkan lagi dengan menggunakan Highlight

2 .Text Area dengan menggunakan Highlight

Variasi lainnya dari text area yaitu dengan menggunakan tombol Highlight, jadi dimaksudkan agar lebih memudahkan untuk mengcopy seluruh isi text area hanya dengan menekan tombol Highlight.

Hanya dengan menekan tombol highlight maka seluruh isi dari text area akan di highlight dan tinggal di copy saja. Fungsi tombol highlight ini sangat berguna untuk mencegah tertinggalnya satu atau beberapa isi dari text area.

Silahkan copy kode HTML di bawah ini : 
 

 <div><form name="copy"><div align="center"><span><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" value="Highlight All" type="button"> </span></div><p align="center"><textarea style="width: 150px; height: 80px;" name="txt" rows="5" wrap="VIRTUAL" cols="20">Tulis sesuatu tentang blog teman-teman disini, maka tulisan yang teman-teman semua tulis akan muncul di sini dan siap di copy oleh para pengunjung</textarea></p></form></div>

Dan seperti ini hasilnya :

Tulis sesuatu tentang blog teman-teman disini, maka tulisan yang teman-teman semua tulis akan muncul di sini dan siap di copy oleh para pengunjung

Agar dapat memahami kode diatas, saya akan berikan uraian tentang kode-kode text area diatas.

1. <div align="center"> --> kata center menunjukan bahwa posisi tombol akan berada di tengah, jadi jika sobat ingin posisi tombol berada di tepi sebelah kiri, tinggal ganti dengan kata left. Dan jika ingin berada di tepi sebelah kanan, tinggal ganti dengan kata right.
   
2. <input onclick="javascript:this.form.txt.focus();this.form.txt.selec()"> --> kode ini artinya ketika tombol highlight di klik, maka seluruh text yang ada di dalamnya akan di highligt (di tandai atau di blok), jadi sobat jangan merubah tulisan ini.
   
3. Value="Highlight All" --> kata Highlight All adalah kata yang akan muncul di dalam tombol, jadi jika sobat ingin merubah tulisan ini silahkan ganti dengan kata yang sobat inginkan.
   
4. <p align="center"> --> ini menunjukan bahwa text area akan berada di tengah, nah jika sobat ingin text area sobat berada di tepi kiri, ganti kata center dengan kata left, bila ingin di tepi kanan, ganti dengan kata right.
   
5. <text style="WIDTH: 150px">-->kata "WIDTH:150px" menunjukan lebar dari text area tersebut sebanyak 150 pixel, jadi jika sobat ingin memperpendek atau memperpanjang lebar text area, sobat tinggal menggantinya dengan angka yang sobat inginkan. misal: "WIDTH:500px;"
   
6. HEIGHT: 80px --> angka "80px" menunjukan bahwa text area akan mempunyai tinggi sebesar 80 px, jadi jika sobat ingin merubahnya tinggal ganti angka tersebut dengan angka yang Anda inginkan. Misal : HEIGHT:160px.

Nah itu dia sedikit penjelasan tentang Text Area. Mungkin hanya ini yang dapat Saya sampaikan. Selamat mencoba dan semoga bermanfaat

Cara Membuat Blog di Blogger

Alhamdulilah Saya masih di beri kesempatan untuk membuat postingan di blog Saya ini. Sebenarnya sih Saya masih newbie, alias pemula, tapi Saya ingin memberikan sedikit informasi kepada Anda tentang Cara Membuat Blog.

Sebelumnya sudah tau apa itu Blog?, yang belum tahu ini Saya kasih tau.

Blog merupakan singkatan dari web log^. adalah bentuk aplikasi web yang menyerupai tulisan-tulisan (yang dimuat sebagai posting) pada sebuah halaman web umum. Tulisan-tulisan ini seringkali dimuat dalam urut terbalik (isi terbaru dahulu baru kemudian diikuti isi yang lebih lama), meskipun tidak selamanya demikian. Situs web seperti ini biasanya dapat diakses oleh semua pengguna Internet sesuai dengan topik dan tujuan dari si pengguna blog tersebut. (Wikipedia)

Barang kali teman-teman sekalian ingin membuat atau mempunyai Blog, tetapi tidak tahu cara membuatnya. Kali ini Saya akan menjelaskan Cara Membuat Blog di Blogger Gratis!!. Disini Saya hanya menjelaskan cara membuat Blog dari Blogger, cara membuat blog di cms seperti wordpress.com, blogdetik, atau yang lainnya nanti InsyaAllah menyusul di postingan berikut nya.

Disini Saya bukan hanya memberi Tutorial Cara Membuat Blog, tetapi juga ada tutorial-tutorial lainnya  mengenai seputar Blogspot, yang Insya Allah membantu dan berguna bagi Anda. Langsung saja berikut Tutorial Membuat Blog di Blogger.

   

1. Buka Blogger

2. Lalu Klik SIGN UP seperti gambar dibawah ini. 

(Klik Untuk Memperbesar)

3. Isi data-data Anda seperti biasa.

(Klik Untuk Memperbesar)

4. Jika Anda ingin mengganti photo profil silahkan klik ADD PROFILE PHOTO, kalau tidak klik NEXT STEP seperti gambar di bawah ini. 

(Klik Untuk Memperbesar)

5. Setelah itu klik Back to Blogger seperti gambar dibawah ini. 

(Klik Untuk Memperbesar)

6. Lalu klik Lanjutkan ke Blogger keterangannya ada dibawah ini. 

(Klik Untuk Memperbesar)

7. Setelah itu klik New Blog .

(Klik Untuk Memperbesar)

8. Lalu isikan form Title, yaitu judul pada address bar seperti Test Blog, lalu  isi form Address yaitu alamat Blog Anda, seperti myogisaputratest.blogspot.com. Lalu pilih template yang Anda inginkan. Setelah itu klik Create Blog seperti keterangan arah panah hitam di bawah. 

(Klik Untuk Memperbesar)

9. Dan Blog Anda pun telah jadi.  Klik judul blog yang Anda lihat tadi seperti gambar dibawah ini. 

(Klik Untuk Memperbesar)

10. Untuk melihatnya silahkan tekan tombol Lihat Blog atau juga bisa ketikkan alamat blog yang Anda buat tadi di address bar browser Anda.

 

(Klik Untuk Memperbesar)

      Nanti akan muncul seperti ini :

     (Klik Untuk Memperbesar)

      Ini ada alamat blog Anda :

 (Klik Untuk Memperbesar)

Semoga Bermanfaat. Terima Kasih

  

Cara Membuat Spoiler di Blog

 

Sebagian orang pastinya sudah tahu apa itu spoiler, apalagi kalau sering bermain di forum. Spoiler sudah pasti sering digunakan. Lalu bagaimana kalau mau menerapkan atau membuat spoiler di blog? Sebelumnya kalau ada yang belum tahu apa itu spoiler. saya jelasin singkat saja. Spoiler adalah tombol yang diguanakan untuk menyingkat tempat atau menyembunyikan konten (teks, foto atau video) dengan buka tutup. Contohnya bisa dilihat di bawah halaman ini.

Spoiler bisa juga dibuat di blog, lebih khusus dipostingan. Biasanya digunakan untuk membuat penasaran si pembaca dengan menyembunyikan terlebih dahulu. Untuk melihatnya dengan mengklik tombol spoiler itu. Selain itu juga untuk menghemat tempat, ya karena buka tutup itu (spoiler). Lalu bagaimana cara membuat spoiler di blog? Langsung simak yang berikut ini.

Cara Membuat Spoiler di Blog :

1. Login ke Blogger
2. Pilih New Post atau Entri Baru seperti membuat postingan biasa
3. Pilihlah pada mode Edit HTML saat membuat postingan
4. Gunakan kode script berikut ini untuk membuat spoiler: 

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;"><b>Judul Spoiler</b>: <input value="Buka" style="margin: 0px; padding: 0px; width: 55px; font-size: 12px;" 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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
Letakkan teks atau kode script (gambar atau video) di sini
 <br>
</div>
</div>
</div>

    5. Kita dapat mengganti Judul Spoiler sesuai kehendak kita, begitu juga Buka dan Tutup.
    6. Klik Publish atau Terbitkan Entri jika sudah selesai.

Contoh :

Cewek Mainin Burung:

follow @myogisaputra1 on twitter

Mungkin hanya ini yang dapat Saya sampaikan, semoga bermanfaat. Sekian dan Terimakasih