tips trick blog

Home » Posts filed under Tutorial Blog

cara membuat back link

Posted byigihcksn - 0comments

Hay Sobat
Hmmm Dah Lama Ya Admin Gk POosting lagi Tentan Blog XD saking lama nya Rank Alexa Blog Ini Turun Deh :'( hahahaha jdi bila ingin melihat postingan baru nya bisa lihat di sni XD Judulnya Cara Membuat Backlink Please Di Bawah Postingan Sbnr nya Admin Males Post Tutorial Ini Tapi Dari Pada Gk posting Nnti nya Rank Alexa turun lg hihihi Oke Berikut Tutorial nya :D

Masuk Ke Rancangan

Masuk Ke Edit HTML

Centang "EXPAND TEMPLATE WIDGET"

Lalu Pastekan CSS ini Di atas ]]></b:skin>

/* X-T CSS BackLinks */
#XTbacklinks{overflow:hidden;margin-top:5px;border:3px solid #0c00ff;border-radius:5px;height:50px;width:565px;-webkit-transition:all 0.4s ease-in-out;}
#XTbacklinks:hover{border:3px solid #0c00ff;height:235px;-webkit-transition:all 0.7s ease-in-out;}
.XTbkl{margin-top:3px;float:left;color:black;width:495px;border:1px solid #0c00ff;background:#fff;-moz-border-radius:3px;transition:all .9s ease-in-out;}
.XTbkl:hover{color:black;border:1px solid #0c00ff;background:#fff;}#XTbacklinksTitle{border:3px solid #0c00ff;text-shadow:1px 0 0 #000,-1px 0 0 #000,0 1px 0 #000,0 -1px 0 #000,1px 1px 2px #000;color:#0c00ff;font-size:20px;font-familly:Arial;text-align:center}

Nanti Kamu Edit Sendiri Warna Border Nya ya ??

Lalu Cari Kode <data:post.body/> Pastekan Html Ini Di bawah nya

<b:if cond='data:blog.pageType == "item"'>
<div id='XTbacklinks' style='margin-top:30px;'>
<div id='XTbacklinksTitle'>
<a expr:href='data:post.url'><data:post.title/></a>
</div>
<div id='XTbacklinksTitle'>
Backlinks Please Thanks ^_^
</div>
<table border='0' height='140' style='margin-left:7px;' width='260'>
<tr><td>URL<br/><input class='XTbkl' expr:value='data:post.url' onclick='this.focus();this.select();' readonly='readonly' title='Press CTRL+C to copy' type='text'/></td></tr>
<tr><td>Code For Forum<br/><input class='XTbkl' expr:value='" [URL=" + data:post.url + "]" + data:post.title + "[/URL] www.cheatermaninjau.net"' onclick='this.focus();this.select();' readonly='readonly' title='Press CTRL+C to copy' type='text'/></td></tr>
<tr><td>HTML Code<br/><textarea class='XTbkl' onclick='this.focus();this.select();' readonly='readonly' style='height:18px;' title='Press CTRL+C to copy'><a expr:href='data:post.url' target='_blank'><data:post.title/></a></textarea></td></tr>
<tr><td><script src='#' type='text/javascript'/></td></tr>
</table>
</div>
</b:if>

Bila <data:post.body/> di template sobat ada 2 maka Plih Yang Kedua Bila Ada 1 Pilih Yang Ke 1

Simpan Dan Lihat Hasil nya :D

(‾▿‾҂)ҧ Read This »

Ikut Gosip

CARA MEMBUAT READ MORE KEREN

Posted byigihcksn - 0comments

pagi semuanya kali ini saya akan nge share tentang bagaimana cara untuk memasang widget read more pada blog, caranya cukup simpel kok gak susah susah amat,

nah begini carannya:

1. login ke bloger
2. masuk ke di diasbor
3. klik edit html
4. centang expand template widget
5. copy kode di bawah ini dah copykan ke ]]></b:skin>.

