Tutorial Cara Membuat Gallery Foto yang Unik di Blog

Assalamu 'alaikum Wr Wb

Selamat pagi para blogger, cuaca pagi ini sangat dingin sekali ya??

tapi meskipun cuacanya dingin begini, saya masih mau berbagi tentang Tips dan trik dalam dunia blogger.

yang saya akan posting kali ini ialah tentang judul yang sesuai diatas.

langsung saja, simak tutorial berikut!

Langkah pertama :

- Anda harus masuk ke akun blog (Dashboard)

- Klik opsi lainnya

- Klik Template

 Screenshoot

Setelah anda sudah masuk ke Template

- Klik Edit Html

- Cari kode (Tekan Ctrl + F ) : ]]></b:skin

- Kemudian Copy (Salin) Kode Script CSS berikut :

/* Photo Gallery styles */ .gallery { margin: 100px auto 0; width: 800px; } .gallery a { display: inline-block; height: 135px; position: relative; width: 180px; /* CSS3 Prevent selections */ -moz-user-select: none; -webkit-user-select: none; -khtml-user-select: none; user-select: none; } .gallery a img { border: 8px solid #fff; border-bottom: 20px solid #fff; cursor: pointer; display: block; left: 0px; position: absolute; top: 0px; width: 100%; z-index: 1; /* CSS3 Box sizing property */ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; /* CSS3 transition rules */ -webkit-transition: all 1.0s ease; -moz-transition: all 1.0s ease; -o-transition: all 1.0s ease; transition: all 1.0s ease; /* CSS3 Box Shadow */ -moz-box-shadow: 2px 2px 4px #444; -webkit-box-shadow: 2px 2px 4px #444; -o-box-shadow: 2px 2px 4px #444; box-shadow: 2px 2px 4px #444; } /* Custom CSS3 rotate transformation */ .gallery a:nth-child(1) img { -moz-transform: rotate(-25deg); -webkit-transform: rotate(-25deg); transform: rotate(-25deg); } .gallery a:nth-child(2) img { -moz-transform: rotate(-20deg); -webkit-transform: rotate(-20deg); transform: rotate(-20deg); } .gallery a:nth-child(3) img { -moz-transform: rotate(-15deg); -webkit-transform: rotate(-15deg); transform: rotate(-15deg); } .gallery a:nth-child(4) img { -moz-transform: rotate(-10deg); -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } .gallery a:nth-child(5) img { -moz-transform: rotate(-5deg); -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } .gallery a:nth-child(6) img { -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } .gallery a:nth-child(7) img { -moz-transform: rotate(5deg); -webkit-transform: rotate(5deg); transform: rotate(5deg); } .gallery a:nth-child(8) img { -moz-transform: rotate(10deg); -webkit-transform: rotate(10deg); transform: rotate(10deg); } .gallery a:nth-child(9) img { -moz-transform: rotate(15deg); -webkit-transform: rotate(15deg); transform: rotate(15deg); } .gallery a:nth-child(10) img { -moz-transform: rotate(20deg); -webkit-transform: rotate(20deg); transform: rotate(20deg); } .gallery a:nth-child(11) img { -moz-transform: rotate(25deg); -webkit-transform: rotate(25deg); transform: rotate(25deg); } .gallery a:nth-child(12) img { -moz-transform: rotate(30deg); -webkit-transform: rotate(30deg); transform: rotate(30deg); } .gallery a:focus img { cursor: default; height: 250%; left: -150px; top: -100px; position: absolute; width: 250%; z-index: 25; /* CSS3 transition rules */ -webkit-transition: all 1.0s ease; -moz-transition: all 1.0s ease; -o-transition: all 1.0s ease; /* CSS3 transform rules */ -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); }

- Setelah itu, paste (tempel) diatas kode script ]]></b:skin

- Simpan (Save) template


Langkah Kedua :

- Klik Laman (Page)


- kemudian Klik HTML


- Copy dan paste (salin dan tempel ) kode script di bawah ini pada Area

<div class="gallery">

<a tabindex="1"><img src="IMAGE LINK"></a>

<a tabindex="2"><img src="IMAGE LINK"></a>

<a tabindex="3"><img src="IMAGE LINK"></a>

<a tabindex="4"><img src="IMAGE LINK"></a>

<a tabindex="5"><img src="IMAGE LINK"></a>

<a tabindex="6"><img src="IMAGE LINK"></a>

<a tabindex="7"><img src="IMAGE LINK"></a>

<a tabindex="8"><img src="IMAGE LINK"></a>

