tambah super box(light box)

Apa yang Baru Tentang Widget ini

• Pertama-tama kita tambahkan kode widget pada template kita,
• Anda akan dapat link widget ini untuk gambar tunggal Anda di blogger.
• Anda dapat menggunakannya untuk membuat galeri foto.
• Anda dapat membuat Slide show dengan itu.
• Anda dapat menambahkannya ke link Anda.

Bagaimana Apakah Ini Bekerja

• Pertama-tama kita tambahkan kode widget pada template kita,
• Kemudian ketika kita menambahkan gambar ke posting baru kita harus link ke widget dengan menambahkan kode kecil untuk itu dengan mengubah modus menulis posting dari menulis untuk html jangan khawatir itu mudah, lanjutkan membaca untuk mencari tahu

Langkah 1

GO ke dashboard blogger account Anda dan arahkan ke Layout>> Edit html dan temukan kode berikut.

</ Head> 

Dan Sebelum menambahkan kode berikut.

<- Kode-By-AllBlogTools ->
 href='http://www.mydatanest.com/files/allblogtools/29603_izeup/lytebox.css' <link media='screen' rel='stylesheet' type='text/css'/>
 <script src='http://www.mydatanest.com/files/allblogtools/29602_xemqf/lytebox.js' type='text/javascript'/>
 <- Kode-By-AllBlogTools ->

Sekarang kita telah menambahkan semua memerlukan kode ke template, memungkinkan tahu bagaimana menggunakannya.

Langkah 2 - Bagaimana Menggunakan

Cara untuk membuat widget ini bekerja di blog Anda sangat mudah tetapi Anda harus tahu apa yang Anda lakukan,
Apa yang harus Anda lakukan adalah: menambahkan kode kecil untuk kode gambar. dan Anda dapat menemukan kode gambar di daerah pasca menulis ketika Anda mengubah modus dari menulis untuk mengedit html Silakan lihat gambar berikutnya.

Apa Dan Bagaimana Untuk Tambah:

Langkah 2.1 - Tambahkan Ini Untuk Image Tunggal

Pergi ke account blogger, mulai menulis posting Anda dalam mode normal (menulis)
Dan setelah Anda menambahkan gambar ke posting Anda, silahkan ubah modus Anda untukmengedit html, lihat imsge sebelumnya

Anda akan menemukan kode gambar terlihat seperti berikut.

<A onblur = "try {parent.deselectBloggerImageGracefully ();} catch (e) {}"  style = "display: block; margin: 10px 0px auto; text-align: center; kursor: pointer; kursor: tangan; width: 400px; height: 324px;"  border = "0" alt = "" id = "BLOGGER_PHOTO_ID_5406207422236379378" /> </ a>

Apa yang kita akan perlu menambahkan kode ini adalah bagian selanjutnya

rel = "lytebox" 

Contoh Kode Untuk Gambar Tunggal:

<A rel = "lytebox" onblur = "try {parent.deselectBloggerImageGracefully ();} catch (e) {}"  style = "display: block; margin: 10px 0px auto; text-align: center; kursor: pointer; kursor: tangan; width: 400px; height: 324px;"  border = "0" alt = "" id = "BLOGGER_PHOTO_ID_5406207422236379378" /> </ a> 

Dan Anda selesai.

Langkah 2.2 - Cara Membuat Galeri Foto Kelompok

Kami akan melakukan hal yang sama seperti langkah sebelumnya, tapi bukannya menambahkan Hanya

rel = "lytebox" 

kita harus menambahkan nama untuk kode ini sehingga akan menjadi

rel = "lytebox [groub1]" 

ketika Anda menambahkan kode ini untuk lebih dari satu gambar, semua gambar akan terbuka sebagai sebuah kelompok.

Contoh Kode Untuk Album Gambar:

<A rel = "lytebox [groub1]" onblur = "try {parent.deselectBloggerImageGracefully ();} catch (e) {}"  style = "display: block; margin: 10px 0px auto; text-align: center; kursor: pointer; kursor: tangan; width: 400px; height: 324px;"  border = "0" alt = "" id = "BLOGGER_PHOTO_ID_5406207422236379378" /> </ a>

 <A rel = "lytebox [groub1]" onblur = "try {parent.deselectBloggerImageGracefully ();} catch (e) {}"  style = "display: block; margin: 10px 0px auto; text-align: center; kursor: pointer; kursor: tangan; width: 400px; height: 324px;"  border = "0" alt = "" id = "BLOGGER_PHOTO_ID_5406207422236379378" /> </ a>

