Cara Membuat Berita Foto di Blog

okesharezone - Cara Membuat Berita Foto di Blog | Membuat berita foto? Apakah Anda pernah mendengarnya? Berita foto itu awal mulanya memang banyak blogger yang suka dengan kapanlagi.com, dengan situsnya yang juga kualitas dan mutunya bagus, apalagi teknik situsnya, benar-benar menakjubkan. Situs kapanlagi.com sudah banyak blogger yang menginspirasinya. Teknik yang paling tenar dipraktikan oleh para blogger di blognya, yaitu Artikel Terbaru dan juga Berita Foto Terkait. Nah, sudah ada ilmunya untuk artikel terbaru mirip kapanlagi.com. Dan artikel kali ini akan kang hilman bahas mengenai berita foto seperti kapanlagi.com. Seperti apa ya kira-kira? Yuk, simak ya!

Widget paling unik dan cantik patut di pasang pada posting Anda, secara manual maupun otomatis dengan menggunakan salah satu cara yaitu mengedit di Edit HTML Template. Nah, mau tau caranya? Pengen tahu kan? Gimana cara buatnya, atau gimana cara masangnya? Yuk, ini dia tipsnya!

Cara Membuat Berita Foto di Blog

Pertama

Anda buka akun blogger Anda, www.blogger.com.

Kedua

Anda klik Rancangan > Add Gadget > Pilih HTML JavaScript.

Ketiga

Kemudian, lihat kode dibawah. Kode tersebut letakkan di HTML/JavaScript.

<b>Terkait Berita Foto Terbaru</b>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"> 

</script> 

<link href="http://reader-download.googlecode.com/svn/trunk/blogger-toc-gallery-default-theme.css" media="screen" rel="stylesheet" type="text/css"></link> 

</h3> 

<script type="text/javascript"> 

var enableMasonry = true,

    idMode        = true,

    showPostDate  = true,

    byLabels      = false,

    labelName     = "Mengenai",

    pBlank        = "http://2.bp.blogspot.com/-RdWht36FTLI/TrsqFbSraFI/AAAAAAAABO4/rTjPm97uO34/s1600/dte-darkblue.png";

    text          = "Komentar",

    numposts      = 10,

    showSpeed     = 1000,

    sDownSpeed    = 400,

    sUpSpeed      = 400,

    loadingItem   = "Loading item...",

    errorText     = "Opps...",

    home_page     = "http://facewoman.blogspot.com/";

</script> 

<script src="http://facewoman.googlecode.com/files/gambar.js" type="text/javascript"></script> 

Keempat

Simpan hasil Anda, kemudian terapkan, dan lihat hasilnya pada blog Anda.

Demikian Cara Membuat Berita Foto di Blog, semoga bermanfaat :)

Membuat Widget Komentar Terbaru di Blog

okesharezone - Membuat Widget Komentar Terbaru di Blog | Sobat blogger, pastinya Anda tahu apa itu widget? Widget adalah secara umumnya, adalah berupa kode yang mengadung script dan tidak mengandung script. Memasang Widget Komentar Terbaru di Blog, itu ada untungnya bagi kita dan pengunjung blog kita. Apa keuntungannya? Keuntungannya adalah kita bisa melihat, siapa yang berkomentar dan dimana ia (pengunjung) berkomentar di blog kita. Ada baiknya, kita memasang widget ini. 

Baiknya yaitu, widget ini walaupun mengandung script, tidak memberatkan blog kita. Padahal, widget yang mengandung script tak baik untuk loading blog kita, atau blog kita nantinya akan menjadi lambat loadingnya. Nah, sedangkan widget ini, tidak menyebabkan loadingnya berat. Di blog seorang blogger, tercatat oleh kang hilman, bahwa blog seorang blogger, tersebut walaupun pemula, sudah mulai handal dalam mempelajari script. Nah, widget komentar yang kang hilman buat nih, tidak memberatkan loading blog, widget ini pastinya cantik bila ditampilkan di beranda dan postingan blog Anda.

Oke, sobat okesharezone yang paling oke :), berikut cara Membuat Widget Komentar Terbaru di Blog:

Pertama

