SYKC.blog: Trick and Tips Blog

Home
Profil

Tampilkan postingan dengan label Trick and Tips Blog. Tampilkan semua postingan

Kamis, Juni 19, 2014

Cara Membuat Email dengan GMAIL

7:59:00 PM

Unknown

1. Silahkan kunjungi situs Gmail di url ini http://www.gmail.com
2. Silahkan klik tombol Buat Akun di pojok kanan atas yang berwarna merah

3. Silahkan lengkapi formulir pendaftaran berikut ini

4. Nanti anda akan memperoleh sms dari pihak Google terkait dengan verifikasi akun

5. Setelah anda menerima kode verifikasi via sms, silahkan masukkan kode verifikasi sms ke kotak verifikasi yang sudah disediakan dalam pendaftaran Gmail

6. Selamat!!! Anda sudah berhasil membuat akun Google. Kini anda bisa memanfaatkan fasilitas gratis dari Google baik itu untuk Email, Ngeblog, Share video di Youtube dan masih banyak lagi. Selamat menikmati fasilitas gratis ya!

Sumber : Klik aja

Kamis, November 01, 2012

Membuat Slick Tab View / Jquery Tab View Widget

3:37:00 PM

Unknown

Halo semua sobat SYKC dimana pun berada kali ini saya akan membahas tentang Membuat tab view biasa dan tab view menggunakan jquery memang tidak jauh berbeda,hanya saja ada penambahan beberapa kode javascript untuk menghasilkan efek menggulung atau istilah kerennya Membuat Slick Tab View / Jquery Tab View Scroll Show Hide Widget.

Yup,tab view yang diciptakan dapat menyembunyikan widget pada sidebar,ini sangat bermanfaat sekali untuk menambah tampilan blogger agar lebih menarik dan akan terkesan rapi nantinya.

Langkah membuatnya sangat mudah sob,tinggal ikuti aja langkah-langkah dibawah ini ya

Langkah Cara Membuat jQuery Slick Tab pada Blogger

Langkahnya sangat sederhana,agan pilih Dashboard lalu pilih Tata Letak / Rancangan
(1) kemudian pilih tab Edit HTML
(2),lalu seperti biasa contreng tulisan Exspand Widget Templates

Nah,selanjutnya cari kode ]]></b:skin> (gunakan Ctrl+F di keyboard sob),setelah ketemu tinggal letakkan kode CSS berikut tepat diatas kode ]]></b:skin> tersebut.

#slick_area {
border:0px solid #585858;
background-color:#ffffff;
padding:8px;
margin:10px 0;
line-height:18px;
}
#slick_area a{
color:#ffffff;
text-decoration:none;
}
.slick_area a:hover{
color:#FF0000;
}
ul.slick {
margin:2px 5px 8px 0;
padding:0px;
}
ul.slick li {
list-style:none;
display:inline;
background-color:#ffffff;
padding:5px 14px;
text-decoration:none;
font-size:10px;
font-weight:bold;
text-transform:uppercase;
cursor:pointer;
border:0px solid #585858;
}
ul.slick li:hover {
color:#red;
}
ul.slick li.active {
background-color:#ffffff;
border:1px solid #585858;
color:#222222;
}
.content-slick {
background-color:#ffffff;
border:0px solid #585858;
color:#222222;
min-height:40px;
padding:7px 13px 5px;
text-align:left;
}
.content-slick ul {
margin:20px;
padding:0;
}
.content-slick ul li {
list-style:none;
border-bottom:1px solid #222222;
padding:1px;
}
.content-slick ul li:last-child {
border-bottom:none;
}
.content-slick ul li:hover, .content-slick ul li a:hover {
display:block;
background-color:#ffffff;
}
.content-slick ul li a {
text-decoration:none;
color:black;
display:block;
}

Setelah itu,carilah kode </head>,setelah ketemu tepat diatasnya letakkan kode javascript dan jQuery berikut:

<script language='javascript' src='https://sites.google.com/site/pujiantoroinc/Home/jquery-1.3.2.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function(){ $('#tabdua, #tabtiga').hide(); $("ul.slick li").click(function () { $(".active").removeClass("active"); $(this).addClass("active"); $(".content-slick").slideUp(); var content_show = $(this).attr("title"); $("#"+content_show).slideDown(); }); }); </script>

(3). Lalu simpan templates sobat ya.

Nah,untuk menampilkannya pada widget coba pilih Tata Letak / Rancangan ,dan klik tulisan Add New Widget atau Tambah Gadget,

Selanjutnya pilih HTML/Javascript kemudian letakkan kode berikut:

<ul class="slick"> <li title="tabsatu" class="slick active">Tab Satu Gan</li> <li title="tabdua" class="slick active">Tab Dua Gan</li> <li title="tabtiga" class="slick">Tab Tiga Gan</li> </ul> <div id="tabsatu" class="content-slick"> Letakkan kode HTML/Javascript anda di Tab Satu </div> <div id="tabdua" class="content-slick"> Letakkan kode HTML/Javascript anda di Tab Dua </div> <div id="tabtiga" class="content-slick"> Letakkan kode HTML/Javascript anda di Tab Tiga </div>

Setelah itu simpan dan sobat sekarang dah punya slick tab view widget yang dapat dijadikan alternative buat ngehemat tempat ,semoga berhasil and selamat ngulik kodenya ya :D

