Showing posts with label Desain Blog. Show all posts
Showing posts with label Desain Blog. Show all posts

Monday, July 1, 2013

Cara Memasang Musik di Blog (Lagu Pilih Sendiri)

Cara Memasang Musik di Blog (Lagu Pilih Sendiri)
Memasang musik di blog selain untuk menambah rasa sepi di blog ternyata bisa juga untuk membuat visitor sendiri betah berlama-lama di blog anda, alasannya karena mereka ingin menyelesaikan lagu yang mereka dengar (kalau pas musik yang di dengar pengunjung sendiri memang pengunjungnya suka) hehehe. Saya sendiri pernah memasang musik di blog saya , tetapi saya kwatir akan ketenangan pengunjung blog yang suka konsentrasi dengan artikel , apalagi blog ini membahas tentang tutorial-tutorial blog yang saya dapatkan dari blog lain terus saya tulis dengan narasi versi sendiri di blog saya.

Tutorial blog menurut saya membutuhkan ketenangan agar mereka bisa fokus terhadap tutorial blog tersebut (ini cuma menurut saya ya, tapi kalau menurut anda sendiri saya tidak tahu) , tapi saya rasa pendapat orang berbeda-beda , jadi kita harus menghargainya.

Cara Memasang Musik di Blog ini saya sajikan khusus sesuai keinginan pemiliknya / Lagu Pilih Sendiri , 
berikut ini Cara Memasang Musik di Blog (Lagu Pilih Sendiri) :

1. Anda harus pergi ke alamat http://www.divine-music.info/ dan jika ingin tutorial blog yang keren, kunjungi www.mestiqui.com
2. Setelah itu anda tinggal memilih nama band yang anda suka , contoh "planet ajaib" akan memilih "Bruno Mars"

Cara Memasang Musik di Blog (Lagu Pilih Sendiri)

3. Setelah itu pilihlah salah satu judul lagu yang anda suka.
4. Kemudian , Copy dan Paste kode yang telah disediakan

Cara Memasang Musik di Blog (Lagu Pilih Sendiri)
5. Lalu letakan kode yang telah di copas di Dasbor Blogger > Tata Letak > Tambahkan Gadget
6. Simpan / Save dan lihat hasilnya

Demikianlah postingan kali ini tentang Cara Memasang Musik di Blog (Lagu Pilih Sendiri) , semoga postingan ini bisa dimengerti dan bermanfaat , Wassalamulaikum.

Tuesday, June 18, 2013

Template Blog Mirip Yahoo Keren

Template Blog Mirip Yahoo Keren

Template Blog Mirip Yahoo Keren merupakan template mirip-mirip yang kedua setelah Template Mirip Terselubung Paling Keren yang pernah saya bahas terdahulu. Template yang mirip yahoo ini merupakan template hasil karya dari Borneo Template yang merupakan blog yang sudah terkenal menyediakan template-template keren serta SEO (search engine optimazation).

Template Blog Mirip Yahoo ini Cocok sekali digunakan untuk blog yang berbasis Berita , Cerita , Pokoknya banyak deh , template ini juga mempunyai banyak fitur diantaranya fitur-fitur :

  1. Loading Ringan
  2. 3 Kolom sidebar di beranda
  3. 2 Kolom sidebar di postingan
  4. Design Elegan
  5. Kotak Search Besar
  6. SEO , anda juga bisa membuat templatenya seo di Cara Membuat Blog SEO Di Chkme.com
  7. Jika template ini ingin Valid HTML 5 silahkan simak di Cara Membuat Blog Valid HTML5 Lengkap
  8. Dan masih banyak lagi
Jika anda ingin melihat DEMO templatenya bisa klik DISINI
Jika anda ingin melihat DOWNLOAD templatenya bisa klik DISINI

Demikianlah postingan pendek saya kali ini tentang Template Blog Mirip Yahoo Keren semoga artikel ini bisa bermanfaat bagi kita semua,  Wassalamualaikum

Saturday, June 8, 2013

Mengubah Tampilan Blog Praktis Terkeren

Mengubah Tampilan Blog Praktis TerkerenSelamat malam , pada malam minggu ini saya akan membagikan sebuah tutorial untuk memperindah tampilan blog anda yaitu tutorial Mengubah Tampilan Blog Praktis Terkeren yang bisa berfungsi sebagai sarana untuk memperingah tampilan blog anda dan juga memungkinkan pengungjung blog anda lebih praktis / cepat dalam mengganti tampilan blog anda dan disesuaikan dengan keinginan pengunjung blog anda.

Artikel Mengubah Tampilan Blog Praktis Terkeren ini merupakan artikel kedua saya hari ini dan artikel Mengubah Tampilan Blog Praktis Terkeren ini juga akan menjadi penutupu artikel pada hari ini / lebih tepatnya malam minggu ini.

Sebelumnya saya juga pernah membahas suatu artikel untuk memperindah blog kita yaitu artikel yang berjudul Membuat Tombol Next Prev Di Samping Kanan Kiri Blog , dan tutorial disamping juga saya terapkan sendiri di blog saya , apabila anda ingin melihat demonya tinggal lihat kanan dan kiri sidebar blog ini.

Tutorial Mengubah Tampilan Blog Praktis Terkeren sendiri dibuat oleh Alya Zahra pemilik blog aiizahh.blogspot.com yang merupakan blog yang keren menurut saya.

Harap anda berkonsentrasi dulu sebelum menerapkan tutorial ini.

