one troverlight: Tutorial Blogging

Tampilkan postingan dengan label Tutorial Blogging. Tampilkan semua postingan

Dapat 20 Follower Dengan Sekali Klik Disini

Dapat 20 Follower Dengan Sekali Klik Disini - Untuk sobat blogger yang masih memiliki sedikit followers twitter dan ingin mungkin mencoba memperbanyak followers.
Inilah saat yang tepat buat sobat blogger untuk mencobanya.

Dengan sekali klik saja sobat akan mendapatkan 20 followers setiap jamnya. Bagaimana ? Ingin mencobanya ?

Fancy CSS3 & jQuery Lavalamp Menu For Blogger

This time I am sharing an amazing CSS3 & jQuery lavalamp menu and as mentioned in title it works with CSS3 and jQuery.You can use this menu in 6 colors by just changing a word in the HTML code.This menu is designed by Insidesigns and I have bloggerized it to works perfectly with any blogger blog.Now lets go to the tutorial and see how to add this menu to blogger blog.

How To Add This Menu TO Blogger?

Go to Blogger Dashboard > Template
Click on Edit HTML
Hit Proceed
Find below code in your template </head>
add below code just above it,(If you have already added a jQuery library to your blog then delete the highlighted code)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://code.helperblogger.com/lavalamp-menu.js" type="text/javascript"></script>

Now find below code, ]]></b:skin>
Add this code before ]]></bskin>

Lihat Script :

Save.

Now come to Page Layout
Click on Add a Gadget (Below Header)
Choose HTML/JavaScript
Copy and paste below code inside it,

<div class="lavalamp dark">
<ul>
<li class="active"><a href="">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contacts</a></li>
<li><a href="#">Back to Article</a></li>
<li><<a href="#">How it Works?</a></li>
</ul>
<div class="floatr"></div>
</div>

NOTTE : Replace # with the links
Replace Home,About,Blog. etc. with your link text which you want to appear on the menu.
If you want to change background color of the menu then replace <div class="lavalamp dark"> with one of the code below.

Finally save your widget and you are done.

I have tried my best to keep this tutorial as easy as possible,if still you are getting any single problem then feel free to share it below via comments,I will try to give reply as soon as time allows.

Menambah Scroll Pada Label II

Menambah Scroll Pada Label II - Berikut ini cara kedua membuat scroll pada label/ categories pada blog. Jika sebelumnya saya berbagi cara Trik Menambah Scroll Pada Label dan itu langkahnya terlalu panjang.

Yang satu ini adalah cara nya dijamin tidak rumit.

Cara kedua membuat scroll pada label/ categories pada blog, sebagai berikut :

1. login ke blog sobat
2. kemudian Rancangan >> edit HTML >> centang 'Expand Template Widget' (Jangan lupa backup dulu)
3. Cari kode ]]></b:skin>
4. Tekan Ctrl + F untuk memudahkan mencari
5. kalau sudah ketemu tambahkan code di bawah ini tepat di atas code ]]></b:skin>

#Label2 .widget-content{height:200px;width:auto;overflow:auto;background: #EBEBEB;

6. Save dan lihat hasilnya

NOTE : Angka 200px yang berwarna merah adalah tinggi kotak scroll. bisa sobat ganti sesuai selera sobat,,,
Sedangkan yang berwarna biru adalah code untuk background yang bisa sobat ganti sesuai selera juga atau sesuaikan dengan warna background pada sidebar sobat. kalo masih bingung milih code warnanya bisa sobat liat di sini Code Warna HTML

Mengubah LinkWithin Hanya Di Halaman Posting

Mengubah LinkWithin Hanya Di Halaman Posting - Linkwithin merupakan salah satu widget yang mempermudah kita untuk membuat related post secara thumbnail dengan sekali daftar saja. Namun, bila kita memasang widget LinkWithin pada blog,sering terjadi widget ini selain muncul di halaman posting, juga akan tampil di beranda atau home page di bawah posting. Widget yang muncul di beranda ini akan membuat waktu loading home page blog menjadi lebih lama. Nah, agar loading home page menjadi lebih ringan, kita buat saja widget LinkWithin ini tampil atau muncul hanya di halaman posting. Bagaimana caranya? Silakan simak langkah-langkah untuk hide widget LinkWithin di home page berikut ini. Namun sebelumnya, pastikan sobat telah memasang widget LinkWithin pada blog sobat.

