Informasi, Teknologi, Pengetahuan, dan Tips Trik: Belajar Menghias Blog

Showing posts with label Belajar Menghias Blog. Show all posts

Thursday 29 December 2011

Wiki - Wikipedia Style Blogger Template

Blogger Template yang Simple,Hemat dan Berkesan Profesional

Saya sudah mencoba menerapkan blogger template dengan style (baca:gaya) wikipedia yang seperti sudah kita semua tahu.Dan ternyata memang memberi kesan yang lebih sejuk dan terlihat lebih profesional :D

Sobat bisa langsung download filenya di SINI.
Nah untuk langkah singkat cara mengganti template di blogger sekalian saya juga akan share di sini.Ini karena ada beberapa agan-agan yang belum begitu mengerti cara mengganti template dari hasil download di internet.Jika pada blogger dalam mengganti template hanya dengan klik saja (seperti tutorial lau dalam mengubah blogger template menjadi dynamic)namun berbeda saat kita akan mengganti template dari hasil download seperti kali ini.Nah,biar sobat yang belum mengerti benar bagaiamana cara mengganti template,disini saya akan menjabarkan dengan cara manual namun sangat efektif.

Cara Mengganti Template Blogger dengan Wiki - Wikipedia Style

1.Sobat download filenya,silakan klik di Sini,dan file nantinya akan sobat simpan dalam komputer sobat (terserah mau ditempatkan dimana)

blogger template wikipedia.

2.Extract hasil download dan buka folder lalu cari file WikiWP.xml buka file tersebut menggunakan Wordpad,lihat Gambar:

cara mengganti blogger template wikipedia.

cara mengganti blogger template wikipedia.

3.Selanjutnya sobat tekan Ctrl+A setelah itu klik 'Copy' untuk mengcopy semua data di wordpad tersebut,lihat gambar:

cara cepat mengganti dan merubah template menjadi template wikipedia.

cara cepat mengganti dan merubah template menjadi template wikipedia.

4.Pergilah ke Dashboard lalu pilih Tata Letak kemudian tab Edit Html selanjutnya (PENTING)jangan lupa contreng checkbox Expand Widget Templates.

5.Ctrl+A dalam area templates,delete alias hapus semua kode template yang lama dan ganti dengan kode template wiki yang baru saja kita copy dari Wordpad tadi (lihat langkah 3 diatas) lalu kita paste ke area ini,lihat gambar:

cara download template wikipedia.

6.Simpan Templates.Selesai.

Tambahan:Jika setelah menyimpan template ada notif seperti gambar cara mengunduh template dan mengganti blogger templete wikipedia.

cara mengunduh template dan mengganti blogger templete wikipedia.

,teserah sobat saja,jika mau mempertahankan widget yang sudah ada tinggal klik 'pertahankan widget' namun jika ingin tampilan baru maka klik 'delete widget'.

Tuesday 27 December 2011

Cara Me-Redirect / Mengalihkan Posting Tertentu di Blogger

Hi hello guys,mumpung ada waktu ni gan buat posting and pingin banget berbagi tips seputar redirect posting blog.Jika beberapa waktu yang lalu,telah sharing seputar refresh dan redirect otomatis,kini ada tips yang ga kalah menariknya sob,yup! me-redirect atau mengalihkan posting tertentu dalam blog yang kita miliki.

Soalnya,banyak agan-agan yang pingin banged ng-redirect blog miliknya namun hanya untuk beberapa posting yang ditentukan.
Tentu ini sangat membantu teman-teman seandainya ingin mengalihkan atau me-redirect posting tertentu milik sobat ke sebuah situs yang dituju.

Contoh fisiknya sobat bisa liat di blog -silakan klik di: http://pelajaran-blogspot.blogspot.com/,sepintas blog tersebut normal adanya,begitu juga saat sobat melihat label dan setiap postingannya.
Namun saat sobat melihat posting tentang 'favicon' dalam judul How to create a favicon for Blogger pada blog tersebut nantinya akan segera ke-redirect ke sebuah blog lain yakni pada blog ini.
Nah,bagaimana caranya dan bagaimana pula hal ini dapat bekerja?
Pergilah ke Dashboard lalu pilih tata letak kemudian pilih tab Edit Html.Sobat cukup menempatkan kode berikut di bawah kode <head>

<b:if cond='data:blog.url == "http://pelajaran-blogspot.blogspot.com/2011/12/how-to-create-favicon-for-blogger.html"'> <META HTTP-EQUIV='refresh' content='0;URL=http://pelajaran-blog.blogspot.com/2010/04/cara-membuat-favicon.html'/> <b:else/> </b:if>

Lalu simpan template sobat.
Ket:
Untuk kode yang bercetak tebal gantilah dengan url posting sobat yang hendak akan di redirect,sedang kode yang bergaris bawah (underline) gantilah dengan url blog yang dituju.

Tuesday 13 December 2011

Mengaktifkan Dynamic Template Blogger Tanpa Merubah Template Asli

Cara Menerapkan / Menggunakan Dynamic Blogger Template