Berikut ini cara Mengubah Tampilan Blog Praktis Terkeren :

1. Login ke blogger anda
2. Klik Template > Edit HTML
3. Letakkan kode berikut ini di atas </head> atau </body> :
<script type='text/javascript' src='http://aiizahh-reader.googlecode.com/svn/trunk/patterns/cookieforblog.js'></script>
<script type='text/javascript' src='http://aiizahh-reader.googlecode.com/svn/trunk/patterns/styleswitcher.js'></script>
4. Simpan template
5. Selanjutnya taruh kode dibawah ini di Tata Letak > Tambahkan Gadget
<style type="text/css">
#styleSwitcher {
  border:none;
  margin:0 0;
  padding:0 0;
  width:98%;
  text-align:left;
  font:normal 11px Tahoma,Arial,Sans-Serif;
  border-collapse:collapse;
}
#styleSwitcher th,
#styleSwitcher td {
  vertical-align:middle;
  border:none !important;
  padding:2px 10px;
}
#styleSwitcher th.title {
  background-color:#ccc;
  padding:5px 10px;
  margin:0 0 10px;
  text-transform:uppercase;
  font-size:12px;
  font-family:Arial,Sans-Serif;
}
#styleSwitcher select,
#styleSwitcher input[type="text"] {
  width:130px;
  border:2px solid #bbb;
  background-color:#9D8675;
  padding:2px;
  font:bold 11px Tahoma,Verdana,Arial,Sans-Serif;
  color:#000;
  display:block;
  margin:0 0 0;
  height:24px;
}
#styleSwitcher select option {
  color:white;
  padding:5px 10px;
  cursor:pointer;
}
#styleSwitcher button {
  font:normal 11px Tahoma,Arial,Sans-Serif;
  padding:3px 5px;
  cursor:pointer;
}
#styleSwitcher #bgColorer {
  overflow:hidden;
  margin:10px 0 10px;
}
#styleSwitcher #bgColorer span {
  display:block;
  float:left;
  width:20px;
  height:20px;
  border:1px solid black;
  margin:0 5px 0 0;
  cursor:pointer;
}
#styleSwitcher #bgpattern {
  overflow:hidden;
  margin:10px 0 10px;
}
#styleSwitcher #bgpattern span {
  display:block;
  float:left;
  width:20px;
  height:20px;
  border:1px solid black;
  margin:0 5px 0 0;
  cursor:pointer;
}
#styleSwitcher input[type="text"] {
  width:118px !important;
  padding:4px !important;
  height:auto !important;
}
</style>
<table border="0" id="styleSwitcher">
  <tr><th class="title" colspan="2">Ubah Tampilan Blog</th></tr>
  <tr>
    <td colspan="2">
     <div id="bgColorer">
      <span style="background-color:#A735E0;" onclick="bgSwitch(this.style.backgroundColor);"></span>
      <span style="background-color:#EF2D19;" onclick="bgSwitch(this.style.backgroundColor);"></span>
      <span style="background-color:#F1FF00;" onclick="bgSwitch(this.style.backgroundColor);"></span>
      <span style="background-color:#F49AC2;" onclick="bgSwitch(this.style.backgroundColor);"></span>
      <span style="background-color:#FA8D63;" onclick="bgSwitch(this.style.backgroundColor);"></span>
      <span style="background-color:#967878;" onclick="bgSwitch(this.style.backgroundColor);"></span>
      <span style="background-color:#49E84C;" onclick="bgSwitch(this.style.backgroundColor);"></span>
            </div>
     <div id="bgpattern">
      <span style="background:url(http://aiizahh-reader.googlecode.com/svn/trunk/patterns/amazing%20willows.png) repeat;" onclick="bgSwitch(this.style.background);"></span>
      <span style="background:url(http://aiizahh-reader.googlecode.com/svn/trunk/patterns/colorful%20circle.png) repeat;" onclick="bgSwitch(this.style.background);"></span>
      <span style="background:url(http://aiizahh-reader.googlecode.com/svn/trunk/patterns/pattern%20flowers.png) repeat;" onclick="bgSwitch(this.style.background);"></span>
      <span style="background:url(http://aiizahh-reader.googlecode.com/svn/trunk/patterns/colorful%20square.png) repeat;" onclick="bgSwitch(this.style.background);"></span>
      <span style="background:url(http://aiizahh-reader.googlecode.com/svn/trunk/patterns/tie.png) repeat;" onclick="bgSwitch(this.style.background);"></span>
      <span style="background:url(http://aiizahh-reader.googlecode.com/svn/trunk/patterns/kinder%20floral.png) repeat;" onclick="bgSwitch(this.style.background);"></span>
      <span style="background:url(http://aiizahh-reader.googlecode.com/svn/trunk/patterns/Brightness.png) repeat;" onclick="bgSwitch(this.style.background);"></span>
            </div>
        </td>
    </tr>
    <tr><th>Tipe Font</th>
        <td>
            <select onchange="fontSwitch(this.value);">
                <option selected="true">--</option>
                <option value="'Book Antiqua',Serif">Book Antiqua</option>
                <option value="'Times New Roman',Serif">Times New Roman</option>
                <option value="Georgia,Serif">Georgia</option>
                <option value="Arial,Sans-Serif">Arial</option>
                <option value="Tahoma,Verdana,Arial,Sans-Serif">Tahoma</option>
                <option value="'Trebuchet MS',Arial,Sans-Serif">Trebuchet</option>
                <option value="Verdana,Arial,Sans-Serif">Verdana</option>
                <option value="'Century Gothic',Tahoma,Verdana,Arial,Sans-Serif">Century Gothic</option>
                <option value="'Comic Sans MS',Serif">Comic Sans</option>
            </select>
        </td>
    </tr>
    <tr><th>Warna Font</th>
        <td><input type="text" id="fontColorer" value="#000000" onkeyup="fontColor(this.value);"/></td>
    </tr>
    <tr><th>Ukuran Huruf</th>
        <td><input type="text" id="fontSizer" value="12" maxlength="3" onkeyup="changeFontSize(this.value);"/></td>
    </tr>
    <tr><th>Reset</th>
        <td><button onclick="resetStyle();">Reset Semua Tampilan</button></td>
    </tr>
