Blog Database

Home » Posts filed under Posting

Tampilkan postingan dengan label Posting. Tampilkan semua postingan

Senin, 04 November 2013

Tombol Demo dan Download Model Flat

Blog dengan content download akan terlihat lebih bagus jika dipasang tombol / button dengan sedikit bergaya, contohnya seperti pada trik blog kita kali ini memasang Tombol Demo dan Download Model Flat seperti yang sering kita lihat pada website penyedia content download.

yang tertarik untuk memasang Tombol Demo dan Download Model Flat, ikuti langkah-langkah berikut ini :

1. Langsung saja pada Edit HTML template blog

2. Cari kode ]]></b:skin> dan letakkan kode berikut diatasnya

.button{list-style:none;text-align:center;width:100%;margin:5px auto;padding:0;clear:both;}
.button li{display:inline;margin:0;padding:0;}
.button li a{background:#3498db;display:inline-block;height:30px;margin:auto 5px;line-height:32px;width:120px;color:#fff !important;font-size:12px;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;cursor:default !important;font-family:arial,sans-serif;font-weight:700;text-transform:uppercase;}
.button li a:hover{background:#2980b9;}

3. Kemudian SAVE Template

4. Selanjutnya paste kode ini setiap anda akan membuat postingan (pada mode HTML)

<div style="text-align: center;">
<ul class="button">
<li><a href="#" target="_blank">Live Demo</a></li>
<li><a href="#" target="_blank">Download</a></li>
</ul>
</div>

Selasa, 03 September 2013

hrecipe Gambar Posting dan Rating Bintang di Google

Jika kita mencari sebuah artikel di google disana kita akan melihat beberapa hasil pencarian dari berbagai sumber, biasanya yang pertama adalah yang terbaik dan selalu menjadi target utama para penelusur. Tetapi disaat ini setelah maraknya gambar postingan dan rating bintang dimunculkan pada hasil pencarian google selalu menjadi target utama para penelusur karena memang terlihat lebih menarik.

Jika anda tertarik ingin menampilkan gambar artikel dan rating bintang pada pencarian google, silahkan ikuti langkah-langkah dibawah ini

1.Login ke blogger
2. Pada dashboard, pilih blog anda lalu klik Template > Edit HTML
3. Cari kode ]]></b:skin> dan letakkan kode berikut ini diatasnya

.hrecipe{
        display:block;
        width:auto;
        background:#FFFFFF;
        border:1px solid #000000;
        padding:0;
        margin:30px 0 10px 0;
        font:normal 12px Arial;
        color:#444;
        }

.hrecipe .kontainer{padding:5px;}
.hrecipe h4{
        background:#01b8c0;
        border:none;
        border-bottom:1px solid #000000;
        color:#444;
        text-transform:normal;
        font:bold 12px Arial;
        padding:5px 10px;
        margin:0 0 0 0;
        display:block;
        }

.hrecipe h4 a{color:#FEEA83;}
        .hrecipe img{
        width:120px;
        height:88px;
        margin:0 10px 0 0;
        float:left;
        border:0px solid #000000;
        padding:2px;
        background:#01b8c0;
        }

4. Cari kode <data:post.body/> dan letakkan lagi kode berikut dibawahnya, biasanya terdapat 4 kode ini bagi yang menggunakan read more, cobalah salah satu

    <div class='hrecipe'>
      <h4><a expr:href='data:blog.homepageUrl'><data:post.author/></a> - <data:post.title/></h4>
    <div class='kontainer'>
    <img alt='thumbnail' class='photo' expr:src='data:post.thumbnailUrl' expr:title='data:post.title'/>
      Title: <span class='item' style='color:green;'><span class='fn'><data:post.title/></span></span><br/>
    Posted by:<span class='author' style='color:red;'><data:post.author/></span><br/>
    Published :<span class='published'><data:post.timestampISO8601/></span><br/>
    <span class='review hreview-aggregate'>
    <span class='rating'>
    Rating: <span class='average'>5</span><br/>
    Reviewer: <span class='count'>3592</span> Reviews<br/></span></span>
    <span class='summary'><data:post.title/></span>
    </div>
      </div>

5. Simpan Template dan lihat hasilnya

Selasa, 27 Agustus 2013

Agar Gambar Posting Bisa Muncul di Hasil Pencarian Google

Cara Menampilkan Gambar Artikel dan Rating Bintang dihasil Pencarian Google

Sebenarnya cara menampilkan gambar posting dan rating bintang dihasil pencarian google sangalah mudah, saya sendiri pernah menerapkannya, anda tidak percaya ?? lihat saya gambar diatas, gambar postingan blog ini muncul di pencarian google, dan bukan hanya gambar posting yang muncul, tetapi juga Rating Bintangnya pun muncul. perbesar hasil screenshot dibawah untuk lebih jelas

Cara Menampilkan Gambar Artikel dan Rating Bintang dihasil Pencarian Google ini bisa membantu anda menaikan visitor blog anda, karena apa ?? karena pengunjung lebih tertarik memilih pencarian yang bergambar dari pada yang tidak, contohnya saja saya memang suka memilih hasil pencarian yang ada gambar author / admin blognya dan juga Gambar Posting dan Rating Bintang , hehehe

Ini yang dinamakan Rich Snippet Recipe , tahukah anda apa itu Rich Snippet Recipe ??? kurang lebih penjelasannya begini data yang dikirim oleh artikel blog yang sudah di optimasi, lalu diterima oleh Google dalam tampilan Judul, Gambar, Rating, Jumlah Ulasan dan Deskripsi di hasil pencariannya.

Kurang dari satu minggu saya menerapkan cara ini di blog saya yang lain , wah ternyata viitornya bertambah pesat , padahal blognya masih jelek , tapi alhamdulillah visitornya sudah mulai naik , hehehe

Anda tertarik Menampilkan Gambar Posting dan Rating Bintang dihasil Pencarian Google ??

Berikut ini caranya :

1.Login ke blogger
2. Pada dashboard, pilih blog anda lalu klik Template > Edit HTML

3. Cari kode ]]></b:skin> dan letakkan kode berikut ini diatas kode tadi

