Sunday, 16 March 2014

Cara Membuat Tombol Share Sendiri

By Unknown 3/16/2014 12:12:00 pm , 11 comments

Bagi anda yang bingung untuk membuat atau memilih tombol shere yang banyak dibagikan oleh para blogger lainnya, kali ini saya akan membagi ilmu pengetahuan baru saya bagaimana cara memasang tombol share sendiri.

Apa Keuntungannya:

1. Anda akan lebih sedikit lebih mengerti mbagaimana cara meramu kode pemograman
2. Like yang sudah ada sebelumnya, jika anda mengganti template, like sebelumnya akan tetap masih ada, karena tombol, shere ini tersimpan dalam social profile anda sendiri.
3. Anda bisa meletakkna dimana saja tombol tersebut
4. Anda bisa memilih bermacam jenis tombol yang di tawarkan oleh social profile tersebut.
5. Dan masih banyak keuntungan lainnya yang bisa anda temukan nantinya.

Tahap Pertama:

1. anda masuk ke developers masing-masing social profile, ini dia developer nya:

2. Silahkan pilih yang mana jenis tombol shere yang anda inginkan, contoh tombol share facebook:
 
  1. silahkan anda pilih sesuai yang anda inginkan
  2. URL to like bisa anda kosongkan
  3. Layout bisa anda pilih sesuka anda
  4. setelah itu silahkan klik get kode
 3. Anda lakukan hal yang sama kepeda social profile lainnya:
4. anda kumpulkan kode tersebut di note pad
5. Anda bisa mengatur kode tersebut seperti kode di bawah ini:


<b>Share This Articel :</b>
<br />
<div class="fb-like" data-href="http://bermacamfakta.blogspot.com" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div>
<a href="https://twitter.com/share" class="twitter-share-button" data-via="ErdianRahmana" data-lang="id" data-related="ErdianRahmana" data-hashtags="bermacamfakta">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<script type="text/javascript" src="https://apis.google.com/js/platform.js">
  {lang: 'id'}
</script>
<div class="g-plus" data-action="share" data-annotation="bubble"></div>
 <a href="http://www.pinterest.com/pin/create/button/
        ?url=http%3A%2F%2Fwww.flickr.com%2Fphotos%2Fkentbrew%2F6851755809%2F
        &media=http%3A%2F%2Ffarm8.staticflickr.com%2F7027%2F6851755809_df5b2051c9_z.jpg
        &description=Next%20stop%3A%20Pinterest"
        data-pin-do="buttonPin"
        data-pin-config="above">
        <img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" />
    </a>

 Ket:
  • Warna biru : facebook
  • warna orange : twitter
  • Warna hijau : google +
  • warna ungu : pinterest

 Tahap Kedua

1. Anda biasa meletakkan kode itu dimana saja dengan cara kode tata letak-> tambah widget--> HTML/ java scrip, pate kan kode tersebut , simpan dan letakkan kode tersebut di mana anda suka

2. Atau ndengan cara masuk ke template --> edit HTML
jika anda ingin memasang di bawah judul postingan anda bisa meletakkannya di bawah
<div class='post-header-line-1'/>
Jika anda ingin memasang di bawah postingan bisa anda paste di bawah kode
<data:post.body/>

3. Simpan dan lihat hasilnya

Untuk demo anda bisa melihat gambar di bawah ini :
Atau lihat langsung demonya :

Read More...

Sunday, 19 January 2014

Cara memindahkan posting blog dari blog lama ke blog baru ( ekspor impor blog)

By Unknown 1/19/2014 12:12:00 am 12 comments
Barusan saya sudah melakukan ekspor impor blog dan sekarang saya akan share bagaimana caranya untuk ekspor impor postinagn blog. ekspor impor blog adalah cara untuk memindahkan seluruh postingan kita yang berada pada blog yang lama ke blog yang baru kita buat, dalam hal memindahkan postinagan ini semau yang ada pada postingan tersebut akan pindah ke blog baru termasu komentar yang ada pada postingan itu,

Baiklah langsung saja saya akan memberikan bagaimana caranya untuk eksport impor blog :

Cara Pertama:
1. login ke blog lama anda terlebih dahulu
2. masuk ke menu setelan --> lainnya
3. Lalu pilih ekspor blog, dan download filenya
4. biasanya file yang akan kita down load dalam bentuk xml

Cara Kedua
1. Login ke blog barua anda
2. Masuk ke menu setelan --> lainnya --> impor blog
3. Klik browser lalu pilah file yang anda download tadi
4. Masukkan kode capcha pada kolom yang tersedia
5 . Klik  Impor blog
6. Selesai

Sekarang anda lihat hasilnya semua yang ada pada blog sebelumnya akan ada pada blog baru anda, tenang ... postinagn anda yang ada pada blog lama anda tidak akn hilang, postinagan tersebut akan tetap ada di dlam blog tersebut,..
Read More...

Friday, 27 December 2013

Cara Membuat Navigasi Breadcrumbs Terdetiksi Google di Blog

By Unknown 12/27/2013 10:15:00 am Leave a Comment


Navigasi Breadcrumbs berfungsi untuk melihat di mana kita meletakkan artkel kita tersebut jika kita meletakkan artikel kita di label widget maka kita akan melihat denah diman kita letakkan artikel tersebut.

Kali ini saya akan shere Navigasi yang terdetiksi oleh google, Lalau apa kelebihannya ??? jika kita memasang Navigasi yang terdetiksi oleh google maka google akan mudah mencari blog kita , dan blog kita pun akan mendapat banyak pengunjung..