Sebenarnya tutorial ini sudah agak basi ya sob,masalahnya sejak oktober 2011 lalu sudah banyak agan-agan yang juga share masalah merubah template blogger menjadi dynamic template.
Masalahnya,pada tutorial-tutorial yang sudah teman-teman bagikan adalah merubah secara default menjadi dynamic template,dan hal ini saya kira sangat merugikan teman-teman karena template yang sudah kita patenkan menjadi dynamic template sudah tak dapat kita vermak sedemikian rupa lagi.
Hal ini karena blogger menonaktifkan pengaturan pada template jika kita sudah telanjur menggunakan dynamic template tersebut menjadi default template pada blog yang kita miliki.

Tapi perlu sobat ketahui,bahwa dynamic template ini tercipta adalah dengan mengambil dari screenshot feed blog kamu,jadi jika feed yang sobat miliki belum dirubah menjadi 'Full' atau 'Penuh' maka dynamic template ini tidak dapat bekerja,dan justru yang akan terjadi nantinya sobat akan melihat notif seperti ini:

Untuk itu,sebelum sobat menggunakan trik ini,terlebih dahulu atur feed blog sobat menjadi 'Penuh' atau 'Full',caranya (untuk tpilan baru -beta-) ikuti langkah berikut:

Pergi ke Dashboard lalu pilih Settings(gb1) dan kemudian pilih Other(gb2),Selanjutnya rubah feed menjadi Full atau Penuh(gb3) dan simpan.

Cara mengaktifkan Dynamic Views untuk Blogger.

Cara mengaktifkan Dynamic Views untuk Blogger.

gb1

Cara Mengubah Dynamic View Menjadi Halaman Utama Blogspot.

gb2

Tips Membuat Tampilan Dynamic View Blogger.

gb3

Nah sebenarnya cukup mudah untuk menggunakan / menerapkan / mengaktifkan dynamic template yang disediakan blogger tanpa kita harus mengubah template aslinya.
Yup,cukup mengubah url sesuai dengan dinamik templete yang sobat inginkan,mengingat blogger menyediakan dalam beberapa pilihan.
Diantaranya adalah :

1.Cara merubah Template Blogger menjadi Dynamic Template dengan tampilan Magazine,
Tambahkan pada url sobat dengan view/magazine,
contoh : http://google.blogspot.com/view/magazine
*google.blogspot.com rubah sesuai dengan alamat blog sobat*

Hasilnya untuk blog ini akan seperti gambar berikut sob:

1.Cara merubah Template Blogger menjadi Dynamic Template dengan tampilan Magazine

Dynamic Template dengan tampilan Magazine.

Klik di sini untuk melihat demo.

2.Cara merubah Template Blogger menjadi Dynamic Template dengan tampilan Flipcard

Klik di sini untuk melihat demo.

3.Cara merubah Template Blogger menjadi Dynamic Template dengan tampilan Classic

Klik di sini untuk melihat demo.

4.Cara merubah Template Blogger menjadi Dynamic Template dengan tampilan Mosaic

Klik di sini untuk melihat demo.

5.Cara merubah Template Blogger menjadi Dynamic Template dengan tampilan Sidebar

Klik di sini untuk melihat demo.

6.Cara merubah Template Blogger menjadi Dynamic Template dengan tampilan Snapshot

Klik di sini untuk melihat demo.

7.Cara merubah Template Blogger menjadi Dynamic Template dengan tampilan Timeslide

Klik di sini untuk melihat demo.

Semua tinggal selera kamu deh sob,semoga bermanfaat ya,keep post gan!!!

Friday 25 November 2011

Cara Membuat Sudut Halaman Blog Terlipat dan Menggulung (Page Peel jQuery)

UPdate! Trik Membuat PagePeel,Sudah Direvisi! Dijamin Berhasil 100%

Cara Mudah Membuat Page Peel Effect Untuk Blogger Dengan JQuery

Bismillah - Seperti yang sudah banyak bertebaran di internet,tutorial cara membuat halaman blog seolah tergulung dan melipat seperti yang sobat dapat lihat di beberapa situs diantanya adalah blog dari milik sahabat kami di SINI.

Yup,hanya untuk yang 'belum tahu' tutorial ini kami publikasikan,adalah membuat ujung bagian kanan atas dari blog tersebut seolah menggulung dan terbuka (bahasa jawanya 'ngletek' mentang2 orang jawa pen-) saat mouse diletakkan diatasnya.Jadi bisa sobat lihat sekali lagi dari blog milik sahabat saya tersebut dan coba letakkan mouse berada diatasnya,maka nanti akan ada efek menggulung alias nglotok seolah blog tersebut memiliki dua kulit (emang kambing mas pen-).

Para programmer menamakan sebagai 'Page Peel',seperti pada tutorial-tutorial beberapa waktu lalu,menggunakan jQuery untuk blogger masih banyak diminati,sekedar flasback teknik jQuery pernah kami gunakan dalam membuat menu jQuery,membuat slideshow jQuery,membuat TabView jQuery dan popup jQuery dan masih banyak lagi yang sobat bisa lihat di Tutorial jQuery pada blog ini.
Nah,bagaiaman jika jQuery dikombinasikan dalam membuat PagePeel ini?
Saya kira dari gambaran yang ga pernah jelas seperti diatas sudah dapat sobat bayangkan tutorial apa yang ingin disampaikan kali ini.

