Cara Membuat Page View Hits Counter Setiap Posting Blogger

Cara Membuat Widget Counter Berapa Kali telah Dilihat Masing-Masing Posting

Pelajaran Blog - adalah sebuah trik bagaimana memasang atau membuat pageviews alias hit counter stat untuk masing-masing posting berapa kali telah di lihat oleh pengunjung.

Biasanya widget ini ditulis seperti; Telah dilihat "sekian" kali atau "sekian kali" views untuk menerapkannya.
Widget seperti ini sangat cocok untuk mempermudah kita dalam mengetahui traffik dari sebuah posting.Jika widget seperti hitstats,dan sejenisnya hanya menghitung berapa kali view sebuah blog atau situs,widget yang akan kita bahas ini dapat membaca berapa kali posting telah ditampilkan.

Hanya saja untuk menciptakan sendiri widget ini memerlukan hosting sendiri karena berhubungan dengan database dan sql.
Wah,klo gitu repot dong jika widget ini harus ditempatkan di posting blogger?

Tidak juga sob,yang berhasil saya ambil dari http://csharpdotnetfreak.blogspot.com rupanya sudah dapat membantu kita mewujudkan widget ini.
Kelemahannya tentu jika server di situs tersebut tidak lagi mendukung,widget ini juga tak lagi dapat bekerja.

Tapi seperti yang sobat lihat (jika masih ada,hehehe) dalam blog sederhana ini pun telah menerapkannya.