a.ngkot{-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;background:transparent;font-size:13px;color:#222;display:block;border:3px solid #fff;margin:6px 0;padding:2px 16px}a.ngkot:hover{background:#f5f5f5;color:#000}p{font-size:14px;padding-bottom:13px}

keterangan:

1. warna hijau merubah ukuran bordernya
2. warna ungu untuk kode warna
3. warna orange warna tulisan
4. warna putih jenis border
5. warna biru untuk warna border

6. copykan kode ini di bawah kode ini: <data:post.body/>

<div style='float:right'><a class='ngkot' expr:href='data:post.url'>(‾▿‾҂)ҧ Read This » </a></div><div style='float:right; margin-right:8px'><b:if cond='data:post.allowComments'> <a class='ngkot' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'> <b:if cond='data:post.numComments == 0'> Ikut Gosip </b:if> <b:if cond='data:post.numComments == 1'> 1 Emak Gosip </b:if> <b:if cond='data:post.numComments > 1'> <data:post.numComments/> Comments </b:if> </a> </b:if></div>

inget: setiap template itu berbeda jarak bordernya,

oke deh selamat mencoba yah

(‾▿‾҂)ҧ Read This »

Ikut Gosip

Cara Membuat Background Gambar Pada Kotak Komentar

Posted byigihcksn - 0comments

Sudah Lama DeeJayHan-Blog share tentang trik blogger . kebanyakan skrng software,game dll
kali ini deejayhan-blog akan share trik blogger

Silahkan sobat Copy Paste Script di bawah ini sebelum kode ]]></b:skin> kemudian simpan di blogs sobat

#comment-form iframe{
   background:#ffffff url(http://i1187.photobucket.com/albums/z389/RICKY_ALDIYANSYAH/Blogspot-Variasi-Blogger-1.jpg) ;
   border:1px solid #9999FF;
   padding:5px;
   font:normal 12pt "ms sans serif", Arial;
   color:#7EB2AC;
   width:450px;
   height:230px;
   }

#comment-form iframe:hover{
   background:#000000 url(http://i1187.photobucket.com/albums/z389/RICKY_ALDIYANSYAH/rumput.jpg);
   border:1px solid #999FFF;
   }

Dengan cara Silahkan Log in ke blogs sobat >> klik Rancangan >> klik Edit Html >> centang Expand Template Widget , kemudian tekan Ctrl + f silahkan paste script ]]></b:skin> jika sudah ketemu silahkan paste script diatas , kemudian cari kembali script yang mirip di bawah ini

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
    <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='580'/>

jika sudah ketemu silahkan tambahkan kode script <div id='comment-form'> dan </div> diantara kode script di atas sehingga jika digabungkan akan seperti di bawah ini

<div id='comment-form'>
    <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
    <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='580'/>
</div>

kemudian Simpan dan Lihat Hasilnya , Semoga Bermanfaat

(‾▿‾҂)ҧ Read This »

Ikut Gosip

Widget Floating Printer Unique

Posted byigihcksn - 0comments

Widget Floating Printer Unique - Widget yang satu ini berfungsi untuk mempermudah pengunjung mencetak artikel/postingan yang ada diblog kamu. Widget ini sangat berguna untuk blog dengan konten banyak teks. Dengan adanya widget ini, maka pengunjung akan lebih mudah dalam mencetak isi postingan blog anda. Mau tau kayak mana Widget Floating Printer Unique ?

Login ke blogger.com
Klik Rancangan -> Edit HTML
Salin Kode dibawah ini setelah kode <body>

<a style="position: fixed; bottom: 5px; left: 5px;" href="javascript:print(document)"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU4auMOw3GJJ81vXLB7y9qZF_Rj845HxumaXSVYlec9u1_78y2MeKnruPwyJAuzpC4cIWMIBsL_l3KHQaKhQ_TgVsYYfIr8hElcS5Kg7-_PvObAddxpORNx8gwekPhj6z0WW-cOV2DMRo/s1600/Device-Print-icon.png" alt="print this page" border="0"/></a>

