Showing posts with label Blogging. Show all posts
Showing posts with label Blogging. Show all posts

Daftar Isi Blog Keren Otomatis,Ringan,Dan Responsive

9/26/2014 2
Screenshoot

Salam sobat DhaiMaru, kali ini saya akan share Cara Membuat Daftar Isi Blog Keren Otomatis,Ringan,Dan Responsive. ok tanpa basa basi lagi,


1. Pertama buat halaman statis di blog anda terlebih dahulu, Caranya

    Pilih laman pada menu page yang di sebelah kiri => New Page ( laman baru )


laman baru

2. Nanti anda akan di bawah ke tempat page editor, ya tampilannya mirip dengan entri editor pada saat ingin membuat postingan, ok pada bagian judul, silahkan isikan dengan "Daftar isi" atau "Sitemap" atau sesuai dengan keinginan anda. Dan kemudian ini yang terpenting, jangan lupa untuk mengubah mode editor page ke HTML, jika bingung perhatikan gambar di bawah ini

Tab HTML

3. copy dan pastekan kode dibawah ini ke halaman html statis daftar isi tadi
<style scoped="scoped" type="text/css">
#tabbed-toc {
  margin:0 auto;
  background-color:#d5d5d5;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
  overflow:hidden;
  position:relative;
  color:#000;
}
#tabbed-toc .loading {
  display:block;
  padding:5px 10px;
  font:normal bold 12px Tahoma,Sans-Serif;
  color:white;
}
#tabbed-toc ul,
#tabbed-toc ol,
#tabbed-toc li {
  margin:0 0;
  padding:0 0;
  list-style:none;
}
#tabbed-toc .toc-tabs {
  width:20%;
  float:left;
}
#tabbed-toc .toc-tabs li a {
  display:block;
  font:normal bold 10px/28px Tahoma,Sans-Serif;
  height:28px;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#000;
  text-transform:uppercase;
  text-decoration:none;
  padding:0 12px;
  cursor:pointer;
}
#tabbed-toc .toc-tabs li a:hover {
  background-color:#e9e9e9;
  color:black;
}
#tabbed-toc .toc-tabs li a.active-tab {
  background-color:#444444;
  color:white;
  -webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  -moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  box-shadow:-2px 2px 2px rgba(0,0,0,.5);
  position:relative;
  z-index:5;
  margin:0 -1px 0 0;
  /* cursor:text; */
}
#tabbed-toc .toc-content,
#tabbed-toc .divider-layer {
  width:80%;
  float:right;
  background-color:white;
  border-left:5px solid #444444;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
#tabbed-toc .divider-layer {
  float:none;
  display:block;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  -webkit-box-shadow:0 0 7px rgba(0,0,0,.7);
  -moz-box-shadow:0 0 7px rgba(0,0,0,.7);
  box-shadow:0 0 7px rgba(0,0,0,.7);
}
#tabbed-toc .panel {
  position:relative;
  z-index:5;
  font:normal normal 10px Tahoma,Sans-Serif;
}
#tabbed-toc .panel li a {
  display:block;
  position:relative;
  font-weight:bold;
  font-size:11px;
  color:#4d4d4d;
  line-height:20px;
  height:20px;
  padding:0 12px;
  text-decoration:none;
  outline:none;
  overflow:hidden;
}
#tabbed-toc .panel li time {
  display:block;
  font-style:italic;
  font-weight:normal;
  font-size:10px;
  color:#666;
  float:right;
}
#tabbed-toc .panel li .summary {
  display:block;
  padding:10px 12px 10px;
  font-style:italic;
  border-bottom:4px solid #275827;
  overflow:hidden;
}
#tabbed-toc .panel li .summary img.thumbnail {
  float:left;
  display:block;
  margin:0 8px 0 0;
  padding:4px 4px;
  width:72px;
  height:72px;
  border:1px solid #dcdcdc;
  background-color:#fafafa;
}
#tabbed-toc .panel li:nth-child(even) {
  background-color:#eee;
}
#tabbed-toc .panel li a:hover,
#tabbed-toc .panel li a:focus,
#tabbed-toc .panel li a:hover time,
#tabbed-toc .panel li.bold a {
  background-color:#c2c2c2;
  color:none;
  outline:none;
}
#tabbed-toc .panel li.bold a:hover,
#tabbed-toc .panel li.bold a:hover time {
  background-color:#222;
}
@media (max-width:700px) {
  #tabbed-toc {
    border:2px solid #333;
  }
  #tabbed-toc .toc-tabs,
  #tabbed-toc .toc-content {
    overflow:hidden;
    width:auto;
    float:none;
    display:block;
  }
  #tabbed-toc .toc-tabs li {
    display:inline;
    float:left;
  }
  #tabbed-toc .toc-tabs li a,
  #tabbed-toc .toc-tabs li a.active-tab {
    background-color:#224C19;
    -webkit-box-shadow:2px 0 7px rgba(0,0,0,.4);
    -moz-box-shadow:2px 0 7px rgba(0,0,0,.4);
    box-shadow:2px 0 7px rgba(0,0,0,.4);
  }
  #tabbed-toc .toc-tabs li a.active-tab {
    background-color:white;
    color:#333;
  }
  #tabbed-toc .toc-content {
    border:none;
  }
  #tabbed-toc .divider-layer,
  #tabbed-toc .panel li time {
    display:none;}}
