masalah website

now browsing by category

 
Posted by: | Posted on: March 1, 2015

Cara Membuat Artikel Terkait ala elovenbutik.com

Cara Membuat Related Post di Bawah Postingan
1. Bukalah akun blogger anda dengan tenang dan damai sejahtera.
2. Pilihlah Elemen Template. Lalu Pilit Edit HTML, jangan lupa centang Expand Template Widget <<<== cara edit html lawas…. lewati langkah ini / langsung lakukan langkah no 3 yah… (update)
3. Carilah kode </head> (Gunakan Ctrl+F untuk mempermudah pencarian), setelah anda menemukannya, letakkanlah kode javascript di bawah ini (Copy) persis di atas kode </head> tadi (Pastekan)

<!--Related Posts with thumbnails Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #EEEEEE;}
#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:4px solid #f2f2f2;width:100px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
#related-title {color:#666;text-align:center;padding: 0px 5px 10px;font-size:12px;width:110px;}
#related-posts .related_img:hover{border:4px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script src='https://googledrive.com/host/0B5Vz9Wq2KVnfbGp4X0Q0eFpMTGs' type='text/javascript'/>
<!-- remove --></b:if>

<!--Related Posts with thumbnails End-->

4. Aplagi cara no 3 diatas sudah anda lakukan, selanjutnya cari lagi kode berikut : <data:post.body/>, Sudah ketemu belum kode itu, kalau sudah ketemu, letakkan lagi kode di bawah ini (copy) tepat di bawah kode <data:post.body/> (pastekan)

<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=8&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>

</b:if></b:if>

<!-- Related Posts with Thumbnails Code End-->

5. Setelah selesai, lalu simpan template blog anda.
6. Lihat hasilnya seperti apa.

Catatan :
Kode <data:post.body/> mungkin anda akan temukan banyak, pilih saja satu, tidak apa-apa kok anda coba-coba yang penting anda paham.

Posted by: | Posted on: January 20, 2015

Cara Menyimpan CS,Javascript di Google Drive

Terkadang blogger atau web desainer mengalami masalah dengan kode CSS, javascript dan script penting lainnya untuk blog/site mereka. Untuk memperindah tampilan blog/site agar lebih menarik kadang mereka menambahkan beberapa javascript ke dalam blog mereka. Hal ini membuat beban blog/site semakin berat dan waktu loadingnya semakin lama.
Tetapi masalah ini bisa diatasi dengan menempatkan file CSS dan javascript di hosting tersendiri di luar template.  Cara ini akan mengurangi ukuran template dan loading blog/site pun semakin cepat. Selain itu dengan menempatkannya di hosting eksternal akan membuat template kelihatan lebih rapi dan mudah mengaturnya. Bayangkan kalau CSS dan semua file script menumpuk di satu template blog/site seperti gado-gado.

Tempat penyimpanan file yang paling baik menurut kami saat ini adalah Google Drive. Selain gratis, Google Drive memiliki reputasi yang baik, memiliki hosting load yang cepat dan memberikan space yang cukup besar dengan jatah bandwith tanpa batas sehingga tidak perlu khawatir blog/site anda mengalami error karena kehabisan jatah bandwith.

Cara menyimpan file CSS dan Javascript atau file lainnya di Google Drive

Pertama-tama siapkan file yang akan di simpan di Google Drive. Untuk menyiapkan file ini anda bisa menggunakan notepad.  Sebagai contoh bila ingin menyimpan file CSS dari template Blogger, copy kode css diantara  <b:skin><![CDATA[  dan  ]]></b:skin>.  Lihat contoh gambar di bawah,  arsiran biru merupakan bagian yang di copy.
 Setelah di copy kemudian paste ke dokumen baru di notepad lalu simpan file CSS dengan ekstension css (*.css). Bila file yang disimpan  adalah file Javascript maka di save dengan ekstension js (*.js).
