Friday, May 31, 2013

Cara Membuat Blog Valid HTML5 Lengkap

Alhamdulillah sekarang saya bisa posting lagi nih sob , suasana hati juga lagi seneng nih karena barusan saja saya melakukan pertama kalinya Tukar Link atau Link Exchange dengan
M Rakadinata pemilik blog teriaaak.blogspot.com. Setelah sebelumnya saya juga pernah membagikan pengoptimalan SEO yang lainnya yaitu tentang Cara Membuat Blog Valid CSS3 dan cara Membuat Loading Blog Super Cepat dan Ringan.

Balik ke tutorial sebenarnya sob , perlu diingat yah sob , saya bukanlah Master SEO atau pakar SEO dan saya hanya ingin berbagi pengalaman saya ke pada sobat blogger semua tentang Cara Membuat Blog Valid HTML 5 , karena saya sendiri sudah bisa membuat blog saya Valid HTML 5 , bukannya saya sombong yah sob , tapi saya hanya ingin berbagi sob.

Valid HTML5 Sangatlah penting menunjang SEO blog kita , karena apabila blog kita sudah lolos tes Valid HTML5 maka Skore SEO blog kita pun semakin meningkat. Coba sobat cek Blog sobat di http://validator.w3.org/ apakah blog sobat sudah Valid HTML5 atau kan belum ???

Kalau blog sobat belum Valid HTML5 maka sobat perlu melakukan cara-cara agar blog sobat Valid HTML5 yang akan saya bahas dibawah dan berikut ini contoh blog yang sudah Valid HTML5

Blog Valid HTML 5 Lengkap
Gambar diatas saya foto sendiri di http://validator.w3.org/ .
Sobat pastinya ingin membuat blog sobat Valid HTML5 Kan ?? Berikut ini tutoral Cara Membuat Blog Valid HTML 5 versi saya , hehehe :

PERINGATAN : 
SOBAT HARUS FOKUS TERLEBIH DAHULU UNTUK MEMULAI CARA INI

1. Login ke Bogger Sobat
2. Klik Template > Edit HTML (Download template sobat terlebih dahulu untuk mengantisipasi kesalahan)
3. Cari kode <b:skin><![CDATA[ Gunakan Ctrl+F untuk mempercepat
4. Ganti kode diatas dengan kode berikut ini :
<link href='//www.blogger.com/static/v1/widgets/3950009988-widget_css_bundle.css' rel='stylesheet' type='text/css'/>
&lt;style type=&quot;text/css&quot;&gt;
&lt;!-- /*<b:skin><![CDATA[*/]]
<style>
5. Dan simpan template sobat
6. Belum selesai nih sob masih ada lanjutannya , hehehe
7. Setiap Sobat menambahkan widget , segeralah menuju ke Edit Html dan cari kode  :
   <b:include name='quickedit'/>

   Dan HAPUSLAH kode diatas arena kode ini akan menyebab kan ERROR di blog kita.

8. Pebaikilah pembuka dan penutup script sobat , contoh Penggunaan kode pembuka dan penutup script yang salah misal <script>Kodescript </script> seharusnya kode yang benar kaya gini <script type='text/javascript'>Kode script</script>

9. dan begitu juga penggunaan tag style misal <style>Css Code</style> seharusnya kode yang benar seperti ini sob :<style type='text/css'>Code css</style> 

10. Terakhir sobat cek blog sobat pada http://validator.w3.org/ , dan apakah blog sobat sudah Valid HTML5 atau belum , kalau blog sobat sudah Valid HTML5 maka sobat sudah berhasil menerapkannya

Dan sedikit informasi lagi sob , sebenarnya cara diatas hanyalah sebagian kecil dari opstimasi SEO . Tapi semoga cara diatas dapat membantu sobat semua ..

Demikianlah sob artikel saya kali ini yaitu tentang Cara Membuat Blog Valid HTML 5 Lengkap  , Semoga juga cara ini dapat membantu sobat semua dalam memecahkan suatu masalah , dan bila ada tutur kata atau pengucapan saya yang kurang baik mohon dimaafkan , Wassalamualaikum

Membuat Link Pelangi di Blog

Alhamdulillah akhirnya saya bisa posting lagi nih sob , saya bersyukur sekali masih diberikan kesempatan oleh Allah SWT. Setelah pada kesempatan sebelumnya saya pernah bagikan trik dan tips yaitu Cara Membuat Loading Blog Super Cepat dan Ringan dan Cara Membuat Arsip Blog (Blog Archive) dengan Scroll yang insyaallah dapat berguna bagi sobat semua.

Cara Membuat Link Pelangi di Blog ini pastinya sudah banyaaaakk para blogger-blogger lain membagikannnya , tapi sekali lagi tidak ada salahnya jika saya ikut membagikannya kepada sobat semua untuk melengkapi isi dari blog ini yang masih keroncongan , hehehe

Membuat Link Pelangi di Blog ini juga bisa menghias blog sobat sendiri karena Cara Membuat Link Pelangi di Blog ini memberikan efek yanh indah bagi yang melihatnya yaitu efek pelangi.

Berikut ini gambar contoh Link Pelangi :

Contoh Link Pelangi di Blog

Gambar diatas sendiri saya potret saat blog ini masih menggunakan efek ini ..
Sobat ingin Membuat Link Pelangi di Blog sobat ??? caranya mudah kok , bahkan sangatlah mudah , yaitu caranya sebagai berikut :

1. Pastinya sobat harus login ke blogger sobat terlebih dahulu
2. Klik Tata Letak > Tambahkan Gadget
3. Pilih HTML/Javascript
4. Masukan kode Berikut ini :
<script src="http://aiizahh-blog.googlecode.com/files/link%20pelangi.js" type="text/javascript"></script>
5. Simpan gadget dan lihat hasilnya

Caranya saya sudah bilang mudah bahkan cukup mudah , betull kan ??? pastinya dong.. hehehe

Demikianlah postingan singkat saya kali ini tentang Cara Membuat Link Pelangi di Blog. dan seperti biasanya semoga bisa berguna dan bermanfaat bagi blog sobat tentunya. Dan bila ada tutur kata atau pengucapan saya yang kurang berkenan dihati saya mohon maaf sebesar-besarnya. Wassalamualaikum

Thursday, May 30, 2013

Cara Membuat Arsip Blog (Blog Archive) dengan Scroll

Ketemu lagi sob dengan saya di blog ini dan alhamdulillah saya masih diberi kesempatan untuk menulis artikel lagi . Pada kesempatan sebelumnya saya sudah bagikan sebuat trik untuk blog sobat yaitu trik Membuat Loading Blog Super Cepat dan Ringan yang bisa membantu loading blog sobat lebih cepat lagi..

Arsip Blog atau Blog Archive menurut saya merupakan kumpulan artikel-artikel kita dari pertama sampai yang terakhir kalinya yang terkumpul dalam satu widget dalam blog , Arsip Blog atau Blog Archive juga memudahkan pengunjung blog kita agar mengetahui artikel-artikel kita yang terdahulu. Dan agar Arsip Blog atau Blog Archive tidak terlalu panjang menjulur ke bawah kita bisa membuat Arsip Blog atau Blog Archive dengan scroll agar lebih menghemat ruang blog sobat.

Berikut ini contoh Arsip Blog (Blog Archive) dengan Scroll :

Contoh Arsip Blog (Blog Archive) dengan Scroll