Simpan
Lihat Hasilnya
Semoga Bermanfaat :D

(‾▿‾҂)ҧ Read This »

Ikut Gosip

Membuat Efek Teks Pada Cbox

Posted byigihcksn - 0comments

Tips kali ini mungkin sobat blogger sekalian belum pada tau, tips kali ini sebenarnya cukup simpel dan mudah, juga lumayan menarik.

Ok langsung aja lihat caranya di bawah ini :

Cara Membuat Teks Miring

Gunakan tag [i] dan [/i]
Contoh: [i]teks miring[/i] hasilnya teks miring

Cara Membuat Teks Tebal
Gunakan tag [b] dan [/b]
Contoh: [b]teks tebal[/b] hasilnya teks tebal

Cara Membuat Teks Bergaris Bawah
Gunakan tag [u] dan [/u]
Contoh: [u]teks bergaris bawah[/u] hasilnya teks bergaris bawah

Cara Membuat Teks Bergaris Tengah
Gunakan tag [s] dan [/s]
Contoh: [s]teks dicoret[/s] hasilnya ~~teks dicoret~~

Cara Membuat Teks Berukuran Besar
Gunakan tag [big] dan [/big]
Contoh: [big]teks besar[/big] hasilnya teks besar

Cara Membuat Tulisan Berukuran Kecil
Gunakan tag [small] dan [/small]
Contoh: [small]tulisan kecil[/small] hasilnya tulisan kecil

Cara Membuat Tulisan Rata Tengah
Gunakan tag [center] dan [/center]
Contoh: [center]rata tengah[/center]

Cara Membuat Tulisan Berwarna (Color)

Gunakan tag [color=warna] dan [/color]
Contoh: [color=blue]teks biru[/color] hasilnya teks biru

Kode-kode warna:

[color=red] [/color]
[color=blue] [/color]
[color=green] [/color]
[color=yellow] [/color]
[color=pink] [/color]
[color=purple] [/color]
[color=brown] [/color]
[color=bronze] [/color]
[color=orange] [/color]
[color=black] [/color]
[color=auto [/color]
[color=gold] [/color]
[color=silver] [/color]
[color=violet] [/color]
[color=hotpink] [/color]
[color=navyblue] [/color]
[color=tan] [/color]
[color=aqua] [/color]
[color=teal] [/color]
[color=lime] [/color]

Cara Membuat Teks Berjalan (Marquee)
Gunakan tag [scroll] dan [/scroll]
Contoh: [scroll]teks[/scroll]

Cara Membuat Teks Ber Link
Gunakan tag [url=alamattujuan] dan [/url]
Contoh: [url=link tujuan sobat] judul teks sobat [/url]

Selamat Mencoba .

4.5

(‾▿‾҂)ҧ Read This »

Ikut Gosip

Cara Membuat Social Networking Menu Dengan CSS

Posted byigihcksn - 0comments

Social networking menu adalah link yang menghubungkan blog kita dengan jejaring sosial. Menu ini sangat penting dan wajib ada di sebuah blog karena kini jejaring sosial seperti facebook, twitter, digg adalah media yang sangat baik untuk mempromosikan isi blog kita pada semua friendlist. Menu sosial networking yang baik adalah yang punya tampilan yang menarik, sehingga pengunjung dengan sukacita akan sharing ke jejaring sosial tentang postingan yang dianngap berbobot bagi mereka.

Screen Shot :

View Demo :

Kode menu ini terbagi dua, pertama kode CSS yang akan diletakkan pada CSS blog. Caranya: Login ke blogger >> Element Halaman >> Edit HTML dan letakkan kode di bawah ini sebelum kode ]]></b:skin>