</style>
<div id="tabbed-toc">
<span class="loading">Memuat...</span></div>
<script>
var tabbedTOC = {
    blogUrl: "http://dhaimaru.blogspot.com", // Blog URL
    containerId: "tabbed-toc", // Container ID
    activeTab: 1, // The default active tab index (default: the first tab)
    showDates: false, // `true` to show the post date
    showSummaries: false, // `true` to show the posts summaries
    numChars: 200, // Number of summary chars
    showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
    thumbSize: 40, // Thumbnail size
    noThumb: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", // A "no thumbnail" URL
    monthNames: [ // Array of month names
        "Januari",
        "Februari",
        "Maret",
        "April",
        "Mei",
        "Juni",
        "Juli",
        "Agustus",
        "September",
        "Oktober",
        "November",
        "Desember"
    ],
    newTabLink: true, // Open link in new window?
    maxResults: 99999, // Maximum post results
    preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
    sortAlphabetically: true, // `false` to sort posts by published date
    showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
    newText: " - <em style='color:red;'>New!</em>" // HTML for the "New!" text
};
</script>
<script src="https://googledrive.com/host/0ByB4SHSmauqvbmZIcGwxdW9NUTQ/Tabbed.js"></script>

4. Sebelum anda menyimpanya , ganti Url http://dhaimaru.blogspot.com/ dengan url blog sobat
5. Klik publikasikan/publish

Demikian postingan tetang Cara Membuat Daftar Isi Blog Keren Otomatis,Ringan,Dan Responsive, semoga postingan ini bermanfaat. Jika masih kurang paham silahkan berkomentar...

keyword:
- cara membuat sitemap keren,otomatis,cepat,ringan,dan responsive di blog
- cara membuat daftar isi otomatis,keren,cepat,responsive

Cara Membuat Semua link terbuka di tab baru

7/13/2014 2

Membuat semua link terbuka di tab baru, Link pada suatu blog atau website sangat penting gunanya,yaitu agar pembaca tetap memiliki akses terhadap page referral di mana dia menemukan link baru untuk di-klik. Selain itu, bagi pemilik blog/website hal ini juga menguntungkan karena visitor tidak segera meninggalkan halaman blog/website karena adanyawindow baru yang harus dibuka.


Membuat Semua link terbuka di tab baru

Selain itu,link terbuka di tab baru pada artikel yang sedang dibaca juga tidak menghilang tergantikan oleh halaman baru dari link yg di-klik oleh visitor. pembaca tetap dapat membaca artikel hingga selesai sambil melihat referensi link yg terdapat di dalam posting.