Sebenarnya,saya ingin menerapkannya di we hosting gratisan seperti www.000webhost.com,namun yang saya alami,situs tersebut sering mengupdate ststus user mereka (scara gratisan gitu,hihihi),sehingga semua file yang telah saya upload lenyap entah kemana :( -sedih-.
Sobat bisa lihat,dalam setap tutorial posting dalam blog sederhana ini yang melibatkan mrpujiajadeh.comze.com nyaris tutorial tersebut tak dapat bekerja.(ya ea lah,servernya keox :( -.

Tapi,ini menjadi pelajaran berharga bagi saya pribadi agar dilain waktu tidak main 'bermudah-mudah' dalam mencomot 'produk' luar tanpa izin.kapok gue :(

Oke,kita kembali pada permasalahannya ya gan,yup! bagaimana kita dapat menciptakan widget 'posting ini telah dilihat sebanyak sekian kali'.

Langkah dan Cara Membuat hit counter pageview Berapa Kali Posting Telah di Lihat

Pertama,sobat pilih Dashboard lalu pilih Template,pilih Edit Html lalu pilih Proceed kemudian contreng Expand Widget Templates seperti gambar:








Selanjutnya,sobat gunakan dalam keybord Ctrl+F - ini untuk mempermudah pencarian kode - dan cari kode berikut:

<data:post.body/> atau <p><data:post.body/></p>

Setelah sobat ketemukan,letakkan persis di bawahnya script post pageviews berikut:

<br/>
<span style='color: #660000;'><div align='center' style='border:solid 2px #999999; padding:2px; margin:2px; width:300px; display:compact'>Posting ini telah dilihat sebanyak <b><script src='http://amitjain.in/pageviews.php' type='text/javascript'/> (kali)</b></div></span>
<br/>

Kode <br/> untuk memberi jarak saja,jadi bisa untuk tidak disertakan.
Lalu simpan templates dan lihat hasilnya.
Semoga berhasil ya :D

Right Click Notification / Warning Messages pada Klik Kanan

Enable or Disable Copy Paste / Right Click

Masih ingat ga sob tutorial disable copy paste yang dah di share di blog ini beberapa waktu lalu?

Jika sobat belum menemukannya silakan cari menggunakan kotak pencarian di blog ini dengan keyword 'right click'.
Namun daripada repot-repot kami cantumkan lagi link tutorialnya.
Ni linknya ya gan:

1.Disable copy paste untuk Browser Mozilla Firefox
2.Disable copy paste untuk browser Internet Explorer

Untuk kali ini,Pelajaran Blog akan mempublikasikan sebuah script yang mana dengan script sederhana ini,pengunjung tidak dapat melakukan right click atau klik kanan,namun setelah pengunjung memberikan eksekusi pada check box pada message warning atau menekan tombol OK,right click atau klik kanan dapat aktif kembali.Ya,seperti yang bisa sobat pada blog sederhana ini.

Gimana sob,ingin mencobanya juga?

Trik dan Cara Membuat Disable dan Enable Right Click / Klik Kanan

Pertama,sobat pergilah ke Dashboard lalu pilih Tata Letak dan klik Add New Gadget





Lalu tambahkan script berikut pada HTML/Javascript widget tersebut dan simpan.

<script language='javascript'>
<!--

//edit by mrpujiajadeh


var message="Sekali lagi,kami mohon perhatiannya,apa yang akan anda sedang lakukan adalah menyangkut hak cipta.Pelajaran Blog tidak bertanggung jawab jika anda menyebarkan atau mengambil bagian tema dan konten maupun source template dari blog ini tanpa menyertakan link sumbernya.Terima kasih dan harap maklum.";

///////////////////////////////////


document.oncontextmenu=new Function("alert(message);return true")

// -->
</script>

Selesai dan moga bermanfaat ya sob :D
**kode hijau rubah sesuai dengan keinginan kamu :)

Cara Membuat Rating Bintang di Posting Blogger

Membuat Tanda Bintang di Blogger Post

Berbeda dengan trik cara membuat google rich snippet - rating bintang di result page google yang telah dipublikasikan beberapa waktu lalu,kali ini adalah mengaktifkan rating bintang dalam posting blogger itu sendiri.

Sebenarnya fitur ini sudah lama disediakan oleh pihak www.blogger.com,hanya saja untuk sebagian kasus yang saya alami,fitur ini tak tersedia.

Bagaimana Mengaktifkan Rating Bintang untuk Posting Blogger?

Untuk mempersingkat waktu,kegagalan dari pengalaman yang saya alami,sobat langsung aja peri ke draft.blogger.com lalu pilih Rancangan:

Kemudian,sobat pilih Edit pada page halaman-nya:



Lalu sobat beri tanda pada check box Show Star Rating:



Setelah itu sobat simpan templates,dan lihat hasilnya.
Sekarang sobat sudah bisa pindah ke blogger.com dengan mengklik di SINI

Mengapa Tanda Rating Bintang hanya tampil di Halaman Utama?

Jika tanda rating bintang hanya tampil pada halaman utama saja,dan tak dapat tampil di halaman posting,sobat ikuti langkah berikut:

Pertama,sobat pilih Dashboard lalu pilih Tata Letak kemudian contreng Expand Widget Templates:


(1)


(2)


(3)

Lalu sobat cari kode berikut:

<p><data:post.body/></p> atau <data:post.body/>

Jika sudah sobat ketemukan letakkan kode berikut tepat dibawahnya:

<span class='star-ratings'>
<b:if cond='data:top.showStars'>
<div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='280'/>
</b:if>
</span>

Bagaimana jika saya memiliki lebih dari satu kode <data:post.body/>?

Jika sebagian templates yang sobat miliki sudah menggunakan fasilitas read more memang akan memiliki dua kode <data:post.body/> ini,bagaimana solusinya?

Misal templates sobat setelah membuat fitur 'read more' dalam tutorial di SINI seperti ini:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span style='float:right'><a expr:href='data:post.url'>Read More..</a></span>
<b:else/>
<data:post.body/>
</b:if>

Maka untuk menerapkan kodenya,hapus kode tersebut dan rubah menjadi seperti ini:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span style='float:right'><a expr:href='data:post.url'>Read More..</a></span>
<b:else/>
<data:post.body/>
<span class='star-ratings'>
<b:if cond='data:top.showStars'>
<div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='280'/>
</b:if>
</span>
</b:if>

Hasilnya akan seperti ini:



Simpan dan lihat hasilnya,semoga bermanfaat ya :D

Revisi : Membuat Menu Home,About,Profil,etc

Revisi Lagi,Revisi Melulu!

Ada apa dengan blog ini yang isi content-nya selalu sama,emang ga ada materi lagi ya? hehe
Ini ada kaitannya dengan sarat email gan,sebagian besar email yang masuk mempermasalahkan posting tentang tema yang akan kita bahas malam ini,meskipun tema ini sudah di posting beberapa waktu lalu,bahkan saya sempat mempublikasikan posting yang sama.
Sebelum ke titik permasalahan,dalam blog sederhana ini telah mempublikasikan bermacam-macam menu navigasi diantaranya:

1.Menu dengan efek Horizontal jQuery
2.Slide jQuery Navigation Menu
3.Menu Navigasi dengan Sub Menu Bergambar
4.Membuat Menu Navigasi dengan Sub Menu
5.Menu Navigasi dengan Css

Nah,diantara menu2 tersebut hanya menu nomor 2 yang sering dipermasalahkan,oleh karenanya,sobat ikuti langkah dengan teliti ya sob,baca artikelnya ya (meski ga tau kemana arahnya dengan gaya bahasa yang sedikit ngelantur dan ngawur hihi pent-)

Kwick Menu Navigasi Blogger dengan jQuery

Untuk kesekian kalinya di blog bertema tutorial blog dan seo blogger blogspot ini mengunduh tutorial jQuery dalam membuat menu navigasi di blogger.

Jika sebelumnya telah dipublikasikan bagaimana menerapkan jQuery di blogspot dalam beberapa trik membuat slide show widget,sliding panel dan slick tab view menggunakan jQuery,kini ada trik satu lagi yang tak kalah menarik.
Betul gan! Yuk kita intip bagaimana sih membuat menu navigasi untuk flatform blogger/blogspot dengan jQuery ini.

Membuat Menu Navigasi Blogger dengan Kwicks jQuery

Sobat pernah lihat di beberapa blog atau situs dimana pada menu navigasi-nya dapat menyembunyikan icon atau gambar secara geser / slide saat mouse berada diatasnya?
Demo atau contoh dari menu navigasi kwicks jQuery ini sobat dapat lihat di:

http://www.jeremymartin.name/examples/kwicks.php?example=1

atau yang telah berhasil saya buat di :

http://pujiantoroblog.blogspot.com/

Memang betul,bahwa kelemahan dari kwicks menu navigasi ini tidak dapat dibaca oleh beberapa browser khususnya handphone atau browser yang tidak mengaktifkan javascript.Namun kwicks menu navigasi jQuery ini dapat bekerja sangat baik di browser mozilla juga Google chrome dan IE terbaru.

Penasaran,yuk mari kita pelajari bagaimana membuat menu navigasi blogger dengan jQuery kwicks tricks.
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)

Nah,selanjutnya cari kode ]]></b:skin> (gunakan Ctrl+F di keyboard sob),setelah ketemu tinggal letakkan kode CSS berikut tepat diATAS kode ]]></b:skin> tersebut.