Langkah berikutnya adalah meng-upload file CSS yang sudah Anda siapkan tadi. Masuklah ke halaman Google Drive https://drive.google.com dan login dengan akun Google yang Anda miliki. Bila sudah masuk, klik tombol “CREATE” pada navigasi sebelah kiri dan buat sebuah folder untuk menyimpan file Anda nanti.
Kemudian masuk ke dalam folder yang baru dibuat dengan cara mengklik folder tersebut. Untuk mengupload file CSS atau javascript ke folder ini, klik tombol upload (terletak disebelah kanan tombol CREATE), kemudian klik option “Files” untuk mengambil file CSS/Javascript di drive komputer Anda.
Bila file selesai diupload klik link “Share” seperti yang terlihat pada gambar bawah.
 Klik tombol “Ubah” untuk membuka option perubahan sharing file CSS/Javascript.
Ubahlah setting Link sharing file dari “Specific people” menjadi “Public on the web” karena file ini akan digunakan di blog/site yang nantinya bisa diakses oleh orang lain. Setelah itu klik tombol “Save”

Berikutnya Anda akan mendapatkan link untuk di-sharing. Copy link itu dan paste ke notepad untuk digunakan lebih lanjut.

 Penggunaan link CSS dan Javascript di template Blogger

Nah sekarang tinggal memasukan link file tadi ke template Blogger. Ada sedikit perbedaan form link untuk file CSS dan file Javascript bila ingin digunakan di template Blogger.  Umumnya dari Link sharing dari Google drive berbentuk seperti ini.

https://drive.google.com/file/d/0B4wS9Xm07YZnSWVkTWtfbm9LcFE/edit?usp=sharing

Hapus bagian /edit? kebelakang sehingga nampak seperti ini :

https://googledrive.com/host/0B4wS9Xm07YZnSWVkTWtfbm9LcFE

Bentuk link untuk file Javascript
Untuk Javascript maka link googledrive.com di atas harus ditempelkan ditengah link untuk script

<script src=”googledrive-link-disini” type=”text/javascript”></script>

Bentuk link untuk file CSS
Untuk link CSS maka link googledrive.com di atas harus ditempelkan ditengah link untuk stylesheet

<link href=”googledrive-link-disini” rel=”stylesheet”></link>

Bentuk link untuk file Javascript
Untuk Javascript maka link googledrive.com di atas harus ditempelkan ditengah link untuk script

<script src=”googledrive-link-disini” type=”text/javascript”></script>

Sebagai contoh karena kita sudah mengupload file CSS maka link google drive menjadi seperti ini

<link href=”https://googledrive.com/host/0B4wS9Xm07YZnSWVkTWtfbm9LcFE” rel=”stylesheet”></link>

Semoga membantu.

Posted by: | Posted on: January 20, 2015

Cara Menambah Kode Program dengan Syntax Highlighter

Bagaimana nambahin kode program ke dalam blogger? atau how to embed code syntax in Blog?

adalah pertanyaan yang dulu saya tanya ke Google pas mau berbagi kode sumber di blog kita. Memang secara defaultnya dalam Blogger atau Blogspot kita tidak dapat langsung mengetik kode-kode program apalagi kode HTML, soalnya si Blogger bakal ngompile bukan sebagai teks tapi sebagai kode itu sendiri jadi bakal tidak terlihat kode itu di post kita sewaktu di publish.Untuk itu kita butuh sesuatu yang bisa memformat kode-kode tadi biar tidak terjadi salah paham dengan si Blogger dan tampilannya eye-catching punya. Sesuatu itu bernama SyntaxHighlighter suatu alat agar kode kita bisa di tulis dalam postingan. Tidak usah panjang lebar lagi mari kita ikuti langkah-langkah berikut.

