D-EFR: Tips and trik BLOG

Tampilkan postingan dengan label Tips and trik BLOG. Tampilkan semua postingan

Widget Share Egg Yang Bisa Buka Tutup Untuk Blog

Widget Share Egg Yang Bisa Buka Tutup Untuk Blog - Kali ini saya akan membahas mengenai Tips Blog yaitu cara membuat Widget Share Egg Yang Bisa Buka Tutup untuk blog. Mungkin untuk beberapa orang tidak terlalu mengenal widget ini, nah disini saya akan menjelaskan nya terlebih dahulu apa itu Widget Share Egg Buka Tutup. Widget ini berfungsi untuk mengirim artikel atau blog ke berbagai macam jejaring sosial, yang mana widget ini ditutupi sebuah telur, jika kursor menyentuh telur tersebut maka telur tersebut akan terbuka, penasaran silahkan ikuti langkah-langkah di bawah ini untuk membuat widget tersebut.

1. Login ke Blog kamu.
2. Pilih Edit HTML > Cari kode </head>
3. Letakan kode di bawah ini tepat di atas kode </head>

<script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({publisher: "ur-98d377f-bdd3-9ad1-fbe5-2a678f0a60ee", onhover:false}); </script>
<link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>

4. Selanjut nya cari kode </body>
5. Letakan kode di bawah ini teapt di atas kode </body>

<div style='position: fixed; bottom: 2%; left: 2%;'>
<div class='shareEgg' id='shareThisShareHeart'/>
</div>
<script type='text/javascript'>stlib.shareEgg.createEgg('shareThisShareHeart', ['facebook','twitter','pinterest','linkedin','stumbleupon','email','sharethis'], {title:' <data:blog.pageTitle/>',url:'<data:blog.url/>',theme:'shareheart'});</script><a href="http://www.d-efr.blogspot.com/">Technology Blog</a>

6. Klik dulu Pertinjauan dan lihat apa yang terjadi, setelah itu baru simpan.

Cara Buat User Online Status

Buat para blogger mengetahui seberepa besar pengunjung blognya itu penting.yaaa supaya tau seberapa banyak orang yang mengunjungi blog kita . dalam postingan kali ini saya akan menjelaskan bagaimanaCara Buat User Online Status di blog,dengan begitu kamu bisa tau seberapa banyak pengunjung blog kamu dan berapa orang yang sedang online di blog kamu. silakan liat contoh User Online Statusyang ada dibawah ini.

Untuk membuat User Online Status di blog silakan ikuti tutorial Cara Buat User Online Status Berikut ini :

1.Klik http://www.histats.com/

2.Klik "Register" pada menu tab di website tersebut.

3.Isikan data diri anda dengan benar pada formulir pendaftaran tersebut.

4.Setelah kamu mengisi formulir pendaftaran dengan benar silakan Klik "Continue".

5.Pilih tampilan histats counter yang kamu inginkan,kemudian klik "Choose a counter from this category"

6.Selanjutnya kasih tanda titik pada radio button yang ada disamping tampilan histats yang kamu inginkan.

7.Selanjutnya Klik "Continue" Yang ada di bagian bawah.

8.Klik menu drop-down, pilih kategori yang ada untuk menampilkan counter. pilihan adalah: pengunjung hari ini, Page views today, User online, Total pengunjung, dan total tampilan halaman. kosongkan jika kamu tidak ingin menampilkan pilihan tersebut.

9.Kemudian klik "Continue"

10.Tunggu beberapa saat sampai histats counter terupdate.

11.Setelah itu copy code HTML dari histats counter ke blog kamu.

CARA-NYA :

1.Login Ke blogger dengan ID kamu.

2.Kemudian klik Tab menu "Tata Letak" lalu Klik "Tambah Gadget" pada elemen template.

3.Kemudian pilih kategori HTML/javascript pada jendela baru setelah kamu mengklik "Tambah Gadget"

