Tampilkan postingan dengan label blogging. Tampilkan semua postingan
Tampilkan postingan dengan label blogging. Tampilkan semua postingan

Cara Membuat Menu/Navigasi Breadcrumbs di Blogger

Posted by Unknown Jumat, 02 Agustus 2013 0 komentar
Menu/Navigasi Breadcrumbs adalah navigasi yang berada di bagian atas posting dan menunjukkan urutan isi halaman dari rootnya (Home) hingga ke posting/artikel. 
Menu ini sering ditemui di blog/website berplatform WordPress, dimana urutan navigasinya dimulai dari Home > Parental Category > Subcategory > Posting. Di Blogger/Blogspot, kita juga dapat melakukan hack navigasi breadcrumbs dengan berdasarkan pada label: Home > Label > Posting. Menu ini akan muncul pada halaman posting, label, arsip, dan tidak muncul di bagian homepage.
Menu/navigasi breadcrumbs juga membantu meningkatkan SEO dan SERP, yaitu dalam pemetaan oleh search engine dan juga menambah kepadatan keyword, mengingat letaknya yang berada di bagian atas posting. 
Cara Membuat Menu/Navigasi Breadcrumbs di Blogger/Blogspot:
1. Masuk ke dashboard > Design/Rancangan > Edit HTML.
2. Cari (gunakan Ctrl+F) ]]></b:skin> dan masukkan aturan CSS berikut di ATAS-nya:
.breadcrumbs {padding: 5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:95%; line-height:1.4em; border-bottom:3px double #e6e4e3;}
3. Cari (Ctrl+F) <b:include data='top' name='status-message'/> kemudian tambahkan kode ini TEPAT di BAWAH/SETELAH-nya:
<b:include data='posts' name='breadcrumb'/>
4. Cari (Ctrl+F) <b:includable id='main' var='top'> lalu tambahkan script berikut TEPAT di ATAS/SEBELUM-nya:
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
»Unlabelled
</b:if>
» <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>Home</a> » All posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
5. Pastikan semua kode telah di-copy dan diletakkan dengan benar, lalu save.

note: karena banyaknya problem yang disampaikan ketika mengedit, perhatikan benar-benar instruksinya serta pahami istilah di bawah/setelah serta di atas/sebelum, itu berarti letakkan kode benar-benar setelah atau sebelum kode yang dicari. Contoh:
<b:include data='top' name='status-message'/><data:adStart/>
Kita lihat di situ ada 2 tag bersisian, jika anda harus memasukkan tag/kode baru di bawah/setelah <b:include data='top' name='status-message'/>, itu berarti anda harus meletakkan benar-benar setelahnya, sehingga <data:adStart/> harus digeser posisinya, atau kode/tag baru disisipkan di antara keduanya, jadinya:
<b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/> 
<data:adStart/>
Dan Selesai dah, simpan dan lihat blog sobat....

Baca Selengkapnya ....

Cara Menampilkan Widget di Blogger dengan Label Tertentu

Posted by Unknown 0 komentar

Garis Masuk, kali ini saya akan memberikan cara bagaimana menempilkan Widget dengan Label tertentu agar sesuai dengan pilihan kita, langsung saja, silahkan ikuti tutorial berikut :

  • Pertama masuk ke akun blog Sobat.
  • Pilih menu Tata Letak --> Tambahkan Widget --> Pilih Html/javascript.


Selanjutnya masukkan kode berikut :
<script src="http://oketrik.googlecode.com/files/recent-post.js"></script><script>var numposts = 10; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script><script src="http://garismasuk.blogspot.com/feeds/posts/default/-/label?orderby=published&alt=json-in-script&callback=rp"></script></div>

nb: ganti yang berwarna hijau dengan jumlah post yang sobat ingin tampilkan dan yang berwarna merah dengan label pilihan sobat.

Demikianlah Tutorial singkat dari saya.

Baca Selengkapnya ....

Cara menambahkan Artikel terkait dibawah postingan pada Blogger

Posted by Unknown Senin, 29 Juli 2013 0 komentar
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEz2spCeWQVX19Q3m697vtWqT-C-c65cFzgeVs8BQewrPKYH-6QOK4uA-jwCm5Aah3TP6uQfvBx0LiwnA-M1fXJpVfXLzAxzW4JpP7ph_fBO-AgWvg1GLB33bBZKMpX-Ix-tIRABskRmEd/s1600/Related+Post+atau+Artikel+Terkait.jpgGaris Masuk - Artikel terkait adalah Sebuah Elemen pada blogger yang berfungsi untuk menampilkan Beberapa Judul Artikel lain yang masih berkaitan dengan artikel yang sedang dibaca oleh pengunjung saat itu. Artikel terkait juga berguna untuk meningkatkan PageView pada Blog kita. Nah pada tutorial kali ini, saya akan berbagi kepada sobat,  cara membuat artikel terkait dibawah postingan blog, Buat sobat yang berminat, silahkan simak ya, Berikut caranya :

  1. Login Ke Dashboard Blogger sobat.
  2. Masuk Menu Template
  3. Pilih Edit Html
  4. Silahkan cari kode </Head>
  5. Silahkan Letakkan Kode berikut tepat di atas Kode </Head>
 <script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;}}}}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];}}