</table><small><a href="http://aiizahh.blogspot.com/2013/05/mengubah-tampilan-blog-dengan-style.html" target="blank">Pasang Widget Ini</a></small> 

6. Simpan Gadget dan lihat hasilnya

Demikianlah artikel penutup malam minggu ini yang berjudul Mengubah Tampilan Blog Praktis Terkeren semoga artikel ini dapat berguna dan bermanfaat bagi kita semua , bila ada tutur kata atau pengucapan saya yang kurang baik saya mohon maaf sebesar-besarnya , Wassalamualaikum.

Tutorial ini hanya berlaku sampai 1 tahun , maka dari itu anda segeralah memakai tutorial ini

Friday, June 7, 2013

Membuat Tombol Next Prev Di Samping Kanan Kiri Blog

Ketemu lagi dengan saya disini dan Alhamdulillah saya masih diberi kesempatan oleh Allah SWT untuk membagikan artikel kepada anda semua. Artikel pembuka hari ini yaitu artikelMembuat Tombol Next Prev Di Samping Kanan Kiri Blog , Cara ini sendiri saya terapkan di blog saya ini , kalau anda ingin melihat silahkan lihat pada kanan kiri blog ini , pastinya ada Tombol Next Prev Di Samping Kanan Kiri Blog ini. Tutorial ini sendiri di buat oleh blog www.kompiajaib.com yang telah memodifikasi Membuat Tombol Next Prev Di Samping Kanan Kiri Blog ini.

Membuat Tombol Next Prev Di Samping Kanan Kiri Blog

Sebelumnya saya juga pernah membagikan suatu tips kepada anda semua yaitu artikel yang berjudul Membuat Blockquote dengan Fungsi Popup Copy Plain yang berguna untuk memudahkan pengunjung dalam mencopy kode di blockquote kita.

Untuk menerapkan trik memindahkan tombol next prev dari bawah ke sisi kiri dan kanan blog ini seperti kata kompiajaib :  sebenarnya sederhana saja. Anda hanya perlu tambahkan kode "position:fixed" agar icon tetap mengambang. Tambahkan juga pengaturan jarak atas, kiri, dan kanannya.

Untuk Membuat Tombol Next Prev Di Samping Kanan Kiri Blog anda perlu melakukan langkah-langkahnya berikut in :

1. Loggin Ke blogger Anda
2. Klik Template > Edit HTML
3. Cari kode dibawah ini :
#blog-pager-newer-link{float:left}
#blog-pager-older-link{float:right}
#blog-pager{text-align:center}
4. Gantilah kode diatas dengan kode berikut ini :
#blog-pager-newer-link{float:left;position:fixed;left:10px;top:500px}
#blog-pager-older-link{float:right;position:fixed;right:10px;top:500px}
#blog-pager{text-align:center} 
5. Silahkan anda ganti kode css pengaturan tombol next prev lama (seperti kode di atas tadi) dengan kode di bawah ini:
a.home-link{visibility:hidden}#blog-pager-older-link a, #blog-pager-newer-link a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsj-K0N5iVxybyWMMarZlTXRifTaZVUcgMjYDHZXWrHQ9-1XF2s8dhh5qQHFPq42qB6vCJH0EKXe2Ukp5Tnh_q4ib3n13mOYDzk-1Eu4kIZjCNKN1l5qLbMc2lPrdrgSUTQuLVvsGWvMQ/s1600/nextprev.png) no-repeat transparent;text-indent:-99999em!important;}
#blog-pager-older-link a{float:right;position:fixed;right:10px;top:500px;display:block;width:35px;height:35px;background-position:-29px 0;transition:all 400ms ease-in-out}
#blog-pager-older-link a:hover{background-position:10px 0}
#blog-pager-newer-link a{float:left;position:fixed;left:10px;top:500px;display:block;width:35px;height:35px;background-position:0 -47px;transition:all 400ms ease-in-out}
#blog-pager-newer-link a:hover{background-position:-35px -47px}
Kode berwarna biru  itu adalah jarak icon dari tepi atas ,Silahkan atur jaraknya agar sesuai dengan blog Anda.

Anda juga bisa mengganti gambar Next Prev Di Samping Kanan Kiri Blog anda , dan anda bisa memilih jenis tombolnya dibawah ini :


Membuat Tombol Next Prev Di Samping Kanan Kiri Blog

http://i1287.photobucket.com/albums/a622/Planet_Ajaib/nextprevhijau_zps0a34c059.png

Membuat Tombol Next Prev Di Samping Kanan Kiri Blog

