Showing posts with label blog. Show all posts
Showing posts with label blog. Show all posts

Cara Memasang Meta Tag pada Blog

Saturday, March 10, 2012

Cara Memasang Meta Tag Pada Blog itu resep Master Chep Dapur Tutorial Blogspot Kali ini. Kira-kira Meta Tag itu apa dan untuk apa manfaatnya bagi blog.?.

Meta Tag itu adalah elemen atau tag dalam bahasa program HTML atau XHTML  yang digunakan untuk mengaplikasikan meta data dalam suatu web atau Weblog.

Sedangkam Fungsinya untuk mendeskripsikan atau memberikan pernjelasan mengenai web atau weblog kita kepada search engine.

Terus bagaimana pengaruh meta tag terhadap SEO ?. Banyak orang yang mengatakan Meta tag sangat penting untuk SEO dan banyak pula yang mengatakan tidak terlalu penting. Apabila dari sudut pandang Dapur Tutorial Blogspot Sendiri Meta Tag  pada blog sangat penting karena dengan kita memasang Meta Tag pada Blog berarti kita sudah membantu Search engine untuk mengenal blog yang kita miliki.

Seperti Pepatah Mengatakan "Jika tak kenal maka tak sayang". Artinya jika search egine sudah mengenal blog yang anda miliki ada kemungkinan search engine akan menyangi blog sobat.

Meta tag yang dipasang pada blog sangat beragam jenisnya dan yang akan Dapur Tutorial Blogspot Sampaikan Kali ini adalah salah Satu meta Tag Yang Dapur Tutorial Blogspot Anggap sebagai Meta Tag yang Lumayan baik.

Berikut Langkah-langkah untuk Pasang Meta Tag Pada Blog.
  1. Silahkan Anda login Ke Akun Blogger sobat
  2. Pilih Menu Template


  3. Klik Pada Tobol Edit HTML


  4. Klik tombol Proses Atau Lanjutkan


  5. Anda akan menjumpai area edit HTML seperti gambar dibawah


  6. Sekarang Cari Kode <title><data:blog.pageTitle/></title> (Gunakan tomblo CTRL + F Atau F3 untuk memudahkan pencarian Kode)
  7. Sudah Ketemu hapus kode tersebut dan ganti dengan Kode Dibawah ini :
  8. <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <title><data:blog.title/> | Deskripsi Singkat Blog</title>
    <meta content='deskripsi tentang blog anda' name='description'/>
    <meta content='kata kunci, kata kucni,' name='keywords'/>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
    <title><data:blog.title/> | Deskripsi Singkat Blog</title>
    <meta content='deskripsi tentang blog anda' name='description'/>
    <meta content='kata kunci, kata kucni,' name='keywords'/>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <title><data:blog.pageName/> | <data:blog.title/></title>
    <meta expr:content='&quot;Download &quot; + data:blog.pageName + &quot;. deskripsi tentang blog anda&quot;' name='description'/>
    <meta expr:content='data:blog.pageName + &quot;, kata kunci, kata kucni, kata,&quot;' name='keywords'/>
    <b:else/>
    <title><data:blog.pageTitle/></title>
    </b:if>
    </b:if>
    </b:if>
    <meta expr:content='data:blog.title' name='author'/>
    <meta content='index, follow' name='robots'/>
    <meta content='2 days' name='revisit-after'/>
    <meta content='id' name='language'/>
    <meta content='id' name='geo.country'/>
    <meta content='Indonesia' name='geo.placename'/>
    <meta content='global' name='distribution'/>
    <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
    <meta content='true' name='MSSmartTagsPreventParsing'/>
    <meta content='blogger' name='generator'/>
    <meta content='general' name='rating'/>
    Keterangan :
    1. Deskripsi Singkat Blog Isi dengan deskripsi singkat mengenai blog anda misalnya Free Download Software
    2. deskripsi tentang blog anda Cerikakan latar blakang blog anda contoh "Blog yang berisi kumpulan-kumpulan software gratis"
    3. kata kunci, kata kucni Isi dengan kata-kata kunci ( pisahkan dengan koma "," ) contoh. "Free download, Software gratis, kumpulan Software,computer"
  9. Terakhir Klik Simpan 
  10. Selesai
Demikian Resep Tutorial Master Chep Dapur Tutorial Blogspot tetang cara pasang meta tag pada blogspot atau blogger semoga bisa bermanfaat.

Cara letak scroll bar pada label HTML

Tuesday, March 6, 2012





kali ini pada sore ini uphik ajjha akan share cara membuat scroll bar pada label simple ko' caranya :)
langsung aja ya :)
1.Masuk rancangan
2.Edit HTML
3.Centang Expand Template Widget
4.Lalu cari kode di bawah ini dengan cara klik f3





<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>





Kalau Sudah ketemu code di atas
Ganti dengan coda yang ada di bawah ini
||
||




<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;' style='height:300px;overflow:auto;'>





Kamu boleh ganti 300 dengan semaumu oke

Sekian postingan saya terimakasih sudah visit blog saya
ingat bila copas sertakan sumebrnya :)

Cara Membuat Atau Memasang Widget Social Bookmark Melayang Di Blog

Monday, March 5, 2012

