Rabu, 31 Juli 2013

Cara Pasang Iklan Otomatis Dibawah Postingan

1. Login Menggunakan account Blogger Sobat.

2. Pada bagian Dasbor pilih tab Rancangan.

3. Setelah itu pilih tab Edit HTML.

4. Jangan lupa Centang tulisan Expand Template Widget.

5. Cari kode dibawah ini. (gunakan Ctrl + f pada browser sobat untuk mempermudah pencarian).

atau lebih tepatnya kodenya seperti dibawah ini :

6. Setelah ketemu kode diatas, Selanjutnya, masukkan kode script dibawah ini tepat diantara kode <data:post.body/> dan <div style='clear: both;'/> ;

Maka hasil kodenya akan seperti dibawah ini;

7. Langkah terakhir Save Template. dan lihat hasilnya, Tarrraaa...

Author by: Yugairgi

Lorem ipsum dolor sit amet, contetur adipcing elit, sed do eiusmod temor incidunt ut labore et dolore agna aliqua. Lorem ipsum dolor sit amet.

0 komentar:

Syntax Highlighter dengan PRISM

Meskipun di blog ini Saya menggunakan syntax highlighter dari Software Maniacs, tapi jika diminta untuk memilih dari segi kecepatannya, maka Saya akan menggunakan PRISM, sebuah syntax highlighter untuk HTML, CSS, Java dan JavaScript (bekerja juga untuk PHP dengan asumsi sebagai markup):
Proses instalasi hanya membutuhkan dua langkah. Pertama-tama masuklah ke halaman editor HTML Template Anda kemudian pilih Edit HTML dan klik Lanjutkan.
Temukan kode ini:
]]></b:skin>
Salin kode CSS ini dan letakkan di atasnya:

/*
Tema pribadi => RDark
Saya buat berdasarkan tema-tema SyntaxHighligter dari Alex Gorbatchev
URL: http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/rdark.html
*/

pre {
  padding:.5em 1em;
  margin:.5em 0;
  white-space:pre;
  word-wrap:normal;
  overflow:auto;
  background-color:#1B2426;
}

code {
  font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;
  line-height:16px;
  color:#B43D3D;
  background-color:#eee;
  border:1px solid #ddd;
  padding:1px 2px;
}

pre code {
  display:block;
  background:none;
  border:none;
  color:#B9BDB6;
  direction:ltr;
  text-align:left;
  word-spacing:normal;
  padding:0 0;
}

code .token.punctuation {
  color:#83405A;
}

pre code .token.punctuation {
  color:#B9BDB6;
}

code .token.comment,
code .token.prolog,
code .token.doctype,
code .token.cdata {
  color:#435A4D;
}

code .namespace {
  opacity:.8;
}

code .token.property,
code .token.tag,
code .token.boolean,
code .token.number {
  color:#5BA1CF;
}

code .token.selector,
code .token.attr-name,
code .token.string {
  color:#986A7C;
}

pre code .token.selector,
pre code .token.attr-name,
pre code .token.string {
  color:#E0E8FF;
}

code .token.entity,
code .token.url,
pre .language-css .token.string,
pre .style .token.string {
  color:#E0E8FF;
}

code .token.operator {
  color:#878A85;
}

code .token.atrule,
code .token.attr-value {
  color:#48D30F;
}

pre code .token.atrule,
pre code .token.attr-value {
  color:#48E638;
}

code .token.keyword {
  color:#47A1CF;
  font-style:italic;
}

code .token.comment {
  font-style:italic;
}

code .token.regex {
  color:#B43D3D;
}

code .token.important {
  font-weight:bold;
}

code .token.entity {
  cursor:help;
}

Setelah itu temukan kode ini:
</body>
Letakkan script ini di atasnya:

<script type="text/javascript" src='http://reader-download.googlecode.com/svn/trunk/prism.js'></script>

Klik Simpan Template.

Cara Pemakaian

Setiap tipe bahasa memiliki kelasnya masing-masing:

HTML, XML, PHP ⇒ language-markup
CSS ⇒ language-css
JavaScript ⇒ language-javascript
Java ⇒ language-java

Kode yang ingin diberi efek harus berada di dalam tag pre > code seperti ini:

<pre><code class="language-markup"> ... kode HTML (yang sudah di`escape`) di sini ... </code></pre>
<pre><code class="language-css"> ... kode CSS di sini ... </code></pre>
<pre><code class="language-javascript"> ... kode JavaScript di sini ... </code></pre>
<pre><code class="language-java"> ... kode Java di sini ... </code></pre>