Untuk lebih jelasnya bagaimana membuat efect melipat dari ujung blog dari blogger ini,sobat bisa lihat gambar berikut,(plototin ya gan :p)

Oke,caranya adalah pertama kali sobat pilih Tata Letak (gb1) lalu pilih tab Edit HTML (gb2)

membuat halaman terlipat ( page peel ) di blog.

gb1

Cara Membuat Page Peel Effect Untuk Blogger Dengan JQuery.

gb2

Sesuaikan saja dengan tampilan blog milik sobat (mengingat blogger sekarang memiliki new interface pen-),setelah dari langkah gb2,cari kode ini <head> (Gunakan Ctrl+F) dan letakkan kode dibawah ini tepat dibawah kode <head> tersebut.

<script type="text/javascript">var tujuan ='http://geliat-bisnis.blogspot.com/'</script>
<script src="https://sites.google.com/site/pujiantoroinc/Home/pagepeelpelajaranblog.js" type="text/javascript"></script>

Simpan dan sobat bisa lihat hasilnya :D
Untuk costomnya sobat utak-atik sendiri ya,terutama yang bercetak tebal pada kode diatas,sedangkan kode jQuerynya sobat bisa download di sini.Semoga artikel Cara Membuat Sudut Halaman Blog Terlipat dan Menggulung (Page Peel jQuery) ini bermanfaat bagi teman-teman disamping saya sendiri juga dari hasil copas sana sini,hihihihihi..keep post guys!

Tuesday 20 September 2011

Cara Menghapus Link Tulisan Powered by Blogger

Trik Menghilangkan Tulisan Powered by Blogger / Awesome Inc. template by Tina Chen..

Dengan pilihan template dari www.blogger.com yang baru,pasti sobat sudah tak asing dengan link tulisan powered by blogger yang secara default sudah tak dapat kita utak-atik kembali.Lain halnya dengan template lama yang justru kita ditekankan untuk membuat footer sendiri.

Nah,screenshotnya kurang lebih seperti ini:

Cara menghapus tulisan Powered by Blogger di bawah footer.

Untuk mengubah / mengganti tulisan powered by blogger tersebut sobat dapat ikuti langkah berikut:

Pertama sobat pilih pada Dashboard blog sobat tab Design / Rancangan (gb1),lalu pilih tab Edit HTML (gb2) dan kemudian contreng tulisan Expand Widget Templates (gb3)

Hapus Tulisan Awesome Inc. template by .... Powered by Blogger.

Hapus Tulisan Awesome Inc. template by .... Powered by Blogger.

gb1

gb2

gb3

Setelah itu,sobat cari kode berikut ini(Gunakan Ctrl+F) ya



Nah,jika sudah sobat ketemukan,untuk template aslinya nanti tepat dibawah kode tersebut ada barisan kode berikut:

<b:section class='foot' id='footer-3' showaddelement='no'>
<b:widget id='Attribution1' locked='true' title='' type='Attribution'>
<b:includable id='main'>
    <b:if cond='data:feedbackSurveyLink'>
      <div class='mobile-survey-link' style='text-align: center;'>
        <data:feedbackSurveyLink/>
      </div>
    </b:if>

    <div class='widget-content' style='text-align: center;'>
      <b:if cond='data:attribution != &quot;&quot;'>
       <data:attribution/>
      </b:if>
    </div>

    <b:include name='quickedit'/>
  </b:includable>
</b:widget>
</b:section>

Lihat gambar4 ya sob:

cara menghapus menghilangkan mengganti merubah tulisan link powered by blogger.

gb4

Hapus kode tersebut sob lalu simpan Templates,nanti akan keluar warning seperti berikut:

cara menghapus menghilangkan mengganti merubah tulisan link powered by blogger.

gb4

Sobat klik aja tombol Delete Widgets dan lihat blog sobat sekarang :D
Untuk menggantinya sobat bisa ekspresikan sendiri dengan menambahkan widget baru HTML/Javascript.Mudah khan sob,moga berhasil ya :D

Thursday 15 September 2011

Cara Membuat Spoiler / Menyembunyikan dan Menampilkan Gambar dengan Form Button Link

Cara Membuat Tombol untuk Menyembunyikan dan Menampilkan Text dan Gambar

Sepertinya sobat sudah pada kenal yang namanya form button ya,pernah sebelumnya blog ini juga sharing bagaimana membuat form button dengan posisi berjejer alias horizontal.
Namun kali ini,Pelajaran Blog bukan sharing bagaimana membuat link form button melainkan membuat form button untuk menyembunyikan dan menampilkan sebuah teks atau image(gambar),atau yang sudah agan tahu dengan istilah spoiler.

Contohnya seperti di bawah ini:

Caranya,sobat tinggal masukkan kode dibawah ini pada postingan sobat ya :D