Nah,kali ini saya akan memberikan, tips tentang bagaimana cara membuat semua link terbuka di tab baru secara otomatis, jadi jika kamu pasang script ini,kamu tidak perlu menambahkan embel-embel "target" pada link-link yang ada di blog kamu.

Membuat Semua link terbuka di tab baru caranya sebagai berikut:

  1. Login ke menu bloger
  2. klik Dashboard
  3. Pilih Rancangan
  4. Pilih Edit Laman
  5. Tambahkan Gadget/Add Gadget => HTML/JavaScript
  6. Lalu Copy Script berikut
    <!-- code for turning all non-blog links to new page links -->
    <script type="text/javascript" language="javascript">
    var arr = document.getElementsByTagName("a"); //get all links inthe page
    for(var i = 0; i < arr.length; i++)
    {
    if(arr[i].href.indexOf(" http://dhaimaru.blogspot.com/ ") < 0 //not links that are 'inside' blog
    && arr[i].href.indexOf("javascript:") < 0) //not javascript links
    arr[i].target = "_blank";
    }
    </script>
  7. Ganti Tulisan berwarna merah tersebut dengan URL blog kamu lalu Jangan Lupa di Save
Demikian post tentang Membuat Semua link terbuka di tab baru,
semoga post ini bermanfaat bagi anda, dan jangan lupa berkomentar jika ada yang tidak di mengerti..

Keyword:
- Cara Membuat Semua link terbuka di tab baru
- cara membuat link terbuka di tab baru

Cara Menampilkan Widget Di Halaman Tertentu

7/12/2014 0
Cara Menampilkan Widget Di Halaman Tertentu - Ketika kita sedang menuju blog seseorang, terlihat tampilan widget blog tersebut kadang ganti-ganti. Misalnya, di halaman depan Wigdet A, di halalaman lainnya Widget A tidak muncul. Ada apa gerangan....
Cara Menampilkan Widget Di Halaman Tertentu

Sebenarnya, ada beberapa cara yang dilakukan oleh blogger untuk melakukan hal tersebut. Maksudnya Cara Menampilkan Widget Di Halaman Tertentu. Mau tahu?

Beginilah caranya secara umum (tips ini tujuannya adalah mempercantik tampilan blog).

1. Menampilkan widget hanya di halaman depan saja (homepage)

<b:if cond='data:blog.url == data:blog.homepageUrl'>
......................................................
</b:if>

2. Menampilkan di semua halaman kecuali homepage.

<b:if cond='data:blog.url != data:blog.homepageUrl'>
......................................................
</b:if>

3. Menampilkan widget hanya di halaman Archive saja.

<b:if cond='data:blog.pageType == &quot;archive&quot;'>
......................................................
</b:if>

4. Menampilkan widget di semua halaman kecuali halaman archive.

<b:if cond='data:blog.pageType != &quot;archive&quot;'>
......................................................
</b:if>

5. Menampilkan widget hanya di halaman posting.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
......................................................
</b:if>

6. Menampilkan widget di semua halaman, kecuali halaman posting.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
......................................................
</b:if>

7. Menampilkan widget hanya di postingan tertentu saja.

<b:if cond='data:blog.pageType == &quot;alamat-postingan&quot;'>
......................................................
</b:if>

8. Menampilkan widget selain di postingan tertentu.

<b:if cond='data:blog.pageType != &quot;alamat-postingan&quot;'>
......................................................
</b:if>

9. Menampilkan widget hanya di halaman staticpages.

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
......................................................
</b:if>

10. Menampilkan widget di semua halaman, kecuali halaman staticpages.

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
......................................................
</b:if>

Catatan : Tanda Titik - titik di atas adalah kode widget yang harus di tempatkan

Sebagai Contoh perhatikan di bawah ini.
Coba anda menuju Dunia Sarah. Di halaman depan Widget Fan Facebook tidak muncul. Lalu di halaman kedua ketika klik sebuah artikel, maka Widget Fan Facebook muncul. Untuk melakukan hal itu silahkan coba ikuti langkah berikut.

