Bagaimana Menambahkan Menu Opera.com

Pernah mengunjungi Opera.com? Kalau sekarang kita mengunjunginya pasti kita dapat melihat menu navigasi opera yang keren terdiri dari panduan hitam dan merah. Dan tentu saja, pos kali ini akan mengajar kamu bagaimana cara menambahkannya. Terima kasih untuk Lord Html yang menyebarkan widget ini.

Lihat Contoh Widget>>

Fitur dari menu Opera

• Desain yang simpel
• Menggunakan CSS3
• Tidak menggunakan gambar
• Tidak menggunakan javascript
• 10 warna
• 2 gaya (terang & gelap)
• Dapat bekerja dengan IE 8+

Menambahkannya ke dalam blogger

Langkah 1. Pergi ke Dasbor blogger > Tata letak > Tambahkan gadget.

Langkah 2. Pada pop-up window yang muncul pilih widget "Html/Javascript".

Langkah 3. Masukkan kode di bawah ini:

<link href="http://gemar-html.googlecode.com/svn/svn/trunk/css/menu-opera.css" rel="stylesheet" type="text/css">
<div id='cssmenu'>
<ul>
<li><a href='#Link 1'><span>Menu 1</span></a></li>
<li class='has-sub'><a href='#Link 2'><span>Menu 2</span></a>
<ul>
<li class='has-sub'><a href='#Link 2.1'><span>Menu 2.1</span></a>
<ul>
<li><a href='#Link 2.1.1'><span>Menu 2.1.1</span></a></li>
<li><a href='#Link 2.1.2'><span>Menu 2.1.2</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#Link 2.2'><span>Menu 2.2</span></a>
<ul>
<li><a href='#Link 2.2.1'><span>Menu 2.2.1</span></a></li>
<li><a href='#Link 2.2.2'><span>Menu 2.2.2</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#Link 3'><span>Menu 3</span></a></li>
<li><a href='#Link 4'><span>Menu 4</span></a></li>
</ul>
</div>​

Langkah 4. Sebelum menyimpan widget, ubah dulu:

• Kode berwarna Hijau menjadi alamat link,
• Kode berwarna Biru menjadi judul link.

Langkah 4: Nah, setelah selesai klik "Simpan".

Jangan lupa like Facebook kami untuk update berikutnya.

Baca Selengkapnya

5 Cara Menulis Sebuah Pos Yang Menarik

Kamu pasti pernah mengunjungi sebagian besar blog. Beberapa diantaranya hebat, ada yang biasa saja, dan ada lagi yang jauh lebih buruk.

Ternyata, beberapa blog yang memiliki artikel yang dibuat sendiri memiliki jumlah pengunjung yang rendah. Sedangkan beberapa blog yang artikelnya merupakan hasil dari menjiplak malahan memiliki pengunjung yang lebih banyak.

Satu-satunya faktor perbedaan ini adalah daya pengikat dari pos. Banyak blogger dari seluruh dunia mengatakan "Artikel adalah Raja". Tapi, bila artikelmu sama sekali tidak dapat menarik pengunjung, itu tetap saja tidak berguna.

Dan berikut ini beberapa cara untuk membuat pos menjadi menarik:

1. Judul adalah Raja

Kebanyakan pengunjung blog itu malas. Ketika mereka memasuki blog, mereka tidak akan membaca isi ataupun silsilah singkat dari pos. Sebaliknya, mereka akan membaca judul dari pos.

Karena itu, buatlah judul pos yang lebih menarik. Seperti:

1. Mengikutkan angka.
2. Memulai judul dengan kata "Bagaimana".
3. Persingkatkan Judul Pos dan membuat mereka lebih menarik.

2. Gunakan gambar yang menarik

Gambar lebih berharga daripada seribu kata, itu kenyataan. Bila pengunjung sudah malas/kelelahan membaca kalimat-kalimat, gambar dapat membantu mereka untuk menentukannya.

3. Selalu mengunakan kata "Kamu/Anda"