Langkah pertama, sudah biasa dilakukan, yaitu masuklah atau login atau sign in pada blogger dashboard Anda. Bila sudah terbuka, berarti Anda tak usah login atau sign in lagi. 

Kesimpulannya: Masuk atau buka website blogger, yaitu: http://www.blogger.com/

Kedua

Dilanjut langkah kedua, Anda memasuki tahap kedua, yaitu: klik Rancangan dan kemudian klik Edit HTML pada blogger dashboard Anda.

Kesimpulannya: klik Rancangan > klik Add Gadget



Ketiga

Dilanjut lagi langkah ketiga, yaitu, klik HTML/JavaScript, dengan menekan link HTML/JavaScript atau dengan cara menekan tombol "+".

Kesimpulannya: klik link HTML/JavaScript untuk meletakkan kode yang akan kang hilman tulis pada tahap keempat.



Keempat

Setelah tahap ketiga, sebelumnya menekan atau mengeklik link HTML/JavaScript. Kemudian, masukkan kode di dalam HTML/JavaScript, dengan kode berikut.

<style type="text/css"> 

ul.tb_recent_comments{list-style:none;margin-top:15px;padding:0;}

.tb_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}

.tb_recent_comments li .avatarImage{padding:3px;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}

.tb_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}

.tb_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}

</style> 

<script type="text/javascript"> 

//<![CDATA[

    // Recent Comments Settings

    var

numComments  = 6,

showAvatar  = true,

avatarSize  = 30,

characters  = 100,

defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",

hideCredits = true;

//]]>

</script> 

<script type="text/javascript" src="http://html-scripts.googlecode.com/files/rcentcmmntavr.js"></script> 

<script type="text/javascript" src="http://urlblogAnda/feeds/comments/default?alt=json&callback=tb_recent_comments&max-results=6"></script>



Keterangan:

numComments, adalah jumlah komentar yang ditampilkan.

showAvatar, adalah gambar / avatar yang ditampilkan bersebelahan dengan deskripsi komentar.

hideCredits, adalah penyembunyian copyright/credits pada JavaScript tersebut.



Kelima

Simpan hasilnya dan kemudian lihat demonya pada blog Anda sendiri.



Demikian, Membuat Widget Komentar Terbaru di Blog, semoga berhasil dan bermanfaat buat Anda.

Cara Membuat Widget Imsakiyah Ramadhan 2012 Seperti Okesharezone

okesharezone - Cara Membuat Widget Imsakiyah Ramadhan 2012 Seperti Okesharezone | Nah, pada tampilan beranda dan postingan okesharezone ini, terlihat ada jadwal imsakiyah. Jadwal Imsakiyah ini, kang hilman buat seperti itu, agar menarik perhatian. Selagi menarik perhatian, kita mudah mencari, jam berapa kita imsak, jam berapa kita shalat subuh, dan seterusnya. 

Sekedar untuk menarik perhatian saja, untuk mempermudah pula pengunjung melihat jadwal imsakiyah dengan mudah. Bagi para blogger, mungkin tertarik dengan widget imsakiyah tersebut. Langsung saja, simak tipsnya ya.

Pertama

Buka blogger dashboard Anda

Kedua

Klik Rancangan > Edit HTML

Ketiga

Copy kode dibawah ini

<div class='ram' style='-webkit-box-shadow: rgb(204, 204, 204) 1px 2px 2px 1px; background-attachment: initial; background-clip: initial; background-color: initial; background-image: url(http://cdn.okeinfo.net/www/2011/images/ad/ramadan/bg_jadwal.gif); background-origin: initial; background-repeat: repeat no-repeat; border-bottom-color: rgb(255, 255, 255); border-bottom-style: solid; border-bottom-width: 1px; border-top-color: rgb(255, 255, 255); border-top-style: solid; border-top-width: 1px; color: #333333; float: left; font-family: &apos;helvetica neue&apos;, helvetica, arial, freesans, &apos;liberation sans&apos;, &apos;numbus sans l&apos;, sans-serif; font-size: 13px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 5px; padding-top: 0px; width: 965px;'>

