Dampak Positif Dan Negatif Tukar Link

Dalam mendongkrak popularitas situs maupun blog kita di search engine banyak cara optimasi yang bisa kita tempuh,salah satu nya adalah dengan cara mencari backlink yaitu bertukar link antar blog,namun dalam bertukar link banyak sekali yang perlu kita perhatikan salah satu nya adalah dengan situs/blog apa kita bertukar link,se tema atau tidak blog tersebut dengan blog kita.
Karena apabila kita bertukar link dengan blog yang tidak setema dengan blog kita maka link yang mengarah dari blog lain ke blog kita tidak akan ada manfaat nya.
Dari beberapa sumber menyebutkan dengan bertukar link banyak sekali manfaat yang bisa kita petik,namun disisi lain juga terdapat  Dampak Positif Dan Negatif Tukar Link pada blog kita.

Berikut Beberapa dampak positif(manfaat) tukar link antar blog:

1. Kalian akan mendapatkan banyak link partner untuk blog kalian.
2. Meningkatkan Ranking blog kalian di search engine.
3. Blog kalian akan mendapat banyak anchor text dari blog lain yang mengarah ke blog kita.
4. dapat meningkatkan pagerank dan alexa rank blog kalian.
5.Pengunjung atau trafik akan semakin cepat meningkat pada blog kalian.
6. mendapatkan banyak backlink dari blog lain dan terlebih lagi dofollow dan ber pagerank tinggi.
7. Menambah teman dan persahabatan antar sesama blogger.
8. Blog kita akan semakin populer karena banyak link blog kita yang terdapat di halaman blog lain.
9. Dan lain lain,silakan googling.

Banyak ya manfaat yang kita dapat dari tukar link dengan blog lain,namun di sisi negatif banyak juga yang perlu kita perhatikan terlebih lagi di mata search engine google.

Berikut petikan nya:

-------------------------------------------------------------------------------------------------------------

..Excessive link exchanges, could “negatively impact your site’s ranking in search results.”

-------------------------------------------------------------------------------------------------------------
Don’t participate in link schemes designed to increase your site’s ranking or PageRank. In particular, avoid  links to web spammers or “bad neighborhoods” on the web, as your own ranking may be affected adversely by those links.

http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=35769#3
-------------------------------------------------------------------------------------------------------------
…some webmasters engage in link exchange schemes and build partner pages exclusively for the sake of cross-linking, disregarding the quality of the links, the sources, and the long-term impact it will have on their sites. This is in violation of Google’s webmaster guidelines and can negatively impact your site’s ranking in search results. Examples of link schemes can include:
* Links intended to manipulate PageRank
* Links to web spammers or bad neighborhoods on the web
* Excessive reciprocal links or excessive link exchanging (“Link to me and I’ll link to you.”)
* Buying or selling links that pass PageRank

http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=66356
--------------------------------------------------------------------------------------------------------------
Begitulah Yang di kutip dari google guidelines.

Berikut dampak negatif pada blog kita:

1. tukar link yang terlalu banyak dapat mengakibatkan situs/blog kita di banned oleh Google,
terutama mereka yang memakai layanan Blogspot.
2. Melakukan Link Schemes yaitu Search engine mengira blog kita melakukan manipulasi banyak link.
4. Links intended to manipulate PageRank Yaitu membuat banyak link,hanya untuk meningkatkan PageRank.
5. Links to web spammers yaitu Melakukan banyak tautan ke situs spam atau situs lain yang dianggap kurang
baik oleh Google.
6. reciprocal links or excessive link exchanging ("Link to me
and I'll link to you.") yaitu Link timbal balik atau tukar link yang
sangat banyak.
7. Buying or selling links yaitu search engine blog kita melakukan jual beli link untuk mengelabui dan manipulasi PageRank.

Begitulah dampak positif dan negatif dalam tukar link.
Buat webmaster silakan di tambahin bila ada yang kurang.
Semoga bermanfaat.

Read More

Cara Mudah Dan Cepat Merampingkan Alexa Rank

Alexa Rank adalah sebuah Website yang menyediakan informasi tentang Rangking atau peringkat suatu Web/Blog , semakin kecil nilai Web/Blog yang yang di berikan oleh Alexa maka semakin baik lah Web/Blog tersebut contoh nya seperti yang diraih oleh Google sebagai peringkat pertama pada Alexa

Jadi supaya blog populer dimata search engine dan membantu optimasi SEO agar mendapatkan pengunjung yang berlimpah yaitu salah satu nya dengan memperkecil nilai pada Alexa Rank .
Supaya Alexa Rank Blog cepat  ramping dengan mudah yaitu diataranya sebagai berikut :

• Update postingan 1 kali 2 hari dan sekurang nya 2 postingan dalam satu minggu , cara ini telah terbukti sangat ampuh untuk memperkecil nilai pada alexa rank

• Instal Alexa Toolbar pada PC anda , cara ini sangat membantu untuk merampingkan Alexa rank pada blog karena Alexa melakukan penghitungan blog melalui input data dari Alexa Toolbar yang di gunakan pada browser internet di seluruh dunia.

• Buat lah postingan tentang Alexa pada blog sebaik nya buatlah postingan lebih dari satu postingan karena cara ini menurut para pakar blog membuat artikel tentang Alexa Rank sangat membantu mempercepat untuk merampingkan blog dengan mudah

Supaya Alexa Rank blog dengan mudah di analisa sebaik nya pasanglah widget Alexa pada blog untuk mendapatkan kode widget nya kunjungi halaman INI dan cara pasang nya bisa sobat ketahui DISINI

Itulah cara yang saya coba untuk merampingkan Alexa Rank pada blog ini yang dengan cepat , semoga blog sobat mendapatkan nilai yang memuaskan dari Alexa Rank.

Read More

Membuat Widget Slide Panel With CSS and jQuery Effect

Tutorial Belajar Blog -Membuat Widget Slide Panel With CSS and jQuery Effect Inspirasi ini didapat dari tetangga blogger kita ut2a-4down blogmates. Ini adalah widget yang sederhana, namun cukup efektif untuk sekedar meringkas bagian-bagian yang biasanya dianggap terlalu panjang atau terlalu lebar. Kamu bisa menggunakan widget ini untuk meletakkan foto, video, daftar teman atau apapun, yang menurutmu terasa sedikit mengganggu penampilan.
Untuk Contohnya sobat bisa lihat langsung pada postingan ini, perhatikan pada bagian Menu diatas.
Jika sobat berminat dan ingin membuatnya, ikuti langkahnya sebagai berikut :

1. Login ke akun Blogger sobat
2. Klik Perancangan >> Elemen Laman
2. Klik Tambah Gadget
3. Pilih HTML/Javascript
4. Masukan kode berikut :

    <style type="text/css">
    /*
    Visit: http://tutorialbelajarblogger.blogspot.com/
    */
    #paneloktri {display:block;}
    #panel {background-color:#CF4C23;border:2px solid #CF4C23;border-width:2px 2px 0 2px;overflow:auto;margin:0;padding:20px 15px 15px 15px;color:#111;
    font:normal 12px "Consolas","Courier New",Courier,mono,serif;-webkit-box-shadow:inset 0 0 7px #222;-moz-box-shadow:inset 0 0 7px #222;box-shadow:inset 0 0 7px #222;display:none;}
    .tombolpanel {position:relative;cursor:pointer;text-shadow:1px 1px 2px #000;padding:7px 15px;background-color:#333;border-top:3px solid #CF4C23;color:#e5e5e5;text-align:center;font:bold 14px Times,Sans-Serif;font-style:italic;-webkit-box-shadow:0 -1px 2px #222;-moz-box-shadow:0 -1px 2px #222;box-shadow:0 -1px 2px #222;-webkit-border-radius:0 0 14px 14px;-moz-border-radius:0 0 14px 14px;border-radius:0 0 14px 14px;}
    .tombolpanel:hover {color:#ccc;}
    .tombolpanel:after {content:'';position:absolute;top:100%;margin-top:-10px;left:5%;width:0;height:0px;display:block;border-width:20px;border-style:solid;border-color:#333 #333 transparent #333;}
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function() {
         $('.tombolpanel').click(function() {
              $('#panel').slideToggle('slow');
              $('.tombolpanel span.in').toggle();
         });
    });
    </script>
    <div id="paneloktri">
    <div id="panel">

    ... ISI KONTEN DI SINI ...

    </div>
    <div class="tombolpanel">
    <span class="in">Buka Panel</span>
    <span class="in" style="display:none;">Tutup Panel</span>
    </div>
    </div>


5. Klik Simpan, dan lihat hasilnya. :D

KET ::
- Kode yang Saya beri warna hijau adalah JQuery. Sebelum menambahkan widget ini sebaiknya periksa dulu isi template anda. Jika template anda sudah dilengkapi dengan JQuery, maka buang kode tersebut dari widget.

Sobat juga bisa meng-otak-atik script sesuai kehendak sobat asalkan sobat mengerti. Semoga berhasil dan bermanfaat.


Selamat mencoba.!

Read More

Membuat Readmore circle

Trik ini menurut saya cukup ringan,tidak ada penggunaan gambar sama sekali,100% CSS3.tapi untuk tampilan terbaik,saya sarankan untuk upgrade browser kamu ke versi yang terbaru,dan jangan sekali" menggunakan Internet Explore,karena IE tidak 100% mendukung CSS3 animasi.ok lansung saja~

Sebelumya saya ingatkan dahulu untuk,BACKUP TEMPLATE ANDA sebelum menggunakan trik ini ==v
#kerusakan template bukan tanggung jawab saya.

Tampilan terbaik dapat dirasakan dengan browser Goggle chrome karena 100% mendukung css3 animasi.sedangkan untuk Mozilla firefox tidak.akibat'a kalau dibuka dengan Mozilla,mungkin akan terasa berat dan animasinya agak ngadet",jadi pikir" dahulu untuk menggunakan trik ini.so,yang mau coba" belajar css3 keyframe,silakan dicoba"~xD

Trik dibawah ini,adalah trik untuk tombol Readmore kamu.
saya akan jelaskan untuk Contoh Style 1 *contoh'a ada dibawah*

Trik 1

Pertama buka blogger=>rancangan=>Edit HTML,copy paste CSS dibawah ini diatas kode [
]]></b:skin>

.circlewrapper {
width: 98px;
height: 98px;
float: right;
font-size: 14px;
text-align: center;
text-shadow: 0 1px 1px black;
}

.circle {
background-color: rgba(0,0,0,0);
border:5px solid rgba(255,0,0,0.9);
opacity:.9;
border-right:5px solid rgba(0,0,0,0);
border-left:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 35px #ff0000;
width:70px;
height:70px;
margin:0 auto;
-moz-animation:spin1Pulse 1s infinite ease-in-out;
-webkit-animation:spin1Pulse 1s infinite linear;
}
.circle1 {
background-color: rgba(0,0,0,0);
border:5px solid rgba(255,0,0,0.9);
opacity:.9;
border-left:5px solid rgba(0,0,0,0);
border-right:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 15px #ff0000;
width:50px;
height:50px;
margin:0 auto;
position:relative;
top:-70px;
-moz-animation:spin2Pulse 1s infinite linear;
-webkit-animation:spin2Pulse 1s infinite linear;
}

.circle2 {
background-color: transparent;
border: 5px solid rgba(255, 0, 0, 0.9);
opacity: .9;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-radius: 50px;
box-shadow: 0 0 15px #ff0000;
width: 90px;
height: 90px;
margin: 0 auto;
position: relative;
top: -150px;
text-align: center;
line-height: 90px;
}

@-moz-keyframes spin1Pulse {
0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #ff0000;}
50% { -moz-transform:rotate(145deg); opacity:1;}
100% { -moz-transform:rotate(-320deg); opacity:0;}
}
@-moz-keyframes spin2Pulse {
0% { -moz-transform:rotate(0deg); }
100% { -moz-transform:rotate(360deg);}
}
@-webkit-keyframes spin1Pulse {
0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #ff0000;}
50% { -webkit-transform:rotate(145deg); opacity:1;}
100% { -webkit-transform:rotate(-320deg); opacity:0;}
}
@-webkit-keyframes spin2Pulse {
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(360deg);}
}

Setelah itu simpan,dan centang expand widget templates,lalu cari kode html yang seperti ini/ yang mirip" seperti dibawah ini(kode HTML dibawah ini berasal dari template guilty crown)

#note.ada kemungkinan saat kamu mencari kode html dibawah ini,kamu akan menemukan 2 kode yang sama persis.
#solusi:dicopas dua"a

<span class='rmlink' style='float:right'>
<a expr:href='data:post.url'>Read More....</a>
</span>

lalu hapus semua kode diatas,kemudian diganti Dengan kode html dibawah ini

<div class="circlewrapper">
<div class="circle"></div>
<div class="circle1"></div>
<div class="circle2">
<a expr:href='data:post.url'>Read More...</a>
</div></div>

Setelah Itu simpan dan lihat hasilnya~

Trik 2

CSS'a sama dengan cara diatas,beda'a cara yang dibawah ini kita tinggal mengganti hanya mengganti kode html

<a expr:href='data:post.url'>Read More...</a>

dengan

<a href="http://alamatlink">namalink</a>

Tujuanya agar Url linknya bisa kita sesuaikan dengan alamat link yang kita inginkan.ganti http://alamatlink dengan url link kamu.
(berlaku untuk semua style)

<div class="circlewrapper">
<div class="circle"></div>
<div class="circle1"></div>
<div class="circle2">
<a href="http://alamatlink">namalink</a></div></div>

kamu tinggal ganti alamat dan nama linknya.bisa di letakan dimana saja(kode HTTML ada tempatnya)
diantara kode body
#buat yang ga ngerti (<body> isi html </body>)
atau bisa juga diletakan di (rancangan=> add a gadget=>HTML/JavaScript=> copy paste lalu simpan.

Tambahan: Untuk mengganti warna,kamu tinggal ganti kode warna hexa dan rgbanya.
misal

Warna merah:
Hexa :#ff0000

Rgba color: rgba(255,0,0,0.9);

Style1

DEMO

CSS

.circlewrapper {
width: 98px;
height: 98px;
float: right;
font-size: 14px;
text-align: center;
text-shadow: 0 1px 1px black;

}

.circle {
background-color: rgba(0,0,0,0);
border:5px solid rgba(255,0,0,0.9);
opacity:.9;
border-right:5px solid rgba(0,0,0,0);
border-left:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 35px #ff0000;
width:70px;
height:70px;
margin:0 auto;
-moz-animation:spin1Pulse 1s infinite ease-in-out;
-webkit-animation:spin1Pulse 1s infinite linear;
}
.circle1 {
background-color: rgba(0,0,0,0);
border:5px solid rgba(255,0,0,0.9);
opacity:.9;
border-left:5px solid rgba(0,0,0,0);
border-right:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 15px #ff0000;
width:50px;
height:50px;
margin:0 auto;
position:relative;
top:-70px;
-moz-animation:spin2Pulse 1s infinite linear;
-webkit-animation:spin2Pulse 1s infinite linear;
}

.circle2 {
background-color: transparent;
border: 5px solid rgba(255, 0, 0, 0.9);
opacity: .9;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-radius: 50px;
box-shadow: 0 0 15px #ff0000;
width: 90px;
height: 90px;
margin: 0 auto;
position: relative;
top: -150px;
text-align: center;
line-height: 90px;
}

@-moz-keyframes spin1Pulse {
0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #ff0000;}
50% { -moz-transform:rotate(145deg); opacity:1;}
100% { -moz-transform:rotate(-320deg); opacity:0;}
}
@-moz-keyframes spin2Pulse {
0% { -moz-transform:rotate(0deg); }
100% { -moz-transform:rotate(360deg);}
}
@-webkit-keyframes spin1Pulse {
0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #ff0000;}
50% { -webkit-transform:rotate(145deg); opacity:1;}
100% { -webkit-transform:rotate(-320deg); opacity:0;}
}
@-webkit-keyframes spin2Pulse {
0% { -webkit-transform:rotate(0deg); }
100% { -webkit-transform:rotate(360deg);}
}

HTML

<div class="circlewrapper">
<div class="circle"></div>
<div class="circle1"></div>
<div class="circle2">
<a expr:href='data:post.url'>Read More...</a>
</div></div>

Style 2

Demo

CSS

.circlebg {
width: 53px;
height: 53px;
position: relative;
border-radius: 50px;
-moz-animation: spin3Pulse 3s infinite ease-in-out;
-webkit-animation: spin3Pulse 3s infinite linear;
}

.circlewrapper2 {
width: 53px;
height: 53px;
text-align: center;
border-radius: 50px;
border: 3px solid rgba(0, 0, 0, 0.9);
padding: 8px;
background: -webkit-radial-gradient(center, ellipse cover, #D41B00 5%,#570401 74%);
background: -moz-radial-gradient(center, ellipse cover, #D41B00 5%,#570401 74%);
}

.circlewrapper3 {float:right;}

.circlewrapper3 a {
width: 78px;
height: 78px;
float: right;
font-size: 14px;
text-align: center;
border-radius: 50px;
text-shadow: 0 1px 1px black;
margin-top: -50px;
position: absolute;
line-height: 20px;
}

.circle4 {
background-color: transparent;
border: 1px solid rgba(0, 0, 0, 1);
opacity: .9;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
width: 50px;
height: 50px;
margin: 0 auto;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
}


.circle5 {
background-color: transparent;
border: 1px solid rgba(0, 0, 0, 1);
opacity: .9;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
width: 50px;
height: 50px;
margin: 0 auto;
position: relative;
top: -51.5px;
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
}

.circle6 {
background-color: transparent;
border: 1px solid rgba(0, 0, 0, 1);
opacity: .9;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
width: 50px;
height: 50px;
margin: 0 auto;
position: relative;
top: -103.5px;
}

.circle7 {
background-color: transparent;
border: 1px solid rgba(0, 0, 0, 1);
opacity: .9;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
width: 50px;
height: 50px;
margin: 0 auto;
position: relative;
top: -155px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
}


@-moz-keyframes spin3Pulse {
0% { -moz-transform:rotate(360deg); }
100% { -moz-transform:rotate(0deg);}
}
@-webkit-keyframes spin3Pulse {
0% { -webkit-transform:rotate(360deg);}
100% { -webkit-transform:rotate(0deg); }
}

HTML

<div class="circlewrapper3">
<div class="circlewrapper2">
<div class="circlebg">
<div class="circle4"></div>
<div class="circle5"></div>
<div class="circle6"></div>
<div class="circle7"></div>
</div></div>
<a expr:href='data:post.url'>Read More</a>
</div>

Style3

Readmore

CSS

span[class*="l-"] {/*Blog Johanes-Djogzs.blogspot.com*/
height: 4px; width: 4px;
background: #fff;
display: inline-block;
margin: 2px 2px;
border-radius: 100%;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
-webkit-animation: loader 4s infinite;
-webkit-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
-webkit-animation-fill-mode: both;
-moz-animation: loader 4s infinite;
-moz-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
-moz-animation-fill-mode: both;
animation: loader 4s infinite;
animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
animation-fill-mode: both;}/*Blog Johanes-Djogzs.blogspot.com*/
span.l-1 {-webkit-animation-delay: 1s;animation-delay: 1s;-ms-animation-delay: 1s;-moz-animation-delay: 1s;}
span.l-2 {-webkit-animation-delay: 0.8s;animation-delay: 0.8s;-ms-animation-delay: 0.8s;-moz-animation-delay: 0.8s;}
span.l-3 {-webkit-animation-delay: 0.6s;animation-delay: 0.6s;-ms-animation-delay: 0.6s;-moz-animation-delay: 0.6s;}
span.l-4 {-webkit-animation-delay: 0.4s;animation-delay: 0.4s;-ms-animation-delay: 0.4s;-moz-animation-delay: 0.4s;}
span.l-5 {-webkit-animation-delay: 0.2s;animation-delay: 0.2s;-ms-animation-delay: 0.2s;-moz-animation-delay: 0.2s;}
span.l-6 {-webkit-animation-delay: 0;animation-delay: 0;-ms-animation-delay: 0;-moz-animation-delay: 0;}
@-webkit-keyframes loader {
0% {-webkit-transform: translateX(-30px); opacity: 0;}
25% {opacity: 1;}/*Blog Johanes-Djogzs.blogspot.com*/
50% {-webkit-transform: translateX(30px); opacity: 0;}
100% {opacity: 0;}}
@-moz-keyframes loader {
0% {-moz-transform: translateX(-30px); opacity: 0;}
25% {opacity: 1;}
50% {-moz-transform: translateX(30px); opacity: 0;}
100% {opacity: 0;}}
@-keyframes loader {
0% {-transform: translateX(-30px); opacity: 0;}
25% {opacity: 1;}
50% {-transform: translateX(30px); opacity: 0;}
100% {opacity: 0;}}/*Blog Johanes-Djogzs.blogspot.com*/
.tombol-readmore {clear:both;font-size: 14px;text-shadow: -0px 1px 1px black;}
.loading:hover {-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 1);-moz-box-shadow: 0 1px 5px rgba(0,0,0,1);}
.loading {line-height: 7px;margin: auto;text-align:center;width: 110px;color:#fff;-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.6);border-bottom: 1px solid #333;border-left: 1px solid black;
border-right: 1px solid #333;border-top: 1px solid black;/*Blog Johanes-Djogzs.blogspot.com*/
background: -moz-linear-gradient(top, rgba(76, 76, 76, 1) 0%, rgba(89, 89, 89, 1) 12%, rgba(102, 102, 102, 1) 25%, rgba(71, 71, 71, 1) 39%, rgba(44, 44, 44, 1) 50%, rgba(0, 0, 0, 1) 51%, rgba(17, 17, 17, 1) 60%, rgba(43, 43, 43, 1) 76%, rgba(28, 28, 28, 1) 91%, rgba(19, 19, 19, 1) 100%);/*Blog Johanes-Djogzs.blogspot.com*/
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(76, 76, 76, 1)), color-stop(12%,rgba(89, 89, 89, 1)), color-stop(25%,rgba(102, 102, 102, 1)), color-stop(39%,rgba(71, 71, 71, 1)), color-stop(50%,rgba(44, 44, 44, 1)), color-stop(51%,rgba(0, 0, 0, 1)), color-stop(60%,rgba(17, 17, 17, 1)), color-stop(76%,rgba(43, 43, 43, 1)), color-stop(91%,rgba(28, 28, 28, 1)), color-stop(100%,rgba(19, 19, 19, 1)));border-radius: 14px;-webkit-border-radius: 14px;-moz-border-radius: 14px;}

HTML

<div class='loading'>
<p class='tombol-readmore'><a expr:href='data:post.url'>Readmore</a></p>
<span class='l-1'/>
<span class='l-2'/>
<span class='l-3'/>
<span class='l-4'/>
<span class='l-5'/>
<span class='l-6'/></div>

Style4

Readmore

CSS

01	.menureadmore1 {

02	clear: both;

03	margin:auto;

04	background: black;

05	font-size: 15px;

06	color: #32BDE8;

07	height: 80px;

08	width: 80px;

09	line-height: 80px;

10	text-align: center;

11	-webkit-transition: all 0.3s ease-in-out;

12	-moz-transition: all 0.3s ease-in-out;

13	-moz-border-radius: 200px;

14	-webkit-border-radius: 200px;

15	border: 8px solid

16

17	rgba(255, 255, 255, 0.8 );

18	-webkit-box-shadow: 0 1px 4px

19	rgba(0, 0, 0, 0.5);

20	-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.5);

21	-webkit-background-clip: padding-box;

22	-moz-background-clip: padding-box;

23	background-clip: padding-box;}

