Tampilkan postingan dengan label Tutorial. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial. Tampilkan semua postingan

Trik Dasar Membuat Blog Responsive

Trimuda Reog | 11.33 | 0 komentar
Sebenarnya apa sih yang dinamakan Blog yang Responsive itu? Bisa kita artikan blog responsive itu adalah blog yang mudah atau gampang merespon perubahan. perubahan dari apakah? ya tentunya perubahan dari browser dan jenis OS yang kita gunakan, blog itu harus bisa dan bisa menyesuaikan jika dibuka lewat apapun. Blog itu harus maksimal saat dibuka lewat HP, Blackbarry, Iphone, Gadget dll.
Kesimpulannya adalah Blog Responsive adalah blog yang dapat menyesuaikan lebar, tinggi, besar/kecil tulisan secara otomatis sesuai tempat-nya, Seperti gadget yang kita gunakan misalnya Laptop, Tablet, Smart Phone. Tentu setiap gadget ukuran resolusi layarnya berbeda-beda ada yang 1680x1050, 1024x768, 768x1024, 320x420 dll.
Karna Blog Responsive adalah blog yang dapat menyesuaikan lebar, tinggi, besar/kecil tulisan secara otomatis sesuai tempat-nya maka Untuk membuat blog menjadi responsive cukup menambahkan kode @media-query pada CSS. Apa itu media query? 
CSS Media query memungkinkan Anda untuk menargetkan aturan CSS berdasarkan - misalnya - ukuran layar, perangkat-orientasi atau display-density. Ini berarti Anda dapat menggunakan CSS Media Query untuk men-tweak CSS untuk iPad, printer atau membuat situs responsif. Lengkapnya tentang CSS Media query selain pada topik ini (template responsif) dapat dibaca disana.

Jadi, untuk membuat blog tampil responsif, kita akan membuat CSS Media query terlebih dahulu lalu menyisipkannya kedalam template.
"ini sulit ya?"
Oh no!, ini sangat mudah man, santai saja anda akan mengerti jika anda belajar dan menyelesaikan bacaan ini.
Beruntungnya anda tidak perlu mempelajari semua tentang media query, tapi cukup memahami media query standar berbagai perangkat. Berikut silahkan dipahami:

1. Pedoman Media Queries diberbagai perangkat


/* Smartphones (portrait dan landscape) ----------- */

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* gaya Css responsive */ }


/* Smartphones (landscape) ----------- */

@media only screen and (min-width : 321px) { /* gaya Css responsive anda */ }


/* Smartphones (portrait) ----------- */

@media only screen and (max-width : 320px) { /* gaya Css responsive anda */ }


/* iPads (portrait and landscape) ----------- */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* gaya Css responsive anda */ }


/* iPads (landscape) ----------- */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* gaya Css responsive anda */ }


/* iPads (portrait) ----------- */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* gaya Css responsive anda */ }


/* Media untuk layar komputer atau laptop ----------- */

@media only screen and (min-width : 1224px) { /* gaya Css responsive anda disini */ }


/* layar besar ----------- */

@media only screen and (min-width : 1824px) { /* gaya Css responsive anda */ }


/* iPhone 4 ----------- */

@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { /* gaya Css responsive anda */ }

Catatan: Media quuery diatas boleh digunakan semua atau beberapa saja juga boleh tergantung kebutuhan setia anda. Yang warna merah adalah komentar / penjelasan tentang pada perangkat berukuran apa saja dia akan bekerja (tidak ditulis juga tidak masalah). Sedangkan yang berwarna hitam tebal " gaya Css responsive anda" adalah kode style / css responsive yang akan menentukan tampilannya.
2. Komponen - Struktur Template Blog

Seperti saya katakan diatas, anda setidaknya mengetahui dasar-dasar pada  HTML blogger karna usaha yang akan kita lakukan adalah berenang kedalam lautan kode-kode HTML pada template blogger...dan tentu saja, ulasan mengenai ini tidak akan bisa diceritakan pada halaman ini, disarankan untuk kembali membuka buku atau rajin bertanya kepada Om google, jika tidak? anda akan tenggelam dan terjatuh tak bisa bangkit lagi *cakra khan :D. Misalnya nih, anda menemukan bagian <div id="keongracun">blalalala teks dan blablalalallaa </div> maka itu adalah komponen keongracun.