Langkah 2.2 - Cara Membuat Slide Show

Sebaliknya Dari menambahkan

rel = "lytebox [groub1]"

Kami akan menambahkan

rel = "lyteshow [groub1]"

Contoh Kode Untuk Slide Show:

<A rel = "lyteshow [groub1]" onblur = "try {parent.deselectBloggerImageGracefully ();} catch (e) {}"  style = "display: block; margin: 10px 0px auto; text-align: center; kursor: pointer; kursor: tangan; width: 400px; height: 324px;"  border = "0" alt = "" id = "BLOGGER_PHOTO_ID_5406207422236379378" /> </ a>

 <A rel = "lyteshow [groub1]" onblur = "try {parent.deselectBloggerImageGracefully ();} catch (e) {}"  style = "display: block; margin: 10px 0px auto; text-align: center; kursor: pointer; kursor: tangan; width: 400px; height: 324px;"  border = "0" alt = "" id = "BLOGGER_PHOTO_ID_5406207422236379378" /> </ a>

Demo

Klik di sini untuk melihat demo, terima kasih khusus untuk dolem

Langkah 2.3 - Dan Anda Dapat Menambah Ini Untuk Link

Kode link yang normal terlihat seperti ini

<a href="http://www.google.com" title="Search Google" rev="width: 400px; height: 300px;"> Google Search </ a> 

Kami akan menambahkan Kode berikut untuk itu.

rel = "lyteframe" 

Jadi Kode ini akan

<a rel="lyteframe" href="http://www.google.com" title="Search Google" rev="width: 400px; height: 300px;"> Google Search </ a> 

Dan Anda dapat menerapkan pengaturan yang sama untuk slide show dan kelompok foto untuk link.

Continue reading...

Tambahkan menu Bergaya Untuk Sidebar Anda Dan A Way Sangat Mudah Untuk Gunakan Dan Sesuaikan Ini.

Beberapa orang menghubungi saya bertanya tentang bagaimana menambahkan menu cantik untuk seorang blogger blog sidebar, Hari ini saya akan mengajar Anda dalam cara yang sangat mudah cara menambahkan menu ke sidebar Anda dan bagaimana untuk menyesuaikan warna itu untuk berbaur dengan warna template Anda blogger.

Menambahkan menu horizontal ke blog blogger Anda.

Pergi ke akun blogger Anda, dan pergi ke Dashboard> Layout>>> dan di halaman Elemen Halaman, klik Tambah Gadget A dan pilih HTML / JavaScript Tambahkan lalu copy kode berikut dan paste di area Konten HTML / JavaScript.

paste it in the HTML/JavaScript Content area.

<style type="text/css">

/* Made By sharetex.blogspot.com */

#ddblueblockmenu{
border: 1px solid #000000; /*Main Border Color */
border-bottom-width: 0;
width: 100%;
}

#ddblueblockmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}

#ddblueblockmenu a{
display: block;
padding: 3px 0;
padding-left: 9px;
width: 94%; /*94% minus all left/right paddings and margins*/
text-decoration: none;
color: #ffffff; /* Menu Font Color */
background-color: #2175bc; /*Menu background Color */
border-bottom: 1px solid #90bade; /*Bottom border color */
border-left: 7px solid #1958b7; /*Left border color */
list-style-type:none; 
}

* html #ddblueblockmenu a{ /*IE only */
width: 94%; /*IE 5*/
width: 94%; /*94% minus all left/right paddings and margins*/
}

#ddblueblockmenu a:hover {
background-color: #2586d7; /*Menu background Color On Hover*/
border-left-color: #1c64d1; /*Left border color On Hover*/
}

#ddblueblockmenu div.menutitle{
color: #ffffff; /* Title Font Color */
border-bottom: 1px solid black;
padding: 1px 0;
padding-left: 5px;
background-color: #000000;  /*Menu Tite Background Color*/
font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}
/* Made By sharetex.blogspot.com */
</style>