ket: kode bercetak tebal hijau gantilah atau isilah dengan widget yang sobat inginkan,bisa kode iklan,alexa widget,maupun kode HTML/Javascript yang lain.

Minggu, Oktober 28, 2012

Sexy Social Bookmarks

9:50:00 AM

Unknown

Halo Sobat SYKC. Dalam posting kali ini saya akan menghadirkan tutorial yang berjenis Share atau bisa disebut juga Social Bookmark dan kode dalam tutorial ini menggunakan jQuery dan nama dari pada posting kali ini adalah Sexy Social Bookmarks , berikut cara penerapannya.
Preview:

Login ke bloger.
Masuk ke "Rancangan - Edit HTML"
Cheklist "Expand Template Widget"
- Cari kode </head> dan pastekan code di bawah ini.
- Setelah selesai lanjut cari kode <data:post.body/> dan pastekan code di bawah ini.

Search Box Dengan CSS 3 - Apple.com Style

8:30:00 AM

Unknown

Search Box Dengan CSS 3 - Apple.com Style. Mungkin sobat pengguna produk Apple?, jika iya mungkin sudah tidak asing dengan model search box seperti ini, karena search box model ini ciri khas dari Apple.
Tidak hanya pada produk Apple yang ada model search seperti ini, dalam situs resminya Apple.com juga menggunakan search ini, memang search model ini lebih bagus karena menggunakan script CSS 3 dan lebih enak dipandang. Refrensi saya ambil dari BloggerMint Untuk Demonya bisa lihat disini

Search Box Dengan CSS 3 - Apple.com Style

Langkah 1Login ke Blogger
Masuk ke "Rancangan - Edit HTML"
Cheklist "Expand Template Widget"
Langkah 2Cari kode ]]></b:skin> dan letakkan kode dibawah ini diatasnya menurut style yang sobat inginkan

Style Seacrh Box Dark

#search {
}
#search input[type="text"] {
background: url(http://www.bloggermint.com/demos/css3searchbox/search-dark.png) no-repeat 10px 6px #444;
border: 0 none;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #777;
width: 150px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#search input[type="text"]:focus {
width: 200px;
}

Style Search Box White

#search {
}
#search input[type="text"] {
background: url(http://www.bloggermint.com/demos/css3searchbox/search-white.png) no-repeat 10px 6px #fcfcfc;
border: 1px solid #d1d1d1;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #bebebe;
width: 150px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#search input[type="text"]:focus {
width: 200px;
}

Style Search Box Black White

#search {
}
#search input[type="text"] {
background: url(http://www.bloggermint.com/demos/css3searchbox/search-white.png) no-repeat 10px 6px #444;
border: 0 none;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #d7d7d7;
width:150px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#search input[type="text"]:focus {
background: url(http://www.bloggermint.com/demos/css3searchbox/search-dark.png) no-repeat 10px 6px #fcfcfc;
color: #6a6f75;
width: 200px;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}

Kemudian klik Simpan Template

Langkah 3 Masuk ke "Tata Letak - Elemen Laman"
Klik "Tambah Gadget" baru dengan Type "HTML/JavaScript"
Masukan (copypaste) kode dibawah ini pada bagian kolom:

Langkah 4
Klik Save

Article Information:
Thanks to: BloggerMint.com
Semoga bermanfaat, selamat mencoba dan semoga berhasil sobat

Cara Merubah Link Pada Blog Mengeluarkan Bayangan

7:35:00 AM

Unknown

Hay sobat bertemu lagi dengan saya,,... hehe... saya mau share nih cara membuat link berefek shadow pada blog seperti yang saya gunakan pada waktu saat ini,.cukup menarik sih bisa membuat pengunjung blog semakin tertarik dengan blog kita karena efek yang di hasilkannya cukup menarik,.. Langsung saja,,
Saya kasih caranya :

Login Ke Akun Blog Sobat
Pilih Rancangan /Tata Letak --> Edit HTML

Kemudian Sobat Tambahkan Atau Sisipkan CSS Berikut Ini Tepat Di Samping Kode a:hover{ yg Berdekatan Dengan a:visited{ dan a:link{

text-shadow: 0 0 2px #ccc, 0 -5px 4px #ff3, 2px -6px 6px #fd3, -2px -8px 9px #f40, 2px -10px 10px #f10;

4.Simpan Templatenya Dan Lihat Hasilnya

Selamat mencoba ^_^

Minggu, Oktober 21, 2012

Membuat Popular Post Animasi Dengan Gambar Berputar

6:56:00 AM

Unknown

Halo sobat SYKC. kali ini saya akan membahas tentang menghias blog yaitu membuat popular post berputar. Untuk membuat popular post dengan animasi gambar berputar, kita menggabungkan antara popular post default bawaan blogger dengan menambahkan kode CSS3 didalamnya. Widget popular post ini tidak memberatkan loading blog, karena tambahan kode berupa CSS3 bukan javascript, sebagai ilustrasi tampilan popular post,

Tahap Pertama : Cara Membuat Animasi Popular Post dengan Gambar Berputar

Masuk akun Blogger - design/Rancangan - Add Gadget dan pilih Popular Post seperti gambar di atas.
Setiap widget default blogger akan langsung memberi nama pada widget tersebut, misalnya "Popular Posts". Kalian bisa menggantinya dengan nama lain sesuai dengan keingginan.
Dalam menu Popular Post kalian ceklist image thumbnail, untuk snippet tidak perlu
Jumlah popular Post yang ingin ditampilkan, kalian isi dengan yang diinginkan
Save

Tahap Kedua : Cara Membuat Animasi Popular Post dengan Gambar Berputar

Masuk menu Design/Rancangan - Edit HTML, dalam peng-editan ini tidak perlu men-ceklist Expand Widget Template
Kemudian cari kode ]]></b:skin> dan tempatkan kode CSS dibawah ini di atasnya

.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);
}