Kita menulis untuk pembaca, mengapa tidak menggunakan kata yang lebih gaul? Ketika kamu menulis sesuatu seperti berbicara secara langsung kepada pembaca, selain dapat menciptakan lingkungan yang baru, kamu juga mengubah pengunjung biasa menjadi pengunjung setia.

4. Jangan lupa menambahkan PUB

Kebanyakan blogger lupa ataupun tidak menambahkan Panggilan Untuk Beraksi (PUB) kedalam pos mereka.

Untuk menambahkan PUB, cobalah menambah beberapa permintaan, seperti:\

• menyuruh pembaca untuk menyebarkan pos.
• Berlangganan dengan blogmu.
• Mengikuti kamu di Twitter atau Facebook.
• Meninggalkan komentar, atau
• Membeli produk.

Pembacamu akan melakukannya bila mereka merasa posmu sangat berguna.

5. Ejaan dan Formatting.

Agar sebuah pos kelihatan menarik dan rapi, kita perlu merapikannya. Gunakan bahasa yang jelas dan ejaan yang tepat. Sedangkan Formatting digunakan untuk mengatur bentuk dari paragraf menjadi menarik & mudah dibaca, misalnya kamu mengubah tulisan menjadi align-right (berada di kanan). itu termasuk cara mengatur formatting.


...Masih ada tips untuk menulis pos? Tuliskan di komentar di bawah ini.

(sumber: We Blog Better)

Baca Selengkapnya

Cara Menambahkan Galeri Pos Terpopuler Di Blog

Baru-baru ini, widget yang paling populer adalah widget Galeri Posting Terpopuler ini yang terkenal dengan sebutan Sliders atau Carousels. Widget ini menampilkan 10 foto dari posting terpopuler di blogmu secara horizontal. Sangat berguna untuk membuat pengunjung tetap tinggal di blog.

Sebelum menambahkan widget ini, kamu harus tahu bahwa widget ini tidak sepenuhnya cocok untuk semua template. Maka, buatlah sebuah backup terlebih dahulu sebelum menambahkannya.

Cara Menambahkan:

Langkah 1. Masuk ke Dasbor Blogger - Template (buat dulu sebuah back-up) - Edit HTML - Lanjutkan - Expand Template Widget.

Langkah 2. Cari kode ]]></b:skin>

Langkah 3. Di atas/Sebelum kode ]]></b:skin>, masukkan kode di bawah ini:

#gallery{position:relative;margin:0 35px 20px;width:590px;height:126px;background:#ffffff}
#gallery .belt{position:absolute;top:0;left:0;list-style-type:none}
#gallery .panel{float:left;margin:20px;width:84px;height:86px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxc4cPiI5zVYCGyNWSbACq_wgH38If2HyJ53LGiSe2B5bqme5X6gTysroX1JrgpJkg-1LjX1hCpL_ryyEQC7ATpN7EIM9t8HQbHgFgl_vLLL3C5tw9r45qOml_Wu6sASB3_Tutd_Tx1rsP/s1600/bg-slider.png) bottom center no-repeat;overflow:hidden}
#gallery .panel img{float:left;border:1px solid #DDD;margin:5px;width:72px;height:72px;background:#FFF;padding:0px}
#gallery .panel img:hover{filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5}

...Kamu bisa mengubah ukuran widget ini dengan mengubah nilai dari 590 (panjang) dan 126 (lebar). Disarankan untuk tidak mengubah ukuran bagi yang tidak berpengalaman.

Langkah 4. Sekarang, carilah kode </head>