http://i1287.photobucket.com/albums/a622/Planet_Ajaib/nextprevhitam_zpsc058a99e.png

Membuat Tombol Next Prev Di Samping Kanan Kiri Blog

http://i1287.photobucket.com/albums/a622/Planet_Ajaib/nextprevkuning_zps3ac71ab2.png

Membuat Tombol Next Prev Di Samping Kanan Kiri Blog

http://i1287.photobucket.com/albums/a622/Planet_Ajaib/nextprevungu_zps39532b73.png

Membuat Tombol Next Prev Di Samping Kanan Kiri Blog

http://i1287.photobucket.com/albums/a622/Planet_Ajaib/nextprevbiru_zpsa96b9cbf.png

Anda bisa memilih warna kesukaan anda , juga bisa memilih sesuai warna template blog anda.

Demikianlah artikel saya hari ini tentang Membuat Tombol Next Prev Di Samping Kanan Kiri Blog semoga artikel ini bisa bermanfaat dan berguna bagi anda semua, dan bila ada tutur kata atau pengucapan saya yang kurang baik saya mohon maaf sebesar-besarnya , Wassalamuaikum.

Membuat Blockquote dengan Fungsi Popup Copy Plain

Ketemu lagi bersama saya di blog ini dan Alhamdulillah nya saya masih diberi kesempatan oleh Allah SWT untuk membagikan postingan kepada anda semua. Postingan kali ini yaitu berjudul Membuat Blockquote Dengan Fungsi Popup Copy Plain yang merupakan artikel kedua saya pada hari ini. Setelah sebelumnya saya juga pernah membagikan suatu template yaitu 3 Template Blog SEO Terkeren 2013 yang merupakan template seo yang saya kumpulkan dan saya bagikan  kepada anda semua , dan tidak ada salahnya anda juga mencoba template tersebut.

Apa fungsi Blockquote dengan Fungsi Popup Copy Plain ini ?? Blockquote dengan Fungsi Popup Copy Plain ini berguna agar pengunjung yang akan mengcopy kode tidak perlu memblok teks atau kode yang admin berikan. Hanya klik tombol copy text click here kemudian akan muncul jendela popup yang memuat kode yang ada di dalam blockquote yang sudah terseleksi, sehingga pengunjung hanya perlu melakukan ctrl + c di blog kita.

Berikut ini contoh Blockquote dengan Fungsi Popup Copy Plain yang saya gunakan sendiri di blog saya :

Membuat Blockquote dengan Fungsi Popup Copy Plain

Jika anda tertarik Membuat Blockquote dengan Fungsi Popup Copy Plain silahkan ikuti cara-caranya yang akan saya bahas di bawah ini :

1. Loggin ke Blogger Anda
2. Klik Template > Edit HTML
3. Jika anda takut salah , silahkan anda download templatenya dulu
4. Letakkan kode CSS berikut di atas kode ]]></b:skin>
blockquote{position:relative}
blockquote .c_b{display:block;position:absolute;top:0;right:0;z-index:99;padding:2px 5px;} 4. Selanjutnya Letakkan kode di bawah ini di atas kode </body>
<script type='text/javascript'>
//<![CDATA[
function copy_code(id) {
var ref = document.getElementById(id),
code = ref.getElementsByTagName('code')[0].innerHTML,
w_w = window.innerWidth,
w_h = window.innerHeight,
win = window.open('', '', 'left=' + ((w_w/2)-250) + ',top=' + ((w_h/2)-150) + ',width=500,height=300,scrollbars=0');
win.document.write('<!DOCTYPE html><html><head><title>Source Code</title><style type="text/css">*{margin:0;padding:0}body{padding:10px;text-aign:center}textarea{display:block;width:98%;height:270px;padding:1px 1px;margin:0 auto;text-align:left;overflow:auto}</style></head><body><textarea>' + code.replace(/<(.*?)>/g, "") + '</textarea><scr' + 'ipt type="text/javascript">var a=document.getElementsByTagName(\'textarea\')[0];a.focus();a.select();</scr' + 'ipt></body></html>');
}
function add_copy_button() {
var pre = document.getElementsByTagName('blockquote');
for (var i = 0; i < pre.length; i++) {
pre[i].id = 'code-' + i;
pre[i].className += ' quick-copy';
pre[i].innerHTML += '<a class="c_b" href="javascript:copy_code(\'code-' + i + '\');" title="Copy Text Click Here">Copy Text Click Here</a>';
}
} add_copy_button();
//]]>
</script>
5, Simpan template anda
6. Untuk menambahkan Fungsi Popup Copy Plain ini , saat anda membuat postingananda harus tambahkan kode <code>...</code> di dalam blockquote. Sehingga tampilannya  persis (sama) seperti di bawah ini
<blockquote>
<code>
...
Isi kode  Blockquote
...
</code>
</blockquote>

Saya rasa cukup demikanlah artikel  Membuat Blockquote dengan Fungsi Popup Copy Plain penutup artikel saya hari ini , Semoga anda memahaminya.

Demikianlah artikel saya tentang Membuat Blockquote dengan Fungsi Popup Copy Plain. Semoga bisa bermanfaat dan berguna bagi kita semua , apabila ada kata yang kurang berkenan saya mohon maaf sebesar-besarnya , Wassalamuaikum

Wednesday, June 5, 2013

Teknik Mendesain Template Blog