Selanjutnya cari kode <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>
Dan ganti semua kode tersebut dengan kode kode dibawah ini :

<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"'>  <a expr:href='data:post.href'><data:post.title/></a> <b:else/>  <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"'>  <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' expr:width='data:thumbnailSize' src='http://www.prismestate.com/images/noimages.png'/> </b:if> </a> </div> </div> <b:else/>  <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>

Save template sobat. Semoga berguna terima kasih.

Minggu, Oktober 07, 2012

Cara Membuat Navigasi Breadcrumb di Blogspot

9:36:00 AM

Unknown

Navigasi Breadcrumb dapat membuat blog kita lebih SEO Friendly, karena akan mempermudah search engine menemukan artikel-artikel kita. Tidak hanya itu dengan adanya Navigasi Breadcrumb maka pembaca dapat dengan mudah melihat posisi artikel yang dibaca serta mencari artikel dalam satu kategori.

Cara memasang breadcrumb navigation sebagai berikut :

Login ke akun Blogger sobat
Klik Tata Letak
Pilih tab Edit HTML
Download Full Template untuk jaga-jaga bila terjadi kesalahan
Kemudian beri tanda centang Expand Template Widget
Silahkan cari kode ]]></b:skin>
Copy lalu paste kode di bawah ini persis di atas kode ]]></b:skin>

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

Kemudian cari kode berikut pada template sobat :

Lalu pasang kode dibawah ini persis di bawah kode

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>

Browse » <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>
» <span><data:post.title/></span>
</b:loop>
</b:if>
</b:loop>

</div>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumbs'>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</div>
</b:if>
<b:else/>
<b:if cond='data:navMessage'>
<div class='breadcrumbs'>
<data:navMessage/>
</div>
</b:if>
</b:if>

Kemudian Save template

Tunggu beberapa saat sampai template sobat tersimpan. Setelah selesai lihat pada postingan sobat tepatnya di atas judul artikel untuk menentukan berhasil tidaknya sobat memasang Navigasi Breadcrume. Good Luck!

Cara Membuat Auto Refresh/Reload Otomatis Untuk Blogspot

9:24:00 AM

Unknown

Cara Membuat Auto Refresh Untuk Blogspot - Kali ini saya akan posting tentang cara membuat auto refresh untuk blogspot. sobat pasti sudah tahu tentunya apa yang dimaksud dengan auto-refresh, ya betul...

yaitu me-load halaman blog berulang-ulang sesuai dengan waktu yang di tentukan oleh pemilik blog. Tidak usah basa-basi lagi, langsung aja dipraktekan cara membuat auto refresh untuk blogspot.

Cara Membuat Auto Refresh Untuk Blogspot :

Login ke Blogger
Pilih Design > Edit HTML
Cari kode </head>
Letakan kode dibawah ini setelah kode </head>
<meta content='200' http-equiv='refresh'/>

Keterangan : Yang berwarna merah berarti blog sobat akan me-refresh setiap 200 detik. Bisa diganti sesuai dengan keinginan sobat. Sekian posting saya kali ini, semoga bermanfaat buat sobat blogger semua.

Cara Menghilangkan Garis Bawah Pada Link

9:18:00 AM

Unknown

Pernah ada salah satu seorang sobat blogger yang mengirimkan pesan ke facebook saya, dia ini menanyakan cara menghilangkan garis bawah link yang ada pada setiap link. Garis bawah ini menurut beliau sangat mengganggu keindahan tulisan-tulisannya. Memang seperti kata-kata saya terdahulu, lain orang lain keinginan, untuk urusan link pun ada yang suka memakai garis bawah dan ada juga yang tidak suka akan garis bawah tersebut.

Menurut kebiasan yang berlaku, sebuah tulisan yang berbentuk link biasanya memang mempunyai garis bawah, akan tetapi sebenarnya garis bawah tersebut bisa di hilangkan apabila kita mau. Bagaimana cara menghilangkan garis bawah pada link? untuk menghilangkannya sobat perlu merubah beberapa kode yang ada pada style sheet CSS, kode tersebut biasanya seperti ini :

a:link {
color:#58a;
text-decoration:underline;
}

a:hover {
color:#c60;
text-decoration:underline;
}

a:visited {
color:#969;
text-decoration:underline;
}

Bagaimanakah cara menghilangkan garis bawahnya? nah, sobat hanya tinggal mengganti kata underline menjadi none. Jika sudah, lihat hasilnya...

Sekian postingan saya kali ini tentang cara menghilangkan garis bawah link. semoga dapat bermanfaat bagi sobat.

Cara Menambahkan 3 Kolom di Footer

9:11:00 AM

Unknown

