RymarkJrBlog

Cara Pasang Widget Google Translate Pada Blog

Diposting oleh Unknown | Rabu, 26 Februari 2014

Pada kesempatan kali ini saya akan memberikan trik dan panduan tentang Cara untuk membuat widget google translate pada blogspot.

Contohnya seperti ini :

Cara Pasang Widget Google Translate pada Blogspot

Login pada Blogger
Setelah berada di Dashbore
Masuk mode Rancangan
Pada Elemen Laman
Pilih Tambah Gadget
Pilih HTML/Javascript
Masukan kode berikut.

Untuk Google Translate 2 baris, gunakan kode ini.

Untuk Google Translate 3 baris, gunakan kode ini.

Jika sudah, Simpan

Jika anda merasa letaknya kurang pas dengan kolom sidebar anda. Anda bisa menyesuaikan jaraknya dengan mengganti nilai 0 pada padding-left. Semakin tinggi nilainya semakin lebar jaraknya. Dan jika anda ingin mengganti icon benderanya dengan icon lain. Silahkan ganti tulisan bewarna merah dengan alamat url icon anda.

Demikian blogger tutorial mengenai Cara Pasang Gadget Google Translate Di Blogspot.

Semoga bermanfaat dan semoga berhasil

Terima Kasih ^_^

Cara Pasang Widget Google Translate Pada Blog

Posted by : Unknown on :Rabu, 26 Februari 2014 With 0komentar

Cara Pasang Tombol Share Di Blog

Diposting oleh Unknown |

Baca selengkapnya »

Pada kesempatan kali ini saya akan memberikan trik dan panduan tentang cara pasang tombol share pada blogspot.

Cara Pasang Tombol Share pada Blogspot

Login pada Blogger
Setelah berada di Dashbore
Masuk mode Rancangan kemudian Edit HTML
Centang Expand Template Widget
Cari kode <data:post.body/>
Jika sudah ketemu, letakan kode berikut dibawah kode tadi

<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e8062ca66617053"></script>

Jika sudah, Simpan Template

Demikian blogger tutorial mengenai Cara Pasang Tombol Share pada Blogspot.

Semoga bermanfaat dan semoga berhasil.
Terima Kasih ^_^

Cara Pasang Tombol Share Di Blog

Posted by : Unknown on : With 0komentar

Cara Membuat Breadcrumb Di Blogger

Diposting oleh Unknown |

Baca selengkapnya »

Pada kesempatan kali ini saya akan memberikan trik dan panduan tentang Cara untuk membuat breadcrumb pada blogspot.

Contohnya seperti ini :

Cara Membuat Breadcrumb pada Blogspot

Login pada Blogger
Setelah berada di Dashbore
Masuk mode Rancangan
Kemudian Edit HTML
Centang Expand Widget Templates
Cari kode <b:includable id='post' var='post'>
Jika sudah ketemu, letakan kode berikut dibawah kode tadi

<em>Browse: <a expr:href='data:blog.homepageUrl'>Home</a> / <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'> / </b:if>
</b:loop>
</b:if> / <a expr:href='data:post.link'><data:post.title/></a></em>

Jika sudah, Simpan Template

Catatan :

Breadcumb tersebut hanya akan terlihat di halaman artikel ( post page ) saja.

Demikian blogger tutorial mengenai Cara Membuat Breadcrumb Di Blogspot.

Semoga bermanfaat dan semoga berhasil

Terima Kasih ^_^

Cara Membuat Breadcrumb Di Blogger

Posted by : Unknown on : With 0komentar

Cara Membuat Efek Salju Di Blog

Diposting oleh Unknown |

Baca selengkapnya »

Pada kesempatan kali ini saya akan memberikan trik dan panduan tentang Cara untuk membuat efek salju pada blogspot.

Cara Membuat Efek Salju Di Blog pada Blogspot

Login pada Blogger
Setelah berada di Dashbore
Masuk mode Rancangan
Pada Elemen Laman, kemudian Tambah Gadget
Pilih HTML/JavaScript
Masukan kode berikut

<script type="text/javascript" src="http://ahmad-rifai-tools.googlecode.com/files/salju-blog.ahmadrifai.net.js" /></script>
<script type="text/javascript">

snowStorm.snowColor = '#99ccff'; // salju biru muda (silakan ganti dengan warna lain)
snowStorm.flakesMaxActive = 96;
snowStorm.useTwinkleEffect = true;
</script>

Catatan :