Memasang Widget Social Bookmark , ya itulah tema Master Chip Dapur Tutorial Blogspot Kali ini.Sebelumnya apakah sobat sudah tau apa yang dimaksut dengan Social Bookmark ? Buat para Master pastinya bukan hal yang baru lagi mengenai ini. Buat para pemula tenang saja sebelum kita bahas cara memasang Social Bookmark,  Master Chip Dapur Tutorial Blogspot akan jelaskan sekilas apa yang dimaksut dengan Social Bookmark dan Manfaatnya.


Social Bookmark itu adalah Situs-situs yang menyediakan jasa untuk anda menyimpan alamat-alamt URL serta Deskripsi secara singkat untuk para Usernya.Adabanyak situs Social Bookmark saat ini anda bisa temukannya dengan mudah di goodang bah google dengan kanta kunci "Daftar Situs Social Bookmark"

Terus Apa manfaatnya ?. Tentu banyak sekali manfaat yang bisa diperoleh dari situs Social Bookmark bebebrapa diantaranya yaitu :
  1. Anda dapat Submit artikel blog anda dan
  2. Artikel anda akan menjadi cepat terindext oleh Search Engine
  3. Memperbaiki Serp (Search Engine Result Pages )
  4. Memperoleh Backlink
  5. Meningkatkan Page Rank
Nah Sekarang Sudah pahamkan apa itu Social Bookmark dan manfaatnya untuk Blog sobat. Sekarang kita akan pelajari bgaimana caranya untuk Membuat Widget Social Bookmak Melayang Disisi halaman Blog
  1. Login terlebih dahulu menggunakan akun blogger anda
  2. Pilih Menu Template

  3. >
  4. Klik Pada Tombol Edit HTML


  5. Klik Tombol Proceed atau Tombol Lanjutkan  kemudian akan muncul halaman Edit HTML seperti berikut


  6. Sekarang silahkan anda Download lengkap template anda untuk mengantisifasi kesalahan Saat anda melakukan Edit HTML.(Baca Caranya DISINI )
  7. Cari Kode ]]></b:skin> (Gunakan Tombol CTRL + F Atau F3 untuk memudahkan pencarian)
  8. Setelah kode ditemukan Copas Kode dibawah dan letakan di atas kode ]]></b:skin>
  9. /* Social bookmark
    ----------------------------------------------- */
    #divStayTopLeft {left:5px;position:fixed;top:15px;}
    .sidetab {}
    .sidetab ul {list-style-type: none;margin: 0;margin-top: 220px;margin-left: -2px;padding: 0;}
    .sidetab ul li {border-bottom: 0;margin-bottom: 0;padding: 0;}
    .sidetab a {background: none;display: block;height: 25px;margin-top: 0px;padding: 2px;width: 25px;}
    .sidetab a:link, .navlist a:visited {color: #555;text-decoration: none;}
    .sidetab a:hover {border: none;background: #e8e8e8;}
    .sidetab .button a {background:none;height: 25px; width: 25px;}
  10. Sekarang Cari Kode </body> Setelah ketemu copas kode dibawah dan letakan diatas kode </body> tersebut
  11. <div id='divStayTopLeft'>
    <div class='sidetab'>
    <ul class='navlist'>
    <li class='button'><a href='http://dapur-tutorial.blogspot.com/feeds/posts/default'><img height='25' src='http://upic.me/i/ci/rss_48.png' title='Subscribe to RSS feed' width='25'/></a></li>
    <a class='addthis_button_facebook'><img alt='Facebook' height='25' src='http://upic.me/i/8n/facebook_32.png' width='25'/></a>
    <a class='addthis_button_delicious'><img alt='Delicious' height='25' src='http://upic.me/i/k6/delicious.png' width='25'/></a>
    <a class='addthis_button_email'><img alt='Email' height='25' src='http://upic.me/i/bo/emailsmall.jpg' width='25'/></a>
    <a class='addthis_button_favorites'><img alt='Favorites' height='25' src='http://upic.me/i/ij/favorites.png' width='25'/></a>
    <a class='addthis_button_twitter'><img alt='Twitter' height='25' src='http://upic.me/i/bx/twitter_32.png' width='25'/></a>
    <a class='addthis_button_google'><img alt='Google' height='25' src='http://upic.me/i/fm/gsmall.jpg' width='25'/></a>
    <a class='addthis_button_digg'><img alt='Digg' height='25' src='http://upic.me/i/0v/mdigg.png' width='25'/></a>
    <a class='addthis_button_more'><img alt='More' height='25' src='http://upic.me/i/5e/wmore.png' width='25'/></a>
    </ul>
    </div>
    </div>
    <script src='http://s7.addthis.com/js/250/addthis_widget.js?pub=xa-4a65e1d93cd75e94' type='text/javascript'/>
    <script src='http://hackublog.googlecode.com/files/FloatingMenu.js' type='text/javascript'/>
  12. kemudian cari lagi kode ]]></b:skin> dan copy kode dibawah dan paste di bawahnya kode ]]></b:skin>
  13. <script src='http://jamu-martin.googlecode.com/files/related-maskolis.js' type='text/javascript'/>
  14. Klik Simpan Template 


  15. Selesai dan lihat Hasilnya
