IDE PELAJAR - Surat Kabar Blogger

[Ebook] Kumpulan Puisi Edisi Ramadhan - Komunitas Penulis Indonesia Taiwan

2012-07-22T16:16:00.002+07:00

Sungguh tidak terasa, Kita sudah memasuki bulan yang penuh berkah dan Ampunan kembali, Yaa, itulah bulan Ramadhan 1433 H. Sembari menyambut dan menjalankan ibadah puasa, penulis disini akan sedikit berbagi sebuah Ebook Kumpulan Puisi Khusus Ramadhan.

Tapi, ada sesuatu yang spesial dari Ebook Kumpulan Puisi ini, kenapa? Karena Ebook ini dibuat oleh para tenaga kerja asal Indonesia yang berada di Taiwan. Itulah kenapa Ebook Puisi ini sangatlah spesial dan tentunya berkualitas.

Berikut Spesifikasi Ebook Kumpulan Puisi Edisi Ramadhan ini :
Judul : Kumpulan Puisi Edisi Ramadhan Komunitas Penulis Indonesia Taiwan
Bahasa : Indonesia
Penulis : Okti Li & Sahabat KOPIT
Jumlah Halaman : 38
Format Ebook : PDF
Harga : Rp. 0,-
Link Download : Disini

Semoga Ebook Kumpulan Puisi Edisi Ramadhan KOPIT ini dapat bermanfaat, dan semoga saudara Muslim kita yang ada di Taiwan senantiasa mendapat kesehatan dan kelancaran, Aamiin.

Sumber | www.duniadownload.com

Cara Menghilangkan Navbar Blog Terbaru - Tutorial Blogger

2012-07-21T17:20:00.000+07:00

Saat Pertama kali Anda membaca judul dari Artikel ini, Anda langsung menduga bahwa ini hanyalah cara/trik jadul, padahal kenyataannya tidak!. Cara menghilangkan Navbar Di Blog Terbaru ini tanpa menggunakan kode css atau yang lainnya karena ini adalah cara yang legal atau dengan kata lain fitur untuk menghilangkan navbar Blog sudah di dukung oleh pihak Blogger.

Dulu, memang menghilangkan navbar Blog adalah hal yang masih kontroversial karena apakah itu melnggar T.O.S ataukah tidak. Tidak sedikit pula yang memilih untuk tetap memakai navbar default Blogger dengan alasan takut melanggar T.O.S meskipun keberadaan Navbar Blogger inipun tidak terlalu diperlukan.

Tapi, dengan Adanya fitur resmi untuk menghilangkan Navbar Blogger ini, pendapat kontroversial yang ada harus segera berakhir sampai disini.

Cara Menghilangkan Navbar Blog Terbaru Dan Legal

Berikut Adalah cara untuk menghilangkan Navbar Di Blog Anda :

Silahkan login dahulu ke Akun B
Klik Menu dropdown lalu pilih Tata letak

Gb. Menghilangkan Navbar Di Blog
Klik Edit pada widget Navbar
Setelah muncul pilihan, pilih Off(Berada di paling Bawah)
Klik tombol Simpan.
Selesai. Kini navbar Blog Anda telah hilang.

Sebelum cara ini ada, cara menghilangkan navbar Blog adalah dengan menggunakan kode CSS, tapi karena bukan langsung dari Opsi Blogger itu sendiri, pastinya berdampak pada kecepatan Blog karena sebenarnya Navbar tersebut masih di load oleh Browser. Dengan menggunakan cara ini otomatis mempercepat Load Blog Anda dan juga menambah ke - SEO an Blog.

Jadi tunggu apalagi? bila Anda masih menggunakan Kode yang lama, saya sarankan untuk mencoba cara menghilangkan Navbar Blog Terbaru ini. Selamat mencoba dan semoga Bermanfaat :)

Sumber | www.krtutorplus.com

Memasang Tombol Like Facebook Mengikuti Kursor - Tutorial Blog

2012-07-21T14:02:00.001+07:00

Sebagai Jejaring sosial populer saat ini, facebook menjadi media terbesar dalam memasarkan berbagai hal. Baik itu dengan cara berbagi tautan langsung atau melalui Fans Page Facebook.

Nah, kali ini penulis akan sedikit berbagi salah satu cara untuk memperbanyak Like Di Fans Page Anda, yang artinya juga memperbanyak kemungkinan kunjungan Blog Anda yang berasal dari Facebook.

Teknik memperbanyak Like Di Fans Page Facebook kali ini adalah dengan memasang tombol Like Facebook di Blog yang selalu mengikuti kursor sebelum pengunjung Anda meng-klik tombol Likenya. Bagaimana? Sudah bisa dibayangkan bagaimana hasilnya kan?

Berikut DEMO dari pemasangan Tombol Like Mengikuti Kursor ini :

DEMO Blog

Berikut cara memasang Tombol Like Yang Selalu mengikuti Kursor di Blog :
1. Masuk ke Akun Blogger Anda.
2. Pilih bagian Template > Edit HTML > Lanjutkan
3. Cari kode </body>, agar lebih mudah tekan CTRL + F
4. Bila sudah ketemu, copy kemudian paste kode dibawah ini Diatas kode </body> tadi :

<script language='javascript' src='http://idepelajar.googlecode.com/files/like.js'/>

5. Save Template Anda.
6.Setelah itu, Masuk Bagian Layout/Tata Letak > Tambah Gadget > HTML/Javascript
7. Copy dan Paste Kode dibawah ini :

<script language='javascript'>var fan_page_url = 'https://www.facebook.com/idepelajar' var opacity = 0.3;var time = 30000;</script>

Keterangan :

Ganti bagian yang berwarna merah dengan URL Fans Page Blog Anda
Untuk menambah ketransparanannya, silakan tambah nilai variable pada opacity
Dan untuk memperlama waktu menghilangnya silakan tambah nilai variable pada time

8. Simpan! Dan Selesai :)

Tips dari penulis, jangan beri waktu menghilang yang terlalu lama, karena bisa berakibat kaburnya pengunjung Anda, jadi sesuaikan Sendiri dan perkirakan Sendiri yaa :)
Semoga Artikel Cara Memasang Tombol Like mengikuti Kursor ini dapat Bermanfaat,
Semoga Berhasil!

[Ebook] Buku Sakti Hacker - Download Ebook Gratis

2012-07-21T12:47:00.000+07:00

Sepertinya , sudah lama penulis menghilang dari dunia Blogger, yaa memang karena ada banyak kegiatan di dunia nyata yang membuat penulis meninggalkan Blogging sementara.

Cukup itu saja intermezzonya, kali ini penulis akan berbagi sebuah Ebook yang mungkin sedang Anda cari karena Ebook ini adalah Ebook yang sudah cukup terkenal.