24

25	.menureadmore1::before {

26	content: "";

27	position: absolute;

28	width: 125px;

29	margin: auto;

30	height: 125px;

31	border: 8px solid

32	rgba(255, 255, 255, 0.8 );

33	-webkit-box-shadow: 0 1px 4px

34	rgba(0, 0, 0, 0.5);

35	-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.5);

36	-webkit-border-radius: 12px;

37	-moz-border-radius: 120px;

38	border-radius: 120px;

39	display: block;

40	margin-top: -30px;

41	margin-left: -30px;

42

}

43

44	.animasimenureadmore1 {

45	position: absolute;

46	width: 105px;

47	margin: auto;

48	height: 105px;

49	border: 8px dotted rgba(50, 189, 232, 0.8 );

50	-webkit-box-shadow: 0 1px 4px

51	rgba(0, 0, 0, 0.5);

52	-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.5);

53	-webkit-border-radius: 12px;

54	-moz-border-radius: 120px;

55	border-radius: 120px;

56	display: block;

57	margin-top: -100px;

58	margin-left: -20px;

59	-moz-animation:spin5Pulse 2s infinite linear;

60	-webkit-animation:spin5Pulse 2s infinite linear;

61

}

62	@-moz-keyframes spin5Pulse {

63	0% { -moz-transform:rotate(0deg); opacity:0; box-shadow:0 0 1px #ff0000;}

64	50% {opacity:1;}

65	100% { -moz-transform:rotate(-360deg); opacity:0;}

66

}

67	@-webkit-keyframes spin5Pulse {

68	0% { -webkit-transform:rotate(0deg); opacity:0; box-shadow:0 0 1px #ff0000;}

69	50% {opacity:1;}

70	100% { -webkit-transform:rotate(-360deg); opacity:0;}

71

}

HTML

<div class='menureadmore1'>
<a expr:href='data:post.url'>Readmore</a>
<div class='animasimenureadmore1'/>
</div>

Read More

Membuat Efek Zoom Pada Gambar Postingan Blog

Tutorial Belajar Blog Terbaru | Tips Blog ,Membuat Efek Zoom Pada Gambar Postingan Blog - Kembali lagi aku ingin berbagi kepada sobat blogger bagaimana Cara Membuat Efek Zoom Pada Gambar Postingan blog . memang cara ini sudah begitu lama di terapkan oleh sobat blogger namun tak ada salahnya kalau aku mengulas lagi artikel Membuat Efek Zoom Pada Gambar Postingan agar sobat blogger yang masi pemula akan tahu seperti owner blogger ini pemula. 

sebenarnya cara ini mudah sekali dan tak merepotkan kalian dengan tambahan kode sedikit maka efek zoom untuk gambar postingan kalian akan berubah total. dan ini menjadi kebanggaan yang unik bagi sobat blogger yang baru. nah kalian bisa lihat efek zoom di postingan bawah ini atau juga  bisa lihat di blog 

Bisa di lihat Contoh gambar di atas apabila sudah mencoba mengarah kan mouse arah gamabar , gambar akan memberikan efek zoom kalau kalian sudah melihat gambar diatas silahkan kita mulai tutorial membuat efek zoom pada gambar postingan:

1. silahkan langsung saja kalian login ke blogger.

2. silahkan menuju edit tamplate . jangan lupa untuk centang expant widget.

3. cari kode ]]</b;skin>