Demikian Resep Dapur Tutorial Blogspot Tetang Cara Membuat Atau Memasang Widget Social Bookmark Melayang Di Blog salamat mencoba semoga bermanfaat

Cara Atau Teknik Membuat Navbar Blog Menjadi Auto Hidden

Slamat datang kembali di dapur. Sekarang Master Chip Dapur Tutorial Blogspot akan menyapaikan resep sederhana yaitu resep tetang Cara Membuat Navbar Menjadi Auto Hide. Seperti yang kita lihat pada blog anda sekarang blogger standar pada umumnya memiliki navbar atau Navigasi bar diatas header blog seperti pada gambar berikut (Perhatikan bagian yang ditunjuk anak panah):


Navbar tersebut akan kita atur menjadi Autohidden. Yang saya maksut dengan Navbar Auto Hiden. Navbar akan tersembunyi dan ketika mouse anda berada diatas  navbar maka navbar tersebut akan mucul.

Berikut langkah-langkah untuk membuat navbar menjadi Auto Hidden:
  1. Masuk ke akun Blogger anda
  2. Pilih Menu Template


  3. Klik pada Tombol Edit HTML


  4. Klik Tombol Proceed atau Tombol Lanjutkan  kemudian akan muncul halaman Edit HTML seperti berikut


  5. Sekarang silahkan anda Download lengkap template anda untuk mengantisifasi kesalahan Saat anda melakukan Edit HTML.(Baca Caranya DISINI )
  6. Cari Kode body { (Gunkan Tombol CTRL+F dan F3 untuk mempermudahkan mencari kode)
  7. Sudah ketemu Copas kode dibawah dan letakan diatas kode body {
  8. #navbar-iframe{opacity:0.0;filter:alpha(opacity=0)} #navbar-iframe:hover {opacity:1.0;filter:alpha(opacity=100,finishedOpacity=100)} 
  9. Terakhir klik Klik Tombol Simpan Template


  10. Selesai....!
Demikian Resep Kali ini tetang Cara Atau Teknik Membuat Navbar Blog Menjadi Auto Hidden semoga bisa bermanfaat dan selamat untuk mencoba.

Cara Menambahkan / Mengaktifkan Reply pada Komentar Blogger

Saturday, March 3, 2012

100% Works! Membuat Komentar di Blogger dengan Fasilitas Reply (Balas)

Hi guys,ketemu lagi kita ya,sebelum memenuhi janji beberapa hari lalu untuk posting bagaimana cara mendaftar google adsense secara lengkap,tidak ada salahnya khan sob kami mempublikasikan tentang tips dan trik bagaimana cara merubah / mengubah ataupun mengganti kotak komentar di blogger agar memiliki fitur reply / balasan.

Warning!!! alangkah baiknya backup terlebih dahulu template sobat,karena bisa saja template sobat ada yang berubah,misal jika sobat telah membuat read more otomatis maka setelah melakukan trik ini script read more otomatis tersebut sudah tak bekerja lagi karena template sobat nanti akan kembali ke default,kendati seperti itu widget yang ada tidak akan hilang atau berubah.Baca artikelnya ya gan,meskipun tulisan orang ganteng satu ini memang ga begitu menarik tapi memukau (halah!!!),soalnya jika sobat loncat ke permasalahan tanpa memperhatikan langkahnya,cara ini bisa gagal lho :D so,keep watching ya (sok bule bgt @#$%)

Bentuk fisiknya seperti apa sih? yup! sobat dapat lihat gambar di bawah ini (yang kami beri tanda lingkaran):


Cara Membuat Komentar di Blogger dengan Fasilitas Reply

Pernah juga kami mempublikasikan membuat fitur reply ini dengan pihak ketiga dan kami rasa itu terlalu ribet dan melibatkan sebuah frame yang nantinya akan merugikan blog yang kita milliki.

Secara default untuk template tertentu bawaan blogger,sebenarnya fitur reply komentar yang akan kita bahas ini sudah aktif dan dapat langsung digunakan tanpa kita harus memvermak template.
Kendati seperti itu,bagi agan-agan yang menggunakan template dari hasil convert atau mungkin template bawaan blogger namun belum memiliki fasilitas / sarana reply (balasan) seperti pada gambar di atas bisa mencoba trik sederhana berikut ini.

Note**Jikalaupun tips trik reply blogger comments dibawah ini nantinya berhasil sobat buat,mengapa fitur reply tersebut tidak ada fitur Delete-nya? betul gan,sebagai catatan yang perlu sobat ketahui juga,fitur Delete ini hanya akan tampak saat sobat login dengan akun blog milik sobat sendiri dan hanya sobatlah yang dapat menghapus dari comment2 spam dari pengunjung yang dirasa akan merugikan blog yang kita kelola,sedangkan fasilitas reply-nya sendiri dapat dilihat oleh semua orang / pengunjung.

Pelajaran Blog - nah,bagaimana kita meng-aktif-kan fitur reply comment for blogger ini,ikuti langkah berikut ya sob:

Cara Mengaktifkan Reply (Jawaban) di Kotak Comment Blogspot

Pertama,'pastikan terlebih dahulu':
***1.Sobat aktifkan komentar dengan cara pilih Dashboard > Setting / Pengaturan > Comments > check list Show pada comment (lihat gb.1) > check list juga Embed di bawah posting (lihat gb.2)

Reply Komentar Blogger
gb.1


Membuat Balasan di Komentar Blogger
gb.2


***2.Aktifkan komentar di area posting dengan cara pergi ke Dashboard > Tata Letak > klik Edit (lihat gb.3) dan contreng Comment (lihat gb.4)


Reply Comments for Blogger Comment Box
gb.3


Script Reply Comment Code
gb.4


***3.Beri izin akses untuk pengunjung memberi komentarnya di setiap posting milik sobat,ini dapat dilakukan dengan cara check list 'Allow' atau 'Izinkan' di bawah ruang posting sobat (lihat gb.5)

kode Reply Comment Code
gb.5

Setelah beberapa hal diatas sobat telah lakukan,kini saatnya untuk 'merubah kotak komentar blogger agar memiliki akses balasan / jawaban / reply dari komentar-komentar yang telah ada.

#1.Pergi ke Dashboard > Tata Letak (lihat gb.6) > Edit HTML (lihat gb.7) > Contreng check box Expand Widget Templates (lihat gb.8)

Widget Menjawab Komentar Blogspot
(gb.6)


Balas Hapus Replies.
gb.7)


How To Add Reply into Blogger Comment Box.
gb.8


Setelah itu klik link tulisan 'Revert widget templates to default' yang letaknya persis dibawah edit html,(lihat gb.9) dan setelah itu jika ada popup notif untuk menyetujuinya klik saja 'Ok (lihat gb.9)



How To Create Reply into Blogger Comment Box?
gb.8


Cara Membuat Numbered Nomor Reply Komentar Box dengan Php
gb.9

Simpan dan lihat komentar di posting milik sobat,jika belum ada komentar,buatlah satu komen untuk mengetes dari hasil eksperiment repli komentar sederhana ini.Moga berhasil dan bermanfaat ya gan,see you :D

Cara Membuat Scroll Box

Friday, March 2, 2012


Scroll Box Border Solid :
<div style="overflow:auto; width:100%px; height:200px; padding:10px; border:1px solid #DA2400;">

 Isi Text Disini «» Uphik Ajjha Blogs

</div>
 Scroll Box Border Double :
<div style="overflow:auto; width:100%px; height:200px; padding:10px; border:1px double #DA2400;">

 Isi Text Disini «» Uphik Ajjha Blogs

</div>
Scroll Box Border Inset :
<div style="overflow:auto; width:100%px; height:200px; padding:10px; border:1px inset #DA2400;">

 Isi Text Disini «» Uphik Ajjha Blogs

</div>
Scroll Box Border Outset :
<div style="overflow:auto; width:100%px; height:200px; padding:10px; border:1px outset #DA2400;">

 Isi Text Disini «» Uphik Ajjha Blogs

</div>

Scroll Box Border Dotted dan Dashed :


Dotted »

<div style="overflow:auto; width:100%px; height:200px; padding:10px; border:1px dotted #DA2400;">

 Isi Text Disini «» Uphik Ajjha Blogs

</div>
Dashed »
<div style="overflow:auto; width:100%px; height:200px; padding:10px; border:1px dashed #DA2400;">

 Isi Text Disini «» Uphik Ajjha Blogs

</div>

tolong sertakan sumber bila copas :)

sumber

Cara Membuat Pencarian Multi Search Box (Kotak Pencarian Ganda)

Wednesday, February 29, 2012

Bismillah - Pernahkah sobat menemui sebuah kotak pencarian di blog namun bukan saja dihias dengan background agar lebih cantik tetapi juga kotak pencarian (search box) ini memiliki multi fungsi.
Kira-kira widget search box multi ini akan tampak seperti gambar dibawah ini:


Atau bentuk fisiknya sobat bisa lihat di SINI

Langkah Membuat Kotak Pencarian Multiple Manual

Pertama,pergi ke Dashboard lalu pilih Tata Letak / Rancangan / Design [1] lalu pilih Add a Gadget [2] kemudian pilihlah Html/Javascript [3],lihat gambar:


Pelajaran Blog - wow! luar biasa gan,emang pelajaran blog tiada duanya deh soal tips-tips ngeblog,semangat bro! thx
[1]


Cara Membuat Search Box Double Ganda atau Kotak Pencari di Blog
[2]


memasang search box dua pilihan keren
[3]


Dan letakkan kode berikut disana:
<script type="text/javascript">
<!--
function qsearch_onSubmit()
{
qs_enginename = document.getElementById('qsearch_select').value;
qs_keywords = document.getElementById('searchfield').value;
switch( qs_enginename )
{
case 'mrpujiajadeh':
window.open('http://pelajaran-blog.blogspot.com/search?q=' + qs_keywords, '_self', '');
return false;
case 'wikipedia':
window.open('http://en.wikipedia.org/wiki/Spezial:Search?search=' + qs_keywords, '_wikipedia', '');
return false;
case 'google':
window.open('http://www.google.com/search?q=' + qs_keywords, '_google', '');
return false;
case 'yahoo':
window.open('http://search.yahoo.com/search?p=' + qs_keywords, '_yahoo', '');
return false;
case 'msnlive':
window.open('http://search.live.com/results.aspx?q=' + qs_keywords, '_msnlive', '');
return false;
case 'altavista':
window.open('http://www.altavista.com/web/results?itag=ody&q=' + qs_keywords + '&kgs=0&kls=0', '_altavista', '');
return false;
case 'lycos':
window.open('http://search.lycos.com/?query=' + qs_keywords, '_lycos', '');
return false;
case 'odp':
window.open('http://search.dmoz.org/cgi-bin/search?search=' + qs_keywords, '_odp', '');
return false;
default:
if( (i = qsearch_findEngine(qs_enginename)) >= 0 )
{
window.open(qsearch_engines[i].url + qs_keywords, '_blank', '');
return false;
}
break;
}
return true;
}
//-->
</script>
<table border="1" cellspacing="1" width="300">
<tr>
<th><span style="float: left"><img src="http://1.bp.blogspot.com/_n7xseT2-HDU/Saz6WSR1ptI/AAAAAAAAANY/QA1vxRormlY/s200/Loggo-pelajaran-Blog.gif" width="16px" height="16px" alt="" />&nbsp;Search</span></th>
</tr>
<tr class="row1">
<td>
<form id="qsearch_form" method="post" action="/search" onsubmit="return qsearch_onSubmit();">
<input type="text" tabindex="6" name="keywords" id="searchfield" size="22" maxlength="40" title="Search for keywords" value="Search" onclick="if(this.value=='Search')this.value='';" onblur="if(this.value=='')this.value='Search';" />
<select id="qsearch_select" tabindex="8">
<optgroup label="Blog">
<option value="mrpujiajadeh" style="background-color: #EEEEEE;">Pelajaran Blog</option>
</optgroup>
<optgroup label="Search engines">
<option value="wikipedia" style="background-color: #FEF2D6;">Wikipedia</option>
<option value="google" style="background-color: #FEF2D6;">Google</option>
<option value="yahoo" style="background-color: #FEF2D6;">Yahoo</option>
<option value="msnlive" style="background-color: #FEF2D6;">MSNlive</option>
<option value="altavista" style="background-color: #FEF2D6;">Altavista</option>
<option value="lycos" style="background-color: #FEF2D6;">Lycos</option>
<option value="odp" style="background-color: #FEF2D6;">Open directory</option>
</optgroup>
</select>
<!-- &nbsp; -->
<input type="hidden" name="search_fields" value="all" />
<input type="submit" value="Cari" tabindex="8" />
</form>
</td>
</tr>
</table>


Kemudian simpan dan lihat hasilnya,sekarang sobat sudah memiliki kotak pencarian dengan menu dropdown sebagai multi pilihan,oy gan,kode yang bercetak tebal ubah aja sesuai dengan keinginan dan nama blog sobat ya.
Moga bermanfaat :D

Cara Memasang / Meletakkan Twitter Widget di Blog

Tuesday, February 28, 2012

Bagaimana Menempatkan Widget Twitter di Blogger?

Bismillah,menampilkan status twitter di blog,bagi agan-agan yang berminat menampilkannya baik untuk keperluan bisnis online maupun hanya sekedar 'narsis',bisa ikuti langkahnya sebagai berikut:

Pertama,sobat kunjungi https://twitter.com/about/resources/widgets,lihat gambar:

Cara Memasang Widget Twitter di Blog


Selanjutnya,klik My Website,lihat gambar:

Cara memasang widget twitter blogspot


Selanjutnya sobat klik Profil Widget,nanti akan keluar jendela seperti berikut,dan isilah form dengan nama username dari username twitter yang akan ditampilkan statusnya,misal akun twitter saya sendiri mrpujiajadeh,promo nih,hihihihi:

Pasang Widget Share Fb & Twitter Melayang


Nah,untuk mengatur warna background,jenis text dan warna link dari widget twitter ini,sobat klik tab Appearance,lihat gambar:

pasang widget twitter


Setelah itu sobat klik tombol Finish & Grab Code,lihat gambar:

Cara Pasang Follow me Twitter Di Blog


Dan kini sobat sudah mendapat kode script html yang nantinya kita akan pasang di blog :D,lihat gambar:

Cara Mudah Membuat Tombol Follow Twitter di Blogger blogspot


Bagaimana Menempatkan Kode Script Twitter Widget di Blog?


Pergi ke Dashboard > Tata Letak > Add New Gadget / Tambah Widget > HTML/Javascript

widget twitter.


memasang ftwitter button status.


Setelah itu letakkan kode yang berhasil sobat copy tadi pada widget HTML/Javascript tersebut,dan simpan.

ADmimsy.Com - Cara Bisnis Dapat Dollar dari PTC bukan SCAM!

Tuesday, February 21, 2012

Dalam posting kali ini penulis mencoba untuk memberikan sebuah referensi sebuah situs PTC untuk optimasi blog yang sobat miliki.
Adalah ADmimsy.Com salah satu situs pendulang dollar terpercaya dan terbukti bukan scam.Meskipun banyak blogger yang mencoba dan gagal dalam PO (PAY OUT) tidak harus kita LANGSUNG cepat menyimpulkan situs tersebut scam atau bukan.Perlu sobat lihat kembali apakah kita sudah sesuai dengan aturan main dan tidak melanggar T.O.S atau sebaliknya.

Berikut adalah cara mendapatkan dollar dari ADmimsy.Com:

ADmimsy.Com - Cara Bisnis Dapat Dollar dari PTC bukan SCAM! - Pertama,sobat harus daftar dahulu di ADmimsy.Com
Setelah sobat berhasil mendaftar,sobat akan diberikan halaman dashboard,dan klik View Ads untuk mulai melakukan survey,lihat gambar:


cara admimsy survey

Kemudian setelah itu,pilih satu persatu untuk melihat survey situs yang direkomendasikan oleh ADmimsy.Com,lihat gambar:


Admimsy Ptc Terbaru, Terpercaya dan Bukan Scam

Selanjutnya,akan ditampilkan situs yang akan ditampilkan dan tunggulah hingga waktu yang ditentukan selesai,lihat gambar:


bukti pembayaran dari admimsy

Nah,setelah waktu yang ditentukan selesai,akan ada konfirmasi seperti gambar berikut,dan klik 'Home' untuk melihat earnings dan situs lain yang akan sobat survey.


situs ptc terpercaya

Disinilah sobat dapat melihat earnings yang baru saja sobat hasilkan dari survey yang sobat lakukan,lihat gambar:


cara melakukan survey di admimsy.com

Sangat mudah bukan? lakukan survey ke semua situs yang direkomendasikan oleh ADmimsy,dan ingat ya sob tetap perhatikan T.O.S dan biarlah blog anda yang bekerja.
Semoga berhasil ya :D

Create Windows 7 start menu using CSS3 only

Saturday, February 18, 2012

I am fascinated with how much you can do with so little using CSS3. Many user interface elements that require images in order to have appropriate visual appearance now can be styled only with CSS3. In order to prove that I assigned myself a task to create Windows 7 start menu only with CSS3 (and some icons).


If we decompose the menu we'll get one div, two unordered lists with a couple of links each and a few icons. Let's see how each one of those is styled.
Check out the demo

Container

The container named startmenu holds two unordered lists that act as menus. It has linear gradient with three color stops: light blue at the top, dark blue in the middle, and another shade of light blue at the bottom. Transparency is achieved using rgba() which has four parameters. The first three represent red, green and blue color values and the last one is opacity. Two borders are created with border and box-shadow properties.
#startmenu { border:solid 1px #102a3e; overflow:visible; display:inline-block; margin:60px 0 0 20px;
-moz-border-radius:5px;-webkit-border-radius:5px; position:relative;
box-shadow: inset 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff;
background-color:#619bb9;
background: -moz-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75));
background: -webkit-gradient(linear, center top, center bottom, from(#327aa4),color-stop(45%, #2e4b5a), to(#5cb0dc)); }

Programs menu

This unordered list has white background and two borders created with border and box-shadow properties. Its links, which contain icons and program names, uses gradients and box shadows in hover state.
#programs, #links {float:left; display:block; padding:0; list-style:none;}
#programs { background:#fff; border:solid 1px #365167; margin:7px 0 7px 7px;
box-shadow: 0 0 1px #fff; -moz-box-shadow: 0 0 1px #fff; -webkit-box-shadow: 0 0 1px #fff;
-moz-border-radius:3px;-webkit-border-radius:3px;}
#programs a { border:solid 1px transparent; display:block; padding:3px; margin:3px;
color:#4b4b4b; text-decoration:none; min-width:220px;}
#programs a:hover {border:solid 1px #7da2ce;
-moz-border-radius:3px; -webkit-border-radius:3px;
box-shadow: inset 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff;
background-color:#cfe3fd;
background: -moz-linear-gradient(top, #dcebfd, #c2dcfd);
background: -webkit-gradient(linear, center top, center bottom, from(#dcebfd), to(#c2dcfd));}
#programs a img {border:0; vertical-align:middle; margin:0 5px 0 0;}

Links menu

As in the previous case, links menu is quite simple. But the interesting part comes in hover state. Each link has horizontal gradient with three stops: dark blue on the left and right side, and a bit lighter blue in the middle. Now, unlike programs menu links, here, every links has inner <span> element which contains text. This span element has one more gradient - vertical linear gradient. It is transparent in the upper half and the lower part goes from very dark blue to almost transparent light blue. The combination of two transparent gradients gives exactly the same look as buttons in Windows 7 link menu.
#links {margin:7px; margin-top:-30px;}
#links li.icon {text-align:center;}
#links a {border:solid 1px transparent; display:block; margin:5px 0; position:relative;
color:#fff; text-decoration:none; min-width:120px;}
#links a:hover {border:solid 1px #000;
-moz-border-radius:3px; -webkit-border-radius:3px;
box-shadow: 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff;
background-color:#658da0;
background: -moz-linear-gradient(center left, rgba(81,115,132,0.55), rgba(121,163,184,0.55) 50%, rgba(81,115,132,0.55));
background: -webkit-gradient(linear, 0% 100%, 100% 100%, from(#517384), color-stop(50%, #79a3b8), to(#517384));
}
#links a span { padding:5px; display:block; }
#links a:hover span { background: -moz-linear-gradient(center top, transparent, transparent 49%, rgba(2,37,58,0.5) 50%, rgba(63,111,135,0.5));
background: -webkit-gradient(linear, center top, center bottom, from(transparent), color-stop(49%, transparent),
color-stop(50%, rgba(2,37,58,0.5)), to(rgba(63,111,135,0.5))); }
Here is the preview, but I suggest you to check out the demo. You can play with backgrounds and see how transparency works.

The code works fine in Firefox 3.6+, Safari and Chrome. It degrades gracefully in Opera and IE. I guess I could optimize it a bit so if you have any suggestions please let me know.

Pasang Translator di Blog/Website (versi 1)

Friday, February 17, 2012



Kadang ketika kita buka website or blog seseorang kita menemukan widget translator, nah macam translatornya juga banyak sekali.
Rasanya berkeinginan untuk pasang Translator untuk web/blog kita. Untuk anda yang memiliki blogger/wordpress anda bisa pasang widget Google Translator (saya juga pakai), kelebihannya banyak:
1. Hampir bermacam-macam bahasa bisa dimasukan
2. Simple install
3. Ukuran juga kecil karna menggunakan Drop Down
4. De el el hehe

So, bagaimana caranya, ini dia:
1. Go to Google Translate
2. Lansung ke tab Tools.
3. Pilih bahasa blog anda
4. Copy script ke blog anda, biasanya dipasang di sidebar

Well, silahkan lihat hasilnya...!!!
Moga manfaat...

Cara membuat link menjadi pelangi (banyak bintang nya)



Dalam postingan ini saya coba untuk membuat sebuah link yang kalau terkena mouse tulisan tersebut langsung kelap kelip kayak pelangi ,kalau kayak gini jadi tambah cantik deh blog atau web kita.
Terus gimana cara nya..?


  •  Masuk ke blogger dengan ID anda
  •  Pada dasbor anda, silahkan pilih Rancangan
  • Kemudian pilih Edit HTML
  • jangan lupa centang Expand Template Widget
  •  Setelah itu, silahkan anda cari kode seperti ini hover




a:visited {
  text-decoration:none;
  color: $(link.visited.color);
}

a:hover {
  text-decoration:underline;
  color: $(link.hover.color);

}

.content-outer {
  background: $(content.background);





  • Setelah ketemu, silahkan ganti kode yang berwarna merah dan  tebal   kode di bawah ini:




color: #00FFFF; text-transform: uppercase; font-weight: bolder;
font-size: 20px; background-image: url(http://i27.tinypic.com/2626vyh.jpg); 



NB : Sobat bisa memilih warna pelangi nya dengan kode warna lain nya yang di letakan di  tag color yang berwarna biru  kayak contoh di atas kode warna nya #00FFFF bisa anda ganti dengan kode -kode warna lain nya DISINI



Jika udah anda kode script di atas maka tampak hasil nya seperti di bawah ini :




a:visited {
  text-decoration:none;
  color: $(link.visited.color);
}

a:hover {
 
color: #00FFFF; text-transform: uppercase; font-weight: bolder;
font-size: 20px; background-image: url(http://i27.tinypic.com/2626vyh.jpg); 

}

.content-outer {
  background: $(content.background);




  •  Kemudian Simpan Template.
 NB : sebelum ada menyimpan hasil modifikasi kode tersebut di usahakan terlebih dahulu simpan dan download templete anda atau pratinjau terlebih  kalau sudah bener baru di simpan templete dahulu untuk menghindari error yang terjadi dalam html


Nah ,sekarang sobat lihat hasil nya..!!!!semoga bermamfaat

Cara Membuat Tabel dalam Berbagai Macam dan Jenis

Sunday, February 12, 2012

Terus terang sob,posting ini hanya untuk sobat-sobat yang ingin praktis dalam membuat tabel di blogger blogspot,berikut Cara Membuat Tabel dalam Berbagai Macam dan Jenis

1.Tabel Biasa


Contoh:

belajar membuat tabel

Code:
<table width="300" border="1"><tr><td>belajar membuat tabel</td></tr></table>

2.Tabel Biasa dengan Huruf di posisi center / tengah


Contoh:
belajar membuat tabel

Code:
<table width="300" border="1"><tr><td align="center">belajar membuat tabel</td></tr></table>

3.Tabel Biasa dengan Huruf di posisi center / tengah serta border tebal


Contoh:
belajar membuat tabel

Code:
<table width="300" border="6"><tr><td align="center">belajar membuat tabel</td></tr></table>

4.Tabel Biasa dengan 2 (dua) kolom / columns

Contoh:
tabel kolom 1tabel kolom 2

Code:
<table width="300" border="1"><tr><td>tabel kolom 1</td><td>tabel kolom 2</td></tr></table>

5.Tabel Biasa dengan 2 (dua) kolom / columns serta border tebal dan Posisi huruf center / tengah

Contoh:
tabel kolom 1tabel kolom 2

Code:
<table width="300" border="6"><tr><td align="center">tabel kolom 1</td><td align="center">tabel kolom 2</td></tr></table>

6.Tabel Biasa dengan 2 (dua) kolom / columns dan dua baris

Contoh:
kolom satukolom dua
baris keduabaris kedua

Code:
<table width="300" border="1"><tr><td>kolom satu</td><td>kolom dua</td></tr><tr><td>baris kedua</td><td>baris kedua</td></tr></table>

7.Tabel Biasa dengan 2 (dua) kolom / columns dan dua baris serta border tebal juga huruf posisi ceter / tengah

Contoh:
kolom satukolom dua
baris keduabaris kedua

Code:
<table width="300" border="6"><tr><td align="center">kolom satu</td><td align="center">kolom dua</td></tr><tr><td align="center">baris kedua</td><td align="center">baris kedua</td></tr></table>

8.Tabel Biasa dengan 4 (empat) kolom / columns dan dua baris juga huruf posisi ceter / tengah

Contoh:
kolom satukolom dua
baris keduabaris kedua
baris ketigabaris ketiga
baris keempatbaris keempat

Code:
<table width="300" border="1"><tr><td align="center">kolom satu</td><td align="center">kolom dua</td></tr><tr><td align="center">baris kedua</td><td align="center">baris kedua</td></tr><tr><td align="center">baris ketiga</td><td align="center">baris ketiga</td></tr><tr><td align="center">baris keempat</td><td align="center">baris keempat</td></tr></table>

9.Tabel dengan Background Warna-Warni dengan 4 (empat) kolom / columns dan dua baris juga huruf posisi ceter / tengah

Contoh:
kolom satukolom dua
baris keduabaris kedua
baris ketigabaris ketiga
baris keempatbaris keempat

Code:
<table width="300" border="1"><tr><td align="center" bgcolor="red">kolom satu</td><td align="center" bgcolor="blue">kolom dua</td></tr><tr><td align="center" bgcolor="yellow">baris kedua</td><td align="center" bgcolor="green">baris kedua</td></tr><tr><td align="center" bgcolor="#00FFFF">baris ketiga</td><td align="center" bgcolor="#FF7F50">baris ketiga</td></tr><tr><td align="center" bgcolor="#ADFF2F">baris keempat</td><td align="center" bgcolor="#FF1493">baris keempat</td></tr></table>

10.Tabel yang terpisah.
Contoh:
satu
kolom satukolom dua
baris keduabaris kedua
dua
baris ketigabaris ketiga
baris keempatbaris keempat

Code:
<table width="300" border="1"><th>satu</th><tr><td align="center" bgcolor="red">kolom satu</td><td align="center" bgcolor="blue">kolom dua</td></tr><tr><td align="center" bgcolor="yellow">baris kedua</td><td align="center" bgcolor="green">baris kedua</td></tr><th>dua</th><tr><td align="center" bgcolor="#00FFFF">baris ketiga</td><td align="center" bgcolor="#FF7F50">baris ketiga</td></tr><tr><td align="center" bgcolor="#ADFF2F">baris keempat</td><td align="center" bgcolor="#FF1493">baris keempat</td></tr></table>

11.Tabel Istimewa (halah!)

Contoh:

Tabel Istimewa
Daftar Gan
No.Name:
1.Nama Satu
2.Nama Dua
3.Nama Tiga

Code:
<table align="center" border="1" cellpadding="5" cellspacing="0" >
<caption align="top"><b>Tabel Istimewa</b></caption><tr><th colspan="2">Daftar Gan</th></tr><tr><th>No.</th><th>Name:</th></tr><tr><td>1.</td><td>Nama Satu</td></tr><tr><td>2.</td><td>Nama Dua</td></tr><tr><td>3.</td><td>Nama Tiga</td></tr></table>


Sebenarnya masih banyak gan varian dari tabel ini tinggal modif sendiri aja ya,see you and moga bermanpaat ya :D

Postingan Blog Tampil di Facebook

Wednesday, February 8, 2012


Kali ini saya akan mencoba mengulas cara membuat postingan blog bisa tampil di facebok secara otomatis, kelebihannya lagi anda dapat membuat postingan blog lebih dari satu nama judul blog dan bisa tampil di faceboook secara bersamaan.                                  postingan blog anda akan bisa tampil di facebook pada dinding wall pribadi, dinding wall teman dan dinding group yang ada di facebook yang pernah anda buat sebelumnya.Anda dapat memilih account facebook anda yang sesuai dengan deskripsi blog yang anda miliki.Kelebihan Lain postingan anda otomatis punya kesempatan dibaca oleh pengguna facebook lain di seluruh dunia.

Cara Membuat Postingan Blog Tampil di Facebook

Ikuti Langkah-langahnya,
Klik app facebook Rss Graffiti
Seperti biasa setelahnya anda akan dibawa ke otorisasi aplikasi.
Klik Terima dan masuk Ke aplikasi Graffiti, selanjutnya anda tentukan pilihan postingan akan tampil dimana.
lihat sebelah kiri nama user yang berwarna Hijau ( dalam logo bulat hijau ) kemudian klik ' +add feed'  lalu masukkan url feed blog anda yang valid.

klik preview dibawahnya, bila url feed sudah benar postingan blog akan otomatis tampil di atasnya.
kemudian jangan lupa klik Save.

Read more: http://dicky-ajha.blogspot.com/2011/10/postingan-blog-tampil-di-facebook.html#ixzz1lneTX9ii
Get Paid To Promote, Get Paid To Popup, Get Paid Display Banner