4.Lalu paste Kode HTML dari histats counter di dalamnya .jangan lupa klik "save"

5.Selesai,tinggal kamu lihat hasilnya,..

Mungkin kalian masih pada bingung dengan judul yang saya berikan.Nah kali ini saya akan memberikan cara bagaimana membuat Kotak Scroll pada Sidebar.Contohnya kira2 seprti ini :

Ok dari pada berlama-lama saya langsung kasih aja tutornya :

1. Sign in Blogger

2. Layout

3. Edit HTML

4. Jangan lupa berikan tanda centang pada Expand Widget Templates

5. Cari kode ini :

]]></b:skin>

6. Tambahkan kode ini diatasnya :

#scrolling {
overflow: auto; height: 100px; width: 94%;
background-color:#EFEFEF; border:1px solid #777;
margin: 0px auto; padding:5px; font-size: 14px;
color: #999; text-align: left;
}

7. Cari kode ini :

<b:widget id='LinkList1' locked='false' title='Blogroll' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul> <b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

8. Tambahkan kode yang berwarna hijau dibawah ini diantara kode-kode diatas :

<b:widget id='LinkList1' locked='false' title='Blogroll' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2></b:if>
<div id='scrolling'>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</div>
</b:includable>
</b:widget>

Catatan : Silahkan ganti tulisan yang berwarna diatas dengan warna sesuai dengan keinginan kalian.

Kali ini saya akan memberikan tutorial bagaimna cara membuat link dalam suatu blog atau website menjadi warna-warni gitu.Contoh seperti di blog saya yang satunya http://yudhim.blogspot.com/. Kalo masih pada bingung silahkan kalian coba dulu aja yah??

1. Sign in Blogger

2. Layout

3. Edit HTML

4. Jangan lupa berikan tanda centang pada Expand Widget Templates

5. Cari kode <head>

6. Tambah kode ini dibawahnya :

7. Save dan lihat hasilnya.

Apa kalian pernah melihat blog atau website yang tulisan home, posting lama dan posting barunya berupa gambar. Nah kali ini saya akan memberikan tutorial bagaimana mengganti tulisan-tulisan tersebut dengan gambar.Ok deh dari pada berlama-lama langsung saja kita mulai tutorialnya.

1. Sign in Blogger

2. Layout

3. Edit HTML

4. Jangan lupa berikan tanda centang pada Expand Widget Templates

5. Cari kode di bawah ini :

<b:if cond='data:newerPageUrl'>

<span id='blog-pager-newer-link'>

<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>

</span>

</b:if>

6. Ganti tulisan hijau diatas dengan kode di bawah ini :
<img src="http://alien.keren.googlepages.com/first.gif"/>

7. Kemudian cari kode ini :

<b:if cond='data:olderPageUrl'>

<span id='blog-pager-older-link'>

<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>

</span>

</b:if>

8. Ganti tulisan yang berwarna hijau dengan kode di bawah ini :
<img src="http://alien.keren.googlepages.com/last.gif"/>

9. Lalu cari kode ini :

<b:if cond='data:blog.homepageUrl != data:blog.url'>

<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>

<b:else/>

<b:if cond=’data:newerPageUrl’>

<a class=’home-link’ expr:href=’data:blog.homepageUrl’><data:homeMsg/></a>

</b:if>

</b:if>

10. Ganti tulisan berwarna hijau diatas dengan kode di bawah ini :
<img src="http://alien.keren.googlepages.com/home.gif"/>

11. Save dan lihat hasilnya.

akhirnya selesai juga deh....selamat mencoba

Cara Membuat Multi Menu Horizontal Drop Down Di Blog

Menu Drop Down - Kali ini saya akan membahas Cara Membuat Multi Menu Horizontal Drop Down Di Blog, menu yang satu ini berbeda dengan menu drop down lainnya, yang satu ini menu drop down nya bisa bercabang lagi lebih banyak, menu ini lumayan bermanfaat bagi anda yang ingin menyimpan link yang cukup banyak.