<div><input type="button" value="Lihat Gambar" style="margin:0px;padding:0px;" onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Lihat Gambar'; }">
</div>
<div style="background: #ffffff; margin: 10px auto;
border: 0px solid #000;
padding: 5px;">
<div style="display: none;">
<img src="http://a0.twimg.com/profile_background_images/314865843/mrpujiajadeh.gif" alt="Cara Mudah dan Cepat Membuat Spoiler di Blogger" title="Cara Membuat Spoiler di Blogger." width="300" height="200"/>
</div>
</div>

Kode yang berwarna merah,adalah dimana obyek akan ditampilkan atau disembunyikan,bisa sobat ganti berupa teks saja,sebuah gambar maupun video kesukaan kamu,that's it :D

Sunday 14 August 2011

Cara Hack / Hacking Email dan Password Hanya dengan Mozilla

Cara Hack Email dan Password dari Warnet (Warung Internet)

Pelajaran Blog - Download Free Email Password Hacking Software, Email Password.

Kadang bermain di internet komputer public,warnet misalnya,kita kurang memperhatikan segi keamanan dan hanya memperhatikan segi kenyamanannya,tinggal main,bayar dan langsung pulang.

Tapi tahukah sobat,pemilik warnet seperti halnya manusia biasa,ada yang menjaga privacy pelanggannya namun banyak juga yang justru memanfaatkan pelanggan sebagai 'mangsa' yang wenak.

Adalah cookies yang mampu menyimpan data,mulai dari history dan bahkan email dan password yang ditinggalkan oleh pelanggan sebuah warnet.

Mengapa saya mengambil judul Cara Hack / Hacking Email dan Password Hanya dengan Mozilla?

Yup,agar terkesan menarik dan tentu menarik pengunjung tentunya,khan biar seo friendly,hehehehe

Eit's jangan lari dulu gan,ni saya kasih contoh cara Hack Email dan Password dari Warnet hanya dengan browser Mozilla :D

Pertama,buka browser mozilla di komputer warnet yang sedang sobat kunjungi,lalu klik bagian toolbar 'Tools lalu pilih 'Options' (lihat gambar 1)

Cara Jebol Password Email.

Kemudian,pilih tab 'Security' dan klik tombol 'Saved Passwords' (lihat gambar 2)

CARA MUDAH HACK PASSWORD EMAIL.

Maka,nanti akan tampil jendela windows seperti ini (ini akan bekerja jika ada beberapa pengunjung warnet yang teledor tidak sempat menghapus cookiesnya 'sebelum sobat sendiri' pent-)

Email password hacking, Hack yahoo passwords, Hacking email.

Email password hacking, Hack yahoo passwords, Hacking email.

Ingin tahu passwordnya? tinggal klik 'Show Password' dan Tada!!!!!!!!

Hack Email Password for Free.

Gampang khan jadi maling tuh,hehehe makanya jangan heran sob negara ini banyak malingnya,lha kok?

Kabuuuur!!!!!

Sunday 7 August 2011

Membuat Anchor Popup dengan jQuery (Popup Keren dengan Klik)

UPdate! Trik Membuat Membuat Anchor Popup dengan jQuery (Popup Keren dengan Klik),Sudah Direvisi! Dijamin Berhasil 100%

Trik Cara Membuat Popup dengan jQuery

Membuat popup adalah salah satu dalam kiat kita menghias blog,ini akan memiliki peran sebagai penghemat tempat namun blog tetap dalam keadaan full performance.