<img alt='ramadan' class='l p2' height='35' src='http://cdn.okeinfo.net/www/2011/images/ad/ramadan/jadwal.png' style='border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; float: left; padding-right: 10px;' width='210'/>

<ul style='margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 7px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;'>

<li class='ta mark' style='border-bottom-style: none; border-color: initial; border-left-color: rgb(62, 161, 62); border-left-style: none; border-left-width: 1px; border-right-color: rgb(11, 110, 11); border-right-style: none; border-right-width: 1px; border-top-style: none; border-width: initial; color: #ecf710; float: left; font-weight: bold; list-style-image: initial; list-style-position: initial; list-style-type: none; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 3px; padding-left: 0px; padding-right: 7px; padding-top: 3px;'>Imsak : 04:35</li>

<li style='border-left-color: rgb(62, 161, 62); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(11, 110, 11); border-right-style: solid; border-right-width: 1px; color: white; float: left; list-style-image: initial; list-style-position: initial; list-style-type: none; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 3px; padding-left: 5px; padding-right: 7px; padding-top: 3px;'>Subuh : 04:45</li>

<li style='border-left-color: rgb(62, 161, 62); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(11, 110, 11); border-right-style: solid; border-right-width: 1px; color: white; float: left; list-style-image: initial; list-style-position: initial; list-style-type: none; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 3px; padding-left: 5px; padding-right: 7px; padding-top: 3px;'>Dzuhur: 12:01</li>

<li style='border-left-color: rgb(62, 161, 62); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(11, 110, 11); border-right-style: solid; border-right-width: 1px; color: white; float: left; list-style-image: initial; list-style-position: initial; list-style-type: none; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 3px; padding-left: 5px; padding-right: 7px; padding-top: 3px;'>Ashar: 15:23</li>

<li class='mark' style='border-left-color: rgb(62, 161, 62); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(11, 110, 11); border-right-style: solid; border-right-width: 1px; color: #ecf710; float: left; font-weight: bold; list-style-image: initial; list-style-position: initial; list-style-type: none; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 3px; padding-left: 5px; padding-right: 7px; padding-top: 3px;'>Magrib : 17:56</li>

<li class='ls' style='border-left-color: rgb(62, 161, 62); border-left-style: solid; border-left-width: 1px; border-right-color: initial; border-right-style: none; border-right-width: initial; color: white; float: left; list-style-image: initial; list-style-position: initial; list-style-type: none; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 3px; padding-left: 5px; padding-right: 7px; padding-top: 3px;'>Isya : 19:09</li>

</ul>

<form action='http://www.okezone.com/' class='r kota' method='POST' name='form' style='float: right; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;'>

<select id='daerah_atas' name='daerah_atas' style='color: #666666; font-family: inherit; font-size: 12px; font-style: inherit; font-weight: inherit; width: 170px;'> <option selected='selected' style='font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;' value='Pilih Kota'>Pilih Kota</option> <option style='font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;' value='ACEH'>ACEH</option> <option style='font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;' value='BALIKPAPAN'>BALIKPAPAN</option> <option style='font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;' value='BANDUNG'>BANDUNG</option> <option style='font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;' value='BANJARMASIN'>BANJARMASIN</option> <option style='font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;' value='BOGOR'>BOGOR</option> <option style='font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;' value='DENPASAR'>DENPASAR</option> <option style='font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;' value='JAKARTA'>JAKARTA</option> <option style='font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;' value='JAYAPURA'>JAYAPURA</option> <option style='font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;' value='LAMPUNG'>LAMPUNG</option> <option style='font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;' value='MAKASAR'>MAKASAR</option> <option style='font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;' value='MALANG'>MALANG</option> <option style='font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;' value='MALUKU'>MALUKU</option> <option style='font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;' value='MANADO'>MANADO</option> <option style='font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;' value='MARAUKE'>MARAUKE</option> <option style='font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;' value='MATARAM'>MATARAM</option> <option style='font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;' value='MEDAN'>MEDAN</option> <option style='font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;' value='PADANG'>PADANG</option> <option style='font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;' value='PALANGKARAYA'>PALANGKARAYA</option> <option style='font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;' value='PALEMBANG'>PALEMBANG</option> <option style='font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;' value='PEKANBARU'>PEKANBARU</option> <option style='font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;' value='PONTIANAK'>PONTIANAK</option> <option style='font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;' value='SAMARINDA'>SAMARINDA</option> <option style='font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;' value='SEMARANG'>SEMARANG</option> <option style='font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;' value='SERANG'>SERANG</option> <option style='font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;' value='SOLO'>SOLO</option> <option style='font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;' value='SURABAYA'>SURABAYA</option> <option style='font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit;' value='YOGYAKARTA'>YOGYAKARTA</option> </select></form>