Cara Membuat Multi Menu Drop Down :
1. Login ke Blog kamu.
2. Pilih Menu Edit HTML, cari kode ]]></b:skin>
3. Setelah ketemu letakan kode di bawah ini tepat di atas kode nomor 3.

.ddsmoothmenu{
font: bold 12px Verdana;
background: #414141; /*background of menu bar (default state)*/
width: 100%;
}
.ddsmoothmenu ul{
z-index:100;
margin: 0;
padding: 0;
list-style-type: none;
}
/*Top level list items*/
.ddsmoothmenu ul li{
position: relative;
display: inline;
float: left;
}
/*Top level menu link items style*/
.ddsmoothmenu ul li a{
display: block;
background: #414141; /*background of menu items (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}
* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}
.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{
color: white;
}
.ddsmoothmenu ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/
background: black;
color: white;
}
.ddsmoothmenu ul li a:hover{
background: black; /*background of menu items during onmouseover (hover state)*/
color: white;
}
/*1st sub level menu*/
.ddsmoothmenu ul li ul{
position: absolute;
left: 0;
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;
}
/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{
display: list-item;
float: none;
}
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{
top: 0;
}
/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}
/* Holly Hack for IE \*/
* html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/

/* ######### CSS classes applied to down and right arrow images ######### */
.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}
.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}
/* ######### CSS for shadow added to sub menus ######### */
.ddshadow{
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
background: silver;
}
.toplevelshadow{ /*shadow opacity. Doesn't work in IE*/
opacity: 0.8;
}

4. Selanjutnya cari kode </head>,setelah ketemu letakan script di bawah ini tepat di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://btemplatescripts.googlecode.com/files/ddsmoothmenu.txt' type='text/javascript'/>

5. Selanjutnya cari kode yang mirip dengan kode di bawah ini.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Banten-Xp(Header)' type='Header'/>
</b:section>
</div>

Kode di atas merupakan kode bagian Header dan untuk yang berwarna merah biasanya itu adalah judul header blog anda, jadi cari saja kode yang mirip kayak di atas. Dan setelah ketemu letakan kode di bawah ini tepat di bawah kode bagian akhir kode header di atas (letakan tepat di bawah kode yang berwarna biru).

<div class='ddsmoothmenu' id='smoothmenu1'>
<ul>
<li><a href='http://banten-xp.blogspot.com/'>Item 1</a></li>
<li><a href='#'>Folder 0</a>
<ul>
<li><a href='#'>Sub Item 1.1</a></li>
<li><a href='#'>Sub Item 1.2</a></li>
<li><a href='#'>Sub Item 1.3</a></li>
<li><a href='#'>Sub Item 1.4</a></li>
<li><a href='#'>Sub Item 1.2</a></li>
<li><a href='#'>Sub Item 1.3</a></li>
<li><a href='#'>Sub Item 1.4</a></li>
</ul>
</li>
<li><a href='#'>Folder 1</a>
<ul>
<li><a href='#'>Sub Item 1.1</a></li>
<li><a href='#'>Sub Item 1.2</a></li>
<li><a href='#'>Sub Item 1.3</a></li>
<li><a href='#'>Sub Item 1.4</a></li>
<li><a href='#'>Sub Item 1.2</a></li>
<li><a href='#'>Sub Item 1.3</a></li>
<li><a href='#'>Sub Item 1.4</a></li>
</ul>
</li>
<li><a href='#'>Item 3</a></li>
<li><a href='#'>Folder 2</a>
<ul>
<li><a href='#'>Sub Item 2.1</a></li>
<li><a href='#'>Folder 2.1</a>
<ul>
<li><a href='#'>Sub Item 2.1.1</a></li>
<li><a href='#'>Sub Item 2.1.2</a></li>
<li><a href='#'>Folder 3.1.1</a>
<ul>
<li><a href='#'>Sub Item 3.1.1.1</a></li>
<li><a href='#'>Sub Item 3.1.1.2</a></li>
<li><a href='#'>Sub Item 3.1.1.3</a></li>
<li><a href='#'>Sub Item 3.1.1.4</a></li>
<li><a href='#'>Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href='#'>Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href=http://banten-xp.blogspot.com/'>Item 4</a></li>
</ul>
<br style='clear: left'/>
</div>