Kita ambil contoh Pada template ini, strukturnya dibuat dengan komponen dasar:
header
botmenu
Pengantar
Content
right
footer

3.Membuat Css Media Query responsive pada Template

Setelah mengetahui komponen dalam struktur template diblogger anda, mari memasaknya agar siap hidang :D, maksud saya membuat @media query nya gitu loh :)...

Pada contoh ini, Kita akan mengatur tampilan blog pada perangkat berlayar seksi atau kecil dengan lebar   320px atau lebih kecil. Langsung kita pasangkan sesuai dengan contoh komponen dan struktur template diatas, maka css query agar template menjadi responsive bisa jadi sebagai berikut:

/* Inilah gaya blog responsive dihape anda berukuran kecil ----------- */

@media only screen and (Max-width : 320px)
{#header,#botmenu,#Pengantar,#Content,#right,#footer{width:100%} }
atau bisa juga
@media only screen and (Max-width : 320px)
{#header,#botmenu,#Pengantar,#Content,#right,#footer{width:320px} }
Width pada style diatas mengatur lebarnya komponen, bisa diedit sesuai keinginan. Ini hanya contoh dasar saja, anda masih bisa membuatnya lebih oke, menambahkan style yang lainnya pada komponen tertentu, misalnya kita akan menyembunyikan komponen #botmenu, maka tambahkan saja stylenya menjadi:
@media only screen and (Max-width : 320px)
{#header,,#Pengantar,#Content,#right,#footer{width:100%}#botmenu{display:none} }
Artinya : display:none menjelaskan bahwa komponen bootmenu tidak ditampilkan pada perangkat dengan lebar 320px kebawah.
Ingin memaksimalkan pengetahuan anda, saya rekomendasikan membuka pelajaran dasar css di www.w3schools.com/css/‎

4. Langkah terakhir adalah Menyisipkan Css Responsive Kedalam Template

Langkah Terakhir Modifikasi Template blogger Menjadi Rensponsive adalah menyisipkan kode css responsive yang telah kita buat tadi (Media Query) kedalam Template blogger anda.

Dimanakah Media Query diletakkan?

Seperti biasa, masuk ke edit HTML template anda.

Letakkan didalam tempat kode style ...saya tidak menganjurkan anda menggunakan CTRL+F, tapi cari dan temukan manuali, untuk ketepatan dan kerapian mengingat blogger tampilan baru sekarang membungkus beberapa komponen.

Biasanya style dalam temlapte blogger jika terbungkus akan seperti ini <style>...</style>. Cari dan  Temukan,  biasanya tidak jauh, paling beberapa baris dibawah header, dan ingat SAYA TIDAK MENGANJURKAN ANDA UNTUK menggunakan CTRL+F karna akan ada banyak, jadi usahakan
anda temukan secara manual.

Setelah menemukan <style>...</style> klik (yang diklik adalah titik-titik ...) antara pembuka dan penutup style tersebut. Jika itu benar maka style akan membuka.

letakkan Media Query yang telah kita siapkan tadi tepat dibagian paling bawah style terbuka tersebut, sebelum penutup </style>.
Contoh peletakkan:
<style>
#cssblalalalalala{..}
#lain-lain{...}
@media only screen and (Max-width : 320px)
{#header,,#Pengantar,#Content,#right,#footer{width:100%}#botmenu{display:none} }
</style>

 Nah sekian tutorial cara membuat blog Responsive dengan mudah.... semoga bermanfaat.

Search: tutorial responsive, cara agar responsive, trik modifikasi, trik blog responsive, cara mudah, supaya responsive

Trik Rooting Android All Type

Trimuda Reog | 11.18 | 0 komentar
Salam pendidikan.....
root android
Jumpa lagi dengan saya untuk menulis dan menulis.... masalahnya sudah lama saya tidak menulis jadi mohon maaf buat sobat yang sempat membaca atau melihat blog ini tidah pernah ter update.
Yaahhh mungkin karena jarang ada koneksi internet ditempatku saat ini,,, maklumlah pegunungan atau hutan rimba. wkkkkwkwkwkwwk. (jadi curhat nihhhh) sorrryyyyy....

Oke langsung aja,,,,
Kenapa sih Android kita perlu di root?? tentunya kita sudah tak pernah asing dengan istilah itu. Tidak usah kita jelaskan karena pasti sobat semua sudah lebih dulu mengetahuinya.
Kalau soal fungsinya... kenapa hp kita di root?? karena akan memudahkan semua applikasi yang kita unduh bisa diinstall di gadget kita, dan kita bisa mempunyai akses penuh atau hak penuh untuk mengoperasikan system gadget kita. bahkan kita bisa mengoprek-ngoprek software kita.... tentunya dengan cara yang safety juga.

Adapun resiko dari melakukan root itu sendiri adalah :
  • Garansi HP akan hilang : Semua vendor ponsel mengatakan bahwa HP android yang telah di root akan hilang masa garansinya, hal ini dikarenakan dengan kita telah me-root hp android kita, kita sudah mengotak-atik file system pada sebuah HP android sehingga vendor tidak mau bertanggung jawab apabila ada kerusakan HP android yang telah di root. Namun jangan khawatir, HP android yang sudah di root bisa kok dikembalikan dalam kondisi semula (unroot). Sehingga HP android masih memungkinkan untuk mendapatkan garansi kembali.
  • Rentan terhadap Virus dan Malware : Untuk masalah ini sepertinya sobat juga harus tau, dan harus tetap waspada untuk tidak sembarangan menginstal program pada hp android sobat, dan jangan lupa untuk memasang antivirus yang dapat sobat instal dari google play seperti : avast, dll.

Cara Root Android

  1. Silahkan download aplikasi framaroot cari pada mbah google
  2. Instal file APK yang telah di download
  3. Masuk ke aplikasi lalu pilih aplikasi yang ingin sobat install untuk root boleh superuser atau super SU
  4. Di menu bawahnya sobat silahkan klik aragom 
  5. Tunggu beberapa saat sampai muncul perintah untuk restart galaxy note sobat.
  6. Restart dan lihat hasilnya, jika sobat menemukan aplikasi superuser/super SU maka itu artinya android sobat sudah berhasil di root.
  7. Selamat sekarang hape android anda sudah berhasil di Root, silahkan nikmatin aplikasi dan game sesuka kamu.

Cara UnRoot Android

  1. Jalankan aplikasi framaroot
  2. Pada menu "Select an action to execute after root", kalian pilih "unroot".
  3. Tunggu beberapa saat android kalian akan kembali seperti semula.

Jenis handphone yang sudah support :

  • Perangkat Qualcomm (Gandalf Exploit) : Asus Padfone 1/2, Asus Padfone Infinity, BW T18+ (Fortis Evo), Cloudfone Thrill 430x, Disgo 8400g, DNS S4504/S4503/S4502, FAEA F1, Gigabyte GSmart G1315 Skate, Gigabyte GSmart Rio R1, Google Nexus 4, Highscreen Spark/Blast/Strike/Boost, HTC One S, Huawei Honor Pro (U8950-1), Huawei U8815/U8816 Ascend G300/G301, Huawei U8825D Ascend G330D, Karbonn Titanium S5, LG Nitro HD, LG L7 II P710/P714/P715, LG Optimus G E970, LG Optimus L3 II E425, LG Optimus L5 E610/612/615, LG Optimus L7 II P710/P713/ P714/P715, LG Optimus L7 P700/ла705, LG Optimus LTE 2, MEDION LIFE P4013, Micromax A111 Canvas Doodle, Orange Nivo, Samsung Galaxy Win I8552, Sharp Aquos Phone SH930W, Sony Xperia E C1505/Dual C1605, Sony Xperia L C210X, teXet TM-3204R, teXet TM-4677, ZTE V880G/ZTE V955
  • Perangkat MT65XX devices (Boromir exploit): Micromax Canvas HD
  • Perangkat Samsung devices (Legolas and Aragorn exploits) : Samsung Galaxy Core GT-I8262, Samsung Galaxy Proclaim S720C, Samsung Galaxy Young GT-S6312/GT-S6310, Samsung Lightray SCH-R940
  • Perangkat Exynos devices (Sam, Frodo, Legolas and Aragorn exploits) : AT&T Galaxy Note 2 SGH-I317, Highscreen Explosion, Hyundai T7s, Impression 9702 (Exynos 4412), Lenovo K860, Newman N2, Meizu MX2, Samsung Galaxy Camera EK-GC100, Samsung Galaxy Note 10.1 GT-N8000, GT-N8010, GT-N8013, GT-N8020, Samsung Galaxy Note 2 GT-N7100, Samsung Galaxy Note 2 LTE GT-N7105, Samsung Galaxy Note 8.0, Samsung Galaxy Note GT-N7000, Samsung Galaxy S GT-i9000, Samsung Galaxy S2 AT&T SGH-I777, Samsung Galaxy S2 Epic 4G Touch - SPH-D710, Samsung Galaxy S2 GT-I9100, Samsung Galaxy S3 GT-I9300, Samsung Galaxy S3 LTE GT-I9305, Samsung Galaxy Tab Plus GT-P6200/GT-P6210, Samsung Galaxy Tab 7.7 GT-P6800/GT-P6810, Samsung SGH-i997 Infuse 4G, T-Mobile Galaxy Note 2 T-889, Verizon Galaxy Note 2 SCH-I605, iBerry Auxus CoreX2 3G and CoreX4 3G
  • Perangkat Omap36XX devices (Gimli exploit) : Archos Gen8, Cliq 2 MB611, Coolpad Quattro 4G, Droid 2 (a955), Droid 2 Global (a956), Droid X (MB810), LG Marquee LS855, LG P970 Optimus Black, Motorola DEFY+ (MB525 / MB526), Motorola Droid PRO, Motorola Droid X, Parrot ASTEROID Smart, R2D2 (a957)

Untuk Gadget sobat yang tidak tertera diatas, kemungkinan bisa dan juga gagal dalam melakukan root. oleh karena itu,silahkan mencobanya terlebih dahulu untuk gadget yang tidak termasuk diatas. 


tags: trik rooting 2014, android, trik android, trik mempercantik android, hack android, modifikasi android, tampilan android, cara root android, cara rooting

Cara Buat Background Blog Ganti Saat Di Refresh

Trimuda Reog | 22.47 | 0 komentar
Puisi Dan Pendidikan, Background Blog Berubah Saat Refresh, anda ngerti kan maksud saya?, Background pada blog anda akan berubah warna kalau di refresh, gitu loh,,hehe.. Caranya sangat gampang, anda tidak perlu mengedit HTML, anda cukup meng-copy kode script dibawah ini ke elemen laman/Add Gadget pada blog anda.


<script type='text/javascript'> //CDATA[ /* JavaScript Kit (http://trimudareog.blogspot.com/)*/ //Created Ageboy: var bgcolorlist=new Array("#FFFFFF", "#B30000", "#EEFF00", "#11FF00", "#FF8A14", "#0008FF", "#4AFFF3", "#000") document.body.style.background=bgcolorlist[Math.floor(Math.random()*bgcolorlist.length)] //]]>
</script>

Silahkan anda ganti Tulisan URL yang berwarna merah dengan alamat blog anda. Setelah itu silahkan di simpan gedget anda, dan lihat hasilnya. Selamat mencoba semoga berhasil.





NB: Silahkan gonta ganti warna sesuai keinginan ente..........



Sitemap Blog Terbaru Dan Keren 2013

Trimuda Reog | 02.06 | 1komentar
Cara buat sitemap blog paling keren dan terbaru silahkan pelajari disini!
Sitemap terbaru keren ni sangat mudah dalam pembuatanya sbb:
1. Masuk Blogger
2. Klik Entry Baru/ Posting baru
3. Pilih mode HTML
4. Copas Kode Dibawah ini
5. Ganti kode warna kuning dengan alamat sobat serta modif warna yg sesuai => kasih judul dan terbitkan!

Hasilnya seperti dibawah ini
Kode HTMLnya
<div 1px="1px" solid="solid" style="height: 1200px; overflow: auto; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px; width: auto;">
<style type="text/css"> /*Outer Border ------------------*/ #toc{width:99%;margin:5px auto;border:1px solid #fff000; -webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2); -moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2); box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);} /*Label Color and Background ------------------*/ .labl{color:#000f;font-weight:bold;margin:0 -5px;padding:1px 0 2px 11px; background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%); background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#000f),color-stop(1,#C2EAFE)); border:1px solid #fff000;border-radius:4px;-moz-border-radius:4px; -webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb; -moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;} .labl a{color:#fff;} .labl:first-letter{text-transform:uppercase;} /*Latest Post Info ------------------*/ .new{color:#FF5F00;font-weight:bold;font-style:italic} /*Post Title List ------------------*/ .postname{font-weight:normal;background:-moz-linear-gradient(right,#C2EAFE 0%,#000C 40%); background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#D00),color-stop(1,#D0000));} .postname li{border-bottom: #ddd 1px dotted;margin-right:5px} </style>
<div id="toc"><script src="http://rohman.googlecode.com/files/petasitus4.js" type="text/javascript"> </script>
<script src="http://trimudareog.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"> </script></div>
</div>



Cara Buat Like Page Blog FB Tampilan Timer

Trimuda Reog | 21.59 | 6komentar
fans page timer
Selamat malam sobat blogger. Kali ini saya akan membahas tentang cara membuat like fan page pada blog dengan timer. Nah, maksudnya tampilan ini menggunakan timer atau wakktu sesuai yang kita inginkan. Misal, 15 detik, 20 detik, atau 30 detik dan seterusnya. Tinggal kita seting semau kita dan akan menghilang dengan sendirinya tanpa mengganggu pemandangan. he'eeee! gak usah panjang lebar langsung aja kita ikuti langkahnya sobat.

1. Langsung masuk blogger >template >edit HTML
2. Cari kode </body> kemudian letakkan script dibawah ini tepat diatasnya.
<script type='text/javascript'>
    //<![CDATA[
        KNFBFansPRO='Puisi dan Pendidikan'
    //]]>
</script>
<style>#fblikepop{background-color:#fff;display:none;position:fixed;top:200px;_position:absolute; /* hack for IE 6*/width:450px;border:10px solid #6F6F6F;z-index:200;-moz-border-radius: 9px;-webkit-border-radius: 9px;margin:0pt;padding:0pt;color:#333333;text-align:left;font-family:arial,sans-serif;font-size:13px;}
#fblikepop body{background:#fff none repeat scroll 0%;line-height:1;margin:0pt;height:100%;}
.fbflush{cursor: pointer;font-size:11px !important;color:#FFF !important;text-decoration:none !important;border:0 !important;}
#fblikebg{display:none;position:fixed;_position:absolute; /* hack for IE 6*/height:100%;width:100%;top:0;left:0;background:#000000;z-index:100;}
#fblikepop #closeable{float:right;margin:7px 15px 0 0;}
#fblikepop h1{background:#6D84B4 none repeat scroll 0 0;border-top:1px solid #3B5998;border-left:1px solid #3B5998;border-right:1px solid #3B5998;color:#FFFFFF !important;font-size:18px !important;font-weight:normal !important;padding:5px !important;margin:0 !important;font-family:&quot;Lucida Sans Unicode&quot;, &quot;Lucida Grande&quot;, sans-serif !important;}
#fblikepop #actionHolder{height:30px;overflow:hidden;}
#fblikepop #buttonArea{background:#F2F2F2;border-top:1px solid #CCCCCC;padding:10px;min-height:50px;}
#fblikepop #buttonArea a{color:#999999 !important;text-decoration:none !important;border:0 !important;font-size:10px !important;}
#fblikepop #buttonArea a:hover{color:#333 !important;text-decoration:none !important;border:0 !important;}
#fblikepop #popupMessage{font-size:12px !important;font-weight:normal !important;line-height:22px;padding:8px;background:#fff !important;}
#fblikepop #counter-display{float:right;font-size:11px !important;font-weight:normal !important;margin:5px 0 0 0;text-align:right;line-height:16px;}</style>
<script src='http://mybloggertricks.googlecode.com/files/jquery.js' type='text/javascript'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/>
<script src='http://likebox-nurrohman.googlecode.com/files/likebox.js' type='text/javascript'/>
<script language='javascript'>
//<![CDATA[
    $(document).ready(function(){                      
        $().KNFBFansPRO({
           timeout: 30,
            wait: 0,
            url: 'http://www.facebook.com/pages/CintaDanSeni/143954359061554',
            closeable: true        });
    });
//]]>
</script>
<div id='fbtpdiv'/>

3. Simpan template sobat
4. Eits belum selesai lihat keterangan dibawah!

Keterangan :
  • Ganti ini Puisi dan Pendidikan dengan nama \halaman/Fanspage Facebook sobat. 
  • Timer diset untuk 30 detik, untuk mengubahnya cukup mengedit timeout: 30 
  • Widget ini muncul segera setelah ada visitor. Jika sobat ingin untuk muncul setelah satu menit atau lebih kemudian edit wait: 0
  • Ganti http://www.facebook.com/pages/CintaDanSeni/143954359061554 dengan alamat halaman/Fanspage sobat. 

Ada juga cara membuat komentar fb dengan mudah dibawah postingan silahkan dibaca.
Demikian cara membuat like fans page blog dengan timer ini semoga bermanfaat.

Facebook SMS Gratis

Trimuda Reog | 22.37 | 6komentar
Kali ini saya coba share tentang sms gratis dari fb sob, nah kalau kita lagi gak sempat pegang hp saat online kan bisa sms menggunakan fn. Bagaimana caranya? Langsung aja yuk

1. Login acc FB sobat

[Image: LoginFB.jpg]



2. Next step, seperti di atas kamu klik disini untuk menuju ke http://ui.sg/ .


3. Nah, sobat juga akan langsung didirect ke http://www.dodotext.com


4. Selanjutnya klik link Facebook pada Add Our Facebook Application

[Image: FB_1.jpg]


5. Klo udah, Allow untuk mengizinkan aplikasi

[Image: FB_3.jpg]

6. Kemudian add aplikasi ke profil.
[Image: FB_4.jpg]

7. Sama juga seperti di atas, sobat setting negara tujuan SMS, Nomor HP tujuan, dan ketik SMS kamu seperti biasa (max 100 karakter), lalu Send SMS.

[Image: FB_2-1.jpg]



8. Selesai...
9. Coba dulu ya...

Membuat Animasi Css Profil Blogger

Trimuda Reog | 22.17 | 19komentar
Cara buat animasi css
Selamat malam sobat, belajar CSS Animasi memang perlu ketelatenan dan ke uletan. maka dari tiu saya tidak cepat bisa, soalnya masih newbie. Tapi tak apalah sedikit demi sedikit lama-lama menjadi bukit. Animasi Css Profil Blog ini merupakan salah satu dari sekian banyak efek animasi menggunakan CSS. Animasi ini akan membuat efek yang menarik saat kursor menyentuhnya. Untuk demoya silahkan Lihat profil saya yang ada di home page. Nah bagaimana cara membuat animasi css profil blog? langsung saja kita praktekkan sobat :

1. Login ke Akun Blogger sobat masing-masing.
2. Klik Design or Rancangan, kemudian pilih Edit HTML
3. Centang (Expand Widget Template)
4. Untuk keamanan lebih baik kita (Download Template Lengkap)
5. Gunakan (Ctrl+F) or (Alt+E+F) untuk memudahkan pencarian
6. Cari kode : ]]></b:skin>
7. Jika Sudah Ketemu, letakkan Kode CSS dibawah ini sebelum atau diatas kode ]]></b:skin> .
dl.profile-datablock {clear: both; text-align:center;}
#sidebar .Profile img.profile-img {
border: 8px solid #aaa;
opacity: 0.3;
border-radius: 6px;
margin: 20px 0 20px 60px;
padding: 4px;
background: #eee;
box-shadow: 1px 1px 1px #555, -1px -1px 1px #555, 0 0 8px #444;
-moz-box-shadow: 1px 1px 1px #555, -1px -1px 1px #555, 0 0 8px #444;
-webkit-box-shadow: 1px 1px 1px #555, -1px -1px 1px #555, 0 0 8px #444;
-o-transition: margin-left 1.5s ease-in 2s, margin-top 1.5s 2.5s, -o-transform 1.5s ease-out 1s, opacity 2s ease-in;
-moz-transition: margin 1.5s ease-in 2s, -moz-transform 1.5s ease-out 1s, opacity 2s ease-in;
-webkit-transition:margin 1.5s ease-in 2s, -webkit-transform 1.5s ease-out 1s, opacity 2s ease-in;
}
#sidebar .Profile:hover img.profile-img {
opacity: 1.0;
border-radius: 12px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
-moz-box-shadow: 1px 1px 1px #555, -1px -1px 1px #555, 0 0 16px #222;
margin: 40px 0px 20px 10px;
-o-transform: rotate(1460deg) scale(1.8) translate(35px, 10px);
-moz-transform: rotate(1460deg) scale(1.8) translate(35px, 10px);
-webkit-transform: rotate(1460deg) scale(1.8) translate(35px, 10px);
-o-transition: margin-left 1.5s ease-in 0.4s, margin-top 1.5s, -o-transform 2.5s ease-out 1.4s, opacity 3s ease-in 4s;
-moz-transition: margin 1.5s ease-in 0.4s, -moz-transform 2.5s ease-out 1.4s, opacity 3s ease-in 4s;
-webkit-transition: margin 1.5s ease-in 0.4s, -webkit-transform 2.5s ease-out 1.4s, opacity 3s ease-in 4s;
}