relatedTitles = tmp2;
relatedUrls = tmp;}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' +
relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;}
i++;}
document.write('</ul>');}
//]]>
</script

      6. Kemudian cari kode berikut  <data:post.body/>,
      7. Jika sudah ketemu, silahkan letakkan kode berikut tepat dibawah kode <data:post.body/>,

<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<h4>Related Post</h4>
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();</script>
</b:if>

Langkah terakhir silahkan Simpan template sobat, dan lihat hasilnya. sobat akan melihat Elemen Related post dibawah postingan blog sobat.

demikian sedikit tips dari saya, semoga bermanfaat dan terima kasih ,jika ada yang kurang di mengerti silahkan sobat tinggalkan komentar dibawah ini. - See more at: http://garismasuk.blogspot.com/2013/07/cara-menembahkan-tombol-share-di-blogger.html#sthash.rFFHZTtg.dpuf
Demikian sedikit tutorial dari saya, semoga bermanfaat dan terima kasih ,jika ada yang kurang di mengerti silahkan sobat tinggalkan komentar dibawah ini.
demikian sedikit tips dari saya, semoga bermanfaat dan terima kasih ,jika ada yang kurang di mengerti silahkan sobat tinggalkan komentar dibawah ini. - See more at: http://garismasuk.blogspot.com/2013/07/cara-menembahkan-tombol-share-di-blogger.html#sthash.rFFHZTtg.dpuf

Baca Selengkapnya ....

Cara menembahkan tombol share di blogger