4. kalau sudah ketemu silahkan copy kede dibawah ini dan paste diatasnya.

.post img:hover {
-moz-trnasform: scale(1.3) ;
-webkit-transform: scale(1.3);
-o-transform: scale(1.3)  ;
-ms-transform: scale(1.2)  ;
transform: scale(1.3) ;}

NB : kalau dalam template kalian ada kode  .post img:hover sebelum kode yang kalian taruh alangkah baiknya kalau kalian hapus dulu. 

aku harap postingan ini bermanfaat buat sobat blogger. semoga blog kalian akan semakin maju dari pada blog ini. semoga sukses danhappy blogging.

Read More

Membuat Animasi Loading Blog

Membuat Animasi Loading Blogspot - Animasi loading blog bisa memberikan efek manipulasi terhadap loading blog agar nampak lebih cepat, disini saya menggunakan script animasi loading dari DTE :] kemudian saya padukan dengan CSS3 Loading Animation dari Alessio Atzeni.
Script animasi Loading DTE :] menyeleksi semua link internal yang akan diberikan animasi loading, dan tentunya anda dapat memodifikasi lagi Script tersebut sesuai keinginan anda.

CSS3 LOADING ANIMATION LOOP

3 LOADING ANIMATION LOOP

MEMASANG ANIMASI LOADING KE BLOGSPOT
Tambahkan KODE CSS Animasi Loading Blog ini diatas ]]></b:skin>