ul.topul, ul.topul ul {padding:0; margin:0; list-style:none; position:relative;} ul.topul ul {position:absolute; left:-9999px; background:url(); opacity:0; -webkit-transition: opacity 0.5s ease-in-out; -moz-transition: opacity 0.5s ease-in-out; -o-transition: opacity 0.5s ease-in-out; transition: opacity 0.5s ease-in-out; } ul.topul {margin:50px auto; width:80px; height:80px;} ul.topul ul li {width:48px; height:48px; float:left; display:inline;} ul.topul li.topli {width:80px; height:80px; float:left;} ul.topul :hover ul {left:-48px; top:-48px; width:176px; height:176px; opacity:1;} ul.topul ul li img {width:48px; height:48px; display:block; border:0; position:relative; left:0; top:0; -webkit-transition: 0.2s ease-in-out; -moz-transition: 0.2s ease-in-out; -o-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; } ul.topul li.p1 {margin-left:16px; margin-top:16px;} ul.topul li.p3 {margin-top:16px;} ul.topul li.p5 {margin-left:80px;} ul.topul li.p6 {margin-left:16px;} ul.topul li.p7 {margin-top:16px;} ul.topul :hover ul li a:hover {position:relative; z-index:100;} ul.topul li:hover ul li a:hover img {width:64px; height:64px; left:-8px; top:-8px; z-index:100;} /* for IE6 */ ul.topul table {border-collapse:collapse: position:absolute; left:0; top:0; margin:-4px;} ul.topul li a:hover {direction:ltr;} ul.topul li a:hover ul li a:hover img {position:absolute; width:64px; height:64px; left:-8px; top:-8px; z-index:100;}

Kemudian Simpan template anda lalu tambahkan kode di bawah ini ke sidebar. Caranya: Klik Element Halaman >> Add Widget >> HTML/javascript. Paste kode berikut ini:

<div id="jahe">
<ul class="topul">
<li class="topli" id="s1"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj006Ao93mlAgZidHZc6PJZHInPqQByJYFeJBuFsmyeRZYS32H7qxGK617rkhnXU38qKhqzl8ugGZS_UF-rMaWfWX_mWJXmWfJRNr8ZlSH3ZeImjauDFtyGMerGGE6rJtS8FnuGNWkc3V8/s400/social.png" alt="">
<ul>
<li class="p1"><a href="#url"><img src="http://4.bp.blogspot.com
/-X3H0LV1IcM4/TbaWoIx7GuI/AAAAAAAAAoY/J8_fUGpn5mM/s400/delicious.png" alt=""></a></li>
<li class="p2"><a href="#url"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmLZw_VETn4OTNDCyii-58hNsxkCp8qzPB0vFdUXhZ_mnAAFuc7YrV-6K6ZTaVCOctcdsMrhToaV9IrMIzV_oEDh6J3Q-o-6k_2r_ibOyefX3js949VSH7LQXAGduBoI1L0pBIXwWqebo/s400/digg.png" alt=""></a></li>
<li class="p3"><a href="#url"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitFpklpQAcb6-wCzaPdyN7WeEF2YUVyUrtWI7h1dixTkHl9GJe2ba1UhbPnid4jydonFzXrhi_2xNy7z5rqqaMvAsVr3zsEYmGbly3xspINZDcodW7qLwetAzKBM-ddhjfyq3MzwJ3fVI/s400/facebook.png" alt=""></a></li>
<li class="p4"><a href="#url"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijtPT7xp8aHjG0QMSfqxeCYqnnry02V33j2LVy2SdlDcwNbUhQGe3j62JZ4V3pzjpfGeU9yoW4Zr9PjR-lnlFaqLx7fuCf1gpXPZ6ddefuxX9pnJyFSkULQM7ruk_Mbvq3es3t67E2dvI/s400/flickr.png" alt=""></a></li>
<li class="p5"><a href="#url"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjemyrKIsEo8sGWoKZKXSRJWcX9TJToxSg2c2CuBm1Pf5186qhNSkeTy7wt4GYRg6gijNNQwkoY4mUqYIXQlEfZx9v00kAKU6OyjnhI_L1dI7KhU-5wCTOFIxR868cv8NWh9wIk4pff-78/s400/linkedin.png" alt=""></a></li>
<li class="p6"><a href="#url"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4amUdVZ7R63rwAmLnAVB1soXxj1sGyByG84o1d4f3kP3yjZJuUe1jiI5Z4Axmo6wRRj-ou2-bZr2d9C4KxiXBsiy7XrfeLzUARgQ9OgpLy-RyPHTfsU7bo7FpOr9aDgwMkzFqLtKTfGk/s400/myspace.png" alt=""></a></li>
<li class="p7"><a href="#url"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtm7hhS5rHXTzkAwSM3Ex5GFsdkApapthLECdn9qBWk0NlvTNuCqBk8HJwQU-hHfAFlWyN3WPXU3TtlTNzC9nhT6s5qvfNwxMkbwG_Jd5Y4zI6m3bMcJQj0T-mdvBEqwxjWVxwzRRQsvU/s400/stumbleupon.png" alt=""></a></li>
<li class="p8"><a href="#url"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLJyN0eiLrX19VNyhnXPzuWDf1mDKSmJuS0cGKfVAJ9xGWjiID7EbZJZ_w62vwfvLDLRM0HlIoDBrWtq-Jy3gn0T5I5ANo6D7jVOadkxP2kz8CZ03sOBwauC3x3r7BmcSnFPcV011oarE/s400/twitter.png" alt=""></a></li>
</ul>