Langsung gan,untuk melihat contohnya (ini mungkin akan bekerja pada browser di kompi ya seperti mozilla dan selainnya,alias kurang bekerja baik pada handphone ataupun IE:() sobat bisa lihat gambar dibawah ini:

Atau sobat bisa lihat situsnya di sini.(jika situs masih tersedia ya :D)

Gimana sob,tertarik?

Gini nih cara bikinnya,Pertama langkahnya seperti biasanya ya hanya pilih Dashboard (gb.1),lalu Tata Letak (gb.2) kemudian contreng tulisan Expands Widget Templates (gb.3).

(1)

(2)

(3)

Letakkan kode berikut tepat diatas kode </head>

<!-- Kode Menampilkan berita muslim sahih  -->
<script type="text/javascript" src="http://layanan.oposisi.net/tampilan/highslide-with-html.js"></script>
<link rel="stylesheet" type="text/css" href="http://layanan.oposisi.net/tampilan/highslide.css" />
<script type="text/javascript">
hs.graphicsDir = 'http://layanan.oposisi.net/tampilan/bingkai/';
hs.outlineType = 'rounded-white';
hs.wrapperClassName = 'draggable-header';
</script>
<!-- Kode Menampilkan berita muslim sahih  Sampai di sini -->

Lalu simpan templates.
Selanjutnya,untuk menampilkannya pada widget coba pilih Tata Letak / Rancangan seperti gambar no (1),dan klik tulisan Add New Widget atau Tambah Gadget,lihat Gambar no (4)

Cara Membuat Javascript Anchor Link dan Jenis-Jenisnya.

Cara Membuat Javascript Anchor Link dan Jenis-Jenisnya.

(4)

(5)

Selanjutnya pilih HTML/Javascript lihat Gb(5)kemudian letakkan kode berikut:

<a href="http://1.bp.blogspot.com/-8mQnRA_9rpw/TYh3n0lPDDI/AAAAAAAAAxs/gi5Vv6PqqpA/s1600/berita%2Bmuslim%2Bsahih.jpg" class="highslide"
onclick="return hs.htmlExpand(this, { objectType: 'iframe', width: 270, height: 300,} )">Lihat Gambar Al-Qur'an</a>

Lalu Simpan.Selesai deh :D

Ket:

Kode yang berwarna merah sesuaikan dengan keinginan sobat ya :D
http://1.bp.blogspot.com/-8mQnRA_9rpw/TYh3n0lPDDI/AAAAAAAAAxs/gi5Vv6PqqpA/s1600/berita%2Bmuslim%2Bsahih.jpg rubahlah dengan url gambar sobat atau bisa juga alamat situs seperti http://www.google.co.id/,http://www.youtube.com/,dll.

Sunday 17 July 2011

Zoom Gambar Blog / Membuat Efek Zooming Pada Image / Gambar di Blogger

Cara Membuat Zoom pada Gambar / Image Blog

Nah,berikut tips yang tak kalah menarik dalam belajar mempercantik dan menghias blog,betul gan,trik meperbesar (zoom) gambar atau image pada blogger secara otomatis hanya dengan meletakkan pointer mouse di atasnya dan mengkliknya..

Tips Memperbesar Gambar (zoom),Saat Pointer Mouse Berada di Atasnya

Bagi saya,blog tutorial blogspot ini ibarat rumah,pulau bahkan hewan peliharaan yang mana akan 'sengsara' saat kita menelantarkannya juga tak memperdulikan kesehatannya.
Namun tak jarang ya sob,beberapa blog tutorial yang sulit untuk dinikmati karena salah satu penyebabnya adalah penulis blog tersebut tidak memberikan akses untuk melihat lebih jelas gambar yang ia posting.
Misal seperti gambar terlalu kecil dan tidak diberikannya anchor link untuk akses gambar ukuran aslinya pada jendela baru.Dan saya pikir masalah seperti ini dapat berpengaruh terhadap kenyamanan visitor dalam menikmati blog yang kita miliki.

Nah,berikut tips yang tak kalah menarik dalam belajar mempercantik dan menghias blog,betul gan,trik meperbesar (zoom) gambar atau image pada blogger secara otomatis hanya dengan meletakkan pointer mouse di atasnya dan mengkliknya..Ini saya dapat dari sebuah blog yang bagus banget di www.roadrash.no

Contohnya,klik aja gambar-gambar dibawah ini ya:

Langkah Cara Membuat Zoom Gambar / Image Blog Blogspot

Seperti biasa gan,teknik zoom gambar blog ini kita menggunakan metode css javascript.
Pertama,sobat blogger pergi ke sawangan depok,eits salah zoom gambar image blog. ,maksud ane pergi ke dashboard lalu pilih tata letak / rancangan (gb1) kemudian edit html (gb2) dan checklist (contreng) tulisan expand widget templates (gb3) lihat gambar aja ya :D

gb1

gb2

gb3

Kemudian,cari kode </head> dan tepat diatasnya letakkan barisan kode css berikut:

<script src='http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/zoompelajaranblog-fullzoomlengkapbanget.js' type='text/javascript'/> 
<!--[if lt IE 7]> <link rel="stylesheet" type="text/css" href="http://www.roadrash.no/hs-support/highslide/highslide-ie6.css" /> <![endif]--> 
<script type='text/javascript'> 
//<![CDATA[
hs.graphicsDir = 'http://www.roadrash.no/hs-support/highslide/graphics/';
hs.wrapperClassName = 'borderless';
hs.align = 'center';
hs.dimmingOpacity = 0.65;
hs.transitions = ['expand', 'crossfade'];
hs.fadeInOut = true;
// close button
hs.registerOverlay({
 html: '<div class="closebutton" onclick="return hs.close(this)" title="Close"></div>',
 position: 'top right',
 fade: 2 // fading the semi-transparent overlay looks bad in IE
});
hs.isUnobtrusiveAnchor = function(el) {
 if (el.href && /.(jpg|gif|png)$/.test(el.href) && !el.onclick) {
  el.className = 'highslide'; // for the zoom-in cursor
  el.title = 'Click to enlarge'; // for title
  return 'image';
 }
};
if (hs.addEventListener && hs.Outline) hs.addEventListener(window, 'load', function () {

 new hs.Outline('rounded-white');

 new hs.Outline('glossy-dark');

});
// The gallery example on the front page
var galleryOptions = {

 slideshowGroup: 'gallery',

 wrapperClassName: 'dark',

 //outlineType: 'glossy-dark',
 dimmingOpacity: 0.8,
 align: 'center',
 transitions: ['expand', 'crossfade'],
 fadeInOut: true,
 wrapperClassName: 'borderless floating-caption',
 marginLeft: 100,
 marginBottom: 80,
 numberPosition: 'caption'

};
if (hs.addSlideshow) hs.addSlideshow({
    slideshowGroup: 'gallery',
    interval: 5000,
    repeat: false,
    useControls: true,
    overlayOptions: {
     className: 'text-controls',
  position: 'bottom center',
  relativeTo: 'viewport',
  offsetY: -60
 },
 thumbstrip: {
  position: 'bottom center',
  mode: 'horizontal',
  relativeTo: 'viewport'
 }
});
hs.Expander.prototype.onInit = function() {
 hs.marginBottom = (this.slideshowGroup == 'gallery') ? 150 : 15;
}
// focus the name field
hs.Expander.prototype.onAfterExpand = function() {

 if (this.a.id == 'contactAnchor') {
  var iframe = window.frames[this.iframe.name],
   doc = iframe.document;
     if (doc.getElementById("theForm")) {
         doc.getElementById("theForm").elements["name"].focus();

     }
 }
}

//]]>
</script> 
<style type='text/css'> 
pre {
 background: white; 
 padding: 5px; 
 font-size: 10.9px;
}
</style>

Setelah itu sobat simpan templates ya.
Selanjutnya,untuk menampilkannya sobat bisa letakkan kode berikut di postingan sobat (ini hanya contoh saja)

<div class="thumbwrapper">
<a class="highslide" href="http://1.bp.blogspot.com/-HnBZZrw91HA/TiKkxoOWiGI/AAAAAAAAA34/KY-2AU7-Ktk/s1600/pohon%2Bpelajaran%2Bblog%2Bzoom%2Bgambar.jpg"  onclick="return hs.expand(this, galleryOptions)"><img alt="Highslide JS" src="http://1.bp.blogspot.com/-HnBZZrw91HA/TiKkxoOWiGI/AAAAAAAAA34/KY-2AU7-Ktk/s1600/pohon%2Bpelajaran%2Bblog%2Bzoom%2Bgambar.jpg" height="150" width="150" title="Click to enlarge" />
</a><a class="highslide" href="http://1.bp.blogspot.com/-3kr3pA6UAQc/TiKkxmuy8UI/AAAAAAAAA4A/-JQNIZQh9mc/s1600/pohon%2Bpelajaran%2Bblog%2Bzoom%2Bgambar%2B2.jpg"  onclick="return hs.expand(this, galleryOptions)"><img alt="Highslide JS" src="http://1.bp.blogspot.com/-3kr3pA6UAQc/TiKkxmuy8UI/AAAAAAAAA4A/-JQNIZQh9mc/s1600/pohon%2Bpelajaran%2Bblog%2Bzoom%2Bgambar%2B2.jpg" height="150" width="150" title="Click to enlarge" />
</a>
</div>

Ket:
Tulisan berwarna merah sobat ganti ya dengan url / alamat dari gambar yang sobat telah upload di blogger atau dari suatu situs.
Moga berhasil dan met berpusinx ria ya :D see you!!

Tuesday 5 July 2011

Cara Membuat Link Anchor Satu Halaman / Navigasi Halaman Back to Top

Membuat Link ke Atas,Menuju Tengah,ke Bawah Dalam satu Halaman

Emang susah ya sob njelasin dari judul postingan kali ini,intinya,kali ini saya ingin sekali membagikan inpo masalah membuat link anchor satu halaman.
Seperti apa sih bentuk fisiknya,sobat bisa lihat di salah satu posting blog sahabat saya mas Arya di Ramadhan Bersama Prambors.

Tampilan atas:

back to top.

Saat sobat klik anchor link 'testimonial' maka langsung tertuju seperti pada gambar berikut:

membuat link anchor back to top - membuat link kembali ke atas.

membuat link anchor back to top - membuat link kembali ke atas.

Dan saat sobat klik anchor link 'help' maka langsung tertuju seperti pada gambar berikut:

Jika sobat perhatikan,dari screenshot gambar diatas,jika postingan blog sahabat saya tersebut dibuka / dibaca menggunakan browser Mozilla misalnya,maka setiap kita mengklik salah satu link anchor tertuju,misal 'testimonial','about' atau 'help' (dalam gambar diatas) maka akan denga sendirinya menentukan link yang dituju.
Lebih jelasnya ya,sobat lihat di sini (coba gunakan browser mozilla ya).

Nah,gimana sob dah jelas ya tutorial apa yang ingin saya sampaikan malam hari ini :D

Langkah dan Cara Membuat Link Anchor Satu Halaman / Link Tombol Kembali ke Atas

Pertama,baca bismillah ya..
Selanjutnya,buatlah posting seperti berikt ini,untuk mengetahui triknya,sobat bisa copy paste aja dari beberapa barisan artikel berikut,da modifikasi sendiri ya :D

Pergilah ke posting dan pilihlah type edit htmlnya,lihat gambar dibawah ini:

membuat anchor link text.

Kemudian buatlah posting seperti ini (hanya contoh saja ya,INGAT,penulisan huruf kecil dan besar pada link anchornya sangat sensitiv ya gan pent-)

Mulai posting dari sini..
<a href="#about">About</a> | <a href="#help">Help</a> | <a href="#testimonial">Testimonial</a>
<a name="about"></a>
<h4>About</h4>
Kami adalah jasa membuat website dan blog dengan menawarkan harga paling rendah namun dengan hasil berkualitas tinggi.
Pelajaran Blog adalah sarana online dalam belajar membuat blog juga belajar seo blogspot bagi blogger tingkat pemula.
Selain daripada itu,kami juga menyediakan berbagai pilihan blogger template yang seo friendly namun tetap tidak mengabaikan akan keindahannya.

Untuk seo,kami menyediakan tutorial dasar dalam teknik seo,trik seo,rahasia seo juga tips dan trik seo agar situs menjadi nomor 1 di halaman serach engine Google.
Buktikan dan bersiaplah menjadi miliarder baru dalam dunia internet!

<a name="testimonial"></a>
<h4><strong>Testimonial</strong></h4>
Pelajaran Blog is an online tool for the study also learn seo blog blogger blogspot for beginner level.
Other than that, we also provide a wide selection of blogger templates seo friendly but still do not ignore its beauty.

For SEO, we provide a basic tutorial in seo techniques, seo tricks, seo secrets seo tips and tricks as well to the site to be number 1 on page serach engine Google.
Prove it and be prepared to become new millionaires in the internet world!

<a name="help"></a>
<h4><strong>Help</strong></h4>
Pelajaran Blog adalah sarana online dalam belajar membuat blog juga belajar seo blogspot bagi blogger tingkat pemula.
Selain daripada itu,kami juga menyediakan berbagai pilihan blogger template yang seo friendly namun tetap tidak mengabaikan akan keindahannya.
Untuk seo,kami menyediakan tutorial dasar dalam teknik seo,trik seo,rahasia seo juga tips dan trik seo agar situs menjadi nomor 1 di halaman serach engine Google.
Buktikan dan bersiaplah menjadi miliarder baru dalam dunia internet!

Pelajaran Blog is an online tool for the study also learn seo blog blogger blogspot for beginner level.
Other than that, we also provide a wide selection of blogger templates seo friendly but still do not ignore its beauty.
For SEO, we provide a basic tutorial in seo techniques, seo tricks, seo secrets seo tips and tricks as well to the site to be number 1 on page serach engine Google.
Prove it and be prepared to become new millionaires in the internet world!
Akhir posting disini.

Nah,kemudian publikasikan.Selesai.

Hasilnya,kurang lebih akan seperti ini gan:

About | Help | Testimonial

About
Kami adalah jasa membuat website dan blog dengan menawarkan harga paling rendah namun dengan hasil berkualitas tinggi.
Pelajaran Blog adalah sarana online dalam belajar membuat blog juga belajar seo blogspot bagi blogger tingkat pemula.
Selain daripada itu,kami juga menyediakan berbagai pilihan blogger template yang seo friendly namun tetap tidak mengabaikan akan keindahannya.

Untuk seo,kami menyediakan tutorial dasar dalam teknik seo,trik seo,rahasia seo juga tips dan trik seo agar situs menjadi nomor 1 di halaman serach engine Google.
Buktikan dan bersiaplah menjadi miliarder baru dalam dunia internet!

Testimonial
Pelajaran Blog is an online tool for the study also learn seo blog blogger blogspot for beginner level.
Other than that, we also provide a wide selection of blogger templates seo friendly but still do not ignore its beauty.

For SEO, we provide a basic tutorial in seo techniques, seo tricks, seo secrets seo tips and tricks as well to the site to be number 1 on page serach engine Google.
Prove it and be prepared to become new millionaires in the internet world!

Help
Pelajaran Blog adalah sarana online dalam belajar membuat blog juga belajar seo blogspot bagi blogger tingkat pemula.
Selain daripada itu,kami juga menyediakan berbagai pilihan blogger template yang seo friendly namun tetap tidak mengabaikan akan keindahannya.
Untuk seo,kami menyediakan tutorial dasar dalam teknik seo,trik seo,rahasia seo juga tips dan trik seo agar situs menjadi nomor 1 di halaman serach engine Google.
Buktikan dan bersiaplah menjadi miliarder baru dalam dunia internet!

Pelajaran Blog is an online tool for the study also learn seo blog blogger blogspot for beginner level.
Other than that, we also provide a wide selection of blogger templates seo friendly but still do not ignore its beauty.
For SEO, we provide a basic tutorial in seo techniques, seo tricks, seo secrets seo tips and tricks as well to the site to be number 1 on page serach engine Google.
Prove it and be prepared to become new millionaires in the internet world!

Semoga berhasil ya sob,dan tunggu artikel selanjutnya yang tak kalah Hot!!
See you guys..

Monday 20 June 2011

Cara Membuat Recent / Related Post jQuery ( Berkedip Bergantian dan Slider)

UPdate! Trik Cara Membuat Artikel Yang Berhubungan / Related Post / Artikel Terkait,Sudah Direvisi! Dijamin Berhasil 100%

Setelah beberapa hari kemarin kami saling sharing seputar belajar seo blogspot,kini saatnya kembali utak atik blog seputar tutorial jquery kembali.

Ketinggalan terlalu banyak materi jquery dalam blog ini?,jangan kuatir sob,tutorial blog ini baru memposting beberapa posts kok :D

Sebelum posting tentang bagaimana membuat recent post jQuery ini,biar kami share kembali beberapa tutorial jQuery dalam blog ini beberapa waktu lalu,diantaranya:

Belajar Membuat Trigger Hover jQuery / Vertical Sliding Panel mengggunakan jQuery
Membuat Widget Gambar Slide Show / Slideshow Javascript dan Css di Blogger
Membuat Slick Tab View / Jquery Tab View Scroll Show Hide Widget
Membuat Menu Navigasi dengan jQuery (Kwicks jQuery Sliding Navigation Menu for Blogger)

Nah,belum terlalu banyak khan sob,sedot buruan ya :D

Langkah Cara Membuat Related Post / Recent Post jQuery untuk Blogger

Bagi yang masih bingung seperti apa sih related post yang dimaksudkan,sobat bisa lihat contoh gambarnya dibawah ini:

Contoh yang sudah diterapkan sobat bisa lihat di sini.
Gimana sob,pingin ga punya widget kaya gitu?yuk intip gimana sih cara bikin recent post jquery blogger ini..

Pertama langkahnya seperti biasanya ya hanya pilih Dashboard,lalu Tata Letak / Rancangan kemudian klik tulisan Add New Widget atau Tambah Gadget dan pilih HTML/Javascript,lihat Gambar:

Cara Membuat jquery related post blogger blogspot.

Kemudian letakkan kode berikut sob:


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script><center><strong>Artikel Acak</strong></center>
<center>
   <style type="text/css" media="screen">
   <!--

   #spylist {
   overflow:hidden;
   margin-top:1px;
   padding:0px 0px;
   height:300px;
   }
   #spylist ul{
   width:100%;
   overflow:hidden;
   list-style-type: none;
   padding: 0px 0px;
   margin:0px 0px;
   }
   #spylist li {
   width:100%;
   padding: 0px 0px;
   margin:0px 0px 5px 0px;
   list-style-type:none;
   float:none;
   height:70px;
   overflow: hidden;
   background:#fff url() repeat-x;
   border:1px solid #ddd;
   }

   #spylist li a {
   text-decoration:none;
   color:#4B545B;