.hrecipe{font:14px Arial;}

4. Selanjutnya Cari kode data:post.body
5. Copy kode dibawah ini lalu letakkan di bawah data:post.body yang kedua (kalau tidak jadi coba terus yang lainnya

<div class='hrecipe'>
<span style='float:left;'><img alt='thumbnail' class='photo' expr:src='data:post.thumbnailUrl' expr:title='data:post.title'/></span>
Title: <span class='item'><span class='fn'><data:post.title/></span></span><br/>
Posted by:<span class='author'><data:post.author/></span><br/>
Published :<span class='published'><data:post.timestampISO8601/></span><br/>
<span class='review hreview-aggregate'>
<span class='rating'>
Rating: <span class='average'>3.5</span><br/>
Reviewer: <span class='count'>5</span> Reviews<br/></span></span>
<span class='summary'><data:post.title/></span>
</div>

6. Simpan Template anda
7. Cek salah satu artikel blog anda di Google Richsnippets dan masukan salah satu url blog anda , apabila sudah ada gambar posting dan ratingnya maka anda berhasil menerapkan langkah ini.

Sabtu, 24 Agustus 2013

Memasang Tombol Share FB, Twitter dan Google +

Untuk pemasangan tombol Share FB, Twitter dan Google+ sekarang sangatlah gampang dengan adanya script instan dari web penyedia script sharing tersebut, diantaranya ShareThis, AddThis dan lain sebagainya. Kita hanya tinggal memilih dan menentukan model widget yang diinginkan.

Kali ini kita akan coba memasang tombol-tombol tersebut dari script AddThis

Diatas Posting

Untuk memasang tombol FB, Twitter dan Google+ dengan posisi diatas posting cari kode <data:post.body/> dan letakkan kode dibawah ini tepat diatas <data:post.body/>

<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid=xa-4ee950b47f78c765"></script>

Dibawah Posting

Jika anda menginginkan tombol-tombol tersebut berada dibawah posting silahkan paste kode tersebut dibawah <data:post.body/>

Keterangan

Jika terdapat 4 <data:post.body/> pada template blog anda pastekan kode diatas atau dibawah <data:post.body/> yang ke 3, atau jika tidak berhasil coba pastekan dari 1 sampai 4.

Rabu, 31 Juli 2013

Cara Mudah Menampilkan Gambar Artikel Dihasil Pencarian Google

Ini yang dinamakan Rich Snippet Recipe, tahukah anda apa itu Rich Snippet Recipe ??? kurang lebih penjelasannya begini data yang dikirim oleh artikel blog yang sudah di optimasi, lalu diterima oleh Google dalam tampilan Judul, Gambar, Rating, Jumlah Ulasan dan Deskripsi di hasil pencariannya.

Berikut langkah-langkah menampilkan gambar posting di pencarian google
1.Login ke blogger
2. Pada dashboard, pilih blog anda lalu klik Template > Edit HTML

3. Cari kode ]]></b:skin> dan letakkan kode berikut ini diatas kode tadi

.hrecipe{font:14px Arial;}