Baiklah begini cara nya :

1. Login ke blogger >> Template >> edit HTML
2. Cari  kode ]]></b:skin> dan pastekan kode di bawah ini di atas kode tersebut


.breadcrumbs
{
padding:5px 5px 5px 0;
margin: 0 0 5px;
font-size:inherit;
font-family: Georgia, trebuchet ms, Verdana;
line-height: 1.4em;
border-bottom:4px double #000000;
}

3. Cari kode berikut:
<b:include data='top' name='status-message'/>
4. Pastekan kode di bawah ini di atas kode di atas jika kode tersebut ada dua maka pastekan kode tersebut di atas kedua kode
 <b:include data='posts' name='breadcrumb'/>
5. Cari kode  <b:include  id='main'  var='top'>
6. Pastekan kode di bawah ini di atas kode tersebut

<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>  

7. Simpan
8. sekarang kita tinggal mengecek hasilnya di sini http://www.google.com/webmasters/tools/richsnippets

9. tinggal masukkan salah satu postingan anda jika gambarnya sudah seperti berarti itu berhasil :

 

Read More...

Cara Membuat Penanda Postingan Baru di Blog

By Unknown 12/27/2013 09:54:00 am Leave a Comment
Haii Sobat New diandiki dah lama nih nggak upload kali ini saya mau shere tentang cara penanda bagaimana cara melihat postingan baru dan postingan lama, ini sangat berfunsi bagi pengunjung blog anda untuk melihat bagaimanakah cara menentukan ini postingan lama atau ini postingan baru.

Kali ini saya minta maaf bahwa saya tidak bisa memberikan demo yang bagus , walaupun begitu hasil yang dihasilkan oleh widget kali cukup memuaskan,untuk demonya anda bisa melihatnya di sini : Demo

Nah kali ini langsung aja kita lihat caranya

1. yang pasti login dulu ke blogger
2. Template > Edit HTML
3. Cari Kode  </head>  
 letakkan kode di bawah ini di atas kode tersebut:
<style>.post{position:relative;}</style>
4. cari kode

<div class='post hentry'>
5. Lalu paste kode di bawah ini di bawah kode tersebut

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:post.isFirstPost'> 
<span style='display:block;position: absolute;top: -4px;right: -4px;margin: 0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGzm1lFLwSdxHBZ_5qoDIXT2On8AWHF2CkTgm2rpKxvW0FawEzNxxti8lEOXY63U3RYiVUCRYsAdu0hwbm4qMwj9Nhrr4y2LPsLBP-fc0-Gq-Ssbo9IIW5xFQmbN0qAxdMKdrzd-6m2Q/s56/New-Ribbon-By-EXEIdeas.png);width: 56px;height: 56px;'/>
<b:else/>
<span style='display:block;position: absolute;top: -4px;right: -4px;margin: 0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji9sUovxoMGYTxTP3_S3V1SBtteBdvZuuUy45B4q3shE9J9YzYvBrNqxe0tikNoTxDT5l_dWqMmP-5RLaqPW7xV2fueX_xS98adiddJsjrvlDtkCzp7RHlgOF_0-6aMRoRbDW_IoXkCQ/s56/Old-Ribbon-By-EXEIdeas.png);width: 56px;height: 56px;'/> 
</b:if></b:if></b:if>
Ket : Kode yang saya shere kali ini adalah kode yang menujukkan pita hanya di layar homepege saja , jika anda ingin pita juga berada pada layar postingan anda bisa menghapus tanda merah di atas.

6. simnpan, dan lihatlah hasilnya ....



Read More...

Wednesday, 6 November 2013

Cara Membuat Efek Foto Bergetar

By Unknown 11/06/2013 07:32:00 pm , 2 comments
Efek-efek menarikpada gambar tentu bisa membuat blog kita menjadi lebih bagus, efek yang kali ini saya shere adalah efek foto bergetar. Bergetar, jika kita letakkan kursor ke gambar tersebut maka gambar akan bergoyang ke memutar, keren bukan ??

Untuk contoh gambar dibawah ini bisa anda jadikan contoh, letakkan kursor di pada gambar dibawah ini, dan lihatlah hasilnya.




Baiklah begini caranya :

Caranya:

1. anda masuk ke blogger
2. tata letak--> tambah gadget --> copy paste kode dibawah ini :
<style type="text/css">
.img_OW{
position:relative
}
</style>
<script src="http://otowebsite.googlecode.com/files/Getar.js.txt" type="text/javascript"></script>
<a href="http://newdiandiki.blogspot.com/" target="blank"> <img class="img_OW" onclick="top.focus()" onmouseout="stoprattle(this);top.focus()" onmouseover="init(this);rattleimage()" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1Gv8TcxeSZWLPSZk0hwWr9nI0Mrgd9FyYiQPDYLfzh22twBnF8WfDq0ugEoReopQrwANSOMcJbd31rkTmqVGLx03bMVf_aFzpwH-aImqKrkdX2PNYY2zjE_qX0UJ3POZV7JX6COB35GU/s640/Pemandangan_Air+Terjun_plitvice.jpg" /></a>

Ket :
  • Warna Merah anda tukar dengan alamt yang dituju jika di klik 
  • Warna Hijau anda tukar dengan URL foto yang ingin di tampilkan 
 3. Simpan

<<<<Widget ini bisa anda jadi kan widget di sidebar ataupun dilatakkan ke dalam postingan >>>
Read More...