#loadhalaman {position:fixed;opacity:0.93;top:0;left:0;background-color:#000;z-index:9999;text-align:center;width:100%;height:100%;padding-top:20%;color:#000;display:none;}
.loadball {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-right:5px solid transparent;border-left:5px solid transparent;border-radius:50px;box-shadow: 0 0 35px rgb(255 ,0 , 0);width:50px;height:50px;margin:0 auto;-moz-animation:spinPulse 1s infinite ease-in-out;-webkit-animation:spinPulse 1s infinite linear;}
.loadball-2 {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-left:5px solid transparent;border-right:5px solid transparent;border-radius:50px;box-shadow: 0 0 15px rgb(255 ,0 , 0);width:30px;height:30px;margin:0 auto;position:relative;top:-50px;-moz-animation:spinoffPulse 1s infinite linear;-webkit-animation:spinoffPulse 1s infinite linear;}
@-moz-keyframes spinPulse {0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(255, 0, 0)}50% { -moz-transform:rotate(145deg); opacity:1; }100% { -moz-transform:rotate(-320deg); opacity:0; }}
@-moz-keyframes spinoffPulse {0% { -moz-transform:rotate(0deg); } 100% { -moz-transform:rotate(360deg);  }}
@-webkit-keyframes spinPulse {0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(255, 0, 0)} 50% { -webkit-transform:rotate(145deg); opacity:1;} 100% { -webkit-transform:rotate(-320deg); opacity:0; }}
@-webkit-keyframes spinoffPulse {0% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); }}