</li>
</ul>
</div>

Kemudian Save dan lihat hasilnya. Setelah itu anda hanya perlu mengelola link agar sesuai dengan alamat jejaring sosial anda.

Selamat mencoba.

Description: Cara Membuat Social Networking Menu Dengan CSS

(‾▿‾҂)ҧ Read This »

Ikut Gosip

Tombol Up dan Down Di Pojok

Posted byigihcksn - 0comments

Lihat dipojok kanan anda , letakkan kursor mouse anda diatasnya !.

Cara membuatnya

Dari Dashboard >> Design >> Edit HTML.

Penempatan kode HTML dan JavaScript
tepat disamping sebelum </body>

<div id="staticbuttons" style="position:absolute;">
<a href="javascript:" onmouseover="myspeed=-thespeed" onmouseout="myspeed=0"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbCbXc6mAsZBW8Pn7K8t46YUOoc48FO8FMPyw80glqW6mIh5n_U7EK_68NFM2ECJ4BDyoOYzAWovrlTQZZPiDXIlJ2efOG4obOWF14OxXWHGr6Czas1QQx-tZtrsTUIFuDlkvJlyuEE3CG/s1600/deejayhan-up.png" border="0" /></a><br />
<a href="javascript:" onmouseover="myspeed=thespeed" onmouseout="myspeed=0"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLuqnfUGv2APA_D8vftVOMZUOGMXXyv5mSqp4Il49kacG2jtkAqkvm_Cgyo1fMaSk19CDNGqfCDApVGxBYokqJrA1-NKX9SZ4WlGITvpU4WcwnyH64x-4qyLiFUqHJGV4hqMp4cEh21X5n/s1600/deejayhan-down.png" border="0" /></a>
</div>

<script type='text/javascript'>
//<![CDATA[

//Script Tombol turun dan naik By Dynamic Drive
// (www.dynamicdrive.com/dynamicindex2/pagescroller.htm)
//This credit MUST stay intact for use

var Hoffset=60
var Voffset=60
var thespeed=3 //Kecepatan

var ieNOTopera=document.all&&navigator.userAgent.indexOf("Opera")==-1
var myspeed=0