<a tabindex="9"><img src="IMAGE LINK"></a>

<a tabindex="10"><img src="IMAGE LINK"></a>     

</div>

- Simpan (Save)

keterangan :

- Warna kuning pada kata IMAGE LINK, anda ganti dengan Link Foto Anda.

bisa dari link foto di facebook, atau situs lainnya.

Semoga postingan kali ini, bisa sangat membantu anda, karena pada dasarnya orang yang bisa menyenangkan orang lain termasuk perkara Amal.

Terima Kasih.

#A3

Tutorial cara memasang atau membuat kotak komentar facebook di blog

Tutorial cara memasang atau membuat kotak komentar facebook di blog

sebelum anda memasang kotak komentar facebook di blog, terlebih dahulu kalian harus menyiapkan  ID Facebook!

bagi yang belum tau ID Facebooknya

Silahkan klik dibawah ini !

Setelah kalian sudah punya ID Facebook, maka ikuti langkah-langkah berikut ini :

Langkah pertama :

- Anda harus masuk ke akun blog (Dashboard)

- Klik opsi lainnya

- Kemudian Klik Template

setelah anda sudah masuk ke Template

-Klik Edit Html

Cari kode dibawah ini : Tekan Ctrl + F

<div class='comments' id='comments'>

Langkah kedua :
 Setelah itu copy (salin) kode script dibawah ini :

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/><fb:comments-count expr:href='data:post.url'/> Comments</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments</div>
<div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == &quot;item&quot;'><div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='500'/></b:if></div>
<div class='comments comments-page' id='blogger-comments-page'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><script src='http://code.jquery.com/jquery-latest.js'/><meta content='100002645764346 ' property='fb:admins'/><script type='text/javascript'>function commentToggle(selectTab) {$(&quot;.comments-tab&quot;).addClass(&quot;inactive-select-tab&quot;);$(selectTab).removeClass(&quot;inactive-select-tab&quot;);$(&quot;.comments-page&quot;).hide();$(selectTab + &quot;-page&quot;).show();}</script><style>.comments-page { background-color: #f2f2f2;}#blogger-comments-page { padding: 0px 5px; display: none;}.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}.comments-tab:hover { background-color: #eeeeee;}.inactive-select-tab { background-color: #d1d1d1;}</style>


Keterangan :
-Angka yang diberi warna hijau adalah ID Facebook, silahkan ganti dengan ID Facebook anda !
- Kemudian paste (Tempel ) tepat dibawah kode div class='comments' id='comments'>

untuk melihat hasilnya : silahkan Klik Pratinjau

Semoga postingan ini dapat bermanfaat buat anda.


Terima Kasih

#A3

Tutorial SEO (Search Engine Optimization ) versi Asli

 Tutorial cara belajar SEO (Search Engine Optimization )

SEO singkatan dari "Search Engine Optimization." 
dalam arti bahasa indonesia ialah "Optimasi Mesin Pencari"
Semua mesin pencari utama seperti Google, Yahoo dan Bing memiliki hasil tersebut, di mana halaman web dan konten lain seperti video atau daftar lokal akan ditampilkan dan peringkat berdasarkan apa yang mesin pencari anggap paling relevan bagi pengguna.

"Serangkaian proses yang dilakukan secara sistematis yang bertujuan untuk meningkatkan volume dan kualitas trafik kunjungan melalui mesin pencari menuju situs web tertentu dengan memanfaatkan mekanisme kerja atau algoritma mesin pencari tersebut."

Tujuan dari SEO adalah menempatkan sebuah situs web pada posisi teratas, atau setidaknya halaman pertama hasil pencarian berdasarkan kata kunci tertentu yang ditargetkan. Secara logis, situs web yang menempati posisi teratas pada hasil pencarian memiliki peluang lebih besar untuk mendapatkan pengunjung. 
Dengan berkembangnya pemanfaatan jaringan internet sebagai media bisnis, kebutuhan atas SEO juga semakin meningkat. Berada pada posisi teratas hasil pencarian akan meningkatkan peluang sebuah perusahaan pemasaran berbasis web untuk mendapatkan pelanggan baru. Peluang ini dimanfaatkan sejumlah pihak untuk menawarkan jasa optimisasi mesin pencari bagi perusahaan-perusahaan yang memiliki basis usaha di internet
 
Nah, untuk lebih jelasnya download artikelnya dibawah ini :

 

#A3

Tutorial Cara Memasang Cbox atau Buku Tamu di Blog Bagian II

Assalamu 'alaikum wr wb
postingan kali ini saya akan memberikan penjelasan mengenai cara membuat buku tamu di Blog bag.II
postingan Sebelumnya saya sudah menjelaskan tata cara membuat buku tamu dan kini saya akan memberikan tutorial lagi berkaitan dengan judul diatas.

berikut Tutorialnya, simak ya !

1). Langkah Pertama kamu masuk/login ke Dashboard blog kamu
2). Klik opsi lainnya--> Tata Letak --> Tambah gadget --> HTML/Javascript
3). Masukkan kode script dibawah ini pada kotak yang di sediakan.