Kemudian Tambahkan JQuery ini diatas </head>, disini saya menggunakan Jquery versi 1.7.2 (Pasang jika belum ada Jquery di Template anda)

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





Langkah terakhir, pasang Script dibawah ini diatas tag </body> 

<div id='loadhalaman'>
<div class='loadball'></div>
<div class='loadball-2'></div>
</div>
<script type='text/javascript'>
$(function() {
    var siteURL = "http://" + top.location.host.toString();
    var $internalLinks = $("a[href^='"+siteURL+"'], a[href^='/'], a[href^='./'], a[href^='../']");
    $internalLinks.click(function() {
        $('#loadhalaman').fadeIn(1500).delay(6000).fadeOut(1000);
    });

    // Hilangkan overlay saat diklik untuk mengatasi gangguan, terutama jika link internal diset dengan target='_blank'
    $('#loadhalaman').click(function() {
        $(this).hide();
    });
});
</script>

Untuk demo Animasi Loading Blog, saya tidak menyertakannya, anda bisa melihat langsung di blog ini, selamat mengoprek :))

Read More

Cara Membuat menu Slide Info di Blog

Berikut Ini Langkah - Langkah Membuat nya :

1. Login Ke Akun Blog Sobat
2. Pilih Rancangan --> Kemudian Pilh EDIT HTML Dan Jangan Lupa Untuk Mencentang Kolom Expand Template Widget.
3. Copas KOde Berikut Tepat Di Bawh Kode

