Thursday, 5 September 2013

Auto Read More Posting Blog

Auto readmore tidak menggunakan javascript untuk Blogger

Blogger readmore tetapi memiliki kerajinan cantik, dengan banyak posting blog telah dibuat, readmore untuk setiap posting sangat keras dan sering datang dengan auto readmore blogger javascript. Auto readmore javascript untuk menampilkan hanya sebagian artikel melalui fungsi document.write , isi artikel masih download peramban. Kelemahan dari tidak ramah dengan mesin pencari dan alat terjemahan online, selain artikel panjang tanpa menambahkan readmore pengguna Blogger akan mendapatkan error gratis paging pagination oleh Blogger. Trik Auto Anda readmore memperkenalkan seluruhnya berikut baru, tapi tidak menggunakan javascript untuk menggunakan pernyataan yang disediakan oleh blogger. Ini akan meningkatkan kecepatan Anda ketika browsing indeks halaman blog-gaya, arsip jadi hanya men-download kutipan dari isi artikel.

Langkah-langkahnya adalah:

Langkah 1: Tambahkan kelas untuk menampilkan post-thumbnail. Ada 2 jenis gambar yang ditampilkan di sebelah kiri atau kanan.

1. Menampilkan gambar di sebelah kiri:

Tambahkan kode berikut di dalam kartu ]]></b:skin> :

  . Pasca thumbnail {float: left; margin-right: 20px}

2. Menampilkan gambar di sebelah kanan:

Tambahkan kode berikut di dalam kartu ]]></b:skin> :

  . Pasca thumbnail {float: right; margin-left: 20px}

Langkah 2: Kode Tambah auto readmore. Ada 4 jenis untuk memilih readmore otomatis.

1. Auto readmore dengan foto:

Ganti <data:post.body/> dengan kode berikut:

  <b:if cond='data:blog.pageType != "item"'>
  <b:if cond='data:blog.pageType != "static_page"'>
   <div>
    <b:if cond='data:post.thumbnailUrl'>
     <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
    </ B: if>
    <data:post.snippet/>
   </ Div>
   <div class='jump-link'>
    <a expr:href='data:post.url' expr:title='data:post.title'> <data:post.jumpText/> </ a>
   </ Div>
  <b:else/>
   <data:post.body/>
  </ B: if>
 <b:else/>
  <data:post.body/>
 </ B: if>

2. Auto readmore dengan gambar dan menampilkan gambar default untuk posting ada gambar:

Ganti <data:post.body/> dengan kode berikut:

  <b:if cond='data:blog.pageType != "item"'>
  <b:if cond='data:blog.pageType != "static_page"'>
   <div>
    <b:if cond='data:post.thumbnailUrl'>
     <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
    <b:else/>
     <Img class = 'post-thumbnail' alt = 'tidak ada gambar' src = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRK-EIrAxa_kFMwInJsscssRG4Z4wg3YRqZ3_iVU33LFD1Njq5inNlqp9mXW9iT9KSCErQ0Xw-omzXbWT_YuGo5YSuEMSMbzyjNBV7WD6HLC_3ygIiHE1Y11EpH6NkZHU-OlA63roeq5fu/' lebar height = '72px ' '72px = '/>
    </ B: if>
    <data:post.snippet/>
   </ Div>
   <div class='jump-link'>
    <a expr:href='data:post.url' expr:title='data:post.title'> <data:post.jumpText/> </ a>
   </ Div>
  <b:else/>
   <data:post.body/>
  </ B: if>
 <b:else/>
  <data:post.body/>
 </ B: if>

3. Auto readmore dengan gambar. Tidak readmore dengan artikel terbaru:

Ganti <data:post.body/> dengan kode berikut:

  <b:if cond='data:blog.pageType != "item"'>
  <b:if cond='data:blog.pageType != "static_page"'>
   <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <b:if cond='data:post.isFirstPost == "true"'>
     <data:post.body/>
      <b:if cond='data:post.hasJumpLink'>
       <div class='jump-link'>
        <a expr:href='data:post.url + "#more"' expr:title='data:post.title'> <data:post.jumpText/> </ a>  
       </ Div>
      </ B: if>
    <b:else/>
     <div>
      <b:if cond='data:post.thumbnailUrl'>
       <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
      </ B: if>
      <data:post.snippet/>
     </ Div>
     <div class='jump-link'>
      <a expr:href='data:post.url' expr:title='data:post.title'> <data:post.jumpText/> </ a>
     </ Div>
    </ B: if>
   <b:else/>
    <div>
     <b:if cond='data:post.thumbnailUrl'>
      <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
     </ B: if>
     <data:post.snippet/>
    </ Div>
    <div class='jump-link'>
     <a expr:href='data:post.url' expr:title='data:post.title'> <data:post.jumpText/> </ a>
    </ Div>
   </ B: if>
  <b:else/>
   <data:post.body/>
  </ B: if>
 <b:else/>
  <data:post.body/>
 </ B: if>

4. Auto readmore dengan gambar dan menampilkan gambar default untuk posting ada gambar. Tidak readmore dengan artikel terbaru:

Ganti <data:post.body/> dengan kode berikut:

  <b:if cond='data:blog.pageType != "item"'>
  <b:if cond='data:blog.pageType != "static_page"'>
   <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <b:if cond='data:post.isFirstPost == "true"'>
     <data:post.body/>
      <b:if cond='data:post.hasJumpLink'>
       <div class='jump-link'>
        <a expr:href='data:post.url + "#more"' expr:title='data:post.title'> <data:post.jumpText/> </ a>  
       </ Div>
      </ B: if>
    <b:else/>
     <div>
      <b:if cond='data:post.thumbnailUrl'>
       <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
      <b:else/>
       <Img class = 'post-thumbnail' alt = 'tidak ada gambar' src = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRK-EIrAxa_kFMwInJsscssRG4Z4wg3YRqZ3_iVU33LFD1Njq5inNlqp9mXW9iT9KSCErQ0Xw-omzXbWT_YuGo5YSuEMSMbzyjNBV7WD6HLC_3ygIiHE1Y11EpH6NkZHU-OlA63roeq5fu/' lebar height = '72px ' '72px = '/>
      </ B: if>
      <data:post.snippet/>
     </ Div>
     <div class='jump-link'>
      <a expr:href='data:post.url' expr:title='data:post.title'> <data:post.jumpText/> </ a>
     </ Div>
    </ B: if>
   <b:else/>
    <div>
     <b:if cond='data:post.thumbnailUrl'>
      <img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
     <b:else/>
      <Img class = 'post-thumbnail' alt = 'tidak ada gambar' src = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRK-EIrAxa_kFMwInJsscssRG4Z4wg3YRqZ3_iVU33LFD1Njq5inNlqp9mXW9iT9KSCErQ0Xw-omzXbWT_YuGo5YSuEMSMbzyjNBV7WD6HLC_3ygIiHE1Y11EpH6NkZHU-OlA63roeq5fu/' lebar height = '72px ' '72px = '/>
     </ B: if>
     <data:post.snippet/>
    </ Div>
    <div class='jump-link'>
     <a expr:href='data:post.url' expr:title='data:post.title'> <data:post.jumpText/> </ a>
    </ Div>
   </ B: if>
  <b:else/>
   <data:post.body/>
  </ B: if>
 <b:else/>
  <data:post.body/>
 </ B: if>

Layar potongan melalui kartu pos <data:post.snippet/> oleh Blogger. Seperti telah disebutkan dalam posting saya sebelumnya hanya kutipan dari Blogger dari 140 karakter (Blogger telah memperbarui jumlah karakter kartu <data:post.snippet/> dalam widget Blog sekarang kurang dari jumlah karakter Kartu <data:post.snippet/> di PopularPosts widget), cukup pendek dan karakter mengganggu memperhatikan karakter ruang yang harus kehilangan beberapa kata menjadi tidak berarti.

Gambar yang diperoleh melalui perintah data:post.thumbnailUrl . Ini adalah jalan pertama pada gambar artikel telah diubah ukurannya Blogger 72x72 piksel dalam ukuran. Memperhatikan bahwa citra artikel harus upload melalui Insert gambar alat Blogger, atau mendapatkan alamat dan gambar dari foto Picasa harus mengatasi s1600 , s800 ... operasi ukuran alat Blogger baru, Sementara gambar baru muncul. Prosedur di atas atribut alt adalah judul artikel untuk gambar, hal ini membantu meningkatkan SEO untuk blog Anda.