<div class='widget-content'>
<style type="text/css">
.gb_fixed{
position:fixed;
top:0px;
left:0px;
z-index:+10;
}
* html .gb_fixed {position:relative;}
#hidden_gb2 {
display:none;
border:2px solid #004831;
background:#000000;
padding:10px;
padding-top:0px;
}
</style>
<div class="gb_fixed">
<table id="hidden_gb2" cellpadding="0" cellspacing="0">
<tr><td>
<div><a href="javascript:void(0)" onclick="gb_showHideGB()"><b style="color:red">[ Selesai ]</b></a></div>
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="200" height="305" src="http://www5.cbox.ws/box/?boxid=839171&amp;boxtag=24dr0b&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain5-839171" style="border:#ababab 1px solid;" id="cboxmain5-839171"></iframe></div>
<div><iframe frameborder="0" width="200" height="75" src="http://www5.cbox.ws/box/?boxid=839171&amp;boxtag=24dr0b&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform5-839171" style="border:#ababab 1px solid;border-top:0px" id="cboxform5-839171"></iframe></div>
</div>
<!-- END CBOX -->

</td></tr></table>
</div>
<script src="http://sites.google.com/site/copycatgroup/Home/jsfile/hiddengb2.js"></script>
<div style="z-index:+5" class="gb_fixed">
<a href="javascript:void(0)" onclick="gb_showHideGB()">
<img border="0" style="border:0px" src="https://lh3.googleusercontent.com/-DDNjgH_n_MM/UzQ1rWVlHcI/AAAAAAAAAKI/h9ZZy_8oSDw/w346-h930/gol.png"/>
</a>
</div>
</div>
<div class='clear'></div>
<span class='widget-item-control'>
<span class='item-control blog-admin'>
<a class='quickedit' href='//www.blogger.com/rearrange?blogID=8372343446577335578&widgetType=HTML&widgetId=HTML7&action=editWidget&sectionId=sidebar' onclick='return _WidgetManager._PopupConfig(document.getElementById("HTML7"));' target='configHTML7' title='Edit'>
<img alt='' height='18' src='http://img1.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/>
</a>
</span>
</span>
<div class='clear'></div>



4). Kemudian SAVE / SIMPAN

Gampang, kan?????


Keterangan :
- Text yang saya beri warna HIJAU, silahkan kamu ganti dengan CBOX yang kamu punya .
   bagi yang belum punya CBOX? Silahkan

KLIK DISINI

- Blog ID yang saya beri warna MERAH, silahkan kamu ganti dengan Blog ID kamu.


Semoga Tutorial kali ini dapat membantu teman-teman.
Terima Kasih atas kunjungannya.

Wassalamu 'alaikum wr wb.

#A3

Tutorial Cara Membuat dan Memasang Cbox Auto Hide atau Buku Tamu di Blog

Tutorial Cara Memasang  cbox Auto Hide atau Buku Tamu di Blog

Apa kabar sahabat dunia blogger???

Apakah Baik-baik saja?

kalau baik, ucapkan kalimat HAMDALAH ( Alhamdulillahi Robbil 'Alamin)

Langsung saja kita ke TKP, saya akan menjelaskan sedikit mengenai auto hide Cbox .....
Auto hide Cbox adalah efek yang akan membuat buku tamu kamu muncul ketika pointer mouse menyorotinya, hanya perbedaannya sedikit sekali dengan buku tamu show / hide. Bagi kamu yang ingin memasang widget ini, silahkan baca tutorial ini dengan membaca Kalimat BASMALLAH bersama-sama ......

Bismillahirohmanirrohim .....

Langkah pertama, kita buat terlebih dahulu buku tamunya/chat box.

 Caranya ialah :

1)      Masuk ke alamat situs http://www.cbox.ws

2)      Klik “Get your own free Cbox now !”

3)      Isikan biodata kamu sesuai kolom yang disediakan dan pilih desain kesukaan kamu.