Arsip Blog (Blog Archive) diatas saya beri scroll pendek agat menghemat ruang di blog saya sendiri.
Apakah sobat mau membuat Arsip Blog (Blog Archive) dengan scroll seperti diatas ???
bila sobat mau silahkan ikuti langkah-langkahnya berikut ini , mudah kok sob , hehehe

1. Login ke blogger sobat
2. Pilih Tata Letak > Tambahkan Gadget
3. Pilih Arsip Blog atau Blog Archive
4. Simpan Gadget
5. Kita pergi ke Edit HTML
6. Lalu kita cari kode <b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
7. Tampilan Kode Penuhnya kira-kira seperti berikut
<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
<b:if cond='data:style == &quot;HIERARCHY&quot;'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == &quot;FLAT&quot;'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
<b:include name='quickedit'/>
</div>
8. Tambahkan kode <div style='overflow:auto; width:ancho; height:177px;'> dan </div>
    Dan kodenya kira-kira akan menjadi seperti ini :
<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div style='overflow:auto; width:ancho; height:177px;'><div id='ArchiveList'>
<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
<b:if cond='data:style == &quot;HIERARCHY&quot;'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == &quot;FLAT&quot;'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div></div><b:include name='quickedit'/>
</div>
9. Kode warna merah adalah kode yang ditambahkan kedalam script template, anngka 177 adalah tinggi Arsip Blog atau Blog Archive , Sobat bisa menggantinya sesuka hati.

10. Klik simpan template dan lihat hasilnya.

Demikianlah Sob postingan saya kali ini yaitu tentang Cara Membuat Arsip Blog (Blog Archive) dengan Scroll. dan semoga trik ini bisa berguna dan bermanfaat bagi kita srmua , Dan seperti biasanya sob , bila ada tutur kata atau pengucapan saya yangg kurang berkenan dihati saya mohon maaf sebesar-besarnya , Wassalamualaikum.

Wednesday, May 29, 2013

Membuat Loading Blog Super Cepat dan Ringan

Selamat Siang Sob , Alhamdulillah yah saya masih diberi kesempatan untuk mempostingan artikel lagi. Sebelumnya kalau tidak salah saya pernah membahas artikel tentang Cara Membuat Efek Shadow Terbaru Terkeren yang pastinya jooss banget yahh , hehehe

Balik ke topik sebenarnya sob , Loading blog sangat berpengaruh terhadap kenyamanan pengunjung maupun search engine google , karena saya pernah baca bahwa loading blog berpengaruh terhadap blog kita , dan juga berpengaruh dengan trafic blog kita , kenapa ?? karena bila pengunjung tidak sabar buka blog kita pengunjung tersebut pun akan menutup blog kita. Jadi kita perlu mempercepat loading bolg kita.

BERIKUT INI TERMASUK CONTOH BLOG DENGAN LOADING CEPAT


Loading Blog Super Cepat dan Ringan


Sobat bisa lihat loading blog diatas tidak sampai 1 detik , bahkan loading blog diatas hanyalah 0,37... 
WAWWW , Kenapa bisa begitu ???? nanti kita akan membahasnya.. hehehehe

Nah untuk Membuat Loading Blog Super Cepat dan Ringan kita perlu menerapkan langkah-langkah dibawah ini .. oke ???? hehehe

1. Gambar
Kurangi penggunaan gambar dalam template blog dan kalau bisa jangan menggunakan gambar sebagai background template karena saat melakukan loading, gambar akan otomatis terbaca. Seperti yang ada pada blog ini, tidak ada gambar atau gambar background yang terpasang pada template. Solusinya gunakan warna yang sesuai dengan warna gambar.

2. Ukuran Gambar
Ukuran gambar juga mempengaruhi loading blog (tetapi tidak banyak mempengaruhinya) dan juga kenyaman pembaca artikel blog Sobat. Jika Sobat menampilkan ukuran gambar sesuai ukuran aslinya, ganti ukuran gambar tersebut yang Sobat pasang ke dalam artikel blog Sobat.

3. Url Gambar
Pada artikel blog, jangan menggunakan url gambar dari luar atau milik url gambar milik blog orang lain, karena hal ini akan terbaca sebagai media dari luar blog Sobat. Misalnya menggunakan url gambar dari photobucket, tinypic, atau url gambar blogspot milik orang lain. Solusinya agar usaha mempercepat loading blog Sobat berhasil, upload sendiri gambar yang ingin Sobat pasang pada artikel blog Sobat , seperti saya selalu mengupload foto sendiri.

4. Link Gambar
Kadang saya menemukan blog yang masih menggunakan link gambar asli tanpa mengganti dengan link khusus. Misalnya, ketika Sobat mengupload sebuah gambar ke dalam artikel maka gambar akan disertai oleh link gambar itu sendiri.

5. Html Script
Jika Sobat menggunakan template dan pada template tersebut mengandung html script orang lain, pastikan Sobat menggantinya terlebih dahulu. Misalnya kode script untuk artikel terkait, http://scriptoranglain.googlecode.com/files/artikelterkait.js karena jika Sobat menggunakan script orang lain maka link script itu akan dibaca sebagai media luar dari template Sobat  Solusinya agar usaha mempercepat loading blog Sobat berhasil, ganti script tersebut dengan script Sobatsendiri.

6. Link Layanan
Jangan memasang link layanan kedalam template Sobat  Misalnya layanan sosial bookmark dari Add this atau Webiya, karena mau tidak mau blog Sobat akan membaca link script dari layanan tersebut. Solusinya buatlah link layanan sendiri dengan kode script anda sendiri.

7. Link Iklan
Untuk memasang iklan di blog, jangan terlalu berlebihan karena sangat mengganggu pembaca sehingga pembaca segera menutup blog kita.

Begitulah Solusi Cara Membuat Loading Blog Super Cepat dan Ringan , Tidak ada salahnya sobat menggunakan cara diatas untuk mempercepat blog sobat..Saya juga menerapkannya setelah saya baca pada blog majidchan.blogspot.com.

Demikianlah Artikel Saya hari ini , semoga bisa menjadi motivasi  , manfaat , dan guna bagi sobat semua , Bila ada tutur kata atau pengucapan saya yang tidak benar saya mohon maaf sebesar-besarnya , Sampai jumpa pada artikel selanjutnya , Wassalamualaikum

Tuesday, May 28, 2013

Cara Membuat Efek Shadow Terbaru Terkeren

Alhamdulillah saya bisa posting artikel lagi , saya sangat mengucapkan terimakasih sekali pada Allah SWT yang masih memberi saya peluang untuk memposting artikel. Kalau yang artikel kemarin saya bagikan setelah listriknya mati , sekarang saya baru akan memberikan artikel setelah ada tamu dari tadi di rumah saya (hehehe) , yang kemarin saya bagikan yaitu berjudul Membuat Blogroll Bergerak Paling Keren yang bertujuan untuk menambahkan link teman atau sahabat kedalam widget atau postingan blog sobat.

Cara Membuat Efek Shadow Terbaru Terkeren ini sendiri sudah banyak para blogger lainnya yang membagikannya , tapi saya ganti judul menjadi judul seperti diatas itu.

Contohya sobat bisa lihat gambar dibawah ini dan begitulah contoh Efek Shadow Terbaru Terkeren , hehehe
Contoh Efek Shadow Terbaru Terkeren
Sobat mau membuat efek shadow seperti diatas ??? silahkan sobat ikuti cara-caranya berikut ini,mudah kok:

1. Login ke Blogger Sobat
2. Klik Template > Edit HTML
3. Sobat cari kode ]]></b:skin> (gunakan Ctrl + F untuk mempermudah pencarian)
4. Taruh kode berikut ini diatas kode ]]></b:skin> tadi
#shadow2{background:url("http://1.bp.blogspot.com/-PBxSNjm7MZo/USTU7cuB7SI/AAAAAAAAXNY/PhCRSShhNss/s1600/frame_shadow2+copy.png") no-repeat scroll center center transparent; height: 20px; width: 300px; } Sumber : http://ahmad-manarul.blogspot.com/2013/05/membuat-efek-shadow-di-widget-sidebar.html#ixzz2UZx0X8dX
5.Simpan template sobat.
6. Bila sobat sudah menyimpan templatenya , sekarang yang harus kita lakukan adalah memilih widget apa yang akan kita berikan efek shadownya , contoh kita menggunakan artikel terbaru sebagai contohnya .
Maka sobat cari kata artikel terbaru (Gunakan ctrl + f untuk mempercepat) maka kurang lebih bentuk kodenya seperti ini :
<b:widget id='HTML2' locked='false' title='Resent Post' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
7. Sobat tambahkan kode <div style='overflow:auto; width:auto;height:200px;'> dan </div> dan <div id='shadow2'/>. Maka penampakan kodenya kira-kira menjadi seperti ini :
<b:widget id='HTML2' locked='false' title='Resent Post' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
<div style='overflow:auto; width:auto;height:200px;'>
<div class='widget-content'>
    <data:content/>
  </div></div><div id='shadow2'/>
8. Lalu simpan template Sobat dan lihat hasilnya.

Bila sobat berhasil menerapkan cara diatas maka kurang lebih widget sobat mempunyai efek shadow keren dibawahnya. Mudah kan sob ???? kalau kita berusaha pasti mudah kok , hehehe

Demikianlah postingan saya kali ini tentang Cara Membuat Efek Shadow Terbaru Terkeren . Seperti biasanya sob , semoga artikel ini berguna dan bermanfaat bagi sobat semua. Bila ada tutur kata atau pengucapan saya yang tidak enak , mohon dimaafkan , Wassalamualaikum

Monday, May 27, 2013

Membuat Blogroll Bergerak Paling Keren

Alhamdulillah bisa posting lagi nih , setelah barusan di daerah sini listriknya mati sekitar 2 jam dan akhirnya nyala juga deh listriknya , alhamdulillah. Saya pada kesempatan sebelumnya pernah membahas sebuah artikel yang berjudul Membuat Widget Subscribe Paling Keren yang gunanya supaya pengunjung bisa mengikuti blog kita dan juga akan mendapat informasi bila kita membuat postingan. dan kesempatan sebelumnya saya juga pernah membahas masalah template yaitu Template Mirip Terselubung Paling Keren.

Teman 
 Balik ke topik sob , Fungsi Blogroll ini sendiri untuk blog yaitu untuk mencantumkan link-link teman atau kawan. Tapi keistimewaan tutorial ini yaitu Blogroll yang kita buat bisa bergerak sob , mau liat contohnya gak sob ??? ,berikut ini contoh blogrollnya sob :

Contoh Blogroll Contoh Blogroll

Sobat ingin membuat  Blogroll Bergerak Paling Keren seperti diatas ???
kalau sobat ingin , silahkan ikuti tutorialnya berikut ini , mudah kok sob santai aja.
  1. Login ke blogger sobat
  2. Klik Template > Edit HTML
  3. Masukan kode berikut diatas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js' type='text/javascript'/><script type='text/javascript'>
var $ul = $('#blog-roll'),
    roll = function() {
        $ul.find('li').first().slideUp('slow', function() {
            $(this).appendTo($(this).parent()).fadeIn();
        });
    },
    anim = setInterval(roll, 3000);
// Pause on hover...
$ul.hover(function() {
    clearInterval(anim);
}, function() {
    setInterval(roll, 3000);
});
</script>
   4. Klik Simpan Template
   5. Letakan kode berikut di tata letak maupun postingan , ya pokoknya yang sobat sukai :

<ul id="blog-roll">         
<li><a href="#">Planet Ajaib 1</a></li>
<li><a href="#">Planet Ajaib 21</a></li>
<li><a href="#">Planet Ajaib 3</a></li>
<li><a href="#">Planet Ajaib 4</a></li>
<li><a href="#">Planet Ajaib 5</a></li>
<li><a href="#">Planet Ajaib 6</a></li>
<li><a href="#">Planet Ajaib 7</a></li>
<li><a href="#">Planet Ajaib 8</a></li>
<li><a href="#">Planet Ajaib 9</a></li>
<li><a href="#">Planet Ajaib 10</a></li>
<li><a href="#">Planet Ajaib 11</a></li>
<li><a href="#">Planet Ajaib 12</a></li>
<li><a href="#">Planet Ajaib 13</a></li>
<li><a href="#">Planet Ajaib 14</a></li>
<li><a href="#">Planet Ajaib 15</a></li>
</ul>