1. Masuk ke akun Blogger sobat.

2. Klik Template > Edit HTML.

3. Klik Download Template Lengkap untuk mem-backup template. Hal ini dilakukan untuk berjaga-jaga kalau nanti ada kesalahan dalam pengeditan, kita dapat dengan mudah mengembalikan template ke seperti sebelumnya.

4. Beri tanda centang pada Expand Template Widget.

5. Cari kode seperti di bawah ini. Gunakan Ctrl + F, kemudian masukkan kata kunci LinkWithin sebagai kata kunci utamanya.

<b:widget id='HTML2' locked='false' title='LinkWithin' type='HTML'>
<b:includable id='main'><data:content/></b:includable>
</b:widget>

6. Tambahkan kode <b:if cond='data:blog.pageType == "item"'> setelah kode <b:includable id='main'> dan </b:if> sebelum </b:includable> sehingga hasilnya menjadi seperti di bawah ini.

<b:widget id='HTML2' locked='false' title='LinkWithin' type='HTML'>
<b:includable id='main'><b:if cond='data:blog.pageType == "item"'><data:content/></b:if></b:includable>
</b:widget>

7. Klik tombol SIMPAN TEMPLATE. dan lihat hasilnya.

-==: SELAMAT MENCOBA :==-

Cara Mengetahui dan Menampilkan Number Of Queries Pada WordPress

Number of queries atau jumlah query yang biasanya kita jumpai bertujuan untuk memberi informasi tentang berapa kali blog tersebut mengakses database nya. Informasi ini cukup penting, terutama bagi pemilik blog.

Semakin sedikit jumlah permintaan ke database maka semakin ringan blog tersebut. Number of queries dan waktu yang dibutuhkan juga berpengaruh bagi optimasi SEO, terutama SEO On Page. Hal ini dikarenakan query tersebut bisa dikatakan sebagai bagian dari cms wordpress itu sendiri.

Jadi jika sobat menjumpai blog yang menampilkan number of queries serta page load time nya (misal 1,277 seconds) bukan berarti blog tersebut bisa diakses dengan sangat ringan sesuai waktu yg ditampilkan tersebut. Itu hanyalah waktu yang dibutuhkan oleh PHP untuk mengaksees databasenya (yang menggunakan MySql).

Jika sobat tertarik dan ingin mengetahui bagaimana menampilkan berapa jumlah kueri ke database sobat, sobat bisa menambahkan kode yang sangat simple pada footer.php, kodenya adalah seperti berikut ini

<?php echo get_num_queries(); ?> queries in <?php timer_stop(1); ?> seconds.

..: SELAMAT MENCOBA :..

Membuat Recent Comment With Avatar

Tutorial selanjutnya adalah membuat recent comments yang dilengkapi dengan gambar avatar. widget ini biasanya dipasang disidebar. kegunaan widget ini mengingatkan pada pemilik blog akan komentar yang masuk jadi sebagai pengingat juga untuk membalas komentar dari pengunjung pada blog kita.
Jika sebelumnya saya memposting Cara Mengembalikan Recent Comment With Avatar Dengan Recent Comment Bawaan Blogger, maka sekarang sobat akan saya tunjukkan Membuat Recent Comment With Avatar.
sobat penasaran, seperti apa bentuk recent comments dilengkapi dengan gambar avatar itu. lihat gambar dibawah ini :

Bagaimana?? sobat tertarik ingin membuatnya. Baiklah, saya akan memberikan tutorial cara membuatnya.
Langkah-langkahnya seperti berikut ini :