.kwicks{height:50px;list-style:none;margin:0;padding:0;position:relative;width:840px;z-index:2
}
.kwicks li{cursor:pointer;display:block;float:left;height:50px;overflow:hidden;padding:0;width:120px;z-index:2}
.kwicks li a{background-image:url(http://4.bp.blogspot.com/-e1c5hdvd0MQ/TbgSHi-7EEI/AAAAAAAAAzs/Y9aTBHEgh84/s1600/menu%2Bjquery%2Bpelajaran%2Bblog.jpg
);background-repeat:no-repeat;cursor:pointer;display:block;height:50px;outline:none;text-indent:-9999px;z-index:2}
#kwick1 a:hover{background-position:0 -50px!important}
#kwick2 a{background-position:-190px 0}
#kwick2 a:hover{background-position:-190px -50px!important}
#kwick3 a{background-position:-380px 0}
#kwick3 a:hover{background-position:-380px -50px!important}
#kwick4 a{background-position:-570px 0}
#kwick4 a:hover{background-position:-570px -50px!important}
#kwick5 a{background-position:-760px 0}
#kwick5 a:hover{background-position:-760px -50px!important}
#kwick6 a{background-position:-950px 0}
#kwick6 a:hover{background-position:-950px -50px!important}
.kwicks li ul a{float:left;width:12em}
.kwicks ul ul{top:auto}
.kwicks li ul ul{left:12em;margin:0 0 0 10px}
.kwicks li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li li li li:hover ul{display:block
}