Cara Install

  1. Lihat di dashboardnya pilih Template ? Edit HTML nah sekarang biar aman CTRL+A terus Copy pindahin dulu semua kodenya ke editor yang kamu punya, jaga-jaga ntar takut terjadi kesalahan hehe.
  2. Nah sekarang masukan kode berikut sebelum tag </head> ambil dari line 02 sampai line 34.FYI: SyntaxHighlighter sekarang sudah versi 3.0.83 namun pada versi terbaru ini tidak ada fasilitas view source, copy to clipboard, print, help
  3. <!-- Syntax Highlighter 3.0.83 START -->
    <link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
    <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
    <script language='javascript' type='text/javascript'>
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all();
    </script>
    <!-- Syntax Highlighter 3.0.83 END -->
  4. Terakhir tinggal di Save deh templatenya.

Cara Menggunakan SyntaxHighlighther di dalam Post/Artikel Blog

Setiap jenis kode yang ingin ditampilkan di dalam halaman sebuah web biasanya menggunakan tag <pre>, meskipun dalam beberapa hal juga bisa menggunakan tag <code>. Untuk post blogger, kita akan menggunakan tag yang pertama. Kemudian masing-masing brush yang dibutuhkan dipanggil menggunakan atribut class. Contoh penulisannya:

<pre class=”brush:css, brush:html, brush:js”>
Kode Di Sini
</pre>

Berikut langkah-langkah menambahkan Syntax Highlighter ke dalam Post:
1. Ketika akan memasukkan kode, pindah dari mode “Compose” ke mode “HTML”
2. Kemudian masukkan tag <pre> dan class sesuai yang diinginkan, atau anda bisa copy contoh saya di atas.
3. Sebelum memasukkan kode di antara tag <pre>, anda harus parse dulu kode tersebut. Ini Penting. Karena jika tidak di parse, maka kode yang dimasukkan ke dalam editor HTML akan diterjemahkan sebagai perintah, bukan teks biasa. Gunakan HTML/Script Parser, parse kode ke dalam tool tersebut, copy hasilnya, dan sisipkan ke dalam tag <pre>.
Posted by: | Posted on: November 2, 2014

Cara Menyimpan Halaman Web Menjadi Gambar

jika anda sedang mencari cra menyimpan halaman web dalam bentuk gambar, mungkin artikel ini yang dicari-cari oleh anda karena pada artikel ini akan membahas tentang menyimpan halaman web menjadi gambar jpg atau png atau sceen shot. Tips ini hanya bisa dijalankan pada browser Mozilla Firefox yang memiliki add on yang bernama Abduction yang dibuat oleh Rowan Lewis.

Jika anda akan menyimpan halaman web dalam bentuk gambar seperti diatas  anda harus memiliki add on terlebih dahulu pada browser mozilla firefox anda. Untuk mendowloadnya silahkan klik link dibawah ini.

Silahkan klik Download Now pada halaman berikutnya, seperti pada gambar berikut.



Ikuti saja petunjuk download dan cara penginstalannya dan biasanya mozilla firefox langsung restart otomatis setelah proses penginstalan.

Cara penggunaannya
1.  Buka halaman web yang akan disimpan menjadi gambar.
2.  Lalu klik kanan pada mouse > Pilih Save Page As Image. 
3.  Sesuaikan lebar luar halaman yang akan di ambil gambar.
4.  Jika sudah silahkan tekan Enter pada keyboard.
5.  Letakan hasilnya atau gambarnya pada penyimpanan file komputer.
6.  Silahkan pergunakan hasil gambar tersebut dengan baik.
Posted by: | Posted on: November 2, 2014

Cara Menyimpan Halaman Web Dalam Bentuk PDF

bagaimana cara untuk menyimpan halaman web dalam bentuk file PDF? Ada beberapa cara yang dapat kita manfaatkan untuk mengubah halaman web menjadi sebuah file PDF. Hal ini tergantung pada browser yang kita gunakan.

Browser yang sering digunakan saat ini adalah Google Chrome dan Mozilla Firefox. Oleh karena itu, kita akan menyimpan file PDF menggunakan kedua browser ini.
Google Chrome
Mungkin cara ini merupakan cara yang paling mudah karena pada Google Chrome sudah terdapat fasilitas untuk menyimpan halaman web langsung menjadi file PDF, yaitu pada menu print. Tekan tombol menu di bagian kanan atas pada Google Chrome > Print… .

 Akan muncul halaman print, Tekan tombol Change, kemudian pilih Safe as PDF.

 

