Yogie 56™

Senin, 18 Maret 2013

Cara Menuliskan Script/Kode Dalam Artikel Blog

Published : 09.09 Author : Unknown

Cara Menuliskan Script/Kode Dalam Artikel Blog - Untuk menuliskan script/kode kedalam artikel blog memang ada tekniknya sendiri, karena jika kita menuliskannya dengan cara yang biasa maka yang akan muncul kemudian di blog tidaklah seperti dengan apa yang kita tuliskan. Misalnya gini, jika kita menuliskan kode <head> dengan cara yang biasa maka hasilnya tidak akan muncul dalam postingan karena kode tersebut langsung diterjemahkan kedalam bahasa HTML. Jadi untuk menuliskan kode <head>, maka yang seharusnya dituliskan supaya bisa muncul kode tersebut adalah ini <head>. Nah terus bagaimana kalau ada banyak kode yang harus kita posting?
Mau tahu bagaimana caranya menuliskan kode2/script2 tersebut ke dalam blog?

Ada beberapa cara untuk menuliskan kode-kode tersebut kedalam blog, diantaranya yaitu:

Cara Pertama :
- Gunakan software-software web design, misalnya Macromedia Dreamwaver, Microsoft Frontpage, Namao Web Editor. Atau bisa juga dengan software-software blogtools seperti post2blog dll.
- Trus tuliskan semua kode pada area design, kemudian copy kode-kode tersebut dari area HTML Code. Nha kode-kode dalam area HTML Code tersebut lah yang harus diposting.

Cara Kedua :
- Tuliskan semua kode/script ke dalam notepad
- Kemudian ganti/replace kode-kode berikut

Kode	Kode Pengganti
<	<
>	>
"	"

- Udah tahu kan caranya mereplace di notepad? itu lho dengan memilih menu edit --> replace kemudian pada kotak yang muncul masukkan kode yg akan direplace pada kolom "Find what" trus masukkan kode pengantinya pada kolom "Replace with"trus tekan tombol Replace All.
- Nha kalo udah semua baru kamu copy semua kode yang udah direplace all tadi, trus kamu masukkan kedalam postingan kamu.

Cara Ketiga :
- Buka situs ini http://centricle.com/tools/html-entities, trus isikan kode-kode kamu kedalam kotak yang disediakan, nha kalo sudah tekan tombol "Encode", nha maka kamu akan mendapatkan script baru untuk diposting di blog kamu.

Selsai gampang kan ? Jika masih bingung berkomentar saja di bawah sini oke sob sekian dulu oke, Selamat Mencoba dan Semoga Berhasil :D

Read More ->>

Cara Menampilkan Recent Post (Postingan Terbaru)

Published : 08.55 Author : Unknown

Cara Menampilkan Recent Post (Postingan Terbaru) - Hay sob apa kabar nih, udah lama saya ga post lagi, skrng saya mulai post lagi nih sobat, ada yang ingin menampilkan recent post ( postingan terbaru ) anda sendiri di side bar ? jika ingin silahkan ikuti perintah2 yang di bawah sobat langsung aja yuk di simak :)

Cara untuk Menampilkan Recent Post (Postingan Terbaru) :

1. Login to Blogger kemuduan pilih "Layout"

2. Klik pada "Page Element" trus pilih "Add a Gadget --> HTML/Javascript" (Tempatnya terserah kamu).

3. Copy kode berikut ini dan taruh dalam kotak "content".

<script src="http://www.geocities.com/uddin_81/recent-post.js"></script>
<script>var numposts = 10; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script>
<script src="http://yogie-56.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script>

4. Ganti yogie-56 dengan nama blog kamu.

5. Angka "10" menunjukkan jumlah "Recent Post" yang ditampilkan, kamu bisa menggantinya

6. Terus Simpan.

NB : Coba sobat lihat apa yang terjadi,,,, jreng jreng ... pasti ada yang nongol :D, sekian dulu ya artikel Cara Menampilkan Recent Post (Postingan Terbaru) yang saya sampaikan, jika anda kurang mengerti silahkan berkomentar di bawah sini thanks..

Read More ->>

Cara Membuat Menu Tab View

Published : 08.44 Author : Unknown

Cara Membuat Menu Tab View - Tabview itu sangat berguna sekali, karena dengan ukuran kotak yang relatif kecil tapi bisa memuat isi yang buanyak. Sebenarnya dah dari dulu pingin posting tentang itu, tp karena yg dulu cara pasanganya sulit jadi belum bisa aku jelaskan. Trus akhirnya aku menemukan metode baru dalam pembuatannya. Cara yang ini mungkin mirip dengan punyanya o-om, tp scriptnya agak beda. Dan aku dapet script ini juga bukan dari o-om lho :D
Tab view itu contohnya seperti ini :