Langkah 5. Di atas/Sebelum kode </head>, masukkan kode di bawah ini:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://gemar-html.googlecode.com/svn/trunk/js/galeri-posting-populer-diatas-post.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
stepcarousel.setup({
galleryid: "gallery",
beltclass: "belt",
panelclass: "panel",
autostep: {enable:true, moveby:1, pause:6000},
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 2, leftnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgljamoM29i1JLjZF7uKGdQdYa06tz64kl4QF45zIjJIRCCWewyYK2r7jB7NlXHSp6hBLAGCaM63duQsOreo0Xq9mMRYdlRf-mi3vJLeBJfzcvpcapmtMLFgfua9kkGhLdOXSLcuiU86yS/s1600/prev.png", -40, 36], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5y-2BzXQ1T1Lj0lqzs2GmOLYU4kIMvWItlMKo5NGBQLfMdQFcFwtjTXS1eWaMWcGU8yVi22eyJU9A9G9Xd96lAN827BygSFFGvIb6QlzHkaeH4coV-_jVbKYrjCvRdutXI4aR9supeea5/s1600/next.png", 2, 36]},
contenttype: ["external"]
})
//]]>
</script>

Langkah 6. Cari kode di bawah ini:

<b:section class='main' id='main' showaddelement='yes'>

...bila kode di atas tidak ketemu, carilah kode dibawah ini:

<b:section class='main' id='main' showaddelement='no'>

Langkah 7. Tepat di bawah kode di langkah 6, masukkanlah kode di bawah ini:

<b:widget id='PopularPosts2' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'><div style='margin-top:20px;margin-bottom:70px;margin-left:-20px;'>
  <div id='gallery'>
   <ul class='belt'>
    <b:loop values='data:posts' var='post'>
     <li class='panel'>
      <b:if cond='data:showThumbnails == &quot;false&quot;'>
       <b:if cond='data:showSnippets == &quot;false&quot;'>
        <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
       <b:else/>
        <div class='item-title'>
         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
        </div>
        <div class='item-snippet'>
         <data:post.snippet/>
        </div>
       </b:if>
      <b:else/>
       <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'>
        <b:if cond='data:post.thumbnail'>
         <img expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
        <b:else/>
         <img alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFYwrgGDx87OnHAiHItk9Go0cj7TrxL0MJ6h45ksgeXPm57Ii-RqLoTOOjqE5MOahWvv0Ba__REtM-AanjdbJUbMZHFs61PtoW8dyEc2QnVo0u1fH0nQwVQXO2AfNMvX_usSIdxt3RyGeB/s1600/no-image.PNG'/>
        </b:if>
       </a>
      </b:if>
     </li>
    </b:loop>
   </ul>
  </div></div></b:if> </b:includable>
</b:widget>

...Hapus kode berwarna biru jika kamu mau menampilkan widget ini di halaman postingan juga.

Langkah 8. Pratinjau dulu templatemu. Bila hasilnya bagus, Simpan templatemu.

Baca Selengkapnya

Widget Komentar Terbaru Dengan Avatar Bulat

Widget Komentar Terbaru adalah widget yang diperlukan agar pengunjung tetap berada di halaman blog. Widget yang saya perkenalkan ini selain menaruh link dan isi komentar juga terdapat avatar yang bulat di sampingnya.

Dan tentu saja, kamu juga dapat mengubah avatar defaultnya.

Contoh widget:

Cara Menambahkannya:

Langkah 1. Pergi ke Dasbor Blogger - Tata Letak - Tambah Gadget - Html/Javascript.

Langkah 2. Masukkan kode di bawah ini:

<style type="text/css">
ul.w2b_recent_comments {
    list-style: none;
    margin: 0;
    padding: 0;
}
.w2b_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;
}
.w2b_recent_comments li .avatarImage {
    padding: 3px;
    background: #fefefe;
    -webkit-box-shadow: 0 1px 1px #ccc;
    -moz-box-shadow: 0 1px 1px #ccc;
    box-shadow: 0 1px 1px #ccc;
    float: left;
    margin: 0 6px 0 0;
    position: relative;
    overflow: hidden;
}
.avatarRound {
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
}
.w2b_recent_comments li img {
    padding: 0px;
    position: relative;
    overflow: hidden;
    display: block;
}
.w2b_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  = 5,
 showAvatar  = true,
 avatarSize  = 60,
 roundAvatar = true,
 characters  = 40,
 showMorelink = false,
 moreLinktext = "More »",
 defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
 hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://gemar-html.googlecode.com/svn/trunk/js/widget-komentar-terbaru-dengan-avatar-bulat.js"></script>