8. Save
9. Selamat mencoba

Ada cara untuk modifikasi link dengan animasi css, silahkan kunjungi artikel cara buat animasi link dengan css.

Keterangan:Rubah nilai magrin 60px dengan sesuka sobat semakin kecil angka semakin ke kiri gambar tersebut.

SEO Smart Auto Link

Trimuda Reog | 20.54 | 12komentar
Puisi dan pendidikan ++++ kali ini akan membahas seputar SEO smar link. pernah mendengar gak sob? plugin yang untuk wordpress itu? Plugin itu fungsinya untuk mengubah setiap kata yang kita tentukan menjadi sebuah link.  Nah, kalau sudah menjadi link, apa fungsinya? tentu sobat blogger lebih tahu, soalnya saya akan posting tentang puisi atau pendidikan lagi males lebay sob. Daripada nganggur mending share yang bermanfaat buat sahabat blogger? iya gak?. Ok, langsung kembali ke topik. kalu dulu hanya bisa digunakan pada WP, sekarang sudah bisa digunakan pada blogspot sob.


Bagaimana cara kerja script ini?
Script ini akan membaca setiap kata pada seluruh postingan sobat. Misalnya, sobat memasukkan kata "puisi" pada script ini maka semua posting yang mengandung kata "puisi" akan di direct ke alamat yang telah sobat tentukan.