Alhamdulillah sob artikel Teknik Mendesain Template Blog ini merupakan artikel ketiga saya hari ini dan sebenarnya saya sudah agak mengantuk nih sob , tapi saya sempatkan untuk menulis artikel dulu untuk penutupan artikel pada hari ini. Sebenarnya ada banyak Teknik untuk Mendesain Template Blog , Tapi saya kali ini hanya akan membagikan beberapa tips-tips dasar Teknik Mendesain Template Blog agar blog anda lebih terarah dalam Mendesain Template Blog agar hasil mendesainnya tambah bagus.

Template yang saya gunakan sendiri merupakan hasil  Mendesain Template Blog dari maskolis pemilik blog www.maskolis.com. Yang tentunya blog maskolis ini memang sudah benar-benar master blog indonesia dalam masalah SEO (Search Engine Optimazation) dan dalam masalah membuat template blog keren.

Teknik Mendesain Template Blog
Berikut ini Teknik Mendesain Template Blog :

1. Loading Blog yang Super Cepat dan Ringan

Loading blog merupakan salah satu penunjang agar blog anda bisa mendapatkan perhatian dari Search Engine Google , Karena search engine google menyukai blog dengan loading Blog yang super cepat dan Ringan. Apabila anda mau membuat blog anda cepat dan ringan , anda bisa baca tutorialnya di artikel saya yang berjudul Membuat Loading Blog Super Cepat dan Ringan

2. Mendesain Blog Sesuai Dengan Selera Pengunjung

Selera pengunjung juga sangat berpengaruh terhadap blog kita , apalagi tampilan blog kita. Apabila blog kita mempunya tampilan yang enak dilihat oleh pengunjung , pastinya pengunjung pun betah berlama-lama di blog kita , dan pengunjung tersebutpun akan senang berada di blog kita

3. Meyembunyikan CSS agar blog Cepat

Selain teknik nomer satu diatas ada juga teknik lain untuk mempercepat loading blog kita yaitu dengan membuat blog Valid CSS3 Karena apabila blog kita sudah Valid CSS3 maka size (ukuran) blog kita pun akan semakin kecil atau sedikit yang dapat membuat loading blog cepat , apabila anda ingin blog anda Valid CSS3 silahkan simak postingan saya tentang Cara Membuat Blog Valid CSS3.

Nah , cara Teknik Mendesain Template Blog hanyalah sebagian kecil cara mendesain template blog. Apabila kurang caranya saya mohon maaf , karena saya juga sudah mengantuk jadinya sudah tidak sepenuhnya bersemangat untuk menulis artikel , bawaannya cuma mau tidurr terus , hehehe.

Demikianlah postingan penutup hari ini tentang Teknik Mendesain Template Blog. Semoga teknik ini dapat bermanfaat bagi anda semua. Bila ada tutur kata atau penguacapan saya yang kurang baik saya mohon maaf sebesar-besarnya

Monday, June 3, 2013

Template Blog SEO dan Responsive Keren

Alhamdulillah saya masih diberi kesempatan untuk memposting artikel kepada sobat semua. Saya menyempatkan diri saya menulis artikel di tengah kesibukan saya dalam belajar soal ulangan kenaikan kelas karena saya telah cinta kepada dunia blogging , hehehe . Saya mengawali hari ini dengan artikel  yang berjudul Template Blog SEO dan Responsive Keren . Semoga artikel Template Blog SEO dan Responsive Keren dapat di cari oleh mesin engine google atau lebih tempatnya menduduki posisi pertama , Amiin

Kalau sekarang saya mengawali hari dengan artikel Template Blog SEO dan Responsive Keren. Kalau hari kemarin kalau gak salah saya pernah membuka hari kemarin dengan artikel yang berjudul Membuat Random Post SEO Terkeren dan fungsi artikel kemarin juga dapat mempercantik blog sobat blogger semua.

Template ini sendiri dibuat oleh master blog indonesia yaitu Maskolis pemilik blog maskolis.com . yang sudah tidak diragukan lagi kemampuannya , blognya aja mempunyai alexa kurang dari 9000 dunia (WoOw). Berikut ini penampakan Template Blog SEO dan Responsive Keren :

Pakdhe Johny

Pakdhe Johny

Fitur yang disediakan oleh MASKOLIS pada template ini :
  • Artikel terkait dengan thumbnail
  • Tag H1 dan H2 juga sudah dipasang
  • Coba klik salah satu gambar di homepage, fitur apa itu namanya?
  • Dan masih banyak lagi yang masih belum dipasang
  • Camera Slideshow
  • Floating Social Bookmark
  • Responsive Layout (menurut maskolis)
  • Banner iklan 728 x 90 di bawah header
Kata MASKOLIS Untuk mengaktifkan camera slideshow, cari kode ini di Edit HTML :
blogURL:'http://pakdhe-johny.blogspot.com/',
Ganti URL warna kuning diatas, dengan URL blog Sobat.
Untuk Mengganti Floating Pada template ini maka sobat cari kode
<div class='sosmed-kananblogger' onmouseout='this.className
dan dibawah kode diatas , sobat tinggal mengeditnya.

Template Blog SEO dan Responsive Keren yang ke dua :

Johny Ribet

Template Blog SEO dan Responsive Keren

DEMO | DOWNLOAD

Fitur yang disediakan oleh MASKOLIS pada template ini :
  • Artikel terkait dengan thumbnail
  • Tag H1 dan H2 juga sudah dipasang
  • Coba klik salah satu gambar di homepage, fitur apa itu namanya?
  • Dan masih banyak lagi yang masih belum dipasang
  • Camera Slideshow
  • Floating Social Bookmark
  • Responsive Layout (menurut maskolis)