Klik dulu PERTINJAUAN sebelum di SAVE untuk menentukan berhasil atau gagal.

SELAMAT MENCOBA SEMOGA SUKSES ^_^

KALO MAU COPAS KASIH SUMBER

Kebanyakkan saat maintenace itu buat beres-beres blog jad pelanggan blog kita tidak kecewa kalo lagi renovasi blog....

langsung aja ya...

1. login blog
2. buka rancangan >> edit HTML
3. taruh kode dibawah ini diatas kode ]]></b:skin>

html {
height: 100%;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNkXkQRfZk1dHNRq7pa-ZH_XhPQNMYkPWGpDXxqAAA6yKoQ7pYrqcAONiIhpU2xaTvjz63LmueXCihMc1sxlQrS_zZnQ5jkR3yLRoaCUeOcwPTeiOAS7AvxHAwJiJqRHHN_8FJESE22g/s1600/under-maintenance.gif) no-repeat center 50%;
margin: 0;
}
body {
display: none;
}

4. sobat bisa mengganti tulisan yang berwarna merah dengan alamat gambar yang lain.

Biasakan Kalo Copas Sertakan Sumber...

Salam Jari Tengah Untuk Copaser Yang Tidak Memberi Kredit/Sumber....

Cara Membuat Burung Elang Beterbangan di Blog

Trik kali ini cara membuat animasi burung elang beterbangan di blog. Selain membuat tampilan unik dan menarik, animasi ini bisa membuat daya tarik tersendiri bagi pengunjung blog terutama penggemar burung elang. Buat anda para sobat blogger yang ingin mencobanya, silahkan ikuti tutorialnya berikut ini.

Preview Animasi Elang Beterbangan di Blog.

Pada Dasbor, anda pilih Rancangan.
Klik "Design" kemudian klik "Edit HTML".
Cari kode </Head> kemudian copy script di bawah ini dan paste-kan di atas kode</Head>

var snowflake = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI21tlzjmLlyHamhz8odDT-3ovH0WqK53m1ep8L7AJxWVfu1oeLj4kCr6k6ShsuLgmqMs4a0EJ6OT9L40C3jcpeGle4zi4bhLORcdPyXlWY-46pCl0jEBTXgz-vnsN2Ui2-sJnyZcprw/s200/Hawk_Animation.gif";

</script>

<script language='JavaScript' src='http://monozcore-project.googlecode.com/files/FallinImages.js'/>

Simapan Dan Lihatlah Hasilnya.

Selamat Mencoba yaa..

Jangan Lupa Klo Copas Sertakan Sumber

D-EFR

Widget Share Egg Yang Bisa Buka Tutup Untuk Blog

Cara Buat User Online Status

Cara Membuat Scroll pada Blogspot

Mungkin kalian masih pada bingung dengan judul yang saya berikan.Nah kali ini saya akan memberikan cara bagaimana membuat Kotak Scroll pada Sidebar.Contohnya kira2 seprti ini :

Membuat Link Menjadi Berwarna

Mengganti tulisan Home,Posting Lama dan Baru dengan Gambar

Cara Membuat Multi Menu Horizontal Drop Down Di Blog

Cara Membuat Tampilan Maintenace Di BLogger Anda Sendiri

Cara Membuat Burung Elang Beterbangan di Blog

Advertise

Site Info

My Blog List

Total Tayangan Laman

Label

Popular Posts