</div>

Keempat

Kemudian, setelah di copy, letakkan kode tersebut di atas menu horizontal, sehingga seperti beranda dan postingan okesharezone.

Kelima

Selesai sudah dan simpan template hasil editan Anda.

Demikian Cara Membuat Widget Imsakiyah Ramadhan 2012 Seperti Okesharezone, semoga bermanfaat :)

Mempersonalisasi Halaman Posting Blog

okesharezone - Mempersonalisasi Halaman Posting Blog | Seperti yang Anda ketahui, bahwa personalisasi pada template, khususnya pada posting blog kita itu sangat mempengaruhi berapa besarkah keprofesionalan kita dalam mengedit template dan mendesain template pada blog kita. Itu juga mempengaruhi, banyaknya visitor atau pengunjung yang datang dari berbagai negara untuk menuju ke blog kita dari hasil Search Engine yang terkenal yaitu Google. Nah, personalisasi posting blog, ternyata dapat memperindah posting blog kita, seperti yang Anda ketahui, misalnya pada posting blog yang kang hilman posting. Lihat di bagian bawah, kemudian background atau cover blog, outer wrapper pada blog, dan fitur lainnya. Apakah Anda mau tahu caranya bagaimana?



Personalisasi Halaman Posting Blog, itu sangat penting untuk memperindah posting blog. Kita, sebagai seorang blogger, pasti memikirkan seperti ini, "Aku takut loading blogku kagak cepet. Ah males :/". Nah, memang ada kelemahannya pada personalisasi halaman posting yang kita modifikasi, namun ada juga kelebihannya. Berikut kelemahan dan kelebihannya mengenai personalisasi halaman posting blog ini.

KELEMAHAN:

1.

Loading posting blog dan juga blognya menjadi lambat.

2.

Adanya kode-kode atau widget yang cukup rumit untuk memodifikasinya.

3.

Banyak kode yang mengandung unsur CSS.

KELEBIHAN:

1.

Posting blog terlihat lebih professional, sehingga banyak yang menyukai posting blog Anda, sehingga

pengujung blog bisa betah di posting blog Anda, apabila pula isi konten Anda bermanfaat baginya.

2.

Memperunik penampilan posting.

3.

Membuat pengunjung tak bosan dengan background dan cover blog Anda.

4.

Posting terlihat modern atau canggih dibanding seperti tampilan klasik yang tidak biasanya.

Tertarik Untuk Mencobanya?

Ikuti Langkah Di Bawah Ini ya!

1. Pertama, pastinya Anda menuju ke Blogger Dasbor


2. Kemudian, Anda klik Rancangan


3. Kemudian, Anda klik Edit HTML 


4. Cari kode ]]></b:skin>
   
   Setelah itu, Anda edit template Anda menggunakan kode dibawah ini.

MISALNYA #iklanku, #HTML20, #sidebar-wrapper {display: none;} #main-wrapper {display: yes;}

5. Kemudian letakkan kode dibawah kode ]]></b:skin>
   
   

<b:if cond='data:blog.pageType == &quot;item&quot;'> #iklanku, #HTML20, #sidebar-wrapper {display: none;} #main-wrapper {display: yes;}

6. Simpan Template

Begitulah, cara Mempersonalisasi Halaman Posting Blog, cara mudah namun terlihat rumit. Mendesain posting ini, khusus untuk yang menguasai CSS kode. Jika tidak bisa mempraktikannya, atau Anda yang pemula, bisa tanyakan kepada kang hilman :). Oke, sekian dulu ya, dan semoga bermanfaat :)