Anda dapat mengatur halaman mana saja yang akan disimpan, layout, margin serta header dan background. Jika sudah klik Save.

Mozilla Firefox
Pada Firefox belum ada tool default untuk menyimpan halaman web menjadi PDf, tapi kita dapat menggunakan Add-ons yang tersedia. Buka Menu Firefox di kiri atas > Add-ons, ketikkan di search bar dengan kata kunci “save as pdf”, akan muncul Add-ons dengan Save as PDF 1.5, klik Install. Jika sudah selesai akan ada konfirmasi untuk merestart Firefox.

 

Penggunaan Add-ons ini juga sangat mudah, ketika membuka halaman web yang ingin disimpan sebagai file PDF, Anda cukup menekan icon Save as PDF dan akan muncul jendela Save As.

Selain teknik di atas, tentunya masih ada cara-cara lainnya yang dapat digunakan untuk menyimpan halaman web menjadi file PDF. Dari kedua browser di atas sepertinya mengggunakan Google Chrome lebih mudah karena kita tidak perlu menambahkan Add-ons, tapi tidak semua orang suka menggunakan Chrome. Anda dapat memilih cara yang termudah. 

Posted by: | Posted on: October 11, 2014

Cara Membuat Widget LinkWithin Tidak Muncul di Homepage

Bila kamu telah memasang widget LinkWithin di blog kamu, maka yang akan terjadi adalah selain keluar di halaman posting, widget ini juga akan tampil di beranda atau home page di bawah posting blog. 

Widget yang muncul di beranda ini tentunya akan membuat waktu loading home page blog kamu menjadi lebih lama.

Agar loading home page menjadi lebih ringan, kita buat saja widget LinkWithin ini tampil atau muncul hanya di halaman posting. Silakan simak langkah-langkah berikut ini. Sebelumnya, pastikan Anda telah memasang widget LinkWithin pada blog Anda.


Berikut langkah langkahnya:

  • Masuk ke akun Blogger Anda.
  • Klik Rancangan > Edit HTML.
  • Beri tanda centang pada Expand Template Widget.
  • Cari kata LinkWithin  menggunakan Ctrl + F. Maka akan keluar kode seperti dibawah ini :
<b:widget id=’HTML3′ locked=’false’ title=’LinkWithin type=’HTML’>

<b:includable id=’main’><data:content/></b:includable>

</b:widget>

  • Tambahkan kode <b:if cond=’data:blog.pageType == &quot;item&quot;’> setelah kode <b:includable id=’main’> dan kode </b:if> sebelum </b:includable> sehingga hasilnya menjadi seperti di bawah ini.


<b:widget id=’HTML2′ locked=’false’ title=’LinkWithin‘ type=’HTML’><b:includable id=’main’><b:if cond=’data:blog.pageType == &quot;item&quot;’><data:content/></b:if></b:includable>
</b:widget>

  • Klik tombol SIMPAN TEMPLATE.
  • Selesai.
Posted by: | Posted on: September 10, 2014

Cara memodifikasi popular posts

Tampilan widget popular posts dengan animasi gambar beputar yang akan dibahas kali ini sangat cantik dan menarik sekali terlebih lagi jika dipasang di blog anda, yang pasti pengunjung blog akan betah dan tertarik ingin membuatnya juga. Tentunya penampilan blog yang cantik akan membuat anda sendiri juga pengunjung senang melihatnya. Widget popular posts dengan gambar berputar ini sama dengan istilah kerennya Widget Popular Post With Grid Layout. Bagaimana apakah anda ingin membuat dan memasangnya?

Untuk tampilan widget ini dapat lebih jelas terlihat dan berfungsi jika mouse diarahkan ke gambar popular posts yang mengakibatkan gambar yang ada pada widget popular posts akan berputar-putar sampai orangnya juga ikutan pusing. Modifikasi widget popular posts dengan animasi gambar beputar yang akan tampil di blog dapat anda lihat seperti screenshot di bawah ini :