Maaf buat sobat SYKC. udah lama gak posting lagi tapi kali ini saya akan berbagi ilmu tentang memberi 3 kolom pada Footer. Sebenernya apa itu Footer ??? footer adalah bagian template yang paling bawah dinamakan footer biasanya berisi : copyright, design by, dll.Dengan Cara Menambahkan 3 Kolom Di Footer kita mempunyai banyak pilihan untuk meletakkan widget jadi tidak harus selalu di sidebar .

berikut caranya Cara Menambahkan Footer 3 Kolom :

Login Blogger dulu
Pilih Rancangan
Pilih Edit HTML ( backup template blog anda terlebih dahulu barangkali terjadi kesalahan )
Cari Kode ]]></b:skin> Copy kode di bawab ini di atas kode ]]></b:skin>

#footer-bottom {
width: 900px;background:#fff;
position: relative;display:inline;
clear:both;
margin:0 auto 0;
color:#000;
float: left;
padding:10px;
}
#left-bottom {
width: 270px;
float: left;display:inline;
margin:10px 5px 0 5px;
padding:5px
}
#center-bottom {
width: 280px;
float: left;
margin:10px 5px 0;
padding:5px
}
#right-bottom{
width: 270px;
float: left;display:inline;
margin:10px 5px 0;
padding:5px
}

Langkah selanjutnya cari kode <div id='footer'>
Kemudian copy kode di bawah ini tepat di atas kode <div id='footer'>

<div id='footer-bottom'>
<b:section class='footer-bottom' id='left-bottom' preferred='yes' showaddelement='yes'>
</b:section>

<b:section class='footer-bottom' id='center-bottom' preferred='yes' showaddelement='yes'>
</b:section>

<b:section class='footer-bottom' id='right-bottom' preferred='yes' showaddelement='yes'>
</b:section>
</div>

Save Template Sobat. Semoga sukses

Keterangan :

Kode berwarna biru adalah kode masing masing lebar (Pengaturan Lebar)
Kode yang berwarna hijau adalah warna background pada footer yang di hasilkan

Minggu, September 16, 2012

Membuat Slideshow Gambar Berita di Blog

8:10:00 PM

Unknown

Apa sih slide show image itu? yaitu sebuah widget yang dapat menampilkan image/gambar secara random. Dimana akan berganti-ganti tergantung dari jumlah gambar dan informasi yang di masukan ke dalamnya.

Jika anda berkunjung ke detik.com, Kompas, ataupun Okezone. Pastinya anda pernah menjumpai sebuah tampilan Slide show Gambar atau foto berita yang bila di klik pada gambar yang tampil slide show tersebut akan masuk kehalaman postingan yang di targetkan.

Bagi anda yang ingin tau bagaimana cara membuatnya, yuk ikuti langkah berikut ini :
1. Login Ke Bloger
2. Pilih Tata Letak >> EDIT HTML dan jangan lupa back up template anda.
3. Letakkan kode berikut diatas kode ]]></b:skin>

/*-----Slide Show-----*/
#s3slider{height:250px;margin:0px;overflow:hidden;position:relative;width:347px}
#s3sliderContent{margin-left:0;padding:0;position:absolute;top:-14px;width:347px}
.s3sliderImage{display:none;float:left;position:relative}
.s3sliderImage span{-khtml-opacity:0.8;-moz-opacity:0.8;background-color:#000;bottom:0;color:#fff;display:none;filter:alpha(opacity=70);font:11px arial, sans-serif;left:0;opacity:0.8;padding:10px 0;position:absolute;text-align:center;width:347px}
.clear{clear:both}

NB : Sesuaikan width dan heigth dengan ukuran widget yang di ingin kan sesuai dengan lebar ruang kolom/elemen di blogmu.

4. Lalu letakkan lagi kode berikut di atas </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
(function($){
$.fn.s3Slider = function(vars) {
var element = this;
var timeOut = (vars.timeOut != undefined) ? vars.timeOut : 4000;
var current = null;
var timeOutFn = null;
var faderStat = true;
var mOver = false;
var items = $("#" + element[0].id + "Content ." + element[0].id + "Image");
var itemsSpan = $("#" + element[0].id + "Content ." + element[0].id + "Image span");
items.each(function(i) {
$(items[i]).mouseover(function() {
mOver = true;
});
$(items[i]).mouseout(function() {
mOver = false;
fadeElement(true);
});
});
var fadeElement = function(isMouseOut) {
var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
thisTimeOut = (faderStat) ? 10 : thisTimeOut;
if(items.length > 0) {
timeOutFn = setTimeout(makeSlider, thisTimeOut);
} else {
console.log("Poof..");
}
}
var makeSlider = function() {
current = (current != null) ? current : items[(items.length-1)];
var currNo = jQuery.inArray(current, items) + 1
currNo = (currNo == items.length) ? 0 : (currNo - 1);
var newMargin = $(element).width() * currNo;
if(faderStat == true) {
if(!mOver) {
$(items[currNo]).fadeIn((timeOut/6), function() {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
} else {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
}
});
}
} else {
if(!mOver) {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
} else {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
}
}
}
}
makeSlider();
};
})(jQuery);
//]]>
</script>
<script type='text/javascript'>
$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});
</script>

NB : untuk cara mengatur atau setting waktu slide show silakan anda cari kode timeOut: 3000
Ubah angka 3000 itu sesuai keinginan anda.