Beginilah cara untuk membuat menu tab view tersebut

1. Login ke blogger trus pilih menu "Layout --> Edit HTML"
2. Kemudian cari kode ini ]]></b:skin>
3. Kemudian masukkan kode berikut ini sebelum kode ]]></b:skin> atau kedalam tag CSS.

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

4. Perhatikan text-text yang berwarna merah, itu adalah keterangan untuk pengaturan Tab View. Ada ukuran warna dll.
5. Langkah selanjutnya yaitu pasang kode berikut ini sebelum kode </head>

<script src='http://kendhin.googlepages.com/tabview.js' type='text/javascript'/>

6. Kemudian "Di save"
7. Lalu pergi ke menu "Page Elements"
8. Trus PIlih "Add a Gadget" --> "HTML/Javascript" di tempat yg akan km letakkan Manu Tab View ini.
9. Inilah script yg harus kamu pasang :

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>

Keterangan :

- Angka2 atau text yang berwarna biru (350px) adalah ukuran tinggi dan lebar tabview.
- Kode yang berwarna Hijau Adalah text yang di Menu utama (Menu Atas).
- Kode yang berwarna merah adalah isi dari tabvie tsb. Kamu bisa mengisinya dengan link, gambar, banner, script dll.
- Untuk menambahkan jumlah menu maka perhatikanlah text yang berkedip-berkedip. tambahkan menu tersebut dibawahnya.

Read More ->>

Jumat, 15 Maret 2013

Cara Membuat Like Fanspage Facebook + Follow Twitter Melayang di Blog ( Like Box )

Published : 15.11 Author : Unknown

Cara Membuat Like Fanspage Facebook + Follow Twitter Melayang di Blog ( Like Box ) - Like Box Melayang Di Blog Ini Dilengkapi Dengan Follow Twitter Juga Jadi Gak Usah Ribet Nambahin Script Lainnya Berikut Caranya.

1. Dasboard Blogger lo > Tata Letak > Tambah Gadget
2. Pilih HTML Javascript Lalu Masukan Kode Berikut Ini

Yang Berwarna Merah Ganti Sesuka lo
Yang Berwarna Hijau Ganti Dengan URL Fanspage Facebook lo
Yang Berwarna Ungu Ganti Dengan nama twitter lo
3. Lalu Simpan Dan lihat Hasilnya

Segitu Saja Cara Membuat Like Fanspage Facebook + Follow Twitter Melayang di Blog ( Like Box ) , Kalau Kurang jelas silangkan berkomentar yang baik Terima Kasih.
Semoga Bermanfaat

Read More ->>

Kamis, 14 Maret 2013

Menampilkan Recent Comments (Komentar Terbaru)

Published : 09.38 Author : Unknown

Menampilkan recent comments atau komentar terbaru fungsinya adalah supaya kita bisa dengan mudah mengetahui siapa yang baru saja memberikan komentar pada blog kita dan di postingan mana mereka berkomentar. Recent Comments ini bisa kita pasang di halaman utama blog kita.
Beginilah cara membuat Recent Comments (Komentar Terbaru):

1. Login ke blogger lalu pilih menu "Layout"
2. Kemudian copy script berikut ini :

<script style="text/javascript" src="http://superinhost.com/blog/comments.js"></script>
<script style="text/javascript">
var numcomments = 8;
var showcommentdate = true;
var showposttitle = true;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://yogie-56.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

- Angka 8 merupakan jumlah komentar yang mau ditampilkan.
- Ganti yogie-56.blogspot.com dengan nama blogmu.

3. Untuk menampilkanya di sidebar maka pilih "Add a Gadget --> HTML/Javascript" Lalu masukkan script diatas kedalam kotak yg disediakan.

Coba dilihat blogmu, langsung jadi deh. Oh ya recent comments ini bisa juga dipasang didalam "Tab View" Klik Tab View jika ingin cara membuat Tab View

Oke sob sekian dulu artikel Menampilkan Recent Comments (Komentar Terbaru) yang saya sampaikan, Semogaa Bermanfaat ^_^, Jangan lupa tinggalkan jejak ya sob :)

Read More ->>

Highlight Author Comment

Published : 08.56 Author : Unknown

Highlight Author Comment fungsinya adalah supaya komentar author (pemilik blog) berbeda dengan komentar orang lain . Untuk komentar pemilik blog akan ada bordernya dan ada efek lainnya. Nha berikut ini akan aku beberkan cara untuk membuat Highlight Author Comment ini. Dah siap semuanya ? OK Lansung aja Ke TKP :)