Tema-tema yang asli bisa Anda temukan di situs sumbernya, PRISM. Atau mungkin Anda mau membuatnya sendiri?

Author by: Yugairgi

Lorem ipsum dolor sit amet, contetur adipcing elit, sed do eiusmod temor incidunt ut labore et dolore agna aliqua. Lorem ipsum dolor sit amet.

0 komentar:

Cara Membuat Daftar Isi Pada Blog Dengan JQuery

Cara memasang daftar isi pada blog

Baik bagi sobat yang ingin memasangnya, langsung saja ikuti cara berikut:

1. Login ke Blogspot.
2. Klik Design/Rancangan.
3. Pilih Edit HTML.
4. Kemudian letakan kode dibawah ini di atas kode ]]></b:skin>

#dafis-acc {
    font-family: "Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #333;
    background: #ffffff;
}

.dafis-label {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlRiQNfZ7Bs0HxD54T6_KDt-xUryMhrqWlRmCsuNeIputwmbOPA4ofniz_dMsvCl6PqPfR0mdt43HaoNfU25gOyD4sXV6q6vGCLLmCnNb87b8zVX_ZR1rbhYaWUulW6yub9J0N39vXXPw/d/bg4.gif") repeat-x scroll 0 0 #E1F4FB;
    border: 1px solid #2F94BA;
    color: #FFFFFF;
    cursor: pointer;
    font-weight: bold;
    line-height: 1.4em;
    margin: 1px 3px;
    outline: medium none;
    overflow: hidden;
    padding: 2px 10px;
    text-decoration: none;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    vertical-align: baseline;
    white-space: nowrap;
}

.dafis-label:hover {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHwYMCrnBrK_L7xIUINewKWKxpPMJjeZuizsE2E-s9xskIy84kTYYhc60G-yo38Ftj2RX9gg6KHdU93I0XJqqumH_kIMMqIdJsSgKUaw-iBjJr-_XHEl7VnF4CEdZ65jX4pu36VZ4vdMo/d/bg2.gif") repeat-x scroll 0 0 #E1F4FB;
    color: #003366;
}

.dafis-daf ol {
    margin: 0 0 0 30px !important;
    padding: 0 !important;
}

.dafis-daf ol li {
    background-color: #C9E9F4;
    border: 1px solid #339DC6;
    line-height: 1.5em;
    margin: 1px 3px !important;
    text-align: left;
    white-space: nowrap;
}

.dafis-daf ol li a {
    color: #333333 !important;
    display: block;
    padding-left: 10px;
    text-decoration: none !important;
}