4)      Cbox kamu sekarang sudah jadi, kemudian kamu login akun kamu, isi username dan masukkan password yang sudah dibuat tadi.

 5)      Setelah kamu login, kamu akan masuk ke control panel home

6)      Copy script yang sudah jadi

Langkah kedua, Caranya ialah :

1. Masuk ke dashboard
2. Klik opsi lainnya--> tata letak --> Tambah gadget --> HTML/Javascript
3. Masukkan kode script dibawah ini pada kotak yang di sediakan.

 HTML/Javascript

<style type="text/css">

#gb{

position:fixed;

top:20px;

z-index:+1000;

}* html #gb{position:relative;}

.gbtab{

height:150px;

width:50px;

float:left;

background:url('https://lh6.googleusercontent.com/-pAIJUMNChzw/UzF4Dh9Q3EI/AAAAAAAAADY/O7tXAn_fRjs/w426-h930/buku+tamu.png ') no-repeat;

}

.gbcontent {

float:left;

border:1px solid #000000;

-moz-border-radius-bottomleft:5px;

-webkit-border-radius-bottomleft:5px;

-o-border-radius-bottomleft:5px;

-khtml-border-radius-bottomleft:5px;

-moz-border-radius-topright: 5px;

-moz-border-radius-topleft: 5px;

background: #F2F2F2; url() no-repeat bottom;

padding:10px;

}

</style>

<script type="text/javascript">

function showHideGB(){

var gb = document.getElementById("gb");

var w = gb.offsetWidth;

gb.opened ? moveGB(0, 51-w) : moveGB(30-w, 0);

gb.opened = !gb.opened;

}function moveGB(x0, xf){

var gb = document.getElementById("gb");

var dx = Math.abs(x0-xf) > 25 ? 25 : 1;

var dir = xf>x0 ? 1 : -1;

var x = x0 + dx * dir;

gb.style.right = x.toString() + "px";

if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 5);}

}</script>

<div id="gb">

<div class="gbtab" onmouseover="showHideGB()"> </div>

<div class="gbcontent">

<center>

<!-- BEGIN CBOX - www.cbox.ws - v001 -->

<div id="cboxdiv" style="text-align: center; line-height: 0">

<div><iframe frameborder="0" width="200" height="305" src="http://www5.cbox.ws/box/?boxid=839171&amp;boxtag=24dr0b&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain5-839171" style="border:#ababab 1px solid;" id="cboxmain5-839171"></iframe></div>

<div><iframe frameborder="0" width="200" height="75" src="http://www5.cbox.ws/box/?boxid=839171&amp;boxtag=24dr0b&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform5-839171" style="border:#ababab 1px solid;border-top:0px" id="cboxform5-839171"></iframe></div>

</div>

<!-- END CBOX -->

<br />

<div style="text-align:center">

<span style="float:right; color:#000000;">Get this <a target="_blank" href="http://sistemkorelasi-xp7.blogspot.com"> widget! </a></span>

</div>

</center></div>

<script type="text/javascript">

var gb = document.getElementById("gb");

gb.style.right = (50-gb.offsetWidth).toString() + "px";

</script>

</div>

  

           4.       Klik SAVE (simpan) 

Keterangan :
- Silahkan Ganti kode yang berwara Merah dengan kode script buku tamu milik kamu.

 

Alhamdulillah, selesai deh !

Semoga tutorial ini bisa membantu.
Terima Kasih atas kunjungannya.

#A3

Tutorial Cara Memasang Progres bar pembuka di Blog (Bagian 1)

Tutorial Cara Memasang Progres bar pembuka di Blog (Bagian 1)

Apa kabar sahabat dunia blogger???
Apakah Masih semangat? Kalau iya, ayo sama-sama tepuk semangat....
Prok! prok...prok drang-drang-drang- drang-drang ....
Prok! prok...prok dring-dring-dring-dring-dring ....
Prok! prok...prok drung-drung-drung-drung-drung ....
Prok! prok...prok drang-drang-drang- drang-drang .... dring-dring-dring-dring-dring .... drung-drung-drung-drung-drung ....

Sheeeep! Awo-awo ....
Hehehehe :D
Owh iya lupa, maaf  keluar jalur pembahasan, cuz terlalu semangat soalnya.

Oke deh,Langsung saja kita ke TKP …..

Bismillahirohmanirrohim

1. Login ke Blog dulur, ketik Url https://draft.blogger.com/home + Tekan ENTER
2. Klik Opsi Lainnya terus klik Template
3. Klik Edit HTML
4. Klik Kiri ditengah script kemudian Tekan Ctrl + F (untuk memudahkan pencarian)
5. Masukkan/Ketikkan Kode  dan Tekan ENTER