Cara membuat widget popular posts dengan thumbnail gambar beputar

1. Login Blogger
2. Pilih Tata Letak
3. Pilih Tambah Gadget
4. Pilih Widget “Popular Posts”

5. Silahkan atur sendiri berapa jumlah artikel yang akan anda tampilkan
6. Kalau sudah lalu Save

Langkah selanjutnya untuk merubah widget popular posts dengan efek grid layout :
1. Pilih Edit HTML
2. Centang kotak kecil disamping Expand Widget Templates
3. Silahkan backup template anda
4. Lalu gunakan ctrl+F untuk mencari kode ]]></b:skin>
5. Kalau sudah dapat lalu tambahkan kode berikut dan letakkan diatas kode ]]></b:skin>

.popular-posts .item-thumbnail{float:left;} .popular-posts ul{padding-left:30px;} .popular-posts ul li {list-style-image: none;list-style-type: none;display:inline;} .popular-posts ul li img {padding:0px;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;border: 2px solid #CCC;} .popular-posts ul li img:hover {border:2px solid #ccc;-moz-transform: scale(1.3) rotate(-360deg) ;-webkit-transform: scale(1.3) rotate(-360deg) ;-o-transform: scale(1.3) rotate(-360deg) ;-ms-transform: scale(1.2) rotate(-360deg) ;transform: scale(1.3) rotate(-360deg);}

6. Berikutnya anda cari tulisan PopularPosts1
Kode script lengkapnya biasanya seperti dibawah ini :

<b:widget id=’PopularPosts1‘ locked=’false’ title=’Popular Post’ type=’PopularPosts’>
<b:includable id=’main’>
<b:if cond=’data:title’><h2><data:title/></h2></b:if>
<div class=’widget-content popular-posts’>
<ul>
<b:loop values=’data:posts’ var=’post’>
<li>
<b:if cond=’data:showThumbnails == &quot;false&quot;’>
<b:if cond=’data:showSnippets == &quot;false&quot;’>
<!– (1) No snippet/thumbnail –>
<a expr:href=’data:post.href’><data:post.title/></a>
<b:else/>
<!– (2) Show only snippets –>
<div class=’item-title’><a expr:href=’data:post.href’><data:post.title/></a></div>
<div class=’item-snippet’><data:post.snippet/></div>
</b:if>
<b:else/>

<b:if cond=’data:showSnippets == &quot;false&quot;’>
<!– (3) Show only thumbnails –>
<div class=’item-thumbnail-only’>
<b:if cond=’data:post.thumbnail’>
<div class=’item-thumbnail’>
<a expr:href=’data:post.href’ target=’_blank’>
<img alt=” border=’0′ expr:height=’data:thumbnailSize’ expr:src=’data:post.thumbnail’ expr:width=’data:thumbnailSize’/>
</a>
</div>
</b:if>
<div class=’item-title’><a expr:href=’data:post.href’><data:post.title/></a></div>
</div>
<div style=’clear: both;’/>
<b:else/>
<!– (4) Show snippets and thumbnails –>
<div class=’item-content’>
<b:if cond=’data:post.thumbnail’>
<div class=’item-thumbnail’>
<a expr:href=’data:post.href’ target=’_blank’>
<img alt=” border=’0′ expr:height=’data:thumbnailSize’ expr:src=’data:post.thumbnail’ expr:width=’data:thumbnailSize’/>
</a>
</div>
</b:if>
<div class=’item-title’><a expr:href=’data:post.href’><data:post.title/></a></div>
<div class=’item-snippet’><data:post.snippet/></div>
</div>
<div style=’clear: both;’/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name=’quickedit’/>
</div>
</b:includable>
</b:widget>

9. Silahkan hapus semua kode script diatas dan ganti dengan kode script di bawah ini :

<b:widget id=’PopularPosts1′ locked=’false’ title=’Popular Posts’ type=’PopularPosts’> <b:includable id=’main’> <b:if cond=’data:title’><h2><data:title/></h2></b:if> <div class=’widget-content popular-posts’> <ul> <b:loop values=’data:posts’ var=’post’> <li> <b:if cond=’data:showThumbnails == “false”‘> <b:if cond=’data:showSnippets == “false”‘> <!– (1) No snippet/thumbnail –> <a expr:href=’data:post.href’><data:post.title/></a> <b:else/> <!– (2) Show only snippets –> <div class=’item-title’><a expr:href=’data:post.href’><data:post.title/></a></div> <div class=’item-snippet’><data:post.snippet/></div> </b:if> <b:else/> <b:if cond=’data:showSnippets == “false”‘> <!– (3) Show only thumbnails –> <div class=’item-thumbnail-only’> <div class=’item-thumbnail’> <a expr:href=’data:post.href’ expr:title=’data:post.title’> <b:if cond=’data:post.thumbnail’> <img alt=” border=’0′ expr:height=’data:thumbnailSize’ expr:src=’data:post.thumbnail’ expr:width=’data:thumbnailSize’/> <b:else/> <img alt=” border=’0′ expr:height=’data:thumbnailSize’ src=’http://www.prismestate.com/images/noimages.png’ expr:width=’data:thumbnailSize’/> </b:if> </a> </div> </div> <b:else/> <!– (4) Show snippets and thumbnails –> <div class=’item-content’> <b:if cond=’data:post.thumbnail’> <div class=’item-thumbnail’> <a expr:href=’data:post.href’ target=’_blank’> <img alt=” border=’0′ expr:height=’data:thumbnailSize’ expr:src=’data:post.thumbnail’ expr:width=’data:thumbnailSize’/> </a> </div> </b:if> <div class=’item-title’><a expr:href=’data:post.href’><data:post.title/></a></div> <div class=’item-snippet’><data:post.snippet/></div> </div> <div style=’clear: both;’/> </b:if> </b:if> </li> </b:loop> </ul> <b:include name=’quickedit’/> </div> </b:includable> </b:widget>

10. Selesai dan simpan

Posted by: | Posted on: September 10, 2014

Cara Membuat Breadcrumbs II Di Blogspot

Cara membuat / memasang navigasi breadcrumbs terindex Google di blog agar terlihat di dalam mesin pencari Google (Google search), beberapa waktu lalu saya pernah menjelaskan tentang cara membuat breadcrumb seo friendly yang tujuannya untuk memudahkan visitor menjelajahi halaman demi halaman pada blog anda sesuai dengan kategori yang ada.

Langsung saja pada langkah-langkah pembuatan breadchumb ini : :

  • Seperti biasa anda harus login ke Blogger.
  • Langsung tuju Edit HTML.
  • Klik Expand Template Widget.
  • Letakkan kode berikut ini tepat sebelum  kode ]]></b:skin>

    .breadcrumbs{
    padding:5px 5px 5px 0;
    margin:0;font-size:95%;
    line-height:1.4em;
    border-bottom:4px double #cadaef}

  • Setelah itu, cari kode seperti ini :

    <div class=’post hentry’>

  • Letakkan kode berikut ini tepat setelah kode <div class=’post hentry’>

    <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’>
    &#187; <span typeof=’v:Breadcrumb’><a expr:href=’data:label.url’ property=’v:title’ rel=’v:url’><data:label.name/></a></span>
    </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’/>

    Simpan Template.

Posted by: | Posted on: June 6, 2013

Emotion Line Messanger untuk posting blogspot

Saat ini line messanger merupakan aplikasi chat yang sedang populer. aplikasi line messanger ini mirip seperti whatsapp, kakao talk, wechat. tapi line messanger memiliki sesuatu yang bisa menyentuh saya dan isti saya memakainya. Apa itu?…. yah emotion nya yang lebai abizzz………dan sangat ekpresif

berikut adalah sebagian contoh emotion / stickers dari line messanger:

Baca selengkapnya �