Sebelum melakukan prosedur ini, Anda perlu auto readmore hapus auto readmore kode javascript jika Anda menggunakan offline.

Sumber : http://blog.duypham.info/2011/01/auto-readmore-for-blogger-no-javascript.html

DAFTAR ISI

Membuat Image Zoom

Sekarang kita akan belajar cara membuat image zoom. Image zoom biasanya di gunakan pada blog yang berbasis gambar dan lainnya tergantung kreatifitas anda. Sebelumnya, ada baiknya anda lihat contohnya di bawah.

DEMO

Demo 1:

Demo 2:

Demo 3:

Milla Jojovitch

Demo 4:

Angelina Jolie

Sumber :

DAFTAR ISI

Monday, 2 September 2013

multi zoom image

Milla Jojovitch

Sunday, 1 September 2013

Membuat Image Slider Berdasarkan Kategori Tertentu

Gambar slideshow yang sering kita lihat di bawah header atau sering disebut sebagai image slider banyak sekali menghiasi halaman pada sebuah blog. Sekarang ini banyak sekali template blogger yang bagus dan dihiasi dengan berbagai macam slider yang tujuannya untuk memperindah tampilan. Permasalahan yang timbul sekarang adalah kita terkadang malas atau kurang teliti dalam memasukkan satu persatu keterangan dalam slider tersebut, baik itu URL gambar maupun URL post yang dituju. Seperti pada tutorial saya sebelumnya mengenai cara membuat slider gambar ala Yahoo, disitu anda harus memasukkan URL dan keterangan slider satu persatu.

Kali ini saya akan memberikan satu solusi berupa tutorial membuat image slider berdasarkan kategori tertentu, dimana Anda tidak perlu lagi memasukkan satu persatu keterangan dalam slider, jadi Anda tinggal mengganti dengan kategori atau label yang ingin ditampilkan dalam slider, gambarnya seperti diatas dan demonya seperti slider yang ada disini. Baik langsung saja pada cara pemasangannya :

Langkah Pertama

Login ke blogger dengan akun anda
Kemudian klik Tata Letak > pilih Edit HTML centang expand widget templates
Jangan lupa backup dulu template anda dengan mengklik Download Template Lengkap.
Letakkan kode berikut di atas kode ]]></b:skin>

#featured{margin-bottom:8px ;margin-right:8px;}
.sliderwrapper{position: relative;overflow: hidden;height: 240px}
.sliderwrapper .contentdiv{visibility: hidden;position: absolute;left: 0;top: 0;padding: 0px;height: 100%;}
.pagination{text-align: left;padding:8px 0px}
.pagination a{font-size:11px;color:#fff;padding: 3px 6px;background:#1b75d6}
.pagination a:hover, .pagination a.selected{color:#dedde5;background-color:#535352}
.featuredPost{width:360px;padding:10px 10px 0;background:#191919;filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;color:#dedde5;position:absolute;bottom:0}
.featuredPost a{color:#fff}
.featuredPost a:hover{color:#dedde5}
.featuredPost h2{margin:0;font-size:12px;line-height:1}
.featuredPost span{font-size:10px}
.featuredPost p{font-size:11px}

Langkah Kedua

Masih dalam dalam posisi Edit HTML. Sekarang letakkan kode berikut ini di atas kode </head>

<script>
//<![CDATA[
/* Script from:http://www.alizainsyahab.co.cc/ */
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieAhthyjhInWGVnaDFkj1yl4smXpZekV-8eJ5QLRO-QWKj-NEAcN2ufluUkm_g_uRuuoWqy6Z6e-SQRZNMhF0iYsgVBRXnHULwIaqvp2WgwOwgfapiWbADudDy5ZVrkHzIzcugchhpdTLd/s300/no%252Bimage.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 100;

numposts1 = 5;
label1 = "blog tutorial";

function removeHtmlTag(strx,chop){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)}}s=s.join("");s=s.substring(0,chop-1);return s}

function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts1;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split("")[0];break}}