1. Login ke blogger trus ke menu "Layout --> Edit HTML"
2. Beri tanda centang pada kotak "Expand Widget Templates"
3. Copy script berikut ini sebelum kode ]]></b:skin> atau copy ke dalam kode CSS.

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

4. Kemudian cari kode2 seperti berikut. Mungkin kode yg ada di HTML kamu akan beda, tp walaupun beda usahakan semirip mungkin dengan kode berikut ini :

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
said...
</dt>

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

</b:if>

<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

5. Kode yang berwarna merah adalah kode yang harus kamu tambahkan di HTML kamu. Posisinya harus benar, ingat itu.

6. Kalo sudah terus disave template kamu.

NB : Comment author ini berdasarkan profil dari pemilik blog tsb. Jadi supaya efeknya muncul sebelum memberi komentar kamu harus login dulu di blogger. OK.
Oh ya ini bukan untuk komentar dari haloscan lho. Tapi hanya untuk kotak komentar yg dari blogger murni

Oke sob itu saja trik untuk Highlight Author Comment yang saya bisa sampaikan, Jangan lupa ya sob tinggalkan jejak nya :)

Read More ->>

Rabu, 13 Maret 2013

Cara Memasang Emoticon di Kotak Komentar

Published : 10.52 Author : Unknown

Cara Memasang Emoticon di Kotak Komentar - Dengan adanya emoticon di kotak komentar tentunya akan membuat blog menjadi lebih hidup. Para komentator menjadi lebih bisa mengekspresikan perasaannya melalui icon2 (emoticon). Kalau di wordpress mungkin feature ini sudah tersedia. Tapi untuk blogspot kita harus mengotak-atik dan mengakalinya supaya bisa menampilkan emoticon di area komentar. Gimana? kamu mau memasang emoticon ini?

Seperti biasanya, di trik ini akan diberikan dua macam emoticon, yaitu emoticon kucing (seperti punyaku ini) dan emoticon yahoo. Kamu tinggal pilih mana yang kamu suka.

