What's New Here?

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

Membuat Share Box Melayang di Blog


Kang Fiqih | Assalamu'alaikum wr.wb., artikel akan laris manis dibaca pengunjung karena konten yang dimuat di dalamnya. Namun itu tidaklah cukup, harus ada yang dilakukan oleh Anda untuk mempromosikan artikel tersebut kepada khalayak. Salah satu caranya adalah lewat media sosial karena media sosial merupakan media yang paling prospektif. 

Facebook, Twitter, dan Google+ adalah salat satu media sosial yang saat ini bisa dibilang paling populer diantara yang lainnya. Lewat itu, artikel yang kita posting akan semakin banyak dikunjungi dan hal tersebut membuat blog lebih dikenal.

Sekarang banyak penyedia widget untuk membuat share artikel blog lewat media sosial, diantaranya adalah AddThis. Banyak pilihan, tool ini bergaya sederhana dan punya kemampuan luar biasa dalam hal share keratusan sosial media.

Widget ini bisa dibilang musti ada di blog Anda demi memperlebar cakupan blog yang Anda miliki. Untuk itu harus ada suatu kemudahan bagi para pembaca/pengujung blog untuk membagikan artikel yang sedang dibacanya, widget melayang mungkin bisa menjadi solusi untuk masalah tersebut. Dengan widget melayang, para pembaca sadar atau tidak sadar pasti akan melihat tombol berbagi/share di samping artikelnya. Tidak perlu lagi mencari-cari karena itu hanya akan membuat para pembaca akan malas untuk berbaginya juga.

Karena masalah tersebut, saya akan memberikan sedikit tutorial kepada Anda mengenai bagaimana cara Membuat Share Box Melayang di Blog. Silahkan disimak langkah-langkahnya:

  • Login ke Akun Blog Anda.
  • Beralih ke pengaturan layout blog dengan meng-klik Tata Letak.
  • Setelah itu klik Tambah Gadget dan pilih HTML/Javascript.
  • Copy dan paste-kan kode dibawah ini.
  • Selesai dan klik Simpan.

Itulah tutorial singkat untuk membuat share box di blog. Mudah-mudahan artikel ini dapat membantu Anda untuk membuat blog Anda terlihat lebih profesional dan lebih menarik.

Membuat Share Box Melayang di Blog

Posted by Unknown No comments


Kang Fiqih | Assalamu'alaikum wr.wb., artikel akan laris manis dibaca pengunjung karena konten yang dimuat di dalamnya. Namun itu tidaklah cukup, harus ada yang dilakukan oleh Anda untuk mempromosikan artikel tersebut kepada khalayak. Salah satu caranya adalah lewat media sosial karena media sosial merupakan media yang paling prospektif. 

Facebook, Twitter, dan Google+ adalah salat satu media sosial yang saat ini bisa dibilang paling populer diantara yang lainnya. Lewat itu, artikel yang kita posting akan semakin banyak dikunjungi dan hal tersebut membuat blog lebih dikenal.

Sekarang banyak penyedia widget untuk membuat share artikel blog lewat media sosial, diantaranya adalah AddThis. Banyak pilihan, tool ini bergaya sederhana dan punya kemampuan luar biasa dalam hal share keratusan sosial media.

Widget ini bisa dibilang musti ada di blog Anda demi memperlebar cakupan blog yang Anda miliki. Untuk itu harus ada suatu kemudahan bagi para pembaca/pengujung blog untuk membagikan artikel yang sedang dibacanya, widget melayang mungkin bisa menjadi solusi untuk masalah tersebut. Dengan widget melayang, para pembaca sadar atau tidak sadar pasti akan melihat tombol berbagi/share di samping artikelnya. Tidak perlu lagi mencari-cari karena itu hanya akan membuat para pembaca akan malas untuk berbaginya juga.

Karena masalah tersebut, saya akan memberikan sedikit tutorial kepada Anda mengenai bagaimana cara Membuat Share Box Melayang di Blog. Silahkan disimak langkah-langkahnya:

  • Login ke Akun Blog Anda.
  • Beralih ke pengaturan layout blog dengan meng-klik Tata Letak.
  • Setelah itu klik Tambah Gadget dan pilih HTML/Javascript.
  • Copy dan paste-kan kode dibawah ini.
  • Selesai dan klik Simpan.

Itulah tutorial singkat untuk membuat share box di blog. Mudah-mudahan artikel ini dapat membantu Anda untuk membuat blog Anda terlihat lebih profesional dan lebih menarik.

Membuat Kode Warna HTML di Blog


Kang Fiqih | Assalamu'alaikum wr.wb., selamat pagi semua, di hari yang cerah dan sangat dingin sekarang ini saya akan berbagi/share mengenai cara Membuat Kode Warna HTML di Blog. Di era blogging modern ini, bisa kita lihat sudah banyak sekali website/blog yang memasang kode warna html di blog-nya masing-masing.

Apakah Anda pernah berfikir untuk memasang kode warna HTML tersebut di blog yang Anda miliki, tapi Anda belum tahu caranya? Tenang saja kawan, caranya cukup mudah kok ..

Kode warna HTML ini kita akan pasangkan/postingkan di artikel blog kita dan tentu saja blog kita ini akan terlihat lebih profesional di mata pengunjung blog kita. Selain itu, kode warna HTML di blog ini juga akan memudahkan kita untuk mencari dan mengetahui jika seandainya sedang mencari kode HTML untuk warna yang kita inginkan. Fungsinya yang utama pasti untuk memperindah blog dan membuat blog menjadi lebih berwarna, tapi juga mempunyai fungsi yang lebih dari itu.

Nah, jadi tak ada salahnya jika Anda memasang kode warna HTML ini di postingan blog Anda. Tapi jika Anda ingin memasang ini di tempat lain, misal di sidebar blog juga bisa. Anda tinggal membuka HTML-Javascript dan mempaste kode-nya di sana. Untuk Membuat Kode Warna HTML di Blog di postingan blog, berikut turorialnya:

  • Login ke Akun Blogn Anda.
  • Klik Entri Baru yang ada disebelah kiri atas beranda blog Anda.
  • Pada menu pembuatan artikel, pilih HTML bukan Compose.
  • Copy kode/script di bawah ini dan simpan di postingan blog Anda.
  • Berikan judul sesuai dengan keinginan Anda.
  • Beri label yang tepat dan beri deskripsi.
  • Setelah semua sudah fix, klik Publikasikan di sebelah kanan atas blog.

Jika Anda sudah melakukan langkah-langkahnya dengan benar, maka hasilnya kurang lebih seperti ini:


Membuat Kode Warna HTML di Blog

Posted by Unknown No comments


Kang Fiqih | Assalamu'alaikum wr.wb., selamat pagi semua, di hari yang cerah dan sangat dingin sekarang ini saya akan berbagi/share mengenai cara Membuat Kode Warna HTML di Blog. Di era blogging modern ini, bisa kita lihat sudah banyak sekali website/blog yang memasang kode warna html di blog-nya masing-masing.

Apakah Anda pernah berfikir untuk memasang kode warna HTML tersebut di blog yang Anda miliki, tapi Anda belum tahu caranya? Tenang saja kawan, caranya cukup mudah kok ..

Kode warna HTML ini kita akan pasangkan/postingkan di artikel blog kita dan tentu saja blog kita ini akan terlihat lebih profesional di mata pengunjung blog kita. Selain itu, kode warna HTML di blog ini juga akan memudahkan kita untuk mencari dan mengetahui jika seandainya sedang mencari kode HTML untuk warna yang kita inginkan. Fungsinya yang utama pasti untuk memperindah blog dan membuat blog menjadi lebih berwarna, tapi juga mempunyai fungsi yang lebih dari itu.

Nah, jadi tak ada salahnya jika Anda memasang kode warna HTML ini di postingan blog Anda. Tapi jika Anda ingin memasang ini di tempat lain, misal di sidebar blog juga bisa. Anda tinggal membuka HTML-Javascript dan mempaste kode-nya di sana. Untuk Membuat Kode Warna HTML di Blog di postingan blog, berikut turorialnya:

  • Login ke Akun Blogn Anda.
  • Klik Entri Baru yang ada disebelah kiri atas beranda blog Anda.
  • Pada menu pembuatan artikel, pilih HTML bukan Compose.
  • Copy kode/script di bawah ini dan simpan di postingan blog Anda.
  • Berikan judul sesuai dengan keinginan Anda.
  • Beri label yang tepat dan beri deskripsi.
  • Setelah semua sudah fix, klik Publikasikan di sebelah kanan atas blog.

Jika Anda sudah melakukan langkah-langkahnya dengan benar, maka hasilnya kurang lebih seperti ini:


Mengganti dan Menambah Jenis Font (Font Style) di Blog


Kang Fiqih | Assalamu'alaikum wr.wb., sekarang disini saya akan memberikan tutorial tentang bagaimana cara Mengganti dan Menambah Jenis Font (Font Style) di Blog. Awal saya ingin memposting artikel ini karena setelah saya mengganti tema blog beberapa kali, jenis font yang ada di blog kadang sering kali tidak cocok dan tidak srek menurut saya.

Beranjak dari itu, muncul pemikiran untuk saya mengganti font di blog. Dan caranya pun terbilang sangat mudah, Anda hanya tinggal menambahkan dan mengganti jenis font dengan memakai Google Font karena kebanyakan template hasil download tidak bisa diedit di perancang template. Jadi untuk mengganti fontnya, anda perlu melakukan hal-hal sederhana berikut :