5. Cari kode <div id='main-wrapper'> Letakkan kode berikut di bawah <div id='main-wrapper'>

<b:if cond='data:blog.pageType != "item"'>

<li class='s3sliderImage'>
<a href='http://abdu-green.blogspot.com/2012/05/install-dual-boot-windows-dan-ubuntu.html'>
<img height='245' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglNfMoXVM-NVHzzEKBdbD-GUd5EJGHyC2z_06w_q3cItVnYGvwu4xiBFtw4jq9_SQ-F33R2qiVOXDmdA_VGSDy_DkXRoJxnhV2LT53hCnyKRRCi4W_zFXYDjuHRoUEAeRceqhZlaB9GGkU/s1600/windows-linux.jpg' width='347'/>
<span>Panduan lengkap tentang cara untuk mendual boot antara OS Windows 7 dan Ubuntu 12.04</span></a></li>

<img height='245'

src='URL GAMBAR' width='347'/>

<span>Isi dengan kalimatyang ingin anda di tampilkan mendampingi foto/image.</span></a></li>

</ul>

</div>

</b:if>

Keterangan :

Ganti warna hijau dengan alamat link artikel kamu
Ganti warna kuning dengan link gambar / foto
Arti kode width="347" height="245" adalah ukuran dari widget slideshow view, (atur sesuai ukuran widget yang kamu inginkan)
Ganti warna pink dengan Isi dengan kalimat yang ingin di tampilkan di bawah gambar slideshow.
Jumlah Slide Show juga bisa anda perbanyak dengan menambahkan kode :
<li class='s3sliderImage'>
<li><a href="URL POSTINGAN"><img height='245' src="URL GAMBAR" width='468'/> <span>Isi dengan kalimatyang ingin anda di tampilkan mendampingi foto/image.</span></a></li>
--->> Letaknya di atas kode </ul>

6. Setelah semua selesai, Klik Pratinjau untuk melihat previewnya, setelah itu Simpan Template.

Mudah bukan?? Selamat mencoba dan Semoga bermanfaat. ^_^

Sumber :Membuat Slideshow Gambar Berita di Blog

Memberi Efek Shadow Pada Outer-Wrapper Blog

8:01:00 PM

Unknown

Apasih arti dari shadow itu?? yaitu mempunyai arti "Bayangan", jadi pada pertemuan kali ini akan belajar tentang efek shadown (bayangan) pada Outer-Wrapper atau Background Blogger.

Cara Menambahkan Efek Shadow atau Bayangan pada bagian background Blogspot sangat simple dan mudah sekali untuk di terapkan, hanya dengan menambahkan kode CSS3, Mungki sudah banyak yang saya jumpai blog-blog di luara sana yang sudah nerapin Efek shadow ini pada blognya.

Dengan penambahan efek bayangan ini membuat blog kita akan terasa lebih hidup dan tidak terasa garing atau membosankan sekaligus blog kita menjadi lebih enak di lihat.

Cara Memberi Efek Bayangan Pada Background Blogspot :
1. Login ke blogger.
2. Kemudian masuk ke dalam menu Edit HTML.
3. Kemudian cari kode #outer-wrapper. Gunakan CTRL + F untuk mempermudah pencarian.

#outer-wrapper{border:5px solid #fff; width:950px;margin:0px auto;padding:0px 0px 0px 0px;text-align:$startSide;font:$bodyfont}

Jika sudah ketemu tambahkan kode di bawah ini ke dalam kode diatas.

-moz-box-shadow: 0px 0px 20px #000000; -webkit-box-shadow: 0px 0px 20px #000000; box-shadow: 0px 0px 20px #000000;

Sehingga hasilnya bisa dilihat di bawah ini :

#outer-wrapper{-moz-box-shadow: 0px 0px 20px #000000;-webkit-box-shadow: 0px 0px 20px #000000; box-shadow: 0px 0px 20px #000000; border:5px solid #fff; width:950px;margin:0px auto;padding:0px 0px 0px 0px;text-align:$startSide;font:$bodyfont}

Nb : Sebagai catatan untuk kode CSS di dalam #outer-wrapper bisa jadi berbeda - beda tergantung template nya. Namun untuk peletakan kodenya kurang lebih tidak jauh dengan peletakan kode diatas. Simpan dan lihat hasilnya. Selamat Mencoba dan Semoga Bermanfaat.

Membuat Scroll Blockquote Otomatis Pada Postingan Blog

7:17:00 AM

Unknown

Apa sih yang di maksud dengan Blockquote itu? Blockquote mrmpunyai fungsi sebagai wadah/penanda kata-kata yang di anggap penting di sebuah artikel blog. Seperti yang ada di SYKC Blog ini, yang saya gunakan untuk wadah kode-script yang penting.

Pertemuan kali ini kita akan belajart memberi batasan tinggi maksimal yang sehinnga akan memunculkan fungsi scroll untuk bergulir kebawah pada blockquote, blockquote dengan fungsi scroll lebih efektif di bandingkan blockquote yang tidak memiliki fungsi scroll, karena jika kata-kata yang di anggap penting terlalu banyak menjadikan blockquote memakan tempat yang panjang ke bawah dalam postingan.