Apakah script autolink ini melanggar google guidelines?
Ya, asalkan sobat tidak pasang lebih dari satu kata tidak masalah. alias sewajarnya saja.

Untuk cara pemasangannya lihat dibawah :

1. Login akun blogger sobat
2. Pastikan masuk edit HTML
3. Cari kode </body>, dan letakkan script dibawah ini tepat diatas </body>
4.
<b:if cond='data:blog.url != data:blog.homepageUrl'><script type='text/javascript'>
function autoLink(){
this.keywdHref = new Object();
this.add = function(keyword, href){
if(keyword.substr(0,1) != &quot; &quot;){keyword = &quot; &quot; + keyword;}
this.keywdHref[keyword] = href;
}
this.createAnchor = function(){
var objs = document.getElementsByTagName(&quot;div&quot;);
for(var i=0; i&lt;objs.length; i++){
var obj = objs[i];
if(obj.className.indexOf(&quot;post-body&quot;)&gt;-1){
var content = obj.innerHTML;
for(var keyword in this.keywdHref){
var href = this.keywdHref[keyword];
var newstr = content.replace(keyword, &quot;&lt;a href=&#39;&quot;+href+&quot;&#39;&gt;&quot;+keyword+&quot;&lt;/a&gt;&quot;, &quot;gi&quot;);
obj.innerHTML = newstr;
content = newstr;
}
}
}
}
this.startScript = function(){
var onLoad = window.onload;
window.onload = function(){
if(onLoad){onLoad();}
setTimeout(&quot;f.createAnchor()&quot;, 100);
}
}
}
</script>
<script type='text/javascript'>
var f = new autoLink();
f.add(&quot;puisi&quot;, &quot;http://trimudareog.blogspot.com/&quot;);
f.startScript();
</script></b:if>
Keterangan :

* Ganti akhir script "puisi" dengan kata kunci sobat
* Ganti url  puisi dan pendidikan dengan url sobat.

Selamat berkarya sobat....

Daftar Kategori


close
cbox
 
Alamat: Talun | Ngebel | Ponorogo
Copyright © 2011. PUISI DAN PENDIDIKAN - All Rights Reserved
Template Modify by Cah Ngebel
Proudly powered by Blogger