Cara mengganti Floating Bookmars , sama seperti template yang pertama tadi.
Semoga MASKOLIS dapet membuat template-template yang lebih keren lagi ,dan tentunya lebih SEO lagi.

Kalau sobat ingin lebih mengoptimalisasi template diatas agar SEO , Valid HTML5 , Valid CSS3 , sobat bisa mengunjungi artikel saya tentang :
Dan dengan cara-cara diatas sobat blogger bisa lebih menambah kualitas blog sobat.
Demikianlah artikel pertama saya hari ini tentang Template Blog SEO dan Responsive Keren. Semoga Template buatas MASKOLIS ini dapat berguna dan bermanfaat bagi sobat semua. Semoga juga maskolis sehat terus agar bisa membuat template yang lebih keren tentunya. Seperti biasanya sob , bila ada tutur kata atau pengucapan saya yang kurang benar , mohon dimaafkan , Wassalamualaikum

Sumber : http://www.mas-arul.com/



Membuat Efek Balon Keren Pada Cursor Di Blog

Alhamdulillah sob saya masih diberi kesempatan untuk membagikan sesuatu kepada sobat semua. Sebenarnya saya sedang menjalani Ujian Kenaikan Kelas yaitu untuk saya menuju kelas 9 SMP. Tapi saya juga ingin membagikan sesuatu ke sobat makannya saya membagikan Membuat Efek Balon Keren Pada Cursor Di Blog sekarang. Artikel Membuat Efek Balon Keren Pada Cursor Di Blog menjadi pembuka artikel saya hari ini dan semoga artikel Membuat Efek Balon Keren Pada Cursor Di Blog dapat terindeks oleh mesin pencari Google , Amiin

Sebelumnya saya juga pernah membagikan kepada sobat informasi dan tutorial , yaitu informasi mengenai Wow Ternyata Google Sudah Peringkat 2 Alexa dan tutorial tentang Membuat Recent Comment Keren Dengan Pemberitahuan sobat bisa coba artikel-artikel disamping , siapa tahu dapat bermanfaat bagi sobat semua.

Efek Balon Keren Pada Cursor Di Blog juga bisa untuk memperindah tampilan blog sobat. Mengapa ??? karena efek ini memberikan keindahan berupa balon-balon yang berterbangan. Beginilah contoh gambar Efek Balon Keren Pada Cursor Di Blog :

Efek Balon Keren Pada Cursor Di Blog

Sobat sudah meliah gambar di atas kan ?? coba lihat bagian kanan gambar tersebut , bagian kanan diatas merupakan contoh Efek Balon Keren Pada Cursor Di Blog , dan tidak ada salahnya sobat mencobanya , karena saya pn pernah mencoba cara Membuat Efek Balon Keren Pada Cursor Di Blog ini.

Bila sobat ingin menerapkan tutorial diatas maka sobat harus lakukan langkah-langkah berikut :

1. Login ke Blogger Sobat
2. Klik Tata Letak > Tambahkan Gadget
3. Pastekan kode dibawah ini pada kolom yang disediakan di Tambahkan Gadget
<script type="text/javascript"> var colours=new Array("#EC0000", "#EC0000", "#EC0000", "#EC0000", "#EC0000"); // warna untuk border-top, border-right, border-bottom, border-left dan background gelembung var bubbles=100; // jumlah maksmal gelembung var x=ox=400; var y=oy=300; var swide=800; var shigh=600; var sleft=sdown=0; var bubb=new Array(); var bubbx=new Array(); var bubby=new Array(); var bubbs=new Array(); window.onload=function() { if (document.getElementById) { var rats, div; for (var i=0; i<bubbles; i++) { rats=createDiv("3px", "3px"); rats.style.visibility="hidden"; div=createDiv("auto", "auto"); rats.appendChild(div); div=div.style; div.top="1px"; div.left="0px"; div.bottom="1px"; div.right="0px"; div.borderLeft="1px solid "+colours[3]; div.borderRight="1px solid "+colours[1]; div=createDiv("auto", "auto"); rats.appendChild(div); div=div.style; div.top="0px"; div.left="1px"; div.right="1px"; div.bottom="0px" div.borderTop="1px solid "+colours[0]; div.borderBottom="1px solid "+colours[2]; div=createDiv("auto", "auto"); rats.appendChild(div); div=div.style; div.left="1px"; div.right="1px"; div.bottom="1px"; div.top="1px"; div.backgroundColor=colours[4]; div.opacity=0.5; if (document.all) div.filter="alpha(opacity=50)"; document.body.appendChild(rats); bubb[i]=rats.style; } set_scroll(); set_width(); bubble(); }} function bubble() { var c; if (x!=ox || y!=oy){ ox=x; oy=y; for (c=0; c<bubbles; c++) if (!bubby[c]) { bubb[c].left=(bubbx[c]=x)+"px"; bubb[c].top=(bubby[c]=y)+"px"; bubb[c].width="3px"; bubb[c].height="3px" bubb[c].visibility="visible"; bubbs[c]=3; break; } } for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c); setTimeout("bubble()", 40); } function update_bubb(i) { if (bubby[i]) { bubby[i]-=bubbs[i]/2+i%2; bubbx[i]+=(i%5-2)/5; if (bubby[i]>sdown && bubbx[i]>0) { if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) { bubb[i].width=bubbs[i]+"px"; bubb[i].height=bubbs[i]+"px"; } bubb[i].top=bubby[i]+"px"; bubb[i].left=bubbx[i]+"px"; } else { bubb[i].visibility="hidden"; bubby[i]=0; return; } } } document.onmousemove=mouse; function mouse(e) { set_scroll(); y=(e)?e.pageY:event.y+sleft; x=(e)?e.pageX:event.x+sdown; } window.onresize=set_width; function set_width() { if (document.documentElement && document.documentElement.clientWidth) { swide=document.documentElement.clientWidth; shigh=document.documentElement.clientHeight; } else if (typeof(self.innerHeight)=="number") { swide=self.innerWidth; shigh=self.innerHeight; } else if (document.body.clientWidth) { swide=document.body.clientWidth; shigh=document.body.clientHeight; } else { swide=800; shigh=600; } } window.onscroll=set_scroll; function set_scroll() { if (typeof(self.pageYOffset)=="number") { sdown=self.pageYOffset; sleft=self.pageXOffset; } else if (document.body.scrollTop || document.body.scrollLeft) { sdown=document.body.scrollTop; sleft=document.body.scrollLeft; } else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) { sleft=document.documentElement.scrollLeft; sdown=document.documentElement.scrollTop; } else { sdown=0; sleft=0; } } function createDiv(height, width) { var div=document.createElement("div"); div.style.position="absolute"; div.style.height=height; div.style.width=width; div.style.overflow="hidden"; return (div); } </script>
KETERANGAN : kode yang berwarna merah sobat sesuaikan dengan warna yang sobat mau.