Blockquote dengan fungsi scroll kali ini memiliki ototmatis ketinggian maksimal yang bila tinggi dari kotak blockquote tidak mencapai batas yang di tetapkan, maka kotak akan tetap (scrollnya tidak muncul), dan jika melebihi tinggi yang ditentukan, maka akan muncul fungsi scroll(tombol gulir kebawah). tergantung bagaimana anda memodofikasinya. Kotak blockquote akan tetap dan blockquote nantinya otomatis memiliki scroll pada bagian kanan blockquote bila tinggi kotak blockquote mencapai batas yang telah ditentukan.

Blockquote kali ini menggunakan CSS, jadi anda tidak perlu repot2 mengatur pada tiap postingan anda lewat Edit HTML. bagi anda yang berminat untuk menerapkan trik ini, silahkan ikuti langkah2 dibawah ini :

Cara Membuat Scroll Blockquote Otomatis Pada Postingan Blog
1. Log in ke blogger
2. dari Dasbor klik Template dan masuk ke Edit HTML
3. Gunakan F3 untuk mencari kode seperti berikut :

.post-body blockquote {
-----------------
-----------------
}

Gunaka Ctrl + F lalu ketik blockquote

4. Jika sudah ketemu Ganti kode diatas dengan kode dibawah :

.post-body blockquote {
overflow:auto;
max-height:400px;
font-family:'Trebuchet MS';
background:#333;
box-shadow:0 0 0.5em #333;
-webkit-transition:all .2s ease-out;
-moz-transition:all .2s ease-out;
-o-transition:all .2s ease-out;
color:#fff;
margin:10px 0;
padding:5px;
}

5. Jika kode pada langkah ke-3 tidak di temukan cari saja

.post body
--------
--------
}

4. dan letakkan kode berikut di bawah kode di atas :

.post-body blockquote {
overflow:auto;
max-height:400px;
font-family:'Trebuchet MS';
background:#333;
box-shadow:0 0 0.5em #333;
-webkit-transition:all .2s ease-out;
-moz-transition:all .2s ease-out;
-o-transition:all .2s ease-out;
color:#fff;
margin:10px 0;
padding:5px;
}

5. Simpan Template dan lihat hasilnya di postingan sobat yang sudah ada blockquotenya.

NB : Silahkan anda modifikasi sendiri sesuai kreatifitas anda, misalnya, mengatur tinggi, memberi background dan lain sebagainya.

jika ada masalah dengan pemasangan kode diatas, silahkan kontak admin lewat kolom komentar dibawah.
Selamat mencoba dan semoga berhasil, Semoga Bermanfaat.

Cara Menofollowkan Label Blogger

6:53:00 AM

Unknown

Cara Mengoptimalkan Label Blogger - Cara Membuat/Mengubah Label Blogger Jadi Nofollow. Label Blogger/Blogspot bukanlah berupa link yang bersifat permanent (permalink) melainkan link yang hanya terbentuk sebagai hasil perintah pencarian dan pengelompokan posting-posting dengan label tertentu. Oleh karena itu, bagi search engine (terutama Google) link-link semacam ini bukan merupakan link yang sah untuk diindeks.

Untuk menghindarkan proses indeks terhadap link label, atribut nofollow perlu ditambahkan pada semua label, termasuk link label yang dimasukkan di dalam badan posting/artikel. Dengan memberikan atribut nofollow pada label, diharapkan proses optimalisasi SEO Blogspot menjadi lebih maksimal.

Jika link-link label ditambahkan secara manual, maka cukup tambahkan atribut rel="nofollow" pada tag a label. Contoh :

<a href="http://buka-rahasia.blogspot.com/search/label/HTML-CSS%20Tricks" rel="nofollow">HTML-CSS Tricks</a>

Namun pada label yang ditampilkan pada widget yang bersifat otomatis, misalnya widget labelBlogger dan label yang ditampilkan di atas/di bawah posting, maka harus ditambahkan atribut nofollow pada bagian tag xml label.

Cara menambahkan atribut nofollow pada seluruh label secara otomatis:
1. Login ke Blogger
2. Silahkan menuju halaman Edit HTML - Klik/check "Expand Widget Templates"
3. Cari data:label.url (gunakan Ctrl + F)
Secara utuh, kode tersebut ada dalam tag seperti ini:

<a expr:href='data:label.url'>

4. Tag itu biasanya ada yang berjumlah satu atau dua tergantung pada jenis template XML Blogger tysng digunakan. Bahkan dalam beberapa template XML Bogger tertentu, ada pula yang berjumlah lebih dari dua.
Untuk mengubah label menjadi nofollow, tambahkan atribut rel='nofollow' ke dalam semua tag tersebut seperti pada contoh berikut:

<a expr:href='data:label.url' rel='nofollow'>

5. Setelah anda menambah atribut nofollow pada tag-tag tersebut, kemudian save template.
6. Selesai !

PENTING :
Bagi yang menggunakan menu/navigasi breadcrumbs, akan ditemukan tag sejenis dengan di belakangnya dibubuhi atribut rel='tag':

<a expr:href='data:label.url' rel='tag'>

Jika ditemukan tag seperti di atas, sebaiknya JANGAN ubah atribut rel='tag' menjadi rel='nofollow', karena itu bagian dari breadcrumbs yang berfungsi memberi tahu search engine bahwa url link tersebut berfungsi sebagai tag yang bersifat informatif bagi search engine.