width:100%;
   font-size:10px;
   height:12px;
   overflow:hidden;
   margin:0px 0px;
   padding:0px 0px 2px 0px;
   }
   #spylist li img {
   float:left;
   margin-right:5px;
   background:#EFEFEF;
   border:0;
   }
   .spydate{
   overflow:hidden;
   font-size:8px;
   color:#0284C2;
   padding:2px 0px;
   margin:1px 0px 0px 0px;
   height:12px;
   font-family:Tahoma,Arial,verdana, sans-serif;
   }

   .spycomment{
   overflow:hidden;
   font-family:Tahoma,Arial,verdana, sans-serif;
   font-size:8px;
   color:#262B2F;
   padding:0px 0px;
   margin:0px 0px;
   }

   -->
   </style>
       <script language='javascript'>
   imgr = new Array();
   imgr[0] = "http://t1.gstatic.com/images?q=tbn:ANd9GcQZdYwrAif3iY59IQI1bxWYa_KAsE1D28o_dR1yZlt_YCLZ-Sox";

   imgr[1] = "http://t1.gstatic.com/images?q=tbn:ANd9GcQZdYwrAif3iY59IQI1bxWYa_KAsE1D28o_dR1yZlt_YCLZ-Sox";

   imgr[2] = "http://t1.gstatic.com/images?q=tbn:ANd9GcQZdYwrAif3iY59IQI1bxWYa_KAsE1D28o_dR1yZlt_YCLZ-Sox";

   imgr[3] = "http://t1.gstatic.com/images?q=tbn:ANd9GcQZdYwrAif3iY59IQI1bxWYa_KAsE1D28o_dR1yZlt_YCLZ-Sox";

   imgr[4] = "http://t1.gstatic.com/images?q=tbn:ANd9GcQZdYwrAif3iY59IQI1bxWYa_KAsE1D28o_dR1yZlt_YCLZ-Sox";
   showRandomImg = true;
   boxwidth = 200;
   cellspacing = 6;
   borderColor = "#232c35";
   bgTD = "#000000";
   thumbwidth = 50;
   thumbheight = 50;
   fntsize = 9;
   acolor = "#666";
   aBold = true;
   icon = " ";
   text = "comments";
   showPostDate = true;
   summaryPost = 40;
   summaryFontsize = 10;
   summaryColor = "#666";
   icon2 = " ";
   numposts = 100;
   home_page = "http://pelajaran-blog.blogspot.com/";
   limitspy=4
   intervalspy=4000
   </script>

   <div id="spylist">
       <script src='https://sites.google.com/site/pujiantoroinc/Home/recent_post_berkedip.js' type='text/javascript'></script>
   </div></center>

Lalu Simpan dan sobat dah bisa lihat hasilnya :D