Posted by Unknown 0 komentar
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiv4hPdhotPVxA_7NrBdga6D7tnK7j35tL3VzZ9z5lg6rJJFmrCB4wFkDsbYJWaiuW_ha5MY_y4a7jVPLq6Davrju6XN3wv7vFK1Eq0Oa4xzHBluXm6w-5fUWho-NK559drxfA2MUWNtd4/s320/twitter-google+facebook.jpgGaris Masuk - Tombol Share adalah element  penting dan harus ada dalam setiap posting kita. karena tombol Share ini adalah sebuah tombol yang dimana dapat mempermudah pembaca untuk membagikan artikel bermanfaat kepada teman-teman di beberapa jejaring sosial. untuk sementara ini, ada sekitar tiga situs jejaring sosial yang paling ramai dan banyak digunakan oleh kebanyakan orang didunia, jejaring sosial tersebut antara lain Facebok, Twitter, dan Google +. dengan menambahkan tombol share atau button share ini, kemungkinan besar akan meningkatkan jumlah pengunjung atau visitor ke blog sobat, dan tentunya akan meningkatkan jumlah traffict blog sobat, sehingga blog sobat akan semakin populer. Berikut ini saya berikan tutorialnya bagaimana cara menambahkan tombol share pada blog blogger sobat :

    1. Langkah awal, silahkan sobat login ke akun blogger sobat.
    2. Langkah kedua, silahkan pilih menu template.
    3. pilih Edit Html.
    4. setelah itu silahkan sobat cari kode <div class='post-footer'>
    5. Jika Sudah ketemu, silahkan taruh kode berikut dibawahnya
    <!-- Button Share BEGIN --><div class='addthis_toolbox addthis_default_style' expr:addthis:title='data:post.title' expr:addthis:url='data:post.url' style='float:right;padding:0px;'><a class='addthis_button_facebook_like' fb:like:layout='button_count'/><a class='addthis_button_tweet' tw:related='Widikira' tw:via='faisalgifars'/><a class='addthis_button_google_plusone' g:plusone:size='medium'/> </div><script src='//s7.addthis.com/js/300/addthis_widget.js' type='text/javascript'/><!-- Button Share END -->

    Keterangan : 

    1. Tulisan yang berwarna merah adalah posisi tombol share tersebut, jika sobat ingun menempatkanya disebelah kiri, maka ganti tulisan tersebut menjadi left
    2. Tulisan yang berwarna hijau, silahkan sobat ganti dengan akun Twitter sobat masing-masing.
      Jika Sudah selesai, silahkan sobat simpan template blog sobat dan lihat hasilnya.
        demikian sedikit tips dari saya, semoga bermanfaat dan terima kasih ,jika ada yang kurang di mengerti silahkan sobat tinggalkan komentar dibawah ini.


        Baca Selengkapnya ....

        Cara memasang iklan menyatu dengan postingan di blogger

        Posted by Unknown 0 komentar
        Garis masuk - salah satu pemasukan andalan para blogger atau penggiat dunia maya adalah melalui penempatan iklan pada blognya, agar penghasilan dari iklan semakin meningkat sebaiknya kita menempatkan spot iklan di tempat yang tepat, agar para pengunjung blog kita tertarik untuk mengklik iklan yang kita pasang, dan akhirnya akan menaikkan penghasilan kita tentunya, penempatan iklan yang paling bagus itu adalah ditempatkan menyatu dengan isi postingan kita, nah kali ini saya akan berikan tutorialnya bagaimana memesang atau menempatkan iklan kita agar bisa menyatu dengan isi postingan kita. Oke langsung saja silahkan ikuti tutorial berikut ini :

        • Silahkan sobat Login ke akun Blogger sobat
        • Pilih menu Template
        • pilih Edit Html  dan beri tanda centang pada Expand template Widget
        • Selanjutnya silahkan sobat cari kode <data:post.body/>
        • Lalu tambahkan kode berikut tepat dibawah kode <data:post.body/> tadi.

        <div style='float: left;'>Letak Kode Iklan Disini</div>


        Keterangan : 


        1. Pada masing-masing template terdapat kode yang masing-masing berbeda. jika sobat menemukan kode  <data:post.body/> lebih dari satu, silahkan sobat gunakan kode  <data:post.body/> yang kedua, jika belum berhasil juga, berarti yang benar pada nomer tiga. (maaf bukanya artikel ini kurang akurat atau kurang profesional, tapi memang pada masing-masing template memiliki kode yang berbeda-beda)
        2. Untuk tulisan yang saya beri warna hijau adalah letak iklan yang akan sobat pasang, "left" artinya iklan akan berada dibagian kiri, jikan sobat ingin menempatkan iklan pada bagian kanan, silahkan sobat ganti tulisan "left" dengan "Right"
        3. Untuk iklan yang akan sobat pasang, kodenya harus di Parshe terlebih dahulu.
               Jika sudah selesai, silahkan simpan template sobat, dan lihat hasilnya.
        Demikian Sedikit tips yang bisa saya share kali ini,  jika ada yang kurang di mengerti, silahkan tinggalkan komentarnya dibawah ini . terimakasih dan semoga bermanfaat.

         

        Baca Selengkapnya ....
        Trik SEO Terbaru support Online Shop Baju Wanita - Original design by Bamz | Copyright of android app jorte.