Gantilah tanda pagar (#) dengan link-link teman atau kawan , dan Planet Ajaib 1-15 dengan judul
Mudah kan sobat ????? pastinya dong .....

Demikianlah kali ini postingan saya tentang Membuat Blogroll Bergerak Paling Keren , Semoga dapat berguna dan bermanfaat bagi sobat semua . Dan seperti biasanya bila ada tutur kata atau ucapan saya yang kurang berkenan mohon dimaafkan , dan bila ada pertanyaan silahkan berkomentar dibawah , Wassalamualaikum.

Sunday, May 26, 2013

Membuat Kode Warna Keren di Blog

Kode warna Planet aJAIBCara Membuat kode warna di Blog ini sendiri sudah banyaaaaaaaaaaaaakk dibabahas oleh blogger do seluruuuuhh dunia. Nah , Cara Membuat kode warna  ini bukan saya yang buat sendiri , melainkan saya dapatkan dari seorang  blogger indonesia yaitu zionze pemilik blog zionce.blogspot.com. Kode warna ini sendiri menurut saya sangaaaatlah penting bagi blog kita , karena apa ??? karena saat kita mendesain blog kita pasti perlu warna-warna yang menarik dan disitulah gunanya kode warna ini. Makannya saya memasang kode warna ini , yaitu untuk membantu saya saat mendesain template blog sendiri , hehehehe.

Sobat tertarik untuk menerapkannya di blog sobat , bila sobat mau silahkan ikuti langkah-langkah saya dibawah ini , mudah kok...

1. Login ke blogger Sobat
2. Pilih Postingan
3. Buat postingan baru
4. Klik HTML buka Compose ingat bukan Compose.
5. Pastekan kode berikut ini
<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="420"> <param value="http://www.2createawebsite.com/build/color.swf" name="movie">
<param value="High" name="quality">
<embed pluginspage="http://www.macromedia.com/go/getflashplayer" quality="High" src="http://www.2createawebsite.com/build/color.swf" name="obj1" type="application/x-shockwave-flash" width="420" height="420"> </object>
<object align="middle" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" height="420" id="col" width="420"> <param value="sameDomain" name="allowScriptAccess">
<param value="http://www.2createawebsite.com/build/col.swf" name="movie">
<param value="high" name="quality">
<param value="#ffffff" name="bgcolor">
<embed pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" src="http://www.2createawebsite.com/build/col.swf" bgcolor="#ffffff" name="col" width="420" align="middle" height="420"> </object>
5. Publikasikan
6. Lihat hasilnya

Penampakannya kira-kira akan begini sob :

Keren bukan sob , bila sobat sudah berhasil kira-kira jadinya kaya diatas sob.

Demikianlah postingan saya tentang cara Membuat Kode Warna Keren di Blog , Semoga berguna bagi sobat semua , jika ada tutur kata yang salah mohon dimaafkan , Wassalamualaikum.

Saturday, May 25, 2013

Membuat Widget Subscribe Paling Keren

Alhamdulillah akhirnya saya bisa update postingan lagi , soalnya dari tadi pagi cuma ngutak-atik template nih. Setelah hari-hari sebelumnya saya disibukan oleh masalah blog agar SEO dan akhirnya saya pun bisa menerapkannya yaitu pada tutorial Cara Membuat Blog Valid CSS3 dan Membuat Blog SEO Di Chkme.com. Nah kan masalah SEO pada tutorial sebelumnya sudah teratasi , sekarang masalah Widget Subscribe. Mengapa Widget Subscribe ini diperlukan ??? karena agar pengunjung bisa mengikuti blog sobat.

Saya juga baru memasangnya barusan , karena ada seorang pengujung bernama maryam ishmatullah ingin ikut blog saya tapi tidak ada Widget Subscribe nya , kan repooottt tho. Makannya saya langsung memasang Widget Subscribe di blog saya , Ehh ternyata berguna banget lhooo.

Berikut ini penampakan widget subcribe paling keren yang saya pakai , hehehe :

Widget Subscribe Paling Keren

Sobat tertarik dengan  Widget Subscribe Paling Keren kaya diatas ??? Pasti dong.
ayoooo berangkat belajar cara Membuat Widget Subscribe Paling Keren :

1. Sob , untuk menggunakan kode CSS yg mengatur tampilan gambar Email, RSS, Twitter, Facebook, dan Google+. Silahkan copy kode di bawah ini dan simpan di atas kode ]]></b:skin>
.social a{color: #6e6e6e;font: bold 12px Arial;text-decoration: none;padding: 3px 5px 2px;position: relative;display: inline-block;text-shadow: 0 1px 0 #fff;-webkit-transition: border-color .218s;-moz-transition: border .218s;-o-transition: border-color .218s;transition: border-color .218s; background: #f3f3f3;border: solid 1px #999;}
.social a:hover {color: #333;border-color: #666;-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);-webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);}
.social a:active{color:#000;border-color: #444;}
Tempelkan kode diatas tadi agar tampilan Widget Subscribenya menjadi Paling Keren

2. Kemudian sobat pergi ke Tata Letak > Tambahkan Gadget dan letakan kode berikut ini :
<div style="background: none; border:none; padding: 4px;">
<div class='social' style='padding: 0pt 0pt 0pt 5px;'>
<table><tbody><tr><td>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=Planetajaib' target='_blank' title='newsletters'><img alt='email' src='https://lh6.googleusercontent.com/-VXLPa9GZq1Q/UJyyu0siW-I/AAAAAAAANY8/GEIS4T1jbe4/s40/mail.png' title='newsletters'/></a> </td>
<td> <a href='http://feeds.feedburner.com/planetajaib'target='_blank' title='rss'><img alt='rssfeed' src='https://lh6.googleusercontent.com/-mmd0UaE1A24/UJyyv5DqQwI/AAAAAAAANZQ/hxIo6ijm3iY/s40/rss.png' title='rss'/></a> </td>
<td> <a href='https://twitter.com/Ahmad_ManarulH' target='_blank' title='Follow on twitter'><img alt='twitter' src='https://lh3.googleusercontent.com/-e_BiuZYOtmM/UJyyv8lLuUI/AAAAAAAANZM/gd42sWzL3KM/s40/twitter.png' title='Follow on twitter'/></a> </td>
<td> <a href='https://www.facebook.com/PlanetAjaib'_blank' title=' like me on facebook'><img alt='facebook' src='https://lh3.googleusercontent.com/-4A-w9bh9pdI/UOVvglcjUPI/AAAAAAAAT9g/mieZRe2D3x0/s40/facebook.png' title=' Like me on Facebook'/></a> </td>
<td> <a href='https://plus.google.com/u/0/111196340129624846374' target='_blank' title='Follow on G+'><img alt='blog' src='http://4.bp.blogspot.com/-gLJp4DLDSCs/UVvuJnD6t_I/AAAAAAAAX5k/r9WTrCFCTAU/s1600/g+.png' title='Follow on G+'/></a>
</td></tr></tbody></table></div> <br/>
<div style='text-align: center;'>
<a href='http://www.blogger.com/follow-blog.g?blogID=2376713864947803790' target='_blank' title='Follow this blog'><img alt='blog' src='http://1.bp.blogspot.com/-KmVNDu7A26Y/UVvt9eHnjLI/AAAAAAAAX5c/DwjWJU99dMA/s1600/Follower.png' title='Follow this blog'/></a>
</div><br/>
</div>

Keterangan tulisan berwarna yang ada di atas :
  1. Untuk tulisan Planet Ajaib, silahkan ganti dengan user name feedburner blog Sobat.
  2. Tulisan http://feeds.feedburner.com/planetajaib, ganti dengan url feedburner blog Sobat.
  3. Tulisan https://twitter.com/Ahmad_ManarulH, ganti dengan url profil Twitter Sobat.
  4. Tulisan https://www.facebook.com/PlanetAjaib, ganti dengan url Facebook Sobat.
  5. Untuk  https://plus.google.com/u/0/111196340129624846374, silahkan ganti dengan url profil G+ Sobat.
  6. Untuk  2376713864947803790 ganti dengan ID blog Sobat.
Terus kalau sudah dirubah tinggal simpan dan lihat hasilnya.

Demikianlah sob postingan saya kali ini tentang Membuat Widget Subscribe Paling Keren , dan seperti biasa sob , semoga berguna dan bermanfaat , apabila ada pertanyaan silahkan komentar dibawah akan saya jawab bila saya bisa , dan bila ada tutur kata / pengucapan saya yang salah mohon dima'afkan , Wassalamualaikum.

Cara Membuat Blog Valid CSS3

Jujur saja saya tidak bergitu paham dengan masalah SEO. Nah , cara ini juga saya dapat dari blog lain saat saya sedang mengunjungi blognya , dan alhamdulillah saya berhasil menerapkannya di blog saya sendiri. Nah sebelumnya saya juga pernah bahas tentang Membuat Blog SEO Di Chkme.com. Kali ini saya akan mmbagikan seperti yang tertera di judul diatas.

Silahkan sobat cek blog sobat di Jigsaw.w3.org. Apakah blog sobat sudah Valid CSS3 ????
Jika blog sobat belum Valid CSS3 nanti ikuti Cara Membuat Blog Valid CSS3 ini.

Yup , apa keuntungannya jika blog kita Valid CSS3 ??? Menurut saya keuntungannya adalah membuat blog kita loadingnya menjadi ringan bahkan sangat ringan , karena saya juga merasakannya. Terus mengapa loading blog kita menjadi Ringan ??? Karena kode CSS kita menjadi lebih berkurang..
Valid CSS3
Sobat pastinya ingin blog sobat Valid CSS3 kan ??? Jawabannya : pasti dong hehehe
Berikut ini cara agar blog Valid CSS3 :
  1. Login ke blogger sobat
  2. Klik Template > Edit HTML
  3. Backup template sobat terlebih dadulu untuk mengantisipasi kesalahan
  4. Sobat cari kode <b:skin><![CDATA[ (Gunakan Ctrl + F atau F3 untuk mempercepat pencarian)
  5. Selanjurnya sobat pindahkan (Cut / Ctrl + x) dari kode dibawah <b:skin><![CDATA[ sampai ]]></b:skin> , lalu letakan kode yang tadi dipindah ke notepad
  6. Sehingga nantinya kode CSS yang belum dipindah hanya menyisakan kode                             <b:skin><![CDATA[ ]]></b:skin>
  7. Ganti kode <b:skin><![CDATA[ ]]></b:skin> dengan kode berikut ini :
:&lt;style type=&quot;text/css&quot;&gt;&lt;!-- /*<b:skin><![CDATA[*/]]></b:skin>
    8. Letakan kode berikut dibawah kode diatas :
<style type='text/css'>
Kode yang dipindah di notepad
</style>
    9. Sehingga nantinya kodenya kurang lebih menjadi seperti ini :
&lt;style type=&quot;text/css&quot;&gt;
    &lt;!-- /*<b:skin><![CDATA[*/]]></b:skin>
<style type='text/css'>
Kode yang dipindah dari notepad
</style>
    10.  Sekarang masukan kode yang dipastekan di notepad di kata
         Kode yang dipindah dari notepad.
 
    11. Klik simpan Template

Bila sobat sudah melakukan cara diatas , coba sobat cek kembali di jigsaw.w3.org , Apabila blog sobat sudah Valid CSS3 seperti contoh foto diatas , maka sobat berhasil menerapkannya di blog sobat. Apabila belum , berarti sobat harus mengulangi cara ini lagi dan diperhatikannya.

Demikianlah potingan kali ini dari saya tentang Cara Membuat Blog Valid CSS3 . Semoga Berguna dan bermanfaat bagi sobat semua. Bila ada tutur kata atau penguacapan saya yang tidak baik , mohon dimaafkan , Wassalamualaikum.

Template Mirip Terselubung Paling Keren

Template Mirip Terselubung ini merupakan hasil karya dari blog kautau.com , Template yang satu ini menurut saya mempunyai kelebihan. Mengapa saya bilang begitu ?? Karena template ini mirip dengan blogger sukses asal indonesia yaitu terselubung.blogspot.com. Blog terselubung itu mempunyai visitor yang sangat banyak. Bahkan seharipun blog terselubung bisa merauk visitor sekitar puluhan ribu sampai ratusan ribu WAW , Nggak kaya blog ini , seharipun cumanya b isa beberapa visitor saja (hehehe). Sedikit informasi lag sob , terselubung mempunyai peringkat alexa yaitu 15.434 dan mempunyai pagerank 4 WoW it's amazing. Template yang saya akan bagikan ini gratissss tis tis. tidak dipungut biaya apapun , palingan sobat tidak menghapus link kredit pembuat template untuk menghargai hasil karyanya.

Berikut ini foto template terselubungnya :

Terselubung Template | Planet Ajaib

DEMO | DOWNLOAD

Pasword Rar : olengkblogs

Sobat , untuk merubah menu horisontalnya pastekan kode berikut di atas header blog :
<!-- Star hhttp://bukan-rahasiia.blogspot.com//-->
<div id='navibar'>
<a href="#" class="navitabs"><b>Home</b></a>
<a href="#" class="navitabs"><b>menu 1</b></a>
<a href="#" class="navitabs"><b>menu 2</b></a>
<a href="#" class="navitabs"><b>menu 3</b></a>
<a href="#" class="navitabs"><b>menu 4</b></a>
<a href="#" class="navitabs"><b>menu 5</b></a>
<a href="#" class="navitabs"><b>menu 6</b></a>
<div>
<!-- Stop hhttp://bukan-rahasiia.blogspot.com//></div></div>
KETERANGAN : warna merah adalah link URL
                           warna biru adalah judul menunya 

Silahkan sobat download templatenya sepuasnya kalau mau download template JPStation 6 warna berbeda dan responsive tentunya klik DIsini.

Demikianlah postingan singkat saya tentang Template Mirip Terselubung Paling Keren. Semoga berguna dan Bermanfaat bagi sobat semua. Jangan lupa tinggalkan komentarnya dan bila ada pengucapan atau tutur kata saya yang tidak baik mohon dima'afkan . Wassalamualaikum

Friday, May 24, 2013

Membuat Blog SEO Di Chkme.com

Cara Membuat Blog SEO Di Chkme.com ini sudah banyak para blogger yang membagikannya , dan tidak ada salahnya jika saya ikut membagikan cara ini. Sebenarnya saya  tidak handal dalam masalah SEO , cara ini sendiri saya terapkan di blog saya setelah membaca tutorial dari blog lain. Saya juga pusing kalau membahas masalah SEO dan Optimalisinya.Alhamdulillah nih setelah saya mencoba cara ini saya berhasil membuat blog saya saat di cek di Chkme.com 100% Scorenya.

Berikut Screenshot Gambar blog ini saat di check di Chkme.com :

Contoh Gambar Planet Ajaib


Sobat ingin blog sobat 100% di Chkme.com ?? Pastinya ingin dong. 
  • Berikut ini cara agar Blog 100% di Chkme.com :
1. Check Scrore SEO sobat di Chkme.com.
2. Lihat berapa persen Score SEO sobat.
3. Bila belum 100% Scorenya , ikutilah langkah berikut.
4. Usahakan setiap sobat akan membuat postingan dan disitu terdapat link tautan , Gunakanlah tag ini :
<a href="link-tujuan" title="Deskripsi" target="_blank">judul</a>
5. Dan apabila sobat akan menampilkan gambar pada postingan , Gunakanlah tag berikut :
<img src="link images" alt="Deskripsi" title="Judul">
NB : Pada intinya sobat harus memberikan judul dan deskripsi pada link atau tautan 

 6. Cek kembali Score SEO sobat di chkme.com , jika score SEO nya sudah 100% Maka Sobat sudah berhasil menerapkannya di blog sobat

Ternyata cara ini cukup mudah bukan ? Tentunya dong. Sebetulnya cara diatas hanya sebagian kecil dari SEO. Bila ada kesalahan sobat bisa bilang pada saya melalui kotak komentar dibawah.

Demikianlah pembahasan singkat dari saya tentang cara Membuat Blog SEO Di Chkme.com. Semoga Sobat berhasil menerapkannya , dan semoga bermanfaat bagi kita semua. Wassamualaikum.

Thursday, May 23, 2013

Memasang TV Online Di Blog

Memang benar adanya bahwa Dunia Online Sekarang sudah mempunyai apa saja , contohnya yang saya akan bahas kali ini. Masa sekarang TV yang biasanya kita lihat di Televisi bisa dilihat di Internet. Itu karena perkembangan Dunia online yang begitu pesat. Contohnya : Sekarang orang bisa beli barang melalui media online , bisa chatting jarak jauh , dan masih banyak lagi yang lainnya.

Mungkin cara ini sudah banyak yang membagikannya tapi tidak ada salahnya jika saya juga ikut memposting artikel cara Memasang TV Online Di Blog ini. Memasangnyapun bisa dibilang mudah , karena saya sendiripun memasangnya di blog saya. Bila sobat ingin melihat TV Online klik Disini

Contoh TV Online Planet Ajaib

Sobat tertarik menerapkannya ??? Bila sobat tertarik silahkan ikuti cara-caranya , mudah kok.
  1. Login ke Blogger sobat
  2. Pilih Buat entri baru / Postingan Baru
  3. Klik HTML bukan Compose
  4. Letakan kode berikut didalamnya
<embed align="top" allowfullscreen="true" allowscriptaccess="sameDomain" bgcolor="#ffffff" devicefont="false" height="860" menu="true" name="MivoTV" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" scale="noscale" scroll="auto" src="http://id.imediabiz.com/MivoTV.swf?r=%27%20+%20Math.round%28Math.random%28%29%20*%2099999%29%20+%20%27" type="application/x-shockwave-flash" width="100%" wmode="transparent"></embed><span style="font-size: 50%">Widget TV Online <a href="hhttp://bukan-rahasiia.blogspot.com/" target="_blank" rel="follow">Mivo TV Online</a></span>
    5. Publikasikan dan liat hasilnya

Demikianlah postingan singkat saya tentang Cara Memasang TV Online Di Blog. Semoga Berguna dan bermanfaat bagi kita semua, bila ada tutur kata / pengucapan saya yang salah mohon dimaafkan , Wassalamualaikum.

Membuat Widget Icon Social Network Keren dengan Efek Spin

Alhamdulillah Sob , masih bisa posting lagi nih. Setelah semalam saya memposting tentang Daftar Situs Layanan Ping Terbaik Untuk Blog, Kali ini saya akan membahas persis dengan judul postingan diatas.
Tahukah sobat apa funsi Widget Icon Sosial Network ini ??? Kalo menurut saya Icon sosial network ini bisa untuk lebih memperjelas siapa si  author / pemilik blog (ini menurut saya . kalo menurut yang lain apa ? saya juga tidak tahu). Icon Sosial Network ini bisa mempercantik blog sobat , Mengapa ? Karena Icon Sosial Network ini dilengkapi dengan efek Spin (Berputar).

Berikut ini Contoh gambarnya :
Icon Sosial Network
Bila disentuh Cursor Akan berubah seperti ini :
Icon Sosial Network

Sobat mau membuatnya ?? kalo sobat mau silahkan ikuti langkah-langkahnya berikut ini :
  1. Login ke blogger Sobat
  2. Pilih Tata Letak > Tambahkan Gadget
  3. Letakan kode berikut ini :
<style> p#aiizahh_socialnetworkicon img { /* Social Network Widget By hhttp://bukan-rahasiia.blogspot.com// */ -moz-transition: all 0.9s ease-in-out; -webkit-transition: all 0.9s ease-in-out; -o-transition: all 0.9s ease-in-out; -ms-transition: all 0.9s ease-in-out; transition: all 0.9s ease-in-out; } p#aiizahh_socialnetworkicon img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } /* Social Network Widget By hhttp://bukan-rahasiia.blogspot.com//*/ </style> <center><p id="aiizahh_socialnetworkicon"> <a href="http://twitter.com/USERNAME"' target='_blank'> <img border="0" src="http://4.bp.blogspot.com/-UHTXhLlnAM4/URV01PYeT8I/AAAAAAAACVY/GNfBcx1tgsY/s000/twitter.png' title='Twitter" /></a> <a href="http://www.facebook.com/USERNAME"' target='_blank'> <img border="0" src="http://1.bp.blogspot.com/-pfdCr67N0vY/URV01_6rbJI/AAAAAAAACVg/n_vDeB55BIE/s000/facebook.png' title='Facebook" /></a> <a href="https://plus.google.com/USERNAME"' target='_blank'> <img border="0" src="http://3.bp.blogspot.com/-lodPYWKzSs8/URV02Sr-jWI/AAAAAAAACVo/oAhkSrXW_qU/s000/gplus.png' title='Google Plus" /></a> <a href="http://www.linkedin.com/USERNAME"' target='_blank'> <img border="0" src="http://3.bp.blogspot.com/-_aFcLmXOmWA/URV02yUDxCI/AAAAAAAACVw/iKGHV_pzIVU/s000/linkedin.png' title='LinkedIn" /></a> <a href="http://URL BLOG/feeds/posts/default"' target='_blank'> <img border="0" src="http://4.bp.blogspot.com/-DG0bPhhycRU/URV03kQ819I/AAAAAAAACV0/PPkxhtfMJZI/s000/rss.png" /></a> <a href="mailto:USERNAME@gmail.com"' target='_blank'> <img border="0" src="http://4.bp.blogspot.com/-xYeZT1Ckroo/URV04QBRScI/AAAAAAAACV8/Mzc6lTDySpQ/s000/email.png' title='Email" /></a> </p></center>
NB : Ganti USERNAME Dengan Username Sobat.
      4. Simpan

Demikianlah postingan saya tentang Membuat Widget Icon Sosial Network Keren dengan Efek Spin , Semoga Bermanfaat bagi sobat semua , bila ada tutur kata yang tidak pas , saya mohon ma'af sebesar-besarnya. Wassalamualaikum.

Daftar Situs Layanan Ping Terbaik Untuk Blog

Alhamdulillah sob , saya masih diberi kesempatan untuk membagikan sesuatu kepada sobat semua. Setelah sebelumnya saya memposting artikel tentang Membuat Widget Buka Tutup di bawah Postingan Ala Blog Teriaaak. Tahukah sobat apa funsi mengePing Blog ini ? , Kalo menurut saya ping blog ini salah satunya untuk mempercepat artikel kita terindeks mesin engine google (Menurut saya yaaa). Saya juga sering melakukan ping Blog setelah membuat artikel agar artikel saya cepat terindeks oleh mesin engine google.Sedikit informasi Sob , Situs layanan ping yang paling saya suka adalah Mypagerank.net , karena praktis dan terbukti ampuh , hehehe.

Berikut ini Daftar Situs Layanan Ping terbaik untuk blog sobat :

1. Mypagerank
Mypagerank | Planet Ajaib


Pingler


Auto Ping


Ping O matic

Auto Pinger | Planet Ajaib

Ping My Blog

Pingates
Ping in


NB : Sobat dapat menggunakan semua layanan tersebut namun diberi jarak agar tidak terjadi Error.

Demikianlah postingan saya pada malam hari ini sob , saya juga sudah ngantuk nih. Semoga Berguna dan Bermanfaat bagi kita semua , dan bila ada tutur / pengucapan saya yang tidak baik mohon dimaafkan. Terimakasih , Wassalamualaikum.

Membuat Widget Buka Tutup di bawah Postingan Ala Blog Teriaaak

Tutorial ini juga saya minta langsung dari Mas Birlando dan Mas M Rakadinata pemilik blog (http://teriaaak.blogspot.com/). Saya sangat mengucapkan terimakasih kepada Kedua Mas-mas diatas ,karena permintaan saya telah di setujui dan dibagikan kepada semua. Dan sebagai bentuk terimakasih saya ,   saya akan memberi tautan ke blog Teriaaak. Bagi sobat yang ingin mengujungi blog Teriaaak klik Disini, Blog Teriaaak juga loadingnya sangat cepat dan desainnya pun membuat pengunjung betah berlama-lama di blog Nya. Oh ya ,  Kembali ke tutorial semula.Widget ini sendiri di modifikasi oleh Mas Birlando yang terinspirasi dari Blog mas hendriono [modification blog].

Apa fungsi dari Widget Buka tutup ini ? Menurut saya widget buka tutup ini membuat blog lebih simple dan lebih enak dilihat mata , karena membuat tata widgetnya menjadi rapi. Lalu mana contohnya ? Berikut ini contoh gambarnya , Saya ambil langsung dari blog Teriaaak.blogspot.com :

Teriaaak Blogspot

Teriaaak Blogspot

Sobat tertarik untuk menerapkan di blog sobat seperti Blog Teriaaak itu ??? Kalau sobat blogger mau silahkan ikuti langkah-langkah saya dibawah ini :

1. Login ke Blogger (http://www.blogger.com/) Sobat
2. Klik Template > Edit HTML 
3. Backup Template Sobat / Copy template sobat dan letakkan pada Notepad , untuk mengantisipasi kesalahan
4. Cari Kode <data:post.dateheader/>
5. Dan letakkan kode berikut dibawah kode <data:post.dateheader/>

<style type="text/css">
#accordion{width:100%;margin:auto;border:0px solid white}
#accordion h2{padding:5px 10px;background-color:#ccc;background-image: url(http://1.bp.blogspot.com/-qtI_UsPdZwc/Tmzg5K8eADI/AAAAAAAABrU/ScrT9X8fBBY/s1600/arrow_right.gif);background-repeat: no-repeat;background-position: right center;color:#000;font:normal 11px Tahoma;border-bottom:1px solid #FFF;cursor:pointer;}
#accordion .content{font:normal 11px Arial;padding:5px 10px;background:#eee;}
#accordion .content ul {list-style:none;margin:0 0 0;padding:0 0 0;}
#accordion .content li {background-image: url(); background-repeat: no-repeat;background-position: left center;margin:0;padding:2px 0 3px 0;text-indent:0px;border-bottom:1px dotted #ccc;line-height:1.3em;}
#accordion .content li a:hover {text-decoration:none;color:#000;}
#accordion h2.active{background-color:#bbb;background-image: url(http://2.bp.blogspot.com/-9If6SXYDklM/Tmzg4W8YwuI/AAAAAAAABrQ/XlCiTeVqtq0/s1600/arrow_down.gif);background-repeat: no-repeat;background-position: right center;font-weight:bold;}
</style>
<script src="http://yourjavascript.com/121511228073/accordion-menu.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('#accordion .content').hide();
$('#accordion h2:first').addClass('active').next().slideDown('slow');
$('#accordion h2').click(function() {
if($(this).next().is(':hidden')) {
$('#accordion h2').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
});
});
</script>
<div id="accordion">
<h2>
Title 1</h2>
<div class="content">
Isi konten 1</div>
<div id="accordion">
<h2>
Title 2</h2>
<div class="content">
Isi konten 2</div>
<div id="accordion">
<h2>
Title 3</h2>
<div class="content">
Isi konten 3</div>
<div id="accordion">
<h2>
Title 4</h2>
<div class="content">
Isi konten 4</div>
<div id="accordion">
<h2>
Title 5</h2>
<div class="content">
Isi konten 5</div>
</div>
</div>
</div>
</div>
</div>
Keterangan :  Isi kata Title dengan judul widget sobat
                       Isi kata Isi Konten dengan Konten sobat

5. Klik Simpan , dan liat hasilnya

Demikianlah postingan saya tentang Membuat Widget Buka Tutup dibawah Postingan Ala Blog Teriaaak, Semoga Bermanfaat bagi sobat semua , dan bila ada kata yang kurang pas / salah mohon dima'afkan , Wassalam.

Wednesday, May 22, 2013

Download Template JPStation Responsive 6 Warna

Mungkin sudah banyak template Responsive yang sudah para blogger-blogger lain bagikan. Dan sekarang pun saya akan ikut membagikan template responsive ini. Ini mungkin salah satu template responsive kesukaan saya , Template ini sendiri dibuat oleh blog MRK site (mkr-site.blogspot.com). Fitur dari template ini dibilang cukup banyak. Mau tau apa saja fitur dari template ini ???

JPStation Blue
Berikut fitur dari template ini :
  1. Responsive Tentunya.
  2. JSON Search Result dengan Ajax sehingga loadingnya lebih cepat.
  3. Costum CSS lightbox blogger.
  4. Sidebar dikanan dan 3 kolom untuk footernya (tombol toggle pada untuk menampilkan footer).
  5. Tab Widget pada sidebarnya
  6. 2 jenis view list dan grip dengan pengingat sesi(cookie) ~ (default list)
  7. Related Post/Artikel terkait dengan Ajax sehingga loadingnya agak cepat(script dari moretechtips saya modifikasi sesuai templatenya).
  8. Emoticon pada bagian komentar.
  9. 2 jenis Menu yaitu Normal Menu dan Mobile Menu (pada mobile menu menggunakan SelectNav)
  10. Ajax Recent post / Artikel (dengan Animasi) dan News Ticker di atas Menu
  11. Ajax Recent Comments / Komentar terbaru dengan fitur untuk menghilangkan komentar Admin blog(dengan Animasi)
  12. Optimasi SEO.
  13. Support modern browser IE9, Mozilla, Chrome
  14. Ada 6 Pilihan warna yaitu Biru, Hijau, Merah, Orange, Abu-abu, Biru Kehijauan (Turquoise).
Mantap bukan ??? , Sobat pada mau nih ??? Kalau mau silahkan lihat lebih jelas lagi dibawah ini.


                                                 Berikut ini Link  Downloadnya :
Demikianlah Pembahasan dari saya tentang Download Template JPStation Responsive 6 Warna , Semoga Bermanfaat bagi sobat semua. Jika ada tutur kata dari saya yang kurang bagus mohon dimaafkan , Karena saya baru latihan membuat artikel sendiri. Wassalam

Tuesday, May 21, 2013

Membuat Drop Cap (Huruf Besar) Di Blog

Berbicara tentang Drop Cap mungkin kita tidak asing lagi , tetapi banyak orang yang mengetaui kata drop cap tetapi tidak mengetahuinya, hehehe seperti saya dulu juga tidak mengetahui apa itu drop cap , tetapi nanti akan saya jelaskan kok , hehe

Mungkin sudah banyak para blogger-blogger lainnya yang sudah membagikan cara membuat drop cap (Huruf Besar)  ini. Tapi tidak ada salahnya saya mempostingan artikel ini , untuk membuat para blogger lainnya yang belum tahu trik ini menjadi tahu. Tutorial ini sendiri saya dapat Pas lagi mengunjungi blog nya Maskolis pemilik blog www.maskolis.com. Drop Cap merupakan huruf besar yang ukurannya kira-kira 10 kali lipat dibandingkan ukuran huruf-huruf biasanya. anda bisa liah contoh awal kata postingan ini yang berhuruf paling besar , itulah yang bernama drop cap (huruf besar) atau sobat juga bisa melihat contoh gambar drop cap berikut ini :
Contoh Drop Cap 
Sobat tertarik untuk menerapkan trik cara membuat drop cap (Huruf Besar)  ini ? Pemasangannya mudah kok. Tapi agar lebih jelasnya sobat bisa ikuti cara-caranya dibawah ini :
  1. Login Ke Blogger Sobat
  2. Klik Template > Edit HTML
  3. Cari kode  ]]></b:skin>
  4. Dan masukan kode berikut ini diatas kode ]]></b:skin>