Menampilkan Widget Tertentu Di Halaman Tertentu
1. Tentunya anda harus buka akun blog anda sendiri.
2. Masuklah ke Elemen Template. Lalu klik Edit HTML
3. Carilah widget yang anda sembunyikan (sebelumnya anda sudah memasang widget di dalam blog anda).
4. Misalnya Widget Fan Facebook. Silahkan cari tulisan "Fan Facebook" (gunakan Ctrl + F untuk mencari secara cepat)
5. Setelah ketemu, maka akan muncul kode persis seperti dibawah ini.
<b:widget id='HTML4' locked='false' title='Fan Facebook' type='HTML'> <b:includable id='main'><!-- only display title if it's non-empty --><b:if cond='data:title != &quot;&quot;'><h2 class='title'><data:title/></h2></b:if><div class='widget-content'><data:content/></div><b:include name='quickedit'/> </b:includable> </b:widget>
6. Selanjutnya tambahkan kode

<b:if cond='data:blog.pageType == &quot;item&quot;'>

sebelum kode

<!-- only display title if it's non-empty -->

7. Setelah ditambahkan lalu masukkan kode </b:if> sebelum kode

</b:includable>
</b:widget>

8. Maka hasilnya akan persis seperti di bawah ini.
<b:widget id='HTML4' locked='false' title='Fan Facebook' type='HTML'> <b:includable id='main'><b:if cond='data:blog.pageType == &quot;item&quot;'><!-- only display title if it's non-empty --><b:if cond='data:title != &quot;&quot;'><h2 class='title'><data:title/></h2></b:if><div class='widget-content'><data:content/></div><b:include name='quickedit'/></b:if> </b:includable> </b:widget>
9. Selesai. Simpan Template blog anda.

Catatan : Huruf yang berwarna biru adalah Kode yang ditambahkan. Ingat satuhal, penempatannya jangan salah yah. Harus pas. Kalao gak pas, maka eror. Untuk mengantisipasinya, sebaiknya sebelum memulai langkahlangkah di atas, Simpan Template Blog anda terlebih dahulu.

Sekian post mengenai Cara Menampilkan Widget Di Halaman Tertentu..
Semoga Post ini bermanfaat bagi anda dan jangan lupa untuk meninggalkan komentar

keyword:
- Cara Menampilkan Widget Di Halaman Tertentu
- Cara Menampilkan Widget tertentu Di Halaman Tertentu
- Cara membuat widget terlihat di halaman tertentu
- cara menempatkan widget hanya di halaman tertentu

Cara Memasang Emoticon Di Blog otomatis

7/11/2014 3

Cara Memasang Emoticon Di Blog otomatis adalah memasang emoticon atau smile pada postingan blog secara otomatis hanya kita mengetikkan simbolnya maka nanti akan tampil gambar emoticon yang kamu inginkan, terkadang jika kita menulis kita ingin memberi sebuah emosi secara tertulis, nah jika hanya menggunakan simbol-simbol smile atau emoticon namun tanpa gambar maka emosi pada tulisan kamu akan kurang hidup.

Cara Memasang Emoticon Di Blog

ikuti tutorialnya dibawah ini:

  1. Login ke blogger kamu.
  2. Klik Rancangan/design.
  3. Klik edit HTML.
  4. Copy paste kode berikut dan letakkan tepat dibawah kode ]]></b:skin>
    <script src='http://louislim2.googlepages.com/addSmiley.js' type='text/javascript'/>
  5. Lalu simpan template kamu.


Icon smile ini akan tampil secara otomatis pada blog kita setiap kali kita mengetikan standar kode dari icon tersebut.
Standar kode smile yang bisa digunakan :
:) or :-) :) or :-)
:D or :-D :D or :-D
:$ or :-$ :$ or :-$
:( or :-( :( or :-(
:p or :-p :p or :-p
;) or ;-) ;) or ;-)
:k or :-k :k or :-k
:@ or :-@ :@ or :-@
:# or :-# :# or :-#
:x or :-x :x or :-x
:o or :-o :o or :-o
Silahkan test dengan mengetikkan simbol-simbol diatas, lalu postinglah. maka simbol-simbol yang kamu tulis tadi akan otomatis jadi gambar emoticon.