<style type='text/css'>#info-oktri {z-index: 1000;background:-moz-linear-gradient(top, #1F2326, #000);background: -webkit-gradient(linear, left top, left bottom, from(#1F2326), to(#000));box-shadow:-2px -2px 8px #FF0000, 2px 2px 20px #FF0000;-moz-box-shadow:-2px -2px 8px #FF0000, 2px 2px 20px #FF0000;-webkit-box-shadow:-2px -2px 8px #FF0000, 2px 2px 20px #FF0000;width:400px;position: fixed;top:50px;left:0;margin-left:-330px;border:1px solid #444;background-position:top right no-repeat;height:35px;font:11px Arial;color:#eee;border-top-right-radius:8px;border-bottom-right-radius:8px;-moz-border-radius-topright:8px;-moz-border-radius-bottomright:8px;-webkit-border-top-right-radius:8px;-webkit-border-bottom-right-radius:8px;}#info-oktri{-o-transition: all 1s ease-in;-moz-transition: all 1s ease-in;-webkit-transition: all 1s ease-in;} #info-oktri:hover{width:400px;opacity:1.0;margin-left:0;}.Oktriinbox {border:1px solid #444;width:290px; margin:0px 90px 10px 10px;background:#000;color:#ffffff; border-radius :20px; padding:5px 0;-moz-border-radius:20px; -webkit-border-radius:20px;-o-transition:all 2s ease-in;-moz-transition:all 2s ease-in;-webkit-transition:all 2s ease-in;opacity:0.2;}.Oktriinbox:hover{opacity:1.0;box-shadow:1px 1px 15px #000; -moz-box-shadow: 1px 1px 15px #000; -webkit-box-shadow: 1px 1px 15px #000;background: #000;}.Oktriinbox2 {margin:5px 10px;padding:0px 8px 10px;color:#FFFFFF;overflow:hidden;height:410px;}.oktri15 {border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:15px;}.Oktri2 ul.bom {margin: 0; padding: 0;}.Oktriinbox2 li {margin-left:20px;}.Oktriinbox2 li a {color: #FFFFF; line-height: 4px; font-size: 11px;font-weight: bold; text-decoration:none;}.Oktriinbox2 li a:hover {color: red;text-shadow: 0 1px 1px #000;}.Oktriinbox2 h2 { font: 18px Droid Serif;font-weight:bold;padding:0 8px;color: #FF0000;text-shadow: 0px 1px 1px #ddd;border-bottom: 1px solid #FF0000;}.Oktritouch {font-size:22px;font-weight:bold;font-family:Arial Narrow;float:right;margin: 3px 10px 0 0;-o-transition: all 0.5s ease-out;-moz-transition: all 0.5s ease-out;-webkit-transition: all 0.5s ease-out;text-decoration:blink;}.Oktritouch:hover{-o-transform: scale(2) rotate(720deg) translate(0px);-moz-transform: scale(2) rotate(720deg) translate(0px);-webkit-transform: scale(2) rotate(720deg) translate(0px);color: red;}</style>