/* --Star Drop Cap Planetajaib.blogspot.com-- /*
.awal {
float:left;
color: #000000;
background:#ffffff;
line-height:80px;
padding-top:1px;
padding-right:5px;
font-family:times;
font-size:100px;
/* --Stop Drop Cap Planetajaib.blogspot.com-- /*
5. Klik Save / Simpan Template.

NB : Sobat untuk Cara ini , Setiap Sobat mempostingan artikel harus lewati HTML , Bukan Lewat EDIT HTML ya , tetapi di HTML postingan.

6. Ketikan kode ini saat sobat mau membuat artikel.
<span class="awal">huruf awal</span>
NB : Kata huruf awal, Sobat ganti dengan huruf pertama yang akan sobat posting.
         Misalnya : <span class="awal">P</span>

Demikianlah postingan saya tentang Cara Membuat Drop Cap (Huruf Besar) Di Blog. Jika ada tutur atau pengucapan saya yang tidak tepat atau benar , mohon dima'afkan karena saya baru belajar mengetik postingan sendiri. Terimakasih , selamat mencoba dan semoga berhasil. Wassalam.

Monday, May 20, 2013

Widget Contact Form Baru untuk Blogger

Pada tanggal 19 Mei 2013 Blogger meluncurkan kembali widget terbarunya yaitu Widget Contact From Baru untuk Blogger. Saya juga pengguna blogger setia jadi saya juga ikut berbahagia (hehehe).Setelah hari-hari kemarin www.blogger.com telah menambahkan fitur-fitur baru yaitu diantaranya :
  • Fitur Balas Komentar
  • Fitur Komentar Google Plus
  • dan sekarang Widget Contact From Baru untuk Blogger
Fitur ini tentunya sangat bermanfaat bagi kita semua , karena pengunjung blog tinggal mengirim pesan kepada anda , dan anda pun bisa membalas pesannya , tanpa melalui email yahoo / lainnya , pokoknya widget ini sangat di recomendasikan , hehehe

Berikut ini contoh penampakan widgetnya
 :
Widget Contact From Baru untuk Blogger

Jadi dengan diterbitkannya Widget ini , anda lebih mudah untuk menambahkan Widget Contact From.
Bila anda ingin memasang widget seperti diatas , pemasangannya sebagai berikut:

1. Login ke Blogger anda tentunya.
2. Klik Tata Letak > Tambahkan Widget
3. Pilih Formulir Kontak

Widget Contact From Baru untuk Blogger

4. Tembahkan
5. Selesai

NB : Setiap ada orang/pengunjung yang mengirim pesan melalui widget contact form ini maka pesannya otomatis masuk ke alamat email anda.

Demikianlah potingan dari saya tentang Widget Contact From Baru untuk Blogger. Bila ada tutur kata atau pengucapan saya yang kurang pas mohon di ma'afkan / maklumi karena saya baru belajar mengetiok artikel sendiri. Terimakasih , dan Semoga Bermanfaat

Membuat Emoticon Komentar Keren

Kotak komentar menurut saya merupakan tempat berbagai kritikan atau saran pengunjung untuk blog kita, dan sering juga pengunjung bertanya lewat pesan komentar. Tapi untuk mengekspresikan diri mereka musti kita sebagai pemilik blog seharusnya memasang emoticon di blog kita. dan emoticon juga bisa untuk menghias blog kita sendiri untuk lebih menarik perhatian pengunjung blog. sedikit informasi bahwa emoticon ini dibuat oleh Alya Zahya pemilih blog aiizah . Nah selain untuk menarik perhatian pengunjung emoticon ini juga tidak berat untuk loading blog anda, sehingga pengunjungpun tidak terlalu lama untuk menunggu loading blog anda.

Emoticon ini juga bentuknya lucu-lucu , sehingga pengunjungpun tidak bosan di blog anda , dan yang perlu diketahui bahwa agar pengunjung blog kita ramai kita harus melakukan banyak trik , mengapa harus pengunjungnya ramai ???? karena apabila pengunjungnya sepi , yang berkomentar di blog anda pun sepi / jarang. Berikut ini contoh gambar Emoticonnya :

Contoh Emoticon Komentar Keren
Bila Anda tertarik untuk menerapkan emoticon seperti gambar diatas di blog anda , Silahkan ikuti langkah-langkahnya berikut ini :
1. Login Ke  Blogger .
2. Klik Template  > Edit HTML  (Backup Template anda Dulu untuk mengantisipasi kesalahan).
3. Sobat Cari Kode </body> dan letakan kode berikut ini diatasnya:
<style type='text/css'> .emoWrap { background-color:#EEDE86; border:2px solid #D3BA59; padding:10px 14px; color:black; font:bold 12px Tahoma,Arial,Sans-Serif; text-align:center; } img.emo, input.emoKey { display:inline-block; /* Penting! */ *display:inline; vertical-align:middle; } input.emoKey { border:1px solid #ccc; background-color:white; font:bold 11px Arial,Sans-Serif; padding:1px 2px; margin:0px 0px 0px 2px; color:black; } </style> <script type='text/javascript'> //<![CDATA[ var emoRange = "#comments p, div.emoWrap", putEmoAbove = "#comment-editor", emoMessage = false; //]]> </script> <script src='https://aiizahh-reader.googlecode.com/svn/trunk/emotj.js' type='text/javascript'></script>

Keterangan : kode #EEDE86 adalah kode background emoticon dan kode #D3BA59 merupakan kode border emoticon. anda bisa menyesuaikannya kode berwarna merah sesuai keinginan sendiri

    4. Simpan Template Sobat.
    5. Lihat Hasilnya

    Demikianlah saja postingan saya tentang Cara Membuat Emoticon  Komentar Keren. Mohon ma'af jika tutur/pengucapan saya diatas tidak bagus (mohon dimaklumi karna saya baru saja belajar mengetik postingan sendiri). Semoga Bermanfaat bagi kita semua.

    Sitemap

    About Blog Planet Ajaib

    Ada baiknya saya memberitahukan kepada sobat semua About blog ini serta visi dan misi saya. mengapa saya ingin memberitahukannya kepada sobat ? , Karena agar pembaca dan penulis lebih fokus dan terarah.

    Sejarah Blog ini :

    Saya membuat blog ini pada tanggal 20/5/2013.
    Saya telah menempuh dunia blogging dihitung sampai hari ini yaitu sekitar tepatnya 3 minggu.
    Saya juga sudah mencoba membuat blog dengan akun yang lainnya (Tapi semuanya Gagal).
    Semoga yang ini nggak gagal ya , hehehe

    Berikut Keterangan Blog Planet Ajaib ini :
    • Nama Blog  :      Planet Ajaib
    •  Url Blog     :      Planetajaib.blogspot.com
    • Author        :      Ahmad Manarul
    Motto  : Membentuk Planet yang Damai Serta Bermanfaat (Walaupun hanya di dunia Maya saja)
    Tujuan : 1. Membuat kita semua lebih tahu tentang cara blogging (Walaupun saya juga masih terus belajar)
                   2. Mencari Jalan keluar untuk memecahkan Suatu masalah
                   3. Melilih Sebuah pilihan didalam Pilihan-Pilihan yang Sulit
                   4. Memotifasi kita dengan Cerita-Cerita Menarik dan Unik

    Visi   :
    Membagikan Apapun yang saya ketahui , Serta dengan Menampilkan postingan-postingan yang         dibuat dengan segenap daya dan rasa serta mewakil perasaan penulis untuk dipelajari lebih jauh, lebih dalam, dan lebih tepat. (Preeet dalam amat , hahaha)

    Misi : 
    1.  Ingin Membantu sesama blogger yang masih pemula (seperti saya) untuk memecahkan masalah dalam dunia blogging.
    2.  Menceritakan pengalaman-pengalaman hidup pribadi  dalam bentuk curhatan dan yang lainnya agar pembaca dapat lebih peduli dan mempelajari pengalaman tersebut.

    Begitulah About blog ini serta visi dan misi saya.