4. Selanjutnya Cari kode <data:post.body/>
5. Copy kode dibawah ini lalu letakkan di bawah <data:post.body/> yang terakhir (jika ada 3 <data:post.body/> letakkan dibawah yang ketiga, jika ada 4 letakkan dibawah yang keempat)

<div class='hrecipe'>
<span style='float:left;'><img alt='thumbnail' class='photo' expr:src='data:post.thumbnailUrl' expr:title='data:post.title'/></span>
Title: <span class='item'><span class='fn'><data:post.title/></span></span><br/>
Posted by:<span class='author'><data:post.author/></span><br/>
Published :<span class='published'><data:post.timestampISO8601/></span><br/>
<span class='review hreview-aggregate'>
<span class='rating'>
Rating: <span class='average'>3.5</span><br/>
Reviewer: <span class='count'>5</span> Reviews<br/></span></span>
<span class='summary'><data:post.title/></span>
</div>

6. Simpan Template anda

7. Cek salah satu artikel blog anda di Google Richsnippets dan masukan salah satu url blog anda, apabila sudah ada gambar posting dan ratingnya maka anda berhasil menerapkan langkah ini.

Minggu, 28 Juli 2013

Efek Gambar Berputar dan Membesar

Berkreasi dalam dunia blogging memang sangat menyenangkan, sampai sampai tidak terasa lagi waktu yang telah berlalu. dalam dunia blogging, tampilan sebuah blog yang memiliki kreasi tinggi akan menambah pengunjung berminat untuk berkunjung ke blog tersebut, apalagi di tambah dengan artikel-artikel yang sangat menarik, akan semakin mendongkrak jumlah pengunjung. Cukup demikian basa-basilnya (heheheheheee.. ) mari kita menuju ke pokok pembahasan.

Kali ini saya sedikit berbagi tentang cara membuat gambar dalam posting blog berputar dan membesar saat di sentung oleh cursor, untuk contohnya coba sobat arahkan cursor ke gambar Naruto di atas, maka gambar akan berputar dan membesar. Apabila sobat blogger sekalian berminat untuk mencoba silakan ikuti langkah-langkah berikut ini:

1. Seperti biasa sobat harus login dulu di akun blog sobat

2. Pilih rancangan / desing dan klik edit HTML dan lanjutkan

3. Centang "Expand Template Widget" untuk menghindari apabila terjadi kesalahan

4. Sobat cari kode </head>

5. Setelah ketemu sobat copy paste code di bawah ini tepat di atas kode </head>

<style>#denzuaz img{-moz-transition:all .8s ease-in-out;-ms-transition:all .8s ease-in-out;-o-transition:all .8s ease-in-out;-webkit-transition:all .8s ease-in-out;transition:all .8s ease-in-out;}
#denzuaz img:hover{ -o-transform: scale(1.5) rotate(360deg); -moz-transform: scale(1.5) rotate(360deg); -webkit-transform: scale(1.5) rotate(360deg);}</style>

6. dan sobat klik save / simpan template.

Langkah selanjutnya untuk penenpatan gambar dalam postingan.

1. Sobat harus menambahkan kode <div id="denzuaz"> sebelum url gambar dan jangan lupa di tutup dengan kode </div> contoh seperti di bawah ini:

<div id="denzuaz">
<a href="http://zuazz.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5XoFFtCjLrdmKicj_vxBokBER5rKvwswTH6NMfKp-GRrMD_BwMFDETgNi_hEbX-cnREmCmjYPvS7CJlJZ38Upqf9xkWseWCKh0NDp2rU5o-ov7oEmvlwdITjgKZrQkAf0yCOR1EpWtA6K/s200/naruto+dont+copy.png" /></a></div>

keterangan:

kode berwarna merah adala kode pembuka dan penutup
kode berwarna hijau silakan sobat ganti dengan URL blog Sobat dan URL gambar yang ingin Sobat pasang di dalam postingan.
Setelah semuanya selesai klik publikasikan.

Demikianlah tips "Membuat Gambar Berputar Dan Membesar Saat Disentuh Oleh Mouse".

Senin, 22 Juli 2013

Membuat Kode Highlight Posting

Memberikan Highlight untuk script atau kode pada postingan akan lebih memperjelas pembaca. Contohnya bisa kamu lihat pada blogku ini. Setiap kali ada script/kode maka akan selalu ada highlight (kotak) yg akan membedakan dengan tulisan yg lain. Nha kamu mau tahu cara pembuatamnya?

Gini nih caranya :
1. Login ke blogger lalu pilih Layout-->Edit HTML
2. Kemudian copy kode dibawah ini lalu pasang di Script CSS kamu atau pasang sebelum kode ]]></b:skin>