4. Simpan Gadget
5. Lihat hasilnya di blog sobat

Mudah kan sob menerakan cara diatas ???
Demikianlah postingan saya kali ini yaitu tentang Membuat Efek Balon Keren Pada Cursor Di Blog Semoga bisa berguna dan bermanfaat bagi kita semua , Amiin . Dan seperti biasanya sob , bila ada tutur kata atau pengucapan saya yang kurang baik , saya mohon maaf sebesar-besarnya , Wassalam

Saturday, June 1, 2013

Membuat Recent Comment Keren Dengan Pemberitahuan

Ketemu lagi sob dengan saya di hari ini , artikel Membuat Recent Comment Keren Dengan Pemberitahuan ini merupakan artikel ke dua saya hari ini. Dan alhamdulillah saya masih bisa membagikan sesuatu kepada sobat blogger semua. Cara ini sendiri saya pakai di blog saya ini.

Apa Fungsi Recent Comment Keren (komentar terbaru) Dengan Pemberitahuan ??? Fungsi pemberitahuannya yaitu bila ada pengunjung yang memberikan komentar di blog sobat , lalu sobat sedang online di blognya , pasti langsung ada pemberitahuan komentar yang beruliskan "1 KOMENTAR BARU" . ini juga memudahkan kita sebagai pemilik blog untuk cepat-cepat membalas komentar pengunjung yang baru saja berkomentar di blog sobat. Berikut ini contoh gambar Recent Comment (komentar terbaru) keren :

Recent Comment Keren Dengan Pemberitahuan
Sobat tertarik untuk mencoba dan menerapkan cara  Recent Comment Keren Dengan Pemberitahuan di blog sobat ??? Bila sobat tertarik untuk mencobanya silahkan ikuti langkah-langkahnya berikut ini :

1. Login ke blogger Sobat
2. Setelah masuk ke dasboard  silahkan klik Template > Edit HTML 
3. Lalu sobat cari kode ]]></b:skin> Lalu letakan kode berikut tepat di atas nya
#outer-comment { Background: none; margin: 0; padding: 5px; width: auto; height: 300px; overflow: auto; border: 0px solid#000; }#boxcomment { border: 0px solid#000; background: #000; text-align: left; color: red; padding: 5px; margin-bottom: 5px; height: 20px; }#comments-total { color: #fff; text-align: center; margin-top: -20px; }.cm-outer { margin: 0 auto; padding: 0 0; font: normal normal 11px Arial,Sans-Serif; border: 0px solid; border-top: none; }.cm-outer li { margin: 0 0; padding: 7px 10px 12px; list-style: none; clear: both; border-top: 2px dotted; 2px; } .cm-outer .cm-header { margin: 0 0 5px; } .cm-outer .cm-content { overflow: hidden; } .cm-outer img { display: block; float: left; margin: 2px 10px 2px 0; border: 0px solid black; background: #8fa2cb url('http://img1.blogblog.com/img/anon36.png') no-repeat 50% 50%; overflow: hidden; -moz-transform: scaleX(1); -o-transform: scaleX(1); -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transition: all 2s ease; -moz-transition: all 2s ease; -ms-transition: all 2s ease; -o-transition: all 2s ease; transition: all 2s ease; } .cm-outer img:hover { display: block; float: left; margin: 2px 10px 2px 0; border: 0px solid black; background: #8fa2cb url('http://img1.blogblog.com/img/anon36.png') no-repeat 50% 50%; overflow: hidden; -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; }.accessible-hidden { position: absolute; top: -99px; left: -99px; width: 1px; height: 1px; }
 KETERANGAN : Kode yang berwarna merah silahkan sobat ngganti sesuai keinginan sobat.

