Eko Yulianto

Cara membagi gadget menjadi dua kolom

in Tips Dan Trik - on Saturday, April 21, 2012 - No comments

Ada kalanya ketika kita sudah merasa pas dengan template yang kita pilih, ternyata kita masih saja merasa ada yang masih kurang dengan tampilan blog kita.
Tapi memang betul...., setiap template memiliki kelebihan dan kekurangannya masing - masing. Mungkin dari segi konten sudah bagus tapi tampilan warna kurang pas, dari segi tampilan dan konten sudah serasi tapi karena sudah padat, mungkin kita masih butuh ruang lagi. Lalu bagai mana....?

OK..., seperti yang dirasakan oleh salah satu sobat blogger dan atas permintaannya mungkin trik membagi gadget sidebar menjadi dua kolom akan membantu mengurangi masalah diatas. Untuk itu kali ini akan saya jelaskan lagi cara membagi gadget sidebar menjadi dua kolom, seperti pada gambar berikut :

Tapi yang jelas trik yang saya berikan ini digunakan untuk membagi gadget menjadi dua kolom. Baik gadget yang ada pada bagian Sidebar (bagian samping), header (atas), maupun footer (bawah).

Bila anda berminat silahkan anda ikuti langkah - langkah dibawah ini :

1. Login ke blogger dengan ID anda.

2. Klik Rancangan.

3. Dan KLik tab Edit HTML.

4. Cari kode di bawah ini atau yang mirip dengan kode ini :

]]></b:skin>

5. Copy kode di bawah ini dan taruh tepat sebelum kode ]]></b:skin> :

#kolom-kiri {
width: 49%;
float: left;
}
#kolom-kanan {
width: 49%;
float: right;
}

6. Cari kode pada bagian sidebar, misalnya seperti kode berikut :

Catatan:
Pada bagian sidebar, setiap template belum tentu memiliki "id" yang sama. Dan pada langkah ini, saya berikan contoh dengan id='sidebar-wrapper'.

Tapi yang jelas... seperti yang saya katakan diatas, trik yang saya berikan ini digunakan untuk membagi gadget menjadi dua kolom. Baik gadget yang ada pada bagian Sidebar (bagian samping), header (atas), maupun footer (bawah).

Dan yang perlu diperhatikan adalah bentuk kode dari konten yang berisi gadget, yaitu seperti berikut :

7. Sisipkan kode dibawah ini diantara </b:section> dan </div> :

<b:section class='sidebar' id='kolom-kiri' showaddelement='yes'>
<b:widget id='Text500' locked='false' title='kolom-kiri' type='Text'/>
</b:section>

<b:section class='sidebar' id='kolom-kanan' showaddelement='yes'>
<b:widget id='Text501' locked='false' title='kolom-kanan' type='Text'/>
</b:section>

<div style="clear: both;"></div>

Sehingga tampak seperti berikut :

<div id='sidebar-wrapper'>

<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label99' locked='false' title='Labels' type='Label'/>
</b:section>

<b:section class='sidebar' id='kolom-kiri' showaddelement='yes'>
<b:widget id='Text500' locked='false' title='kolom-kiri' type='Text'/>
</b:section>

<b:section class='sidebar' id='kolom-kanan' showaddelement='yes'>
<b:widget id='Text501' locked='false' title='kolom-kanan' type='Text'/>
</b:section>

<div style="clear: both;"></div>

</div>

8. SIMPAN TEMPLATE

Selesai...., silahkan anda lihat hasilnya....
Selamat mencoba dan Semoga bermanfaat....

Cara hanya menampilkan judul posting saja pada halaman depan blog

in Tips Dan Trik - on Saturday, April 21, 2012 - 1 comment

Update kembali trik cara hanya menampilkan judul postingnya saja pada halaman depan atau home page. Mengingat cara ini memang sangat efisien dan sangat menghemat tempat pada halaman depan sebuah blog. Biasanya cara ini digunakan karena artikel, sidebar ataupun konten yang ditampilkan sudah padat. Tapi ada juga yang hanya sekedar ingin tampil lebih praktis dan lebih meringankan pada saat loading ketika blog tersebut dibuka.
Untunglah ada sobat blogger yang mengeluhkan, bahwa kode css yang saya berikan tidak bekerja dengan baik.... terima kasih sobat. Dan ternyata setelah saya cek kembali, ada beberapa kode yang kurang, dan kini kode yang saya berikan dibawah sudah normal kembali, maka dari itu artikel ini saya update kembali ... bagi yang memerlukan trik ini silahkan anda coba dan saya pastikan akan berhasil tanpa keluhan.

OK... bila anda berminat, anda bisa ikuti lankah - langkah dibawah ini :

1. Login ke blogger dengan ID anda.

2. Klik Rancangan.

3. Dan KLik tab Edit HTML.
4. centang kotak Expand Template Widget
4. cari kode ]]></b:skin> dan pastekan kode dibawah ini tepat di bawah kode ]]></b:skin>

<style type='text/css'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
.post-body, .post-footer, .jump-link,
.post-timestamp, .reaction-buttons,
.star-ratings, .post-backlinks,
.post-icons, .date-header{display:none;}
</b:if>
</b:if>
</style>

6. Simpan Template.

Selamat mencoba ya... Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......, Terima kasih.

Cara membuat related post dibawah posting blogger

in Bloging - on Friday, April 20, 2012 - No comments

Cara membuat related post dibawah posting blogger

Baiklah, sekarang langsung saja ikuti panduan dan tutorial cara membuat related post atau artikel terkait di bawah halaman posting berikut ini:

1. Login menggunakan Username dan Password google account atau gmail Anda di blogger.com