Sumber : Buka[n] Rahasia Lagi

Widget Recent Post Per Label dengan Satu Thumbnail

6:25:00 AM

Unknown

Cara Membuat Daftar Isi Dari Label Dengan Satu Thumbnail/Gambar Postingan. Jika Anda lihat pada template blog ini, di bagian footer pada template ini terdapat widget yang menampilkan label dengan susunan satu judul dengan thumbnail dan summary, dan dibawahnya list dari label yang sama tetapi hanya menampilkan judulnya saja.

Langsung saja untuk Cara membuatnya adalah sebagai berikut :

Pertama yang mesti Anda lakukan adalah login ke blogger dengan akun Anda
Setelah itu pilih blog yang ingin anda tambahkan widget ini.
Masuk ke template >> Edit HTML, kemudian centang expand widget templates
Untuk berjaga-jaga agar tidak terjadi kesalahan dalam pengeditan nantinya, backup dulu template anda.
Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode
img.label_thumb{float:left;border:1px solid #8f8f8f;background:#D2D0D0;margin-right:10px;height:60px;width:60px;padding:2px}
img.label_thumb:hover{background:#f7f6f6}
.label_with_thumbs{float:left;width:100%;min-height:70px;margin:0 5px 2px 0}
ul.label_with_thumbs li{min-height:65px;margin:2px 0;padding:4px 0}

Perhatikan tulisan warna biru diatas, itu adalah lebar dan tinggi thumbnail image.
Selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode
<script src='http://penyimpanan-maskolis.googlecode.com/files/labels.js' type='text/javascript'/>
Setelah itu save templates, kemudian menuju ke layout pilih kotak yang akan ditambahkan widget ini. Klik add gadget >> HTML/Javascript masukkan kode berikut ini kedalamnya :
<script type='text/javascript'>var numposts = 1;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 60;</script>

<script type="text/javascript" src="/feeds/posts/default/-/news?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

<script type="text/javascript">
function recentpostslist(json) {
document.write('<ul>');
for (var i = 1; i < json.feed.entry.length; i++)
{
    for (var j = 1; j < json.feed.entry[i].link.length; j++) {
      if (json.feed.entry[i].link[j].rel == 'alternate') {
        break;
      }
    }
var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl + '" target="_blank">' + entryTitle + "</a> </li>";
document.write(item);
}
document.write('</ul>');
}
</script>
<script src="http://sykcbloger.blogspot.com/feeds/posts/summary/-/news?max-results=6&alt=json-in-script&callback=recentpostslist"></script>
<a href="http://sykcbloger.blogspot.com/search/label/news" style="float:right;font:normal 11px Arial;padding:5px 0;">More on this category »</a>

Keterangan :
Warna biru : adalah label atau kategori yang ditampikan, Anda bisa menggantinya dengan label anda sesuaikan dengan kebutuhan.
Warna merah : Ganti URL dengan URL blog anda.

Selanjutnya save dan lihat hasilnya.
Selamat mencoba semoga bermanfaat...

Pasang Kotak Permalink di Bawah Postingan Untuk Menyebarkan Link

5:59:00 AM

Unknown

Permalink adalah tautan permanen dari halaman postingan blog. Dengan membuat kotak permalink di bawah postingan, dapat mempermudah pembaca atau blogger lain untuk mengetahui permalink dari postingan yang sedang dibacanya.

Blogger lain bisa saja menyematkan kode HTML permalink itu di blognya, sehingga memberikan tautan (backlink) ke halaman postingan kita. Bagi anda para blogger yang tertarik untuk memasanga di blognya, Silahkan untuk di terpakan di blognya.

Cara Membuat Kotak Permalink di Bawah Postingan Blog
1. Login ke blogger
2. Pilih Template kemudian Edit HTML
3. Jangan lupa centang "Expand Template Widget"
4. Cari kode <data:post.body/> Lalu taruh kode berikut berikut di bawahnya:

<br /><textarea cols='55' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='2' style='margin-top:3px;width:auto;'><a href="<data:post.url/>"><data:post.title/></a></textarea><br/>

Simpan jika sudah selesai.

Jika setelah disimpan kurang sesuai dengan tampilan blog kita, bisa kita edit. Untuk <data:post.body/> jika kita menggunakan Auto Read More, akan ada dua kode, pilih kode yang kedua. 55 adalah panjangnya kotak dan 2 adalah tingginya.

Minggu, September 09, 2012

Cara Membuat Google Translate dengan Gambar Bendera

11:09:00 PM

Unknown

Malam sobat SYKC.blog, malam ini saya tidak bisa tidur karena memikir hari senin yang menyebalkan untuk sekolah. Dari pada diam saja mending saya berbagi trick buat para sobat SYKC tentang Cara Membuat Google Translate dengan Menggunakan Bendera yang akan mewarnai blog sobat semua kegunaanya menerjemahkan seluruh kata-kata yang ada diblog sobat.
Tertarik untuk mencoba langsung aja.....

1. Login ke Blogger
2. Masuk ke Rancangan --> Edit Laman
3. Tambahkan Gadjet lalu pilih HTML/Javascript
4. Masukan kode berikut ini:

<div class="widget-content">
<style>

.google_translate img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.google_translate:hover img {
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
.google_translatextra:hover img {
filter:alpha(opacity=0.30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
</style>

<div>
<center>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlm3c6fUz0I3_VeyoFQEDZaQlYFWB0s9EmGb2OfMVp_yGvUSy8Xfunkn63QLtrD3zWhXj8pwDfWzQHxjIOPdF9gtyIBSR2Es4zTtgG60S6N44gxfVlgBzYqtBCulzLo8UXwZnv1JS7xe0/?imgmax=800" style="cursor: pointer; margin-right: 13px;" width="24" /></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKP3Ap_YairOyxgoCZZ3WdhWju2vtrxfawjbQ8Cl_WwsfKZ8dYLAZ19BUEWZNGoHU9Ozbc0m_sh8rQeOvVWWgaIcDFXONcVr9779aZrBQM2HpfESlOdul3_Nzagrw803n1dgRLi-gIiOw/?imgmax=800" style="cursor: pointer; margin-right: 13px;" width="24" /></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAdVu7e3pIcFGFRwIxTVlI4dwKNPdnF54iUuppVVl4s5ZbXfwR3zk3V4ww-ZVGSVI7lNBjO6h_nFLbO6jhionL45Y5ga3H7Okm0P4doLBHbZuOB5U62rP03a9wbC36jJGFE1Wg3EXi-oiM/?imgmax=800" style="cursor: pointer; margin-right: 13px;" width="24" /></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhHgGjW8NTpbw9T263BNxo9VOrNnNM6eFzRiqsKuPLBrH6wvQ6R9taAtPdATZ-L1q8dYdmVakLt6ylgbuQmkK8uuthWiIH2Hi3bEr872fDyjv-jPE-4X3Ya2ZIn6mjJt6gbPNb4KvCL8cc/?imgmax=800" style="cursor: pointer; margin-right: 13px;" width="24" /></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-Ufxj3I-9ZWnEnBR4ka7wLE9UoP1RGoYVqR5XH2abceRO6Pu6vpqwi5mf02t_cWVWf79OZfGxfqaVvqEpKOiSaQsUJDFQ2nkStVC-OVjtq9TXzSETSzYsuYfCmQIBakwe8KPqLNrJ2yc/?imgmax=800" style="cursor: pointer; margin-right: 13px;" width="24" /></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTVpgJ23NUmyNWu4HL1LDp7DHi29O2Lhwhh6xAyfZSFTsyZFNCLb8SZbLbjQ3fKdfhxdyoiRc9PbE3kWJ9BTcv8OrZMHt9ClYJKrIfHpvM3aNwkKYjxoxIccCX32wr93hfydgKE_xqMPc/?imgmax=800" style="cursor: pointer; margin-right: 13px;" width="24" /></a>
<br /><br />

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtjCyctWB1DTIR1zHT0l_23kYAamWq3_FEVhPevxzAX47-bvrXzKkxx3EqPmGmJT4ZmVOBQKyHLmNAHzGE2EI8pipz7yruCcoCw5QEu2udoZ_yafiqy2m2qxAtTTJQBtXOsqpVUXC3uRY/?imgmax=800" style="cursor: pointer; margin-right: 13px;" width="24" /></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4mdZxcAWjDJcwBAZPd5ZbUTDNyjvx3ZfJjlOxtNS5hlTedPhe2n-I8zcy61dZJC-sUGCzMv-QcBluDGJuq2XN40KhicewGMKM1z43mN7_is7WWHHcRUc2h5Z8k6K-kvm-yzSCE-H4a-w/?imgmax=800" style="cursor: pointer; margin-right: 13px;" width="24" /></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiENnmhdgC0_xqZe0g0J9oEdLCj0QTPIWm3udoH1XhXlamVZnk3yPE-ntNhwXHPT87-JXHslRaLDDenjJekbeFl1hMZfVDZ3wFK-qc9G5nJzwYUzY1mEC0xokuSiLRaIYQuvEpQmpGhxJ9/?imgmax=800" style="cursor: pointer; margin-right: 13px;" width="24" /></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.oogle.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTqEDvYm34TcgQIrmhfqKGDLTAjUDHKEFOgBRA_hrD_98BZrh7UbVxd2Es11RsxPXsA0vieOz3XLYEQJpn5HwIFSQBkQBoWyjAd7rzQQwhTN-ww_vR4aXbNNT2l8-UFXK0Qle96HjODVE/?imgmax=800" style="cursor: pointer; margin-right: 13px;" width="24" /></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0XhmoDjt0BYR64JrtPFHXPWe0PUVEjwJNtnn54NKHve1K-1gEHLw0uKgoiXsWdHdxCaFBlCYZZ9JzvaPRZYugxKJ85bFwgfg_J3VL_59Tyd5OFyfqoj6aTe9xCrVi3bJFc_MXMCH1yik/?imgmax=800" style="cursor: pointer; margin-right: 13px;" width="24" /></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7czh-cn&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzf9vFATrTxNYGCl0r-pBsxV9Q2xzlIPMbGOhaPXts4jyZbbsnim8NFibikTGFrallMKUG1xjbNv0_duNbp2Ks4_DY17GoM8J0Pyeg7n1iKNXcG3_uB6JpxdLYNQFWTEiMpVkZcg_v9VI/?imgmax=800" style="cursor: pointer; margin-right: 13px;" width="24" /></a><br /><br />
</center>
</div>
</div>