if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent    ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["January","February","March","April","May","Juny","July","August","September","October","November","December"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break;
}}

var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<div class="contentdiv"><div class="sliderPostPhoto"><a href="'+posturl+'"><img width="370" height="240" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"></div></div><div class="featuredPost"><h2><a href="'+posturl+'">'+posttitle+'</a></h2><span>'+daystr+'</span><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';
document.write(trtd);
j++;
}}
//]]>
</script>
Perhatikan kode yang saya beri huruf tebal label1 = "misteri"; itu adalah label atau kategori yang akan ditampilkan di slider, disini saya memilih label misteri. Anda nanti tinggal mengganti dengan label yang diinginkan. Perhatikan juga kode img width="370" height="240" itu adalah lebar dan tinggi slider, silahkan sesuaikan dengan template Anda.
Setelah itu, letakkan kode di bawah ini sebelum kode </body> (letakkan diatasnya saja)

<script src='http://alizainsyahab.googlecode.com/files/contentslider.js'/>
<script>
//<![CDATA[
featuredcontentslider.init({
id: "slider1", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
enablefade: [true, 0.5], //[true/false, fadedegree]
autorotate: [true, 6000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
//]]>
</script>
Langkah terakhir, yaitu untuk memanggil agar slider tersebut tampil di halaman depan anda cari kode <div id='main-wrapper'> jika anda ingin slider tampil di atas main-wrapper seperti pada demo, dan letakkan kode berikut di bawahnya :

<b:if cond='data:blog.pageType == "index"'>
<div id='featured'>
<div class='sliderwrapper' id='slider1'>
<script>
document.write("<script src=\"/feeds/posts/default/-/"+label1+"?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
</script>
</div>
<div class='pagination' id='paginate-slider1'>
</div>
</div>
</b:if>
Langkah terakhir Save/simpan template, membuat slider image berdasarkan kategori tertentu sudah selesai.

Yang perlu diperhatikan disini adalah kode label1 = "misteri" pada langkah kedua point pertama, misteri adalah label yang ditampilkan dalam slider. Anda bisa menggantinya dengan label atau kategori yang diinginkan. Bagi pengguna template Johny Simple Magazine atau Creating Website Modifikasi, bisa langsung dipraktekkan. Sekian tutorial kali ini jika masih ada yang kurang jelas bisa ditanyakan lewat kotak komentar yang ada di bawah. Selamat mencoba dan semoga bermanfaat.

http://www.dynamicdrive.com/dynamicindex17/featuredcontentslider.htm

Sunday, 4 August 2013

Foto Efek Sketsa Pensil

1. Buka photoshopnya. Setelah itu carilah gambar yang akan dijadikan sketsa pensil. Namun kali ini, saya akan menampilkan gambar hewan anjing, Lihat gambar pertama di bawah ini:

2. Setelah gambar pertama tertampilkan, langkah selanjutnya yaitu : Arahkan Mouse anda pada "Layer gambar hewan" dalam hal ini Background

kemudian klik kanan dan pilih "Duplicated Layer". Namakan As: "Doggy 1" tanpa tanda petik

3. Masih tetap di Layer "Doggy 1" buat Gambar menjadi Hitam putih dengan mengKlik Ctrl + Shift + U
Lihat Gambar Kedua ( 2 ) di bawah ini :

4. Setelah gambar berubah menjadi hitam putih, langkah selanjutnya yaitu :

Buatlah duplicated Layer dari "Doggy 1", caranya seperti diatas yaitu klik kanan Layer "Doggy 1" lalu pilih duplicate layer, Lalu beri nama As: "Doggy 2"
Nah sekarang kita punya layer bernama Doggy 2 - klik Ctrl + i maka gambar di Doggy 2 akan berubah menjadi gambar film
Previewnya :

5. Setelah Gambar Ketiga ( 3 ) kita dapatkan.
Selanjutnya yaitu MengBLUR Layer "Doggy 2" dengan cara Arahkan mouse Pada Filter > Blur > Gaussian Blur maka akan keluar jendela pop_up Gaussian blurnya,
setelah itu pada “Radius Pixel” berilah nilai Radius sebesar “5.0” intinya semakin Blur semakin baik cuma harus disesuaikan jangan terlalu Over Blur
kemudian Klik Ok.
Dan lihatlah hasil gambar keempat ( 4 ) di bawah ini :

6. Pada gambar keempat ( 4) jika diperhatikan, gambar tersebut tampak Tidak jelas atau juga memudar.
Namun dari gambar tersebutlah yang Menjadikan gambar lebih jelas setelah terjadinya perpindahan warna.
Oleh sebab itu, untuk langkah terakhirnya yaitu : Pada Layer "Doggy 2" Set Blending modenya ke "Color Dodge" lihat gambar di bawah ini :

Keterangan
Pada gambar disamping ini, ubahlah nama “Normal” menjadi “Color Dodge”

Setelah anda mengubah Mode “Normal” menjadi “Color Dodge” maka, gambar secara langsung akan berubah menjadi sketsa warna pensil, lihat hasil gambar penyelesaiannya di bawah ini :

Perubahan menjadi goresan Pencil

:::Sampai disini dulu tutorial kami, semoga tutorial ini. dapat menambah pengetahuan anda semua dan kami tidak bertanggung jawab atas penyalahgunaannya dan Semoga anda mendapatkan segala manfaat dan kebutuhan anda:::
Selamat belajar Photoshop

Semoga Bermanfaat... ^_^

Sumber : http://www.ilmugrafis.com/photoshop_foto1.php?page=merubah-foto-berwarna-menjadi-sketsa-warna-pensil

Tuesday, 30 April 2013

Beban

Ia mengangkat segelas air lalu bertanya pada hadirin, "menurut kalian berapa berat segelas air ini?" Kemudian ia melanjutkan, "Sebenarnya berat gelas itu tergantung pada seberapa lama kalian mengangkatnya. Kalau aku mengangkatnya selama satu menit, maka aku akan baik - baik saja. Kalau aku mengangkatnya selama satu jam, maka tangan kananku akan terasa pegal. Tetapi kalau aku mengangkatnya selama satu hari, kalian akan terpaksa harus memanggilkan ambulan untukku. Sesungguhnya beban yang kita angkat sama, tapi semakin lama kita mengangkatnya akan terasa semakin berat.

Apabila kita setiap waktu mengangkat beban kita, kita tidak akan dapat bertahan, karena beban itu semakin lama akan terasa semakin berat."
Ia melanjutkan, "Apa yang harus kita lakukan adalah, letakkan gelas itu, beristirahatlah sejenak sebelum mengangkatnya lagi."
Kita harus meletakkan beban kita dari waktu ke waktu, agar tubuh kita segar kembali dan mampu menanggung beban itu. Bila kau pulang ke rumah setelah bekerja, tinggalkanlah beban kerja, jangan kau bawa ke rumah. Kau dapat mengangkatnya kembali esok, sementara itu istirahat dan santailah dahulu.
Hidup ini harus dijalani hari demi hari, tidak bisa dirangkap sekaligus.
(Author Unknown)

Sunday, 28 April 2013

Kaca mata nenek

Dua anak kecil berbicara tentang kacamata. "Bukankah kau benci memakai kacamata?" tanya seorang anak.
"Tidak," jawab anak yang lain. "Asalkan kacamata itu adalah jenis kacamata yang di kenakan oleh nenekku! Ibuku bilang nenek selalu bisa melihat bila seseorang itu sedang lelah, kecil hati, atau sedih. Dia bisa melihat bila seseorang membutuhkan pertolongan, dia juga bisa mengetahui bila kau memiliki persoalan yang hendak kau utarakan. Tapi yang paling baik, kata mama, nenek selalu dapat melihat kebaikan yang ada pada diri setiap orang.

Anak itu melanjutkan, "suatu hari aku bertanya kepada nenek, bagaimana dia bisa melihat semua itu. Dia berkata, mungkin sampai seusia ini ia telah banyak belajar melihat. Tapi aku yakin, itu pasti karena kacamatanya."
(Alangkah baiknya bila setiap orang dari kita dapat melihat orang lain dari kaca mata nenek anak tersebut! )
(Pengarang tak dikenal)

Ali Syahab