2. Dari halaman dasbor/dashboard, pilih dan klik Design atau Rancangan.

3. Klik Edit HTML dan tandai Expand Widget Template (sebaiknya download dulu template Anda sebagai backup)

4. Cari kode ini <data:post.body/>

5. Letakkan script code berikut ini di bawah kode diatas (lihat kode di nomor 4):

<b:if cond='data:blog.pageType == "item"'>
<H2>Artikel Terkait:</H2>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 9999;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k<20; k++) label = label.replace("%20", " ");
var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('albri').appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = "<data:label.name/>";
var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
<script type="text/javascript">RelPost();</script>
</div>
</b:if>

6.Simpan dan akhirnya selesai deh

Cara Membuat judul animasi bergerak dan berwarna -warni

in Tips Dan Trik - on Friday, April 20, 2012 - No comments

Pernah lihat judul/kalimat animasi yang bergerak dan berwarna warni di Blog.

Yuk simak langkah2nya :

Masuk ke link berikut http://www.flamingtext.com
Pilih bentuk yang anda suka
Tulis kalimat anda di kolom logo text kemudian atur font size dan warna sesuai keinginan.
Klik Get <HTML>
Masukan alamat email anda
setelah itu copy scriptnya

Selanjutnya
1. Desain ( rancangan )
2. Tata letak
3. Add a gadget
4. Html/Java Script
5. Pastekan Script tadi
6.Simpan Gadget PAling atas

Membuat Animasi Pada Sidebar Widget

in Tips Dan Trik - on Friday, April 20, 2012 - No comments

Sepertinya ketagihan neh buat Tutorial Blog hehehe kali ini tentang Membuat Animasi Pada Sidebar Widget ... tapi sebelum dimulai ketawa dulu .. wakakakakak .. hahaha .. hihihi ... huhuhu .. itu artinya ucapan terimakasih buat sobat-sobat eRGe semua, karena udah ngasih respon pada artikel sebelum nya tentang Membuat Animasi Judul Blog. Untuk Posting kali ini tetap gak jauh benda ama yang lalu masih diseputaran kilometer Animasi (hehehe) tapi yang ini buat Sidebar Widget sob, untuk contoh nya bisa dilihat pada Blog ini itupun kalo masih ada hehehe mana tau nanti di copot (halah melenceng terus neh). ini dikarenakan ada direquest ama temen lewat shoutmix makanya dipostingin, padahal caranya sangat mudah tidak butuh waktu lama sampai bermenit-menit tapi cukup dengan 5 menit saja paling lama (bagi yang tau maksudnya ... hehehe .. halah sok-sok an)

Untuk Penerapan Tip ini saya pilih Template buatan Anak Negeri sendiri yaitu Megazine R 1-3 madein nya Kang Rohman The Master Of Blog, bagi sobat yang pengen pinter kunjungi aja blog Beliau ini, disana puluhan Tips dan Triks Ngeblog sudah menanti sobat, nah bagi sobat yang masih bingung atau pengen bertanya, langsung aja chat karena fasilitas nya sudah disediakan, para pakar Blog yg ada disana pun siap mengajari sobat ini pun kalo mereka tau (hehehe) seperti Kang Abeh atau Tutor, aaLiL Master Seo, easyblogtrick, noe, Chempluk, Yoyok, Otak's, GONDES, KOESnadi dan masih banyak yang lain, gak rugi deh kalo mampir kesana .. ilmu semua.
Sekarang langsung pada pokok pembicaraan Membuat Animasi Pada Sidebar Widget .. sebenar nya Animasi ini tidak memakai script tapi Animasi image gif sebelum nya sobat harus menyediakan dulu image nya .. nah untuk itu saya ngasih 2 contoh Image gif dibawah ini

Alamat Link Image 1 : http://i560.photobucket.com/albums/ss44/erge32/RGsdbar.gif
Alamat Link Image 2 : http://i560.photobucket.com/albums/ss44/erge32/EkaSidebar.gif

Langkah Pertama :
Login dulu ke bloger > Tata Letak > Edit HTML > Kemudian cari Kode seperti di bawah ini

pake ctrl + f supaya cepet nyari kemudian isikan .sidebar h2

.sidebar h2, .middlecol h2, .bottom h2{
color: $sidebarcolor;
text-transform: capitalize;
font-size: 14px;
font-family: Arial, Tahoma, Verdana;
font-weight: bold;
margin: 0px 0px 5px 0px;
padding: 0px 0px 2px 0px;
border-bottom:1px solid $bordercolor;
}

Nah kalo udah ketemu sobat tinggal tambahin aja Background nya seperti dibawah ini

background:#f7f7f7 url(http://i560.photobucket.com/albums/ss44/erge32/RGsdbar.gif?imgmax=800)repeat;

atau

background:#f7f7f7 url(http://i560.photobucket.com/albums/ss44/erge32/EkaSidebar.gif?imgmax=800)repeat;

terserah yang mana dipakai image nya ... jadi kodenya seperti di bawah ini

kalau udah selesai simpan template kemudian liat blognya .. kalau gak ada aral melintang pasti sidebar nya udah berubah ada lampu-lampu nya .. hehehe

Mudah-mudah tip ini ada manfaat nya bagi kita semua ... amin, sebelum nya terima kasih bagi sobat-sobat yang mau mengomentari artikel ini ... salam.

Eko Yulianto

Cara membagi gadget menjadi dua kolom

Cara hanya menampilkan judul posting saja pada halaman depan blog

Cara membuat related post dibawah posting blogger

Cara Membuat judul animasi bergerak dan berwarna -warni

Membuat Animasi Pada Sidebar Widget

Categories

Recent Comments

Popular Posts

advertiser

About