<script type="text/javascript" src="http://blog-kamu.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>

Langkah 3. Sebelum menyimpan widget, ubah dulu:

• Tulisan berwarna merah menjadi alamat blog anda.
• Tulisan berwarna biru untuk mengatur jumlah komentar yang ditampilkan. (ingat! Ada 2 tulisan yang berwarna biru)
• Tulisan berwarna jingga untuk mengatur besar avatar yang ditampilkan.

Langkah 4. Simpan widget dan nikmati!!

(sumber: Helplogger)

Baca Selengkapnya

Widget Pos Terbaru Yang Menampilkan Judul Saja

Widget posting terbaru adalah widget yang diperlukan oleh setiap blog. Karena membuat pengunjung lebih mudah menjelajahi halaman blognya.

Widget yang akan saya perkenalkan ini adalah widget yang menampilkan posting terbaru secara simpel dengan hanya menampilkan judul postnya. Sangat berguna bagi yang takut blognya keberatan.

Cara Menambahkan:

Langkah 1. Masuk ke Dasbor Blogger - Tata Letak - Tambah Gadget - Html/Javascript.

Langkah 2. Masukkan kode dibawah ini:

<div id="hlrpsb">
<script style="text/javascript" src="http://gemar-html.googlecode.com/svn/trunk/js/widget%20posting%20terbaru%20dengan%20judul%20saja.js"></script>
<script style="text/javascript">var numposts = 10;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script>
<script src="http://blog-kamu.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div>
<noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>
<style type=text/css>
#hlrpsb { }
.bbrecpost2 {
padding-top:6px;
padding-bottom:6px;
border-bottom: 1px #cccccc dotted; }
</style>

Langkah 3. Sebelum menyimpan widget, ubah dulu:

• Tulisan berwarna merah menjadi alamat blogmu.
• Tulisan berwarna biru menjadi jumlah post terbaru yang ditampilkan.

Langkah 4. Simpan widgetmu dan nikmati.

Komentari bila ada masalah atau kepayahan widget ini.

(sumber: Helplogger)

Baca Selengkapnya

Membuat Huruf Pertama Setiap Pos Menjadi Huruf Kapital

Cara lain dalam mendesain blog adalah mengubah huruf pertama menjadi huruf besar / kapital atau yang disebut Drop Caps. Efek ini membuat huruf pertama menjadi diperbesarkan dan mengambil posisi dari barisan kepertama sampai barisan ketiga atau keempat. Bukan cuma memperbesarkan, efek ini juga dapat mengubah font dan warna huruf tersebut. Biasanya kamu dapat melihat efek ini didalam blog bergaya Magazine, dll. Didalam tutorial ini, saya akan mengajari kamu bagaimana membuat efek ini.

Langkah 1. Masuk ke Dasbor Blogger - Template (buat dulu sebuah back-up) - Edit HTML - Lanjutkan - Expand Template Widget.

Langkah 2. Cari (Ctrl + F) kode ]]></b:skin>

Langkah 3. Diatas/sebelum kode ]]></b:skin>, tambahkan kode di bawah ini:

.capital:first-letter {
float: left;
display: block;
font-family: Times, serif, Georgia;
font-size: 40px;
color: #000000;
margin:0px 5px 0 0;
padding:0 0 0 10px;
}

Pengaturan:

• ubahlah kata yang berwarna biru untuk mengubah warna huruf kapitalnya.
• ubahlah kata yang berwarna ungu untuk mengubah ukuran huruf kapitalnya.

Langkah 4. Carilah kode <data:post.body/>

Langkah 5. Kemudian ganti kode di atas menjadi kode di bawah ini:

<div class='capital'><data:post.body/></div>

Langkah 6. Simpan template anda.


Sekarang, setiap post yang ada di blogmu selalu ada huruf kapital pada huruf pertama. Ingat! kemungkinan efek ini hanya akan kelihatan di dalam halaman post (tidak di halaman utama). Dan menambahkan gambar tepat sebelum huruf pertama dapat membuat efek ini hilang.

Baca Selengkapnya