.dafis-daf ol li a:hover {
    background: none repeat scroll 0 0 #7BC4DF;
    border-left: 5px solid #333333;
    padding-left: 5px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

5. Copy kode dibawah ini dan letakkan diatas kode </head>

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

Jika di blog sobat sudah ada kode diatas, maka sobat boleh abaikan langkah ini.

6. Selanjutnya copy dan paste kode dibawah ini dalam postingan maupun widget blog sobat.

<script type="text/javascript" src="http://dharla-perdana.googlecode.com/files/Acc.js"></script>
<script src="http://URL BLOG.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Catatan :
Ganti tulisan yang bergaris bawah http://URL BLOG.blogspot.com dengan URL blog sobat.

Author by: Yugairgi

Lorem ipsum dolor sit amet, contetur adipcing elit, sed do eiusmod temor incidunt ut labore et dolore agna aliqua. Lorem ipsum dolor sit amet.

0 komentar:

Daftar Isi Accordion Slider Keren dengan CSS/jQuery

Baiklah pada kesempatan hari ini, saya tidak henti2 nya tuk memberikan tutorial menarik dan unik mengenai blogger, dan sekarang saya akan mencoba memberikan tutorial tersebut yaitu membuat 'Daftar Isi Accordion Slider' dengan efek CSS dan jQuery' tentunya.heheee,..

Jika masih penasaran, dengan tampilannya, sobat bisa lihat lansung screenshot berikut.

1. Cara memasangnya dengan membuat sebuah posting blog dengan judul terserah (Misalnya : Daftar Isi Blog Lengkap Atau Table Of Content ).
2. Selanjutnya Masukkan kode di bawah ini pada postingan, caranya seperti membuat postingan seperti biasa tetapi dalam mode Edit HTML.

berwarna merah dengan dengan url blog anda.
- Sedangkan Teks yang berwarna hijau adlah script pendukung, jika sudah memasangnya ditemplate sobat, mka script diatas gak perlu lagi.OKE.

3. Langkah Terakhir 'Klik Publish Post'.

Itu tadi tutorial kita hari ini, jika ada di antara temen-temen yang masih bingung, isi saja kotak komentar yang ada di bawah. Karena komentar temen-temen semua sangat berarti bagi blog ini.

Author by: Yugairgi

Lorem ipsum dolor sit amet, contetur adipcing elit, sed do eiusmod temor incidunt ut labore et dolore agna aliqua. Lorem ipsum dolor sit amet.

1 komentar:

Cara Membuat Daftar Isi V1

Assalamu'alaikum sobat blogger, Kali Ini saya ingin memberitahu Cara Membuat Daftar Isi V1 Penasarankan langsung saja Cekidot, Dan Ini hasilnya adalah seperti pada gambar dibawah ini atau bisa sobat lihat Live Demonya

Berikut langkah langkah pembuatannya :

Seperti biasa Login dulu keakun blog sobat.
Pilih Tata letak.
Pilih yang add gadget terserah sobat mau disebah mana.
Pilih add gadget/tambah gadget HTML/JavaScript.
Copy paste java script dibawah ini kemudian ganti tulisan yang berwarna merahdengan alamat URL blog Sobat.

<div align="center;">

<div style="margin:1px;">

<div style="margin-bottom:2px;" class="smallfont;">

<div style="background:#FFFFFF; no-repeat scroll 0 0; border:1px solid #000000; height:310px; overflow:auto; padding:4px; width:260px;">

<div id="cl_option">

Loading... </div>

<div id="cl_content_list">

</div>

<script type="text/javascript">

var jumlah_kata_dalam_ringkasan = 250;

</script>

<script src="https://sites.google.com/site/omkrisnanto/omkris/DaftarIsi2www.kris-smile.blogspot.com.js">

</script>

<script src="http://capoenk-blog.blogspot.com/feeds/posts/default?alt=json-in-script&callback=onLoadFeed&max-results=99999">

</script></div>

</div>

NB : Ganti tulisan warna biru pada java script diatas sesuai dengan kehendak sobat,Backround adalah warna backround widget, Heigth adalah tinggi widget, danwidth adalah lebar widget sedangkan yang angka 250 adalah jumlah kata-kata dalam ringkasan seperti yang terlihat pada tanda panah biru gambar diatas.
NB : Gati tulisan warna merah pada java script diatas sesuai dengan website anda
Save dan lihat hasilnya.

Selamat mencoba, jika tidak ada yang salah insyaAllah pasti berhasil

Author by: Yugairgi

Lorem ipsum dolor sit amet, contetur adipcing elit, sed do eiusmod temor incidunt ut labore et dolore agna aliqua. Lorem ipsum dolor sit amet.

0 komentar:

Cara Membuat Daftar Isi V3

Assalamu'alaikum sobat blogger, Kali Ini saya ingin memberitahu Cara Membuat Daftar Isi V3 Penasarankan langsung saja Cekidot, Dan Ini hasilnya adalah seperti pada gambar dibawah ini atau bisa sobat lihat Live Demonya

Berikut langkah langkah pembuatannya :

1. Seperti Biasa Login ke akun blogger

2. Klik "Laman Baru" kemudian klik "Laman Kosong", untuk lebih jelasnya, silahkan perhatikan gambar dibawah ini :

3. Kemudian pilih Mode HTML

4. Lalu copy kode script dibawah ini :

Keterangan:

- Ganti tulisan yang hijau dengan URL blog anda
- Tulisan berwarna merah adalah kata-kata yang muncul saat daftar isi sedang loading

6. Kemudian anda letakan pada halaman kosong tadi,

7. Selesai

Author by: Yugairgi

Lorem ipsum dolor sit amet, contetur adipcing elit, sed do eiusmod temor incidunt ut labore et dolore agna aliqua. Lorem ipsum dolor sit amet.

0 komentar:

32 Macam Menu Navigation Horizontal Part 2

Menu navigation 11

Menu navigation 12

Menu navigation 13

Menu navigation 14

Menu navigation 15

Menu navigation 16

Menu navigation 17

Menu navigation 18

Menu navigation 19

Menu navigation 20