Memilih jenis font

  • Buka situs http://www.google.com/fonts/
  • Pilihlah jenis font (font style) yang Anda inginkan terlebih dahulu, setelah Anda menemukan jenis font yang cocok menurut Anda, klik Add To Collection pada bagian kanan bawah di pilihan font Anda. Bisa pilih lebih dari satu jenis huruf jika diperlukan. 


    • Jika Anda sudah selesai memilih huruf silahkan Anda klik Use.


    • Anda akan dibawa ke halaman berbeda, di halaman tersebut Anda tinggal meng-copy kode yang diberikan untuk dipasang di blog Anda.

      

    Menambah font pada blog

    • Jika sudah menyelesaikan langkah-langkah di atas sekarang tinggal masuk ke akun blog Anda.
    • Klik menu Template --> Edit HTML.
    • Cari kode ]]></b:skin> dan paste kode yang dicopy dari google font tadi dibawahnya.
    • Tambahkan / sebelum tag penutup > pada kode tersebut. Hasilnya akan tampak seperti contoh di bawah ini
    <link href='http://fonts.googleapis.com/css?family=Kite+One' rel='stylesheet' type='text/css' />
    • Simpan Template.

    Menggunakan font di blog

    Sekarang setelah melakukan tahapan-tahapan sebelumnya, Anda tinggal mengimplementasikannya saja di blog Anda. Contoh seperti di bawah ini (Anda tinggal mengaturnya sesuai dengan keinginan Anda).

    #outer-wrapper {
     margin:0 auto;
     padding:0px;
     text-align:$startSide;
    font-family:"Kite One";
    font-size:13px;
    margin:10px auto;
     }

    Cukup sekian tutorial mengenai cara Mengganti dan Menambah Jenis Font (Font Style) di Blog. Terimakasih atas kunjungannya di blog saya dan mohon maaf bila terdapat kekurangan.

    Mengganti dan Menambah Jenis Font (Font Style) di Blog

    Posted by Unknown 5 comments


    Kang Fiqih | Assalamu'alaikum wr.wb., sekarang disini saya akan memberikan tutorial tentang bagaimana cara Mengganti dan Menambah Jenis Font (Font Style) di Blog. Awal saya ingin memposting artikel ini karena setelah saya mengganti tema blog beberapa kali, jenis font yang ada di blog kadang sering kali tidak cocok dan tidak srek menurut saya.

    Beranjak dari itu, muncul pemikiran untuk saya mengganti font di blog. Dan caranya pun terbilang sangat mudah, Anda hanya tinggal menambahkan dan mengganti jenis font dengan memakai Google Font karena kebanyakan template hasil download tidak bisa diedit di perancang template. Jadi untuk mengganti fontnya, anda perlu melakukan hal-hal sederhana berikut :

    Memilih jenis font

    • Buka situs http://www.google.com/fonts/
    • Pilihlah jenis font (font style) yang Anda inginkan terlebih dahulu, setelah Anda menemukan jenis font yang cocok menurut Anda, klik Add To Collection pada bagian kanan bawah di pilihan font Anda. Bisa pilih lebih dari satu jenis huruf jika diperlukan. 


      • Jika Anda sudah selesai memilih huruf silahkan Anda klik Use.


      • Anda akan dibawa ke halaman berbeda, di halaman tersebut Anda tinggal meng-copy kode yang diberikan untuk dipasang di blog Anda.

        

      Menambah font pada blog

      • Jika sudah menyelesaikan langkah-langkah di atas sekarang tinggal masuk ke akun blog Anda.
      • Klik menu Template --> Edit HTML.
      • Cari kode ]]></b:skin> dan paste kode yang dicopy dari google font tadi dibawahnya.
      • Tambahkan / sebelum tag penutup > pada kode tersebut. Hasilnya akan tampak seperti contoh di bawah ini
      <link href='http://fonts.googleapis.com/css?family=Kite+One' rel='stylesheet' type='text/css' />
      • Simpan Template.

      Menggunakan font di blog

      Sekarang setelah melakukan tahapan-tahapan sebelumnya, Anda tinggal mengimplementasikannya saja di blog Anda. Contoh seperti di bawah ini (Anda tinggal mengaturnya sesuai dengan keinginan Anda).

      #outer-wrapper {
       margin:0 auto;
       padding:0px;
       text-align:$startSide;
      font-family:"Kite One";
      font-size:13px;
      margin:10px auto;
       }

      Cukup sekian tutorial mengenai cara Mengganti dan Menambah Jenis Font (Font Style) di Blog. Terimakasih atas kunjungannya di blog saya dan mohon maaf bila terdapat kekurangan.

      Cara Memindahkan Blog ke Akun Lain


      Kang Fiqih | Assalamu'alaikum wr.wb., bagaimana kabarnya sahabat blog kangfiqih? Pada sehat-sehat kan'? Syukran Alhamdulillah deh kalau gitu.. he .. Kemarin saya mendapatkan pertanyaan mengenai permasalahan teman saya tentang cara untuk memindahkan blog ke akun blog lain.

      Hal-hal seperti ini sering terjadi karena beberapa alasan, yang pertama mungkin bisa dikarenakan akan adanya pemasangan Google Adsense yang pada dasarnya tidak boleh ada 2 blog dalah satu akun yang boleh menampilkan si iklan google ini, dan yang kedua bisa jadi dikarenakan adanya blogger yang ingin menjual ataupun membeli sebuah blog, agar tak terjadi permasalahan yang panjang dikemudian hari, cara terbaiknya adalah memindahkan blog yang akan di beli kepada sang pembeli blog tersebut.

      Saya akan sedikit memberikan Cara untuk Memindahkan Blog ke Akun Lain yang bisa dilakukan dengan fitur blogger itu sendiri. Berikut langkah-langkahnya:

      1. Langkah pertama yang harus Anda lakukan adalah menyiapkan dua buah akun email google (gmail). Katakan saja akun google yang pertama si penjual dilambangkan dengan "P" dan akun google yang kedua dilambangkan dengan "Y". (disini saya akan memberikan contoh dengan akun google yang saya miliki)

      2. Login ke Akun blog si P.

      3. Pilih menu Setelan lalu klik sub menu Dasar.

      4. Di sana ada link yang bertuliskan "+Tambahkan Penulis". Klik link tersebut lalu masukkan akun google (gmail) si Y. Setelah itu kirim undangannya.


      5. Buka akun google si Y, dia akan mendapatkan sebuah pesan yang berisi undangan yang didapat dari si X. Terima undangan tersebut.

      6. Setelah si akun Y telah menjadi Penulis, balik lagi ke akun blog si P. Ubah statusnya dari Penulis menjadi Admin.


      7. Setelah Anda menjadikan akun si Y menjadi Admin. Maka pada akun si P akan muncul tanda X yang jika Anda klik akan menghapus si akun P.

      Itulah sedikit cara memindahkan blog ke akun lain. Mudah-mudahan artikel ini dapat bermanfaat untuk Anda semua.


      Selamat beraktifitas dan sampai jumpa ...


      Cara Memindahkan Blog ke Akun Lain

      Posted by Unknown No comments


      Kang Fiqih | Assalamu'alaikum wr.wb., bagaimana kabarnya sahabat blog kangfiqih? Pada sehat-sehat kan'? Syukran Alhamdulillah deh kalau gitu.. he .. Kemarin saya mendapatkan pertanyaan mengenai permasalahan teman saya tentang cara untuk memindahkan blog ke akun blog lain.

      Hal-hal seperti ini sering terjadi karena beberapa alasan, yang pertama mungkin bisa dikarenakan akan adanya pemasangan Google Adsense yang pada dasarnya tidak boleh ada 2 blog dalah satu akun yang boleh menampilkan si iklan google ini, dan yang kedua bisa jadi dikarenakan adanya blogger yang ingin menjual ataupun membeli sebuah blog, agar tak terjadi permasalahan yang panjang dikemudian hari, cara terbaiknya adalah memindahkan blog yang akan di beli kepada sang pembeli blog tersebut.

      Saya akan sedikit memberikan Cara untuk Memindahkan Blog ke Akun Lain yang bisa dilakukan dengan fitur blogger itu sendiri. Berikut langkah-langkahnya:

      1. Langkah pertama yang harus Anda lakukan adalah menyiapkan dua buah akun email google (gmail). Katakan saja akun google yang pertama si penjual dilambangkan dengan "P" dan akun google yang kedua dilambangkan dengan "Y". (disini saya akan memberikan contoh dengan akun google yang saya miliki)

      2. Login ke Akun blog si P.

      3. Pilih menu Setelan lalu klik sub menu Dasar.

      4. Di sana ada link yang bertuliskan "+Tambahkan Penulis". Klik link tersebut lalu masukkan akun google (gmail) si Y. Setelah itu kirim undangannya.


      5. Buka akun google si Y, dia akan mendapatkan sebuah pesan yang berisi undangan yang didapat dari si X. Terima undangan tersebut.

      6. Setelah si akun Y telah menjadi Penulis, balik lagi ke akun blog si P. Ubah statusnya dari Penulis menjadi Admin.


      7. Setelah Anda menjadikan akun si Y menjadi Admin. Maka pada akun si P akan muncul tanda X yang jika Anda klik akan menghapus si akun P.

      Itulah sedikit cara memindahkan blog ke akun lain. Mudah-mudahan artikel ini dapat bermanfaat untuk Anda semua.


      Selamat beraktifitas dan sampai jumpa ...


      Membuat Info Panel Slide (Tersembunyi)


      Kang Fiqih | Assalamu'alaikum wr.wb., baru kali ini saya merasakan yang selalu dirasakan kebanyakan orang di bulan ramadhan, apalagi namanya kalau bukan "mudik". Memang, setelah melakukan mudik, ada suka dan ada duka yang saya rasakan pada saat itu. Sudah ceritanya sampai disana..hehe .. Sekarang kita masuk ke pembahasan saja, pertemuan kali ini saya akan sedikit membahas tentang Membuat Info Panel Slide (Tersembunyi) di blog Anda semuanya dan bisa dicoba setelah mengikuti tutorial ini. 

      Info Panel Slide adalah dimana kita menyembunyikan info panel yang kita pasang ini tersembunyi dan bisa dilihat dengan menekan sebuah tombol. Yang disembunyikan di sini berupa informasi mengenai blog yang kita miliki dan juga si adminnya itu sendiri, contohnya bisa Anda lihat sendiri pada gambar di atas. Bagaimana cara membuatnya? Langsung saja ikuti tutorial di bawah ini

      1. Login ke Akun blog Anda.
      2. Klik Template.
      3. Pilih Edit HTML.
      4. Pada kolom script, carilah kode ]]></b:skin> dengan menggunakan Ctrl+F untuk mempercepat pencarian. Letakkan kode di bawah ini tepat di atas kode ]]></b:skin>

      .panel{position:fixed;top:20px;left:0;background:#000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;border:1px solid #444;width:330px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:30px 30px 30px 100px}
      .panel p{color:#ccc;margin:0 0 15px;padding:0}
      .panel a,.panel a:visited{color:#9FC54E;text-decoration:none;border-bottom:1px solid #9FC54E;margin:0;padding:0}
      .panel a:hover,.panel a:visited:hover{color:#fff;text-decoration:none;border-bottom:1px solid #fff;margin:0;padding:0}
      a.trigger{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#333 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
      a.trigger:hover{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#222 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
      a.active.trigger{background:#222 url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDvxbreOI/AAAAAAAAD2M/Cz3Q2r5pdTM/d/minus.png) 85% 55% no-repeat}
      .columns{clear:both;width:330px;line-height:22px;padding:0 0 20px}
      .colleft{float:left;width:130px;line-height:22px}
      .colright{float:right;width:130px;line-height:22px}
      a:focus{outline:none}
      .panel img{background-color:#262626;border:1px solid #333;float:right;margin:3px 3px 6px 8px;padding:5px}
      .panel h3{border-bottom:1px solid silver;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#FFF;font-size:12px;font-weight:700}
      .columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}

      5. Kemudian cari kode </head> dengan cara yang sama seperti langkah no 4 dan letakkan kode di bawah ini diatasnya

      <script  src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js'  type='text/javascript'/>  

      keterangan :
      • Jika script jquery di atas sudah ada maka tidak perlu ditambahkan ke blog Anda, langsung ke langkah selanjutnya saja.
      6. Masukkan kode di bawah ini dibawah kode jquery tadi
          
      <script type="text/javascript"> 
      $(document).ready(function(){ 
      $(".trigger").click(function(){ 
      $(".panel").toggle("fast"); 
      $(this).toggleClass("active"); 
      return false; 
      }); 
      }); 
      </script>

      7. Langkah pamungkas adalah mencari satu kode lagi yakni </body>, setelah itu copy kode di bawah ini tepat di atasnya

      <div class='panel'>
      <h3>Selamat Datang di Kangfiqih</h3>
      <p style='text-align:justify'>Selamat datang di blog kangfiqih, blog yang difungsikan untuk membantu Anda dalam memecahkan masalah yang Anda alami. Saya berharap blog ini dapat menyenangkan Anda dan saya berharap Anda berkenan untuk datang kembali di lain waktu. Silahkan Anda mencari hal-hal baru di blog ini. Selamat beraktifitas dan sampai jumpa. <a href='http://kangfiqih.blogspot.com/' title='creating website'>Selengkapnya tentang blog ini</a></p>

      <h3>Sekilas tentang kangfiqih</h3>
      <img height='73px' src='http://i984.photobucket.com/albums/ae322/fiqihpunya/946388_592291774123619_159164671_n_zps64218e9e.jpg' width='73px'/>
      <p>Kangfiqih, dia masih berusia 17 tahun. Dia mengawali dunia blogger pada saat memasuki kelas 12 di SMA, sampai sekarang dia sudah menjadi mahasiswa di salah satu perguruan tinggi negeri di Indonesia. Belajar menjadi blogger didasari dari hobinya yang selalu menekuni dunia komputer. Semoga kedepannya dia menjadi lebih baik dan lebih baik lagi.</p>

      <div style='clear:both;'/>

      <div class='columns'>
      <div class='colleft'>
      <h3>Navigasi</h3>
      <ul>
      <li><a href='#' title='home'>Home</a></li>
      <li><a href='#' title='about'>About</a></li>
      <li><a href='#' title='portfolio'>Portfolio</a></li>
      <li><a href='#' title='contact'>Contact</a></li>
      <li><a href='#' title='blog'>Blog</a></li>
      </ul>
      </div>

      <div class='colright'>
      <h3>Social Stuff</h3>
      <ul>
      <li><a href='http://twitter.com/fiqihpunya' title='Twitter'>Twitter</a></li>
      <li><a href='http://www.facebook.com/fiqih21' title='Facebook Me'>Facebook Me</a></li>
      <li><a href='mailto:abcdef@gmail.com' title='Gmail'>Gmail</a></li>
      </ul>
      </div>
      </div>
      <div style='clear:both;'/>
      </div>
      <a class='trigger' href='#'>Info</a>

      keterangan :
      • Untuk keterangannya bisa Anda lihat gambar di atas dan sesuaikan dengan yang kalian inginkan.
      • Khusus untuk yang berwarna hijau ganti dengan url gambar yang akan Anda tampilkan nanti.

      8. Klik Simpan Template.


      Selamat beraktifitas dan sampai jumpa ...



      Membuat Info Panel Slide (Tersembunyi)

      Posted by Muhammad Fiqih No comments


      Kang Fiqih | Assalamu'alaikum wr.wb., baru kali ini saya merasakan yang selalu dirasakan kebanyakan orang di bulan ramadhan, apalagi namanya kalau bukan "mudik". Memang, setelah melakukan mudik, ada suka dan ada duka yang saya rasakan pada saat itu. Sudah ceritanya sampai disana..hehe .. Sekarang kita masuk ke pembahasan saja, pertemuan kali ini saya akan sedikit membahas tentang Membuat Info Panel Slide (Tersembunyi) di blog Anda semuanya dan bisa dicoba setelah mengikuti tutorial ini. 

      Info Panel Slide adalah dimana kita menyembunyikan info panel yang kita pasang ini tersembunyi dan bisa dilihat dengan menekan sebuah tombol. Yang disembunyikan di sini berupa informasi mengenai blog yang kita miliki dan juga si adminnya itu sendiri, contohnya bisa Anda lihat sendiri pada gambar di atas. Bagaimana cara membuatnya? Langsung saja ikuti tutorial di bawah ini

      1. Login ke Akun blog Anda.
      2. Klik Template.
      3. Pilih Edit HTML.
      4. Pada kolom script, carilah kode ]]></b:skin> dengan menggunakan Ctrl+F untuk mempercepat pencarian. Letakkan kode di bawah ini tepat di atas kode ]]></b:skin>

      .panel{position:fixed;top:20px;left:0;background:#000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;border:1px solid #444;width:330px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:30px 30px 30px 100px}
      .panel p{color:#ccc;margin:0 0 15px;padding:0}
      .panel a,.panel a:visited{color:#9FC54E;text-decoration:none;border-bottom:1px solid #9FC54E;margin:0;padding:0}
      .panel a:hover,.panel a:visited:hover{color:#fff;text-decoration:none;border-bottom:1px solid #fff;margin:0;padding:0}
      a.trigger{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#333 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
      a.trigger:hover{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#222 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
      a.active.trigger{background:#222 url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDvxbreOI/AAAAAAAAD2M/Cz3Q2r5pdTM/d/minus.png) 85% 55% no-repeat}
      .columns{clear:both;width:330px;line-height:22px;padding:0 0 20px}
      .colleft{float:left;width:130px;line-height:22px}
      .colright{float:right;width:130px;line-height:22px}
      a:focus{outline:none}
      .panel img{background-color:#262626;border:1px solid #333;float:right;margin:3px 3px 6px 8px;padding:5px}
      .panel h3{border-bottom:1px solid silver;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#FFF;font-size:12px;font-weight:700}
      .columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}

      5. Kemudian cari kode </head> dengan cara yang sama seperti langkah no 4 dan letakkan kode di bawah ini diatasnya

      <script  src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js'  type='text/javascript'/>  

      keterangan :
      • Jika script jquery di atas sudah ada maka tidak perlu ditambahkan ke blog Anda, langsung ke langkah selanjutnya saja.
      6. Masukkan kode di bawah ini dibawah kode jquery tadi
          
      <script type="text/javascript"> 
      $(document).ready(function(){ 
      $(".trigger").click(function(){ 
      $(".panel").toggle("fast"); 
      $(this).toggleClass("active"); 
      return false; 
      }); 
      }); 
      </script>

      7. Langkah pamungkas adalah mencari satu kode lagi yakni </body>, setelah itu copy kode di bawah ini tepat di atasnya

      <div class='panel'>
      <h3>Selamat Datang di Kangfiqih</h3>
      <p style='text-align:justify'>Selamat datang di blog kangfiqih, blog yang difungsikan untuk membantu Anda dalam memecahkan masalah yang Anda alami. Saya berharap blog ini dapat menyenangkan Anda dan saya berharap Anda berkenan untuk datang kembali di lain waktu. Silahkan Anda mencari hal-hal baru di blog ini. Selamat beraktifitas dan sampai jumpa. <a href='http://kangfiqih.blogspot.com/' title='creating website'>Selengkapnya tentang blog ini</a></p>

      <h3>Sekilas tentang kangfiqih</h3>
      <img height='73px' src='http://i984.photobucket.com/albums/ae322/fiqihpunya/946388_592291774123619_159164671_n_zps64218e9e.jpg' width='73px'/>
      <p>Kangfiqih, dia masih berusia 17 tahun. Dia mengawali dunia blogger pada saat memasuki kelas 12 di SMA, sampai sekarang dia sudah menjadi mahasiswa di salah satu perguruan tinggi negeri di Indonesia. Belajar menjadi blogger didasari dari hobinya yang selalu menekuni dunia komputer. Semoga kedepannya dia menjadi lebih baik dan lebih baik lagi.</p>

      <div style='clear:both;'/>

      <div class='columns'>
      <div class='colleft'>
      <h3>Navigasi</h3>
      <ul>
      <li><a href='#' title='home'>Home</a></li>
      <li><a href='#' title='about'>About</a></li>
      <li><a href='#' title='portfolio'>Portfolio</a></li>
      <li><a href='#' title='contact'>Contact</a></li>
      <li><a href='#' title='blog'>Blog</a></li>
      </ul>
      </div>

      <div class='colright'>
      <h3>Social Stuff</h3>
      <ul>
      <li><a href='http://twitter.com/fiqihpunya' title='Twitter'>Twitter</a></li>
      <li><a href='http://www.facebook.com/fiqih21' title='Facebook Me'>Facebook Me</a></li>
      <li><a href='mailto:abcdef@gmail.com' title='Gmail'>Gmail</a></li>
      </ul>
      </div>
      </div>
      <div style='clear:both;'/>
      </div>
      <a class='trigger' href='#'>Info</a>

      keterangan :
      • Untuk keterangannya bisa Anda lihat gambar di atas dan sesuaikan dengan yang kalian inginkan.
      • Khusus untuk yang berwarna hijau ganti dengan url gambar yang akan Anda tampilkan nanti.

      8. Klik Simpan Template.


      Selamat beraktifitas dan sampai jumpa ...



      Membuat Author Box (Kotak Author) di Bawah Postingan Blog


      Kang Fiqih | Assalamu'alaikum wr.wb., Author Box. Disunggung mengenai Author Box, apakah ada yang sudah mengenal widget ini? Kalau belum please comment..he.. Author Box  menurut bahasa terbagi menjadi dua kata yakni Author yang artinya Penulis, jadi disini maksudnya adalah admin sebuah blog yang mempunyai peranan penuh terhadap blog tersebut dan yang kedua adalah Box yang artinya kotak. Jadi Author Box dapat didefinisikan sebagai kotak yang didalamnya terdapat seorang penulis beserta deskripsi penulis(biasanya).

      Di dalam Author Box ini juga terdapat permalink, permalink adalah sebuah link yang nantinya merujuk ke suatu blog atau forum tertentu masuk setelah berlalu dari halaman depan ke arsip. Hal ini bertujuan supaya pengguna atau pembaca blog mengetahui permalink dari postingan yang sedang dibacanya. 

      Dan di dalam permalink ini sudah ada script atau kode html yang berisi permalink dari artikel yang sedang dibacanya. Biasanya para blogger selalu menambahkan permalink ini di bawah postingan blog mereka,

      Nah, sekarang mungpung saya memiliki waktu yang luang untuk ngeblog, saya ingin memberikan sedikit ilmunya kepada Anda semua mengenai bagaimana caranya Membuat Author Box (Kotak Author) di Bawah Postingan Blog. Seperti biasa pasti selalu ada kode/script di dalamnya, langsung saja :

      1. Login ke Akun Blog Anda.

      2. Klik Template -->Edit HTML.

      3. Carilah kode ]]></b:skin> dengan menggunakan Ctrl+F.

      4. Setelah kode tersebut ditemukan, maka letakkan kode di bawah ini tepat di atas kode ]]></b:skin>

      admin-tulisan{width:auto;background:#333;border:2px solid #aaa;margin:30px 0 10px 0;display:block;font-family:"julee";
      color:#aaa;}
      .admin-tulisan .kontainer{padding:5px;}
      .admin-tulisan h4{background:#000000;border:none;border-bottom:1px solid #000000;color:#fff;font-family:"julee";text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);padding:5px 10px;margin:0 0 0 0;display:block;}.admin-tulisan h4 a{color:#000000;}
      .admin-tulisan img{background:#000000;width:80px;height:85px;border:1px solid #000000;margin:3px 10px 0 0;float:left;padding:2px;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;}
      keterangan :
      • kode yang berwarna biru adalah lebar dari permalink.
      • kode yang berwarna merah adalah tinggi dari permalink. 
      5. Selanjutnya cari kode <data:post.body/>.

      6.  Jika Anda menggunakan auto readmore pada blog maka kemungkinan kode di langkah no. 5 ada dua, letakkan saja kode di bawah ini di bawah kode <data:post.body/> yang KEDUA.

      <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <div class='admin-tulisan'>
      <h4>Ditulis Oleh : <b><data:post.author/></b>  ,Be The Best</h4>
      <div class='kontainer'>
      <img alt='Muhammad Fiqih' src='http://lh3.googleusercontent.com/-0o3cJfWH_lo/AAAAAAAAAAI/AAAAAAAAAEs/uUfYHAZhj9k/s512-c/photo.jpg'/>
      Anda sedang membaca artikel tentang <b><a expr:href='data:post.url'><data:post.title/></a></b>.  Oleh Admin, Anda diperbolehkan mengcopy-paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya
      <textarea cols='50' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='2'>&lt;a href=&quot;<data:post.url/>&quot; target=&quot;_blank&quot;&gt;<data:blog.pageName/>&lt;/a&gt;</textarea>
      <p><span style='float:right;font:italic 10px Arial, Sans-Serif;'>
      <a href='http://kangfiqih.blogspot.com/' target='_blank'>:: Pasang Widget Ini ::</a></span></p><div style='clear:both;'/></div></div>
      </b:if>
      keterangan : 
      • kode yang berwarna merah adalah url gambar yang akan Anda pasang.
      • kode yang berwarna hijau bisa Anda ganti dengan kata-kata yang Anda inginkan.

      Selamat beraktivitas dan sampai jumpa ...

      Membuat Author Box (Kotak Author) di Bawah Postingan Blog

      Posted by Muhammad Fiqih 3 comments


      Kang Fiqih | Assalamu'alaikum wr.wb., Author Box. Disunggung mengenai Author Box, apakah ada yang sudah mengenal widget ini? Kalau belum please comment..he.. Author Box  menurut bahasa terbagi menjadi dua kata yakni Author yang artinya Penulis, jadi disini maksudnya adalah admin sebuah blog yang mempunyai peranan penuh terhadap blog tersebut dan yang kedua adalah Box yang artinya kotak. Jadi Author Box dapat didefinisikan sebagai kotak yang didalamnya terdapat seorang penulis beserta deskripsi penulis(biasanya).

      Di dalam Author Box ini juga terdapat permalink, permalink adalah sebuah link yang nantinya merujuk ke suatu blog atau forum tertentu masuk setelah berlalu dari halaman depan ke arsip. Hal ini bertujuan supaya pengguna atau pembaca blog mengetahui permalink dari postingan yang sedang dibacanya. 

      Dan di dalam permalink ini sudah ada script atau kode html yang berisi permalink dari artikel yang sedang dibacanya. Biasanya para blogger selalu menambahkan permalink ini di bawah postingan blog mereka,

      Nah, sekarang mungpung saya memiliki waktu yang luang untuk ngeblog, saya ingin memberikan sedikit ilmunya kepada Anda semua mengenai bagaimana caranya Membuat Author Box (Kotak Author) di Bawah Postingan Blog. Seperti biasa pasti selalu ada kode/script di dalamnya, langsung saja :

      1. Login ke Akun Blog Anda.

      2. Klik Template -->Edit HTML.

      3. Carilah kode ]]></b:skin> dengan menggunakan Ctrl+F.

      4. Setelah kode tersebut ditemukan, maka letakkan kode di bawah ini tepat di atas kode ]]></b:skin>

      admin-tulisan{width:auto;background:#333;border:2px solid #aaa;margin:30px 0 10px 0;display:block;font-family:"julee";
      color:#aaa;}
      .admin-tulisan .kontainer{padding:5px;}
      .admin-tulisan h4{background:#000000;border:none;border-bottom:1px solid #000000;color:#fff;font-family:"julee";text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);padding:5px 10px;margin:0 0 0 0;display:block;}.admin-tulisan h4 a{color:#000000;}
      .admin-tulisan img{background:#000000;width:80px;height:85px;border:1px solid #000000;margin:3px 10px 0 0;float:left;padding:2px;box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;}
      keterangan :
      • kode yang berwarna biru adalah lebar dari permalink.
      • kode yang berwarna merah adalah tinggi dari permalink. 
      5. Selanjutnya cari kode <data:post.body/>.

      6.  Jika Anda menggunakan auto readmore pada blog maka kemungkinan kode di langkah no. 5 ada dua, letakkan saja kode di bawah ini di bawah kode <data:post.body/> yang KEDUA.

      <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <div class='admin-tulisan'>
      <h4>Ditulis Oleh : <b><data:post.author/></b>  ,Be The Best</h4>
      <div class='kontainer'>
      <img alt='Muhammad Fiqih' src='http://lh3.googleusercontent.com/-0o3cJfWH_lo/AAAAAAAAAAI/AAAAAAAAAEs/uUfYHAZhj9k/s512-c/photo.jpg'/>
      Anda sedang membaca artikel tentang <b><a expr:href='data:post.url'><data:post.title/></a></b>.  Oleh Admin, Anda diperbolehkan mengcopy-paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya
      <textarea cols='50' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='2'>&lt;a href=&quot;<data:post.url/>&quot; target=&quot;_blank&quot;&gt;<data:blog.pageName/>&lt;/a&gt;</textarea>
      <p><span style='float:right;font:italic 10px Arial, Sans-Serif;'>
      <a href='http://kangfiqih.blogspot.com/' target='_blank'>:: Pasang Widget Ini ::</a></span></p><div style='clear:both;'/></div></div>
      </b:if>
      keterangan : 
      • kode yang berwarna merah adalah url gambar yang akan Anda pasang.
      • kode yang berwarna hijau bisa Anda ganti dengan kata-kata yang Anda inginkan.

      Selamat beraktivitas dan sampai jumpa ...

      Membuat Scroll pada Blog Archive (Arsip Blog)






      Kang Fiqih | Assalamu'alaikum wr.wb, pada mulanya saya memasang template blog ini dengan pengaturan tata letak yang sangat berantakan. Di situ juga ada sebuah Blog Archive (Arsip Blog) yang menjadi salah satunya. 

      Saya atur satu demi satu widget-widget yang tidak diperlukan untuk blog saya ini. Saya berfikir sudah selesai untuk mengatur tata letak di blog saya. Namun setelah saya memposting beberapa artikel, terlihat blog archive ini makin lama makin panjang, dan itu menurut saya sangatlah menggangu tampilan di blog ini.

      Setelah itu, terpikirlah saya untuk bagaimana caranya agar blog archive ini bisa di perpendek. Dan mungkin cara satu-satunya adalah memakai scroll disini. Memang fingsi scroll di blog adalah jika terdapat banyak postingan di blog tidak akan memakan tempat yang banyak.

      Dan saya telah menemukan cara untuk Membuat Scroll pada Blog Archive (Arsip Blog). Berikut adalah langkah-langkahnya :

      1. Login ke Akun Blog Anda.

      2. Klik menu Template --> Edit HTML.

      3. Cari kode di bawah ini dengan menggunakan Ctrl+F

      <b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>..................... </b:widget>

      keterangan : 
      • jika Anda tidak menemukan kode di atas maka Anda cari dengan kata kunci "BlogArchive". (carilah kode yang serupa dengan kode di atas)
      4. Ganti kode tersebut dengan kode di bawah 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:200px;'>
      <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>
      </b:includable>
      <b:includable id='flat' var='data'>
      <ul>
      <b:loop values='data:data' var='i'>
      <li class='archivedate'>
      <a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
      </li>
      </b:loop>
      </ul>
      </b:includable>
      <b:includable id='menu' var='data'>
      <select expr:id='data:widget.instanceId + &quot;_ArchiveMenu&quot;'>
      <option value=''><data:title/></option>
      <b:loop values='data:data' var='i'>
      <option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
      </b:loop>
      </select>
      </b:includable>
      <b:includable id='interval' var='intervalData'>
      <b:loop values='data:intervalData' var='i'>
      <ul>
      <li expr:class='&quot;archivedate &quot; + data:i.expclass'>
      <b:include data='i' name='toggle'/>
      <a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>
      <span class='post-count' dir='ltr'>(<data:i.post-count/>)</span>
      <b:if cond='data:i.data'>
      <b:include data='i.data' name='interval'/>
      </b:if>
      <b:if cond='data:i.posts'>
      <b:include data='i.posts' name='posts'/>
      </b:if>
      </li>
      </ul>
      </b:loop>
      </b:includable>
      <b:includable id='toggle' var='interval'>
      <b:if cond='data:interval.toggleId'>
      <b:if cond='data:interval.expclass == &quot;expanded&quot;'>
      <a class='toggle' expr:href='data:widget.actionUrl + &quot;&amp;action=toggle&quot; + &quot;&amp;dir=close&amp;toggle=&quot; + data:interval.toggleId + &quot;&amp;toggleopen=&quot; + data:toggleopen'>
      <span class='zippy toggle-open'>&#9660; </span>
      </a>
      <b:else/>
      <a class='toggle' expr:href='data:widget.actionUrl + &quot;&amp;action=toggle&quot; + &quot;&amp;dir=open&amp;toggle=&quot; + data:interval.toggleId + &quot;&amp;toggleopen=&quot; + data:toggleopen'>
      <span class='zippy'>
      <b:if cond='data:blog.languageDirection == &quot;rtl&quot;'>
      &#9668;
      <b:else/>
      &#9658;
      </b:if>
      </span>
      </a>
      </b:if>
      </b:if>
      </b:includable>
      <b:includable id='posts' var='posts'>
      <ul class='posts'>
      <b:loop values='data:posts' var='i'>
      <li><a expr:href='data:i.url'><data:i.title/></a></li>
      </b:loop>
      </ul>
      </b:includable>
      </b:widget>

      keterangan :
      • kode yang berwarna merah adalah tinggi yang diinginkan untuk widget blog archive ini.
      • ganti kode yang berwarna merah sesuai dengan yang Anda kehendaki.
      Selamat beraktivitas dan sampai jumpa ...
       

       

      Membuat Scroll pada Blog Archive (Arsip Blog)

      Posted by Muhammad Fiqih No comments






      Kang Fiqih | Assalamu'alaikum wr.wb, pada mulanya saya memasang template blog ini dengan pengaturan tata letak yang sangat berantakan. Di situ juga ada sebuah Blog Archive (Arsip Blog) yang menjadi salah satunya. 

      Saya atur satu demi satu widget-widget yang tidak diperlukan untuk blog saya ini. Saya berfikir sudah selesai untuk mengatur tata letak di blog saya. Namun setelah saya memposting beberapa artikel, terlihat blog archive ini makin lama makin panjang, dan itu menurut saya sangatlah menggangu tampilan di blog ini.

      Setelah itu, terpikirlah saya untuk bagaimana caranya agar blog archive ini bisa di perpendek. Dan mungkin cara satu-satunya adalah memakai scroll disini. Memang fingsi scroll di blog adalah jika terdapat banyak postingan di blog tidak akan memakan tempat yang banyak.

      Dan saya telah menemukan cara untuk Membuat Scroll pada Blog Archive (Arsip Blog). Berikut adalah langkah-langkahnya :

      1. Login ke Akun Blog Anda.

      2. Klik menu Template --> Edit HTML.

      3. Cari kode di bawah ini dengan menggunakan Ctrl+F

      <b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>..................... </b:widget>

      keterangan : 
      • jika Anda tidak menemukan kode di atas maka Anda cari dengan kata kunci "BlogArchive". (carilah kode yang serupa dengan kode di atas)
      4. Ganti kode tersebut dengan kode di bawah 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:200px;'>
      <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>
      </b:includable>
      <b:includable id='flat' var='data'>
      <ul>
      <b:loop values='data:data' var='i'>
      <li class='archivedate'>
      <a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
      </li>
      </b:loop>
      </ul>
      </b:includable>
      <b:includable id='menu' var='data'>
      <select expr:id='data:widget.instanceId + &quot;_ArchiveMenu&quot;'>
      <option value=''><data:title/></option>
      <b:loop values='data:data' var='i'>
      <option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
      </b:loop>
      </select>
      </b:includable>
      <b:includable id='interval' var='intervalData'>
      <b:loop values='data:intervalData' var='i'>
      <ul>
      <li expr:class='&quot;archivedate &quot; + data:i.expclass'>
      <b:include data='i' name='toggle'/>
      <a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>
      <span class='post-count' dir='ltr'>(<data:i.post-count/>)</span>
      <b:if cond='data:i.data'>
      <b:include data='i.data' name='interval'/>
      </b:if>
      <b:if cond='data:i.posts'>
      <b:include data='i.posts' name='posts'/>
      </b:if>
      </li>
      </ul>
      </b:loop>
      </b:includable>
      <b:includable id='toggle' var='interval'>
      <b:if cond='data:interval.toggleId'>
      <b:if cond='data:interval.expclass == &quot;expanded&quot;'>
      <a class='toggle' expr:href='data:widget.actionUrl + &quot;&amp;action=toggle&quot; + &quot;&amp;dir=close&amp;toggle=&quot; + data:interval.toggleId + &quot;&amp;toggleopen=&quot; + data:toggleopen'>
      <span class='zippy toggle-open'>&#9660; </span>
      </a>
      <b:else/>
      <a class='toggle' expr:href='data:widget.actionUrl + &quot;&amp;action=toggle&quot; + &quot;&amp;dir=open&amp;toggle=&quot; + data:interval.toggleId + &quot;&amp;toggleopen=&quot; + data:toggleopen'>
      <span class='zippy'>
      <b:if cond='data:blog.languageDirection == &quot;rtl&quot;'>
      &#9668;
      <b:else/>
      &#9658;
      </b:if>
      </span>
      </a>
      </b:if>
      </b:if>
      </b:includable>
      <b:includable id='posts' var='posts'>
      <ul class='posts'>
      <b:loop values='data:posts' var='i'>
      <li><a expr:href='data:i.url'><data:i.title/></a></li>
      </b:loop>
      </ul>
      </b:includable>
      </b:widget>

      keterangan :
      • kode yang berwarna merah adalah tinggi yang diinginkan untuk widget blog archive ini.
      • ganti kode yang berwarna merah sesuai dengan yang Anda kehendaki.
      Selamat beraktivitas dan sampai jumpa ...
       

       

      Membuat Headline News Di Blog


      Kang Fiqih | Assalamu'alaikum wr.wb., sebenarnya saya sudah pernah membahas ini sebelumnya di blog saya yang lain. sekarang saya akan memberikan sebuah tuntutan baru yang layak dicoba untuk para blogger khususnya blogger di tanah air tercinta ini. Sebelum ke inti dari cerita, saya ingin berbagi pengalaman kepada Anda mengenai latar belakang saya memposting artikel ini.

      Sebenarnya saya adalah orang yang sangat senang sekali melihat sebuah berita-berita terbaru yang sedang hangat dibicarakan banyak orang, karena saya ingin menjadi seorang yang seba tahu dan serba ingin tahu tentang sesuatu (namun hal tersebuat haruslah menuju ke arah yang positif). Pada saat saya melihat sebuah berita di sebuah tayangan televisi kemudian melihat sebuah headline news yang menurut saya adalah merupakan berita tambahan yang mungkin akan diperbincangkan nantinya.

      Memang, sebuah siaran berita di berbagai tayangan televisi biasanya selalu memiliki headline news dengan tujuan untuk mempermudah dan memperluas cakupan berita yang ditayangkan di penayangan tersebut, dari sana, terlintas sebuah pertanyaan di pikiran saya, "mengapa saya tidak mencoba menerapkannya di sebuah blog?".  

      Untuk info saja para blogger, biasanya dengan headline news ini kita dapat meningkatkan traffic blog kita di mata pengunjung blog karena akan terlihat memperindah tampilan blog yang kita miliki.

      Baiklah, agar tidak panjang lebar ceritanya, mari kita langsung Membuat Headline News Di Blog dengan beberapa langkah atau tahapan sebagai berikut :

      • Login ke akun Blog Anda.
      • Pada dashbor blog, pilih Tata Letak (pada tampilan blog baru)
      • Klik Tambah Widget --> HTML / Javascript.
      • Masukkan kode/scrpit yang ada dibawah ini


      keterangan :
      • Untuk yang bertanda http://kangfiqih.blogspot.com/ Anda ganti dengan URL blog milik Anda.
      • Untuk yang bertanda 15, itu adalah jumlah postingan yang akan ditampilkan di headline news nanti.
      • Untuk yang bertanda #333333, adalah merupakan warna background headline news, bisa menggantinya dengan warna lain. Anda tinggal cari di google tentang kode warna.
      • Untuk yang bertanda #000000, adalah merupakan warna garis atau outline pada headline news, bisa menggatinya dengan warna lain sesuka Anda.
      • Untuk yang bertanda top, Anda bisa menggatinya dengan kata "bottom" jika ingin menampilkan headline news di bagian bawah blog.

      Membuat Headline News Di Blog

      Posted by Muhammad Fiqih No comments


      Kang Fiqih | Assalamu'alaikum wr.wb., sebenarnya saya sudah pernah membahas ini sebelumnya di blog saya yang lain. sekarang saya akan memberikan sebuah tuntutan baru yang layak dicoba untuk para blogger khususnya blogger di tanah air tercinta ini. Sebelum ke inti dari cerita, saya ingin berbagi pengalaman kepada Anda mengenai latar belakang saya memposting artikel ini.

      Sebenarnya saya adalah orang yang sangat senang sekali melihat sebuah berita-berita terbaru yang sedang hangat dibicarakan banyak orang, karena saya ingin menjadi seorang yang seba tahu dan serba ingin tahu tentang sesuatu (namun hal tersebuat haruslah menuju ke arah yang positif). Pada saat saya melihat sebuah berita di sebuah tayangan televisi kemudian melihat sebuah headline news yang menurut saya adalah merupakan berita tambahan yang mungkin akan diperbincangkan nantinya.

      Memang, sebuah siaran berita di berbagai tayangan televisi biasanya selalu memiliki headline news dengan tujuan untuk mempermudah dan memperluas cakupan berita yang ditayangkan di penayangan tersebut, dari sana, terlintas sebuah pertanyaan di pikiran saya, "mengapa saya tidak mencoba menerapkannya di sebuah blog?".  

      Untuk info saja para blogger, biasanya dengan headline news ini kita dapat meningkatkan traffic blog kita di mata pengunjung blog karena akan terlihat memperindah tampilan blog yang kita miliki.

      Baiklah, agar tidak panjang lebar ceritanya, mari kita langsung Membuat Headline News Di Blog dengan beberapa langkah atau tahapan sebagai berikut :

      • Login ke akun Blog Anda.
      • Pada dashbor blog, pilih Tata Letak (pada tampilan blog baru)
      • Klik Tambah Widget --> HTML / Javascript.
      • Masukkan kode/scrpit yang ada dibawah ini


      keterangan :
      • Untuk yang bertanda http://kangfiqih.blogspot.com/ Anda ganti dengan URL blog milik Anda.
      • Untuk yang bertanda 15, itu adalah jumlah postingan yang akan ditampilkan di headline news nanti.
      • Untuk yang bertanda #333333, adalah merupakan warna background headline news, bisa menggantinya dengan warna lain. Anda tinggal cari di google tentang kode warna.
      • Untuk yang bertanda #000000, adalah merupakan warna garis atau outline pada headline news, bisa menggatinya dengan warna lain sesuka Anda.
      • Untuk yang bertanda top, Anda bisa menggatinya dengan kata "bottom" jika ingin menampilkan headline news di bagian bawah blog.

      Membuat Breadcrumbs SEO Menarik


      Kang Fiqih | Assalamu'alaikum wr.wb., sebelumnya apakah ada yang sudah mengenal breadcrumbs? Pasti disini ada yang sudah tahu dan mungkin ada juga yang tidak. Sedikit saya berikan pengertian mengenai breadcrumbs ini, breadcrumbs adalah sebuah navigasi pada blog yang biasanya memberikan informasi kepada pengunjung blog, dimana posisinya sekarang. Maksudnya, posisi atau letak postingan yang mereka baca.

      Breadcrumbs juga mempunyai fungsi atau manfaat untuk SEO blog milik Anda. Berikut adalah beberapa manfaat yang saya dapat :

      • Keyword Density-breadcrumbs menambahkan keyword atau kata kunci yang Anda fokuskan bangun dalam halaman blog Anda, building desinty.
      • Untuk index halaman oleh Google. Dalam pencarian google, biasanya si mesin pencari ini juga menyertakan navigasi blog yang sedang di cari, atau bisa dikatakan bahwa google juga mengindex navigasi terkait keyword yang Anda isikan dalam kotak pencariannya. Contoh kecil seperti gambar di bawah ini:

      Langsung saja jika Anda menginginkan adanya breadcrumbs di blog Anda, di bawah ini langkah-langkahnya :

      • Login ke akun blog Anda.
      • Klik Template --> Edit HTML.
      • Cari kode ]]></b:skin>, untuk memudahkan mencarinya gunakan Ctrl+F. 
      • Setelah kodenya ketemu, maka masukkan kode di bawah ini di atas kode ]]></b:skin>.
      • Kemudian langkah selanjutnya adalah mencari kode <b:includable id='main' var='top'>, cara mencarinya sama dengan langkah ke 3.
      • Masukkan kode di bawah tepat di atas kode <b:includable id='main' var='top'>.
      • Langkah terakhir adalah mencari kode <b:include data='top' name='status-message'/> dan masukkan kode di bawah ini tepat di atas kode <b:include data='top' name='status-message'/>. (jika kode <b:include data='top' name='status-message'/> ada dua maka masukkan kode dibawah ini di kedua kode tersebut)

      Lihat hasilnya, mudah-mudahan dapat memuaskan Anda dan artikel ini dapat bermanfaat untuk Anda. :D

      Membuat Breadcrumbs SEO Menarik

      Posted by Muhammad Fiqih No comments


      Kang Fiqih | Assalamu'alaikum wr.wb., sebelumnya apakah ada yang sudah mengenal breadcrumbs? Pasti disini ada yang sudah tahu dan mungkin ada juga yang tidak. Sedikit saya berikan pengertian mengenai breadcrumbs ini, breadcrumbs adalah sebuah navigasi pada blog yang biasanya memberikan informasi kepada pengunjung blog, dimana posisinya sekarang. Maksudnya, posisi atau letak postingan yang mereka baca.

      Breadcrumbs juga mempunyai fungsi atau manfaat untuk SEO blog milik Anda. Berikut adalah beberapa manfaat yang saya dapat :

      • Keyword Density-breadcrumbs menambahkan keyword atau kata kunci yang Anda fokuskan bangun dalam halaman blog Anda, building desinty.
      • Untuk index halaman oleh Google. Dalam pencarian google, biasanya si mesin pencari ini juga menyertakan navigasi blog yang sedang di cari, atau bisa dikatakan bahwa google juga mengindex navigasi terkait keyword yang Anda isikan dalam kotak pencariannya. Contoh kecil seperti gambar di bawah ini:

      Langsung saja jika Anda menginginkan adanya breadcrumbs di blog Anda, di bawah ini langkah-langkahnya :

      • Login ke akun blog Anda.
      • Klik Template --> Edit HTML.
      • Cari kode ]]></b:skin>, untuk memudahkan mencarinya gunakan Ctrl+F. 
      • Setelah kodenya ketemu, maka masukkan kode di bawah ini di atas kode ]]></b:skin>.
      • Kemudian langkah selanjutnya adalah mencari kode <b:includable id='main' var='top'>, cara mencarinya sama dengan langkah ke 3.
      • Masukkan kode di bawah tepat di atas kode <b:includable id='main' var='top'>.
      • Langkah terakhir adalah mencari kode <b:include data='top' name='status-message'/> dan masukkan kode di bawah ini tepat di atas kode <b:include data='top' name='status-message'/>. (jika kode <b:include data='top' name='status-message'/> ada dua maka masukkan kode dibawah ini di kedua kode tersebut)

      Lihat hasilnya, mudah-mudahan dapat memuaskan Anda dan artikel ini dapat bermanfaat untuk Anda. :D

      Membuat Facebook Recommendations di Blog


      Kang Fiqih | Assalamu'alaikum wr.wb., salam pagi yang cerah kawan. Rasanya saya tidak bosan-bosan untuk ngeblog sekarang ini, sangat bersemangat sekali untuk berinteraksi dengan Anda semuanya para pembaca blog Kangfiqih.

      Sebenarnya saya sedang kurang sehat, namun hal itu tidak menghalangi niat saya untuk terus mengembangkan blog ini dan berusaha untuk menyuguhkan artikel-artikel yang berkualitas di sini. Di hari minggu ini saya akan sedikit membahas tentang yang namanya Recommendation Bar dari Facebook. Recommendation bar ini adalah sebuah widget yang disuguhkan untuk sebuah blog dengan tujuan agar memberikan rekomendasi kepada para pembaca untuk membaca artikel lain dalam sebuah bar. 

      Widget ini bekerja berdasarkan otorisasi aplikasi. Bisa jadi Anda akan gagal memasangnya karena menggunakan App ID milik user lain yang tidak diotorisasi untuk domain tertentu. Oleh sebab itu, sebaiknya menggunakan Facebook App yang dibuat sendiri oleh Anda. 

      Jadi, langsung saja untuk memasang widget ini adalah :

      Langkah 1 (membuat App ID)

      • Buatlah App ID terlebih dahulu di Facebook (namun jika Anda sudah memiliki App ID yang terotorisasi untuk blog Anda maka lewati saja langkah ini). Klik disini untuk membuatnya.
      • Klik tombol +Create New App yang berada di pojok kanan atas..

       

      • Pada kotak yang akan muncul nanti, isilah seperti yang ada digambar di bawah ini.


      • Masukkan kode captcha security code --> klik Submit.
      • Klik tab Website with Facebook Login dan di dalam kotak tersebut dan isi Url blog Anda. Lihat gambar di bawah. Jangan menyentuh pilihan yang lain dan klik Save Changes.


      • Setelah itu Anda akan melihat kode numerik. Adan dua kode numerik di sama, yang pertama adalah App ID dan yang satunya lagi adalah App Secret.Nah, App ID inilah yang kita butuhkan untuk membuat Recommendation Bar di blog, simpanlah terlebih dahulu kode App ID tersebut di notepad.


      Langkah 1 sudah selesai, sekarang kita masuk ke langkah 2.

      Langkah 2 (membuat Recommendation Bar di blog)

      • Login ke blog Anda terlebih dahulu.
      • Klik Template --> Edit HTML.
      • Cari kode <html
      • Masukkan kode di bawah ini setelah kode <html

      Formatnya bisa seperti ini :

      <html xmlns:fb='http://ogp.me/ns/fb#' (kode lain yang sudah ada sebelumnya)>

      • Langkah selanjutnya adalah mencari kode <body>. Anda bisa mencarinya dengan menggunakan Ctrl+F dan masukkan keyword-nya (dalam hal ini <body>).
      • Setelah ketemu, masukkan kode di bawah ini di bawah kode <body>.

      keterangan :
      • Ganti 123456789012345 App ID Anda.
      • Ganti http://kangfiqih.blogspot.com dengan alamat blog Anda.

      Itulah mungkin salah satu cara untuk membuat Recommendation Bar di blog, mudah-mudahan dapat sedikit membantu Anda dalam mengembangkan blog milik Anda.

      Membuat Facebook Recommendations di Blog

      Posted by Muhammad Fiqih No comments


      Kang Fiqih | Assalamu'alaikum wr.wb., salam pagi yang cerah kawan. Rasanya saya tidak bosan-bosan untuk ngeblog sekarang ini, sangat bersemangat sekali untuk berinteraksi dengan Anda semuanya para pembaca blog Kangfiqih.

      Sebenarnya saya sedang kurang sehat, namun hal itu tidak menghalangi niat saya untuk terus mengembangkan blog ini dan berusaha untuk menyuguhkan artikel-artikel yang berkualitas di sini. Di hari minggu ini saya akan sedikit membahas tentang yang namanya Recommendation Bar dari Facebook. Recommendation bar ini adalah sebuah widget yang disuguhkan untuk sebuah blog dengan tujuan agar memberikan rekomendasi kepada para pembaca untuk membaca artikel lain dalam sebuah bar. 

      Widget ini bekerja berdasarkan otorisasi aplikasi. Bisa jadi Anda akan gagal memasangnya karena menggunakan App ID milik user lain yang tidak diotorisasi untuk domain tertentu. Oleh sebab itu, sebaiknya menggunakan Facebook App yang dibuat sendiri oleh Anda. 

      Jadi, langsung saja untuk memasang widget ini adalah :

      Langkah 1 (membuat App ID)

      • Buatlah App ID terlebih dahulu di Facebook (namun jika Anda sudah memiliki App ID yang terotorisasi untuk blog Anda maka lewati saja langkah ini). Klik disini untuk membuatnya.
      • Klik tombol +Create New App yang berada di pojok kanan atas..

       

      • Pada kotak yang akan muncul nanti, isilah seperti yang ada digambar di bawah ini.


      • Masukkan kode captcha security code --> klik Submit.
      • Klik tab Website with Facebook Login dan di dalam kotak tersebut dan isi Url blog Anda. Lihat gambar di bawah. Jangan menyentuh pilihan yang lain dan klik Save Changes.


      • Setelah itu Anda akan melihat kode numerik. Adan dua kode numerik di sama, yang pertama adalah App ID dan yang satunya lagi adalah App Secret.Nah, App ID inilah yang kita butuhkan untuk membuat Recommendation Bar di blog, simpanlah terlebih dahulu kode App ID tersebut di notepad.


      Langkah 1 sudah selesai, sekarang kita masuk ke langkah 2.

      Langkah 2 (membuat Recommendation Bar di blog)

      • Login ke blog Anda terlebih dahulu.
      • Klik Template --> Edit HTML.
      • Cari kode <html
      • Masukkan kode di bawah ini setelah kode <html

      Formatnya bisa seperti ini :

      <html xmlns:fb='http://ogp.me/ns/fb#' (kode lain yang sudah ada sebelumnya)>

      • Langkah selanjutnya adalah mencari kode <body>. Anda bisa mencarinya dengan menggunakan Ctrl+F dan masukkan keyword-nya (dalam hal ini <body>).
      • Setelah ketemu, masukkan kode di bawah ini di bawah kode <body>.

      keterangan :
      • Ganti 123456789012345 App ID Anda.
      • Ganti http://kangfiqih.blogspot.com dengan alamat blog Anda.

      Itulah mungkin salah satu cara untuk membuat Recommendation Bar di blog, mudah-mudahan dapat sedikit membantu Anda dalam mengembangkan blog milik Anda.

      Membuat Like Box Fun Page Facebook di Blog


      Kang Fiqih | Assalamu'alaikum wr.wb., baru pulang tarawih langsung inget blog ini dan sedikit mempunyai pencerahan mengenai apa yang akan saya bahas sekarang...he, kemarin saya telah memberikan tutorial tentang Membuat Widget Popular Posts Menarik. 

      Nah, dipertemuan yang singkat ini saya akan kembali membahas mengenai tutorial blog yang akan berhubungan dengan sebuah jejaring sosial yang bernama Facebook. Ya, saya akan sedikit membantu Anda untuk Membuat Like Box Fun Page Facebook di Blog. 

      Memang, jika Anda ingin agar blog Anda menjadi lebih dikenal oleh orang lain maka Anda harus bisa-bisa dalam mempromosikan blog Anda ini keluar. Tidak hanya menunggu pengunjung agar datang sendiri ke blog Anda, tetapi Anda juga harus bisa menjemput bola untuk mendapatkan hasil yang maksimal. Dan salah satu caranya adalah mempromosikan blog Anda di Facebook dengan cara membuat like box Facebook yang didalamnya terdapat fun page blog Anda.

      Untuk itu, langsung saja ke topik pembahasan. Okeh kawan...he

      1. Langkah pertama yang harus Anda lakukan adalah tentu saja Anda harus login ke Facebook Anda.

      2. Kemudian silahkan Anda masuk ke sini.

      3. Di sana Anda diharuskan mengisi beberapa form, seperti mengisi fun page blog Anda dan lain-lain. (sesuaikan dengan keinginan Anda)

      4. Setelah form terisi semua, klik Get Code.

      5. Buka Tab baru dan masuk ke blog Anda dan Klik Template --> Edit HTML.

      6. Sekarang ada dua tab yang digunakan yakni tab Facebook dan tab Blog.

      7. Di tab blog, carilah kode <body>, agar lebih memudahkan klik Ctrl+F dan masukkan keyword yang akan dicari (dalam hal ini <body>)

      8. Setelah ketemu, masukkan kode pertama yang ada di langkah 4 tepat di bawah kode <body> dan klik Simpan Template.

      9. Masih di tab blog, masuklah ke Tata Letak --> Add Widget --> HTML/Javascript. Kemudian masuk ke tab facebook dan masukkan kode kedua yang ada di sana di HTML/Javascript. Klik Simpan.

      10. Lihat hasilnya di blog Anda :)

      Mudah-mudahan artikel ini dapat sedikit membantu Anda dalam mempromosikan blog Anda. Jika ada yang kurang dipahami, silahkan tinggalkan komentar di bawah. Terimakasih 


      Selamat beraktivitas dan sampai jumpa ...

      Membuat Like Box Fun Page Facebook di Blog

      Posted by Muhammad Fiqih 2 comments


      Kang Fiqih | Assalamu'alaikum wr.wb., baru pulang tarawih langsung inget blog ini dan sedikit mempunyai pencerahan mengenai apa yang akan saya bahas sekarang...he, kemarin saya telah memberikan tutorial tentang Membuat Widget Popular Posts Menarik. 

      Nah, dipertemuan yang singkat ini saya akan kembali membahas mengenai tutorial blog yang akan berhubungan dengan sebuah jejaring sosial yang bernama Facebook. Ya, saya akan sedikit membantu Anda untuk Membuat Like Box Fun Page Facebook di Blog. 

      Memang, jika Anda ingin agar blog Anda menjadi lebih dikenal oleh orang lain maka Anda harus bisa-bisa dalam mempromosikan blog Anda ini keluar. Tidak hanya menunggu pengunjung agar datang sendiri ke blog Anda, tetapi Anda juga harus bisa menjemput bola untuk mendapatkan hasil yang maksimal. Dan salah satu caranya adalah mempromosikan blog Anda di Facebook dengan cara membuat like box Facebook yang didalamnya terdapat fun page blog Anda.

      Untuk itu, langsung saja ke topik pembahasan. Okeh kawan...he

      1. Langkah pertama yang harus Anda lakukan adalah tentu saja Anda harus login ke Facebook Anda.

      2. Kemudian silahkan Anda masuk ke sini.

      3. Di sana Anda diharuskan mengisi beberapa form, seperti mengisi fun page blog Anda dan lain-lain. (sesuaikan dengan keinginan Anda)

      4. Setelah form terisi semua, klik Get Code.

      5. Buka Tab baru dan masuk ke blog Anda dan Klik Template --> Edit HTML.

      6. Sekarang ada dua tab yang digunakan yakni tab Facebook dan tab Blog.

      7. Di tab blog, carilah kode <body>, agar lebih memudahkan klik Ctrl+F dan masukkan keyword yang akan dicari (dalam hal ini <body>)

      8. Setelah ketemu, masukkan kode pertama yang ada di langkah 4 tepat di bawah kode <body> dan klik Simpan Template.

      9. Masih di tab blog, masuklah ke Tata Letak --> Add Widget --> HTML/Javascript. Kemudian masuk ke tab facebook dan masukkan kode kedua yang ada di sana di HTML/Javascript. Klik Simpan.

      10. Lihat hasilnya di blog Anda :)

      Mudah-mudahan artikel ini dapat sedikit membantu Anda dalam mempromosikan blog Anda. Jika ada yang kurang dipahami, silahkan tinggalkan komentar di bawah. Terimakasih 


      Selamat beraktivitas dan sampai jumpa ...

      Membuat Widget Popular Posts Menarik

       
      Kang Fiqih | Assalamu'alaikum wr.wb., bertemu lagi dengan saya Fiqih. Setelah kemarin saya memberikan tips untuk Membuat Blog Dengan benar, sekarang pada kesempatan kedua ini saya ingin memberikan tutorial mengenai cara membuat sebuah popular posts yang bagus dan menarik tentunya.

      Biasanya popular posts yang diberikan otomatis oleh blogger.com hanya menampilkan sebuah judul, gambar dan tambahannya berupa cuplikan, namun dengan itu semua kadang kita merasa masih kurang menarik untuk dipandang. Nah, untuk itu saya disini akan membantu Anda sedikit mengenai hal tersebut.

      Beranjak dari pengalaman yang saya alami, bahwa cara membuat widget popular posts itu banyak sekali caranya dan juga sangat banyak varian yang dapat kita pilih sesuai dengan keinginan kita masih-masing. Di sini saya mengambih salah satu contoh widget tersebut yang menurut saya sangat menarik karena membuat popular posts tersebut menjadi berwarna-warni serasa melihat sebuah pelangi... hehe

      Langsung saja ke cara-cara pembuatannya:

      1. Login ke blogger terebih dahulu.

      2. Pilih Tata Letak --> Tambah Gadget --> Entri Populer/Popular Posts. Dipengaturan entri populer tersebut, Anda hanya dianjurkan untuk memilih judulnya saja, tidak perlu menggunakan gambar dan cuplikan. Andapun dapat memilih berapa postingan yang akan di tampilkan di popular posts nantinya, bisa satu, dua, tiga, dan sampai maksimal 10.

      3. Klik Simpan

      4. Sekarang Anda masuk ke Template. Klik Template --> Back Up terlebih dahulu template kamu.

      5. Tetap di bagian Template, klik Edit HTML --> Lanjutkan --> Cari kode ]]></b:skin>. Salinlah kode dibawah ini dan letakkan tepat di atas kode ]]></b:skin> .
      /* Rainbow Popular Post by http://kangfiqih.blogspot.com*/
      #PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
      #PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
      #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
      #PopularPosts1 ul li:first-child:after,
      #PopularPosts1 ul li:first-child + li:after,
      #PopularPosts1 ul li:first-child + li + li:after,
      #PopularPosts1 ul li:first-child + li + li + li:after,
      #PopularPosts1 ul li:first-child + li + li + li + li:after,
      #PopularPosts1 ul li:first-child + li + li + li + li + li:after,
      #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
      #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
      #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
      #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
      #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
      #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
      #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}
      #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
      #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
      #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
      #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
      #PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
      #PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
      #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
      #PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
      #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
      #PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
      #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
      #PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
      #PopularPosts1 ul li:first-child + li + li:after{content:"3"}
      #PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
      #PopularPosts1 ul li:first-child + li:after{content:"2"}
      #PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
      #PopularPosts1 ul li:first-child:after{content:"1"}
      #PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
      #PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}
      /* Rainbow Popular Post by http://kangfiqih.blogspot.com*/

      6. Pratinjau terlebih dahulu sebelum menyimpannya. Hal ini bertujuan supaya jika terjadi kegagalan, kita tidak perlu mengulang dari awal.

      7. Jika sudah benar, maka Klik Simpan Template.

      8. Nikmati dan rasakan hasilnya di blog Anda. :)


      Selamat beraktivitas dan sampai jumpa ...

       

      Membuat Widget Popular Posts Menarik

      Posted by Muhammad Fiqih No comments

       
      Kang Fiqih | Assalamu'alaikum wr.wb., bertemu lagi dengan saya Fiqih. Setelah kemarin saya memberikan tips untuk Membuat Blog Dengan benar, sekarang pada kesempatan kedua ini saya ingin memberikan tutorial mengenai cara membuat sebuah popular posts yang bagus dan menarik tentunya.

      Biasanya popular posts yang diberikan otomatis oleh blogger.com hanya menampilkan sebuah judul, gambar dan tambahannya berupa cuplikan, namun dengan itu semua kadang kita merasa masih kurang menarik untuk dipandang. Nah, untuk itu saya disini akan membantu Anda sedikit mengenai hal tersebut.

      Beranjak dari pengalaman yang saya alami, bahwa cara membuat widget popular posts itu banyak sekali caranya dan juga sangat banyak varian yang dapat kita pilih sesuai dengan keinginan kita masih-masing. Di sini saya mengambih salah satu contoh widget tersebut yang menurut saya sangat menarik karena membuat popular posts tersebut menjadi berwarna-warni serasa melihat sebuah pelangi... hehe

      Langsung saja ke cara-cara pembuatannya:

      1. Login ke blogger terebih dahulu.

      2. Pilih Tata Letak --> Tambah Gadget --> Entri Populer/Popular Posts. Dipengaturan entri populer tersebut, Anda hanya dianjurkan untuk memilih judulnya saja, tidak perlu menggunakan gambar dan cuplikan. Andapun dapat memilih berapa postingan yang akan di tampilkan di popular posts nantinya, bisa satu, dua, tiga, dan sampai maksimal 10.

      3. Klik Simpan

      4. Sekarang Anda masuk ke Template. Klik Template --> Back Up terlebih dahulu template kamu.

      5. Tetap di bagian Template, klik Edit HTML --> Lanjutkan --> Cari kode ]]></b:skin>. Salinlah kode dibawah ini dan letakkan tepat di atas kode ]]></b:skin> .
      /* Rainbow Popular Post by http://kangfiqih.blogspot.com*/
      #PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
      #PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
      #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
      #PopularPosts1 ul li:first-child:after,
      #PopularPosts1 ul li:first-child + li:after,
      #PopularPosts1 ul li:first-child + li + li:after,
      #PopularPosts1 ul li:first-child + li + li + li:after,
      #PopularPosts1 ul li:first-child + li + li + li + li:after,
      #PopularPosts1 ul li:first-child + li + li + li + li + li:after,
      #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
      #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
      #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
      #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
      #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
      #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
      #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}
      #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
      #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
      #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
      #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
      #PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
      #PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
      #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
      #PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
      #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
      #PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
      #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
      #PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
      #PopularPosts1 ul li:first-child + li + li:after{content:"3"}
      #PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
      #PopularPosts1 ul li:first-child + li:after{content:"2"}
      #PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
      #PopularPosts1 ul li:first-child:after{content:"1"}
      #PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
      #PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}
      /* Rainbow Popular Post by http://kangfiqih.blogspot.com*/

      6. Pratinjau terlebih dahulu sebelum menyimpannya. Hal ini bertujuan supaya jika terjadi kegagalan, kita tidak perlu mengulang dari awal.

      7. Jika sudah benar, maka Klik Simpan Template.

      8. Nikmati dan rasakan hasilnya di blog Anda. :)


      Selamat beraktivitas dan sampai jumpa ...

       

      Awali Membuat Blog Dengan Benar

       


      Kang Fiqih | Assalamu'alaikum wr.wb., selamat malam semua. Ini adalah pertemuan pertama saya dengan sobat semua karena ini merupakan blog baru saya yang sengaja dibuat untuk keperluan pembelajaran khusus mengenai dunia teknologi dan internet. (nyambung juga sih dengan jurusan yang saya ambil di perkuliahan)

      Nah, ngomong-ngomong tentang internet pasti tidak lepas dengan yang namanya blog. Benar, blog adalah singprikatan dari web log yang merupakan sebuah bentuk aplikasi web yang menyerupai tulisan-tulisan (yang dimuat sebagai postingan) pada sebuah halaman web umum. Blog ini bisa dipakai untuk keperluan individu/pribadi seperti yang dimiliki oleh saya sekarang ini, ataupun untuk keperluan organisasi.

      Kembali ke topik bahasan, di pertemuan sekarang ini saya akan membahas mengenai Cara Membuat Blog Dengan Baik dan Benar. Lantas bagaimana sih caranya? Di bawah ini sedikit saya akan memberikan tips-nya agar dapat membantu Anda.
      • Siapkan judul dan tema blog
      Sebelum kita membuat blog alangkah baiknya kita tidak buru-buru. Karena jika tidak, maka kemungkinan besar blog yang kita buat tersebut tidak akan terpakai tepat guna. Ketahuilah terlebih dahulu judul dan tema blog yang akan dibuat, sebaiknya sesuaikanlah tema blog Anda dengan materi kesukaan Anda. Misalkan, Anda sangat menyenangi dunia kesehatan, maka buatlah blog dengan tema kesehatan. Dengan begitu, itu akan membantu Anda dalam membuat sebuah postingan dengan baik karena setidaknya kita mengetahui mengenai kesehatan dan tidak akan membosankan.
      • Buatlah domain web yang mudah diingat
      Selain kita memikirkan judul dan tema blog, yang tak kalah penting adalah domain web yang akan kita miliki nantinya. Kita harus bisa membuat domain web yang gampang diingat oleh orang lain supaya lebih memudahkan para pengunjung blog Anda untuk kembali ke sana. 
      • Pilih desain web sesuai dengan tema blog
      Tema blog sudah, domain juga sudah, selanjutnya adalah desain web yang akan dipakai nantinya. Sebaiknya sedari dini Anda memilah-milah mana saja desain web yang baik untuk blog Anda. Seleksilah desain blog yang akan digunakan dan harus disesuaikan dengan blog yang Anda miliki. Kadang, banyak orang yang memilih desain web dengan asal saja, kemudian mereka baru sadar bahwa template blog yang dipakai tidak sesuai dengan tema blognya sehingga mereka mencari lagi dan menggantinya dengan yang baru.
      • Friendly dalam sebuah postingan
       Friendly dalam sebuah postingan? Maksudnya apa? Maksudnya adalah pada saat Anda akan mempostingsebuah artikel, pastikan bahwa postingan Anda tersebut akan menarik untuk dibaca oleh khalayak. Dan dalam sebuah postingan artikel juga kita musti bisa memasukkan diri kita di dalamnya sehingga pada saat orang lain membaca artikel kita, orang tersebut merasa ada seorang Admin yang menemani. Hal tersebut akan sangat baik untuk dilakukan.
      • Menggunakan bahasa yang baik dan benar
      Jangan lupa, jangan hanya friendly saja yang di perhitungkan, bahasapun harus menggunakan bahasa yang baik dan benar. Biasanya seorang pemilik blog yang friendly banyak menggunakan bahasa yang tidak sesuai dengan EYD, memang susah jika mengikuti EYD, namun setidaknya kita berusaha. Bener gak? :D... Bahasa yang baikpun bisa membuat pembaca blog Anda nyaman dan betah berada di blog Anda tersebut.

      Itulah beberapa tips yang bisa saya berikan untuk Anda semua. Semoga dapat membantu Anda dalam mengawali membua blog yang baik dan benar karena di sinipun saya masih belajar juga..hihi :D

      Selamat beraktivitas dan sampai jumpa ...

      Awali Membuat Blog Dengan Benar

      Posted by Muhammad Fiqih No comments

       


      Kang Fiqih | Assalamu'alaikum wr.wb., selamat malam semua. Ini adalah pertemuan pertama saya dengan sobat semua karena ini merupakan blog baru saya yang sengaja dibuat untuk keperluan pembelajaran khusus mengenai dunia teknologi dan internet. (nyambung juga sih dengan jurusan yang saya ambil di perkuliahan)

      Nah, ngomong-ngomong tentang internet pasti tidak lepas dengan yang namanya blog. Benar, blog adalah singprikatan dari web log yang merupakan sebuah bentuk aplikasi web yang menyerupai tulisan-tulisan (yang dimuat sebagai postingan) pada sebuah halaman web umum. Blog ini bisa dipakai untuk keperluan individu/pribadi seperti yang dimiliki oleh saya sekarang ini, ataupun untuk keperluan organisasi.

      Kembali ke topik bahasan, di pertemuan sekarang ini saya akan membahas mengenai Cara Membuat Blog Dengan Baik dan Benar. Lantas bagaimana sih caranya? Di bawah ini sedikit saya akan memberikan tips-nya agar dapat membantu Anda.
      • Siapkan judul dan tema blog
      Sebelum kita membuat blog alangkah baiknya kita tidak buru-buru. Karena jika tidak, maka kemungkinan besar blog yang kita buat tersebut tidak akan terpakai tepat guna. Ketahuilah terlebih dahulu judul dan tema blog yang akan dibuat, sebaiknya sesuaikanlah tema blog Anda dengan materi kesukaan Anda. Misalkan, Anda sangat menyenangi dunia kesehatan, maka buatlah blog dengan tema kesehatan. Dengan begitu, itu akan membantu Anda dalam membuat sebuah postingan dengan baik karena setidaknya kita mengetahui mengenai kesehatan dan tidak akan membosankan.
      • Buatlah domain web yang mudah diingat
      Selain kita memikirkan judul dan tema blog, yang tak kalah penting adalah domain web yang akan kita miliki nantinya. Kita harus bisa membuat domain web yang gampang diingat oleh orang lain supaya lebih memudahkan para pengunjung blog Anda untuk kembali ke sana. 
      • Pilih desain web sesuai dengan tema blog
      Tema blog sudah, domain juga sudah, selanjutnya adalah desain web yang akan dipakai nantinya. Sebaiknya sedari dini Anda memilah-milah mana saja desain web yang baik untuk blog Anda. Seleksilah desain blog yang akan digunakan dan harus disesuaikan dengan blog yang Anda miliki. Kadang, banyak orang yang memilih desain web dengan asal saja, kemudian mereka baru sadar bahwa template blog yang dipakai tidak sesuai dengan tema blognya sehingga mereka mencari lagi dan menggantinya dengan yang baru.
      • Friendly dalam sebuah postingan
       Friendly dalam sebuah postingan? Maksudnya apa? Maksudnya adalah pada saat Anda akan mempostingsebuah artikel, pastikan bahwa postingan Anda tersebut akan menarik untuk dibaca oleh khalayak. Dan dalam sebuah postingan artikel juga kita musti bisa memasukkan diri kita di dalamnya sehingga pada saat orang lain membaca artikel kita, orang tersebut merasa ada seorang Admin yang menemani. Hal tersebut akan sangat baik untuk dilakukan.
      • Menggunakan bahasa yang baik dan benar
      Jangan lupa, jangan hanya friendly saja yang di perhitungkan, bahasapun harus menggunakan bahasa yang baik dan benar. Biasanya seorang pemilik blog yang friendly banyak menggunakan bahasa yang tidak sesuai dengan EYD, memang susah jika mengikuti EYD, namun setidaknya kita berusaha. Bener gak? :D... Bahasa yang baikpun bisa membuat pembaca blog Anda nyaman dan betah berada di blog Anda tersebut.

      Itulah beberapa tips yang bisa saya berikan untuk Anda semua. Semoga dapat membantu Anda dalam mengawali membua blog yang baik dan benar karena di sinipun saya masih belajar juga..hihi :D

      Selamat beraktivitas dan sampai jumpa ...

      Subscribe to: Posts (Atom)

      SPONSOR

      TAG

      Blog (13) Coreldraw (1) Facebook (3) Information Technology (3) Kesan (1) Kode Warna (1) Komputer (6) Photoshop (2) SEO (1) Site Map (1) Twitter (1)

      FOLLOWERS

      VISITOR

      Blogger templates. Proudly Powered by Blogger.
      back to top