.alert { background: #DDE4FF;
text-align: left;
padding: 5px 5px 5px 5px;
border-top: 1px dotted #223344;border-bottom: 1px dotted #223344;border-left: 1px dotted #223344;border-right: 1px dotted #223344;}

Kode yang berwarna merah (#DDE4FF) adalah warna background kotak highlight, kamu bisa menggantinya dengan kode warna yang lain yang cocok dengan background blog kamu. Untuk kode-kode warna bisa dilihat DISINI

3. Kalau sudah kemudian Simpan.

Cara Posting
Supaya kode/scriptnya nanti bisa ada kotak highlight-nya maka untuk memposting harus pake cara2 tersendiri. Yaitu dengan menambahkan kode ini <p class="alert"> sebelum kode/script yg akan diberi highlight. kemudian ditambahkan kode </p> diakhir script/Kode.

Mengganti Older Post dengan Angka

Secara umum, navigasi untuk pindah halaman di blogspot biasanya menggunakan link dengan teks "Older Posts (posting lama)" dan "Newer Posts (posting baru)". Beda dengan wordpress yang navigasinya bisa berbentuk angka sehingga bisa memudahkan untuk loncat beberapa halaman ke postingan yg lama maupun baru.

Trik kali ini akan menjelaskan bagaimana cara mengganti link "Older Posts (posting lama)" dan "Newer Posts (posting baru)" menjadi angka seperti gambar di bawah ini

1. Langkah awal tentu saja harus menuju ke desain template anda kemudian ke "Edit HTML"
2. setelah itu cari kode ini ]]></b:skin> kalo sudah ketemu taruh script dibawah ini sebelum kode tersebut

.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;
}

3. setelah itu cari kode ini </body> kemudian taruh script dibawah ini sebelum kode tersebut.

<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>

Kalau sudah silahkan dilihat hasilnya.

Original Post : trik-tips blogspot

Membuat Efek Zoom Pada Gambar Posting

Rasanya jika tampilan blog hanya teks itu membosankan. Oleh sebab itu perlu juga ada gambar atau foto di blog supaya mata bisa betah dan tertarik untuk melihat blog kita. Baik gambar yang digunakan sebagai ilustrasi postingan atau gambar yang dijadikan banner dan dipasang di sidebar.

Gambar selain bisa menjadi hiasan bisa juga menjadi pendukung dari tulisan kita. Blog sebagai salah satu media sosial yaitu untuk menuangkan ide pikiran dan pengalaman bisa lebih menarik. Salah satunya dengan membuat efek-efek pada gambar yang ada di blog.

Dulu pernah kita pelajari cara membuat efek mouseover. Sekarang kita akan belajar membuat zoom effect atau efek perbesar. Jadi ini adalah cara membuat efek pada gambar yang disentuh oleh mouse otomatis akan zoom atau diperbesar. Untuk membuat zoom effect ini tidaklah sulit, langsung saja simak langkah-langkahnya.

Cara Membuat Zoom Effect pada Gambar di Blog
1. Login ke akun blogger.com
2. Pilih Template kemudian Edit HTML
3. Jangan lupa centang Expand Template Widget
4. Cari kode ]]></b:skin> lalu taruh kode berikut ini diatasnya:

.post img:hover { -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform: scale(1.3); -o-transform: scale(1.3); -webkit-transform: scale(1.3); }

5. Simpan Template jika sudah selesai.

Membuat Shadow pada Gambar Posting

Tampilan blog yang profesional akan sangat didambakan setiap blogger, baik dari segi template blog, paduan warna hingga postingan. Dari segi postingan terlihat sangat kurang profesional jika tidak dilampirkan gambar-gambar yang bagus dan cantik.

Shadow adalah bayangan, efek bayangan yang dipasang pada gambar akan terlihat menarik. Dengan dilampirkannya gambar disetiap lembar posting yang dilengkapi dengan effek shadow bisa menambah profesional dan wibawa tersendiri bagi sebuah blog.

Cara Membuat Efek Shadow pada Gambar
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Rancangan.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode ]]></b:skin>
6. Jika sudah ketemu taruh kode berikut di atasnya:

.drop-shadow img {
background:url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQFpFOZjcqjJMLxaXpKhLrW_DuxQKlW-SksVMKG2yYb88qJV85Dew) no-repeat right bottom;
padding: 5px 10px 10px 5px;
}

7. Cari kode <data:post.body/> lalu ganti kode tersebut dengan kode berikut:

8. Simpan template jika sudah selesai.