Yaa, namanya Adalah Buku Sakti Hacker, Ebook yang satu ini berisi berbagai tutorial dan teknik hacking yang saat ini juga sedang marak dipelajari.

Berikut Spesifikasi Ebook Buku Sakti Hacker ini :

Judul Ebook : Buku Sakti Hacker
Penulis : EFVY ZAM
Penerbit : mediakita
Jumlah Halaman Ebook : 77
Warna Teks : Hitam Putih
Harga : Rp0,-
Download : Klik Disini

Didalamnya terdiri dari berbagai tutorial hacking dasar hingga tingkat professional, cocok untuk Anda yang sedang belajar untuk menjadi hacker hebat :)

Isi :

[-] Menemukan username dan password admin sebuah situs

[-] Menemukan username dan password akun Facebook

[-] Menemukan username dan password akun I-Banking (Internet Bangking)

[-] Menemukan username dan password akun PayPal

[-] Membuat dan mengirim Spyware

Sebenarnya dalam buku aslinya terdiri dari sekitar 300 halaman, tapi meskipun begitu, buku versi Trial ini sudah cukup membantu dan bermanfaat.

Catatan :
- Ebook ini hanya sekedar media pembelajaran, jadi bukan untuk disalahgunakan untuk keperluan yang tidak baik.
- Penulis tidak dapat bertanggung tawab jika dikemudian hari terjadi hal - hal yang tidak diinginkan.

Sekian Artikel Tentang Buku Sakti Hacker ini, semoga dapat bermanfaat :)

Meta Tag Dinamis Terbaik Ala Ide Pelajar - Teknik SEO Blogspot

2012-04-30T08:52:00.000+07:00

Meta tag adalah bagian yang penting dari sebuah blog/website. Mengapa? karena meta tag adalah bagian yang digunakan para Search Engine dalam meng-index Blog. Sudah banyak artikel di Internet yang menjelaskan meta tag, tetapi kali ini penulis akan membagikan meta tag dinamis ala Ide Pelajar yang selama ini penulis Pakai.

Meta tag yang satu ini, sudah penulis uji dan Alhasil cukup berdampak pada SERP Blog ini. meta tag ini adalah meta tag rangkuman dari berbagai meta tag yang ada dan sudah penulis seleksi ulang untuk mendapatkan hasil maksimal.

Meta Tag Dinamis ala Ide Pelajar
Meta tag terbaik bagi Blog adalah meta tag yang dinamis yang artinya meta tag tersebut dapat mengikuti perubahan konten Blog Anda. Ada 3 elemen meta tag yang sangat penting, yaitu meta title, meta deskription , dan meta keyword. Ini adalah teknik SEO yang sangat penting dan paling mendasar untuk Blog Anda. Sebagai contoh, silakan Anda tekan CTRL + U pada halaman artikel dan homepage Ide Pelajar ini, pasti bagian meta tag dari keduanya tidaklah sama.