4. Simpan template sobat
5. Selanjutnya untuk Membuat Recent Comment Keren Dengan Pemberitahuan sobat masuk ke Tata Letak > Tambahkan Gadget , lalu sobat masukan kode berikut ini :
<div id="outer-comment"><div id="boxcomment"><b>Total Comment:</b>
    <div id="comments-total"></div></div>
<div id="comments-container">Loading&hellip;</div>
<script type="text/javascript">
var cm_config = {
    home_page: "http://planetajaib.blogspot.com",
    max_result: 7,
    t_w: 32,
    t_h: 32,
    new_tab_link: true,
    tt_id: "comments-total",
    ct_id: "comments-container",
    new_cm: " Komentar Baru!",
    interval: 30000,
    alert: true
};
</script>
    <script type="text/javascript" src="http://karina-project.googlecode.com/files/recent-comments-script-with-notification.js"></script></div>
KETERANGAN : Sobat ganti url http://planetajaib.blogspot.com dengan Url Blog sobat.
6. Simpan atau Save

Cara pemasang Recent Comment Keren Dengan Pemberitahuannya mudah kan sob ???? iya lah ,..kalau kita terus berusaha pasti mudah kok ... hehehe

Demikianlah artikel kedua saya hari ini yang berjudul Membuat Recent Comment Keren Dengan Pemberitahuan semoga artikel dari saya dapat berguna dan bermanfaat bagi blog sobat. Dan seperti biasanya sob , bila ada tutur kata atau pengucapan saya yang kurang baik saya mohon maaf sebesar-besarnya , Wassalamualaikum.

Membuat Random Post SEO Terkeren

Ketemu lagi sob dengan saya disini , mungkin saya mengawali hari ini dengan sebuat artikel yaitu artikel Membuat Random Post SEO Terkeren , saya juga telah mencoba widget Random Post SEO Terkeren ini sob. Makannya saya langsung bagikan kepada sobat blogger semua.

Setelah sebelumnya saya pernah membagikan tentang cara Mengecek Kualitas Meta Tag Blog Sobat yang berguna untuk sobat mengecek Kualitas Meta Tag blog sobat , dan bila kualitas meta tag blog sobat tidak baik / bagus maka segeralah sobat memperbaiki meta tag nya.

Saya sekarang lagi rajin-rajinnya membuat artikel tanpa Copy Paste karena sebentar lagi google akan mengadakan UPDATE PAGERANK tahun 2013. Seperti yang dikatakan oleh Mbak indah yaitu pagerank google akan update di minggu pertama bulan juni ini. Dan semoga pagerank blog saya juga naik dan pagerank blog sobat semua juga akan naik ,  Amiin ya robbal alamin.

Kalau sobat ingin pagerank sobat naik , segeralah sobat kurangi hobi Copy Paste karena hoby Copy Paste ini sangat tidak baik untuk blog sobat dimata Search Engine.

Balik ke tutorial sob , Random Post atau Artikel Acak merupakan widget yang berisi tentang artikel-artikel secara acak (Random) dan siapa tahu artikel acak tersebut yang akan dicari oleh pengunjung blog kita. Berikut ini contoh gambar Random Post nya :

 Random Post SEO Terkeren

Gambar Random Postnya rapi kan sob ???? iya dong . Sobat mau nih ??? Pastinya dong , hehehe
Kalau sobat mau widget Random Post SEO Terkeren silahkan ikuti cara-caranya dibawah ini :

1. Login ke blogger sobat
2. Pilih Template > Edit HTML
3. Masukan kode berikut ini di atas kode ]]></b:skin>
#random-post ul li {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjseI3D6TlBIg4CmMPRlg5mC_FwU-OvB4-rArfbkxVPXiElaJvoCY2dkcoFD_Ljm8q89XzQEdZB6KjZI6CK1ekSp311DMzqBpbtj0HJ6mVaUwe93JxnCTYFszblUblFBXWBeLxc25ZGz-U_/s400/33.gif") no-repeat scroll 5px 8px #E1E1E1;
margin: 0 0 5px;
padding: 5px 5px 5px 20px !important;
}
4. Simpan Template Sobat
5. Selanjutnya , Letakan kode dibawah ini pada Tata Letak > Tambahkan Gadget
<div id="random-post">
<script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=8;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + " title=" + entry.title.$t +">" + entry.title.$t + "</a> </li>";
document.write(item);}}
}document.write('</ul>');}
</script>
<script src="/feeds/posts/default?alt=json-in-script&amp;start-index=1&amp;max-results=1000&amp;callback=randomposts" type="text/javascript"></script></div>
6. Save atau Simpan dan lihat hasilnya di blog sobat

Cara-cara diatas mudah bukan sob ??? iya dong , kalau mau berusaha pasti menjadi mudah kok sob.

Demikianlah artikel pembukaan pada hari minggu ini tentang Membuat Random Post SEO Terkeren. Semoga Artikel dari saya ini dapat membantu sobat dalam masalah blogging. Dan seperti biasanya sob , bila ada tutur kata atau pengucapan saya yang kurang berkenan mohon dimaafkan , Wassalamualaikum

Friday, May 31, 2013

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.

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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQqj6-ye1irM-UVXWjhQTgv2giPgGDh_lCUV6rOgApZU7iUutimnMg73nii-JRouFdSb-ah_7Xs1gsXk77bfr8OB8npnjHopAFCj9sg6pDXAl8ncJYMvHKxDh1jMs42jwOMp49AZW9Iek/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 20, 2013

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.