Emoticon Yahoo :
:)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} ~x( :-t b-( :-L x( =))

Emoticon Kucing :
:f :D :) ;;) :x :$ x( :? :@ :~ :| :)) :( :s :(( :o
Gini nih cara membuatnya :

1. Pertama login ke blogger, trus ke "Layout (Tataletak) --> Edit HTML "
2. Beri tanda centang pada kotak "expand widget template"
3. Lalu letakkan script berikut sebelum kode </body>

Untuk Emoticon Yahoo :

<script src='http://kendhin.890m.com/emoticon/smile1.js' type='text/javascript'/>

Untuk Emoticon Kucing :

<script src='http://kendhin.890m.com/emoticon/smile2.js' type='text/javascript'/>

4. Kemudian cari kode berikut ini :

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>

5. Kalo sudah ketemu letakkan kode2 berikut setelah kode <p class='comment-footer'>

Ini untuk Yahoo emoticon:

<b><img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/> :))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/> :)]
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'/> ;))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/> ;;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/> :D
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/> ;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/> :p
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/> :((
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/> :)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/> :(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/> :X
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/> =((
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/> :-o
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/> :-/
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/> :-*
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/> :|
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/> 8-}
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/> ~x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/> :-t
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif'/> b-(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif'/> :-L
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/> x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/> =))
</b>

Kalo mo yang emoticon kucing pake yang ini :

<b><img border='0' src='http://i654.photobucket.com/albums/uu264/mastegar/kucing%20gif/capek.gif'/> :f
<img border='0' src='http://i654.photobucket.com/albums/uu264/mastegar/kucing%20gif/bigsmile.gif'/> :D
<img border='0' src='http://i654.photobucket.com/albums/uu264/mastegar/kucing%20gif/hi.gif'/> :)
<img border='0' src='http://i654.photobucket.com/albums/uu264/mastegar/kucing%20gif/kagum.gif'/> ;;)
<img border='0' src='http://i654.photobucket.com/albums/uu264/mastegar/kucing%20gif/love.gif'/> :x
<img border='0' src='http://i654.photobucket.com/albums/uu264/mastegar/kucing%20gif/malu.gif'/> :$
<img border='0' src='http://i654.photobucket.com/albums/uu264/mastegar/kucing%20gif/marah.gif'/> x(
<img border='0' src='http://i654.photobucket.com/albums/uu264/mastegar/kucing%20gif/bingung.gif'/> :?
<img border='0' src='http://i654.photobucket.com/albums/uu264/mastegar/kucing%20gif/mumet.gif'/> :@
<img border='0' src='http://i654.photobucket.com/albums/uu264/mastegar/kucing%20gif/muntah.gif'/> :~
<img border='0' src='http://i654.photobucket.com/albums/uu264/mastegar/kucing%20gif/mentok.gif'/> :|
<img border='0' src='http://i654.photobucket.com/albums/uu264/mastegar/kucing%20gif/ngakak.gif'/> :))
<img border='0' src='http://i654.photobucket.com/albums/uu264/mastegar/kucing%20gif/sedih.gif'/> :(
<img border='0' src='http://i654.photobucket.com/albums/uu264/mastegar/kucing%20gif/senang.gif'/> :s
<img border='0' src='http://i654.photobucket.com/albums/uu264/mastegar/kucing%20gif/tolong.gif'/> :((
<img border='0' src='http://i654.photobucket.com/albums/uu264/mastegar/kucing%20gif/wow.gif'/> :o
</b>

6. Kalo sudah trus di "save" dan coba lihat hasilnya

Tambahan
* Kadang-kadang ada beberapa template memiliki kode yang beda. Kalau caranya sudah dilaksanakan dengan benar tapi hasilnya tidak terjadi apa2 atau kodenya tidak berubah menjadi emoticon, kemungkinan itu karena Kode untuk templatenya berbeda atau bisa juga karena mungkin hosting untuk menaruh file emoticon dan javascriptnya sedang bermasalah.

Oke sob selamat mencoba, Jangan lupa tinggalkan jejak ya sob :)

Read More ->>

Cara Membuat Contact Form Blog

Published : 10.31 Author : Unknown

Membuat contact form dengan cepat, dengan hanya beberapa detik saja contact form Anda sudah jadi.
Layanan ini gratis dan terintegrasi anti spam.
Bagi Anda yang ingin berkominikasi dengan pengunjung blog mungkin secara privasi bisa membuatnya dan memasang contact form ini pada blog Anda.
Jika Anda membuat toko online contact form akan menjadi sangat penting kegunaannya.
Untuk yang ingin memasang contact form pada blog, bisa membuatnya melalui situs layanan ini dengan cara yang cukup mudah.
Caranya:

1. Buka halaman http://www.foxyform.com/

2. Dari halaman tersebut Anda akan melihat tampilan contact form yang akan Anda buat.

3. Lakukan setting untuk tampilan contact form menurut selera.

4. Anda bisa merubah tulisan dan warna untuk tampilan contact form tersebut.

5. Setelah itu masukkan Email Anda.

6. Kemuadian pilih Create Formular.

7. Maka akan terbuka halaman baru yang terdapat kode html yang harus Anda masukkan ke halaman blog Anda.

8. Selanjutnya copy code yang diberikan.

Setelah menyalin kodenya, login ke blog Anda untuk memposting code tersebut.

Sebaiknya Anda membuat halaman statis untuk meletakkan contact form ini.
Cara membuat halaman statis bisa Anda lihat di sini. Beri judul contact atau contact me dan letakkan pada tempat yang mudah dilihat oleh pengunjung.

Dan selamat contact form Anda sudah jadi. Semoga Bermanfaat, Jangan Lupa Tinggalkan Jejak sob.. :)

Read More ->>

CARA MEMBUAT HALAMAN STATIS DI BLOGSPOT

Published : 10.18 Author : Unknown

Halaman statis adalah halaman yang berdiri sendiri yang tidak akan mempengaruhi halaman dinamis. Berbeda dengan halaman dinamis yang mana ketika Anda posting akan menggeser halaman sebelumnya.
Halaman statis ini tidak akan muncul pada halaman muka ketika Anda posting artikel baru. Yang artinya ini tidak akan menggantikan halaman posting awal.
Halaman statis biasa di gunakan untuk membuat halaman about me, halaman contact
atau halaman yang memang dibuat khusus.
Untuk memudahkan penggunanya, blogger telah menyediakan fitur ini.Bila Anda ingin mencoba bagaimana cara membuat halaman statis pada blogspot, untuk membuatnya Anda bisa ikuti cara di bawah ini.

Login ke blog Anda
Pilih blog yang ingin Anda buat halaman statis
Kemudian pilih pages.
Dan selanjutnya pilih blank page, seperti yang terlihat pada gambar di bawah.
setelah Anda pilih blank page, maka Anda akan diarahkan pada halaman posting artikel, seperti yang terlihat pada gambar.
Beri judul, misal contact atau about.
Masukkan artikel Anda, kemudian publis.
Setelah Anda publish, maka secara otomatis Anda akan dibawa lagi pada halaman pages, seperti gambar di bawah.
Ambil linknya pada view, bisa dengan cara langsung dibuka atau klik kanan kemudian copy link location.
Maka kurang lebih Anda akan mendapatkan link seperti ini:
http://www.yogie-56.blogspot.com/p/contact-me.html
Letakkan linknya pada menu yang Anda kehendaki, bisa pada sedebar atau pada
menu navigasi horizontal.