Langkah selanjutnya, dulur-dulur Copy Kode Script Jquery dibawah ini
kemudian Paste atau tempel diatas Kode </head>

<style> /* arhammazid.com */ #md-loading { position: fixed; z-index: 50; top: 0; left: 0; width: 100%; height: 100%; background: #FDFEF8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg42G6CTWVXZ4mTLj7obEm4Zq2pwIFtOedslcNJwUM73VQSiu9l1SZX4hUiJ28t6m5olrW2-MTuDwUQbpe6l_nfNy0FlheyHbQIV2n_nqSqkr-mLk6IrsNF5r0Ce5TMP2p-gvWAp0csFcjM/s1600/Bloggertrix-loading.gif) no-repeat center; line-height: 350px; text-align: center; font-size: 36px; color: #353231; text-indent: -9999px; } .MD #md-loading { display: none; } @media only screen and (device-width: 768px) { #loading { position:absolute; width:1040px; min-height:768px; } } #md-progress-bar { position: absolute; top: 0; left: 0; background: #0d5ff6; opacity: 0.8; width: 0; height: 18px; } #md-loader { height: 100%; display: none; } </style> <script> (function($){ $("html").removeClass("MD"); $("#header").ready(function(){ $("#md-progress-bar").stop().animate({ width: "25%" },1500) }); $("#footer").ready(function(){ $("#md-progress-bar").stop().animate({ width: "75%" },1500) }); $(window).load(function(){ $("#md-progress-bar").stop().animate({ width: "100%" },600,function(){ $("#md-loading").fadeOut("fast",function(){ $(this).remove(); }); }); }); })(jQuery); </script>

- - Berikutnya kalian cari kode <body> atau ketikkan kode <body> dalam kotak pencarian agar lebih cepat

Apabila sudah ditemukan, dulur-dulur Copy atau Salin Kode Script dibawah ini
kemudian paste / tempel dibawah kode <body> ...........!!!

<div id='md-loading'> <div id='md-progress-bar'> </div> <div id='md-loader'> Memuat Halaman...</div> </div>

Sekarang kakang-kakang,dulur-dulur, atau batur-batur bisa mencobanya.......... Hampura, Apabila ada salah-salah kata atau dari segi tempat penulisan. Semoga Bermanfaat !

#A3

Tutorial cara Memasang/Mengganti Older Post Menjadi Opsi Angka

Assalamu 'alaikum wr wb selamat datang para blogger, saya ingin berbagi Tips dan Trik Tutorial cara membuat/memasang older post, postingan yang satu ini adalah mengenai pengaturan halaman postingan, agar supaya postingannya terkesan rapih. ada baiknya kita gunakan menu older post. Simaklah Tutorial ini .....!
1. Login ke Blog Kamu
2. Ketik Url https://draft.blogger.com/home dan Enter
3. Click Opsi Lainnya
 4. Click Template dan "Edit HTML"
 5. Click Kiri ditengah Script dan Tekan Ctrl + F
6. Ketik ]]></b:skin> dan enter
7. Apabila sudah ditemukan Kemudian Copy kode Script CSS dibawah ini dan Paste diatas kode ]]></b:skin>

.showpageArea a { text-decoration:underline; } .showpageNum a { text-decoration:none; border: 1px solid #cccccc; margin:0 3px; padding:3px; } .showpageNum a:hover { border: 1px solid #cccccc; background-color:#cccccc; } .showpagePoint { color:#333; text-decoration:none; border: 1px solid #cccccc; background: #cccccc; margin:0 3px; padding:3px; } .showpageOf { text-decoration:none; padding:3px; margin: 0 3px 0 0; } .showpage a { text-decoration:none; border: 1px solid #cccccc; padding:3px; } .showpage a:hover { text-decoration:none; } .showpageNum a:link,.showpage a:link { text-decoration:none; color:#333333; }

8. Kemudian cari kode </body> ini Setelah itu Copy script dibawah ini dan Paste diatas kode <.body>

<!--Page Navigation Starts--> <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <script type='text/javascript'> var pageCount=5; var displayPageNum=5; var upPageWord ='Previous'; var downPageWord ='Next'; </script> <script src='http://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/> </b:if></b:if> <!--Page Navigation Ends -->

9. Simpan Template Dan Alhamdulillah, Selesai bisa di Lihat Hasilnya

Sekian Tutorial saya ini tentang Cara Memasang/Mengganti Older Post Semoga dapat membantu ...... :D

#A3