<div id="ddblueblockmenu">

<div class="menutitle">Browse</div>
<ul>
<a href="#">Home</a>
<a href="#">About us</a>
<a href="#">Blogger
templates</a>
<a href="#">Blogger
Tricks</a>
<a href="sharetex.blogspot.com">Blogger Tools</a>
<a href="#">Edit</a></* You can copy this line each time you want to add a new element to your menu and change Edit to your text and change# to the url.*/>
</ul></div><font size="1">Menu By <a
href="sharetex.blogspot.com">sharetex menampilkan</a></font>

Sekarang klik Simpan Dan Anda selesai, silakan cek blog Anda.
sekarang akan mempelajari bagaimana untuk menyesuaikan warna menu untuk saya itu tampak sempurna dengan template blogger Anda Atau Anda hanya dapat meninggalkan sebagai Anda melihatnya.

Continue reading...

Cara Ganti Baru, Lama & Navigasi Beranda Tautan Dengan Tombol Gambar

Dalam tutorial ini saya menunjukkan kepada Anda Bagaimana mengganti Baru, Lama dan link Depan Navigasi dengan tombol gambar. Link-link navigasi yang terletak di bawah Pos (s) Bagian. Jika Anda menggunakan widget Navigasi Halaman Bernomor , link ini terlihat di setiap posting saja. karena navigasi halaman bernomor tidak bekerja pada halaman single post. dan dengan menambahkan tombol ini gambar, ada efek tidak mengambil widget navigasi halaman. 

Cara Ganti Baru, Lama & Home Link Tombol Navigasi Dengan Gambar?

Penting! Back Up Template anda sebelum Membuat perubahan pada Template.

1. Pergi ke Dashboard Blogger -> tab Desain -> Edit HTML
2. Klik pada  Expand Template Widget Checkbox

Mengganti The Link Lama

Pencarian untuk <data:olderPageTitle/> dan ganti dengan kode di bawah ini

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT1cMeWQcTRZfPIJdXCrS7lonrDz7LlNSIxL9X2vQ0ptfBXQz1rSxjzeGkzKtxpUTGPE1rS5w-vC6CCONywsQEZYx43TL_dYgT_FyKaqhAVi5xvPzpm7qLeXJrzg0-M_H48EY6Yy71Qi8c/s1600/w2b_next.png' style='border: 0 none;vertical-align: middle;'/> 

Mengganti The Link Posting Lebih Baru

Pencarian untuk <data:newerPageTitle/> tag dan ganti dengan kode di bawah ini

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcC1tb_nEMhS9i6VQreo3D18cjrDMaEhHByFOcTIJc9MMiEcbPpyo8BiK87VBmxhL7vggK3_5jf7o_6q8zO98nPez6nnJvdQ0xFjUfVql5wJe-mF7pxytzRWeblCkNXtHemNCoxb-JLMhR/s1600/w2b_prev.png' style='border: 0 none;vertical-align: middle;'/> 

Mengganti The Home Link

Pencarian untuk <data:homeMsg/> tag dan ganti dengan kode di bawah ini

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxWijKKx7I9pXlWNbwPGwaLf6LguVWuOSWMEu8eGUBnb5WiJnNNjdqX22hTMHAuhjrOqqYCYsxDI8ht2A2025fM4FAJCAhvr24JRPwddpPZOAYxfmlshwoV7b07cIxWgGx6PwN8jVDQk6s/s1600/w2b_home.png' style='border: 0 none;vertical-align: middle;'/> 

Anda dapat mengubah ikon anda sendiri dengan mengganti Url gambar dalam tiga kode di atas. 

Continue reading...

Baru Facebook Kotak Komentar Untuk Blogger

Apakah facebook fitur baru komentar.

• Komentar threaded: membalas komentar.
• Pengguna jaringan: sekarang menampilkan penulis komentar tidak hanya nama, tapi informasi profile nya juga
• Tautkan ke komentar khusus: Permalinks kini telah ditugaskan untuk setiap komentar sehingga orang dapat berbagi link dan diarahkan ke komentar khusus.
• Pemberitahuan: dikirim ke pengguna juga akan pergi ke permalink, sehingga lebih mudah untuk merespon. Sebagai contoh, klik pada pemberitahuan di bawah ini akan membawa Anda ke permalink komentar asli.
• 2 Skema warna, lampu biasa, dan warna gelap yang baru.