var ieHoffset_extra=document.all? 15 : 0
var cross_obj=document.all? document.all.staticbuttons : document.getElementById? document.getElementById("staticbuttons") : document.staticbuttons

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function positionit(){
var dsocleft=document.all? iecompattest().scrollLeft : pageXOffset
var dsoctop=document.all? iecompattest().scrollTop : pageYOffset
var window_width=ieNOTopera? iecompattest().clientWidth+ieHoffset_extra : window.innerWidth+ieHoffset_extra
var window_height=ieNOTopera? iecompattest().clientHeight : window.innerHeight

if (document.all||document.getElementById){
cross_obj.style.left=parseInt(dsocleft)+parseInt(window_width)-Hoffset+"px"
cross_obj.style.top=dsoctop+parseInt(window_height)-Voffset+"px"
}
else if (document.layers){
cross_obj.left=dsocleft+window_width-Hoffset
cross_obj.top=dsoctop+window_height-Voffset
}
}

function scrollwindow(){
window.scrollBy(0,myspeed)
}

function initializeIT(){
positionit()
if (myspeed!=0){
scrollwindow()
}
}

if (document.all||document.getElementById||document.layers)
setInterval("initializeIT()",20)

//]]>
</script>

Terakhir klik Simpan / Save .
Nah Simple kan ?
Saya ucapkan Selamat Mencoba .
Description: Tombol Up dan Down Di Pojok
Rating: 4.5 4.5

(‾▿‾҂)ҧ Read This »

Ikut Gosip

Mengganti Tulisan Older Post dan Newer Post Dengan Judul Arrtikel

Posted byigihcksn - 0comments

Pernahkah kamu merasa terganggu dan ingin menghapus link older post dan newer post?

Sekarang kamu tidak perlu menghapusnya, karena link tersebut dapat kita modifikasi menjadi lebih bagus dan meningkatkan aksesibilitas blog kamu.

Cara yang saya maksud adalah dengan memodifikasi link older post dan newer post dibawah posting blog menjadi langsung menuju artikel selanjutnya maupun ke postingan yang lebih lama (yang ditampilkan adalah link judul artikelnya langsung).

Contoh tampilan Older dan Newer Link

Cara memasangnya, ikuti langkah berikut:

1. langkah 1

a. Login ke blogger dan masuk ke bagian Edit Template (Dashboard -> Rancangan -> Edit HTML).

b. Letakkan kode berikut ini sebelum </head>

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

c. Lalu, simpan Template

b. Langkah ke 2

Tambahkan kode di bawah ini ke gadget (Dengan menambahkan widget Javascript/HTML) (posisinya bebas).

<style type="text/css">

#blog-pager-newer-link {font-size:12px;width:200px;float:left; text-align:left;}

#blog-pager-older-link {font-size:12px;width:200px;float:right; text-align:right;}

</style>

<script type="text/javascript">

$(document).ready(function(){

var olderLink = $("a.blog-pager-older-link").attr("href");

$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() {

var olderLinkTitle = $("a.blog-pager-older-link").text();

$("a.blog-pager-older-link").text(olderLinkTitle + " >>");//rgt

});

var newerLink = $("a.blog-pager-newer-link").attr("href");

$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {

var newerLinkTitle = $("a.blog-pager-newer-link:first").text();

$("a.blog-pager-newer-link").text("<< " + newerLinkTitle);

});

});

</script>

- Simpan gadget Javascript/HTML

- Sekarang coba buka blog kamu, dan lihat dibawah posting, apakah link older post dan newer post sudah berubah dan yang muncul adalah judul artikel atau postingannya ???

(‾▿‾҂)ҧ Read This »

Ikut Gosip

cara membuat back link

CARA MEMBUAT READ MORE KEREN

Cara Membuat Background Gambar Pada Kotak Komentar

Widget Floating Printer Unique

Membuat Efek Teks Pada Cbox

Cara Membuat Social Networking Menu Dengan CSS

Tombol Up dan Down Di Pojok

Cara membuatnya

Mengganti Tulisan Older Post dan Newer Post Dengan Judul Arrtikel

Artikel Populer

88x31

Pengikut

SITE INFO

Cara membuatnya

Artikel Populer

88x31

Pengikut

Subscribe To

SITE INFO