keyword:
Cara Memasang Emoticon Di Blog otomatis
- cara memasang emoticon di blog secara otomatis
- cara membuat emoticon di blog
- cara gampang membuat emoticon di blog
- cara sederhana membuat emoticon di blog

Cara memasang alexa toolbar di firefox dan chrome

7/11/2014 0

Cara meningkatkan Alexa Rank dengan cepat adalah harapan banyak blogger terutama pelaku bisnis online, karena menyangkut tingkat kepercayaan sebuah blog, apakah layak untuk dipasang iklan mereka atau tidak. Kalaupun anda cuma blogger biasa, alexa rank ini bisa memberi nilai komersil dan meningkatkan kepercayaan pembaca kepada anda.

Dan kalaupun anda bukan seorang blogger, memasang alexa toolbar juga tidak ada ruginya bahkan dapat bermanfaat bagi anda. Misalkan anda sedang mencari suatu pembahasan dan mencarinya di google, jika anda memasang alexa toolbar pada browser yang anda gunakan, maka akan muncul pada setiap hasil pencarian peringkat alexa ranknya, dan tentu anda akan lebih tertarik untuk membaca artikel dengan peringkat alexa yang lebih tinggi karena menunjukkan jumlah pengunjung yang lebih tinggi pada blog tersebut. Dan peringkat tertinggi pada Alexa dimulai dari 1 (satu), sehingga peringkat dua, tiga dan seterusnya adalah peringkat yang lebih rendah.

Perhitungan Alexa Rank didasarkan pada Alexa Toolbar yang dipakai pada browser internet di seluruh dunia. Jadi Alexa Toollbar ini ibarat mata-mata yang memberi input data yang digunakan oleh Alexa untuk menghitung pageview dan pengunjung unik suatu blog. Jadi untuk meningkatkan alexa rank blog dengan cepat, anda cukup menggunakan toolbar alexa pada browser internet anda.

Berikut ini adalah cara memasang Alexa Toolbar pada browser Google Chrome dan Mozilla


Cara memasang Alexa Toolbar pada Google Chrome

1. Klik link ini https://chrome.google.com/webstore/search-extensions/alexa%20traffic%20rank?hl=id
Cara memasang alexa toolbar di firefox dan chrome
2. Klik TAMBAH KE CHROME

3. Akan muncul kotak pop up, kemudian pilih TAMBAHKAN

4. Tunggu hingga proses download selesai, dan Alexa Toolbar akan muncul pada browser Google Chrome saudara di bagian kanan atas.

5. Klik toolbar tersebut dan pilih Setujui, maka alexa toolbat telah terpasang di browser google chrome saudara.



Cara memasang Alexa Toolbar pada Mozilla Firefox

1. Klik link ini http://www.alexa.com/toolbar dan klik tombol Install Alexa Toolbar

2. Akan muncul halaman License and Agreement klik Accept and Install

3, Lalu muncul kotak kecil di bagian kiri atas. klik Allow / Izinkan

4. Tunggu proses download selesai, akan muncul jendela baru dan klik Install

5. Setelah selesai penginstalan, anda akan diminta untuk melakukan restart (refresh browser) Klik Restart Now / Mulai Ulang Sekarang

6. Setelah restart akan ada laman The Alexa Toolbar for Firefox - Demographic Information, silahkan klik tombol No Thanks

7. Jika muncul kotak pemberitahuan berwarna kuning, silahkan klik OK

8. Selesai

Demikianlah Cara Memasang Alexa Toolbar di Google Chrome dan Mozilla Firefox untuk meningkatkan Alexa Rank.
jangan lupa untuk share artikel ini ke teman teman kalian, klik salah satu tombol share dibawah.

Keyword:
Cara meningkatkan Alexa Rank dengan cepat
Cara cepat merampingkan Alexa Rank
- Cara merampingkan alexa rank dengan cepat
- Cara memasang alexa toolbar di browser firefox dan chrome