sekarang mari kita lakukan, jangan khawatir, saya tahu yang harus Anda mencoba untuk menambahkan ke blog blogger, tanpa hasil, tetapi hari ini Anda akan melihat bagaimana untuk menambahkannya dalam langkah-langkah sangat mudah dan itu bekerja 100%. tetapi harap berhati-hati dan memperhatikan untuk semua rincian.
Tutorial ini diperbarui.

Langkah 1. Nonaktifkan Default Komentar.

Hal pertama yang harus Anda lakukan untuk menonaktifkan komentar blogger default.karena Anda tidak ingin memiliki 2 bentuk komentar.
pergi ke account blogger Anda, navigasikan ke pengaturan>> komentar
dan di samping kolom komentar pilih Sembunyikan, kemudian gulir ke bawah dan klikSimpan Pengaturan

Langkah 2. Menghasilkan Facebook App ID.

sekarang Anda harus menghasilkan sendiri id facebook app, itu benar-benar mudah dan satu proses langkah,
hanya pergi ke halaman ini, pengembang facebook

kemudian klik + Set Up New Application

masukkan nama aplikasi Anda, (Anda dapat mengetik nama apapun)

dan memeriksa setuju dan klik Buat Aplikasi

kemudian klik pada tab Connect (di sebelah kiri tab-list) atau melihat gambar berikutnya.