Login ke akun blogger sobat.
Pada Tata Letak ➨ Tambah Gadget (saya sarankan di bagian paling bawah dan jangan di beri judul)
Pilih HTML/Java Script ➨ Setelah itu copy kode berikut dan paste atau letakkan di dalamnya!

<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://bloggerblogwidgets.googlecode.com/svn/trunk/w2b-recent-comments-w-gravatar.js"></script>
<script type="text/javascript" src="http://onetroverlight.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=7"></script>

Save dan lihat hasilnya.

NOTE : silahkan ganti kode yang berwarna merah dengan url blog sobat. angka 5 (Num comments = 5) adalah jumlah komentar yang akan ditampilkan. silahkan anda melakukan penyesuaian sendiri.

..: SELAMAT MENCOBA :..

Cara Mengembalikan Recent Comment With Avatar Dengan Recent Comment Bawaan Blogger

Cara Mengembalikan Recent Comment With Avatar Dengan Recent Comment Bawaan Blogger.

Apa kabar sobat blogger? semoga sobat tetap sehat selalu.

Kali ini, saya akan berbagi cara bagaimana cara mengganti kembali recent comments with avatar dengan recent comment bawaan blogger. terutama untuk sobat yang mungkin bingung widget Recent Comment With Avatar yang tidak lagi berfungsi.

Cara nya cukup mudah sekali, cobalah beberapa langkah berikut ini :

Caranya yaitu :

log in ke akun blogger sobat -> Tata Letak
klik add gadget, pilih sesuai sobat ingin meletakkannya
pilih feed elements dan masukkan URL Feed blog sobat
masukkan kode dibawah ini pada kolom URL feed

http://onetroverlight.blogspot.com/feeds/comments/default

selanjutnya lakukan pengaturan sesuai keinginan sobat.
selesai dan lihat hasilnya.

NOTE : gantilah tulisan yang berwarna merah dengan URL blog sobat

..: SELAMAT MENCOBA :..

Tingkatkan Backlink Dengan Backlink Booster

Bagi sobat-sobat yang mungkin menginginkan Backlink secara massal, saya mungkin punya sedikit info tentang itu. Disini saya punya info untuk mendapatkan Backlink secara massal dengan cara menggunakan Backlink Booster.

Sobat hanya perlu menjalankan aplikasinya dan kemudian silahkan sobat bersantai ria sambil menunggu aplikasi ini bekerja tanpa batas.

Cara Menampilkan Widget Hanya Pada Homepage Atau Postingan Saja.

Cara Menampilkan Widget Hanya pada Homepage/ Postingan Saja.

Buat sobat blogger yang ingin memberikan kesan yang berbeda pada halaman homepage dengan halaman postingan. Mungkin cara ini adalah cara yang tepat untuk sobat.

Cara ini juga digunakan untuk menyiasati widget yang seharusnya tampil di homepage saja namun ikut masuk kedalam laman postingan, ataupun sebaliknya.

1. Cara Menampilkan Widget Hanya pada Homepage Saja

Tambahkan kode berikut:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
content widget
</b:if>

2. Cara Menampilkan Widget Hanya pada Postingan Saja

Tambahkan kode berikut:

<b:if cond='data:blog.pageType == "item"'>
content widget
</b:if>

Caranya sebagai berikut:

Masuk ke Dashboard -> Template -> edit HTML (centang Expand Template Widget)
Cari kode <b:widget id='HTML . . .

Misalnya pada sebuah widget Statistik dengan kode HTML3, dengan maksud Menampilkan Widget Hanya pada Homepage Saja

<b:widget id='HTML3' locked='false' title='Statistik' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

kode <b:if cond='data:blog.url == data:blog.homepageUrl'> dan </b:if> dalah kode yang wajib sobat tambahkan pada widget yang ingin sobat tampilkan pada homepage atau postingan saja. Sedangkan kode yang berwarna biru adalah nama gadget sobat, (misal : label, arsip blog, populer post dll)

-==™ SELAMAT MENCOBA ™==-

Membuat Drop Down Efek Sun Rise