Kemudian cari kode berikut (gunakan Ctrl+F untuk mempermudah pencarian):

</head>

Setelah sobat ketemukan kode </head> tersebut,tepat diatasnya letakkan script berikut:

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

<script class='jsbin' src='https://sites.google.com/site/pujiantoroinc/Home/kwicks.js'>
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(&#39;.kwicks&#39;).kwicks({
duration: 500,
max: 170,
spacing: 0
});
});
</script>


**Kode berwarna hijau,jika ditemplate sobat sudah tersedia,maka kode tersebut tak perlu dicantumkan kembali.

Lalu simpan templates sobat.
Nah,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)



(4)


(5)

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

<table width="100%" border="0"><tr><td bgcolor="black">
<ul class='kwicks'>
<li id='kwick1'><a href='http://pujiantoro.blogspot.com/' title='halaman utama'>Home</a></li>
<li id='kwick2'><a href='http://pujiantoro.blogspot.com/search' title='daftar isi.'>Blog</a></li>
<li id='kwick3'><a href='http://pelajaran-blog.blogspot.com/2009/02/profil.html' title='about'>About</a></li>
<li id='kwick4'><a href='#' title='futures'>Portfolio</a></li>
<li id='kwick5'><a href='#' title='contact us'>Contact</a></li>
<li id='kwick6'><a href='http://pelajaran-blog.blogspot.com/' title='recomended links'>Resource</a></li>
</ul></td></tr></table>


Simpan,selesai sudah dan sobat sudah bisa lihat hasil dari menu navigasi kwick jquery ini.
Jikaa mengalami kesulitan mohon diskusikan adi facebook pagenya ya gan and selamat mencoba!

Cara Agar Supaya Breadcrumb Terindex Google

Revisi:

Rahasia Teknik Seo dalam Cara Ampuh Agar Supaya Breadcrumb Terindex Google

Seakan iri melihat blog-blog master seo yang memiliki breadcrumb/breadcrumbs yang dapat terindex di Google.

Lihat screenshot gambar dari blog sahabat saya yang breadcrumb-nya dapat terindex google berikut ini:

Di blog teknik seo blogger ini sendiri memang sulit meiliki breadcrumb yang dapat terindex seperti itu,tapi setelah posting ini mudah-mudahan breadcrumb pada blog tutorial ini dapat cepat terindex.

Nah,dalam kiat seo blogger template kali ini,kita akan ngbahas masalah ini sob,yup! bagaimana trik dan teknik agar blogger templates yang kita miliki seo friendly dengan optimasi dari breadcrumb.

Cara Membuat Breadcrumb Seo Friendly

Bagi sobat yang belum membuat breadcrums sebaiknya sobat bikin dulu ya,dan beruntung jika sobat belum membuatnya,karena breadcrumb seo friendly ini,akan kita ciptakan sore hari ini.

Pertama,pastikan anda sudah membuat label pada blog.
Selanjutnnya,pergi ke Dashboard,lalu pilih Tata Letak dan kemudian pilih Edit HTML,jangan lupa contreng tulisan Expand Widget Templates.
Selanjutnya cari kode berikut (gunakan Ctrl+F pada keyboard anda untuk membantu pencarian):

]]></b:skin>

Setelah ketemu,letakkan kode berikut tepat diatasnya:

.breadcrumbs{padding:0 5px 5px 0;margin:0 0 5px;font-size:11px;border-bottom:1px dotted #ccc;font-weight:normal}

Nah,setelah itu,sobat cari lagi kode seperti ini (ketik aja di Ctrl+F)

<b:includable id='main' var='top'>

Nah jika sobat sudah temukan,hapus kode tersebut dan gantilah dengan kode berikut:

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:if>
</b:loop>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>

Setelah itu simpan templates sobat.

Tips Agar Breadcrumbs Terindeks di Google

Berikut tips dan trik agar breadcrumbs dapat diindex mesin pencari google:

1. Buatlah label blog yang tidak terlalu banyak (buatlah 1 atau 2 nama label saja)
2. Cantumkan label entry pada sidebar atau bagian footer blog (karena ini akan memungkinkan traffik dari link ini)
3. Nama label usahakan tidak jauh dari tema posting (misal posting tentang 'belajar seo' maka nama label usahakan seperti nama 'tutorial belajar seo',dll)
4. Intinya,buatlah posting yang sangat bermanfaat dan tidak bersifat menipu pengunjung
5. Buatlah pengunjung sangat tertarik dengan isi dari nama label yang ingin sobat shoot
6. Berdo'a :D

Semoga saja,dalam Teknik Seo Blogger Template ( Bag.2 ) - Cara Agar Breadcrumb Dapat Terindex posting kali ini,sedikit dapat membantu dan memberi harapan sobat blogger yang mulai terkikis rasa percaya dirinya dari langkah yang diambil Google terhadap blogspot.
Keep Post!

Membuat Tampilan Kode dengan Fitur View dan Print (Syntax Highlighter)

Trik Membuat Tampilan Kode dengan Fitur View dan Print (Syntax Highlighter) di Blogger

Pernahkah sobat menjumpai sebuah blog dengan menampilkan kode (hal ini berhubungan dengan cara membuat posting kode di blogger post pent-) yang dilengkapi dengan fitur Print button dan View plain seperti gambar dibawah ini?

Klik di SINI untuk tampilan lebih besar.

Fitur seperti ini sangat membantu,terlebih jika sobat ingin menjadikan kode yang sedang disimak ingin disimpan dalam flashdisk (dalam bentuk *.txt) maupun sekedar untuk di print.

Sangat berbeda dengan tampilan kode biasa,apalagi yang menggunakan text area,hal ini sangat sulit untuk didokumentasikan baik dalam flash disk maupun print.
Tak banyak berpengaruh memang,tapi selain membuat tampilan kode lebih profesional (chie) juga akan tampak menarik.

So,gimana cara kita mendapatkan hasil copy-nya? betul gan,tinggal klik 'View Plain' pada fitur yang disediakan.
Contoh live-nya sobat bisa lihat di postingan di SINI

Nah,gimana gan?

Langkah dan Cara Membuat Tampilan Print & View Kode Posting Syntax Highlighter

Sobat pergilah ke Dashboard lalu pilih Tata Letak (gb1) kemudian pilih tab Edit HTML (gb2) dan jangan lupa contreng checklist 'Expand Widget Templates' (gb3)


(1)


(2)


(3)

Kemudian cari kode berikut (gunakan Ctrl+F untuk mempermudah pencarian):

</head>

Setelah sobat ketemukan kode </head> tersebut,tepat BAWAH nya letakkan script berikut:

<script src='http://mrpujiajadeh.comze.com/shCore.js' type='text/javascript'>
</script>
<script src='http://mrpujiajadeh.comze.com/shBrushCpp.js' type='text/javascript'>
</script>
<script src='http://mrpujiajadeh.comze.com/shBrushCSharp.js' type='text/javascript'>
</script>
<script src='http://mrpujiajadeh.comze.com/shBrushCss.js' type='text/javascript'>
</script>
<script src='http://mrpujiajadeh.comze.com/shBrushDelphi.js' type='text/javascript'>
</script>
<script src='http://mrpujiajadeh.comze.com/shBrushJava.js' type='text/javascript'>
</script>
<script src='http://mrpujiajadeh.comze.com/shBrushJScript.js' type='text/javascript'>
</script>
<script src='http://mrpujiajadeh.comze.com/shBrushPhp.js' type='text/javascript'>
</script>
<script src='http://mrpujiajadeh.comze.com/shBrushRuby.js' type='text/javascript'>
</script>
<script src='http://mrpujiajadeh.comze.com/shBrushVb.js' type='text/javascript'>
</script>
<script src='http://mrpujiajadeh.comze.com/shBrushSql.js' type='text/javascript'>
</script>
<script src='http://mrpujiajadeh.comze.com/shBrushXml.js' type='text/javascript'>
</script>

Kemudian cari lagi kode berikut (gunakan Ctrl+F untuk mempermudah pencarian):

]]></b:skin>