dan mengisi info berikut.
Hubungkan URL: Masukkan url blog Anda dan Anda harus memasukkannya dengan dasbor berakhir (misalnya: http://myblogname.blogspot.com/)..

Domain dasar yang Anda harus mengetikkan blogspot.com

kemudian klik strong> setuju dan klik Simpan Perubahan
pada halaman berikutnya facebook akan menghasilkan Anda banyak info. Anda akan hanya perlu satu baris, maka App ID:
hanya menyalin dan menjaga setiap tempat, kita akan membutuhkannya di langkah berikutnya. silakan lihat gambar berikut untuk melihat di mana Anda akan menemukan facebook App ID:.

Langkah 3. Kode Untuk Tambah Untuk Template Anda.

Anda harus menambahkan kode berikut ke template blogger Anda untuk memastikan bahwa kotak komentar akan bekerja untuk blog Anda dengan cara yang benar.
dan dalam langkah ini kita akan menambahkan kode berikut,

• atribut xmlns
• SDK skrip
• Grafik protokol tag terbuka

• Menambahkan atribut xmlns:

silakan pergi ke account blogger Anda lagi, dan arahkan ke, tata letak>> edit html>> dan periksa Expand Widget Template
kemudian menemukan kode berikut,

<Html 

Anda akan menemukan di bagian atas kode Anda. baris kedua atau ketiga, dan setelah itu tambahkan kode berikut,

xmlns: fb = 'http://www.facebook.com/2008/fbml' 

Anda harus mengetik spasi sebelum dan sesudahnya,
di sini adalah contoh.

<html xmlns:fb='http://www.facebook.com/2008/fbml' expr:dir='data:blog..............2005/gml/expr'> 

• Menambahkan Kode skrip SDK:

cari

<body> 

dan setelah itu tambahkan kode berikut,

<div id="fb-root"></div>
<script>
    window.fbAsyncInit = function() {
    FB.init({
      appId  : 'YOUR   APP ID',
      status : true, // check login status
        cookie : true, // enable cookies to allow the server to access the   session
      xfbml  : true  // parse XFBML
    });
  };

    (function() {
    var e = document.createElement('script');
      e.src = document.location.protocol +   '//connect.facebook.net/en_US/all.js';
    e.async = true;
      document.getElementById('fb-root').appendChild(e);
    }());
</script>

tapi tolong jangan lupa untuk mengubah ID APP ANDA untuk id aplikasi Anda (Anda mendapatkannya pada langkah sebelumnya).

• Menambahkan tag Grafik protokol Buka:

salin kode berikut.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta   expr:content='data:blog.pageTitle' property='og:title'/>
<meta   expr:content='data:blog.url' property='og:url'/>
<b:else/>
<meta   expr:content='data:blog.title' property='og:title'/>
<meta   expr:content='data:blog.homepageUrl' property='og:url'/>
</b:if>
<meta   content='MY-SITE-NAME' property='og:site_name'/>
<meta   content='http://google.com/help/hc/images/logos/blogger_logo.gif'   property='og:image'/>
<meta content='YOUR-APP-ID'   property='fb:app_id'/>
<meta content='YOUR-FACEBOOK-PROFILE-ID'   property='fb:admins'/>
<meta content='article'   property='og:type'/>

dan mengubah teks berwarna yang berikut,
Perubahan-SITUS SAYA-NAMA dengan yang Anda ingin ditampilkan ketika pengguna menyukai halaman. (Gil suka Membantu di Facebook)

Ubah http://google.com/ ... / blogger_logo.gif dengan logo blog Anda, atau menghapus tag sekali jika Anda tidak menginginkannya.

Perubahan-APP ANDA-ID dengan nomor ID Anda aplikasi.

Perubahan-ANDA FACEBOOK-PROFIL-ID dengan user ID Anda sendiri profil facebook.

setelah melakukan perubahan ini menambahkan kode di atas sebelum

</ Head> 

sekarang kita selesai menambahkan kode ke template facebook Anda, jangan menyentuh apa pun dan melanjutkan ke langkah berikutnya.

Langkah 5. Menambahkan Kotak Komentar ke template blogger Anda.

silahkan mencari kode berikut.

<data:post.body/> 

dan setelah itu, silakan sisipkan salah satu kode berikut.
Untuk kotak Komentar Cahaya (seperti yang ada di demo)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p align='left'><img alt='' class='icon-action' height='51' src='http://blog.flamingtext.com/blog/2011/12/26/flamingtext_com_1324918931_26831.png' width='331'/></p>

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div><fb:comments width='450' expr:title='data:post.title' expr:href='data:post.url'   expr:xid='data:post.id'/></div>
<div style='background-color: #f2f2f2;border: solid 1px #cccccc; font-size:10px; padding:3px;width:100%;'> <img alt='' class='icon-action' height='16' src='http://allblogtools.com/imgup/1-2010/allblogtools-blogger-templa.gif' width='16'/> <b><a href='http://www.sharetex.blogspot.com/' target='_blank' title='blogger templates'>AllBlogToolsFacebook comments for blogger</a>  brought to you by <a href='http://www.shartex.blogspot.com/' target='_blank' title='blogger templates'>AllBlogTools.com , Get Yours?</a></b></div>
</b:if>

Untuk Gelap kotak Komentar (Jika Anda lebih memilih untuk menampilkan kotak komentar dalam warna gelap.)

<data:post.body/> 

dan setelah itu, silakan sisipkan salah satu kode berikut.
Untuk kotak Komentar Cahaya (seperti yang ada di demo)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p align='left'><img alt='' class='icon-action' height='51' src='http://blog.flamingtext.com/blog/2011/12/26/flamingtext_com_1324918931_26831.png' width='331'/></p>

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div><fb:comments width='450' expr:title='data:post.title' expr:href='data:post.url' colorscheme='dark' expr:xid='data:post.id'/></div>
<div style='background-color: #f2f2f2;border: solid 1px #cccccc; font-size:10px; padding:3px;width:100%;'> <img alt='' class='icon-action' height='16' src='http://allblogtools.com/imgup/1-2010/allblogtools-blogger-templa.gif' width='16'/> <b><a href='http://www.shartex.blogspot.com/' target='_blank' title='blogger templates'>Facebook comments for blogger</a>  brought to you by <a href='http://www.sharetex.blogspot.com/' target='_blank' title='blogger templates'>sharetex.blogspot.com , Get Yours?</a></b></div>
</b:if>

Untuk mengubah lebar kotak komentar anda, silahkan ubah 450 untuk apa yang pernah anda inginkan, itu dalam pixel,

dan sekarang silahkan klik Simpan Template, kemudian memeriksa blog Anda. saya ingin terlihat besar dan bekerja sempurna.

Continue reading...