Cara bikin efek salju menggunakan script efek salju alternatif sama dengan cara yang sudah saya tuliskan di atas, yaitu dipasang pada widget blog.
snowStorm.snowColor = ‘#99ccff’; = adalah warna salju, silahkan ganti kode #99ccff untuk merubah warna efek salju dengan warna yang kamu suka.
Jika sudah selesai, Simpan

Demikian blogger tutorial mengenai Cara Membuat Efek Salju Di Blogspot..

Semoga bermanfaat dan semoga berhasil

Terima Kasih ^_^

Cara Membuat Efek Salju Di Blog

Posted by : Unknown on : With 0komentar

Cara Membuat Tulisan Berjalan Di Address Bar

Diposting oleh Unknown |

Baca selengkapnya »

Pada kesempatan kali ini saya akan memberikan trik dan panduan tentang Cara untuk membuat tulisan berjalan di address bar ( maksudnya tulisan berjalannya terlihat di atas kotak untuk menuliskan alamat website ).

Cara Membuat Tulisan Berjalan Di Address Bar pada Blogspot

Login pada Blogger
Setelah berada di Dashbore
Masuk mode Rancangan
Kemudian Edit HTML
Cari kode </head>
Jika sudah ketemu, letakan kode berikut dibawah kode tadi

Keterangan :

Silahkan ganti tulisan berwarna biru dengan tulisan yang anda inginkan, nanti tulisan itulah yang akan terlihat berjalan di address bar.
Sebelum pengaturannya di simpan, sebaiknya di preview dulu.
Jika sudah berhasil, Simpan Template

Demikian blogger tutorial mengenai Cara Membuat Tulisan Berjalan Di Address Bar.

Semoga bermanfaat dan semoga berhasil

Terima Kasih ^_^

Cara Membuat Tulisan Berjalan Di Address Bar

Posted by : Unknown on : With 0komentar

Membuat Kolom Postingan Terpisah

Diposting oleh Unknown | Sabtu, 22 Februari 2014

Baca selengkapnya »

Postingan di blog adalah sebuah keharusan, apa jadinya apabila blog tidak ada postingan? mungkin terlihat aneh sekali dan mempercantik daerah postingan atau yang biasa di sebut kolom post adalah sebuah keindahan tersendiri bagi saya agar pengunjung yang datang menjadi lebih nyaman dan betah untuk membacanya .Disini saya akan membahas Bagaimana membuat kolom post menjadi terpisah-pisah.
Maksud dari tema di atas yaitu seperti gambar di bawah ini.

Bagaimana sudah jelas bukan tentang kolom postingan terpisah? kalau sudah jelas mari kita lihat langkah-langkah pembuatannya

Login ke blogger
masuk ke Tata Letak => Edit HTML
lalu cari kode di bawah ini

.post
titik-titik di atas menunjukan ada kode yang terdapat di dalamnya kenapa saya tidak menunjukan-nya? karena setiap template kode yang dimaksud berbeda-beda
setelah ketemu ganti dengan kode di bawah ini

.post {
background:#fff url(http://oketrik.googlecode.com/files/r.jpg) repeat-x bottom;
border:5px solid #000;
margin:0 0 0.5em;
padding:0.5em;
color:#000;
font-family:"Trebuchet MS";
-moz-border-radius-topleft: 20px;
}

Penjelasan :
- fff : menunjukan warna latar belakang dari kolom postingan, sobat bisa menggantinya dengan kode warna yang lain
- http://oketrik.googlecode.com/files/r.jpg : menunjukan gambar yang berada di bawah kolom postingan, sobat juga dapat menggantinya tapi dengan ukuran yang kecil
- 000 : menunjukan dari warna garis pada kolom postingan terpisah, sobat bisa ganti akan tetapi harus di sesuaikan dengan warna main-wrapper agar terlihat terpisah
- 000 : warna dari tulisan pada klolom postingan, sobat dapat mengganti dengan warna yang berlawanan dengan warna latar belakang agar terlihat jelas
Setelah itu sobat dapat menyimpannya dan melihat hasilnya

Dengan modifikasi tampilan Kolom Postingan memungkinkan pengunjung blog sobat dapat menikmati dan mendalami postingan yang sobat tulis. Mungkin trik ini sebagian kecil dari Blogger hack yang ada di blog oketrik ini. Hanya sekian saja yang bisa saya sampaikan kurang lebih-nya saya minta maaf apabila ada kesalahan maklum saya seorang manusia yang tidak luput dari kesalahan . Terima kasih dan Happy Blogging.

Membuat Kolom Postingan Terpisah

Posted by : Unknown on :Sabtu, 22 Februari 2014 With 0komentar