Membuat menu navigasi Drop Down Efek Sun Rise

Menu navigasi digunakan untuk memudahkan mencari kategori postingan pada blogger dengan judul dan label yang menarik. Salah satu menu navigasi horisontal dengan script css yang bisa dijadikan alternatif untuk dipasang di blog adalah menu navigasi horisontal/dropdown menu dengan efek sun rise. Seperti gambar di bawah ini:

Menu navigasi di atas terkesan rounded dengan warna coklat kekuningan mengarah ke warna orange disertai warna putih di belakang teks.

Jika sobat ingin menggunakan Menu navigasi harizontal dengan efek sun rise ini, berikut ini scipt kode untuk membuat nya. Untuk membuat menu navigasi di atas, berikut ini langkah-langkahnya :

Masuk ke dashboard blogger sobat
Pilih Template > Edit HTML > Cari kode ]]></b:skin>
Masukkan kode berikut, diatas kode ]]></b:skin>

@charset "utf-8";/* CSS Document */
body{padding: 25px;}
/*^'^ Navigation Structure ^'^*/.nav-container-outer{background: #990000;padding: 0px;height: 74px;background: url(http://i48.tinypic.com/hur12s.jpg);}.float-left{float: left;}.float-right{float: right;}.nav-container .divider{display:block;font-size:1px;border-width:0px;border-style:solid;}.nav-container .divider-vert{float:left;width:0px;display: none;}.nav-container .item-secondary-title{display:block;cursor:default;white-space:nowrap;}.clear{font-size:1px;height:0px;width:0px;clear:left;line-height:0px;display:block;float:none;}.nav-container{position:relative;zoom:1;margin: 0 auto;}.nav-container a, .nav-container li{float:left;display:block;white-space:nowrap;}.nav-container div a, .nav-container ul a, .nav-container ul li{float:none;}.nav-container ul{left:-10000px;position:absolute;}.nav-container, .nav-container ul{list-style:none;padding:0px;margin:0px;}.nav-container li a{float:none}.nav-container li{position:relative;}.nav-container ul{z-index:10;}.nav-container ul ul{z-index:20;}.nav-container ul ul ul{z-index:30;}.nav-container ul ul ul ul{z-index:40;}.nav-container ul ul ul ul ul{z-index:50;}li:hover>ul{left:auto;}#nav-container ul {top:100%;}#nav-container ul li:hover>ul{top:0px;left:100%;}
/*^'^ Primary Items ^'^*/ #nav-container a{ padding:7px 17px 7px 18px;margin: 10px 0px 0px 0px;color: blue;font-family: Trebuchet MS, Arial, sans-serif, Helvetica;font-size:14px;text-decoration:none;font-weight: bold;background: url(http://i50.tinypic.com/an25cp.jpg);background-repeat: no-repeat;background-position: top;}
#nav-container a:hover{color: #6C3600;background: url(http://i49.tinypic.com/md1emv.jpg);background-repeat: no-repeat;background-position: center;}
/*^'^ Secondary Items Container ^'^*/ #nav-container div, #nav-container ul{ padding:10px 4px 10px 4px;margin:0px 0px 0px 0px;background: url(http://i49.tinypic.com/xauknl.jpg);background-repeat: repeat-x;background-color: #FF9900;border-bottom: 1px solid #CA6500;}
/*^'^ Secondary Items ^'^*/ #nav-container div a, #nav-container ul a{ padding:3px 10px 3px 6px;background-color: #FFFFFF;background: url(http://i48.tinypic.com/14l21jb.jpg);background-repeat: no-repeat;background-position: 0px 22px;font-size:11px;border-width:0px;border-style:none;margin: 0px 0px 0px 0px;width: 149px;}
/*^'^ Secondary Items Hover State ^'^*/ #nav-container div a:hover, #nav-container ul a:hover{ background-color: #FFFFFF;background: url(http://i48.tinypic.com/14l21jb.jpg);background-repeat: no-repeat;color:#CC0000;}
/*^'^ Secondary Item Titles ^'^*/ #nav-container .item-secondary-title{ cursor:default;padding:4px 0px 3px 7px;color: #6C3600;font-family: Arial, Trebuchet MS, Arial, sans-serif, Helvetica;font-size:11px;background: url(http://i47.tinypic.com/or1755.jpg);background-repeat: no-repeat;font-weight:bold;}
/*^'^ Horizontal Dividers ^'^*/ #nav-container .divider-horiz{ border-top-width:1px;margin:5px 5px;border-color: #C16100;}
/*^'^ Vertical Dividers ^'^*/ #nav-container .divider-vert{ border-left-width:1px;height:15px;margin:4px 2px 0px 2px;border-color:#AAAAAA;}

Simpan.
Sekarang sobat masuk ke Tata Letak > add HMTL/JavaScript
Masukkan kode script berikut ini :

<div class="nav-container-outer">
<img src="http://i49.tinypic.com/2rcu35h.jpg" alt="" class="float-left" />
<img src="http://i49.tinypic.com/2mww0vr.jpg" alt="" class="float-right" />
<ul id="nav-container" class="nav-container">
<li><a class="item-primary" href="#">HOME</a>
</li>
<li><span class="divider divider-vert" ></span></li>
<li><a class="item-primary" href="#">Menu 2</a>
<ul style="width:150px;">
<li><a href="#">Menu 2.1</a></li>
<li><a href="#">Menu 2.2</a></li>
<li><a href="#">Menu 2.3</a></li>
</ul></li>
<li><span class="divider divider-vert" ></span></li>
<li><a class="item-primary" href="#">Menu 3</a>
<ul style="width:150px;">
<li><a href="#">Menu 3.1</a></li>
<li><a href="#">Menu 3.2</a></li>
<li><a href="#">Menu 3.3</a></li>
</ul></li>
<li><span class="divider divider-vert" ></span></li>
<li><a class="item-primary" href="#">Menu 4</a>
<ul style="width:150px;">
<li><a href="#">Menu 4.1</span></li>
<li><a href="#">Menu 4.2</a></li>
</ul></li>
<li><span class="divider divider-vert" ></span></li>
<li><a class="item-primary" href="#;">Menu 5</a>
<ul style="width:150px;">
<li><a href="#">Menu 5.1</span></li>
<li><a href="#">Menu 5.2</a></li>
<li><a href="#">Menu 5.3</a></li>
<li><a href="#">Menu 5.4</a></li>

</ul></li>
<li><span class="divider divider-vert" ></span></li>
<li><a class="item-primary" href="#;">Menu 6</a>
</li>
<li><span class="divider divider-vert" ></span></li>
<li><a class="item-primary" href="#;">Menu 7</a>
</li>

<li class="clear"> </li></ul>
</div>

Save dan Lihat hasilnya.

Catatan:

Pada script di atas

Ganti semua tanda # pada href="#" dengan url target atau url tujuan.

Teks Menu1 , Menu2, ..., diganti dengan teks yang akan ditampilkan di menu

Agar script bisa berfungsi dengan baik, maka sebaiknya dicopy ke notepad atau word pad kemudian diedit sesuai kebutuhan blog sobat.

-==™ SELAMAT MENCOBA ™==-

one troverlight

TutorialWordpress

Latest Post

Dapat 20 Follower Dengan Sekali Klik Disini

Fancy CSS3 & jQuery Lavalamp Menu For Blogger

Menambah Scroll Pada Label II

Mengubah LinkWithin Hanya Di Halaman Posting

Cara Mengetahui dan Menampilkan Number Of Queries Pada WordPress

Membuat Recent Comment With Avatar

Cara Mengembalikan Recent Comment With Avatar Dengan Recent Comment Bawaan Blogger

Tingkatkan Backlink Dengan Backlink Booster

Cara Menampilkan Widget Hanya Pada Homepage Atau Postingan Saja.

Membuat Drop Down Efek Sun Rise

Entri Populer

Trending Topic

Moto GP News

Random Post

Popular Post

Label