<div id='info-oktri'><span class='Oktritouch'>Info</span>
<div class='Oktriinbox'><div class='Oktriinbox2 oktri15'>
<h2>SELAMAT DATANG</h2>
<p style='text-align:justify'>Selamat datang di Tutorial Belajar Blog, saya harap anda senang berada diblog sederhana ini. Blog ini saya tulis dengan komputer yang sederhana dan koneksi internet yang juga sederhana. Saya berharap Anda sering datang kembali. Silahkan anda mencari hal-hal yang baru di blog saya ini
</p>
<h2>Sekilas Tentang OKTRI </h2>
<img height='120x' src='http://i1192.photobucket.com/albums/aa340/djok3/PhotoFunia-3f81ac.gif' width='90px'/>
<p style='text-align:justify'>Photo di Diatas bukan saya dan juga bukan saya memake topeng, pokoknya bukan siapa-siap saya. Nama saya Oktri  saya seorang yang ingin belajar blogger. Saya mulai belajar blogger sejak bulan Oktober 2010, dan blog ini saya buat pada bulan January 2012.></p>
</div>
</div></div>

4.Ubah Kata Atau Judu Yg Berwarna Merah Dengan Judul atau Kata-kata Sobat Sendiri
Dan Yg Terakhir Simpan Templatenya.

Read More