Setelah kode tadi sobat ketemukan,kini tepat diATASnya letakkan barisan kode css berikut:


.dp-highlighter
{
font-family: "Consolas", "Monaco", "Courier New", Courier, monospace;
font-size: 12px;
background-color: #E7E5DC;
width: 99%;
overflow: auto;
margin: 18px 0 18px 0 !important;
padding-top: 1px; /* adds a little border on top when controls are hidden */
}

/* clear styles */
.dp-highlighter ol,
.dp-highlighter ol li,
.dp-highlighter ol li span
{
margin: 0;
padding: 0;
border: none;
}
.dp-highlighter a,
.dp-highlighter a:hover
{
background: none;
border: none;
padding: 0;
margin: 0;
}
.dp-highlighter .bar
{
padding-left: 45px;
}
.dp-highlighter.collapsed .bar,
.dp-highlighter.nogutter .bar
{
padding-left: 0px;
}
.dp-highlighter ol
{
list-style: decimal; /* for ie */
background-color: #fff;
margin: 0px 0px 1px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */
padding: 0px;
color: #5C5C5C;
}
.dp-highlighter.nogutter ol,
.dp-highlighter.nogutter ol li
{
list-style: none !important;
margin-left: 0px !important;
}
.dp-highlighter ol li,
.dp-highlighter .columns div
{
list-style: decimal-leading-zero; /* better look for others, override cascade from OL */
list-style-position: outside !important;
border-left: 3px solid #6CE26C;
background-color: #F8F8F8;
color: #5C5C5C;
padding: 0 3px 0 10px !important;
margin: 0 !important;
line-height: 14px;
}
.dp-highlighter.nogutter ol li,
.dp-highlighter.nogutter .columns div
{
border: 0;
}
.dp-highlighter .columns
{
background-color: #F8F8F8;
color: gray;
overflow: hidden;
width: 100%;
}
.dp-highlighter .columns div
{
padding-bottom: 5px;
}
.dp-highlighter ol li.alt
{
background-color: #FFF;
color: inherit;
}
.dp-highlighter ol li span
{
color: black;
background-color: inherit;
}
/* Adjust some properties when collapsed */
.dp-highlighter.collapsed ol
{
margin: 0px;
}
.dp-highlighter.collapsed ol li
{
display: none;
}
/* Additional modifications when in print-view */
.dp-highlighter.printing
{
border: none;
}
.dp-highlighter.printing .tools
{
display: none !important;
}
.dp-highlighter.printing li
{
display: list-item !important;
}
/* Styles for the tools */
.dp-highlighter .tools
{
padding: 3px 8px 3px 10px;
font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: silver;
background-color: #f8f8f8;
padding-bottom: 10px;
border-left: 3px solid #6CE26C;
}
.dp-highlighter.nogutter .tools
{
border-left: 0;
}
.dp-highlighter.collapsed .tools
{
border-bottom: 0;
}
.dp-highlighter .tools a
{
font-size: 9px;
color: #a0a0a0;
background-color: inherit;
text-decoration: none;
margin-right: 10px;
}
.dp-highlighter .tools a:hover
{
color: red;
background-color: inherit;
text-decoration: underline;
}
/* About dialog styles */
.dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; }
.dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; }
.dp-about td { padding: 10px; vertical-align: top; }
.dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; }
.dp-about .title { color: red; background-color: inherit; font-weight: bold; }
.dp-about .para { margin: 0 0 4px 0; }
.dp-about .footer { background-color: #ECEADB; color: #333; border-top: 1px solid #fff; text-align: right; }
.dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; }
/* Language specific styles */
.dp-highlighter .comment, .dp-highlighter .comments { color: #008200; background-color: inherit; }
.dp-highlighter .string { color: blue; background-color: inherit; }
.dp-highlighter .keyword { color: #069; font-weight: bold; background-color: inherit; }
.dp-highlighter .preprocessor { color: gray; background-color: inherit; }


Setelah itu,cari lagi kode berikut:

</body>

Setelah sobat ketemukan,letakkan script berikut tepat di ATAS nya:

<!-- Add-in Script for syntax highlighting -->
<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll(&#39;code&#39;);
</script>

Lalu simpan templates sobat.
Sebagai langkah terakhir,kita terapkan dalam posting,ikuti langkah berikut ini:
Pertama,sobat kunjungi dashboard lalu pilih 'New Post'


Lihat Gambar lebih Besar di SINI

Setelah itu,pilih tab 'Edit HTML' bukan mode 'Comppose'


Lihat Gambar lebih Besar di SINI

Kemudian cara menerapkannya letakkan script berikut:


<pre name="code" class="JScript">
Saya belajar membuat tampilan kode di Blogger.
Tampilan kode Syntax Highlighter gan!
</pre>


Lalu publikasikan dan lihat hasilnya :D
**kode warna biru adalah kode yang ingin ditampilkan (tentu untuk menampilkan kode di posting blog telah kita share beberapa waktu lalu pent-)

Tombol Memperbesar / Memperkecil Huruf Blogger (jQuery Font Resize

Seperti Apa Tombol Memperbesar / Memperkecil Huruf Blogger (jQuery Font Resize) Ini?

Masih dengan teknik jquery yang sama seperti trik dan cara memperlebar widget pada posting yang lalu.

Yup,membuat Tombol Memperbesar / Memperkecil Huruf Blogger (jQuery Font Resize).
Contoh sebelum di eksekusi akan tampil seperti ini:

1


2


3

Nah,untuk contoh fisiknya,sobat lihat aja di SINI

Gimana sob? tertarik,yuk intip cara membuatnya.

Langkah dan Cara Membuat Tombol Memperbesar / Memperkecil Huruf Blogger

Pertama,sobat pergilah ke Dashboard lalu pilih Tata Letak (gb1) kemudian pilih tab Edit HTML (gb2) dan jangan lupa contreng checklist 'Expand Widget Templates' (gb3)

(1)


(2)


(3)

Kemudian cari kode berikut (gunakan Ctrl+F untuk mempermudah pencarian):

</head>

Setelah sobat ketemukan kode </head> tersebut,tepat diatasnya letakkan script berikut:

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

<!-- begin ResizeFont -->
<script type='text/javascript'>
$(function(){
$(&#39;input&#39;).click(function(){
var ourText = $(&#39;#main&#39;);
var currFontSize = ourText.css(&#39;fontSize&#39;);
var finalNum = parseFloat(currFontSize, 10);
var stringEnding = currFontSize.slice(-2);
if(this.id == &#39;large&#39;) {
finalNum *= 1.1;
}
else if (this.id == &#39;small&#39;){
finalNum /=1.1;
}
else if (this.id == &#39;reset&#39;){
finalNum =13;
}
ourText.animate({fontSize: finalNum + stringEnding},500);
});
});
</script>

**Kode berwarna hijau,jika ditemplate sobat sudah tersedia,maka kode tersebut tak perlu dicantumkan kembali.

Setelah itu simpan template sobat.Untuk langkah terakhir ikuti berikut gan:

Pergilah ke Dashboard lalu pilih Tata Letak (gb1) dan klik Add Gadget (gb5) kemudian pilih HTML/Javascript (gb6),lihat gambar:

(5)


(6)

Setelah itu pilih HTML/Javascript (gb6) dan letakkan kode berikut:


<div id='resizeFont'>
<input id='large' type='button' value='Perbesar Huruf'/>
<input id='reset' type='button' value='Ukuran Normal'/>
<input id='small' type='button' value='Perkecil Huruf'/>
</div>


Simpan Templates dan lihat hasilnya.

Untuk kode yang berwarna biru,sobat sesuaikan dengan attribut yang sobat inginkan,misal sobat ingin mengatur mengubah huruf dengan tombol ini pada bagian #main-wrapper atau #content-wrapper maka ganti kode berwarna biru tersebut dengan tag tersebut.