Berikut adalah meta tag dinamis ala Ide Pelajar sebagai salah satu teknik SEO On Page untuk Blog Anda :
1. Masuk ke Akun Blogger Anda.
2. Pilih bagian Template > Edit HTML > Lanjutkan
3. Kemudian Cari Kode <Head> dan kode <b:skin><![CDATA[/* , hapus semua kode yang Ada diantara kode tersebut, analoginya seperti ini :

<head>
kode yang dihapus
<b:skin><![CDATA[/*

4. Kemudian ganti kode yang Anda hapus tadi dengan kode dibawah ini :

<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> - <data:blog.pageTitle/></title>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='Deskripsi Hme Page Anda' name='description'/>
<meta content='Keyword Home Page Anda' name='keywords'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<meta expr:content='data:blog.pageName + " Deskripsi pada halaman yang sedang dibuka"' name='description'/>
<meta expr:content='data:blog.pageName + " Keyword pada halaman yang sedang dibuka"' name='keywords'/>
</b:if>
<meta content='© Ide Pelajar - All Right Reserved' name='copyright'/>
<meta content='Muchamad Nurudduja Al Kautsar' name='author'/>
<meta content='index, follow, noodp, noydir' name='robots'/>
<meta content='index, follow, snipet' name='googlebot'/>
<meta content='follow, all' name='Googlebot-Image'/>
<meta content='1 day' name='revisit'/>
<meta content='1 day' name='Revisit-after'/>
<meta content='id' name='language'/>
<meta content='id' name='geo.country'/>
<meta content='-5;120' name='geo.position'/><meta content='Indonesia' name='geo.placename'/>
<meta content='Blog Tutorials' name='Classification'/>
<meta content='global' name='distribution'/>
<meta content='general' name='rating'/>

CATATAN :

Ganti bagian yang berwarna merah sesuai dengan Blog Anda.
ganti bagian yang berwarna orange sesuai dengan lokasi Anda dan bila Blog Anda berbahasa Inggris, Anda dapat menghilangkan bagian <meta content='id' name='language'/>.

Yang harus Anda ingat adalah bahwa meta tag diatas adalah meta tag dinamis. Jadi, Anda dapat menentukan deskripsi dan keyword tersendiri untuk halaman depan dan halaman konten. Hal ini dapat menjadi senjata Anda dalam bertarung pada SERP.

Meta tag juga tidak 100% berpengaruh dalam SERP karena masih ada banyak faktor lain seperti Heading, keyword density, dan masih banyak lagi. Jadi jangan kecewa bila Anda telah menggunakan meta tag diatas dan belum mendapatkan hasil maksimal. selamat mencoba Meta tag dinamis ala Ide Pelajar ini! Semoga berhasil!

Salam Blogger Indonesia!

Menaikkan Trafik Pengunjung Blog - Cara mudah dan Cepat Ala Ide Pelajar

2012-04-29T09:10:00.000+07:00

Sebagai Blogger newbie (baca:pemula) pasti menginginkan Blog yang dimilikinya memiliki banyak pengunjung. Banyak yang mencoba mencari cara instan untuk mewujudkan hal tersebut. Salah satunya adalah dengan mencari artikel dengan kata kunci cara cepat menaikkan pengunjung Blog, cara cepat menaikkan trafik Blog, cara mudah menaikkan trafik Blog dan masih banyak lagi.

Ya, tidak dapat kita pungkiri memang, pengunjung Blog tidaklah berasal dari satu negara saja. Penulis kali ini tidak akan menulis tentang cara menaikkan pengunjung Blog dengan instan, melainkan cara bagaimana memperkenalkan Blog kita kepada Dunia dengan cara mudah dan cepat(bukan instan)

Bagaimana Cara mendapatkan pengunjung dengan banyak?
nah, disini kita akan memanfaatkan jasa dari program tukar kunjungan.

Bagaimana cara kerjanya?
tukar kunjungan ini maksudnya, Anda akan diarahkan untuk mengunjungi Blog atau website lain, dan orang lain pun akan mengunjungi Blog Anda. perbandingannya adalah 1 : 1. Jadi, setiap 1 Blog yang Anda kunjungi, Anda juga akan mendapat 1 kunjungan dari orang lain. Mudah kan?

Apakah kita harus membayar?
oh, tentu saja tidak, ini adalah program gratis.

Apakah masih ada keuntungan lainnya?
ya, masih ada keuntungan lainnya, salah satunya Anda juga akan dibayar setiap kali Anda telah surfing(baca:mengunjungi) sebanyak 1000x. Tidak banyak memang, tapi lumayan dari pada tidak mendapat apa apa, toh tujuan utama kita adalah mendapat pengunjung. keuntungan lain dapat Anda lihat sendiri setelah anda mengunjungi websitenya.

Untuk mendapatkan semua itu, kita akan memanfaatkan easyhits4u sebagai program penyedia layanannya. Mengapa? karena easyhits4u sudah terpercaya dan merupakan penyedia jasa tukar pengungjung no. 1 di Dunia.
Berikut cara pendaftarannya :

buka website EasyHits4u
Silakan Anda mendaftar, dan konfirmasi pendaftaran Anda melalui email yang nantinya akan dikirm.
Log in ke akun Anda > pilih bagian my sites > Add a new sites, kemudian isi sesuai gambar dibawah ini(Klik untuk memperbesar) :

Submit Site,

Confirm.

Setelah terdaftar, Silakan Anda mulai untuk bersurfing dengan klik bagian Start Surfing.

Nah, yang perlu Anda perhatikan, jika Blog Anda sudah terpasang Google Adsense, jangan menggunakan layanan ini, karena melanggar T.O.S Google Adsense. Sekian artikel tentang cara menaikkan trafik pengunjung Blog ala Ide Pelajar. Semoga bermanfaat!
Salam Blogger Indonesia!

Sering Mengganti Template Blog Mempengaruhi SERP - Solusi Saat Mengganti Template Blog

2012-04-15T10:23:00.000+07:00

Banyak para master SEO yang mengatakan bahwa sering gonta - ganti template Blog itu mempengaruhi SERP(Baca : Search Engine Result Page) Blog. Hal itu membuat para Blogger pemula urung untuk mengganti template Blog mereka, dan membuat semangat nge-blog berkurang. Kali ini penulis akan membahas alasan mengapa para master SEO melarang kebiasaan gonta - ganti template dan bagaimana cara mengatasinya.

Mengapa sering gonta - ganti template Blog dapat mempengaruhi SERP?

Alasannya, karena saat Anda mengganti template Blog, sama saja dengan Anda merubah identitas Blog. Kita tau bahwa Search Engine termasuk Google sangat memperhatikan kejelasan dari identitas Blog. Hal itu, dapat menjadi ciri khas dan keunikan tersendiri dari Blog yang Anda miliki yang tentunya membuat para Mesin Pencari menyukai Blog Anda. Itulah alasan utama mengapa sering mengganti template Blog sangat mempengaruhi SERP.

Apa Buktinya?

Soal bukti, ada Banyak. Anda pasti pernah mengunjungi Blog yang memiliki visitor ribuan perhari? atau bahkan jutaan? pernahkah Anda mengamati bagaimana template Blog tersebut? Ya! template Blog tersebut jarang sekali berubah bahkan hampir tidak pernah. Sudah jelas bukan? mengganti template Blog menjadi hal yang Tabu bagi para Blogger Professional.

Lalu, Apakah kita harus tetap menggunakan template yang lama? yang notabene, mungkin sudah tidak menarik lagi?

TIDAK! Blog yang menarik sangatlah disukai oleh pengunjung dan tentunya membuat para pengunjung Blog menjadi Betah berlama - lama di Blog Anda.

Bagaimana Solusinya?

Nah, ada sedikit trik dari penulis agar mengganti template Blog tidak berpengaruh pada SERP. saat Anda mengganti template Blog cari kode <b:skin><![CDATA[/* pada template Blog yang Lama kemudian copy paste menggantikan kode yang berada diatas kode <b:skin><![CDATA[/* pada template baru Anda. Sangat simple kan?

Dengan cara diatas, Anda tidak perlu lagi takut saat mengganti template Blog. Silakan ganti template Blog Anda sepuasnya tapi Anda juga harus ingat, template yang menarik tanpa Artikel yang menarik sama seperti orang yang pincang.

Penulis berharap Artikel mengganti template Blog mempengaruhi SERP dan solusinya ini dapat bermanfaat.

Keep Blogging!

Salam Blogger Indonesia!

Memasang Jumplink Post Tanpa Javascript - Pengganti Readmore di Blog

2012-04-08T12:07:00.000+07:00

Saat ini, mayoritas Blog yang ada sudah memakai script readmore, entah readmore secara manual atau secara otomatis. Memang manfaat memasang readmore ini sangatlah banyak, salah satunya yaitu meningkatkan pageviews Blog dan mempermudah pengunjung dalam mencari artikel.

Nah, kali ini penulis tidak akan membahas readmore yang terpasang secara manual(sudah banyak ditinggalkan karena kurang praktis) tetapi membahas readmore yang terpasang secara otomatis. Tapi taukah Anda? bahwa readmore yang terpasang secara otomatis itu memanfaatkan javascript? padahal, pemasangan javascript itu sendiri sangat tidak direkomendasikan karena dapat memperlambat loading Blog.

Tapi, sekarang sudah ada solusinya, yaitu readmore yang terpasang otomatis tapi tanpa menggunakan javascript. Sangat bagus bukan? hasilnya pun sama persis dengan readmore yang menggunakan javascript. Contohnya ya seperti Readmore(Baca: Baca Selengkapnya) yang terpasang pada Ide Pelajar ini.

Berikut langkah - langkah pemasangannya :

1. Silakan login ke Akun Blogger Anda.
2. Pilih bagian Template > Edit HTML > Lanjutkan
3.Back Up dulu template Anda, hanya untuk berjaga - jaga bila terjadi kesalahan yang tidak diinginkan
4. Jangan lupa, beri centang pada Expand Template Widget

5. Cari Kode <data:post.body/> , Biasanya dalam template terdapat banyak kode <data:post.body/> , pastikan Anda sudah menemukan kode <data:post.body/> yang kira - kira tempatnya berada didekat kode:

<div class='post-header'>
<div class='post-header-line-1'/>

Setelah ketemu, silakan Anda ganti kode <data:post.body/> tadi dengan kode dibawah ini:

<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.snippet'>
<b:if cond='data:post.thumbnailUrl'>
<div class='Image thumb'>
<img expr:src='data:post.thumbnailUrl'/>
</div>
</b:if>
<data:post.snippet/>
<b:if cond='data:post.jumpLink != data:post.hasJumpLink'>
<div class='jump-link' style='float:right'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
</b:if>

6. Selanjutnya, tinggal menambahkan kode CSS untuk thumbnail gambar, silakan cari kode ]]></b:skin> , Copy dan paste kode berikut tepat diatasnya :

.thumb img {
float: left;
margin: 0 10px 10px 0;
}

7. Sebelum Anda Save/Simpan , pilih pratinjau dulu, untuk memastikan apakah Readmore otomatis tanpa javascript ini sudah bekerja dengan baik ataukah belum. Bila Sudah bekerja, tinggal klik Save/Simpan.

Nah, bila Anda belum berhasil memasangnya, silakan teliti lagi atau coba ulangi langkah diatas dan apabila masih saja belum dapat bekerja, Anda dapat meninggalkan pertanyaan pada form komentar dibawah Artikel berikut. Penulis berharap Artikel Memasang readmore otomatis atau jumplink tanpa javascript ini dapat bermanfaat.
Selamat mencoba!

Script Source :
Donor Ilmu

Memasang Breaking News/News Ticker Menarik Di Blog - Widget Berbasis Feeds Di Blog

2012-04-07T18:30:00.000+07:00

News Ticker/Headline News, begitulah para Blogger menyebut widget ini. Memang karena tampilan dan cara kerjanya yang mirip dengan Headline News di siaran TV lah, membuat widget satu ini disebut Headline News. Widget yang satu ini memanfaatkan Feed Blog sama halnya dengan Sitemap untuk Blogger (baca : Mengirim Peta Situs Ke Google Webmaster) yang juga memanfaatkan Feeds pada Blogger.

Perbedaan dari keduanya adalah Headline News dibuat dan diperuntukkan bagi para pengunjung Blog, sedangkan sitemap dibuat dan ditujukan untuk Search Engine. Contoh bagaimana tampilan Headline News ini dapat dilihat Pada Bagian Atas Blog Demo berikut. Bagaimana? tidak memerlukan banyak tempat, tetapi sangat berguna kan?.

Berminat untuk memasangnya pada Blog Anda? Berikut langkah - langkah pemasangannya:
1. Login ke Akun Blogger Anda
2. Pilih bagian Template > Edit HTML > Lanjutkan

3. Jangan lupa, untuk Back Up template Anda (hanya untuk berjaga - jaga bila terjadi sesuatu yang tidak di inginkan).

4. Beri centang pada bagian Expand Template Widget

5. Cari kode ]]></b:skin>, Kemudian copy dan paste kan kode berikut di atasnya :

/* -- Headline News -- */
.headline-wrapper {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNh5IjJTSkogHniH_mb2xv28uUln5-75L3fZg3Hb1uB1SaWaLrdAWMyAngoQnaLv0ibAtTxszqhCK-0A3dUb5NE7UNwYFRYsXyXuohtWyOboGy9OKZWPX8jWeo-Sg95qVgDijPyYN8pb1c/s1600/headlines-bg.png) repeat-x;width:980px;height:22px;border-bottom:1px solid #022f36;margin:0 auto;padding:0 auto
}
.headline {
width:980px;line-height:1.4em;text-align:left;font-family:Arial;font-size:11px;color:#fff;overflow:hidden;clear:both;margin:0 auto;padding:0 auto
}
.headline a:hover {
color:#eace12;text-decoration:underline
}

Catatan : sesuaikan 980px dengan lebar Header Blog Anda

6. Masih dalam posisi Edit HTML, cari kode </Head> kemudian copy paste kode berikut diatasnya :

<script src='https://www.google.com/jsapi?key=ABQIAAAAlQIoliUVPjZwD8UDgw_U3RTUhB4JyH-ajz-fA9t4yePPPdGAfRTC_mtuh6Iq1MLEipD0I2rCi30Png' type='text/javascript'/>
<script src='http://script-idepelajar.googlecode.com/files/newsticker.js' type='text/javascript'/>
<style type='text/css'>
.titlefield{ /*CSS for RSS title link in general*/
text-decoration: none;}
.labelfield{ /*CSS for label field in general*/
color:#666;font-size: 100%;}
.datefield{ /*CSS for date field in general*/
color:#fff;font:normal 12px Arial;}
#example1{ /*Demo 1 main container*/
width: 900px;
height: 12px;
border: 0px solid #aaa;
padding: 0px;
font:bold 12px Arial;
text-transform:none;
text-align:left;
background-color:transparent;}
code{ /*CSS for insructions*/
color: #fff;}
#example1 a:link, #example1 a:visited {color:#ffd200;text-decoration:none;}
#example1 a:hover {color:#fff;text-decoration:none;}
</style>

Catatan : Ganti API key berwarna Hijau dengan Google API Blog Anda, tapi jika Blog Anda masih baru ( saat ini, google sudah tidak menerima pembuatan API key) Gunakan saja API Key diatas.

7. Nah, langkah yang ini adalah langkah terakhir, yaitu tempat memasangan Headline News ini, silakan Anda letakkan kode dibawah ini ditempat yang Anda inginkan, tapi bila bingung, letakkan kode dibawah ini tepat diatas kode <div id='content-wrapper'> :

<div class='headline'>
<div style='float:left;padding:2px 5px 5px 10px;font:bold 12px Arial;color:#fff;text-transform:none;'>
Headlines News :
</div>
<div style='float:left;width:800px;padding:2px 0; position:relative; overflow:hidden;'>
<script type='text/javascript'>
var cssfeed=new gfeedrssticker("example1", "example1class", 3000, "_new")
cssfeed.addFeed("Headline News", "http://idepelajar.blogspot.com/feeds/posts/default") //Specify "label" plus URL to RSS feed
cssfeed.displayoptions("date") //show the specified additional fields
cssfeed.setentrycontainer("div") //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, "date") //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
</div><div style='clear:both;'/>
</div>

Sehimgga akan diperoleh susunan seperti ini :

<div class='headline'>
<div style='float:left;padding:2px 5px 5px 10px;font:bold 12px Arial;color:#fff;text-transform:none;'>
Headlines News :
</div>
<div style='float:left;width:800px;padding:2px 0; position:relative; overflow:hidden;'>
<script type='text/javascript'>
var cssfeed=new gfeedrssticker("example1", "example1class", 3000, "_new")
cssfeed.addFeed("Headline News", "http://idepelajar.blogspot.com/feeds/posts/default") //Specify "label" plus URL to RSS feed
cssfeed.displayoptions("date") //show the specified additional fields
cssfeed.setentrycontainer("div") //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, "date") //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
</div><div style='clear:both;'/>
</div>
<div id='content-wrapper'>

Catatan : Ganti Kata Bercetak BIRU dengan URL Blog Anda.

8. Save/Simpan template Anda

Terkadang bila dipasang pada Blog yang masih baru, Headline News ini sulit muncul. Jangan panik!, jangan telfon polisi atau pemadam kebakaran!,hehehehe, Tenang saja, hal itu disebabkan Feeds Blog Anda yang belum dikenali. Jadi tetap posting atau tunggu kira - kira 2 hari, Insya Allah Headline News ini akan segera muncul.

Penulis berharap, tutorial cara memasang headline news menarik di Blog diatas dapat dimengerti dan dapat bermanfaat. Bila ada yang kurang dimengerti, jangan sungkan - sungkan meninggalkan komentar yaa.
Selamat mencoba! Semoga Berhasil!

Script Source :
Template Maskolis

Mengirim Peta Situs Ke Google Webmaster - Salah Satu Teknik SEO Blog

2012-04-05T14:53:00.000+07:00

Sitemap atau peta situs adalah sebuah halaman yang berisi semua link Blog Anda. Apakah ini penting? ya, tentu saja, dengan peta situs ini pengunjung akan lebih mudah mencari artikel yang mereka cari pada Blog Anda. Tapi kali ini yang akan penulis bahas adalah peta situs yang khusus ditujukan untuk Robot Google. Apakah berbeda? ya, karena Robot Google hanya memerlukan kumpulan linknya saja, tanpa memperhitungkan tampilan peta situs Anda.

Apakah sitemap/peta situs berpengaruh pada ke SEO an Blog?
menurut para master SEO dan pihak Google itu sendiri, adanya sitemap sangatlah dianjurkan, hal ini berarti, Adanya pengaruh sitemap/peta situs terhadap ke SEO an Blog entah itu besar atau kecil.

Bagaimana cara memberitahukan sitemap/peta situs Pada Robot Google(Baca : Robot Google) ?
Nah, itulah yang akan penulis bahas pada Artikel ini, jadi tetap stay on Ide Pelajar ya.

Bila Anda adalah pengguna platform Blogger, Bersyukurlah karena Anda mendapat kemudahan dari pihak Google karena notabene Blogger.com itu sendiri adalah layanan dari Google, tentu saja lebih di anak emaskan. Pengguna Blogger.com tidak perlu lagi memverifikasi Blog nya pada Google Webmaster karena sudah otomatis terverifikasi kepemilikannya.

Apa yang digunakan untuk mengirim sitemap/peta situs?
Nah, kita akan memanfaatkan Feeds dari layanan Blogger.com itu sendiri.

Berikut langkah - langkah mengirim sitemap/peta situs pada Google Webmaster :

1. Buka Google Webmaster
2. Akan muncul List Blog Milik Anda, pilih Blog yang ingin Anda kirimkan stemap/peta situs nya.

3. Pilih Konfigurasi Situs > Peta Situs

4. Lihat bagian Kanan Atas pada tampilan Browser Anda

5. pilih Tambahkan Peta Situs, nah, pada langkah inilah Anda dapat memasukkan peta situsnya. Masukkan URL berikut :

atom.xml?redirect=false&start-index=1&max-results=500

atau

feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc

Agar GoogleBot lebih menyukai Blog Anda, silakan Anda masukkan kedua alamat diatas!
Penulis berharap setelah Anda menerapkan cara mengirim sitemap/peta situs pada Google Webmaster, Blog Anda dapat lebih disukai Search Engine yang juga berarti visitor Blog Anda juga ikut bertambah. Semoga Bermanfaat !

Widget Follow Pop Out Ala Wordpress pada Blogger

2012-04-03T00:14:00.002+07:00

Sering kali kita lihat plugin Follow Email Pop Out dibagian bawah kanan pada Blog wordpress. Penulis sempat berfikir, kalau wordpress saja bisa, kenapa Blogger tidak bisa?. Dengan memadukan antara Pop out dan jquery, pastinya akan membuat widget ini bagus dan halus dalam bergerak dan tentunya widget Follow email pop out ini juga mudah sekali untuk di pasang pada Blog Anda.

Pengunjung Blog Anda pun menjadi mudah untuk berlangganan Feed Blog Anda karena cukup satu kali klik saja untuk mulai berlangganan. Simpel dan praktis kan?. Untuk contoh bagaimana hasil dari pemasangan widget ini, Anda dapat melihatnya pada bagian kanan bawah pada Blog ini. Satu lagi, jangan dilihat saja, tapi masukkan juga Email Anda dan klik berlangganan(Sekalian uji coba dan promosi, hehehe).

Sama halnya dengan Widget yang berbasis pada Jquery Plugin, Anda harus memasang kode Jquery Plugin pada template Anda terlebih dahulu.

Berikut cara pemasangan widget Follow Pop Out Ala Wordpress di Blogger :
1. Masuk ke akun Blogger Anda.
2. Pilih bagian Tata Letak

3. Pilih Tambah Widget > HTML/JavaScript

4. Copy dan paste kan Semua Script Follow widget Pop Out dibawah ini ke dalam HTML/JavaScript tadi :

<style type="text/css">
/*<![CDATA[*/
#idepljrfollowSubscribe {background-color: #464646;width: 220px;color: #fff;position: fixed;z-index: 999999;right: 10px;bottom: 0;}
.followOpened {-webkit-border-radius: 2px 0 0;-moz-border-radius: 2px 0 0;border-radius: 2px 0 0;-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);}
.idepljrfollowButton {background: #464646;color: #CCC !important;font-size: 13px;line-height: 28px;padding: 0 10px;text-decoration: none;position: absolute;top: -28px;right: 0;display: block;-webkit-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);-moz-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);-webkit-border-radius: 2px 2px 0 0;-moz-border-radius: 2px 2px 0 0;border-radius: 2px 2px 0 0;height: 28px;}
.idepljrfollowButton span {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV0TWTSvDxkFzyWO2-Rvgv65mwfNQkN3yZjMe46mOLgE3Xroc3q5qZCE8UUHSuqgWyO_mttB8DunCOESUF1No8yUmyBC2oyJ7ROLhFora34lgsgkIpTgryotEVv3dcZAWCD6qDF8YuonzN/s1600/follow-w2b.png") no-repeat scroll 0 3px transparent;padding-left: 15px;}
.idepljrfollowButton:hover,.followActive {color: #fff !important;}
.idepljrfollowButton:hover span,.followActive span {background-position: 0 -37px !important;}
.followactive {background-color: #333;}
.idepljrfollowForm {padding: 15px;}
.idepljrfollowForm h3 {font-size: 18px;margin: 0 0 10px;font-weight: normal;}
.idepljrfollowForm p {margin: 0 0 10px;}
.idepljrfollowForm .emailInput {width: 95%;padding: 2px 4px;margin: 0 auto;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 15px;border: 1px solid #444;color: #888;display: block;clear: both;}
.idepljrfollowForm form {text-align: center;}
.idepljrfollowForm .emailInput:focus {color: #000;border-color: #000;}
.idepljrfollowForm .emailSubmit {cursor:pointer;padding: 2px 20px;background: #333;background: -webkit-linear-gradient(top, #333 0%, #111 100%);background: -moz-linear-gradient(top, #333 0%, #111 100%);background: -o-linear-gradient(top, #333 0%, #111 100%);background: -ms-linear-gradient(top, #333 0%, #111 100%);background: linear-gradient(top, #333 0%, #111 100%);color: #ccc;text-shadow: 0 1px 0 #000;border: 1px solid #282828;-webkit-border-radius: 11px;-moz-border-radius: 11px;border-radius: 11px;-webkit-box-shadow: inset 0 1px 0 #444;-moz-box-shadow: inset 0 1px 0 #444;box-shadow: inset 0 1px 0 #444;text-decoration: none;-webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;margin: 1em 0 1em 0;}
.emailSubmit:hover {background: #222;background: -webkit-linear-gradient(top, #333 0%, #222 100%);background: -moz-linear-gradient(top, #333 0%, #222 100%);background: -o-linear-gradient(top, #333 0%, #222 100%);background: -ms-linear-gradient(top, #333 0%, #222 100%);background: linear-gradient(top, #333 0%, #222 100%);color: #fff;-webkit-box-shadow: inset 0 1px 0 #4f4f4f;-moz-box-shadow: inset 0 1px 0 #4f4f4f;box-shadow: inset 0 1px 0 #4f4f4f;text-decoration: none;}
.emailSubmit:active {background: #111;background: -webkit-linear-gradient(top, #111 0%, #222 100%);background: -moz-linear-gradient(top, #111 0%, #222 100%);background: -o-linear-gradient(top, #111 0%, #222 100%);background: -ms-linear-gradient(top, #111 0%, #222 100%);background: linear-gradient(top, #111 0%, #222 100%);color: #aaa;-webkit-box-shadow: inset 0 -1px 0 #333;-moz-box-shadow: inset 0 -1px 0 #333;box-shadow: inset 0 -1px 0 #333;text-decoration: none;}
.idepljrFollowFooter {text-align: center;font: normal 11px "Helvetica Neue", sans-serif;padding: 7px 0;margin: 0 0 -15px !important;border-top: 1px solid #3c3c3c;}
.idepljrFollowFooter a {color: #aaa;text-shadow: 0 1px 0 #262626;background: none;text-decoration: none;}
.idepljrFollowFooter a:hover {color: #fff;background: none;}
/*]]>*/
</style>

<script type="text/javascript">
/*<![CDATA[*/
;(function(idepljr){idepljr(document).ready(function(){idepljr.extend(idepljr.easing,{easeOutCubic:function(x,t,b,c,d){return c*((t=t/d-1)*t*t+1)+b}});var followBox=idepljr("#idepljrfollowSubscribe");var followHeight="-"+followBox.outerHeight()+"px";followBox.hide().css({bottom:"-500px"});setTimeout(function(){followBox.show().animate({bottom:followHeight})},500);idepljr(".idepljrfollowButton").click(function(e){if(followBox.hasClass("followOpened")){idepljr(this).removeClass("followActive");followBox.removeClass("followOpened").stop().animate({bottom:followHeight},{duration:300,easing:"easeOutCubic"})}else{idepljr(this).addClass("followActive");followBox.addClass("followOpened").stop().animate({bottom:"0"},{duration:500,easing:"easeOutCubic"})}e.preventDefault()})})})(jQuery);
/*]]>*/
</script>

<div id="idepljrfollowSubscribe" style="display:none;">
<div class="idepljrfollowForm">
<a class="idepljrfollowButton" href="#" title="Follow"><span>ikuti</span></a>
<h3>Follow "NAMA BLOG ANDA"</h3>
<p>Dapatkan setiap Artikel Baru Melalui Email</p>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=idepelajar', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="text" class="emailInput" name="email" placeholder="Masukkan Email Anda . . ."/>
<input type="hidden" value="idepelajar" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input type="submit" value="Berlangganan" class="emailSubmit"/>
</form>
<p class="idepljrFollowFooter">
<a href="http://feedburner.google.com" target="_blank">Delivered by FeedBurner</a>
</p>
</div>
</div>

Catatan :
1. ganti kata yang tercetak BIRU dengan ID FEED Blog Anda.

5. Lanjutkan Pada langkah ini, jika sebelumnya, Anda belum pernah memasang Jquery Plugin.
Klik Template > Edit HTML > Lanjutkan > Copy kemudian Paste Kode dibawah ini tepat dibawah kode ]]></b:skin> :

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

6. Save/Simpan dan lihat hasilnya.

Meskipun widget diatas terlihat banyak, tapi pada kenyataannya, widget ini sama sekali tidak terasa berat ketika Blog di Load. Semoga Artikel mengenai widget follow pop out ala wordpress pada blogger ini dapat bermanfaat, dan bila ada yang kurang jelas, jangan sungkan sungkan untuk meninggalkan komentar.
Salam Blogger Indonesia!

Thesis SEO Blogger Template - Ide Pelajar Style

2012-04-02T19:10:00.000+07:00

Beberapa waktu lalu sempat muncul ide untuk mengedit Thesis SEO Blogger Template buatan Blog Juragan yang diadaptasi dari Thesis Template wordpress yang seharga $87 dollar. Memang template yang satu ini sudah diakui Om mattchuss sebagai template yang SEO killer atau bisa dibilang SEO banget. untuk versi wordpress nya silakan kunjungi thesis demo

Tampilan Thesis Blogger Template

Demo dan Download

Live Demo : Thesis for Blogger/Blogspot

Download : Download via box

Apa Saja Kelebihan dan yang baru dari Thesis SEO Blogger template ini?

- SEO Friendly
- Visitor Friendly
- Dipersenjatai dengan Dinamic heading (h1 pada header di index, dan h1 di judul post pada halaman posting)
- Dilengkapi dengan dinamic metatag deskripsi dan keyword otomatis (meta tag wajib untuk menghindari duplikat meta deskripsi & keyword)
- meta tag yang sudah disesuaikan dengan Blogger Baru
- Quicklink ke kotak komentar
- Autoreadmore Baru
- Loading yang cepat dari versi sebelumnya
- Konsep minimalis & simple
- 3 Footer
- dll.

Lalu, Apa saja kekurangannya?

Karena ini adalah template hasil convert dari template wordpress, tentu saja kekurangan terbesarnya adalah dalam hal kemiripan dengan template aslinya.

Apakah Thesis SEO Blogger template ini gratis?

Sesuai dengan author template ini yang memberikannya secara cuma - cuma, penulis pun memberikan template dengan gratis pula. tapi, penulis mohon jangan hapus link credit yang ada di bagian bawah, tunjukkan kode etik Anda sebagai Blogger Indonesia.

Panduan Mengedit template

Untuk panduan mengedit sudah penulis sertakan langsung dalam tempate, jadi Anda hanya perlu mengganti beberapa bagian yang sudah penulis paparkan didalamnya. Untuk pengeditan dalam hal mempercantik tampilan, silakan saja kunjungi Ide Pelajar ini. Penulis Ide Pelajar hanya sedikit melakukan pengeditan dalam template ini, karena template buatan sang Author memang sudah bagus.

Usahakan deskripsi dan keyword relevan dengan Blog Anda supaya Search Engine lebih mengenal Anda dan pastinya membuat template Anda lebih SEO Friendly. Semoga Thesis SEO Blogger Template ini dapat bermanfaat.

Memasang Gambar dibagian Pojok Blog

2012-04-02T14:46:00.002+07:00

Anda tentunya pernah melihat Blog yang memasang Gambar dibagian pojok kanan/kiri bagian atas/bawah Blog, Entah itu Logo blog, iklan, atau yang lainnya. Contonya seperti pada Blog DEMO TUTORIAL. Tertarik untuk memasang Gambar dibagian Pojok Blog ini?

Berikut cara memasang Gambar Gambar dibagian pojok kanan/kiri bagian atas/bawah Blog dengan mudah :

1. Login ke akun Blogger Anda
2. Pilih bagian Template

3. Pilih Edit HTML > kemudian pilih Lanjutkan

4. Checklist pada Expand Template Widget

4. Cari Kode ]]></b:skin> (Tekan CTRL + F untuk mempermudah pencarian). Kemudian Copy Dan Paste kode berikut diatas kode ]]></b:skin> tadi :

Bagian Bawah Kiri :

#gambar-ide{position:fixed; _position:absolute; bottom:0px; left:0px; clip:inherit; z-index:+1000;}

Bagian Bawah Kanan :

#gambar-ide{position:fixed; _position:absolute; bottom:0px; right:0px; clip:inherit; z-index:+1000;}

Bagian Atas Kiri :

#gambar-ide{position:fixed; _position:absolute; top:0px; left:0px; clip:inherit; z-index:+1000;}

Bagian Atas Kanan :

#gambar-ide{position:fixed; _position:absolute; top:0px; right:0px; clip:inherit; z-index:+1000;}

Catatan : 0px adalah jarak antara gambar dengan bagian tepi Blog, silakan Anda sesuaikan sendiri.

5. Selanjutnya, Copy Paste kode berikut tepat diatas kode </body> :

<div id='gambar-ide'>
<a href='ALAMAT YANG DITUJU SAAT GAMBAR DIKLIK' target='_blank' title='TITLE GAMBAR'>
<img border='0' src='URL GAMBAR'/></a>
</div>

Catatan : Ubah bagian yang berwarna ORANGE .

6. Save/Simpan template Anda, dan lihat hasilnya.

Mudah dan simple kan? penulis berharap panduan cara memasang gambar dibagian bawah dan atas blog ini dapat bermanfaat. Selamat mencoba, dan semoga berhasil, bila kurang jelas silakan tinggalkan komentar Anda.

Google Translate Dengan Efek Jquery Lightbox Di Blog

2011-10-01T21:22:00.002+07:00

Widget Google Translate sekarang ini seakan menjadi widget yang wajib dipasang di Blog, Mengapa? karena pengunjung Blog kita tidak hanya berasal dari satu negara, yang berarti juga menggunakan bahasa yang berbeda - beda pula. Adanya Widget Google Translate ini akan mempermudah para pengunjung Blog untuk memahami artikel yang mereka baca.

Tapi, kali ini penulis akan membagikan Widget Google Translate yang berbeda dengan widget google translate biasa, itu karena Widget Google Translate yang ini sedikit ditambah dengan sentuhan Jquery yang membuatnya terkesan lebih bagus dan apik.

Berikut cara pemasangannya :

1. Login ke akun Blogger Anda
2. Pilih bagian Tata Letak.

3. Kemudian klik Tambah Gadget > HTML/JavaScript

4. Copy kemudian paste kode berikut ke dalamnya :

<script src='http://script-idepelajar.googlecode.com/files/jquery-latest.pack.js' type='text/javascript'></script>
<script>
$(document).ready(function() {
//select all the a tag with name equal to modal
$('a[name=modal]').click(function(e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr('href');
//Get the screen height and width
var idepelajarHeight = $(document).height();
var idepelajarWidth = $(window).width();
//Set heigth and width to idepelajar to fill up the whole screen
$('#idepelajar').css({'width':idepelajarWidth,'height':idepelajarHeight});
//transition effect
$('#idepelajar').fadeIn(1000);
$('#idepelajar').fadeTo("slow",0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
});
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#idepelajar').hide();
$('.window').hide();
});
//if idepelajar is clicked
$('#idepelajar').click(function () {
$(this).hide();
$('.window').hide();
});
});
</script><style>a {color:#ffffff; text-decoration:none}
img { border: none; }
#idepelajar {
position:fixed;
left:0;
top:0;
z-index:700;
background-color:#000;
display:none;
}#wadah .window {
position:fixed;
left:0;
top:0;
width:0px;
height:0px;
display:none;
z-index:9999;
padding:0px;
}#wadah #translate {
background:url() no-repeat 0 0 transparent;
width:280px;
height:0px;
padding:0px 0 50px 137.5px;
}#tutupan {
padding:0px 0 0 0;
}</style><ul><left>
<a href='#translate' name='modal'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHNoJ39CjugbsKTu76JZHauOC1v_kE25dTd4QghLmkUnw3rMBckRAvbCEP3EzeRbS5gD1DvJUpTLP9SS6gn4z-c3fyo0Euhvaq7ZlcTDChknLlAbQzO-5smMY78RYAd1s81sSzixLfrvWI/s1600/SelectLanguage.gif' title='Select Language - Translate' width=''/></a>
</left><div dir='ltr' style='text-align: right;' trbidi='on'></div></ul><div id='wadah'>
<div class='window' id='translate'>
<div id='google_translate_element'></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
autoDisplay: false,
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
}, 'google_translate_element');
}
</script><script src='//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'></script>

</div>
</div><div id='idepelajar'></div>

Catatan : Kode yang berwarna ORANGE dapat Anda re-Upload pada Google Code untuk mempercepat loading Blog Anda, namun jika Anda memilih untuk tetap menggunakan Kode diatas, Tolong Anda beri rating pada http://code.google.com/p/idepelajar/ agar Kode diatas tetap dapat bertahan.

Bagaimana? mudah kan? Penulis berharap artikel cara memasang Google Translate Dengan Efek Jquery Lightbox ini dapat bermanfaat. Semoga berhasil!

Memasang Smooth Scrolling Back To Top dengan Efek Jquery

2011-09-30T00:09:00.012+07:00

Tombol Back To Top memang sering kita jumpai di berbagai Blog. Adanya tombol Back To Top ini membuat pengunjung lebih cepat kembali ke bagian atas Blog tanpa harus Scroll menggunakan mouse. Cukup sekali klik, maka otomatis langsung menuju bagian atas Blog.

Lalu apa hubungan dari kata Smooth dan Back To Top? Sesuai artinya, Smooth artinya Lembut sedangkan Back To Top adalah Kembali Ke Atas, Jadi tombol Back To Top ini akan memberikan kesan Lembut saat proses menuju bagian atas Blog, berbeda dengan tombol Back To Top biasa yang langsung lompat ke bagian atas Blog. Yang membuat tombol Smooth Back To Top ini lebih keren yaitu tombolnya akan menghilang jika page masih berada pada bagian atas, tapi jika pengunjung mulai melihat bagian bawah Blog, maka tombol Back To Top baru muncul. Contohnya seperti tombol yang ada dibagian kanan bawah Idepelajar.blogspot.com ini

Berikut cara pemasangannya :

1. Masuk ke akun Blogger Anda.

2. Pilih Bagian Tata Letak.

3. Kemudian klik Tambah Gadget > HTML/JavaScript

4. Masukkan Kode Berikut TANPA judul :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" >
/***********************************************
* Scroll To Top Control script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Modified by idepelajar.blogspot.com
***********************************************/
var scrolltotop={
//startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
//scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '<img src="LINK GAMBAR BACK TO TOP" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
state: {isvisible:false, shouldvisible:false},
scrollup:function(){
if (!this.cssfixedsupport) //if control is positioned using JavaScript
this.$control.css({opacity:0}) //hide control immediately after clicking it
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
dest=jQuery('#'+dest).offset().top
else
dest=0
this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
},
keepfixed:function(){
var $window=jQuery(window)
var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
this.$control.css({left:controlx+'px', top:controly+'px'})
},
togglecontrol:function(){
var scrolltop=jQuery(window).scrollTop()
if (!this.cssfixedsupport)
this.keepfixed()
this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
if (this.state.shouldvisible && !this.state.isvisible){
this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
this.state.isvisible=true
}
else if (this.state.shouldvisible==false && this.state.isvisible){
this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
this.state.isvisible=false
}
},

init:function(){
jQuery(document).ready(function($){
var mainobj=scrolltotop
var iebrws=document.all
mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
.attr({title:'Scroll Back to Top'})
.click(function(){mainobj.scrollup(); return false})
.appendTo('body')
if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}
scrolltotop.init()
</script>

5. Ganti kata LINK GAMBAR BACK TO TOP dengan link gambar Back To Top yang Anda inginkan.

6. Simpan dan lihat hasilnya.

Note : jika saat Anda lihat hasilnya, gambar Back To Top tidak muncul itu berarti Jquery Script sudah terpasang pada Blog Anda. Anda dapat mengatasinya dengan cara :

1. Masuk pada Widget/Gadget Tombol Back To Top Tadi

2. Hapus kode yang ada dibagian atas yaitu :

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

3. Simpan dan lihat kembali hasilnya.

Bila Anda bingung dalam mencari gambar tombol Back To Top, berikut beberapa tombol yang dapat Anda coba :

Selamat mencoba, Penulis berharap, Artikel Cara Memasang Smooth Scrolling Back To Top dengan Efek Jquery ini dapat bermanfaat.

Lindungi Template Blogger dari Pembajak Template

2011-09-29T19:29:00.014+07:00

Apakah Anda pengguna Platform Blogger? Apakah template Anda pernah dicopy orang lain/diambil sebagian desainnya tanpa seizin Anda? mereka memang menyebalkan, tapi Anda tidak dapat menyalahkan mereka, karena itulah kelemahan dari template blogger,sangat mudah dicopy dan diambil.

Berikut Alasan beserta cara menanggulangi pencurian desain template blogger :

Source Code template Blogger sangat mudah dicopy paste, apalagi bagian CSS. Mengapa demikian? coba buka Page Source template Blog Anda dengan menekan CTRL + U, Copy dan paste ke notepad, kode CSS Antara Kode

<b:skin><![CDATA[/*
.....dan....
]]></b:skin>

Kemudian masuk ke akun Blogger Anda, klik bagian edit HTML dan perhatikan kode CSS diantara Kode

<b:skin><![CDATA[/*
.....dan....
]]></b:skin>

Keduanya sama persis bukan? padahal kode CSS berperan penting dalam mengatur tampilan Blog Anda, hanya tinggal menyesuaikan dengan HTML dari template, maka hampir 100% tampilan Blog anda akan terbajak.

Saran saya, compress kode CSS template Blog Anda, jika Anda belum mengetahui caranya, silahkan kunjungi cara compress kode CSS di Blog. Memang, Page Source Anda masih dapat dilihat dan dicopy, tapi dengan hal ini, tangan - tangan tak berhak yang mengcopy kode CSS blog Anda pasti kesulitan dalam mengedit kode CSS tersebut.

Selanjutnya, adalah bagian javascript di Blog. Loh loh, kok bagian javascript juga? iya, memang bagian javascript sangatlah mudah dicopy, apalagi javascript juga berperan penting dalam mengatur tampilan Blog dan juga dengan javascript kita lebih leluasa dalam mendesain Blog/Memperindah Blog.
Kode javascript berada dibagian :

]]></b:skin>
...dan...
</head>

Bila diamati dengan kode javascript yang ada dibagian edit HTML template Anda, pasti juga sama persis kan?

Nah, untuk sedikit memperkecil kemungkinan diambilnya Kode javascript template Blog Anda, Anda dapat memindahkannya ke notepad, kemudian simpan dengan ekstensi .js, dan upload ke Google Code.

Kenapa di Google Code? Kita tau, bahwa Blogger.com adalah layanan milik Google, jika kita simpan pada Google itu sendiri, pastinya akan lebih mempercepat loading Blog. Jika Anda masih bingung dengan hal ini, Anda dapat menuju ke artikel Cara Upload File Di Google Code Untuk Mempercepat Loading Blog.

Memang adanya pembajak template tidak dapat di hapuskan, tapi penulis berharap dengan artikel Lindungi Template Blogger dari Pembajak Template ini, dapat menambah keamanan Template Anda dan dapat mengurangi Pembajakan Template.