CARA MUDAH MEMBUAT READ MORE OTOMATIS DI BLOG

Diposting oleh Unknown |

Baca selengkapnya »

Cara Mudah Membuat Read More Otomatis di Blog – banyak para blogger yang masih kebingungan untuk membuat readmore secara otomatis di blog mereka, walaupun banyak sekali artikel-artikel yang mebahas bagaimana cara membuat readmore otomatis. Hal ini disebabkan karena banyaknya artikel yang copas padahal si pemilik blog sendiri tidak faham dengan caranya. Disini saya akan menjelaskan cara membuat readmore otomatis secara detail sehingga blogger pemula sekalipun bisa membuatnya.

Ngomong-ngomong mungkin blogger pemula atau newbie masih bingung apa itu readmore?. Read more adalah penggalan dalam sebuah artikel, biasanya hanya menampilkan beberapa kalimat saja dan biasanya di tandai dengan kata “READ MORE”, “BACA SELENGKAPNYA”, ” LANJUTKAN MEMBACA”, dll.

Manfaat readmore juga untuk mempersingkat atau merapihkan artikel yang panjang, jadi postingan artikel anda akan tersusun rapi dengan hanya menampilkan gambar dan beberapa kalimat saja.

Untuk demonya silahkan klik link dibawah ini.

CONTOH READ MORE

Cara membuat readmore otomatis dengan gambar

Silahkan buka template anda. Pilih: TEMPLATE >> EDIT.
Cari Kode </head>.
Copy paste kode dibawah ini tepat di atas kode </head>

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style>
.post-body{text-align:justify;}
.post-body img{max-width:none;width:auto;}
.read-more{float:left; padding-top: 10px;}
.read-more a{ color: #fff!important;text-shadow:0 1px 0 rgba(0,0,0,0.5);background:#0457A9; text-decoration:none;font:bold 13px Arial;padding:5px;}
.read-more a:hover{text-decoration:none;background:#666;}
.pic{border: 10px solid #fff;float:left;height:165px;width:250px;margin-right: 20px;margin-bottom:10px;overflow:hidden;box-shadow: 5px 5px 5px #111;}
.grow img{height:165px;width:250px;transition: all 2s ease;}
.grow img:hover{width:400px;height:250px;}
</style>
<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes -dengan gambar, no -tanpa gambar
summary_noimg = 300; //banyaknya huruf jika tidak ada gambar
summary_img = 250; //banyaknya huruf jika ada gambar
img_thumb_height = 165;
img_thumb_width = 250;
</script>
<script type='text/javascript'>//<![CDATA[
function removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){var s = strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);}}strx = s.join("");}chop = (chop < strx.length-1) ? chop : strx.length-2;while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;strx = strx.substring(0,chop-1);return strx+'...';}function createSummaryAndThumb(pID){var div = document.getElementById(pID);var imgtag = "";var img = div.getElementsByTagName("img");var summ = summary_noimg;if(thumbnail_mode == "yes"){if(img.length>=1){imgtag = '<div class="grow pic"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></div>';summ = summary_img;}}var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';div.innerHTML = summary;}
//]]></script>
</b:if>
</b:if>

Save Template anda.
Kemudian scroll template anda kebawah cari kode seperti berikut:

Ket: Kata kuncinya adalah didalam kotak hitam "BLOG POSTS / POSTINGAN BLOG" jika anda menggunakan bahasa indonesia.

Jika suda menemukan kode seperti gambar di atas silahkan klik anda panah kecil warna hitam sebelah kiri.
Setelah tanda panah kecil di klik maka akan ada tampilan seprti gambar berikut

Cari kode yang di tandai dengan kotak hitam. "POST' VAR='POST'".
Setelah ketemu klik tanda panah yang lurus dengan kode tersebut.
selanjutnya akan terbuka kode kode yang lain.
geser atau scrol ke bawah dan cari kode

<data:post.body/>

Setelah ketemu hapus kode diatas dan ganti dengan kode dibawah ini:

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>");
</script>
      <div class='read-more'>
      <a expr:href='data:post.url'>Baca Selengkapnya »</a>
      </div>
</b:if>
</b:if>

Klik SAVE / SIMPAN dan lihat hasilnya.

Terlihat seperti sulit tetapi jika sambil di praktekan pasti bisa karena ini sudah sangat detail, jika saya menjelaskan dengan singkat mungkin para blogger pemula tidak akan mengerti atau kesusahan membuatnya.

sekian dulu sari saya untuk cara membuat readmore semoga bermanfaat. ^_^